-
Notifications
You must be signed in to change notification settings - Fork 3
/
NetworkSwitcher.tsx
56 lines (52 loc) · 1.71 KB
/
NetworkSwitcher.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { ChainId } from '@pancakeswap/sdk'
import { Box, Text, UserMenu, UserMenuDivider, UserMenuItem } from '@pancakeswap/uikit'
import { bsc, bscTest, stealthTest } from '@pancakeswap/wagmi'
import { useTranslation } from 'contexts/Localization'
import useActiveWeb3React from 'hooks/useActiveWeb3React'
import Image from 'next/image'
import { setupNetwork } from 'utils/wallet'
const chains = [bsc, bscTest]
export const NetworkSelect = () => {
const { t } = useTranslation()
const img = {
[ChainId.BSC]: '/images/tokens/eth-logo.png',
[ChainId.BASE]: '/images/tokens/base-logo.svg',
[ChainId.STEALTH_TESTNET]: '/images/tokens/stealth-logo.png',
}
return (
<>
<Box px="16px" py="8px">
<Text>{t('Select a Network')}</Text>
</Box>
<UserMenuDivider />
{chains.map((chain) => (
<UserMenuItem key={chain.id} style={{ justifyContent: 'flex-start' }} onClick={() => setupNetwork(chain.id)}>
<Image width={24} height={24} src={img[chain.id]} unoptimized />
<Text pl="12px">{chain.name}</Text>
</UserMenuItem>
))}
</>
)
}
export const NetworkSwitcher = () => {
const { chainId } = useActiveWeb3React()
const img = {
[ChainId.BSC]: '/images/tokens/eth-logo.png',
[ChainId.BASE]: '/images/tokens/base-logo.svg',
[ChainId.STEALTH_TESTNET]: '/images/tokens/stealth-logo.png',
}
let networkName
if (chainId === bsc.id) {
networkName = bsc.name
} else if (chainId === bscTest.id) {
networkName = bscTest.name
} else {
networkName = stealthTest.name
}
return (
<UserMenu mr="8px" avatarSrc={img[chainId]} account={networkName} ellipsis={false}>
{() => <NetworkSelect />}
</UserMenu>
)
return null
}