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 return address
} }
export function isEIP155Chain(chain: string) {
return chain.includes('eip155')
}
export function isCosmosChain(chain: string) {
return chain.includes('cosmos')
}

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

@ -1,7 +1,9 @@
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData' import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data' import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ModalStore from '@/store/ModalStore' import ModalStore from '@/store/ModalStore'
import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
import { eip155Addresses } from '@/utils/EIP155WalletUtil' import { eip155Addresses } from '@/utils/EIP155WalletUtil'
import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { import {
Avatar, Avatar,
@ -19,7 +21,8 @@ import {
import { Fragment, useState } from 'react' import { Fragment, useState } from 'react'
export default function SessionProposalModal() { 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 // Get proposal data and wallet address from store
const proposal = ModalStore.state.data?.proposal const proposal = ModalStore.state.data?.proposal
@ -36,13 +39,23 @@ export default function SessionProposalModal() {
const { methods } = permissions.jsonrpc const { methods } = permissions.jsonrpc
const { protocol } = relay const { protocol } = relay
// Add / remove address from selection // Add / remove address from EIP155 selection
function onSelectAddress(address: string) { function onSelectEIP155(address: string) {
if (selectedAddresses.includes(address)) { if (selectedEIP155.includes(address)) {
const newAddresses = selectedAddresses.filter(a => a !== address) const newAddresses = selectedEIP155.filter(a => a !== address)
setSelectedAddresses(newAddresses) setSelectedEip155(newAddresses)
} else { } 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) { if (proposal) {
const accounts: string[] = [] const accounts: string[] = []
chains.forEach(chain => { chains.forEach(chain => {
selectedAddresses.forEach(address => { if (isEIP155Chain(chain)) {
accounts.push(`${chain}:${address}`) selectedEIP155.forEach(address => {
}) accounts.push(`${chain}:${address}`)
})
} else if (isCosmosChain(chain)) {
cosmosAddresses.forEach(address => {
accounts.push(`${chain}:${address}`)
})
}
}) })
const response = { const response = {
@ -128,36 +147,79 @@ export default function SessionProposalModal() {
</Col> </Col>
</Row> </Row>
<Divider y={2} /> {chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row> <Row>
<Col> <Col>
<Text h5>Select Accounts to Connect</Text> <Text h5>Select EIP155 Accounts</Text>
{eip155Addresses.map((address, index) => ( {eip155Addresses.map((address, index) => (
<Card <Card
onClick={() => onSelectAddress(address)} onClick={() => onSelectEIP155(address)}
clickable clickable
key={address} key={address}
css={{ css={{
marginTop: '$5', marginTop: '$5',
backgroundColor: selectedAddresses.includes(address) backgroundColor: selectedEIP155.includes(address)
? 'rgba(23, 200, 100, 0.2)' ? 'rgba(23, 200, 100, 0.2)'
: '$accents2' : '$accents2'
}} }}
> >
<Row justify="space-between" align="center"> <Row justify="space-between" align="center">
<Checkbox <Checkbox
size="lg" size="lg"
color="success" 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> </Row>
</Card> </Fragment>
))} )
</Col> } else if (isCosmosChain(chain)) {
</Row> 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> </Container>
</Modal.Body> </Modal.Body>
@ -171,8 +233,8 @@ export default function SessionProposalModal() {
flat flat
color="success" color="success"
onClick={onApprove} onClick={onApprove}
disabled={!selectedAddresses.length} disabled={![...selectedEIP155, ...selectedCosmos].length}
css={{ opacity: selectedAddresses.length ? 1 : 0.4 }} css={{ opacity: [...selectedEIP155, ...selectedCosmos].length ? 1 : 0.4 }}
> >
Approve Approve
</Button> </Button>