From 4665a1f72717fd3f928ba41bf358706efa4c0d9e Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Fri, 6 Sep 2024 14:44:32 +0700 Subject: [PATCH 1/2] feat: mode network multichain banner --- assets/icons/lido-multichain/mode.svg | 11 +++++++++++ consts/chains.ts | 1 + .../lido-multichain-fallback.tsx | 2 ++ shared/wallet/lido-multichain-fallback/styles.tsx | 8 ++++++++ 4 files changed, 22 insertions(+) create mode 100644 assets/icons/lido-multichain/mode.svg diff --git a/assets/icons/lido-multichain/mode.svg b/assets/icons/lido-multichain/mode.svg new file mode 100644 index 000000000..c3eaca426 --- /dev/null +++ b/assets/icons/lido-multichain/mode.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/consts/chains.ts b/consts/chains.ts index e5bb343be..506330d20 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -14,4 +14,5 @@ export enum LIDO_MULTICHAIN_CHAINS { Linea = 59144, Scroll = 534352, 'BNB Chain' = 56, + 'Mode Chain' = 34443, } diff --git a/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx index bbf6b4784..534e9479f 100644 --- a/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx +++ b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx @@ -11,6 +11,7 @@ import { ReactComponent as PolygonLogo } from 'assets/icons/lido-multichain/poly import { ReactComponent as ZkSyncLogo } from 'assets/icons/lido-multichain/zk-sync.svg'; import { ReactComponent as ScrollLogo } from 'assets/icons/lido-multichain/scroll.svg'; import { ReactComponent as BNBLogo } from 'assets/icons/lido-multichain/bnb.svg'; +import { ReactComponent as ModeLogo } from 'assets/icons/lido-multichain/mode.svg'; import { config } from 'config'; import { useUserConfig } from 'config/user-config'; @@ -34,6 +35,7 @@ const multichainLogos = { [LIDO_MULTICHAIN_CHAINS['zkSync Era']]: ZkSyncLogo, [LIDO_MULTICHAIN_CHAINS.Scroll]: ScrollLogo, [LIDO_MULTICHAIN_CHAINS['BNB Chain']]: BNBLogo, + [LIDO_MULTICHAIN_CHAINS['Mode Chain']]: ModeLogo, }; const getChainLogo = (chainId: LIDO_MULTICHAIN_CHAINS) => { diff --git a/shared/wallet/lido-multichain-fallback/styles.tsx b/shared/wallet/lido-multichain-fallback/styles.tsx index 965a0057c..9ed5fe727 100644 --- a/shared/wallet/lido-multichain-fallback/styles.tsx +++ b/shared/wallet/lido-multichain-fallback/styles.tsx @@ -63,6 +63,14 @@ export const Wrap = styled((props) => )` #f0b90b 91.42% ); `; + case LIDO_MULTICHAIN_CHAINS['Mode Chain']: + return css` + background: linear-gradient( + 54.14deg, + #626931 -22.38%, + #b4c740 91.42% + ); + `; default: return css` background: linear-gradient( From 96cf9f74a732c14167ff4655659c786c4b14c957 Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Fri, 6 Sep 2024 15:39:33 +0700 Subject: [PATCH 2/2] feat: use config for multichain banner --- IPFS.json | 8 +++-- config/external-config/types.ts | 1 + config/external-config/utils.ts | 55 ++++++++++++++++++++++++++------- config/groups/revalidation.ts | 13 -------- consts/external-links.ts | 2 +- shared/hooks/use-dapp-status.ts | 9 ++++-- 6 files changed, 59 insertions(+), 29 deletions(-) diff --git a/IPFS.json b/IPFS.json index df2d553d1..df6502566 100644 --- a/IPFS.json +++ b/IPFS.json @@ -3,7 +3,8 @@ "cid": "bafybeib3zmyqlmantvdd6i5q4ehmo4larvorgquyanne3uoqdbedwgh3aq", "leastSafeVersion": "0.36.1", "config": { - "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"] + "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"], + "multiChainBanner": [324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56] } }, "5": { @@ -16,7 +17,10 @@ "cid": "bafybeibbsoqlofslw273b4ih2pdxfaz2zbjmred2ijog725tcmfoewix7y", "leastSafeVersion": "0.36.1", "config": { - "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"] + "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"], + "multiChainBanner": [ + 324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56, 34443 + ] } } } diff --git a/config/external-config/types.ts b/config/external-config/types.ts index 92ea1ad04..7c0435064 100644 --- a/config/external-config/types.ts +++ b/config/external-config/types.ts @@ -12,6 +12,7 @@ export type ManifestEntry = { export type ManifestConfig = { enabledWithdrawalDexes: DexWithdrawalApi[]; + multiChainBanner: number[]; }; export type ExternalConfig = Omit & diff --git a/config/external-config/utils.ts b/config/external-config/utils.ts index 9dc7e8d86..ad7f72c1f 100644 --- a/config/external-config/utils.ts +++ b/config/external-config/utils.ts @@ -4,7 +4,45 @@ import { getDexConfig } from 'features/withdrawals/request/withdrawal-rates'; import FallbackLocalManifest from 'IPFS.json' assert { type: 'json' }; -// TODO: refactor on config expansion +const isEnabledDexesValid = (config: object) => { + if ( + !( + 'enabledWithdrawalDexes' in config && + Array.isArray(config.enabledWithdrawalDexes) + ) + ) + return false; + + const enabledWithdrawalDexes = config.enabledWithdrawalDexes; + + if ( + !enabledWithdrawalDexes.every( + (dex) => typeof dex === 'string' && dex !== '', + ) + ) + return false; + + return new Set(enabledWithdrawalDexes).size === enabledWithdrawalDexes.length; +}; + +const isMultiChainBannerValid = (config: object) => { + // allow empty config + if (!('multiChainBanner' in config) || !config.multiChainBanner) return true; + + if (!Array.isArray(config.multiChainBanner)) return false; + + const multiChainBanner = config.multiChainBanner; + + if ( + !multiChainBanner.every( + (chainId) => typeof chainId === 'number' && chainId > 0, + ) + ) + return false; + + return !(new Set(multiChainBanner).size !== multiChainBanner.length); +}; + export const isManifestEntryValid = ( entry?: unknown, ): entry is ManifestEntry => { @@ -18,16 +56,10 @@ export const isManifestEntryValid = ( entry.config ) { const config = entry.config; - if ( - 'enabledWithdrawalDexes' in config && - Array.isArray(config.enabledWithdrawalDexes) - ) { - const enabledWithdrawalDexes = config.enabledWithdrawalDexes; - return ( - new Set(enabledWithdrawalDexes).size === enabledWithdrawalDexes.length - ); - } - return false; + + return [isEnabledDexesValid, isMultiChainBannerValid] + .map((validator) => validator(config)) + .every((isValid) => isValid); } return false; }; @@ -39,6 +71,7 @@ export const getBackwardCompatibleConfig = ( enabledWithdrawalDexes: config.enabledWithdrawalDexes.filter( (dex) => !!getDexConfig(dex), ), + multiChainBanner: config.multiChainBanner ?? [], }; }; diff --git a/config/groups/revalidation.ts b/config/groups/revalidation.ts index 59c55f761..523d09e79 100644 --- a/config/groups/revalidation.ts +++ b/config/groups/revalidation.ts @@ -1,15 +1,2 @@ -import type { ManifestConfig, ManifestEntry } from 'config/external-config'; - export const DEFAULT_REVALIDATION = 60 * 15; // 15 minutes export const ERROR_REVALIDATION_SECONDS = 60; // 1 minute - -export const FALLBACK_CONFIG: ManifestConfig = { - enabledWithdrawalDexes: [], -}; - -export const FALLBACK_MANIFEST_ENTRY: ManifestEntry = { - cid: undefined, - ens: undefined, - leastSafeVersion: undefined, - config: FALLBACK_CONFIG, -}; diff --git a/consts/external-links.ts b/consts/external-links.ts index af4db36ed..a62599c78 100644 --- a/consts/external-links.ts +++ b/consts/external-links.ts @@ -5,6 +5,6 @@ export const LINK_ADD_NFT_GUIDE = `${config.helpOrigin}/en/articles/7858367-how- export const OPEN_OCEAN_REFERRAL_ADDRESS = '0xbb1263222b2c020f155d409dba05c4a3861f18f8'; -// for dev and local testing you can set to 'http:/localhost:3000/runtime/IPFS.json' and have file at /public/runtime/IPFS.json +// for dev and local testing you can set to 'http://localhost:3000/runtime/IPFS.json' and have file at /public/runtime/IPFS.json export const IPFS_MANIFEST_URL = 'https://raw.githubusercontent.com/lidofinance/ethereum-staking-widget/main/IPFS.json'; diff --git a/shared/hooks/use-dapp-status.ts b/shared/hooks/use-dapp-status.ts index 2ddc41cb1..b4f6909b3 100644 --- a/shared/hooks/use-dapp-status.ts +++ b/shared/hooks/use-dapp-status.ts @@ -4,14 +4,19 @@ import { useAccount } from 'wagmi'; import { LIDO_MULTICHAIN_CHAINS } from 'consts/chains'; import { useIsSupportedChain } from './use-is-supported-chain'; +import { useConfig } from 'config'; export const useDappStatus = () => { + const { multiChainBanner } = useConfig().externalConfig; const { chainId, isConnected: isWalletConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); const isLidoMultichainChain = useMemo( - () => !!chainId && !!LIDO_MULTICHAIN_CHAINS[chainId], - [chainId], + () => + !!chainId && + !!LIDO_MULTICHAIN_CHAINS[chainId] && + multiChainBanner.includes(chainId), + [chainId, multiChainBanner], ); const isDappActive = useMemo(() => {