diff --git a/wallets/react-wallet-v2/package.json b/wallets/react-wallet-v2/package.json index 2243801..5d6329f 100644 --- a/wallets/react-wallet-v2/package.json +++ b/wallets/react-wallet-v2/package.json @@ -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": { diff --git a/wallets/react-wallet-v2/src/components/AccountCard.tsx b/wallets/react-wallet-v2/src/components/AccountCard.tsx index 2d65672..8904d08 100644 --- a/wallets/react-wallet-v2/src/components/AccountCard.tsx +++ b/wallets/react-wallet-v2/src/components/AccountCard.tsx @@ -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 ( + + + + + + {name} + + + {truncate(address, 19)} + + + } /> + + + ) } diff --git a/wallets/react-wallet-v2/src/components/PageHeader.tsx b/wallets/react-wallet-v2/src/components/PageHeader.tsx index 20cc0c7..bffe161 100644 --- a/wallets/react-wallet-v2/src/components/PageHeader.tsx +++ b/wallets/react-wallet-v2/src/components/PageHeader.tsx @@ -13,11 +13,12 @@ interface Props { export default function PageHeader({ children }: Props) { return ( {children} diff --git a/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx b/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx index 770f4fe..6023d65 100644 --- a/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx +++ b/wallets/react-wallet-v2/src/containers/GlobalLayout.tsx @@ -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' diff --git a/wallets/react-wallet-v2/src/pages/index.tsx b/wallets/react-wallet-v2/src/pages/index.tsx index 14dd0c6..7f00db9 100644 --- a/wallets/react-wallet-v2/src/pages/index.tsx +++ b/wallets/react-wallet-v2/src/pages/index.tsx @@ -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 Accounts + return ( + + Accounts + {Object.values(MAINNET_CHAINS).map(({ name, logo, rgb }) => ( + + ))} + + ) } diff --git a/wallets/react-wallet-v2/src/store/WalletStore.ts b/wallets/react-wallet-v2/src/store/WalletStore.ts index 0210af2..a2a7abc 100644 --- a/wallets/react-wallet-v2/src/store/WalletStore.ts +++ b/wallets/react-wallet-v2/src/store/WalletStore.ts @@ -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 } diff --git a/wallets/react-wallet-v2/src/utils/EIP155ChainsUtil.ts b/wallets/react-wallet-v2/src/utils/EIP155ChainsUtil.ts new file mode 100644 index 0000000..1423110 --- /dev/null +++ b/wallets/react-wallet-v2/src/utils/EIP155ChainsUtil.ts @@ -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' + } +} diff --git a/wallets/react-wallet-v2/src/utils/HelperUtil.ts b/wallets/react-wallet-v2/src/utils/HelperUtil.ts new file mode 100644 index 0000000..c00c749 --- /dev/null +++ b/wallets/react-wallet-v2/src/utils/HelperUtil.ts @@ -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) +} diff --git a/wallets/react-wallet-v2/yarn.lock b/wallets/react-wallet-v2/yarn.lock index e07af22..0dc37df 100644 --- a/wallets/react-wallet-v2/yarn.lock +++ b/wallets/react-wallet-v2/yarn.lock @@ -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"