fix: pluralization in earn screen (#3281)

Signed-off-by: Prakhar Agarwal <prakharagarwal3031@gmail.com>

app/i18n/en/index.ts

@@ -82,7 +82,9 @@ const en: BaseTranslation = {
     message: "Conversion successful",
   },
   EarnScreen: {
-    earnSats: "Earn {formattedNumber|sats}",
+    satoshi: "sat",
+    satoshis: "sats",
+    earnSats: "Earn {formattedAmount: string}",
     earnSections: {
       bitcoinWhatIsIt: {
         title: "Bitcoin: What is it?",
@@ -2032,10 +2034,10 @@ const en: BaseTranslation = {
     getRewardNow: "Answer quiz",
     keepDigging: "Keep digging!",
     phoneNumberNeeded: "Phone number required",
-    quizComplete: "Quiz completed and {amount: number} sats earned",
+    quizComplete: "Quiz completed and {formattedAmount: string} earned",
     reviewQuiz: "Review quiz",
     satAccumulated: "Sats accumulated",
-    satsEarned: "{formattedNumber|sats} earned",
+    satsEarned: "{formattedAmount: string} earned",
     sectionsCompleted: "You've completed",
     title: "Earn",
     unlockQuestion: "To unlock, answer the question:",

app/i18n/i18n-types.ts

@@ -275,10 +275,18 @@ type RootTranslation = {
 	}
 	EarnScreen: {
 		/**
-		 * E​a​r​n​ ​{​f​o​r​m​a​t​t​e​d​N​u​m​b​e​r​|​s​a​t​s​}
-		 * @param {unknown} formattedNumber
+		 * s​a​t
 		 */
-		earnSats: RequiredParams<'formattedNumber|sats'>
+		satoshi: string
+		/**
+		 * s​a​t​s
+		 */
+		satoshis: string
+		/**
+		 * E​a​r​n​ ​{​f​o​r​m​a​t​t​e​d​A​m​o​u​n​t​}
+		 * @param {string} formattedAmount
+		 */
+		earnSats: RequiredParams<'formattedAmount'>
 		earnSections: {
 			bitcoinWhatIsIt: {
 				/**
@@ -6244,10 +6252,10 @@ type RootTranslation = {
 		 */
 		phoneNumberNeeded: string
 		/**
-		 * Q​u​i​z​ ​c​o​m​p​l​e​t​e​d​ ​a​n​d​ ​{​a​m​o​u​n​t​}​ ​s​a​t​s​ ​e​a​r​n​e​d
-		 * @param {number} amount
+		 * Q​u​i​z​ ​c​o​m​p​l​e​t​e​d​ ​a​n​d​ ​{​f​o​r​m​a​t​t​e​d​A​m​o​u​n​t​}​ ​e​a​r​n​e​d
+		 * @param {string} formattedAmount
 		 */
-		quizComplete: RequiredParams<'amount'>
+		quizComplete: RequiredParams<'formattedAmount'>
 		/**
 		 * R​e​v​i​e​w​ ​q​u​i​z
 		 */
@@ -6257,10 +6265,10 @@ type RootTranslation = {
 		 */
 		satAccumulated: string
 		/**
-		 * {​f​o​r​m​a​t​t​e​d​N​u​m​b​e​r​|​s​a​t​s​}​ ​e​a​r​n​e​d
-		 * @param {unknown} formattedNumber
+		 * {​f​o​r​m​a​t​t​e​d​A​m​o​u​n​t​}​ ​e​a​r​n​e​d
+		 * @param {string} formattedAmount
 		 */
-		satsEarned: RequiredParams<'formattedNumber|sats'>
+		satsEarned: RequiredParams<'formattedAmount'>
 		/**
 		 * Y​o​u​'​v​e​ ​c​o​m​p​l​e​t​e​d
 		 */
@@ -9316,9 +9324,17 @@ export type TranslationFunctions = {
 	}
 	EarnScreen: {
 		/**
-		 * Earn {formattedNumber|sats}
+		 * sat
 		 */
-		earnSats: (arg: { formattedNumber: unknown }) => LocalizedString
+		satoshi: () => LocalizedString
+		/**
+		 * sats
+		 */
+		satoshis: () => LocalizedString
+		/**
+		 * Earn {formattedAmount}
+		 */
+		earnSats: (arg: { formattedAmount: string }) => LocalizedString
 		earnSections: {
 			bitcoinWhatIsIt: {
 				/**
@@ -15284,9 +15300,9 @@ export type TranslationFunctions = {
 		 */
 		phoneNumberNeeded: () => LocalizedString
 		/**
-		 * Quiz completed and {amount} sats earned
+		 * Quiz completed and {formattedAmount} earned
 		 */
-		quizComplete: (arg: { amount: number }) => LocalizedString
+		quizComplete: (arg: { formattedAmount: string }) => LocalizedString
 		/**
 		 * Review quiz
 		 */
@@ -15296,9 +15312,9 @@ export type TranslationFunctions = {
 		 */
 		satAccumulated: () => LocalizedString
 		/**
-		 * {formattedNumber|sats} earned
+		 * {formattedAmount} earned
 		 */
-		satsEarned: (arg: { formattedNumber: unknown }) => LocalizedString
+		satsEarned: (arg: { formattedAmount: string }) => LocalizedString
 		/**
 		 * You've completed
 		 */
@@ -18043,6 +18059,4 @@ export type TranslationFunctions = {
 	}
 }
 
-export type Formatters = {
-	sats: (value: unknown) => unknown
-}
+export type Formatters = {}

app/i18n/raw-i18n/source/en.json

@@ -72,7 +72,9 @@
         "message": "Conversion successful"
     },
     "EarnScreen": {
-        "earnSats": "Earn {formattedNumber|sats}",
+        "satoshi": "sat",
+        "satoshis": "sats",
+        "earnSats": "Earn {formattedAmount: string}",
         "earnSections": {
             "bitcoinWhatIsIt": {
                 "title": "Bitcoin: What is it?",
@@ -1989,10 +1991,10 @@
         "getRewardNow": "Answer quiz",
         "keepDigging": "Keep digging!",
         "phoneNumberNeeded": "Phone number required",
-        "quizComplete": "Quiz completed and {amount: number} sats earned",
+        "quizComplete": "Quiz completed and {formattedAmount: string} earned",
         "reviewQuiz": "Review quiz",
         "satAccumulated": "Sats accumulated",
-        "satsEarned": "{formattedNumber|sats} earned",
+        "satsEarned": "{formattedAmount: string} earned",
         "sectionsCompleted": "You've completed",
         "title": "Earn",
         "unlockQuestion": "To unlock, answer the question:",

app/screens/earns-screen/earns-quiz.tsx

@@ -310,6 +310,12 @@ export const EarnQuiz = ({ route }: Props) => {
     j = (j + 1) as ZeroTo2
   })
 
+  const formatAmount = (amount: number): string => {
+    return amount === 1
+      ? `${amount} ${LL.EarnScreen.satoshi()}`
+      : `${amount} ${LL.EarnScreen.satoshis()}`
+  }
+
   return (
     <Screen backgroundColor={colors._lighterGrey} unsafe>
       <Modal
@@ -373,7 +379,7 @@ export const EarnQuiz = ({ route }: Props) => {
           {(completed && (
             <>
               <Text style={styles.textEarn}>
-                {LL.EarnScreen.quizComplete({ amount })}
+                {LL.EarnScreen.quizComplete({ formattedAmount: formatAmount(amount) })}
               </Text>
               <Button
                 title={LL.EarnScreen.reviewQuiz()}
@@ -385,7 +391,7 @@ export const EarnQuiz = ({ route }: Props) => {
           )) || (
             <Button
               title={LL.EarnScreen.earnSats({
-                formattedNumber: amount,
+                formattedAmount: formatAmount(amount),
               })}
               buttonStyle={styles.buttonStyle}
               titleStyle={styles.titleStyle}

app/screens/earns-screen/earns-section.tsx

@@ -228,6 +228,12 @@ export const EarnSection = ({ route }: Props) => {
     navigation.navigate("earnsQuiz", { id })
   }
 
+  const formatAmount = (amount: number): string => {
+    return amount === 1
+      ? `${amount} ${LL.EarnScreen.satoshi()}`
+      : `${amount} ${LL.EarnScreen.satoshis()}`
+  }
+
   const CardItem = ({ item }: { item: QuizQuestionForSectionScreen }) => {
     return (
       <>
@@ -256,8 +262,10 @@ export const EarnSection = ({ route }: Props) => {
               titleStyle={item.completed ? styles.titleStyleFulfilled : styles.titleStyle}
               title={
                 item.completed
-                  ? LL.EarnScreen.satsEarned({ formattedNumber: item.amount })
-                  : LL.EarnScreen.earnSats({ formattedNumber: item.amount })
+                  ? LL.EarnScreen.satsEarned({
+                      formattedAmount: formatAmount(item.amount),
+                    })
+                  : LL.EarnScreen.earnSats({ formattedAmount: formatAmount(item.amount) })
               }
               icon={
                 item.completed ? (