### React XRPL Wallet Integration Example

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

A full React application example demonstrating XRPL wallet integration. It utilizes hooks from the '@xrpl-wallet-standard/react' library to manage wallet connections, display account details, and submit transactions. Dependencies include '@xrpl-wallet-standard/react', '@xrpl-wallet-adapter/xaman', and '@xrpl-wallet-adapter/crossmark'. The application connects to the XRPL testnet.

```typescript
import React from 'react';
import {
  WalletProvider,
  ConnectButton,
  useAccount,
  useConnectionStatus,
  useDisconnect,
  useSignAndSubmitTransaction
} from '@xrpl-wallet-standard/react';
import { XamanWallet } from '@xrpl-wallet-adapter/xaman';
import { CrossmarkWallet } from '@xrpl-wallet-adapter/crossmark';

// Initialize wallets
const xamanWallet = new XamanWallet('your-xaman-api-key');
const crossmarkWallet = new CrossmarkWallet();

function AppContent() {
  const account = useAccount();
  const status = useConnectionStatus();
  const disconnect = useDisconnect();
  const signAndSubmitTransaction = useSignAndSubmitTransaction();

  const [txHash, setTxHash] = React.useState<string>('');
  const [error, setError] = React.useState<string>('');

  const sendPayment = async () => {
    if (!account) return;

    setError('');
    try {
      const result = await signAndSubmitTransaction(
        {
          TransactionType: 'Payment',
          Account: account.address,
          Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMzcJeu',
          Amount: '1000000',
          Memos: [{
            Memo: {
              MemoData: Buffer.from('Payment from XRPL Wallet Standard').toString('hex')
            }
          }]
        },
        'xrpl:1' // Testnet
      );

      setTxHash(result.tx_hash);
      console.log('Payment successful:', result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Transaction failed');
      console.error('Payment error:', err);
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <h1>XRPL Wallet Standard Demo</h1>

      <div style={{ marginBottom: '20px' }}>
        <ConnectButton />
      </div>

      {account && (
        <div style={{ marginBottom: '20px' }}>
          <h2>Connected Account</h2>
          <p><strong>Address:</strong> {account.address}</p>
          <p><strong>Status:</strong> {status}</p>
        </div>
      )}

      {status === 'connected' && (
        <div>
          <button
            onClick={sendPayment}
            style={{
              padding: '10px 20px',
              marginRight: '10px',
              cursor: 'pointer'
            }}
          >
            Send 1 XRP (Testnet)
          </button>

          <button
            onClick={disconnect}
            style={{ padding: '10px 20px', cursor: 'pointer' }}
          >
            Disconnect
          </button>
        </div>
      )}

      {txHash && (
        <div style={{ marginTop: '20px', color: 'green' }}>
          <h3>Transaction Successful!</h3>
          <p>Hash: {txHash}</p>
          <a
            href={`https://testnet.xrpl.org/transactions/${txHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            View on Explorer
          </a>
        </div>
      )}

      {error && (
        <div style={{ marginTop: '20px', color: 'red' }}>
          <h3>Error</h3>
          <p>{error}</p>
        </div>
      )}
    </div>
  );
}

function App() {
  return (
    <WalletProvider
      autoConnect={true}
      registerWallets={[xamanWallet, crossmarkWallet]}
    >
      <AppContent />
    </WalletProvider>
  );
}

export default App;

```

--------------------------------

### Initialize and Connect Crossmark Wallet (TypeScript)

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Integrates the Crossmark browser extension wallet by initializing it, registering it with the XRPL Wallet Standard, and providing functions to check for installation and connect. It also includes an example for signing XRPL transactions.

```typescript
import { CrossmarkWallet } from '@xrpl-wallet-adapter/crossmark';
import { registerWallet } from '@xrpl-wallet-standard/app';

// Initialize Crossmark wallet (no API key required)
const crossmarkWallet = new CrossmarkWallet();

// Register wallet
registerWallet(crossmarkWallet);

