diff --git a/wallets/react-wallet-v2/src/utils/HelperUtil.ts b/wallets/react-wallet-v2/src/utils/HelperUtil.ts index 9ddf3da..8c7b3a1 100644 --- a/wallets/react-wallet-v2/src/utils/HelperUtil.ts +++ b/wallets/react-wallet-v2/src/utils/HelperUtil.ts @@ -69,3 +69,11 @@ export function getWalletAddressFromParams(addresses: string[], params: any) { return address } + +export function isEIP155Chain(chain: string) { + return chain.includes('eip155') +} + +export function isCosmosChain(chain: string) { + return chain.includes('cosmos') +} diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx index baed015..194fd7f 100644 --- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx +++ b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx @@ -1,7 +1,9 @@ import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData' import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data' import ModalStore from '@/store/ModalStore' +import { cosmosAddresses } from '@/utils/CosmosWalletUtil' import { eip155Addresses } from '@/utils/EIP155WalletUtil' +import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil' import { Avatar, @@ -19,7 +21,8 @@ import { import { Fragment, useState } from 'react' export default function SessionProposalModal() { - const [selectedAddresses, setSelectedAddresses] = useState([]) + const [selectedEIP155, setSelectedEip155] = useState([]) + const [selectedCosmos, setSelectedCosmos] = useState([]) // Get proposal data and wallet address from store const proposal = ModalStore.state.data?.proposal @@ -36,13 +39,23 @@ export default function SessionProposalModal() { const { methods } = permissions.jsonrpc const { protocol } = relay - // Add / remove address from selection - function onSelectAddress(address: string) { - if (selectedAddresses.includes(address)) { - const newAddresses = selectedAddresses.filter(a => a !== address) - setSelectedAddresses(newAddresses) + // Add / remove address from EIP155 selection + function onSelectEIP155(address: string) { + if (selectedEIP155.includes(address)) { + const newAddresses = selectedEIP155.filter(a => a !== address) + setSelectedEip155(newAddresses) } else { - setSelectedAddresses([...selectedAddresses, address]) + setSelectedEip155([...selectedEIP155, address]) + } + } + + // Add / remove address from Cosmos selection + function onSelectCosmos(address: string) { + if (selectedCosmos.includes(address)) { + const newAddresses = selectedCosmos.filter(a => a !== address) + setSelectedCosmos(newAddresses) + } else { + setSelectedCosmos([...selectedCosmos, address]) } } @@ -51,9 +64,15 @@ export default function SessionProposalModal() { if (proposal) { const accounts: string[] = [] chains.forEach(chain => { - selectedAddresses.forEach(address => { - accounts.push(`${chain}:${address}`) - }) + if (isEIP155Chain(chain)) { + selectedEIP155.forEach(address => { + accounts.push(`${chain}:${address}`) + }) + } else if (isCosmosChain(chain)) { + cosmosAddresses.forEach(address => { + accounts.push(`${chain}:${address}`) + }) + } }) const response = { @@ -128,36 +147,79 @@ export default function SessionProposalModal() { - + {chains.map(chain => { + if (isEIP155Chain(chain)) { + return ( + + - - - Select Accounts to Connect - {eip155Addresses.map((address, index) => ( - onSelectAddress(address)} - clickable - key={address} - css={{ - marginTop: '$5', - backgroundColor: selectedAddresses.includes(address) - ? 'rgba(23, 200, 100, 0.2)' - : '$accents2' - }} - > - - + + + Select EIP155 Accounts + {eip155Addresses.map((address, index) => ( + onSelectEIP155(address)} + clickable + key={address} + css={{ + marginTop: '$5', + backgroundColor: selectedEIP155.includes(address) + ? 'rgba(23, 200, 100, 0.2)' + : '$accents2' + }} + > + + - {`Account ${index + 1}`} + {`${truncate(address, 14)} - Account ${index + 1}`} + + + ))} + - - ))} - - + + ) + } else if (isCosmosChain(chain)) { + return ( + + + + + + Select Cosmos Accounts + {cosmosAddresses.map((address, index) => ( + onSelectCosmos(address)} + clickable + key={address} + css={{ + marginTop: '$5', + backgroundColor: selectedCosmos.includes(address) + ? 'rgba(23, 200, 100, 0.2)' + : '$accents2' + }} + > + + + + {`${truncate(address, 14)} - Account ${index + 1}`} + + + ))} + + + + ) + } + })} @@ -171,8 +233,8 @@ export default function SessionProposalModal() { flat color="success" onClick={onApprove} - disabled={!selectedAddresses.length} - css={{ opacity: selectedAddresses.length ? 1 : 0.4 }} + disabled={![...selectedEIP155, ...selectedCosmos].length} + css={{ opacity: [...selectedEIP155, ...selectedCosmos].length ? 1 : 0.4 }} > Approve