From 864b9d65ad668462d2afeb2cea091078e565bcfe Mon Sep 17 00:00:00 2001
From: welliton gervickas <wellitogervickas@gmail.com>
Date: Sat, 9 Dec 2023 20:11:59 -0300
Subject: [PATCH] feat: code improvement

---
 .../components/AddressField.tsx               |  8 +++++++-
 .../components/BridgeButton.tsx               | 20 ++++++++++++++-----
 .../components/CrosschainNFTBridge.tsx        |  5 +++--
 .../components/Requirements.tsx               | 19 +++++++-----------
 locales/en.ts                                 |  6 +++++-
 locales/pt.ts                                 |  6 +++++-
 6 files changed, 42 insertions(+), 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
index 7c6271c..784d1da 100644
--- 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
index 87167de..f54dec8 100644
--- a/app/[locale]/apps/[id]/crosschain-nft-bridge/components/BridgeButton.tsx
+++ b/app/[locale]/apps/[id]/crosschain-nft-bridge/components/BridgeButton.tsx
@@ -6,7 +6,7 @@ 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'
@@ -14,8 +14,8 @@ 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
index ad8533e..a848003 100644
--- 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
index 5c57af4..8b274f3 100644
--- 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
index be1d6b7..e3c0d5f 100644
--- 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
index 92879e9..f5b16bd 100644
--- 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'
       }
     }
   },