Add cosmos to account list

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

@@ -1,18 +1,22 @@
 import SettingsStore from '@/store/SettingsStore'
+import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
 import { useSnapshot } from 'valtio'
 
 export default function AccountPicker() {
-  const { address } = useSnapshot(SettingsStore.state)
+  const { account } = useSnapshot(SettingsStore.state)
+
+  function onSelect(value: string) {
+    const account = Number(value)
+    SettingsStore.setAccount(account)
+    SettingsStore.setEIP155Address(eip155Addresses[account])
+    SettingsStore.setCosmosAddress(cosmosAddresses[account])
+  }
 
   return (
-    <select
-      value={address}
-      onChange={e => SettingsStore.setAddress(e.currentTarget.value)}
-      aria-label="addresses"
-    >
-      <option value={eip155Addresses[0]}>Account 1</option>
-      <option value={eip155Addresses[1]}>Account 2</option>
+    <select value={account} onChange={e => onSelect(e.currentTarget.value)} aria-label="addresses">
+      <option value={0}>Account 1</option>
+      <option value={1}>Account 2</option>
     </select>
   )
 }

wallets/react-wallet-v2/src/data/COSMOSData.ts

@@ -5,8 +5,8 @@ export const COSMOS_MAINNET_CHAINS = {
   'cosmos:cosmoshub-4': {
     chainId: 'cosmoshub-4',
     name: 'Cosmos Hub',
-    logo: '/chain-logos/cosmos-cosmoshub4.png',
-    rgb: '27, 31, 53',
-    rpc: 'https://cloudflare-eth.com/'
+    logo: '/chain-logos/cosmos-cosmoshub-4.png',
+    rgb: '107, 111, 147',
+    rpc: ''
   }
 }

wallets/react-wallet-v2/src/hooks/useInitialization.ts

@@ -11,9 +11,12 @@ export default function useInitialization() {
     try {
       const { eip155Addresses } = createOrRestoreEIP155Wallet()
       const { cosmosAddresses } = await createOrRestoreCosmosWallet()
-      console.log(cosmosAddresses)
-      SettingsStore.setAddress(eip155Addresses[0])
+
+      SettingsStore.setEIP155Address(eip155Addresses[0])
+      SettingsStore.setCosmosAddress(cosmosAddresses[0])
+
       await createWalletConnectClient()
+
       setInitialized(true)
     } catch (err: unknown) {
       alert(err)

wallets/react-wallet-v2/src/pages/index.tsx

@@ -1,6 +1,7 @@
 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 SettingsStore from '@/store/SettingsStore'
 import { Text } from '@nextui-org/react'
@@ -8,7 +9,7 @@ import { Fragment } from 'react'
 import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
-  const { testNets, address } = useSnapshot(SettingsStore.state)
+  const { testNets, eip155Address, cosmosAddress } = useSnapshot(SettingsStore.state)
 
   return (
     <Fragment>
@@ -19,7 +20,10 @@ export default function HomePage() {
         Mainnets
       </Text>
       {Object.values(EIP155_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={address} />
+        <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} />
       ))}
 
       {testNets ? (
@@ -28,7 +32,7 @@ export default function HomePage() {
             Testnets
           </Text>
           {Object.values(EIP155_TEST_CHAINS).map(({ name, logo, rgb }) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={address} />
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} />
           ))}
         </Fragment>
       ) : null}

wallets/react-wallet-v2/src/pages/settings.tsx

@@ -6,7 +6,7 @@ import { Fragment } from 'react'
 import { useSnapshot } from 'valtio'
 
 export default function SettingsPage() {
-  const { testNets, address } = useSnapshot(SettingsStore.state)
+  const { testNets, eip155Address } = useSnapshot(SettingsStore.state)
 
   return (
     <Fragment>
@@ -15,7 +15,7 @@ export default function SettingsPage() {
         Mnemonic
       </Text>
       <Card bordered borderWeight="light" css={{ minHeight: '75px' }}>
-        <Text css={{ fontFamily: '$mono' }}>{eip155Wallets[address].mnemonic.phrase}</Text>
+        <Text css={{ fontFamily: '$mono' }}>{eip155Wallets[eip155Address].mnemonic.phrase}</Text>
       </Card>
 
       <Text css={{ color: '$yellow500', marginTop: '$5', textAlign: 'center' }}>

wallets/react-wallet-v2/src/store/SettingsStore.ts

@@ -5,7 +5,9 @@ import { proxy } from 'valtio'
  */
 interface State {
   testNets: boolean
-  address: string
+  account: number
+  eip155Address: string
+  cosmosAddress: string
 }
 
 /**
@@ -13,7 +15,9 @@ interface State {
  */
 const state = proxy<State>({
   testNets: typeof localStorage !== 'undefined' ? Boolean(localStorage.getItem('TEST_NETS')) : true,
-  address: ''
+  account: 0,
+  eip155Address: '',
+  cosmosAddress: ''
 })
 
 /**
@@ -22,8 +26,16 @@ const state = proxy<State>({
 const SettingsStore = {
   state,
 
-  setAddress(address: string) {
-    state.address = address
+  setAccount(value: number) {
+    state.account = value
+  },
+
+  setEIP155Address(eip155Address: string) {
+    state.eip155Address = eip155Address
+  },
+
+  setCosmosAddress(cosmosAddresses: string) {
+    state.cosmosAddress = cosmosAddresses
   },
 
   toggleTestNets() {