translate close account modal

2022-01-18 12:16:18 -06:00 · 2022-01-18 12:16:18 -06:00 · fe857554be
parent 765352741d
commit fe857554be
9 changed files with 99 additions and 32 deletions
--- a/components/CloseAccountModal.tsx
+++ b/components/CloseAccountModal.tsx
@ -11,7 +11,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 { CheckCircleIcon } from '@heroicons/react/solid'
 import {
  getMultipleAccounts,
@ -35,7 +35,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
  isOpen,
  onClose,
 }) => {
-  //const { t } = useTranslation('common') TOTRANSLATE
+  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)
@ -113,14 +113,14 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
      onClose()
      for (const txid of txids) {
        notify({
-          title: 'Transaction confirmed',
+          title: t('transaction-confirmed'),
          txid,
        })
      }
    } catch (err) {
      console.warn('Error deleting account:', err)
      notify({
-        title: 'Error deleting account',
+        title: t('error-deleting-account'),
        description: `${err.message}`,
        txid: err.txid,
        type: 'error',
@ -132,15 +132,14 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
    <Modal onClose={onClose} isOpen={isOpen && mangoAccount !== undefined}>
      <Modal.Header>
        <div className="flex items-center">
-          <ElementTitle noMarignBottom>Close your account</ElementTitle>
+          <ElementTitle noMarignBottom>{t('close-account:close-account')}</ElementTitle>
        </div>
      </Modal.Header>
      <div className="text-th-fgd-2 text-center my-4">
-        You can close your Mango account and recover the small amount of SOL
-        used to cover rent exemption.
+        {t('close-account:close-account-description')}
      </div>
      <div className="text-th-fgd-2 text-center my-4">
-        To close your account you must:
+        {t('close-account:to-close-account-steps')}
      </div>

      <div className="bg-th-bkg-4 overflow-none p-2 sm:p-6 rounded-lg">
@ -150,7 +149,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
          ) : (
            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
          )}{' '}
-          Close all borrows
+          {t('close-account:close-all-borrows')}
        </div>
        <div className="flex items-center text-th-fgd-2 mb-4">
          {!hasOpenPositions ? (
@ -158,7 +157,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
          ) : (
            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
          )}{' '}
-          Close and settle all Perp positons
+          {t('close-account:close-perp-positions')}
        </div>
        <div className="flex items-center text-th-fgd-2">
          {openOrders && !openOrders.length ? (
@ -166,49 +165,50 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
          ) : (
            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
          )}{' '}
-          Close all open orders
+          {t('close-account:close-open-orders')}
        </div>
      </div>

      <div className="text-th-fgd-2 text-center my-4">
-        By closing your account you will:
+        {t('close-account:by-closing-you-will')}
      </div>
      <div className="bg-th-bkg-4 overflow-wrap p-2 sm:p-6 rounded-lg">
        <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 mt-4">
            <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 mt-4">
          <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          Recover {totalAccountSOL.toFixed(3)} SOL
+          {t('close-account:recover-x-sol', {amount: totalAccountSOL.toFixed(3)})}
        </div>
        {!mngoAccrued.isZero() ? (
          <div className="flex items-center text-th-fgd-2 mt-4">
            <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 in unclaimed rewards
+            {t('close-account:claim-x-mngo', {
+              amount: mangoGroup
+                ? nativeToUi(
+                    mngoAccrued.toNumber(),
+                    mangoGroup.tokens[MNGO_INDEX].decimals
+                  ).toFixed(3)
+                : 0
+            })}
          </div>
        ) : (
          ''
        )}
      </div>
-      <div className="text-th-fgd-2 text-center my-4">Goodbye 👋</div>
+      <div className="text-th-fgd-2 text-center my-4">{t('close-account:goodbye')}</div>
      <Button
        onClick={() => closeAccount()}
        disabled={
@ -218,7 +218,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
        }
        className="mt-1 w-full"
      >
-        Close Account
+        {t('close-account:close-account')}
      </Button>
    </Modal>
  )
--- a/pages/account.tsx
+++ b/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
    },
  }
@ -55,11 +55,11 @@ const TABS = [
  'History',
  'Interest',
  'Funding',
-  'Performance',// TOTRANSLATE
+  'Performance',
 ]

 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)
