StaticBit WalletConnect Integration Guide

StaticBit is a decentralized wallet built on the XRP Ledger (XRPL). It supports dApp authorization using the WalletConnect v2 protocol.

Supported Networks

Namespace	Chain ID	Network
xrpl	xrpl:0	XRPL Mainnet
xrpl	xrpl:1	XRPL Testnet
xrpl	xrpl:2	XRPL Devnet

Supported Methods

Namespace	Method	Description
xrpl	xrpl_signTransaction	Signs and sends transactions through XRPL

Integration Steps

1. Get Project ID

Register at cloud.reown.com and create a new project. Select StaticBit as the wallet provider.

2. Install Dependencies

yarn add @walletconnect/modal-sign-react @walletconnect/types @walletconnect/utils

3. Add WalletConnect Provider

import { WalletConnectModalSign } from '@walletconnect/modal-sign-react';
import { getAppMetadata } from '@walletconnect/utils';

export default function App() {
  return (
    <WalletConnectModalSign
      projectId={process.env.NEXT_PUBLIC_PROJECT_ID}
      metadata={getAppMetadata()}
    />
  );
}

4. Connect StaticBit

import { useConnect } from '@walletconnect/modal-sign-react';

const { connect } = useConnect({
  requiredNamespaces: {
    xrpl: {
      chains: ['xrpl:0', 'xrpl:1'],
      methods: ['xrpl_signTransaction'],
      events: ['chainChanged', 'accountsChanged'],
    },
  },
});

const connectWallet = async () => {
  try {
    const session = await connect();
    console.log('Connected:', session);
  } catch (err) {
    console.error('Connection error:', err);
  }
};

5. Disconnect StaticBit

import { useDisconnect } from '@walletconnect/modal-sign-react';
import { getSdkError } from '@walletconnect/utils';

const { disconnect } = useDisconnect({
  topic: session.topic,
  reason: getSdkError('USER_DISCONNECTED'),
});

6. Send Transaction Example

This example shows how to send a Payment transaction using xrpl_signTransaction method via WalletConnect:

// 'use client';

import { useRequest } from '@walletconnect/modal-sign-react';

type XrplSignTransactionResponse = unknown;

export function SendXrplTransaction({ topic, network, account, amount, destination }) {
  const { request: xrplSendTransaction } = useRequest({
    chainId: network, // 'xrpl:0' or 'xrpl:1' or 'xrpl:2'
    topic,             // session.topic
    request: {
      method: 'xrpl_signTransaction',
      params: {
        tx_json: {
          TransactionType: 'Payment',
          Account: account,
          Destination: destination,
          Amount: amount,
        },
      },
    },
  });

  const onSendTransaction = async () => {
    try {
      const result = await xrplSendTransaction();
      console.info('sendTransaction result', result);
    } catch (err) {
      console.error('Transaction failed', err);
    }
  };

  return (
    <button onClick={onSendTransaction}>
      xrpl_signTransaction to XRPL
    </button>
  );
}