Account card component and helper utils

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": {

wallets/react-wallet-v2/src/components/AccountCard.tsx

@@ -1,3 +1,40 @@
-export default function AccountCard() {
+import { truncate } from '@/utils/HelperUtil'
-  return null
+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>
+  )
 }

wallets/react-wallet-v2/src/components/PageHeader.tsx

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

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'

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 <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>
+  )
 }

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
   }

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'
+  }
+}

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)
+}

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"