DOCSEARCHbyAlgolia
Submit Docs

Reown Web Examples

repository·main·Indexed 19 days ago

https://github.com/reown-com/web-examples

A collection of reference implementations for WalletConnect v2, providing concrete examples of how to build Wallets and dApps using WalletConnect's SDKs and APIs. Includes demos for Chain Abstraction using AppKit, a React dApp with a standalone v2 client, smart sessions, and wallet examples utilizing the Sign SDK and Wallet Development Kit (WDK) for multi-chain key derivation across EVM, Solana, and TON.

Tokens
27.5K
Snippets
102
Records
121
Agent score
65%

What's inside reown-com/web-examples

  1. Overview of WalletConnect v2 Examples

    main
    This repository serves as a catalogue of various wallet and dApp examples that implement WalletConnect's SDKs and APIs. It is organized into two main categories: Wallets and dApps. Each example is a standalone project containing its own specific README with detailed setup instructions, implementation details, and explanations.

  2. How WDK handles multi-chain key derivation

    main

    The wallet uses the Tether Wallet Development Kit (WDK) to derive accounts for multiple chains from a single 24-word BIP-39 seed phrase. The derivation paths used are:

    • EVM: Uses @tetherto/wdk-wallet-evm with BIP-44 m/44'/60'/0'/0/0.
    • Solana: Uses @tetherto/wdk-wallet-solana with SLIP-0010 m/44'/501'/0'/0'.
    • TON: Uses @tetherto/wdk-wallet-ton with BIP-44, WalletContractV5R1.

    Key management is centralized in src/lib/WDKWallet.ts. The Solana and TON signers do not hold keys; they bridge WalletConnect payloads to the raw keyPair exposed by WDK.

  3. Understand the Wallet Example Architecture

    main

    The React Wallet Example is built with Next.js and follows a specific flow for handling WalletConnect logic:

    1. Initialization: Occurs in _app.tsx. The useInitialization.ts hook is responsible for initializing the WalletConnect client, ethers, and cosmos wallets.
    2. Event Management: The useWalletConnectEventsManager.ts hook manages subscriptions and handles WalletConnect events. It triggers the appropriate Modal views.
    3. UI/UX (Modals): Modal views handle data display and user actions (approving or rejecting requests).
    4. Request Handling: Once a user acts on a modal, the data is passed to RequestHandlerUtil.ts. This utility performs the necessary work based on the request method and returns formatted JSON-RPC result data to be used for WalletConnect client responses.

  4. Explore dApp implementation examples

    main

    For developers looking to build decentralized applications (dApps) that connect to wallets via WalletConnect, the following examples are available:

    • React dApp v2: A React-based dApp implementation.
    • Chain Abstraction Demo: A demonstration of chain abstraction capabilities.
    • Smart Sessions Demo: A demonstration of Smart Sessions functionality.

  5. Setup the React Wallet Example

    main

    This example demonstrates basic and advanced use cases for WalletConnect's Sign SDK, implementing both Sign v1 and v2 side-by-side.

    Warning: The wallet uses legacy v1 implementation files (prefixed with Legacy...) for backwards compatibility reference. Use this for development purposes only; do not use it for managing real funds.

    Prerequisites

    1. Obtain a Project ID from WalletConnect Cloud.
    2. Add your Project ID to the src/utils/WalletConnectUtil.ts file.

    Installation Steps

    1. Install dependencies:
      yarn install

    or

    npm install

    2. Setup environment variables:
   ```bash
cp .env.local.example .env.local
    1. Start the development server:
      yarn dev

    or

    npm run dev

    
### Environment Variables
- `NEXT_PUBLIC_PROJECT_ID`: Your WalletConnect Project ID.
- `NEXT_PUBLIC_RELAY_URL`: The relay URL (pre-configured).

    cp .env.local.example .env.local
yarn dev

  7. Set up the Chain Abstraction Demo

    main

    The Chain Abstraction Demo is an application that demonstrates how to use Reown's AppKit to enable seamless stablecoin transfers across multiple networks.

    To run the demo locally, follow these steps:

    1. Configure Environment Variables:
      • Copy .env.example to a new file named .env in the project root.
      • Obtain a Project ID from Reown Cloud.
      • Add your Project ID to the .env file.
    2. Install Dependencies: Use npm, yarn, pnpm, or bun to install the required packages.
    3. Start the Server: Run the development script to launch the application.

    Once running, access the application at http://localhost:3000. You can modify the UI by editing app/page.tsx.

    # 1. Setup environment
cp .env.example .env
# (Add your Project ID to .env)

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

  8. Setup the WDK Wallet Example

    main

    To run the WDK Wallet Example, ensure you have Node.js 18+ and pnpm installed. You must also have a WalletConnect/Reown Project ID from the Reown Dashboard.

    1. Install dependencies:
      pnpm install
    2. Configure environment variables:
      cp .env.local.example .env.local
    3. Edit .env.local to include your NEXT_PUBLIC_PROJECT_ID.
    4. Start the development server:
      pnpm dev
      The app will be available at http://localhost:3002.
    pnpm install
cp .env.local.example .env.local
pnpm dev

  10. Set up the React dApp (with standalone v2 client)

    main

    This example demonstrates how to implement a React dApp using the standalone WalletConnect v2 client to handle pairings, manage sessions, and send JSON-RPC requests to paired wallets.

    To run this project locally, follow these steps:

    1. Install dependencies: Use yarn to install the required packages.
    2. Configure environment variables: Copy the provided example file to .env.local.
    3. Provide a Project ID: You must replace the placeholder in NEXT_PUBLIC_PROJECT_ID with a valid ID generated from WalletConnect Cloud.
    # Install dependencies
yarn

# Set up environment variables
cp .env.local.example .env.local

  11. Implement WalletConnect Pay flow

    main

    The WalletConnect Pay implementation is fully client-side and uses your projectId (via payConfig.appId) for authentication. The workflow for processing a Pay link is:

    1. Detect Link: Use isPaymentLink(uri) to identify a Pay link.
    2. Fetch Options: Call getPaymentOptions({ paymentLink, accounts }) to retrieve available payment options (e.g., EVM or Solana accounts).
    3. Select Option: The user selects a specific payment option.
    4. Get Actions: Call getRequiredPaymentActions({ paymentId, optionId }) to retrieve the necessary signing actions.
    5. Sign Actions: Sign each action using the WDK-derived key.
      • EVM: Signs EIP-712 typed data (e.g., EIP-2612 or Permit2).
      • Solana: Signs via a SolanaSigner bridge.
    6. Confirm: Call confirmPayment({ paymentId, optionId, signatures }) to finalize.
    // Conceptual flow for WalletConnect Pay
const options = await getPaymentOptions({ paymentLink, accounts });
const selectedOption = options[0];
const actions = await getRequiredPaymentActions({ paymentId, optionId: selectedOption.id });

// Sign actions using WDK-derived keys
const signatures = await Promise.all(actions.map(action => signAction(action)));

await confirmPayment({ paymentId, optionId: selectedOption.id, signatures });