Merge pull request #138 from rjpeterson/translate-close-account

Translate close account modal

components/CloseAccountModal.tsx

@@ -14,7 +14,7 @@ import Button from './Button'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
 import { notify } from '../utils/notifications'
-//import { useTranslation } from 'next-i18next'
+import { useTranslation } from 'next-i18next'
 import {
   getMultipleAccounts,
   nativeToUi,
@@ -37,7 +37,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
   isOpen,
   onClose,
 }) => {
-  //const { t } = useTranslation('common')
+  const { t } = useTranslation(['common', 'close-account'])
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
@@ -115,14 +115,14 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
       onClose()
       for (const txid of txids) {
         notify({
-          title: 'Transaction confirmed',
+          title: t('close-account:transaction-confirmed'),
           txid,
         })
       }
     } catch (err) {
       console.warn('Error deleting account:', err)
       notify({
-        title: 'Error deleting account',
+        title: t('close-account:error-deleting-account'),
         description: `${err.message}`,
         txid: err.txid,
         type: 'error',
@@ -135,38 +135,47 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
 
   return (
     <Modal onClose={onClose} isOpen={isOpen && mangoAccount !== undefined}>
-      <ElementTitle noMarignBottom>Are you sure?</ElementTitle>
-      <p className="text-center mt-1">Closing your Mango Account will:</p>
+      <ElementTitle noMarignBottom>
+        {t('close-account:are-you-sure')}
+      </ElementTitle>
+      <p className="text-center mt-1">
+        {t('close-account:closing-account-will')}
+      </p>
       <div className="bg-th-bkg-4 overflow-wrap p-2 sm:p-4 rounded-md space-y-2">
         <div className="flex items-center text-th-fgd-2">
           <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          Delete your Mango Account
+          {t('close-account:delete-your-account')}
         </div>
         {mangoAccount &&
         mangoAccount.getAssetsVal(mangoGroup, mangoCache).gt(ZERO_I80F48) ? (
           <div className="flex items-center text-th-fgd-2">
             <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-            Withdraw assets worth{' '}
-            {formatUsdValue(+mangoAccount.computeValue(mangoGroup, mangoCache))}
+            {t('close-account:withdraw-assets-worth', {
+              value: formatUsdValue(
+                +mangoAccount.computeValue(mangoGroup, mangoCache)
+              ),
+            })}
           </div>
         ) : (
           ''
         )}
         <div className="flex items-center text-th-fgd-2">
           <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          Recover {totalAccountSOL.toFixed(3)} SOL (rent for your account)
+          {t('close-account:recover-x-sol', {
+            amount: totalAccountSOL.toFixed(3),
+          })}
         </div>
         {!mngoAccrued.isZero() ? (
           <div className="flex items-center text-th-fgd-2">
             <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-            Claim{' '}
-            {mangoGroup
-              ? nativeToUi(
-                  mngoAccrued.toNumber(),
-                  mangoGroup.tokens[MNGO_INDEX].decimals
-                ).toFixed(3)
-              : 0}{' '}
-            MNGO Rewards
+            {t('close-account:claim-x-mngo', {
+              amount: mangoGroup
+                ? nativeToUi(
+                    mngoAccrued.toNumber(),
+                    mangoGroup.tokens[MNGO_INDEX].decimals
+                  ).toFixed(3)
+                : 0,
+            })}
           </div>
         ) : (
           ''
@@ -174,38 +183,42 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
       </div>
       {isDisabled ? (
         <>
-          <h3 className="text-center my-3">Before you can continue</h3>
+          <h3 className="text-center my-3">
+            {t('close-account:before-you-continue')}
+          </h3>
           <div className="bg-th-bkg-4 overflow-none p-2 sm:p-4 rounded-md space-y-2">
             {hasBorrows ? (
               <div className="flex items-center text-th-fgd-2">
                 <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-                Close all borrows
+                {t('close-account:close-all-borrows')}
               </div>
             ) : null}
             {hasOpenPositions ? (
               <div className="flex items-center text-th-fgd-2">
                 <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-                Close and settle all perp positons
+                {t('close-account:close-perp-positions')}
               </div>
             ) : null}
             {openOrders && openOrders.length ? (
               <div className="flex items-center text-th-fgd-2">
                 <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-                Close all open orders
+                {t('close-account:close-open-orders')}
               </div>
             ) : null}
           </div>
         </>
       ) : null}
       {!isDisabled ? (
-        <div className="text-th-fgd-2 text-center mt-4">Until next time 👋</div>
+        <div className="text-th-fgd-2 text-center mt-4">
+          {t('close-account:goodbye')}
+        </div>
       ) : null}
       <Button
         onClick={() => closeAccount()}
         disabled={isDisabled}
         className="mt-6 w-full"
       >
-        Close Account
+        {t('close-account:close-account')}
       </Button>
     </Modal>
   )

pages/account.tsx

@@ -43,7 +43,7 @@ import {
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['common'])),
+      ...(await serverSideTranslations(locale, ['common', 'close-account'])),
       // Will be passed to the page component as props
     },
   }
@@ -59,7 +59,7 @@ const TABS = [
 ]
 
 export default function Account() {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation(['common', 'close-account'])
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [showNameModal, setShowNameModal] = useState(false)
   const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
@@ -197,7 +197,7 @@ export default function Account() {
                 >
                   <div className="flex items-center">
                     <TrashIcon className="h-4 w-4 mr-1.5" />
-                    Close Account
+                    {t('close-account:close-account')}
                   </div>
                 </Button>
                 <a

pages/risk-calculator.tsx

@@ -84,7 +84,7 @@ interface ScenarioCalculator {
 }
 
 export default function RiskCalculator() {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation('common') // TOTRANSLATE
 
   // Get mango account data
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)

public/locales/en/close-account.json

@@ -0,0 +1,16 @@
+{
+  "are-you-sure": "Are you sure?",
+  "before-you-continue": "Before you can continue",
+  "claim-x-mngo": "Claim {{amount}} MNGO rewards",
+  "close-account": "Close Account",
+  "close-all-borrows": "Close all borrows",
+  "close-open-orders": "Close all open orders",
+  "close-perp-positions": "Close and settle all Perp positons",
+  "closing-account-will": "Closing your Mango Account will:",
+  "delete-your-account": "Delete your Mango account",
+  "error-deleting-account": "Error deleting account",
+  "goodbye": "Until next time 👋",
+  "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+  "transaction-confirmed": "Transaction Confirmed",
+  "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}

public/locales/es/close-account.json

@@ -0,0 +1,16 @@
+{
+  "are-you-sure": "Are you sure?",
+  "before-you-continue": "Before you can continue",
+  "claim-x-mngo": "Claim {{amount}} MNGO rewards",
+  "close-account": "Close Account",
+  "close-all-borrows": "Close all borrows",
+  "close-open-orders": "Close all open orders",
+  "close-perp-positions": "Close and settle all Perp positons",
+  "closing-account-will": "Closing your Mango Account will:",
+  "delete-your-account": "Delete your Mango account",
+  "error-deleting-account": "Error deleting account",
+  "goodbye": "Until next time 👋",
+  "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+  "transaction-confirmed": "Transaction Confirmed",
+  "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}

public/locales/es/common.json

@@ -392,5 +392,7 @@
   "you-must-leave-enough-sol": "You must leave enough SOL in your wallet to pay for the transaction",
   "your-account": "Su cuenta",
   "your-assets": "Sus activos",
-  "your-borrows": "Sus préstamos"
+  "your-borrows": "Sus préstamos",
+
+  "performance": "Performance"
 }

public/locales/zh/close-account.json

@@ -0,0 +1,16 @@
+{
+  "are-you-sure": "您确定吗？",
+  "before-you-continue": "进行之前",
+  "claim-x-mngo": "收获{{amount}}MNGO奖励",
+  "close-account": "关闭帐户",
+  "close-all-borrows": "归还所有借贷",
+  "close-open-orders": "取消所有挂单",
+  "close-perp-positions": "结清所有永续合约持仓",
+  "closing-account-will": "关闭Mango帐户您就会：",
+  "delete-your-account": "删除您的Mango帐户",
+  "error-deleting-account": "删除帐户出错",
+  "goodbye": "再见 👋",
+  "recover-x-sol": "收回{{amount}}SOL（帐户租金）",
+  "transaction-confirmed": "交易成功",
+  "withdraw-assets-worth": "将总价值{{value}}提出到您的钱包"
+}

public/locales/zh/common.json

@@ -245,6 +245,7 @@
     "orderbook": "订单簿",
     "orderbook-animation": "订单动画",
     "orders": "订单",
+    "performance": "表现",
     "period-progress": "期间进度",
     "perp": "Perp",
     "perp-fees": "Mango永续合约费率",

public/locales/zh_tw/close-account.json

@@ -0,0 +1,16 @@
+{
+  "are-you-sure": "您確定嗎？",
+  "before-you-continue": "進行之前",
+  "claim-x-mngo": "收穫{{amount}}MNGO獎勵",
+  "close-account": "關閉帳戶",
+  "close-all-borrows": "歸還所有借貸",
+  "close-open-orders": "取消所有掛單",
+  "close-perp-positions": "結清所有永續合約持倉",
+  "closing-account-will": "關閉Mango帳戶您就會：",
+  "delete-your-account": "刪除您的Mango帳戶",
+  "error-deleting-account": "刪除帳戶出錯",
+  "goodbye": "再見 👋",
+  "recover-x-sol": "收回{{amount}}SOL（帳戶租金）",
+  "transaction-confirmed": "交易成功",
+  "withdraw-assets-worth": "將總價值{{value}}提出到您的錢包"
+}

public/locales/zh_tw/common.json

@@ -245,6 +245,7 @@
   "orderbook": "掛單簿",
   "orderbook-animation": "訂單動畫",
   "orders": "訂單",
+  "performance": "表現",
   "period-progress": "期間進度",
   "perp": "Perp",
   "perp-fees": "Mango永續合約費率",