From b3acab5c87c7829f727e0a0a8a3e3c0f20af34ec Mon Sep 17 00:00:00 2001
From: Adnan Sahovic <63151811+adnansahovic@users.noreply.github.com>
Date: Fri, 25 Nov 2022 11:26:29 +0100
Subject: [PATCH] Token allowance i18n interpolation system (#16347)

* added i18n interpolation system to token-allowance screen

* modified revokeSpendingCap

* Fixed minor type error

* resolved conflicts
---
 app/_locales/en/messages.json               |  6 ++--
 ui/pages/token-allowance/token-allowance.js | 40 +++++++++++++--------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index e777aa2c4..b09bfe668 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2969,7 +2969,8 @@
     "description": "$1 is either key 'account' or 'contract', and $2 is either a string or link of a given token symbol or name"
   },
   "revokeSpendingCap": {
-    "message": "Revoke spending cap for your"
+    "message": "Revoke spending cap for your $1",
+    "description": "$1 is a token symbol"
   },
   "revokeSpendingCapTooltipText": {
     "message": "This contract will be unable to spend any more of your current or future tokens."
@@ -3159,7 +3160,8 @@
     "description": "The token symbol that is being approved"
   },
   "setSpendingCap": {
-    "message": "Set a spending cap for your"
+    "message": "Set a spending cap for your $1",
+    "description": "$1 is a token symbol"
   },
   "settings": {
     "message": "Settings"
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index aea5fecbc..1573e2a56 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -187,6 +187,17 @@ export default function TokenAllowance({
 
   const isEmpty = customTokenAmount === '';
 
+  const renderContractTokenValues = (
+    <Box marginTop={4} key={tokenAddress}>
+      <ContractTokenValues
+        tokenName={tokenSymbol}
+        address={tokenAddress}
+        chainId={fullTxData.chainId}
+        rpcPrefs={rpcPrefs}
+      />
+    </Box>
+  );
+
   return (
     <Box className="token-allowance-container page-container">
       <Box
@@ -265,27 +276,28 @@ export default function TokenAllowance({
           </Typography>
         </Box>
       </Box>
-      <Box marginBottom={5} marginLeft={4} marginRight={4}>
+      <Box marginLeft={4} marginRight={4}>
         <Typography
           variant={TYPOGRAPHY.H3}
           fontWeight={FONT_WEIGHT.BOLD}
           align={TEXT_ALIGN.CENTER}
         >
-          {isFirstPage && t('setSpendingCap')}
-          {!isFirstPage &&
-            (customTokenAmount === '0' || isEmpty
-              ? t('revokeSpendingCap')
-              : t('reviewSpendingCap'))}
+          {isFirstPage ? (
+            t('setSpendingCap', [renderContractTokenValues])
+          ) : (
+            <Box>
+              {customTokenAmount === '0' || isEmpty ? (
+                t('revokeSpendingCap', [renderContractTokenValues])
+              ) : (
+                <Box>
+                  {t('reviewSpendingCap')}
+                  {renderContractTokenValues}
+                </Box>
+              )}
+            </Box>
+          )}
         </Typography>
       </Box>
-      <Box>
-        <ContractTokenValues
-          tokenName={tokenSymbol}
-          address={tokenAddress}
-          chainId={fullTxData.chainId}
-          rpcPrefs={rpcPrefs}
-        />
-      </Box>
       <Box
         marginTop={1}
         display={DISPLAY.FLEX}