// Check if Crossmark is installed
function isCrossmarkInstalled(): boolean {
  return typeof window !== 'undefined' &&
    'xrpl' in window &&
    'crossmark' in (window as any).xrpl;
}

// Connect to Crossmark
async function connectCrossmark() {
  if (!isCrossmarkInstalled()) {
    throw new Error('Crossmark extension not installed');
  }

  try {
    const { accounts } = await crossmarkWallet.features['standard:connect']
      .connect({ silent: false });

    const account = accounts[0];
    console.log('Connected to Crossmark');
    console.log('Account:', account.address);
    console.log('Public key:', account.publicKey);

    return account;
  } catch (error) {
    console.error('Crossmark connection failed:', error);
    throw error;
  }
}

// Sign transaction with Crossmark
async function signWithCrossmark(transaction: any, account: WalletAccount) {
  const result = await crossmarkWallet.features['xrpl:signTransaction']
    .signTransaction({
      tx_json: transaction,
      account: account,
      network: 'xrpl:mainnet' // Crossmark uses current network setting
    });

  return result.signed_tx_blob;
}
```

--------------------------------

### Setup Wallet Provider in React

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Configure the XRPL WalletProvider to manage wallet connections and adapters within your React application. This involves importing necessary components, initializing wallet adapters (e.g., XamanWallet, CrossmarkWallet), and rendering the application within the provider. Ensure autoConnect is set appropriately and register all supported wallets. Dependencies: @xrpl-wallet-standard/react, @xrpl-wallet-adapter-xaman, @xrpl-wallet-adapter-crossmark.

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import { WalletProvider } from '@xrpl-wallet-standard/react';
import { XamanWallet } from '@xrpl-wallet-adapter/xaman';
import { CrossmarkWallet } from '@xrpl-wallet-adapter/crossmark';
import App from './App';

// Initialize wallet adapters
const xamanWallet = new XamanWallet('your-api-key');
const crossmarkWallet = new CrossmarkWallet();

// Render app with wallet provider
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WalletProvider
      autoConnect={true}
      registerWallets={[xamanWallet, crossmarkWallet]}
      preferredWallets={['Xaman', 'Crossmark']}
    >
      <App />
    </WalletProvider>
  </React.StrictMode>
);

```

--------------------------------

### Configure ESLint for Type-Aware Linting in React/TypeScript

Source: https://github.com/tequdev/xrpl-wallet-standard/blob/main/packages/examples/react/README.md

This configuration snippet shows how to set up ESLint for a React and TypeScript project using Vite. It specifies parser options, including project configurations and tsconfig paths, to enable type-aware linting rules. This setup is recommended for production applications to catch type-related errors.

```javascript
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
    tsconfigRootDir: __dirname,
  },
}
```

--------------------------------

### Get Registered XRPL Wallets (TypeScript)

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Retrieves all XRPL-compatible wallets registered within the application. It demonstrates how to access wallet details and filter wallets based on specific features like 'standard:disconnect'.

```typescript
import { getRegisterdXRPLWallets } from '@xrpl-wallet-standard/app';
import type { XRPLWallet } from '@xrpl-wallet-standard/app';

// Get all registered XRPL wallets
const wallets: XRPLWallet[] = getRegisterdXRPLWallets();

wallets.forEach(wallet => {
  console.log('Wallet name:', wallet.name);
  console.log('Wallet version:', wallet.version);
  console.log('Supported chains:', wallet.chains);
  console.log('Available features:', Object.keys(wallet.features));
  console.log('Current accounts:', wallet.accounts);
});

// Filter wallets by additional features
import type { StandardDisconnectFeature } from '@xrpl-wallet-standard/core';

const walletsWithDisconnect = getRegisterdXRPLWallets<StandardDisconnectFeature>();
const disconnectableWallets = walletsWithDisconnect.filter(wallet =>
  'standard:disconnect' in wallet.features
);
```

--------------------------------

