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

Merge branch 'wallets'

Browse Source
This commit is contained in:
Ilja 2022-02-22 16:05:25 +02:00
commit 169a442b78
12 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
wallets/.DS_Store vendored Normal file
View File

Binary file not shown.

6
wallets/react-wallet-v2/package.json
View File

@ -16,18 +16,18 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-qr-reader-es6": "2.2.1-2",
"framer-motion": "6.2.6",
"framer-motion": "6.2.7",
"ethers": "5.5.4",
"valtio": "1.3.0",
"react-code-blocks": "0.0.9-0"
},
"devDependencies": {
"@walletconnect/types": "2.0.0-beta.22",
"@types/node": "17.0.18",
"@types/node": "17.0.19",
"@types/react": "17.0.39",
"eslint": "8.9.0",
"eslint-config-next": "12.1.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-prettier": "8.4.0",
"prettier": "2.5.1",
"typescript": "4.5.5"
}

3
wallets/react-wallet-v2/public/icons/checkmark-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M416 128L192 384L96 288" stroke="white" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 223 B

4
wallets/react-wallet-v2/public/icons/copy-icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M336 64H368C380.73 64 392.939 69.0571 401.941 78.0589C410.943 87.0606 416 99.2696 416 112V432C416 444.73 410.943 456.939 401.941 465.941C392.939 474.943 380.73 480 368 480H144C131.27 480 119.061 474.943 110.059 465.941C101.057 456.939 96 444.73 96 432V112C96 99.2696 101.057 87.0606 110.059 78.0589C119.061 69.0571 131.27 64 144 64H176" stroke="white" stroke-width="32" stroke-linejoin="round"/>
<path d="M309.87 32H202.13C187.699 32 176 43.6988 176 58.13V69.87C176 84.3012 187.699 96 202.13 96H309.87C324.301 96 336 84.3012 336 69.87V58.13C336 43.6988 324.301 32 309.87 32Z" stroke="white" stroke-width="32" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 751 B

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

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

27
wallets/react-wallet-v2/src/components/AccountCard.tsx
View File

@ -1,5 +1,7 @@
import { truncate } from '@/utils/HelperUtil'
import { Avatar, Card, Text } from '@nextui-org/react'
import { Avatar, Button, Card, Text, Tooltip } from '@nextui-org/react'
import Image from 'next/image'
import { useState } from 'react'
interface Props {
name: string
@ -9,6 +11,14 @@ interface Props {
}
export default function AccountCard({ name, logo, rgb, address }: Props) {
const [copied, setCopied] = useState(false)
function onCopy() {
navigator?.clipboard?.writeText(address)
setCopied(true)
setTimeout(() => setCopied(false), 1500)
}
return (
<Card
bordered
@ -38,6 +48,21 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
{truncate(address, 19)}
</Text>
</div>
<Tooltip content={copied ? 'Copied!' : 'Copy'} placement="left">
<Button
size="sm"
css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
onClick={onCopy}
>
<Image
src={copied ? '/icons/checkmark-icon.svg' : '/icons/copy-icon.svg'}
width={15}
height={15}
alt="copy icon"
/>
</Button>
</Tooltip>
</Card.Body>
</Card>
)

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

@ -1,5 +1,6 @@
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
@ -42,9 +43,11 @@ export default function PairingCard({ logo, name, url, onDelete }: IProps) {
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link>
</div>
<Button size="xs" color="error" flat onClick={onDelete}>
DELETE
</Button>
<Tooltip content="Delete" placement="left">
<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>
</Tooltip>
</Card.Body>
</Card>
)

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

@ -1,5 +1,6 @@
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
@ -42,9 +43,11 @@ export default function SessionCard({ logo, name, url, onDelete }: IProps) {
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link>
</div>
<Button size="xs" color="error" flat onClick={onDelete}>
DELETE
</Button>
<Tooltip content="Delete" placement="left">
<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>
</Tooltip>
</Card.Body>
</Card>
)

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

@ -1,12 +1,12 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ModalStore from '@/store/ModalStore'
import { truncate } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { addresses } from '@/utils/WalletUtil'
import {
Avatar,
Button,
Card,
Checkbox,
Col,
Container,
Divider,
@ -134,10 +134,20 @@ export default function SessionProposalModal() {
key={address}
css={{
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>
))}
</Col>
@ -149,6 +159,7 @@ export default function SessionProposalModal() {
<Button auto flat color="error" onClick={onReject}>
Reject
</Button>
<Button
auto
flat

24
wallets/react-wallet-v2/yarn.lock
View File

@ -805,10 +805,10 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
"@types/node@17.0.18":
version "17.0.18"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.18.tgz#3b4fed5cfb58010e3a2be4b6e74615e4847f1074"
integrity sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==
"@types/node@17.0.19":
version "17.0.19"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.19.tgz#726171367f404bfbe8512ba608a09ebad810c7e6"
integrity sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==
"@types/prop-types@*":
version "15.7.4"
@ -1626,10 +1626,10 @@ eslint-config-next@12.1.0:
eslint-plugin-react "^7.27.0"
eslint-plugin-react-hooks "^4.3.0"
eslint-config-prettier@8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
eslint-config-prettier@8.4.0:
version "8.4.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
version "0.3.6"
@ -1964,10 +1964,10 @@ format@^0.2.0:
resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
framer-motion@6.2.6:
version "6.2.6"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.6.tgz#75277b4944a1234beaf7453da19028bbf4f75cce"
integrity sha512-7eGav5MxEEzDHozQTDY6+psTIOw2i2kM1QVoJOC3bCp9VOKoo+mKR5n7aT5JPh7ksEKFYJYz0GJDils/9S+oLA==
framer-motion@6.2.7:
version "6.2.7"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.7.tgz#14e71ca933b63dc85327b3ea9ba2f1564f116dd3"
integrity sha512-RExmZCFpJ3OCakoXmZz8iW8ZI5MoaHmVadydetvTSrNaKmZ7ZC/JDQpNyw1NoDG+fchRGP86lXoiTFSQuin+Cg==
dependencies:
framesync "6.0.1"
hey-listen "^1.0.8"