diff --git a/src/assets/icons/disabledBlockDark.svg b/src/assets/icons/disabledBlockDark.svg
new file mode 100644
index 0000000..38a44b6
--- /dev/null
+++ b/src/assets/icons/disabledBlockDark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/disabledBlockLight.svg b/src/assets/icons/disabledBlockLight.svg
new file mode 100644
index 0000000..86ac707
--- /dev/null
+++ b/src/assets/icons/disabledBlockLight.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/disabledLinkDark.svg b/src/assets/icons/disabledLinkDark.svg
new file mode 100644
index 0000000..54ef24b
--- /dev/null
+++ b/src/assets/icons/disabledLinkDark.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/disabledLinkLight.svg b/src/assets/icons/disabledLinkLight.svg
new file mode 100644
index 0000000..dc4a897
--- /dev/null
+++ b/src/assets/icons/disabledLinkLight.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/disabledWebDark.svg b/src/assets/icons/disabledWebDark.svg
new file mode 100644
index 0000000..ed3b99b
--- /dev/null
+++ b/src/assets/icons/disabledWebDark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/disabledWebLight.svg b/src/assets/icons/disabledWebLight.svg
new file mode 100644
index 0000000..fd946fd
--- /dev/null
+++ b/src/assets/icons/disabledWebLight.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/whiteBlock.svg b/src/assets/icons/whiteBlock.svg
new file mode 100644
index 0000000..23a2d62
--- /dev/null
+++ b/src/assets/icons/whiteBlock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/containers/ChainDetail/ChainMetadata.tsx b/src/containers/ChainDetail/ChainMetadata.tsx
index 7d70eaf..ba5ccf3 100644
--- a/src/containers/ChainDetail/ChainMetadata.tsx
+++ b/src/containers/ChainDetail/ChainMetadata.tsx
@@ -27,16 +27,16 @@ export const ChainMetadata = () => {
-
-
+
+
{t('CHAIN.website')}
-
+
-
-
+
+
{t('CHAIN.explorer')}
-
+
@@ -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,7 +132,7 @@ 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',
@@ -140,7 +140,7 @@ const MetadataButton = styled('a')(() => {
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
index badca22..6478ec5 100644
--- 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
index 80a7353..5ac1f08 100644
--- 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;