feat: network added btn disabled

defi-wonderland · Aug 16, 2024 · 748c9c0 · 748c9c0
1 parent e96663e
commit 748c9c0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,