feat: release (#66)

- fix: website url button
- feat: disable btn is no url
- fix: remove connect wallet
- fix: pick 1 rpc to add network

public/locales/en/common.json

@@ -40,6 +40,7 @@
     "environment": "Environment",
     "nativeToken": "Native token",
     "addNetwork": "Add network",
+    "addNetworkFailed": "Failed to add network",
     "networkAdded": "Network added",
     "chainId": "Chain ID",
     "CHAININFORMATION": {

public/locales/es/common.json

@@ -40,6 +40,7 @@
     "environment": "Entorno",
     "nativeToken": "Token nativo",
     "addNetwork": "Agregar red",
+    "addNetworkFailed": "Error al agregar red",
     "networkAdded": "Red agregada",
     "chainId": "ID de cadena",
     "CHAININFORMATION": {

src/components/AddNetworkButton.tsx

@@ -29,7 +29,7 @@ export const AddNetworkButton = () => {
       await addNetwork({
         chainId: chain as string,
         chainName: chainData?.metadata.name,
-        rpcUrls: chainData?.metadata.publicRpcs,
+        rpcUrls: chainData?.metadata.publicRpcs[0],
         name: chainData?.baseToken.name,
         symbol: chainData?.baseToken.symbol,
         decimals: chainData?.baseToken.decimals,
@@ -47,16 +47,18 @@ export const AddNetworkButton = () => {
       {!isConnected && (
         <>
           <STooltip title={t('WALLET.connectTooltip')}>
-            <BlueButton onClick={openConnectModal}>{t('WALLET.connection')} </BlueButton>
+            <BlueButton onClick={openConnectModal}>{t('CHAIN.addNetwork')} </BlueButton>
           </STooltip>
         </>
       )}
+
       {isConnected && !isNetworkAdded && (
         <BlueButton variant='contained' onClick={handleAddNetwork}>
           <Icon icon='add' alt='Add' size={24} />
           {t('CHAIN.addNetwork')}
         </BlueButton>
       )}
+
       {isConnected && isNetworkAdded && (
         <BlueButton variant='contained' disabled>
           {t('CHAIN.networkAdded')}

src/containers/ChainDetail/ChainMetadata.tsx

@@ -27,16 +27,16 @@ export const ChainMetadata = () => {
         </ChainIdentity>
 
         <ButtonsContainer>
-          <MetadataButton href={chainMetadata?.explorerUrl} target='_blank'>
-            <Icon icon='web' alt='web-icon' size={20} />
+          <MetadataButton href={chainMetadata?.websiteUrl} target='_blank' disable={!chainMetadata?.websiteUrl}>
+            <Icon icon={chainMetadata?.websiteUrl ? 'web' : 'disabledWeb'} alt='web-icon' size={24} />
             {t('CHAIN.website')}
-            <Icon icon='link' alt='link-icon' size={24} />
+            <Icon icon={chainMetadata?.websiteUrl ? 'link' : 'disabledLink'} alt='link-icon' size={24} />
           </MetadataButton>
 
-          <MetadataButton href={chainMetadata?.explorerUrl} target='_blank'>
-            <Icon icon='block' alt='block-icon' size={24} />
+          <MetadataButton href={chainMetadata?.explorerUrl} target='_blank' disable={!chainMetadata?.explorerUrl}>
+            <Icon icon={chainMetadata?.explorerUrl ? 'btnBlock' : 'disabledBlock'} alt='block-icon' size={24} />
             {t('CHAIN.explorer')}
-            <Icon icon='link' alt='link-icon' size={24} />
+            <Icon icon={chainMetadata?.explorerUrl ? 'link' : 'disabledLink'} alt='link-icon' size={24} />
           </MetadataButton>
 
           <AddNetworkButton />
@@ -122,7 +122,7 @@ const ChainIdentity = styled(Box)(() => {
   };
 });
 
-const MetadataButton = styled('a')(() => {
+const MetadataButton = styled('a')(({ disable }: { disable: boolean }) => {
   const { currentTheme, theme } = useCustomTheme();
 
   return {
@@ -132,15 +132,15 @@ const MetadataButton = styled('a')(() => {
     background: theme === 'dark' ? currentTheme.backgroundSecondary : currentTheme.backgroundTertiary,
     borderRadius: currentTheme.borderRadius,
     padding: currentTheme.padding,
-    color: currentTheme.textPrimary,
+    color: disable ? (theme === 'dark' ? currentTheme.textSecondary : '#BEC2CC') : currentTheme.textPrimary,
     boxShadow: 'none',
     textTransform: 'none',
     fontSize: '1rem',
     gap: '0.5rem',
     lineHeight: '1.5rem',
     textDecoration: 'none',
     '&:hover': {
-      background: theme === 'dark' ? currentTheme.neutral[800] : currentTheme.neutral[300],
+      background: !disable && (theme === 'dark' ? currentTheme.neutral[800] : currentTheme.neutral[300]),
       boxShadow: 'none',
     },
   };

src/data/IconPaths.ts

@@ -45,12 +45,27 @@ import CheckDark from '~/assets/icons/checkDark.svg';
 import CheckLight from '~/assets/icons/checkLight.svg';
 import ErrorDark from '~/assets/icons/errorDark.svg';
 import ErrorLight from '~/assets/icons/errorLight.svg';
+import DisabledWebLight from '~/assets/icons/disabledWebLight.svg';
+import DisabledWebDark from '~/assets/icons/disabledWebDark.svg';
+import DisabledLinkDark from '~/assets/icons/disabledLinkDark.svg';
+import DisabledLinkLight from '~/assets/icons/disabledLinkLight.svg';
+import DisabledBlockDark from '~/assets/icons/disabledBlockDark.svg';
+import DisabledBlockLight from '~/assets/icons/disabledBlockLight.svg';
+import WhiteBlock from '~/assets/icons/whiteBlock.svg';
 
 export const iconPaths: IconPaths = {
   block: {
     dark: BlockDark,
     light: BlockLight,
   },
+  btnBlock: {
+    dark: WhiteBlock,
+    light: BlockLight,
+  },
+  disabledBlock: {
+    dark: DisabledBlockDark,
+    light: DisabledBlockLight,
+  },
   chainType: {
     dark: ChainTypeDark,
     light: ChainTypeLight,
@@ -83,10 +98,18 @@ export const iconPaths: IconPaths = {
     dark: WebDark,
     light: WebLight,
   },
+  disabledWeb: {
+    dark: DisabledWebDark,
+    light: DisabledWebLight,
+  },
   link: {
     dark: LinkDark,
     light: LinkLight,
   },
+  disabledLink: {
+    dark: DisabledLinkDark,
+    light: DisabledLinkLight,
+  },
   mode: {
     dark: LightMode, // Intended to show the light mode icon when the theme is dark
     light: DarkMode, // Intended to show the dark mode icon when the theme is light

src/types/Data.ts

@@ -30,6 +30,7 @@ export interface ChainData {
     launchDate: number;
     chainType?: string;
     tokenImgUrl?: string;
+    websiteUrl: string;
   };
   l2ChainInfo?: {
     tps: number;

src/utils/addNetwork.ts

@@ -1,7 +1,7 @@
 interface AddNetwork {
   chainId: string;
   chainName: string;
-  rpcUrls: string[];
+  rpcUrls: string;
   name: string;
   symbol: string;
   decimals: number;