fix: various untranslatable strings (#5628)

shapeshift · Nov 16, 2023 · e922320 · e922320
1 parent 4c884f4
commit e922320
Show file tree

Hide file tree

Showing 33 changed files with 149 additions and 53 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -66,6 +66,8 @@
     "privacy": "Privacy Policy",
     "terms": "Terms of Service",
     "days": "Days",
+    "clear": "Clear",
+    "copy": "Copy",
     "copied": "Copied to clipboard.",
     "copyFailed": "Failed to copy to clipboard",
     "copyFailedDescription": "Please copy manually",
@@ -118,7 +120,20 @@
     "learnMore": "Learn more",
     "showAll": "Show All",
     "showLess": "Show Less",
-    "yourBalance": "Your balance"
+    "yourBalance": "Your balance",
+    "carousel": {
+      "next": "Next",
+      "prev": "Previous",
+      "back": "Back",
+      "dot": "Dot"
+    },
+    "table": {
+      "nextPage": "Next Page",
+      "prevPage": "Previous Page",
+      "sortedAsc": "Sorted ascending",
+      "sortedDesc": "Sorted descending",
+      "expandRow": "Expand Row"
+    }
   },
   "consentBanner": {
     "body": {
@@ -510,9 +525,13 @@
     "accountAsset": "Account Asset",
     "accountDetails": "Account Details",
     "defi": "DeFi",
+    "openMenu": "Open menu",
+    "closeNav": "Close Nav",
+    "openNotif": "Open notifications",
     "transactionHistory": "Transaction History",
     "overview": "Overview",
     "transactions": "Transactions",
+    "pendingTransactions": "Pending Transactions",
     "tradeHistory": "Trade History",
     "foxToken": "FOX Opportunities",
     "dApps": "dApps",
@@ -661,6 +680,7 @@
     "rate": "Rate",
     "tradeFrom": "Trade from",
     "priceImpact": "Price Impact",
+    "tradeSettings": "Trade Settings",
     "slippage": {
       "maxSlippage": "Max Slippage",
       "auto": "Auto",
@@ -675,6 +695,8 @@
     "payWith": "Pay With",
     "youGet": "You Get",
     "tradeTo": "Trade to",
+    "quoteStatus": "Quote status",
+    "expand": "Expand",
     "availableRoutes": "Available Routes",
     "minerFee": "Miner Fee",
     "donation": "ShapeShift Donation",
@@ -1658,7 +1680,8 @@
     "youCanNowUse": "You can now use %{name} Account #%{accountNumber}",
     "showAssets": "Show assets",
     "hideAssets": "Hide assets",
-    "viewAccount": "View account"
+    "viewAccount": "View account",
+    "expandAccount": "Expand account"
   },
   "loremIpsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lectus efficitur, iaculis sapien eu, luctus tellus. Maecenas eget sapien dignissim, finibus mauris nec, mollis ipsum. Donec sodales sit amet felis sagittis vestibulum. Ut in consectetur lacus. Suspendisse potenti. Aenean at massa consequat lectus semper pretium. Cras sed bibendum enim. Mauris euismod sit amet dolor in placerat.",
   "transactionHistory": {
@@ -2094,7 +2117,8 @@
     "aboutCollection": "About %{collectionName}",
     "emptyTitle": "Where did all the NFTs go?",
     "emptyBody": "Don't worry, we've sent out a search party to bring back more amazing NFTs. In the meantime, feel free to stare at this blank space and ponder the meaning of existence.",
-    "reportSpam": "Report Spam"
+    "reportSpam": "Report Spam",
+    "refresh": "Refresh"
   },
   "missions": {
     "subtitle": "FOX Missions",
@@ -2175,6 +2199,11 @@
     "repaymentLock": "Repayment Lock",
     "borrow": "Borrow",
     "repay": "Repay",
+    "repayAmount": "Repay Amount",
+    "unlockedCollateral": "Unlocked Collateral",
+    "depositAsset": "Deposit %{asset}",
+    "switchAssets": "Switch Assets",
+    "backToLending": "Back to lending",
     "outstandingDebt": "Outstanding Debt",
     "collateral": "Collateral",
     "debt": "Debt",

diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
@@ -5,6 +5,7 @@ import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
 import type { MouseEvent } from 'react'
 import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
 
 import { Arrow } from './Arrow'
 import { DotButton } from './DotButton'
@@ -19,6 +20,7 @@ export const Carousel = ({
   autoPlay,
   renderHeader,
 }: CarouselProps) => {
+  const translate = useTranslate()
   const autoplayRef = useRef(
     Autoplay({ delay: 10000, stopOnInteraction: false, stopOnMouseEnter: true, playOnInit: false }),
   )
@@ -105,15 +107,23 @@ export const Carousel = ({
   const Controls = useMemo(() => {
     return (
       <Flex>
-        <Arrow aria-label='left' isDisabled={!prevBtnEnabled} onClick={scrollPrev}>
+        <Arrow
+          aria-label={translate('common.carousel.prev')}
+          isDisabled={!prevBtnEnabled}
+          onClick={scrollPrev}
+        >
           <ArrowBackIcon />
         </Arrow>
-        <Arrow aria-label='right' isDisabled={!nextBtnEnabled} onClick={scrollNext}>
+        <Arrow
+          aria-label={translate('common.carousel.next')}
+          isDisabled={!nextBtnEnabled}
+          onClick={scrollNext}
+        >
           <ArrowForwardIcon />
         </Arrow>
       </Flex>
     )
-  }, [nextBtnEnabled, prevBtnEnabled, scrollNext, scrollPrev])
+  }, [nextBtnEnabled, prevBtnEnabled, scrollNext, scrollPrev, translate])
 
   return (
     <Flex flexDir='column' gap={4}>
@@ -134,7 +144,11 @@ export const Carousel = ({
         {(showDots || showArrows) && scrollSnaps.length > 1 && (
           <Flex justifyContent='space-between' alignItems='center' mt={4} width='full'>
             {showArrows && (
-              <Arrow aria-label='left' isDisabled={!prevBtnEnabled} onClick={scrollPrev}>
+              <Arrow
+                aria-label={translate('common.carousel.prev')}
+                isDisabled={!prevBtnEnabled}
+                onClick={scrollPrev}
+              >
                 <ArrowBackIcon />
               </Arrow>
             )}
@@ -152,7 +166,11 @@ export const Carousel = ({
               </Flex>
             )}
             {showArrows && (
-              <Arrow aria-label='right' isDisabled={!nextBtnEnabled} onClick={scrollNext}>
+              <Arrow
+                aria-label={translate('common.carousel.next')}
+                isDisabled={!nextBtnEnabled}
+                onClick={scrollNext}
+              >
                 <ArrowForwardIcon />
               </Arrow>
             )}

diff --git a/src/components/Carousel/DotButton.tsx b/src/components/Carousel/DotButton.tsx
@@ -1,17 +1,19 @@
 import { IconButton, useColorModeValue } from '@chakra-ui/react'
 import { useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
 
 import type { DotButtonProps } from './types'
 
 export const DotButton: React.FC<DotButtonProps> = ({ selected, onClick }) => {
+  const translate = useTranslate()
   const backgroundColor = useColorModeValue('black', 'white')
   const activeStyle = useMemo(() => ({ bg: backgroundColor }), [backgroundColor])
   return (
     <IconButton
       className={`embla__dot ${selected ? 'is-selected' : ''}`}
       type='button'
       variant='solid'
-      aria-label='dot'
+      aria-label={translate('common.carousel.dot')}
       width='10px'
       height='10px'
       minWidth='auto'

diff --git a/src/components/Layout/Header/DegradedStateBanner.tsx b/src/components/Layout/Header/DegradedStateBanner.tsx
@@ -106,7 +106,7 @@ export const DegradedStateBanner = memo(() => {
         <IconButton
           variant='ghost-filled'
           colorScheme='yellow'
-          aria-label='Degraded State'
+          aria-label={translate('common.degradedState')}
           icon={warningIcon}
         />
       </PopoverTrigger>

diff --git a/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx b/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
@@ -312,7 +312,12 @@ export const GlobalSeachButton = memo(() => {
   return (
     <>
       <Box maxWidth='xl' width={widthProp} mr={mrProp}>
-        <IconButton display={displayProp1} icon={searchIcon} aria-label='Search' onClick={onOpen} />
+        <IconButton
+          display={displayProp1}
+          icon={searchIcon}
+          aria-label={translate('common.search')}
+          onClick={onOpen}
+        />
         <Button
           width='full'
           leftIcon={searchIcon}

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -209,7 +209,11 @@ export const Header = memo(() => {
         <HStack height='4.5rem' width='full' px={4}>
           <HStack width='full' margin='0 auto' px={pxProp} spacing={0} columnGap={4}>
             <Box flex={1} display={displayProp}>
-              <IconButton aria-label='Open menu' onClick={onToggle} icon={hamburgerIcon} />
+              <IconButton
+                aria-label={translate('navBar.openMenu')}
+                onClick={onToggle}
+                icon={hamburgerIcon}
+              />
             </Box>
 
             <Box display={displayProp} mx='auto'>

diff --git a/src/components/Layout/Header/NavBar/Notifications.tsx b/src/components/Layout/Header/NavBar/Notifications.tsx
@@ -5,6 +5,7 @@ import type { CustomTheme, ThemeMode as ThemeModeType } from '@wherever/react-no
 import { getConfig } from 'config'
 import { utils } from 'ethers'
 import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
 import { KeyManager } from 'context/WalletProvider/KeyManager'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useWallet } from 'hooks/useWallet/useWallet'
@@ -33,6 +34,7 @@ const suspenseFallback = <div />
 const eip712SupportedWallets = [KeyManager.KeepKey, KeyManager.Native, KeyManager.Mobile]
 
 export const Notifications = memo(() => {
+  const translate = useTranslate()
   const isWhereverEnabled = useFeatureFlag('Wherever')
   const { colorMode } = useColorMode()
   const {
@@ -150,7 +152,7 @@ export const Notifications = memo(() => {
           disableAnalytics={disableAnalytics}
         >
           <NotificationFeed gapFromBell={10} placement='bottom-end'>
-            <IconButton aria-label='Open notifications'>
+            <IconButton aria-label={translate('navBar.openNotif')}>
               <NotificationBell size={20} />
             </IconButton>
           </NotificationFeed>

diff --git a/src/components/Layout/Header/NavBar/SubmenuHeader.tsx b/src/components/Layout/Header/NavBar/SubmenuHeader.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from '@chakra-ui/icons'
 import { Center, Flex, IconButton, Stack, Text, useColorModeValue } from '@chakra-ui/react'
 import { upperFirst } from 'lodash'
+import { useTranslate } from 'react-polyglot'
 import { useMenuRoutes } from 'components/Layout/Header/NavBar/hooks/useMenuRoutes'
 
 type ExpandedMenuItemProps = {
@@ -17,6 +18,7 @@ export const SubmenuHeader = ({
   description,
   onBackClick: handleBackClick,
 }: ExpandedMenuItemProps) => {
+  const translate = useTranslate()
   const { handleBackClick: handleBackClickDefault } = useMenuRoutes()
   const headerColor = useColorModeValue('black', 'white')
   const descriptionTextColor = useColorModeValue('black', 'whiteAlpha.600')
@@ -28,7 +30,7 @@ export const SubmenuHeader = ({
           isRound
           size='sm'
           onClick={handleBackClick ?? handleBackClickDefault}
-          aria-label='Go Back'
+          aria-label={translate('common.back')}
           icon={arrowBackIcon}
         />
         <Center fontWeight='bold' color={headerColor} fontSize='sm' flex={1} pr={7}>

diff --git a/src/components/Layout/Header/SideNavContent.tsx b/src/components/Layout/Header/SideNavContent.tsx
@@ -56,7 +56,7 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
         <Flex direction='column' rowGap={2} columnGap={2} width='full'>
           <IconButton
             ml='auto'
-            aria-label='Close Nav'
+            aria-label={translate('navBar.closeNav')}
             variant='ghost'
             icon={closeIcon}
             onClick={onClose}

diff --git a/src/components/Layout/Header/TxWindow/TxWindow.tsx b/src/components/Layout/Header/TxWindow/TxWindow.tsx
@@ -54,9 +54,10 @@ const TxsByStatus: React.FC<TxsByStatusProps> = ({ txStatus, limit }) => {
   }, [limit, txIds])
 
   if (limitTxIds.length === 0) {
+    const translatedStatus = translate(`transactionRow.${txStatus.toLowerCase()}`)
     return (
       <RawText px={paddingProp} color='text.subtle'>
-        {translate('transactionRow.emptyMessage', { status: txStatus })}
+        {translate('transactionRow.emptyMessage', { status: translatedStatus })}
       </RawText>
     )
   }
@@ -80,7 +81,7 @@ export const TxWindow = memo(() => {
     <>
       <Box position='relative'>
         <IconButton
-          aria-label='Pending Transactions'
+          aria-label={translate('navBar.pendingTransactions')}
           icon={hasPendingTxs ? <CircularProgress size='18px' /> : <TxHistoryIcon />}
           onClick={handleToggleIsOpen}
         />

diff --git a/src/components/Modals/FiatRamps/views/Overview.tsx b/src/components/Modals/FiatRamps/views/Overview.tsx
@@ -352,7 +352,7 @@ export const Overview: React.FC<OverviewProps> = ({
                         >
                           <IconButton
                             icon={copyIcon}
-                            aria-label='copy-icon'
+                            aria-label={translate('common.copy')}
                             size='sm'
                             isRound
                             variant='ghost'
@@ -362,7 +362,7 @@ export const Overview: React.FC<OverviewProps> = ({
                             <IconButton
                               icon={shownOnDisplay ? <CheckIcon /> : <ViewIcon />}
                               onClick={handleVerify}
-                              aria-label='check-icon'
+                              aria-label={translate('common.verify')}
                               size='sm'
                               color={
                                 shownOnDisplay

diff --git a/src/components/Modals/Nfts/NftModal.tsx b/src/components/Modals/Nfts/NftModal.tsx
@@ -237,7 +237,7 @@ export const NftModal: React.FC<NftModalProps> = ({ nftAssetId }) => {
                 colorScheme='whiteAlpha'
                 onClick={handleRefreshClick}
                 icon={faSyncIcon}
-                aria-label='Refresh'
+                aria-label={translate('nft.refresh')}
               />
               {customizeLink && (
                 <Button

diff --git a/src/components/Modals/Send/views/Details.tsx b/src/components/Modals/Send/views/Details.tsx
@@ -196,7 +196,7 @@ export const Details = () => {
       <IconButton
         variant='ghost'
         icon={arrowBackIcon}
-        aria-label='Back'
+        aria-label={translate('common.back')}
         position='absolute'
         top={2}
         left={3}

diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx
@@ -22,6 +22,7 @@ import { TxStatus } from '@shapeshiftoss/unchained-client'
 import prettyMilliseconds from 'pretty-ms'
 import { useMemo } from 'react'
 import { FaAdjust, FaGasPump, FaProcedures } from 'react-icons/fa'
+import { useTranslate } from 'react-polyglot'
 import { Amount } from 'components/Amount/Amount'
 import type { StepperStep } from 'components/MultiHopTrade/types'
 import { RawText } from 'components/Text'
@@ -56,6 +57,7 @@ export const Hop = ({
   estimatedExecutionTimeMs?: number
   onToggleIsOpen: () => void
 }) => {
+  const translate = useTranslate()
   const backgroundColor = useColorModeValue('gray.100', 'gray.750')
   const borderColor = useColorModeValue('gray.50', 'gray.650')
 
@@ -81,7 +83,7 @@ export const Hop = ({
         return (
           <Box width='auto'>
             <IconButton
-              aria-label='expand'
+              aria-label={translate('trade.expand')}
               variant='link'
               p={4}
               borderTopRadius='none'
@@ -95,7 +97,15 @@ export const Hop = ({
       default:
         return null
     }
-  }, [chevronDownIcon, chevronUpIcon, estimatedExecutionTimeMs, isOpen, onToggleIsOpen, txStatus])
+  }, [
+    chevronDownIcon,
+    chevronUpIcon,
+    estimatedExecutionTimeMs,
+    isOpen,
+    onToggleIsOpen,
+    translate,
+    txStatus,
+  ])
 
   const stepperSteps = useMemo(
     () =>

diff --git a/src/components/MultiHopTrade/components/SlippagePopover.tsx b/src/components/MultiHopTrade/components/SlippagePopover.tsx
@@ -116,7 +116,11 @@ export const SlippagePopover: FC = () => {
   return (
     <Popover placement='bottom-end' onClose={handleClose}>
       <PopoverTrigger>
-        <IconButton aria-label='Trade Settings' icon={faSlidersH} variant='ghost' />
+        <IconButton
+          aria-label={translate('trade.tradeSettings')}
+          icon={faSlidersH}
+          variant='ghost'
+        />
       </PopoverTrigger>
       <PopoverContent>
         <PopoverBody>