### Initialize and Connect Xaman Wallet (TypeScript)

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Integrates the Xaman wallet into your application by initializing it with an API key, registering it with the XRPL Wallet Standard, and handling connection and disconnection. It also includes event listening for account changes.

```typescript
import { XamanWallet } from '@xrpl-wallet-adapter/xaman';
import { registerWallet } from '@xrpl-wallet-standard/app';

// Initialize Xaman wallet with your API key
const xamanApiKey = 'your-xaman-api-key';
const xamanWallet = new XamanWallet(xamanApiKey);

// Register wallet in the application
registerWallet(xamanWallet);

// Connect to Xaman wallet
async function connectXaman() {
  try {
    const { accounts } = await xamanWallet.features['standard:connect']
      .connect({ silent: false });

    if (accounts.length === 0) {
      console.log('No accounts authorized');
      return;
    }

    const account = accounts[0];
    console.log('Connected account:', account.address);
    console.log('Account chains:', account.chains);

    return account;
  } catch (error) {
    console.error('Xaman connection failed:', error);
    throw error;
  }
}

// Silent connection (use existing session)
async function reconnectXaman() {
  const { accounts } = await xamanWallet.features['standard:connect']
    .connect({ silent: true });
  return accounts[0];
}

// Listen for account changes
xamanWallet.features['standard:events'].on('change', ({ accounts }) => {
  console.log('Accounts changed:', accounts);
});

// Disconnect
async function disconnectXaman() {
  await xamanWallet.features['standard:disconnect'].disconnect();
  console.log('Disconnected from Xaman');
}
```

--------------------------------

### XRPL Wallet Connect Button Component

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Utilize the pre-built ConnectButton component from the xrpl-wallet-standard/react library to simplify wallet connection UI. This component handles the connection logic automatically. It also supports customization via className and style props for seamless integration with your application's design. Dependencies: @xrpl-wallet-standard/react.

```typescript
import { ConnectButton } from '@xrpl-wallet-standard/react';

function WalletConnect() {
  return (
    <div>
      <h1>XRPL Wallet Connection</h1>
      <ConnectButton />
    </div>
  );
}

// Custom styled button
function CustomWalletConnect() {
  return (
    <ConnectButton
      className="my-custom-class"
      style={{ backgroundColor: '#007bff', color: 'white' }}
    />
  );
}

export default WalletConnect;

```

--------------------------------

### XRPL Wallet Hooks for State Management

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Leverage React hooks provided by @xrpl-wallet-standard/react for efficient wallet state management and interaction. These hooks allow access to account information, wallet status, connection functions, and transaction signing capabilities. They simplify complex operations like connecting, disconnecting, signing, and submitting transactions. Dependencies: @xrpl-wallet-standard/react.

