feat: disabled btn and icon

defi-wonderland · Sep 11, 2024 · e302adf · e302adf
1 parent 0561e6b
commit e302adf
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 9 deletions.
diff --git a/src/assets/icons/disabledBlockDark.svg b/src/assets/icons/disabledBlockDark.svg
diff --git a/src/assets/icons/disabledBlockLight.svg b/src/assets/icons/disabledBlockLight.svg
diff --git a/src/assets/icons/disabledLinkDark.svg b/src/assets/icons/disabledLinkDark.svg
diff --git a/src/assets/icons/disabledLinkLight.svg b/src/assets/icons/disabledLinkLight.svg
diff --git a/src/assets/icons/disabledWebDark.svg b/src/assets/icons/disabledWebDark.svg
diff --git a/src/assets/icons/disabledWebLight.svg b/src/assets/icons/disabledWebLight.svg
diff --git a/src/assets/icons/whiteBlock.svg b/src/assets/icons/whiteBlock.svg
diff --git a/src/containers/ChainDetail/ChainMetadata.tsx b/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',
     },
   };

diff --git a/src/data/IconPaths.ts b/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

diff --git a/src/types/Data.ts b/src/types/Data.ts
@@ -30,6 +30,7 @@ export interface ChainData {
     launchDate: number;
     chainType?: string;
     tokenImgUrl?: string;
+    websiteUrl: string;
   };
   l2ChainInfo?: {
     tps: number;