Quick Start

Here’s a concise guide to integrating Joey Wallet into your XRPL-based dApp using WalletConnect

Do you have an existing that dapp that already supports WalletConnect? See here for details on how to add Joey Wallet.

1. Set Up Your Development Environment:

• Install Node.js and npm. ◦ Set up a project with a framework like React, NextJS or plain Typescript/Javascript.

In this example, we will be using NextJS and pnpm

• Install our joey provider:

pnpm install @joey-wallet/wc-client

1. Obtain your Reown Project Identification:

Go to Reown Dashboard and configure your projects details. Once finished, copy your Reown ProjectId.

1. Configure your Joey provider:

Create a configuration file for your provider.

// File: ./src/app/config.ts
import type { Config } from '@joey-wallet/wc-client';

export default {
	// Required
  projectId: process.env['NEXT_PUBLIC_PROJECT_ID'],
  // Optional - Add your projects details
  metadata: {
    name: 'Joey Example Project',
    description:
      'A sample project using walletconnect and Joey Wallet.',
    url: "http://localhost:3000",
    icons: ['/assets/favicon.ico'],
    redirect: {
      universal: "http://localhost:3000",
    },
  },
} as Config

View here for a more thorough explanation for all the acceptable configuration parameters for the provider.

1. Create, import your config file, and include the context provider around your page components:

// File: ./src/app/page.tsx
'use client';

import * as React from 'react';
import { advanced } from '@joey-wallet/wc-client/react';

import config from './config';

const { Provider: WcProvider, useProvider } = advanced.default;
export { useProvider };

export const Provider = (props: React.PropsWithChildren) => (
  <WcProvider config={config}>{props.children}</WcProvider>
);

export default function Page() {
  return (
    <Provider>
      {/*  Your page components here  */}
    </Provider>
  )
}

1. Handling Wallet Events and Actions:

The first thing to do - connect to WalletConnect using Joey Wallet! See below for an example using the connect action included in the provider:

// File: ./src/app/component.tsx
'use client';

import * as React from 'react';
import { useProvider } from './page';

export default function Component() {
  const { actions, session, accounts } = useProvider();

  const handleConnect = async () => {
    const connect = await actions.connect();
    if (connect.error) throw connect.error;
    // You have been connected using wallet connect.
    // Now you can start interacting with the XRP Ledger.
    // ...
  };

  return (
    <div>
      {!session && (
        <button type="button" onClick={handleConnect}>
          Connect
        </button>
      )}
      {session && (
        <div>
           <span>Successfully connected!</span>
          {accounts && accounts.map((account,index) => (
		          <div key={index}>{account}</div>
		          )
	         )}
        </div>
      )}
    </div>
  );
}

After the connect button is clicked, the WalletConnect modal will open and ask for the user to sign-in using Joey Wallet. Once the user approves the interaction, the connection will be complete and you can proceed to issuing transaction request.

1. Interact with the XRP Ledger and Joey Wallet

Issue your first sign request!

// File: ./src/app/signer.tsx
'use client';

import * as React from 'react';
import xrpl from 'xrpl';
import core from '@joey-wallet/wc-client/core';

import { useProvider } from './page';

export default function Signer() {
  const { provider, session, chain, accounts } = useProvider();
  const [response, setResponse] = React.useState<string | undefined>();

  const handleSign = async () => {
    try {
      if (!provider) throw Error('Provider not ready for request.');

      const address = accounts?.map((account) => account.replace(chain, ''))?.[0];
      if (!address) throw Error('Could not determine address for request');

      const tx_json: xrpl.Payment = {
        TransactionType: 'Payment',
        Account: address,
        Destination: 'ra5nK24KXen9AHvsdFTKHSANinZseWnPcX',
        Amount: {
          currency: 'USD',
          value: '1',
          issuer: 'rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn',
        },
        Fee: '12',
        Flags: 2147483648,
        Sequence: 2,
      };

      const response = await core.methods.signTransaction({
        provider,
        chainId: chain,
        request: {
          tx_json,
          options: { autofill: true, submit: true },
        },
      });

      setResponse(JSON.stringify(response, null, 2));
    } catch (e: any) {
      console.error(e);
      return new Error(e.message);
    }
  };

  return (
    <div>
      {session && (
        <button type="button" onClick={handleSign}>
          Submit
        </button>
      )}
      {response && (
        <div>
          <span>Received a response from Joey Wallet!</span>
          {response}
        </div>
      )}
    </div>
  );
}

For a complete list of embedded methods, see here: https://github.com/Joey-Wallet/wc-client/tree/main/packages/core/src/methods

Pro Tip: Leverage Joey Wallet’s integration with platforms like xrp.cafe and firstledger.net for real-world testing.