From c80b12a1e72bcf75bd253e7efd921c4348429b73 Mon Sep 17 00:00:00 2001 From: brianshattuck Date: Fri, 7 Feb 2025 11:06:30 -0800 Subject: [PATCH 1/2] update the network selection modal styles --- .../NetworkSelectionDropdown.tsx | 115 +++++++++--------- .../styles/NetworkSelectionDropdown.scss | 9 +- src/config/imx.json | 2 +- src/config/manta.json | 2 +- src/constants/index.ts | 8 +- src/index.scss | 4 + 6 files changed, 78 insertions(+), 62 deletions(-) diff --git a/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx b/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx index e1ca9e1ce..fad45e302 100644 --- a/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx +++ b/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx @@ -80,65 +80,70 @@ const NetworkSelectionDropdown: React.FC<{ height={40} /> - {supportedChains.map((chain) => { - const config = getConfig(chain); - return ( - { - switchNetworkFunction(chain); - }} - > - - network Image - {config['networkName']} + + {supportedChains.map((chain) => { + const config = getConfig(chain); + return ( + { + switchNetworkFunction(chain); + }} + > + + network Image + {config['networkName']} + + {isSupportedNetwork && chainId && chainId === chain && ( + chain active + )} - {isSupportedNetwork && chainId && chainId === chain && ( - chain active - )} - - ); - })} + ); + })} + {networkType === 'mainnet' && ( <> - { - window.open('https://kinetix.finance/home', '_blank'); - }} - > - - network Image - Kava - Kinetix +

Partners

+ + { + window.open('https://kinetix.finance/home', '_blank'); + }} + > + + network Image + Kava - Kinetix + - - { - window.open('https://sparkdex.ai/apps/swap', '_blank'); - }} - > - - network Image - Flare - SparkDex + { + window.open('https://sparkdex.ai/apps/swap', '_blank'); + }} + > + + network Image + Flare - SparkDex + diff --git a/src/components/styles/NetworkSelectionDropdown.scss b/src/components/styles/NetworkSelectionDropdown.scss index dd8f48d2b..acf6ea3f2 100644 --- a/src/components/styles/NetworkSelectionDropdown.scss +++ b/src/components/styles/NetworkSelectionDropdown.scss @@ -5,7 +5,7 @@ position: absolute; right: 0; top: 50px; - width: 320px; + width: 360px; border: 1px solid $grey38; border-radius: 16px; padding: 16px; @@ -35,6 +35,13 @@ } } +.networkItemContainer { + display: grid; + grid-auto-flow: column; + grid-template-rows: repeat(5, auto); + gap: 10px; /* Spacing between items */ +} + .networkItemWrapper { height: 48px; display: flex; diff --git a/src/config/imx.json b/src/config/imx.json index b0f5aa1c9..b97a521c4 100644 --- a/src/config/imx.json +++ b/src/config/imx.json @@ -5,7 +5,7 @@ "rpc": "https://rpc.immutable.com", "blockExplorer": "https://explorer.immutable.com", "bridgeUrl": "https://toolkit.immutable.com/bridge/", - "networkName": "Immutable zkEVM Mainnet", + "networkName": "Immutable zkEVM", "aprAPINetwork": "imx", "chainId": 13371, "isMainnet": true, diff --git a/src/config/manta.json b/src/config/manta.json index 0ac0f66d8..ca01b304c 100644 --- a/src/config/manta.json +++ b/src/config/manta.json @@ -5,7 +5,7 @@ "rpc": "https://pacific-rpc.manta.network/http", "blockExplorer": "https://pacific-explorer.manta.network", "bridgeUrl": "https://pacific-bridge.manta.network/", - "networkName": "Manta Pacific L2 Rollup", + "networkName": "Manta", "aprAPINetwork": "manta", "chainId": 169, "isMainnet": true, diff --git a/src/constants/index.ts b/src/constants/index.ts index 7db6aa0ff..7df26bfaa 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -372,12 +372,13 @@ export const DEFAULT_LIST_OF_LISTS: string[] = [ export const SUPPORTED_CHAINIDS = [ ChainId.MATIC, - ChainId.ZKEVM, ChainId.MANTA, + ChainId.SONEIUM, + ChainId.IMX, + ChainId.ZKEVM, ChainId.LAYERX, - ChainId.DOGECHAIN, ChainId.ETHEREUM, - ChainId.IMX, + ChainId.DOGECHAIN, ChainId.ASTARZKEVM, ChainId.ZKATANA, ChainId.TIMX, @@ -386,7 +387,6 @@ export const SUPPORTED_CHAINIDS = [ ChainId.X1, ChainId.DOEGCHAIN_TESTNET, ChainId.MINATO, - ChainId.SONEIUM, ]; export interface GammaPair { diff --git a/src/index.scss b/src/index.scss index 211df4415..1f25ed4b4 100755 --- a/src/index.scss +++ b/src/index.scss @@ -499,6 +499,10 @@ wcm-modal { margin-top: 1rem; } +.mb-1 { + margin-bottom: 1rem; +} + .ml-1 { margin-left: 1rem; } From 2bf48fecbec7939d6c0dce6aaf7ee6135fbac1c0 Mon Sep 17 00:00:00 2001 From: brianshattuck Date: Fri, 7 Feb 2025 11:56:23 -0800 Subject: [PATCH 2/2] add chain new png --- src/assets/images/chainNew.png | Bin 0 -> 894 bytes .../NetworkSelectionDropdown.tsx | 10 ++++++++++ src/config/soneium.json | 1 + src/constants/index.ts | 6 +++--- 4 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 src/assets/images/chainNew.png diff --git a/src/assets/images/chainNew.png b/src/assets/images/chainNew.png new file mode 100644 index 0000000000000000000000000000000000000000..cfe51ba03b803b3afb82d151f486307e1e0ac7d4 GIT binary patch literal 894 zcmV-^1A+XBP)&k@SrGDB5%gLS^8f$;*2MgTP4-_E z?OPG?WFYhP@&5bVJ8v)a>*D=q9p!H%-Hu%Lc|P^v()_oV`GGmg!KV8B;z)Te(Y}C= z;nV!Bi1?#=_@-s4i9WxQN2<)V`aZNWiC+?^TNe6j_fq;Jv? zML~ONc3Y%cYjk^UMcPA;kvgo^5%^z^q%Q07BlK#+6NV>vV)gM!tF1J1OIo>uj?&Go zwwGUaMXs7kzA(d#%C^?kYbwAn{n>~9XELnhgE`Dg z_=LV@QTwZ~$X6q9-}#yg5JdnkItav$gD2$A0T!kFU6$2&^lTORjxOSq`~V^cnI;5; z3<1!~6hw{Tn?@O*Y-D<^_<1l|`}CU62~Nt__?if`2ze;>!6Re>5h>-{gpRlI=`b3g z?O%7Bna$q$h(I|6e*vcahuEKUFz5~!(3Q!!&F7U#Eq}cd4t6t}vRwSc&=Dl~6S$bl zrE&3%IVM`u#2N4KIg!TbV3`#45pt+0U+<@eI0H5JuzUkp3_&M%`D2mSaI{Z~`IW_I zx|~1F^pO_9!o{>MAn*{P{oT+j{5oKitN+ U{Ht{q+yDRo07*qoM6N<$f?Kb~i~s-t literal 0 HcmV?d00001 diff --git a/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx b/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx index fad45e302..8d9a9ebd0 100644 --- a/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx +++ b/src/components/NetworkSelectionDropdown/NetworkSelectionDropdown.tsx @@ -9,6 +9,7 @@ import { ChainId } from '@uniswap/sdk'; import { useIsSupportedNetwork } from 'utils'; import KavaImage from 'assets/images/KAVA.png'; import FlareImage from 'assets/images/flare.webp'; +import ChainNewImage from 'assets/images/chainNew.png'; import { useArcxAnalytics } from '@arcxmoney/analytics'; import CustomTabSwitch from 'components/v3/CustomTabSwitch'; import ActiveDotImage from 'assets/images/chainActiveDot.png'; @@ -98,6 +99,15 @@ const NetworkSelectionDropdown: React.FC<{ className='networkIcon' /> {config['networkName']} + {config['isNew'] && ( + chain new + )} {isSupportedNetwork && chainId && chainId === chain && (