Skip to content

Commit 0b68096

Browse files
andrewlee348andrewlee348
committed
feat: custom token/network image icon,
feat: added testnet indicator to filter preview, feat: greyed out collections filter if no collections
1 parent b9004a8 commit 0b68096

File tree

7 files changed

+95
-39
lines changed

7 files changed

+95
-39
lines changed

‎packages/wallet-widget/src/components/Filter/FilterMenu.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ListCardNav } from '../ListCard'
1111
import { SlideupDrawer } from '../Select/SlideupDrawer'
1212

1313
import { CollectionsFilter } from './CollectionsFilter'
14+
import { NetworkImageCustom } from './NetworkImageCustom'
1415
import { NetworksFilter } from './NetworksFilter'
1516
import { WalletsFilter } from './WalletsFilter'
1617

@@ -96,7 +97,8 @@ export const FilterMenu = ({
9697
</div>
9798
) : (
9899
<StackedIconTag
99-
iconList={[`https://assets.sequence.info/images/networks/medium/${selectedNetworks[0]}.webp`]}
100+
// iconList={[`https://assets.sequence.info/images/networks/medium/${selectedNetworks[0]}.webp`]}
101+
iconList={[<NetworkImageCustom chainId={selectedNetworks[0]} style={{ width: '16px', height: '16px' }} />]}
100102
label={
101103
<Text variant="normal" color="primary" nowrap style={{ maxWidth: '200px' }} ellipsis>
102104
{getNetwork(selectedNetworks[0]).title}

‎packages/wallet-widget/src/components/Filter/NetworkImageCustom.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { getNetwork } from '@0xsequence/connect'
2+
import { NetworkImage } from '@0xsequence/design-system'
3+
4+
export const NetworkImageCustom = ({
5+
chainId,
6+
indicatorPosition = 'top-left',
7+
style,
8+
className
9+
}: {
10+
chainId: number
11+
indicatorPosition?: 'top-left' | 'top-right'
12+
style?: React.CSSProperties
13+
className?: string
14+
}) => {
15+
const network = getNetwork(chainId)
16+
const isTestnet = network.testnet
17+
return (
18+
<div className="relative overflow-visible">
19+
{isTestnet && (
20+
<div
21+
className="absolute z-1 border rounded-full"
22+
style={{
23+
minWidth: '6px',
24+
minHeight: '6px',
25+
width: '30%',
26+
height: '30%',
27+
...(indicatorPosition === 'top-left' && { left: '-1px', top: '-1px' }),
28+
...(indicatorPosition === 'top-right' && { right: '-1px', top: '-1px' }),
29+
backgroundColor: '#F4B03E'
30+
}}
31+
/>
32+
)}
33+
34+
<NetworkImage className={className} chainId={chainId} style={{ ...style }} />
35+
</div>
36+
)
37+
}

‎packages/wallet-widget/src/components/Filter/NetworkRow.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import { getNetwork } from '@0xsequence/connect'
2-
import { TokenImage, Text } from '@0xsequence/design-system'
2+
import { Text } from '@0xsequence/design-system'
33

44
import { ListCardSelect } from '../ListCard'
55

6+
import { NetworkImageCustom } from './NetworkImageCustom'
7+
68
export const NetworkRow = ({ chainId, isSelected, onClick }: { chainId: number; isSelected: boolean; onClick: () => void }) => {
79
const network = getNetwork(chainId)
8-
const isTestnet = network.testnet
910
const title = network.title
1011
return (
1112
<ListCardSelect key={chainId} isSelected={isSelected} onClick={onClick}>
12-
<div className="flex gap-2 justify-center items-center relative">
13-
{isTestnet && (
14-
<div
15-
className="absolute z-1 border rounded-full"
16-
style={{
17-
width: '10px',
18-
height: '10px',
19-
left: '-1px',
20-
top: '-1px',
21-
backgroundColor: '#F4B03E'
22-
}}
23-
/>
24-
)}
25-
<TokenImage src={`https://assets.sequence.info/images/networks/medium/${chainId}.webp`} />
13+
<div className="flex gap-2 justify-center items-center">
14+
<NetworkImageCustom chainId={chainId} style={{ width: '32px', height: '32px' }} />
2615
<Text color="primary" variant="normal" fontWeight="bold">
2716
{title}
2817
</Text>

‎packages/wallet-widget/src/components/Filter/TokenImageCustom.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { TokenImage } from '@0xsequence/design-system'
2+
3+
import { NetworkImageCustom } from './NetworkImageCustom'
4+
5+
const NETWORK_IMAGE_SIZE = '45%'
6+
const NETWORK_IMAGE_OFFSET = '-1px'
7+
8+
export const TokenImageCustom = ({
9+
src,
10+
symbol,
11+
chainId
12+
}: {
13+
src: string | undefined
14+
symbol: string | undefined
15+
chainId: number
16+
}) => {
17+
return (
18+
<div className="relative rounded-full bg-background-muted">
19+
<div
20+
className="absolute z-1"
21+
style={{
22+
width: NETWORK_IMAGE_SIZE,
23+
height: NETWORK_IMAGE_SIZE,
24+
bottom: NETWORK_IMAGE_OFFSET,
25+
right: NETWORK_IMAGE_OFFSET
26+
}}
27+
>
28+
<NetworkImageCustom
29+
className="border"
30+
chainId={chainId}
31+
indicatorPosition="top-right"
32+
style={{
33+
width: '100%',
34+
height: '100%'
35+
}}
36+
/>
37+
</div>
38+
39+
<TokenImage src={src} symbol={symbol} />
40+
</div>
41+
)
42+
}

‎packages/wallet-widget/src/components/IconWrappers/MediaIconWrapper.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const MediaIconWrapper = ({
7474
<>
7575
{isAccount ? (
7676
<div
77-
className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
77+
className={`flex items-center justify-center ${shapeClass} border bg-background-primary`}
7878
style={{ width: `calc(${widthClassMap[size]} + 2px)`, height: `calc(${widthClassMap[size]} + 2px)` }}
7979
>
8080
<GradientAvatar address={icon} className="w-full h-full" />
@@ -87,13 +87,13 @@ export const MediaIconWrapper = ({
8787
height: `calc(${widthClassMap[size]} + 2px)`
8888
}}
8989
>
90-
<img src={icon} alt="icon" style={{ backgroundColor: 'lightgray' }} />
90+
<img className="bg-background-muted" src={icon} alt="icon" />
9191
</div>
9292
)}
9393
</>
9494
) : (
9595
<div
96-
className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
96+
className={`flex items-center justify-center ${shapeClass} border bg-background-primary`}
9797
style={{
9898
width: `calc(${widthClassMap[size]} + 2px)`,
9999
height: `calc(${widthClassMap[size]} + 2px)`

‎packages/wallet-widget/src/components/ListCard/ListCardNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const ListCardNav = ({
2323
`flex flex-row justify-between items-center bg-background-secondary w-full p-4 ${!disabled && 'cursor-pointer hover:opacity-80'}`,
2424
shape === 'rounded' ? 'rounded-lg' : 'rounded-none'
2525
)}
26-
style={{ height: '52px', ...style }}
26+
style={{ height: '52px', ...(disabled ? { opacity: 0.6 } : {}), ...style }}
2727
onClick={!disabled ? onClick : undefined}
2828
>
2929
<div className="flex flex-row gap-2 items-center w-full">{children}</div>

‎packages/wallet-widget/src/components/SearchLists/TokenList/CoinRow.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { formatAddress, getNetwork } from '@0xsequence/connect'
2-
import { Text, TokenImage, GradientAvatar } from '@0xsequence/design-system'
1+
import { formatAddress } from '@0xsequence/connect'
2+
import { Text, GradientAvatar } from '@0xsequence/design-system'
33
import { getAddress } from 'viem'
44
import { useChains } from 'wagmi'
55

66
import { useSettings } from '../../../hooks'
77
import { formatTokenInfo } from '../../../utils/formatBalance'
88
import { TokenBalanceWithPrice } from '../../../utils/tokens'
9+
import { TokenImageCustom } from '../../Filter/TokenImageCustom'
910
import { ListCardNav } from '../../ListCard/ListCardNav'
1011

1112
interface BalanceItemProps {
@@ -18,7 +19,6 @@ export const CoinRow = ({ balance, onTokenClick, includeUserAddress = false }: B
1819
const { fiatCurrency } = useSettings()
1920
const chains = useChains()
2021
const { logo, name, symbol, displayBalance, fiatBalance } = formatTokenInfo(balance, fiatCurrency.sign, chains)
21-
const isTestnet = getNetwork(balance.chainId).testnet
2222

2323
const userAddress = getAddress(balance.accountAddress)
2424

@@ -29,21 +29,7 @@ export const CoinRow = ({ balance, onTokenClick, includeUserAddress = false }: B
2929
return (
3030
<ListCardNav type="custom" onClick={onClick} style={{ height: '68px' }}>
3131
<div className="flex flex-row justify-between items-center w-full gap-2">
32-
<div className="relative">
33-
<TokenImage src={logo} symbol={symbol} withNetwork={balance.chainId} />
34-
{isTestnet && (
35-
<div
36-
className="absolute z-1 border rounded-full"
37-
style={{
38-
width: '6px',
39-
height: '6px',
40-
right: '-1.5px',
41-
bottom: '6.8px',
42-
backgroundColor: '#F4B03E'
43-
}}
44-
/>
45-
)}
46-
</div>
32+
<TokenImageCustom src={logo} symbol={symbol} chainId={balance.chainId} />
4733
<div className="flex flex-row gap-2 items-center" style={{ flex: '1 1 0', width: 0 }}>
4834
<div className="flex flex-col w-full">
4935
<div className="flex flex-row w-full">

0 commit comments

Comments
 (0)