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

Add ui to select pairing accs cross chain

Browse Source
This commit is contained in:
Ilja 2022-02-28 16:16:30 +02:00
parent 30f5f7cb1e
commit 9217bee15b
2 changed files with 109 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
wallets/react-wallet-v2/src/utils/HelperUtil.ts
View File

@ -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')
}

92
wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
View File

@ -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<string[]>([])
const [selectedEIP155, setSelectedEip155] = useState<string[]>([])
const [selectedCosmos, setSelectedCosmos] = useState<string[]>([])
// 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 => {
if (isEIP155Chain(chain)) {
selectedEIP155.forEach(address => {
accounts.push(`${chain}:${address}`)
})
} else if (isCosmosChain(chain)) {
cosmosAddresses.forEach(address => {
accounts.push(`${chain}:${address}`)
})
}
})
const response = {
@ -128,19 +147,23 @@ export default function SessionProposalModal() {
</Col>
</Row>
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row>
<Col>
<Text h5>Select Accounts to Connect</Text>
<Text h5>Select EIP155 Accounts</Text>
{eip155Addresses.map((address, index) => (
<Card
onClick={() => onSelectAddress(address)}
onClick={() => onSelectEIP155(address)}
clickable
key={address}
css={{
marginTop: '$5',
backgroundColor: selectedAddresses.includes(address)
backgroundColor: selectedEIP155.includes(address)
? 'rgba(23, 200, 100, 0.2)'
: '$accents2'
}}
@ -149,15 +172,54 @@ export default function SessionProposalModal() {
<Checkbox
size="lg"
color="success"
checked={selectedAddresses.includes(address)}
checked={selectedEIP155.includes(address)}
/>
<Text>{`Account ${index + 1}`} </Text>
<Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
</Row>
</Card>
))}
</Col>
</Row>
</Fragment>
)
} else if (isCosmosChain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row>
<Col>
<Text h5>Select Cosmos Accounts</Text>
{cosmosAddresses.map((address, index) => (
<Card
onClick={() => onSelectCosmos(address)}
clickable
key={address}
css={{
marginTop: '$5',
backgroundColor: selectedCosmos.includes(address)
? 'rgba(23, 200, 100, 0.2)'
: '$accents2'
}}
>
<Row justify="space-between" align="center">
<Checkbox
size="lg"
color="success"
checked={selectedCosmos.includes(address)}
/>
<Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
</Row>
</Card>
))}
</Col>
</Row>
</Fragment>
)
}
})}
</Container>
</Modal.Body>
@ -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
</Button>