From e302adfe73002a618a70bd00e0d7d977957fca16 Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 11 Sep 2024 12:12:14 -0300 Subject: [PATCH 1/3] feat: disabled btn and icon --- src/assets/icons/disabledBlockDark.svg | 1 + src/assets/icons/disabledBlockLight.svg | 1 + src/assets/icons/disabledLinkDark.svg | 5 +++++ src/assets/icons/disabledLinkLight.svg | 5 +++++ src/assets/icons/disabledWebDark.svg | 1 + src/assets/icons/disabledWebLight.svg | 1 + src/assets/icons/whiteBlock.svg | 1 + src/containers/ChainDetail/ChainMetadata.tsx | 18 +++++++-------- src/data/IconPaths.ts | 23 ++++++++++++++++++++ src/types/Data.ts | 1 + 10 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/disabledBlockDark.svg create mode 100644 src/assets/icons/disabledBlockLight.svg create mode 100644 src/assets/icons/disabledLinkDark.svg create mode 100644 src/assets/icons/disabledLinkLight.svg create mode 100644 src/assets/icons/disabledWebDark.svg create mode 100644 src/assets/icons/disabledWebLight.svg create mode 100644 src/assets/icons/whiteBlock.svg 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; From 95b17cabd0f2f03261cac73ea7147ba139863f21 Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 11 Sep 2024 12:36:33 -0300 Subject: [PATCH 2/3] fix: remove connect wallet btn --- src/components/AddNetworkButton.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AddNetworkButton.tsx b/src/components/AddNetworkButton.tsx index deb64c3..62c50b2 100644 --- a/src/components/AddNetworkButton.tsx +++ b/src/components/AddNetworkButton.tsx @@ -47,16 +47,18 @@ export const AddNetworkButton = () => { {!isConnected && ( <> - {t('WALLET.connection')} + {t('CHAIN.addNetwork')} )} + {isConnected && !isNetworkAdded && ( {t('CHAIN.addNetwork')} )} + {isConnected && isNetworkAdded && ( {t('CHAIN.networkAdded')} From c385354043a26c823875565554d99eed8673e0c2 Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 11 Sep 2024 14:01:16 -0300 Subject: [PATCH 3/3] fix: remove rpc array from network set up --- public/locales/en/common.json | 1 + public/locales/es/common.json | 1 + src/components/AddNetworkButton.tsx | 2 +- src/utils/addNetwork.ts | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 464dd5e..0c9e767 100644 --- a/public/locales/en/common.json +++ b/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": { diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 3e38891..7fa34cb 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", + "addNetworkFailed": "Error al agregar red", "networkAdded": "Red agregada", "chainId": "ID de cadena", "CHAININFORMATION": { diff --git a/src/components/AddNetworkButton.tsx b/src/components/AddNetworkButton.tsx index deb64c3..dd9ae5a 100644 --- a/src/components/AddNetworkButton.tsx +++ b/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, diff --git a/src/utils/addNetwork.ts b/src/utils/addNetwork.ts index 82f4d23..a1e18c1 100644 --- a/src/utils/addNetwork.ts +++ b/src/utils/addNetwork.ts @@ -1,7 +1,7 @@ interface AddNetwork { chainId: string; chainName: string; - rpcUrls: string[]; + rpcUrls: string; name: string; symbol: string; decimals: number;