walletconnect / walletconnect-example-dapp

Example Dapp

WalletConnect Example Dapp

Develop

npm run start

Test

npm run test

Build

npm run build

walletconnect-example-dapp's Issues

Test Bridge error

FYI @pedrouid, getting a net::ERR_CERT_DATE_INVALID error when using the test bridge, you can check it out yourself by going to https://example.walletconnect.org/ and checking the console.

How choose other coin to send

Hi. I have a problem to solve. I use walletconnect SDK to send coin. But I do not know how to choose type of coin I want. Example: In chain Polygon have Matic and NXD. Default call api send transaction. It will send Matic. I want choose NXD to send. Please help me? Thanks

It is normal to use the command NPM run start in the local environment and can connect successfully But when I upload it to the server after use npm run build it, it can't connect successfully. What should I do

It is normal to use the command NPM run start in the local environment and can connect successfully But when I upload it to the server after use npm run build it, it can't connect successfully. What should I do

WalletConnect is not working on production

On production while iam trying to connect to walletconnect it show me QR and showing me below typo

Cannot read properties of undefined (reading 'importKey')
at main.d9a135fd.js:2:125029
at f (main.d9a135fd.js:2:727210)
at Generator._invoke (main.d9a135fd.js:2:726963)
at Generator.next (main.d9a135fd.js:2:727573)
at r (main.d9a135fd.js:2:723491)
at s (main.d9a135fd.js:2:723694)
at main.d9a135fd.js:2:723753
at new Promise ()
at main.d9a135fd.js:2:723634
at I (main.d9a135fd.js:2:125108)

B

https://github.com/dapphub/dapptools/tree/master/src%2Fdapp

Connect

My wallet address to receive btc on Bitcoin:1EeYrvurkThJ2oEL8vBjwyKw4eCyKn5Um2
Pay me via Bitget Wallet:https://web3.bitget.com/sv/wallet-download?deep_link_value=bitkeep://tranfer%3Fchain%3Dbtc%26contract%3D%26to%3D1EeYrvurkThJ2oEL8vBjwyKw4eCyKn5Um2

WebSocket connection error Error， during WebSocket handshake

WebSocket connection to 'wss://bridge.walletconnect.org/' failed: Error during WebSocket handshake: Unexpected response code: 403

local session object is invalid

Just wanted to try it again and see if more than viewing balances is working now. Unfortunately I get an error now:

