wallet-connect-web-examples/wallets/react-wallet-v2/src/pages/index.tsx
amirsaran3 fcec9e477a
Added Near Protocol to examples (#59)
Co-authored-by: Ben Kremer <contact@bkrem.dev>
2022-10-18 12:31:08 +02:00

62 lines
2.6 KiB
TypeScript

import AccountCard from '@/components/AccountCard'
import AccountPicker from '@/components/AccountPicker'
import PageHeader from '@/components/PageHeader'
import { COSMOS_MAINNET_CHAINS } from '@/data/COSMOSData'
import { EIP155_MAINNET_CHAINS, EIP155_TEST_CHAINS } from '@/data/EIP155Data'
import { SOLANA_MAINNET_CHAINS, SOLANA_TEST_CHAINS } from '@/data/SolanaData'
import { POLKADOT_MAINNET_CHAINS, POLKADOT_TEST_CHAINS } from '@/data/PolkadotData'
import SettingsStore from '@/store/SettingsStore'
import { Text } from '@nextui-org/react'
import { Fragment } from 'react'
import { useSnapshot } from 'valtio'
import { NEAR_TEST_CHAINS } from '@/data/NEARData'
export default function HomePage() {
const { testNets, eip155Address, cosmosAddress, solanaAddress, polkadotAddress, nearAddress } = useSnapshot(
SettingsStore.state
)
return (
<Fragment>
<PageHeader title="Accounts">
<AccountPicker />
</PageHeader>
<Text h4 css={{ marginBottom: '$5' }}>
Mainnets
</Text>
{Object.values(EIP155_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} />
))}
{Object.values(COSMOS_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={cosmosAddress} />
))}
{Object.values(SOLANA_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} />
))}
{Object.values(POLKADOT_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} />
))}
{testNets ? (
<Fragment>
<Text h4 css={{ marginBottom: '$5' }}>
Testnets
</Text>
{Object.values(EIP155_TEST_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} />
))}
{Object.values(SOLANA_TEST_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} />
))}
{Object.values(POLKADOT_TEST_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} />
))}
{Object.values(NEAR_TEST_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={nearAddress} />
))}
</Fragment>
) : null}
</Fragment>
)
}