update swap translations, remove unused "rate" from common

components/JupiterForm.tsx

@@ -728,9 +728,9 @@ const JupiterForm: FunctionComponent = () => {
                                   (formValue?.amount / outAmountUi)) *
                                   100 <=
                                 0
-                                  ? 'cheaper'
-                                  : 'more expensive'
-                              } than CoinGecko`}</span>
+                                  ? t('swap:cheaper')
+                                  : t('swap:more-expensive')
+                              } CoinGecko`}</span>
                             </div>
                           ) : null}
                         </div>

components/SwapTokenInfo.tsx

@@ -8,6 +8,7 @@ import { AreaChart, Area, XAxis, YAxis, Tooltip } from 'recharts'
 import useDimensions from 'react-cool-dimensions'
 import { IconButton } from './Button'
 import { LineChartIcon } from './icons'
+import { useTranslation } from 'next-i18next'
 
 dayjs.extend(relativeTime)
 
@@ -34,6 +35,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
   const [mouseData, setMouseData] = useState<string | null>(null)
   const [daysToShow, setDaysToShow] = useState(1)
   const { observe, width, height } = useDimensions()
+  const { t } = useTranslation(['common', 'swap'])
 
   const handleMouseMove = (coords) => {
     if (coords.activePayload) {
@@ -278,7 +280,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
       ) : (
         <div className="bg-th-bkg-3 mt-4 md:mt-0 p-4 rounded-md text-center text-th-fgd-3">
           <LineChartIcon className="h-6 mx-auto text-th-primary w-6" />
-          Chart not available
+          {t('swap:chart-not-available')}
         </div>
       )}
 
