From 748c9c04562d75573ebaf3bf4d2f3c8d66a99ad9 Mon Sep 17 00:00:00 2001 From: titix <titi@defi.sucks> Date: Fri, 16 Aug 2024 01:15:58 -0300 Subject: [PATCH] feat: network added btn disabled --- public/locales/en/common.json | 1 + public/locales/es/common.json | 1 + src/components/AddNetworkButton.tsx | 55 ++++++++++++++++++++--------- src/utils/addNetwork.ts | 6 ++-- 4 files changed, 44 insertions(+), 19 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a1b3bec..ef0f787 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -39,6 +39,7 @@ "environment": "Environment", "nativeToken": "Native token", "addNetwork": "Add network", + "networkAdded": "Network added", "chainId": "Chain ID", "CHAININFORMATION": { "title": "Chain information", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 7eb3c9b..d96ad74 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -40,6 +40,7 @@ "environment": "Entorno", "nativeToken": "Token nativo", "addNetwork": "Agregar red", + "networkAdded": "Red agregada", "chainId": "ID de cadena", "CHAININFORMATION": { "title": "InformaciĆ³n de la cadena", diff --git a/src/components/AddNetworkButton.tsx b/src/components/AddNetworkButton.tsx index 7beacae..a10d5b5 100644 --- a/src/components/AddNetworkButton.tsx +++ b/src/components/AddNetworkButton.tsx @@ -3,41 +3,60 @@ import { useTranslation } from 'next-i18next'; import { useConnectModal } from '@rainbow-me/rainbowkit'; import { useAccount } from 'wagmi'; import { useRouter } from 'next/router'; -import { Image } from '@mui/icons-material'; +import Image from 'next/image'; +import { useState } from 'react'; import { useCustomTheme, useData } from '~/hooks'; import { addNetwork } from '~/utils'; -// import Add from '~/assets/icons/add.svg'; +import Add from '~/assets/icons/add.svg'; export const AddNetworkButton = () => { const router = useRouter(); - const { chain } = router.query; + const { chain } = router.query; // Ensure this is a valid chain ID const { t } = useTranslation(); const { isConnected } = useAccount(); const { openConnectModal } = useConnectModal(); const { chainData } = useData(); + const [isNetworkAdded, setIsNetworkAdded] = useState<boolean>(false); + const handleAddNetwork = async () => { - await addNetwork({ - chainId: chain as string, - chainName: chainData?.metadata.name, - rpcUrls: chainData?.publicRpcs, - token: chainData?.baseToken.name, - symbol: chainData?.baseToken.symbol, - decimals: chainData?.baseToken.decimals, - explorerUrl: chainData?.metadata.explorerUrl, - }); + if (!chainData) { + alert(t('CHAIN.networkDataMissing')); + return; + } + + try { + await addNetwork({ + chainId: chain as string, + chainName: chainData?.metadata.name, + rpcUrls: chainData?.metadata.publicRpcs, + token: chainData?.baseToken.name, + symbol: chainData?.baseToken.symbol, + decimals: chainData?.baseToken.decimals, + explorerUrl: chainData?.metadata.explorerUrl, + }); + setIsNetworkAdded(true); + } catch (error) { + console.error('Failed to add network:', error); + alert(t('CHAIN.addNetworkFailed')); + } }; return ( <> - {!isConnected && <BlueButton onClick={openConnectModal}> {t('WALLET.connection')} </BlueButton>} - {isConnected && ( + {!isConnected && <BlueButton onClick={openConnectModal}>{t('WALLET.connection')}</BlueButton>} + {isConnected && !isNetworkAdded && ( <BlueButton variant='contained' onClick={handleAddNetwork}> - <SIcon /> + <StyledIcon src={Add} alt='Add' /> {t('CHAIN.addNetwork')} </BlueButton> )} + {isConnected && isNetworkAdded && ( + <BlueButton variant='contained' disabled> + {t('CHAIN.networkAdded')} + </BlueButton> + )} </> ); }; @@ -59,10 +78,14 @@ const BlueButton = styled(Button)(() => { background: currentTheme.primary[300], boxShadow: 'none', }, + '&:disabled': { + background: currentTheme.primary[900], + color: currentTheme.textSecondary, + }, }; }); -const SIcon = styled(Image)({ +const StyledIcon = styled(Image)({ width: '1.5rem', height: '1.5rem', }); diff --git a/src/utils/addNetwork.ts b/src/utils/addNetwork.ts index aa35b9a..da2b556 100644 --- a/src/utils/addNetwork.ts +++ b/src/utils/addNetwork.ts @@ -4,15 +4,15 @@ interface AddNetwork { rpcUrls: string[]; token: string; symbol: string; - decimals: string; + decimals: number; explorerUrl: string; } export const addNetwork = async ({ chainId, chainName, rpcUrls, token, symbol, decimals, explorerUrl }: AddNetwork) => { const networkData = { - chainId: `0x${chainId}`, + chainId: chainId, chainName: chainName, - rpcUrls: [...rpcUrls], + rpcUrls: [rpcUrls], nativeCurrency: { name: token, symbol: symbol,