Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

walletconnect v2 #19

Merged
merged 13 commits into from
Aug 14, 2023
Merged

walletconnect v2 #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7d4a1ec
walletconnect v2
10xSebastian Aug 13, 2023
b253a69
update demo
10xSebastian Aug 13, 2023
1e2dd25
demo is build
10xSebastian Aug 13, 2023
26205e6
testing
10xSebastian Aug 13, 2023
9705cf1
reenable
10xSebastian Aug 13, 2023
a52e395
try coinbase QR standalone
10xSebastian Aug 14, 2023
c286ce9
update demo
10xSebastian Aug 14, 2023
b6cc1f9
coinbase improvements
10xSebastian Aug 14, 2023
a871011
coinbase-wallet-sdk
10xSebastian Aug 14, 2023
81dcfa2
16.0.0
10xSebastian Aug 14, 2023
e483832
fix testsa
10xSebastian Aug 14, 2023
b59c99c
walletconnect v2 per wallet configurationos
10xSebastian Aug 14, 2023
cd94998
fix tests
10xSebastian Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,12 @@ If no param is given it well tell you to which blockchain the wallet is connecte
await wallet.connectedTo() // 'bsc'
```

can provide an array if connected to multiple blockchains:

```javascript
await wallet.connectedTo() // ['ethereum', 'bsc']
```

### Receive wallet events

`on(string, function):undefined`: Register a callback function for given events.
Expand Down
141 changes: 134 additions & 7 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.css">
<script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js" type="application/javascript"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@uiw/copy-to-clipboard/dist/copy-to-clipboard.umd.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/solana-web3.js@1.24.0"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/solana-web3.js@1"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-blockchains@8"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-client@10"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v1@1"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v2@2"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/coinbase-wallet-sdk@3"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v2@2.9.2"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/coinbase-wallet-sdk@3.6.4"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-tokens@10"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/qr-code-styling@1"></script>
<script src="dist/umd/index.js?7"></script>
Expand All @@ -30,6 +30,18 @@
background-color: #db3071 !important;
}
</style>
<script>
window.openNativeLink = (href, uri, name, encoded)=>{
console.log('openNativeLink', href, uri, name, encoded)
localStorage.setItem('WALLETCONNECT_DEEPLINK_CHOICE', JSON.stringify({ href, name }))
if(encoded !== false) {
href = `${href}wc?uri=${encodeURIComponent(uri)}`
} else {
href = `${href}wc?uri=${uri}`
}
return window.open(href, '_self', 'noreferrer noopener')
}
</script>
</head>
<body style="background-color: #FAFAFA;">
<div class="container py-4">
Expand Down Expand Up @@ -212,6 +224,46 @@ <h5 class="px-4">WalletConnect V2 connect</h5>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div>
<h5 class="px-4">WalletConnect V2 connect via redirect</h5>
<div class="px-4">
<div class="text-secondary ">Test connecting WalletConnect V2</div>
<div>
<input placeholder="projectId WalletConnect v2" id="walletConnectV2ProjectIdRedirect" type="text"/>
</div>
<div>
<select id="walletConnectV2ProjectIdHref">
<option value="ledgerlive:">Ledger Live</option>
</select>
</div>
</div>
</div>
<div class="px-4 pt-3">
<script>
window.connectWalletConnectV2ViaRedirect = async()=>{
console.log('connectWalletConnectV2ViaRedirect')
localStorage['depay:wallets:wc2:projectId'] = document.getElementById("walletConnectV2ProjectIdRedirect").value
let wallet = new Web3Wallets.wallets.WalletConnectV2()
let account = await wallet.connect({
connect: ({ uri })=>{
const href = document.getElementById("walletConnectV2ProjectIdHref").value
copyTextToClipboard(uri)
window.openNativeLink(href, uri, "LEDGER")
}
})
console.log('ACCOUNT', account)
window.wallet = wallet
}
</script>
<button class='btn btn-primary' onClick='connectWalletConnectV2ViaRedirect()'>Try it</button>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
Expand Down Expand Up @@ -252,17 +304,31 @@ <h5 class="px-4">Solana Pay</h5>
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 120px;">
<div>
<h5 class="px-4">Coinbase WalletLink connect</h5>
<div class="px-4">
<div class="text-secondary ">Test connecting Coinbase WalletLink.</div>
<div class="text-secondary ">Test connecting WalletLink</div>
<div id="walletLinkQRCode">
</div>
</div>
</div>
<div class="px-4 pt-3">
<script>
window.connectWalletLink = ()=> {
window.connectWalletLink = async()=>{
wallet = new Web3Wallets.wallets.WalletLink()
wallet.connect()
let account = await wallet.connect({
connect: ({ uri })=>{
copyTextToClipboard(uri)
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
type: "svg",
data: uri,
});
qrCode.append(document.getElementById("walletLinkQRCode"));
}
})
console.log('ACCOUNT', account)
}
</script>
<button class='btn btn-primary' onClick='connectWalletLink()'>Try it</button>
Expand Down Expand Up @@ -675,6 +741,67 @@ <h5 class="px-4">Sign message</h5>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 120px;">
<h5 class="px-4">Sign typed data</h5>
<div class="px-4">
<div class="text-secondary ">Test signing typed data with the connected wallet.</div>
</div>
</div>
<div class="px-4 pt-3">
<script>
window.signTypedData = async ()=> {
console.log('signTypedData')

let signature = await window.wallet.sign({
types: {
Domain: [
{ name: "name", type: "string" },
{ name: "version", type: "string" },
{ name: "chainId", type: "uint256" },
{ name: "verifyingContract", type: "address" }
],
PermitSingle: [
{ name: "details", type: "PermitDetails" },
{ name: "spender", type: "address" },
{ name: "sigDeadline", type: "uint256" }
],
PermitDetails: [
{ name: "token", type: "address" },
{ name: "amount", type: "uint160" },
{ name: "expiration", type: "uint48" },
{ name: "nonce", type: "uint48" }
]
},
primaryType: "PermitSingle",
domain: {
chainId: 1,
name: "Permit2",
verifyingContract: "0x000000000022d473030f116ddee9f6b43ac78ba3",
version: "1"
},
message: {
details: {
token: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
amount: "1461501637330902918203684832716283019655932542975",
expiration: Math.floor(Date.now() / 1000) + 86400,
nonce: 0
},
spender: "0x000000000022d473030f116ddee9f6b43ac78ba3",
sigDeadline: Math.floor(Date.now() / 1000) + 86400
}
})
console.log('signature', signature)
}
</script>
<button class='btn btn-primary' onClick='window.signTypedData()'>Try it</button>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
Expand Down
98 changes: 89 additions & 9 deletions dev.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.css">
<script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js" type="application/javascript"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@uiw/copy-to-clipboard/dist/copy-to-clipboard.umd.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/solana-web3.js@1.24.0"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/solana-web3.js@1"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-blockchains@8"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-client@10"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v1@1"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v2@2"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/coinbase-wallet-sdk@3"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/walletconnect-v2@2.9.2"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/coinbase-wallet-sdk@3.6.4"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-tokens@10"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/qr-code-styling@1"></script>
<script src="tmp/index.dev.js"></script>
Expand All @@ -30,6 +30,18 @@
background-color: #db3071 !important;
}
</style>
<script>
window.openNativeLink = (href, uri, name, encoded)=>{
console.log('openNativeLink', href, uri, name, encoded)
localStorage.setItem('WALLETCONNECT_DEEPLINK_CHOICE', JSON.stringify({ href, name }))
if(encoded !== false) {
href = `${href}wc?uri=${encodeURIComponent(uri)}`
} else {
href = `${href}wc?uri=${uri}`
}
return window.open(href, '_self', 'noreferrer noopener')
}
</script>
</head>
<body style="background-color: #FAFAFA;">
<div class="container py-4">
Expand Down Expand Up @@ -177,10 +189,20 @@ <h5 class="px-4">WalletConnect V1 reconnect</h5>
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div>
<h5 class="px-4">WalletConnect V2 connect</h5>
<h5 class="px-4">WalletConnect V2 connect QR</h5>
<div class="px-4">
<div class="text-secondary ">Test connecting WalletConnect V2</div>
<input placeholder="projectId WalletConnect v2" id="walletConnectV2ProjectId" type="text"/>
<div>
<input placeholder="projectId WalletConnect v2" id="walletConnectV2ProjectId" type="text"/>
</div>
<div>
<select id="walletConnectV2WalletName">
<option value="">Unknown</option>
<option value="MetaMask">MetaMask</option>
<option value="Uniswap Wallet">Uniswap Wallet</option>
<option value="Enjin Wallet">Enjin Wallet</option>
</select>
</div>
<div id="walletConnectV2QRCode">
</div>
</div>
Expand All @@ -191,6 +213,7 @@ <h5 class="px-4">WalletConnect V2 connect</h5>
localStorage['depay:wallets:wc2:projectId'] = document.getElementById("walletConnectV2ProjectId").value
let wallet = new Web3Wallets.wallets.WalletConnectV2()
let account = await wallet.connect({
walletName: document.getElementById("walletConnectV2WalletName").value,
connect: ({ uri })=>{
copyTextToClipboard(uri)
const qrCode = new QRCodeStyling({
Expand All @@ -212,6 +235,49 @@ <h5 class="px-4">WalletConnect V2 connect</h5>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div>
<h5 class="px-4">WalletConnect V2 connect via redirect</h5>
<div class="px-4">
<div class="text-secondary ">Test connecting WalletConnect V2</div>
<div>
<input placeholder="projectId WalletConnect v2" id="walletConnectV2ProjectIdRedirect" type="text"/>
</div>
<div>
<select id="walletConnectV2ProjectIdHref">
<option value="ledgerlive:">Ledger Live</option>
</select>
</div>
</div>
</div>
<div class="px-4 pt-3">
<script>
window.connectWalletConnectV2ViaRedirect = async()=>{
console.log('connectWalletConnectV2ViaRedirect')
localStorage['depay:wallets:wc2:projectId'] = document.getElementById("walletConnectV2ProjectIdRedirect").value
let wallet = new Web3Wallets.wallets.WalletConnectV2()
if(['ledgerlive:'].include(document.getElementById("walletConnectV2ProjectIdHref").value)) {
localStorage.setItem('WALLETCONNECT_DEEPLINK_CHOICE', JSON.stringify({ href: "ledgerlive://", name: "LedgerLive" }))
}
let account = await wallet.connect({
connect: ({ uri })=>{
const href = document.getElementById("walletConnectV2ProjectIdHref").value
copyTextToClipboard(uri)
window.openNativeLink(href, uri, "LEDGER")
}
})
console.log('ACCOUNT', account)
window.wallet = wallet
}
</script>
<button class='btn btn-primary' onClick='connectWalletConnectV2ViaRedirect()'>Try it</button>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
Expand Down Expand Up @@ -252,17 +318,31 @@ <h5 class="px-4">Solana Pay</h5>
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto" style="height: 120px;">
<div>
<h5 class="px-4">Coinbase WalletLink connect</h5>
<div class="px-4">
<div class="text-secondary ">Test connecting Coinbase WalletLink.</div>
<div class="text-secondary ">Test connecting WalletLink</div>
<div id="walletLinkQRCode">
</div>
</div>
</div>
<div class="px-4 pt-3">
<script>
window.connectWalletLink = ()=> {
window.connectWalletLink = async()=>{
wallet = new Web3Wallets.wallets.WalletLink()
wallet.connect()
let account = await wallet.connect({
connect: ({ uri })=>{
copyTextToClipboard(uri)
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
type: "svg",
data: uri,
});
qrCode.append(document.getElementById("walletLinkQRCode"));
}
})
console.log('ACCOUNT', account)
}
</script>
<button class='btn btn-primary' onClick='connectWalletLink()'>Try it</button>
Expand Down
Loading