@@ -351,7 +353,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {inputTokenInfo.market_cap_rank ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          Market Cap Rank
+                          {t('swap:market-cap-rank')}
                         </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           #{inputTokenInfo.market_cap_rank}
@@ -360,7 +362,9 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     ) : null}
                     {inputTokenInfo.market_data?.market_cap ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
-                        <div className="text-th-fgd-3 text-xs">Market Cap</div>
+                        <div className="text-th-fgd-3 text-xs">
+                          {t('swap:market-cap')}
+                        </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           $
                           {numberFormatter.format(
@@ -371,7 +375,9 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     ) : null}
                     {inputTokenInfo.market_data.total_volume?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
-                        <div className="text-th-fgd-3 text-xs">24h Volume</div>
+                        <div className="text-th-fgd-3 text-xs">
+                          {t('daily-volume')}
+                        </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           $
                           {numberFormatter.format(
@@ -383,7 +389,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {inputTokenInfo.market_data?.circulating_supply ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          Token Supply
+                          {t('swap:token-supply')}
                         </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           {numberFormatter.format(
@@ -392,7 +398,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                         </div>
                         {inputTokenInfo.market_data?.max_supply ? (
                           <div className="text-th-fgd-2 text-xs">
-                            Max Supply:{' '}
+                            {t('swap:max-supply')}:{' '}
                             {numberFormatter.format(
                               inputTokenInfo.market_data.max_supply
                             )}
@@ -403,7 +409,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {inputTokenInfo.market_data?.ath?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          All-Time High
+                          {t('swap:ath')}
                         </div>
                         <div className="flex">
                           <div className="font-bold text-th-fgd-1 text-lg">
@@ -441,7 +447,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {inputTokenInfo.market_data?.atl?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          All-Time Low
+                          {t('swap:atl')}
                         </div>
                         <div className="flex">
                           <div className="font-bold text-th-fgd-1 text-lg">
@@ -488,7 +494,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
         </div>
       ) : (
         <div className="bg-th-bkg-3 mt-3 p-4 rounded-md text-center text-th-fgd-3">
-          Input token information is not available.
+          {t('swap:input-info-unavailable')}
         </div>
       )}
 
@@ -561,7 +567,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {outputTokenInfo.market_cap_rank ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          Market Cap Rank
+                          {t('swap:market-cap-rank')}
                         </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           #{outputTokenInfo.market_cap_rank}
@@ -570,7 +576,9 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     ) : null}
                     {outputTokenInfo.market_data?.market_cap ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
-                        <div className="text-th-fgd-3 text-xs">Market Cap</div>
+                        <div className="text-th-fgd-3 text-xs">
+                          {t('swap:market-cap')}
+                        </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           $
                           {numberFormatter.format(
@@ -581,7 +589,9 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     ) : null}
                     {outputTokenInfo.market_data.total_volume?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
-                        <div className="text-th-fgd-3 text-xs">24h Volume</div>
+                        <div className="text-th-fgd-3 text-xs">
+                          {t('daily-volume')}
+                        </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           $
                           {numberFormatter.format(
@@ -593,7 +603,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {outputTokenInfo.market_data?.circulating_supply ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          Token Supply
+                          {t('swap:token-supply')}
                         </div>
                         <div className="font-bold text-th-fgd-1 text-lg">
                           {numberFormatter.format(
@@ -602,7 +612,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                         </div>
                         {outputTokenInfo.market_data?.max_supply ? (
                           <div className="text-th-fgd-2 text-xs">
-                            Max Supply:{' '}
+                            {t('swap:max-supply')}:{' '}
                             {numberFormatter.format(
                               outputTokenInfo.market_data.max_supply
                             )}
@@ -613,7 +623,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {outputTokenInfo.market_data?.ath?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          All-Time High
+                          {t('swap:ath')}
                         </div>
                         <div className="flex">
                           <div className="font-bold text-th-fgd-1 text-lg">
@@ -651,7 +661,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
                     {outputTokenInfo.market_data?.atl?.usd ? (
                       <div className="border border-th-bkg-4 m-1 p-3 rounded-md">
                         <div className="text-th-fgd-3 text-xs">
-                          All-Time Low
+                          {t('swap:atl')}
                         </div>
                         <div className="flex">
                           <div className="font-bold text-th-fgd-1 text-lg">
@@ -698,7 +708,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
         </div>
       ) : (
         <div className="bg-th-bkg-3 mt-3 p-4 rounded-md text-center text-th-fgd-3">
-          Output token information is not available.
+          {t('swap:output-info-unavailable')}
         </div>
       )}
     </div>

public/locales/en/common.json

@@ -272,7 +272,6 @@
   "profile-menu-tip-title": "Profile Menu",
   "profit-price": "Profit Price",
   "quantity": "Quantity",
-  "rate": "Rate",
   "rates": "Deposit/Borrow Rates",
   "read-more": "Read More",
   "recent": "Recent",

public/locales/en/swap.json

@@ -2,17 +2,27 @@
   "ata-deposit": "Deposit",
   "ata-deposit-details": "{{cost}} SOL for {{count}} ATA Account",
   "ata-deposit-details_plural": "{{cost}} SOL for {{count}} ATA Accounts",
+  "ath": "All-Time High",
+  "atl": "All-Time Low",
   "bal": "Bal:",
   "best-swap": "Best Swap",
+  "chart-not-available": "Chart not available",
+  "cheaper": "cheaper than",
   "fees-paid-to": "Fees paid to {{feeRecipient}}",
   "from": "from",
   "get-started": "Before you get started...",
   "got-it": "Got It",
   "heres-how": "Here's how",
+  "input-info-unavailable": "Input token information is not available.",
   "jupiter-error": "Error in Jupiter – Try changing your input",
+  "market-cap": "Market Cap",
+  "market-cap-rank": "Market Cap Rank",
+  "max-supply": "Max Supply",
   "minimum-received": "Minimum Received",
+  "more-expensive": "more expensive than",
   "need-ata-account": "You need to have an Associated Token Account.",
   "other-routes": "{{numberOfRoutes}} other routes",
+  "output-info-unavailable": "Output token information is not available.",
   "pay": "Pay",
   "price-impact": "Price Impact",
   "price-info": "Price Info",
@@ -28,6 +38,7 @@
   "swap-successful": "Swap Successful",
   "swapping": "Swapping...",
   "to": "to",
+  "token-supply": "Token Supply",
   "transaction-fee": "Transaction Fee",
   "unavailable": "Unavailable",
   "you-pay": "You pay",

public/locales/es/common.json

@@ -270,7 +270,6 @@
   "profile-menu-tip-title": "Menú de perfil",
   "profit-price": "Precio de beneficio",
   "quantity": "Cantidad",
-  "rate": "Rate",
   "rates": "Tasas de depósito / préstamo",
   "read-more": "Leer más",
   "recent": "Reciente",

public/locales/es/swap.json

@@ -2,17 +2,27 @@
   "ata-deposit": "Deposit",
   "ata-deposit-details": "{{cost}} SOL for {{count}} ATA Account",
   "ata-deposit-details_plural": "{{cost}} SOL for {{count}} ATA Accounts",
+  "ath": "All-Time High",
+  "atl": "All-Time Low",
   "bal": "Bal:",
   "best-swap": "Best Swap",
+  "chart-not-available": "Chart not available",
+  "cheaper": "cheaper than",
   "fees-paid-to": "Fees paid to {{feeRecipient}}",
   "from": "from",
   "get-started": "Before you get started...",
   "got-it": "Got It",
   "heres-how": "Here's how",
+  "input-info-unavailable": "Input token information is not available.",
   "jupiter-error": "Error in Jupiter – try changing your input",
+  "market-cap": "Market Cap",
+  "market-cap-rank": "Market Cap Rank",
+  "max-supply": "Max Supply",
   "minimum-received": "Minimum Received",
+  "more-expensive": "more expensive than",
   "need-ata-account": "You need to have an Associated Token Account.",
   "other-routes": "{{numberOfRoutes}} other routes",
+  "output-info-unavailable": "Output token information is not available.",
   "pay": "Pay",
   "price-impact": "Price Impact",
   "price-info": "Price Info",
@@ -28,6 +38,7 @@
   "swap-successful": "Swap Successful",
   "swapping": "Swapping...",
   "to": "to",
+  "token-supply": "Token Supply",
   "transaction-fee": "Transaction Fee",
   "unavailable": "Unavailable",
   "you-pay": "You pay",

public/locales/zh/common.json

@@ -270,7 +270,6 @@
     "profile-menu-tip-title": "个人资料菜单",
     "profit-price": "止盈价格",
     "quantity": "数量",
-    "rate": "排放率",
     "rates": "存款/借贷利率",
     "read-more": "看更多资料",
     "recent": "最近",

public/locales/zh/swap.json

@@ -2,32 +2,43 @@
   "ata-deposit": "押金",
   "ata-deposit-details": "{{cost}} SOL为 {{count}} ATA帐户",
   "ata-deposit-details_plural": "{{cost}} SOL为 {{count}} ATA帐户",
+  "ath": "历史高价",
+  "atl": "历史低价",
   "bal": "余额:",
-  "best-swap": "Best Swap",
+  "best-swap": "最佳换币",
+  "chart-not-available": "无法显示图表",
+  "cheaper": "低于",
   "fees-paid-to": "费用缴给{{feeRecipient}}",
   "from": "从",
   "get-started": "开始前...",
   "got-it": "明白",
   "heres-how": "了解更多",
+  "input-info-unavailable": "获取付出币种资料时出错",
   "jupiter-error": "Jupiter出错，请更改输入",
+  "market-cap": "总市值",
+  "market-cap-rank": "总市值排名",
+  "max-supply": "最大供应量",
   "minimum-received": "最好获得",
+  "more-expensive": "高于",
   "need-ata-account": "您必有一个关联币种帐户（ATA）。",
-  "other-routes": "{{numberOfRoutes}} other routes",
+  "other-routes": "{{numberOfRoutes}}条其他路线",
+  "output-info-unavailable": "获取收到币种资料时出错",
   "pay": "付出",
-  "price-impact": "Price Impact",
+  "price-impact": "价格影响",
   "price-info": "价格细节",
-  "rate": "Rate",
+  "rate": "率",
   "receive": "收到",
   "routes-found": "找到{{numberOfRoutes}}条路线",
   "serum-details": "{{cost}} SOL为 {{count}} Serum OpenOrders帐户",
   "serum-details_plural": "{{cost}} SOL为 {{count}} Serum OpenOrders帐户",
   "serum-requires-openorders": "Serum要求每个币种有一个OpenOrders帐户。以后可以关闭帐户二恢复SOL押金。",
-  "swap-details": "Swap Details",
+  "swap-details": "换币细节",
   "swap-fee": "换币费用",
   "swap-in-wallet": "换币会在您被连结的钱包中进行而不在您的Mango帐户中。",
   "swap-successful": "交易成功",
   "swapping": "正在交易...",
   "to": "到",
+  "token-supply": "流通供应量",
   "transaction-fee": "交易费用",
   "unavailable": "无资料",
   "you-pay": "您付出",

public/locales/zh_tw/common.json

@@ -270,7 +270,6 @@
   "profile-menu-tip-title": "個人資料菜單",
   "profit-price": "止盈價格",
   "quantity": "數量",
-  "rate": "排放率",
   "rates": "存款/借貸利率",
   "read-more": "看更多資料",
   "recent": "最近",

public/locales/zh_tw/swap.json

@@ -2,32 +2,43 @@
   "ata-deposit": "押金",
   "ata-deposit-details": "{{cost}} SOL為 {{count}} ATA帳戶",
   "ata-deposit-details_plural": "{{cost}} SOL為 {{count}} ATA帳戶",
+  "ath": "歷史高價",
+  "atl": "歷史低價",
   "bal": "餘額:",
-  "best-swap": "Best Swap",
+  "best-swap": "最佳換幣",
+  "chart-not-available": "無法顯示圖表",
+  "cheaper": "低於",
   "fees-paid-to": "費用繳給{{feeRecipient}}",
   "from": "從",
   "get-started": "開始前...",
   "got-it": "明白",
   "heres-how": "了解更多",
+  "input-info-unavailable": "獲取付出幣種資料時出錯",
   "jupiter-error": "Jupiter出錯，請更改輸入",
+  "market-cap": "總市值",
+  "market-cap-rank": "總市值排名",
+  "max-supply": "最大供應量",
   "minimum-received": "最好獲得",
+  "more-expensive": "高於",
   "need-ata-account": "您必有一個關聯幣種帳戶（ATA）。",
-  "other-routes": "{{numberOfRoutes}} other routes",
+  "other-routes": "{{numberOfRoutes}}條其他路線",
+  "output-info-unavailable": "獲取收到幣種資料時出錯",
   "pay": "付出",
-  "price-impact": "Price Impact",
+  "price-impact": "價格影響",
   "price-info": "價格細節",
-  "rate": "Rate",
+  "rate": "率",
   "receive": "收到",
   "routes-found": "找到{{numberOfRoutes}}條路線",
   "serum-details": "{{cost}} SOL為 {{count}} Serum OpenOrders帳戶",
   "serum-details_plural": "{{cost}} SOL為 {{count}} Serum OpenOrders帳戶",
   "serum-requires-openorders": "Serum要求每個幣種有一個OpenOrders帳戶。以後可以關閉帳戶二恢復SOL押金。",
-  "swap-details": "Swap Details",
+  "swap-details": "換幣細節",
   "swap-fee": "換幣費用",
   "swap-in-wallet": "換幣會在您被連結的錢包中進行而不在您的Mango帳戶中。",
   "swap-successful": "換幣成功",
   "swapping": "正在換幣...",
   "to": "到",
+  "token-supply": "流通供應量",
   "transaction-fee": "交易費用",
   "unavailable": "無資料",
   "you-pay": "您付出",