diff --git a/wormhole-connect/src/config/mainnet/tokens.ts b/wormhole-connect/src/config/mainnet/tokens.ts index b0e400d42..9ae0fcc20 100644 --- a/wormhole-connect/src/config/mainnet/tokens.ts +++ b/wormhole-connect/src/config/mainnet/tokens.ts @@ -7,7 +7,7 @@ export const MAINNET_TOKENS: TokensConfig = { nativeChain: 'Ethereum', icon: Icon.ETH, coinGeckoId: 'ethereum', - color: '#62688F', + color: '#38487d', decimals: 18, wrappedAsset: 'WETH', }, diff --git a/wormhole-connect/src/icons/Tokens/ETH.tsx b/wormhole-connect/src/icons/Tokens/ETH.tsx index 5f38c813d..4d908a33d 100644 --- a/wormhole-connect/src/icons/Tokens/ETH.tsx +++ b/wormhole-connect/src/icons/Tokens/ETH.tsx @@ -3,20 +3,53 @@ import React from 'react'; function ETH() { return ( - - - - - + + + + + + + + + + + + ); } diff --git a/wormhole-connect/src/theme.ts b/wormhole-connect/src/theme.ts index 8d1db003d..3dbd3c809 100644 --- a/wormhole-connect/src/theme.ts +++ b/wormhole-connect/src/theme.ts @@ -297,7 +297,7 @@ export const dark: WormholeConnectTheme = { elevation: 'none', }, modal: { - background: '#17171D', + background: '#181a2d', }, font: { primary: '"Inter", sans-serif', diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx index 444e885c4..7a68f933d 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx @@ -23,8 +23,9 @@ import { isDisabledChain } from 'store/transferInput'; import ChainList from './ChainList'; import TokenList from './TokenList'; import { Chain } from '@wormhole-foundation/sdk'; +import { Box } from '@mui/material'; -const useStyles = makeStyles()((theme) => ({ +const useStyles = makeStyles()((theme: any) => ({ container: { marginTop: '4px', }, @@ -53,6 +54,12 @@ const useStyles = makeStyles()((theme) => ({ cursor: 'not-allowed', clickEvent: 'none', }, + chainBadge: { + padding: '2px', + background: theme.palette.background.default, + borderRadius: '6px', + border: `2px solid ${theme.palette.modal.background}`, + }, })); type Props = { @@ -113,12 +120,20 @@ const AssetPicker = (props: Props) => { const badges = useMemo(() => { return ( } + badgeContent={ + <> + {chainConfig ? ( + + + + ) : null} + + } sx={{ marginRight: '8px', '& .MuiBadge-badge': { right: 2, - top: 36, + top: 44, }, }} >