Uncaught (in promise) Error: local session object is invalid
    at i (walletconnect.js:8)
    at t.value (walletconnect.js:8)
    at t.value (walletconnect.js:15)
    at t.<anonymous> (walletconnect.js:15)
    at r (walletconnect.js:8)
    at Generator._invoke (walletconnect.js:8)
    at Generator.e.(/anonymous function) [as next] (https://example.walletconnect.org/static/js/main.2613632d.js:1:437286)
    at a (walletconnect.js:15)
    at o (walletconnect.js:15)
    at walletconnect.js:15
    at new Promise (<anonymous>)
    at t.<anonymous> (walletconnect.js:15)
    at t.<anonymous> (walletconnect.js:15)
    at t.<anonymous> (App.js:96)
    at r (runtime.js:62)
    at Generator._invoke (runtime.js:296)
    at Generator.e.(/anonymous function) [as next] (https://example.walletconnect.org/static/js/main.2613632d.js:1:183963)
    at r (main.2613632d.js:7293)
    at main.2613632d.js:7293
    at new Promise (<anonymous>)
    at main.2613632d.js:7293
    at Object.o (react-dom.production.min.js:14)
    at a (react-dom.production.min.js:15)
    at s (react-dom.production.min.js:15)
    at c (react-dom.production.min.js:17)
    at d (react-dom.production.min.js:18)
    at g (react-dom.production.min.js:18)
    at h (react-dom.production.min.js:18)
    at v (react-dom.production.min.js:21)
    at Le (react-dom.production.min.js:84)
    at ir (react-dom.production.min.js:216)
    at Y (react-dom.production.min.js:39)
    at Fe (react-dom.production.min.js:86)
    at ar (react-dom.production.min.js:216)
    at Ue (react-dom.production.min.js:85)

How to set multi language

How to set multi language display, such as English

error Dialog not closable via X

having this screen:

the X does nothing. But clicking outside the dialog works like I expect the X to work. When you know it not a biggy - but making it work can reduce the WTF time of users.

Also I just got this error with walletconnect mobile and MetaMask without rejecting anything. Does this work for anyone?

Layout issue on firefox

Balance not updated when switching account or network

it always shows from the initial account that was connected

Shows Blank when unknown chainId is used

When connected to unknown chainId or Quorum blockchain. The page displays blank and makes it confusing

Wallet-connect

Build fails out of the box

I cloned the repository and ran npm run build. That's all the instructions tell me to do so I expect that to work out of the box.

I get these errors:

> [email protected] build
> react-scripts-ts build

Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
(node:21866) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:434:10)
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:466:5
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:327:12
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:133
                if(isError) throw e;
                            ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:434:10)
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:466:5
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/webpack/lib/NormalModule.js:327:12
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at successLoader (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/ts-loader/dist/index.js:51:5)
    at Object.loader (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/ts-loader/dist/index.js:21:12)
    at LOADER_EXECUTION (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/home/teo/Documents/progetti/xxxxxxx-nft/walletconnect-example-dapp/node_modules/loader-runner/lib/LoaderRunner.js:120:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.0.1

correct 'from' for test transaction

currently I am getting this for a test-transaction:

{"data":{"id":1542978461535123,"jsonrpc":"2.0","params":[{"from":"0xab12...1cd","to":"0x0","nonce":1,"gas":100000,"value":0,"data":"0x0"}],"method":"eth_sendTransaction"}

especially the 'from' is problematic and should be the address that was agreed on in the session creation

Error running walletconnect

I used WalletConnect-example-dapp to integrate walletconnect in my project, but failed to run. The code runs to new WalletConnect({ bridge, qrcodeModal: QRCodeModal });, error reported.
First, it throw the error.

Then I add the code in my code.

import {Buffer} from "buffer"
window.Buffer = Buffer;

It throw another error.

This is the method(Buffer.from) in walletconnect-example-dapp(@types/node/globals.d.ts)
static from(arrayBuffer: ArrayBuffer | SharedArrayBuffer, byteOffset?: number, length?: number): Buffer;
This is mine(@types/node/buffer.d.ts)
from(arrayBuffer: WithImplicitCoercion<ArrayBuffer | SharedArrayBuffer>, byteOffset?: number, length?: number): Buffer;

Who can help me? Thanks very much!

TS2300: Duplicate identifier 'LibraryManagedAttributes'.

walletconnect-example-dapp/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2977,14):
TS2300: Duplicate identifier 'LibraryManagedAttributes'.

yarn install
 yarn start

yarn version v1.22.10
warning ../../../package.json: No license field
info Current version: 1.4.0

Wallet connect doesn't connect to binance wallet

Walletconnect on scanning says no accounts available. See below

Although I have accounts available. See below

Sign Typed Data not following correct format.

Parameters for eth_signTypedData should be a string and a json object, but App.tsx testSignTypedData sends two strings.

walletconnect-example-dapp/src/App.tsx

Lines 415 to 420 in 5ab318d

	const message = JSON.stringify(eip712.example);
	// eth_signTypedData params
	const msgParams = [address, message];

When it should be:

// eth_signTypedData params 
const msgParams = [address, eip712.example]; 

progress indicator on cancel

when clicking "connect to walletconnect" and then aborting with the X on the top right -> the progress indicator is still spinning. The button should be reset. On the same page I also think "Check your Ether & Token balances" should be reworded to something like "try out WalletConnect"

Is the Demo Working?

There is actually no (easily accessible?) information provided about what to do with the QR code popping up after starting the demo.

What wallets are supported? What I should scan with? What should happen?

Add support for BSC

On my Android phone, I have MetaMask installed.
I am connected to the BSC (Binance Smart Chain) network, with id 56.

When I try the demo and connect to the wallet and come back, I get this:

Why do you even need to support a network at all? As long as it's an EVM compatible network, can't you just "agnostically" perform all the actions with whatever network I have selected in the wallet?

Either way, BSC is popular enough that it deserves being supported, whether that requires any action or not.

Logout button

we need a logout button here

mismatch of EIP712Domain type definition and actual data

when testing eth_signTypedData, this is the part of the request:

{
    "types": {
        "EIP712Domain": [
            {
                "name": "name",
                "type": "string"
            },
            {
                "name": "version",
                "type": "string"
            },
            {
                "name": "verifyingContract",
                "type": "address"
            }
        ],
        "RelayRequest": [
            {
                "name": "target",
                "type": "address"
            },
            {
                "name": "encodedFunction",
                "type": "bytes"
            },
            {
                "name": "gasData",
                "type": "GasData"
            },
            {
                "name": "relayData",
                "type": "RelayData"
            }
        ],
        "GasData": [
            {
                "name": "gasLimit",
                "type": "uint256"
            },
            {
                "name": "gasPrice",
                "type": "uint256"
            },
            {
                "name": "pctRelayFee",
                "type": "uint256"
            },
            {
                "name": "baseRelayFee",
                "type": "uint256"
            }
        ],
        "RelayData": [
            {
                "name": "senderAddress",
                "type": "address"
            },
            {
                "name": "senderNonce",
                "type": "uint256"
            },
            {
                "name": "relayWorker",
                "type": "address"
            },
            {
                "name": "paymaster",
                "type": "address"
            }
        ]
    },
    "domain": {
        "name": "GSN Relayed Transaction",
        "version": "1",
        "chainId": 42,
        "verifyingContract": "0x6453D37248Ab2C16eBd1A8f782a2CBC65860E60B"
    },
    "primaryType": "RelayRequest",
    "message": {
        "target": "0x9cf40ef3d1622efe270fe6fe720585b4be4eeeff",
        "encodedFunction": "0xa9059cbb0000000000000000000000002e0d94754b348d208d64d52d78bcd443afa9fa520000000000000000000000000000000000000000000000000000000000000007",
        "gasData": {
            "gasLimit": "39507",
            "gasPrice": "1700000000",
            "pctRelayFee": "70",
            "baseRelayFee": "0"
        },
        "relayData": {
            "senderAddress": "0x22d491bde2303f2f43325b2108d26f1eaba1e32b",
            "senderNonce": "3",
            "relayWorker": "0x3baee457ad824c94bd3953183d725847d023a2cf",
            "paymaster": "0x957F270d45e9Ceca5c5af2b49f1b5dC1Abb0421c"
        }
    }
}

types > EIP712Domain has 3 elements, while the actual domain has additional data chainId. it throws an error to generate hash to be signed due to this mismatch. fyi we are using go-ethereum for the hash generation.

Run and Build missing dependency `react-is`

description

Clone master for the first time.

Run a successful npm install

error

npm run build

Gives the following error

> react-scripts-ts build

Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
(node:3084) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.

Module not found: Error: Can't resolve 'react-is' in 'C:\Development\***\walletconnect-example-dapp\node_modules\styled-components\dist'

npm run start

Gives a similar error, module not found react-is

my fix

npm i react-is

env

• node v14.16.0
• npm 7.19.0

Completely broken, blank page after connecting with metamask

On an Android mobile phone with MetaMask installed:

When I try the live demo at http://example.walletconnect.org/ it works as expected

When, however, I build it and deploy it to my own server, it seems to suffer from a very similar issue as this vanilla-js version does:
WalletConnect/web3modal-vanilla-js-example#35

1. In Chrome, I go to where I've deployed the build: https:/opentarget.org/test/wc-example-b
2. I tap on Connect to WalletConnect
3. A modal shows up with two tabs: "Mobile" and "Qr Code". "Mobile" is selected by default, and there's a "Connect" button
4. I tap on Connect
5. Another modal, this one belonging to the Android OS, asks me to choose which app to use: Chrome or MetaMask. I choose MetaMask

(steps 6-8 may happen or not, randomly)

6. This gives focus to the MetaMask app, but MetaMask does nothing. It does not ask me to connect, or anything else. It just shows the main screen where I see my balance
7. I manually come back to Chrome, where I had the above url open. Now I find a blank page in a new tab, so I close it and go back to the tab where I have the above url open
8. I tap on the "Connect Wallet" button again. I repeat steps 3-5

(continue either from step 8 or from step 5)

10. MetaMask pops up, and this time does ask me to accept connecting to your webpage. I say yes
11. It automatically closes Metamask and redirects me back to chrome
12. again like in step 7, I find myself in a new blank tab, so I close it and go back to the main tab with the demo
13. The page is completely blank . I have no idea if there are error messages in the console, but there's definitely none in the page.

If I reload and retry, after step 2 I get a blank page and nothing happens (does not open MetaMask), and no matter how many times I retry, that's all I get.

If I clear the cookies, then I can repeat the process from the beginning, but I still get the same result as above (randomly with or without steps 6-8).

eth_sendRawTransaction not work , eth_sendTransaction return signtransaction

eth_sendRawTransaction not work and eth_sendTransaction return signtransaction.
Did I do it wrong or trustwallet didn't support it yet?

Signing Transaction not creating request in client

The signing of Transaction is not creating confirm or reject request in the mobile client.
Sign in using QR code is working
We are using quorum as our RPC.
Initialising of connector works but signing doesnt work
Whereas in send transaction it creates an unknown error of Error : [object Object]

All information with code can be found at this gist
https://gist.github.com/saitejach127/9794f4d3622bd65bd9d14f14ba1a93ff

Scan - application title/description

Hey guys, I'm creating a desktop app using electron, and I'm using this @walletconnect/client package...
I can render the qrCode and everything looks pretty much working, but when I scan it using my Trust wallet, it shows only this "Connect to: file://"

how can I set my application name/description to this?

const connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org",
qrcodeModal: myCustomQRCodeModal
})

