wallet-connect-web-examples/wallets/react-web3wallet

Web3Wallet Example (React, Typescript, Ethers, NextJS, Cosmos)

This example aims to demonstrate basic and advanced use cases enabled by WalletConnect's Web3Wallet SDK.

This Web3Wallet example implementation is to serve as a reference for wallet developers.

Please only use this for reference and development purposes, otherwise you are at risk of losing your funds.

Useful links

🔗 Live Web3Wallet app - https://react-web3wallet.vercel.app
🔗 Live dapp - Sign - https://react-app.walletconnect.com
🔗 Live dapp - Auth - https://react-auth-dapp.walletconnect.com/
📚 WalletConnect docs - https://docs.walletconnect.com/2.0

Getting started

Example is built atop of NextJS in order to abstract complexity of setting up bundlers, routing etc. So there are few steps you need to follow in order to set everything up

1. Go to WalletConnect Cloud and obtain a project id

2. Add your project details in WalletConnectUtil.ts file

3. Install dependencies yarn install or npm install

4. Setup your environment variables

cp .env.local.example .env.local

Your .env.local now contains the following environment variables:

• NEXT_PUBLIC_PROJECT_ID (placeholder) - You can generate your own ProjectId at https://cloud.walletconnect.com
• NEXT_PUBLIC_RELAY_URL (already set)

5. Run yarn dev or npm run dev to start local development

Migrate from sign-client to Web3Wallet

1. Initialization

    // metadata of your app
    const metadata = {
        name: "Demo app",
        description: "Demo Client as Wallet/Peer",
        url: "www.walletconnect.com",
        icons: [],
    };
    
    /* old */
    import { SignClient } from "@walletconnect/sign-client";

    const signClient = await SignClient.init({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
        metadata,
    })

    /* new */
    import { Core } from "@walletconnect/core";
    import { Web3Wallet } from "@walletconnect/web3wallet";

    const core = new Core({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
    })

    const web3wallet = await Web3Wallet.init({
        core, // <- pass the shared `core` instance
        metadata
    })

2. Pair with a dapp

    /* old */
    signClient.on("session_proposal", async (proposal) => {
        const { acknowledged } = await signClient.approve({
            id: proposal.id,
            namespaces,
        });
        const session = await acknowledged();
    });
    await signClient.pair({ uri });

    /* new */
    web3wallet.on("session_proposal", async (proposal) => {
        const session = await web3wallet.approveSession({
            id: proposal.id,
            namespaces,
        });
    });
    await web3wallet.core.pairing.pair({ uri })

3. Responding to session requests

    /* old */
    signClient.on("session_request", async (event) => {
        // process the request 
        const params = ...
        // respond
        await signClient.respond({ params })
    });

    /* new */
    web3wallet.on("session_request", async (event) => {
        // process the request 
        const params = ...
        // respond
        await web3wallet.respondSessionRequest({ params })
    });

4. Emit session events

    // emit events such as "chainChanged", "accountsChanged", etc.

    /* old */
    await signClient.emit({ params })

    /* new */
    await web3wallet.emitSessionEvent({ params })

5. Extend a session

    /* old */
    await signClient.extend({ topic });

    /* new */
    await web3wallet.extendSession({ topic });

6. Disconnect from a session

    /* old */
    await signClient.disconnect({
        topic,
        reason: getSdkError("USER_DISCONNECTED"),
    });

    /* new */
    await web3wallet.disconnectSession({
        topic,
        reason: getSdkError("USER_DISCONNECTED"),
    });

7. Events

    /* old */
    signClient.on("session_proposal", handler)
    signClient.on("session_request", handler)

    /* new */
    web3wallet.on("session_proposal", handler)
    web3wallet.on("session_request", handler)

Migrate from auth-client to Web3Wallet

1. Initialization

    // metadata of your app
    const metadata = {
        name: "Demo app",
        description: "Demo Client as Wallet/Peer",
        url: "www.walletconnect.com",
        icons: [],
    };

    /* old */
    import { AuthClient } from "@walletconnect/auth-client";

    const authClient = await AuthClient.init({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
        metadata,
    })

    /* new */
    import { Core } from "@walletconnect/core";
    import { Web3Wallet } from "@walletconnect/web3wallet";

    const core = new Core({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
    })

    const web3wallet = await Web3Wallet.init({
        core, // <- pass the shared `core` instance
        metadata
    })

2. Authenticate with a dapp

    /* old */
    const iss = `did:pkh:eip155:1:${address}`;
    authClient.on("auth_request", async (event) => {
        // format the payload
        const message = authClient.formatMessage(event.params.cacaoPayload, iss);
        // prompt the user to sign the message
        const signature = await wallet.signMessage(message);
        // respond
        await authClient.respond(
            {
                id: args.id,
                signature: {
                    s: signature,
                    t: "eip191",
                },
            },
            iss,
        );
    });

    await authClient.core.pairing.pair({ uri, activatePairing: true });

    /* new */
    const iss = `did:pkh:eip155:1:${address}`;
    web3wallet.on("auth_request", async (event) => {
        // format the payload
        const message = web3wallet.formatMessage(event.params.cacaoPayload, iss);
        // prompt the user to sign the message
        const signature = await wallet.signMessage(message);
        // respond
        await web3wallet.respondAuthRequest(
            {
                id: args.id,
                signature: {
                    s: signature,
                    t: "eip191",
                },
            },
            iss,
        );
    })

    await web3wallet.core.pairing.pair({ uri: request.uri, activatePairing: true })

3. Events

    /* old */
    authClient.on("auth_request", handler)
    /* new */
    web3wallet.on("auth_request", handler)