feat: code improvement

0xdevhub · Dec 9, 2023 · 864b9d6 · 864b9d6
1 parent 2d65694
commit 864b9d6
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 22 deletions.
diff --git a/app/[locale]/apps/[id]/crosschain-nft-bridge/components/AddressField.tsx b/app/[locale]/apps/[id]/crosschain-nft-bridge/components/AddressField.tsx
@@ -1,13 +1,19 @@
+'use client'
+
 import { Card } from '@/app/components'
 import { Heading } from '@/app/components/typography'
+import { useI18n } from '@/locales/client'
 import classNames from 'classnames'
 import { useFormContext } from 'react-hook-form'
 
 export const AddressField = () => {
+  const t = useI18n()
   const { register, formState } = useFormContext()
   return (
     <label htmlFor='erc721Address'>
-      <Heading as='h4'>ERC721 Address</Heading>
+      <Heading as='h4'>
+        {t('PAGES.APPS.CROSSCHAIN_NFT_BRIDGE.ERC721_ADDRESS')}
+      </Heading>
       <Card
         className={classNames(
           'rounded-md',

diff --git a/app/[locale]/apps/[id]/crosschain-nft-bridge/components/BridgeButton.tsx b/app/[locale]/apps/[id]/crosschain-nft-bridge/components/BridgeButton.tsx
@@ -6,16 +6,16 @@ import { AccountConnect } from '@/app/components/wallet/account/Connect'
 import { NetworkSwitch } from '@/app/components/wallet/network/Switch'
 import { Chain } from '@/app/config/types'
 import { useNetwork, useWallet } from '@/app/lib/wallet/hooks'
-import useERC20Approve from '@/app/lib/wallet/hooks/useERC20Approve'
+import { useERC20Approve } from '@/app/lib/wallet/hooks/useERC20Approve'
 import { useERC721Approve } from '@/app/lib/wallet/hooks/useERC721Approve'
 import { ethers } from 'ethers'
 import { useEffect, useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useDarkMode, useEffectOnce } from 'usehooks-ts'
 import { useBridgeFees } from '../lib/hooks/useBridgeFees'
 import { useERC721Metadata } from '@/app/lib/wallet/hooks/useERC721Metadata'
-import Image from 'next/image'
 import { Text } from '@/app/components/typography'
+import { useI18n } from '@/locales/client'
 
 export type BridgeButtonProps = ButtonProps & {
   sourceChain: Chain
@@ -30,6 +30,7 @@ export const BridgeButton = ({
   loading,
   ...props
 }: BridgeButtonProps) => {
+  const t = useI18n()
   const { watch, register, setValue } = useFormContext()
   const { isConnected } = useWallet()
   const { isLoading, chain, config } = useNetwork()
@@ -112,7 +113,12 @@ export const BridgeButton = ({
                 </li>
                 {symbol && (
                   <li>
-                    <Text>NFT to bridge: {symbol}</Text>
+                    <Text>
+                      {t(
+                        'PAGES.APPS.CROSSCHAIN_NFT_BRIDGE.ERC721_NFT_TO_BRIDGE_LABEL'
+                      )}
+                      : {symbol}
+                    </Text>
                   </li>
                 )}
               </ul>
@@ -149,9 +155,13 @@ export const BridgeButton = ({
                 {...props}
               >
                 {isERC721Approved ? (
-                  <>{isERC20Approved ? 'Bridge' : 'Approve Link'}</>
+                  <>
+                    {isERC20Approved
+                      ? t('PAGES.APPS.CROSSCHAIN_NFT_BRIDGE.BRIDGE')
+                      : 'Approve Link'}
+                  </>
                 ) : (
-                  'Approve NFT'
+                  t('PAGES.APPS.CROSSCHAIN_NFT_BRIDGE.APPROVE_NFT')
                 )}
               </Button>
             </div>

diff --git a/app/[locale]/apps/[id]/crosschain-nft-bridge/components/CrosschainNFTBridge.tsx b/app/[locale]/apps/[id]/crosschain-nft-bridge/components/CrosschainNFTBridge.tsx
@@ -96,8 +96,9 @@ export const CrosschainNFTBridge = ({
             destinationChain={destinationChain}
           />
         </FormProvider>
-
-        <Requirements />
+        <div className='flex justify-end'>
+          <Requirements />
+        </div>
       </Card>
     </div>
   )

diff --git a/app/[locale]/apps/[id]/crosschain-nft-bridge/components/Requirements.tsx b/app/[locale]/apps/[id]/crosschain-nft-bridge/components/Requirements.tsx
@@ -4,18 +4,13 @@ import Link from 'next/link'
 
 export const Requirements = () => {
   return (
-    <div>
-      <Heading as='h5' variant='h6' className='text-gray-400'>
-        Requirements <span className='text-red-400'>*</span>
-      </Heading>
-      <ul className='text-gray-500'>
-        <li>
-          <Link href='https://faucets.chain.link/' target='_blank'>
-            <Text as='span'>Link Faucet</Text>
-          </Link>
-        </li>
-      </ul>
-    </div>
+    <ul className='text-gray-500'>
+      <li>
+        <Link href='https://faucets.chain.link/' target='_blank'>
+          <Text as='span'>Link Faucet</Text>
+        </Link>
+      </li>
+    </ul>
   )
 }
 

diff --git a/locales/en.ts b/locales/en.ts
@@ -4,7 +4,11 @@ const en = {
       TITLE: 'Apps',
       CROSSCHAIN_NFT_BRIDGE: {
         FROM: 'From',
-        TO: 'To'
+        TO: 'To',
+        ERC721_ADDRESS: 'ERC721 Address',
+        ERC721_NFT_TO_BRIDGE_LABEL: 'ERC721 NFT to bridge',
+        BRIDGE: 'Bridge',
+        APPROVE_NFT: 'Approve NFT'
       }
     }
   },

diff --git a/locales/pt.ts b/locales/pt.ts
@@ -4,7 +4,11 @@ const pt = {
       TITLE: 'Apps',
       CROSSCHAIN_NFT_BRIDGE: {
         FROM: 'De',
-        TO: 'Para'
+        TO: 'Para',
+        ERC721_ADDRESS: 'Endereço ERC721',
+        ERC721_NFT_TO_BRIDGE_LABEL: 'ERC721 NFT para ponte',
+        BRIDGE: 'Transferir',
+        APPROVE_NFT: 'Aprovar NFT'
       }
     }
   },