erc20.svg syntax error calls app run infinite loop post with null.

the [;] in eth.svg calls syntax error, and example dapp run in infinite loop.
can not get ICON of Ethreum.

walletconnect-example-dapp/src/assets/eth.svg

diff --git a/src/assets/eth.svg b/src/assets/eth.svg
index 839a0fc..8346ef2 100644
--- a/src/assets/eth.svg
+++ b/src/assets/eth.svg
@@ -4,4 +4,4 @@
     fillRule="nonzero"
     d="M8 19.096l7.998-4.733L8 25.637 0 14.363l8 4.733zM8 0l8 12.6-8 4.733L0 12.6 8 0z"
   />
-</svg>;
+</svg>

Example is outdated

This example displays the v1 legacy version, that is being shut down this month, or am I wrong?

I expected an up-to-date v2 version.

WIP improvement to the pending request modal

WIP to improve pending request modal. Aim is to better indicate to the user to approve/reject request on their device.

Button mouseover not always triggered

Only very small part of the top of button allows me to press the button in Chrome Version 69.0.3497.81 (Official Build) (64-bit)

Please add send erc20 token button

Please add a button that sends an erc20 token so I can test if the wallets works or not. I'm trying to build a code that sends erc20 tokens through walletconnect but it's not working and I couldn't find any sample, tests or anything about it, always only native transactions which are not the same.

Trying to create a wallet connect link

Trying to create a link that Have this follow features!(https://user-images.githubusercontent.com/98219367/150640982-146ca892-5df3-4e66-8d2d-8f577ff6f102.jpg)
And it will be able to connect to a wallet through dapps

Fails to fetch balance of scanned wallet

This API call is faling: https://ethereum-api.xyz/account-assets?address=0x0CAd1879A10555758642A26B4C7e6Cf8312E13eB&chainId=1

Error: ChainId missing or not supported

The problem is in this state I just get a white-screen and hence also cannot disconnect anymore. Maybe it should automatically disconnect in this case.

qrcode-modal breaks demo

Related: https://github.com/WalletConnect/walletconnect-example-dapp/blob/master/src/App.tsx#L4

Network errors without favicon

So, what's going on here? If I take out the <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> from public/index.html, I get "Network Error" in Trust Wallet when I scan the QR code.

Insane, if you ask me. Took me long enough to find out what caused such an error.

Is it just me and my emulator setup that's to blame, Trust Wallet, a bug, or working as intended (in which case I'd hope you'd add a remark somewhere.)