```typescript
import {
  useAccount,
  useAccounts,
  useWallet,
  useWallets,
  useConnect,
  useDisconnect,
  useConnectionStatus,
  useSignTransaction,
  useSignAndSubmitTransaction
} from '@xrpl-wallet-standard/react';

function WalletDemo() {
  // Get current account
  const account = useAccount();

  // Get all accounts
  const accounts = useAccounts();

  // Get current wallet
  const wallet = useWallet();

  // Get all available wallets
  const wallets = useWallets();

  // Connection status
  const status = useConnectionStatus(); // 'connected' | 'disconnected' | 'connecting'

  // Connection functions
  const { connect, status: connectStatus } = useConnect();
  const disconnect = useDisconnect();

  // Transaction functions
  const signTransaction = useSignTransaction();
  const signAndSubmitTransaction = useSignAndSubmitTransaction();

  // Connect to a wallet
  const handleConnect = async () => {
    if (wallets.length === 0) {
      console.error('No wallets available');
      return;
    }

    try {
      await connect(wallets[0], { silent: false });
      console.log('Connected successfully');
    } catch (error) {
      console.error('Connection failed:', error);
    }
  };

  // Sign and submit a transaction
  const handleTransaction = async () => {
    if (!account) {
      console.error('No account connected');
      return;
    }

    try {
      const result = await signAndSubmitTransaction(
        {
          TransactionType: 'Payment',
          Account: account.address,
          Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMzcJeu',
          Amount: '1000000' // 1 XRP
        },
        'xrpl:1' // Testnet
      );

      console.log('Transaction successful!');
      console.log('Hash:', result.tx_hash);
      console.log('Result:', result.tx_json);
    } catch (error) {
      console.error('Transaction failed:', error);
    }
  };

  // Sign transaction without submitting
  const handleSign = async () => {
    if (!account) return;

    try {
      const { signed_tx_blob } = await signTransaction(
        {
          TransactionType: 'AccountSet',
          Account: account.address
        },
        'xrpl:testnet'
      );

      console.log('Transaction signed:', signed_tx_blob);
      // Can now submit blob manually using xrpl.js
    } catch (error) {
      console.error('Signing failed:', error);
    }
  };

  return (
    <div>
      <h2>Wallet Status: {status}</h2>

      {account && (
        <div>
          <p>Connected: {account.address}</p>
          <p>Wallet: {wallet?.name}</p>
        </div>
      )}

      {status === 'disconnected' && (
        <button onClick={handleConnect}>Connect Wallet</button>
      )}

      {status === 'connected' && (
        <div>
          <button onClick={handleTransaction}>Send Payment</button>
          <button onClick={handleSign}>Sign Transaction</button>
          <button onClick={disconnect}>Disconnect</button>
        </div>
      )}

      <div>
        <h3>Available Wallets ({wallets.length})</h3>
        {wallets.map(w => (
          <div key={w.name}>
            <p>{w.name} v{w.version}</p>
            <button onClick={() => connect(w)}>Connect</button>
          </div>
        ))}
      </div>

      {accounts.length > 1 && (
        <div>
          <h3>All Connected Accounts</h3>
          {accounts.map(acc => (
            <p key={acc.address}>{acc.address}</p>
          ))}
        </div>
      )}
    </div>
  );
}

export default WalletDemo;

```

--------------------------------

### Configure XRPL Networks

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Defines and works with XRPL network identifiers using predefined constants or custom values. Provides utilities to convert network names to chain IDs, retrieve WebSocket endpoints, and validate network identifiers. Type safety is ensured with `XRPLIdentifierString`.

```typescript
import {
  XRPL_MAINNET,
  XRPL_TESTNET,
  XRPL_DEVNET,
  XAHAU_MAINNET,
  XAHAU_TESTNET,
  convertNetworkToChainId,
  getNetworkWssEndpoint,
  isXRPLNetworks,
  type XRPLIdentifierString
} from '@xrpl-wallet-standard/core';

// Use predefined network constants
const mainnet = XRPL_MAINNET; // 'xrpl:0'
const testnet = XRPL_TESTNET; // 'xrpl:1'
const devnet = XRPL_DEVNET; // 'xrpl:2'
const xahauMain = XAHAU_MAINNET; // 'xrpl:21337'
const xahauTest = XAHAU_TESTNET; // 'xrpl:21338'

// Convert human-readable names to chain IDs
const chainId = convertNetworkToChainId('xrpl:mainnet'); // Returns 'xrpl:0'

// Get WebSocket endpoint for a network
const wssEndpoint = getNetworkWssEndpoint(XRPL_MAINNET);
// Returns 'wss://xrplcluster.com'

// Validate network identifier
const isValid = isXRPLNetworks('xrpl:1'); // true
const isInvalid = isXRPLNetworks('ethereum:1'); // false

// Type-safe network identifiers
const customNetwork: XRPLIdentifierString = 'xrpl:999';
```

--------------------------------

### Sign and Submit XRPL Transactions

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Signs and automatically submits transactions to the XRPL network. This feature requires a wallet with the `xrpl:signAndSubmitTransaction` feature. It accepts transaction details, account information, and network configuration, with an option for autofill.

