deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Account card component and helper utils

Browse Source
This commit is contained in:
Ilja 2022-02-04 16:31:23 +02:00
parent 9b0eff96b5
commit b79d0c533b
9 changed files with 110 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wallets/react-wallet-v2/package.json
View File

@ -16,8 +16,8 @@
"next-themes": "0.0.15",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-iconly": "2.2.5",
"ethers": "5.5.4",
"keyvaluestorage": "0.7.1",
"valtio": "1.2.11"
},
"devDependencies": {

41
wallets/react-wallet-v2/src/components/AccountCard.tsx
View File

@ -1,3 +1,40 @@
export default function AccountCard() {
return null
import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Text } from '@nextui-org/react'
import { Paper } from 'react-iconly'
interface Props {
name: string
logo: string
rgb: string
address: string
}
export default function AccountCard({ name, logo, rgb, address }: Props) {
return (
<Card
bordered
borderWeight="light"
css={{
borderColor: `rgba(${rgb}, 0.6)`,
boxShadow: `0 0 10px 0 rgba(${rgb}, 0.1)`,
marginBottom: '$6',
overflowY: 'hidden'
}}
>
<Card.Body
css={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
>
<Avatar src={logo} css={{ borderColor: `rgb(${rgb})` }} />
<div style={{ flex: 1 }}>
<Text h5 css={{ marginLeft: '$9' }}>
{name}
</Text>
<Text weight="light" size={13} css={{ marginLeft: '$9' }}>
{truncate(address, 19)}
</Text>
</div>
<Button auto flat color="primary" icon={<Paper filled />} />
</Card.Body>
</Card>
)
}

9
wallets/react-wallet-v2/src/components/PageHeader.tsx
View File

@ -13,11 +13,12 @@ interface Props {
export default function PageHeader({ children }: Props) {
return (
<Text
h3
css={{
textGradient: '45deg, $primary -20%, $secondary 100%'
}}
h2
weight="bold"
css={{
textGradient: '45deg, $primary -20%, $secondary 100%',
marginBottom: '$10'
}}
>
{children}
</Text>

2
wallets/react-wallet-v2/src/containers/GlobalLayout.tsx
View File

@ -40,7 +40,7 @@ export default function GlobalLayout({ children }: Props) {
borderWeight="light"
css={{
height: '92vh',
maxWidth: '600px',
maxWidth: '500px',
width: '100%',
justifyContent: initialized ? 'normal' : 'center',
alignItems: initialized ? 'normal' : 'center'

12
wallets/react-wallet-v2/src/pages/index.tsx
View File

@ -1,9 +1,19 @@
import AccountCard from '@/components/AccountCard'
import PageHeader from '@/components/PageHeader'
import WalletStore from '@/store/WalletStore'
import { MAINNET_CHAINS } from '@/utils/EIP155ChainsUtil'
import { Fragment } from 'react'
import { useSnapshot } from 'valtio'
export default function HomePage() {
const { wallet } = useSnapshot(WalletStore.state)
return <PageHeader>Accounts</PageHeader>
return (
<Fragment>
<PageHeader>Accounts</PageHeader>
{Object.values(MAINNET_CHAINS).map(({ name, logo, rgb }) => (
<AccountCard key={name} name={name} logo={logo} rgb={rgb} address={wallet.address} />
))}
</Fragment>
)
}

4
wallets/react-wallet-v2/src/store/WalletStore.ts
View File

@ -1,6 +1,5 @@
import WalletConnectClient from '@walletconnect/client'
import { Wallet } from 'ethers'
import KeyValueStorage from 'keyvaluestorage'
import { proxy } from 'valtio'
/**
@ -46,8 +45,7 @@ const WalletStore = {
description: 'React Wallet for WalletConnect',
url: 'https://walletconnect.com/',
icons: ['https://avatars.githubusercontent.com/u/37784886']
},
storage: new KeyValueStorage()
}
})
state.walletConnectClient = walletConnectClient
}

34
wallets/react-wallet-v2/src/utils/EIP155ChainsUtil.ts Normal file
View File

@ -0,0 +1,34 @@
/**
* @desc Refference list of eip155 chains
* @url https://chainlist.org
*/
export const LOGO_BASE_URL = 'https://blockchain-api.xyz/logos/'
export const MAINNET_CHAINS = {
'1': {
name: 'Ethereum',
logo: LOGO_BASE_URL + 'eip155:1.png',
rgb: '99, 125, 234'
},
'10': {
name: 'Optimism',
logo: LOGO_BASE_URL + 'eip155:10.png',
rgb: '233, 1, 1'
},
'100': {
name: 'Gnosis',
logo: LOGO_BASE_URL + 'eip155:100.png',
rgb: '73, 169, 166'
},
'137': {
name: 'Polygon',
logo: LOGO_BASE_URL + 'eip155:137.png',
rgb: '130, 71, 229'
},
'42161': {
name: 'Arbitrum',
logo: LOGO_BASE_URL + 'eip155:42161.png',
rgb: '44, 55, 75'
}
}

12
wallets/react-wallet-v2/src/utils/HelperUtil.ts Normal file
View File

@ -0,0 +1,12 @@
export function truncate(value: string, length: number) {
if (value.length <= length) {
return value
}
const separator = '...'
const stringLength = length - separator.length
const frontLength = Math.ceil(stringLength / 2)
const backLength = Math.floor(stringLength / 2)
return value.substring(0, frontLength) + separator + value.substring(value.length - backLength)
}

7
wallets/react-wallet-v2/yarn.lock
View File

@ -2007,7 +2007,7 @@ keyvaluestorage-interface@^1.0.0:
resolved "https://registry.yarnpkg.com/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz#13ebdf71f5284ad54be94bd1ad9ed79adad515ff"
integrity sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==
keyvaluestorage@0.7.1, keyvaluestorage@^0.7.1:
keyvaluestorage@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/keyvaluestorage/-/keyvaluestorage-0.7.1.tgz#be2f9f742d759d5442cdf9d49af6bdacc964c1eb"
integrity sha512-7AHq8bZE4WRWy+BltiuPwQo5aKuj7CguhwGdW7NUUOEImY2Tq/lJaBjHdOf0MYzeu+Y4oxQWhkZEZcrDc9KnxA==
@ -2506,6 +2506,11 @@ react-dom@17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-iconly@2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-iconly/-/react-iconly-2.2.5.tgz#32b9a1d66815ae6a421026694e7d16027248d87f"
integrity sha512-c9WO/2TJltmyCVGj+/mdJZFoldfzYA8uUPmcml03D6YlBVWsCN5gq5Vb2k95qmeg+vSqMRvC69yghZvM0T4lKQ==
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"