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

Improve account selection ux

Browse Source
This commit is contained in:
Ilja 2022-02-22 14:12:50 +02:00
parent 572280f7b4
commit 0e97e3f278
5 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wallets/react-wallet-v2/public/icons/delete-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M112 112L132 432C132.95 450.49 146.4 464 164 464H348C365.67 464 378.87 450.49 380 432L400 112" stroke="#F21361" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M80 112H432Z" fill="#F21361"/>
<path d="M80 112H432" stroke="#F21361" stroke-width="32" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M328 176L320 400M192 112V72.0001C191.991 68.8458 192.605 65.7208 193.808 62.8048C195.011 59.8888 196.778 57.2394 199.009 55.0089C201.239 52.7785 203.889 51.011 206.805 49.8082C209.721 48.6053 212.846 47.9909 216 48.0001H296C299.154 47.9909 302.279 48.6053 305.195 49.8082C308.111 51.011 310.761 52.7785 312.991 55.0089C315.222 57.2394 316.989 59.8888 318.192 62.8048C319.395 65.7208 320.009 68.8458 320 72.0001V112H192ZM256 176V400V176ZM184 176L192 400L184 176Z" stroke="#F21361" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 996 B

4
wallets/react-wallet-v2/public/main.css
View File

@ -79,3 +79,7 @@ select {
select:hover { select:hover {
background-color: rgba(139, 139, 139, 0.35); background-color: rgba(139, 139, 139, 0.35);
} }
i {
margin-top: -5px !important;
}

9
wallets/react-wallet-v2/src/components/PairingCard.tsx
View File

@ -1,5 +1,6 @@
import { truncate } from '@/utils/HelperUtil' import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Link, Text } from '@nextui-org/react' import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
import Image from 'next/image'
/** /**
* Types * Types
@ -42,9 +43,11 @@ export default function PairingCard({ logo, name, url, onDelete }: IProps) {
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)} {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link> </Link>
</div> </div>
<Button size="xs" color="error" flat onClick={onDelete}> <Tooltip content="Delete" placement="left">
DELETE <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
<Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
</Button> </Button>
</Tooltip>
</Card.Body> </Card.Body>
</Card> </Card>
) )

9
wallets/react-wallet-v2/src/components/SessionCard.tsx
View File

@ -1,5 +1,6 @@
import { truncate } from '@/utils/HelperUtil' import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Link, Text } from '@nextui-org/react' import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
import Image from 'next/image'
/** /**
* Types * Types
@ -42,9 +43,11 @@ export default function SessionCard({ logo, name, url, onDelete }: IProps) {
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)} {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link> </Link>
</div> </div>
<Button size="xs" color="error" flat onClick={onDelete}> <Tooltip content="Delete" placement="left">
DELETE <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
<Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
</Button> </Button>
</Tooltip>
</Card.Body> </Card.Body>
</Card> </Card>
) )

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

@ -1,12 +1,12 @@
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 { truncate } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { addresses } from '@/utils/WalletUtil' import { addresses } from '@/utils/WalletUtil'
import { import {
Avatar, Avatar,
Button, Button,
Card, Card,
Checkbox,
Col, Col,
Container, Container,
Divider, Divider,
@ -134,10 +134,20 @@ export default function SessionProposalModal() {
key={address} key={address}
css={{ css={{
marginTop: '$5', marginTop: '$5',
backgroundColor: selectedAddresses.includes(address) ? '$green600' : '$accents2' backgroundColor: selectedAddresses.includes(address)
? 'rgba(23, 200, 100, 0.2)'
: '$accents2'
}} }}
> >
<Text>{`Acc ${index + 1} - ${truncate(address, 19)}`}</Text> <Row justify="space-between" align="center">
<Checkbox
size="lg"
color="success"
checked={selectedAddresses.includes(address)}
/>
<Text>{`Account ${index + 1}`} </Text>
</Row>
</Card> </Card>
))} ))}
</Col> </Col>
@ -149,6 +159,7 @@ export default function SessionProposalModal() {
<Button auto flat color="error" onClick={onReject}> <Button auto flat color="error" onClick={onReject}>
Reject Reject
</Button> </Button>
<Button <Button
auto auto
flat flat