```typescript
import type {
  XRPLSignAndSubmitTransactionInput,
  SignAndSubmitTransactionOutput,
  XRPLSignAndSubmitTransactionFeature
} from '@xrpl-wallet-standard/core';
import { XRPL_MAINNET } from '@xrpl-wallet-standard/core';

// Sign and submit transaction
async function signAndSubmitTransaction(
  wallet: XRPLSignAndSubmitTransactionFeature,
  account: WalletAccount
): Promise<SignAndSubmitTransactionOutput> {
  const transaction = {
    TransactionType: 'AccountSet',
    Account: account.address,
    Domain: '6578616D706C652E636F6D' // example.com in hex
  };

  try {
    const input: XRPLSignAndSubmitTransactionInput = {
      tx_json: transaction,
      account: account,
      network: XRPL_MAINNET,
      options: {
        autofill: true,
        multisig: false
      }
    };

    const result = await wallet['xrpl:signAndSubmitTransaction']
      .signAndSubmitTransaction(input);

    console.log('Transaction hash:', result.tx_hash);
    console.log('Transaction result:', result.tx_json);
    console.log('Validated:', result.tx_json.validated);

    return result;
  } catch (error) {
    console.error('Transaction failed:', error);
    throw error;
  }
}
```

--------------------------------

### Sign XRPL Transactions

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Signs XRPL transactions without submitting them to the network. It requires a wallet with the `xrpl:signTransaction` feature, a prepared transaction object, the account details, and the network configuration. The `autofill` option can pre-fill transaction fields.

```typescript
import type {
  XRPLSignTransactionInput,
  SignTransactionOutput,
  PrepearedTransaction,
  XRPLSignTransactionFeature
} from '@xrpl-wallet-standard/core';
import { XRPL_TESTNET } from '@xrpl-wallet-standard/core';

// Prepare transaction
const transaction: PrepearedTransaction = {
  TransactionType: 'Payment',
  Account: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMzcJeu',
  Destination: 'rLHzPsX6oXkzU9rFYeWYDQZQqg6FbD4HrG',
  Amount: '1000000', // 1 XRP in drops
  Fee: '12'
};

// Sign transaction using wallet feature
async function signTransaction(
  wallet: XRPLSignTransactionFeature,
  account: WalletAccount
): Promise<SignTransactionOutput> {
  try {
    const input: XRPLSignAndSubmitTransactionInput = {
      tx_json: transaction,
      account: account,
      network: XRPL_TESTNET,
      options: {
        autofill: true, // Auto-fill Sequence, Fee, LastLedgerSequence
        multisig: false // Set to true for multisig transactions
      }
    };

    const result = await wallet['xrpl:signTransaction'].signTransaction(input);
    console.log('Signed transaction blob:', result.signed_tx_blob);
    return result;
  } catch (error) {
    console.error('Failed to sign transaction:', error);
    throw error;
  }
}
```

--------------------------------

### Validate XRPL Wallet Features (TypeScript)

Source: https://context7.com/tequdev/xrpl-wallet-standard/llms.txt

Checks if a given wallet implements the required XRPL features and optional features like 'standard:disconnect' or 'standard:events'. It uses helper functions from the '@xrpl-wallet-standard/app' package.

```typescript
import { isWalletWithRequiredFeatureSet, isXRPLWallet } from '@xrpl-wallet-standard/app';
import type { Wallet } from '@wallet-standard/core';

function validateWallet(wallet: Wallet) {
  // Check if wallet has all required XRPL features
  if (!isXRPLWallet(wallet)) {
    throw new Error('Wallet does not support required XRPL features');
  }

  // Check for additional optional features
  const hasDisconnect = isWalletWithRequiredFeatureSet<StandardDisconnectFeature>(
    wallet, 
    ['standard:disconnect']
  );

  const hasEvents = isWalletWithRequiredFeatureSet(wallet, ['standard:events']);

  console.log('Wallet validated:', wallet.name);
  console.log('Has disconnect feature:', hasDisconnect);
  console.log('Has events feature:', hasEvents);

  return { hasDisconnect, hasEvents };
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.