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,
},
}}
>