@ -203,8 +203,7 @@ export default function Account() {
                >
                  <div className="flex items-center">
                    <TrashIcon className="h-4 w-4 mr-1.5" />
-                    Close Account
-                    {/* TOTRANSLATE */}
+                    {t('close-account:close-account')}
                  </div>
                </Button>
                <a
--- a/public/locales/en/close-account.json
+++ b/public/locales/en/close-account.json
@ -0,0 +1,16 @@
+{
+  "by-closing-you-will": "By closing your account you will:",
+  "claim-x-mngo": "Claim {{amount}} MNGO in unclaimed rewards",
+  "close-account": "Close Account",
+  "close-account-description": "You can close your Mango account and recover the small amount of SOL used to cover rent exemption.",
+  "close-all-borrows": "Close all borrows",
+  "close-open-orders": "Close all open orders",
+  "close-perp-positions": "Close and settle all Perp positons",
+  "delete-your-account": "Delete your Mango account",
+  "error-deleting-account": "Error deleting account",
+  "goodbye": "Goodbye 👋",
+  "recover-x-sol": "Recover {{amount}} SOL",
+  "to-close-account-steps": "To close your account you must:",
+  "transaction-confirmed": "Transaction Confirmed",
+  "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
--- a/public/locales/es/close-account.json
+++ b/public/locales/es/close-account.json
@ -0,0 +1,16 @@
+{
+  "by-closing-you-will": "By closing your account you will:",
+  "claim-x-mngo": "Claim {{amount}} MNGO in unclaimed rewards",
+  "close-account": "Close Account",
+  "close-account-description": "You can close your Mango account and recover the small amount of SOL used to cover rent exemption.",
+  "close-all-borrows": "Close all borrows",
+  "close-open-orders": "Close all open orders",
+  "close-perp-positions": "Close and settle all Perp positons",
+  "delete-your-account": "Delete your Mango account",
+  "error-deleting-account": "Error deleting account",
+  "goodbye": "Goodbye 👋",
+  "recover-x-sol": "Recover {{amount}} SOL",
+  "to-close-account-steps": "To close your account you must:",
+  "transaction-confirmed": "Transaction Confirmed",
+  "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
--- a/public/locales/es/common.json
+++ b/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"
 }
--- a/public/locales/zh/close-account.json
+++ b/public/locales/zh/close-account.json
@ -0,0 +1,16 @@
+{
+  "by-closing-you-will": "透过关闭帐户您就会：",
+  "claim-x-mngo": "收获{{amount}}MNGO的未收获奖励",
+  "close-account": "关闭帐户",
+  "close-account-description": "您可以将Mango帐户删除而收回少量SOL帐户租金。",
+  "close-all-borrows": "归还所有借贷",
+  "close-open-orders": "取消所有挂单",
+  "close-perp-positions": "结清所有永续合约持仓",
+  "delete-your-account": "删除您的Mango帐户",
+  "error-deleting-account": "删除帐户出错",
+  "goodbye": "再见 👋",
+  "recover-x-sol": "收回{{amount}}SOL",
+  "to-close-account-steps": "为了关闭帐户您得先：",
+  "transaction-confirmed": "交易成功",
+  "withdraw-assets-worth": "将总价值{{value}}提出到您的钱包"
+}
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -245,6 +245,7 @@
    "orderbook": "订单簿",
    "orderbook-animation": "订单动画",
    "orders": "订单",
+    "performance": "表现",
    "period-progress": "期间进度",
    "perp": "Perp",
    "perp-fees": "Mango永续合约费率",
--- a/public/locales/zh_tw/close-account.json
+++ b/public/locales/zh_tw/close-account.json
@ -0,0 +1,16 @@
+{
+  "by-closing-you-will": "透過關閉帳戶您就會：",
+  "claim-x-mngo": "收穫{{amount}}MNGO的未收穫獎勵",
+  "close-account": "關閉帳戶",
+  "close-account-description": "您可以將Mango帳戶刪除而收回少量SOL帳戶租金。",
+  "close-all-borrows": "歸還所有借貸",
+  "close-open-orders": "取消所有掛單",
+  "close-perp-positions": "結清所有永續合約持倉",
+  "delete-your-account": "刪除您的Mango帳戶",
+  "error-deleting-account": "刪除帳戶出錯",
+  "goodbye": "再見 👋",
+  "recover-x-sol": "收回{{amount}}SOL",
+  "to-close-account-steps": "為了關閉帳戶您得先：",
+  "transaction-confirmed": "交易成功",
+  "withdraw-assets-worth": "將總價值{{value}}提出到您的錢包"
+}
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -245,6 +245,7 @@
  "orderbook": "掛單簿",
  "orderbook-animation": "訂單動畫",
  "orders": "訂單",
+  "performance": "表現",
  "period-progress": "期間進度",
  "perp": "Perp",
  "perp-fees": "Mango永續合約費率",