Skip to main content

Receive Crypto

The ONE SDK provides the OneReceiveWidget component for displaying a wallet's receive address with a QR code, along with utilities for generating shareable content and explorer links.

OneReceiveWidget​

A complete receive UI with QR code, address display, and copy-to-clipboard functionality.

import { OneReceiveWidget, CHAIN_IDS } from '@one_deploy/sdk';

function ReceivePage() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234...abcd"
      chainId={CHAIN_IDS.BASE}
      token="ETH"
      onCopy={() => console.log('Address copied to clipboard')}
    />
  );
}

OneReceiveWidgetProps​

interface OneReceiveWidgetProps {
  /** The wallet address to display and encode in the QR code. */
  walletAddress: string;

  /** Chain ID to display chain-specific information. Defaults to CHAIN_IDS.BASE. */
  chainId?: number;

  /** Token symbol to display alongside the address (e.g. 'ETH', 'USDC'). */
  token?: string;

  /** Requested amount to encode in the QR code (EIP-681 format). */
  amount?: string;

  /** Callback fired when the address is copied to clipboard. */
  onCopy?: () => void;

  /** Callback fired when the share button is pressed. */
  onShare?: (content: ShareContent) => void;

  /** Show the chain name badge. Defaults to true. */
  showChainBadge?: boolean;

  /** Show the block explorer link. Defaults to true. */
  showExplorerLink?: boolean;

  /** Additional CSS class name. */
  className?: string;

  /** Inline styles. */
  style?: React.CSSProperties;
}

interface ShareContent {
  /** Plain text content for sharing. */
  text: string;

  /** The wallet address. */
  address: string;

  /** Full EIP-681 payment URI. */
  paymentUri: string;

  /** Block explorer URL for the address. */
  explorerUrl: string;
}

QR Code Generation​

The OneReceiveWidget automatically generates a QR code from the wallet address. When amount and token are provided, the QR code encodes an EIP-681 payment URI.

Basic Address QR​

import { OneReceiveWidget } from '@one_deploy/sdk';

function BasicReceive() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234567890abcdef1234567890abcdef12345678"
    />
  );
}

The QR code encodes the plain address: ethereum:0x1234567890abcdef1234567890abcdef12345678

Payment Request QR​

import { OneReceiveWidget, CHAIN_IDS } from '@one_deploy/sdk';

function PaymentRequest() {
  return (
    <OneReceiveWidget
      walletAddress="0x1234567890abcdef1234567890abcdef12345678"
      chainId={CHAIN_IDS.BASE}
      token="USDC"
      amount="50.00"
    />
  );
}

The QR code encodes the EIP-681 URI: ethereum:0x1234...@8453/transfer?address=0x1234...&uint256=50000000

generateShareContent Utility​

The generateShareContent utility creates shareable text and URIs from a wallet address. This function is exported from the React Native entry point for use in mobile share sheets.

import { generateShareContent } from '@one_deploy/sdk/react-native';
import type { ShareContent } from '@one_deploy/sdk';

async function shareAddress(walletAddress: string, chainId: number) {
  const content: ShareContent = generateShareContent({
    walletAddress,
    chainId,
    token: 'ETH',
    amount: '0.1',
  });

  console.log(content.text);
  // "Send 0.1 ETH to 0x1234...abcd on Base"

  console.log(content.paymentUri);
  // "ethereum:0x1234...abcd@8453?value=1e17"

  console.log(content.explorerUrl);
  // "https://basescan.org/address/0x1234...abcd"
}

Function Signature​

function generateShareContent(options: {
  walletAddress: string;
  chainId?: number;
  token?: string;
  amount?: string;
}): ShareContent;

getExplorerUrl Utility​

Returns a block explorer URL for a given address or transaction hash.

import { getExplorerUrl, CHAIN_IDS } from '@one_deploy/sdk';

// Address URL
const addressUrl = getExplorerUrl({
  type: 'address',
  value: '0x1234...abcd',
  chainId: CHAIN_IDS.BASE,
});
// "https://basescan.org/address/0x1234...abcd"

// Transaction URL
const txUrl = getExplorerUrl({
  type: 'tx',
  value: '0xabcdef...',
  chainId: CHAIN_IDS.ETHEREUM,
});
// "https://etherscan.io/tx/0xabcdef..."

// Token URL
const tokenUrl = getExplorerUrl({
  type: 'token',
  value: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  chainId: CHAIN_IDS.BASE,
});
// "https://basescan.org/token/0x8335..."

Function Signature​

function getExplorerUrl(options: {
  type: 'address' | 'tx' | 'token';
  value: string;
  chainId: number;
}): string;

Supported Explorers​

ChainExplorer
Basebasescan.org
Ethereumetherscan.io
Polygonpolygonscan.com
Arbitrumarbiscan.io
Optimismoptimistic.etherscan.io

Web Usage Example​

A full receive page combining the widget with custom actions.

import { useState } from 'react';
import {
  OneReceiveWidget,
  getExplorerUrl,
  CHAIN_IDS,
} from '@one_deploy/sdk';
import type { ShareContent } from '@one_deploy/sdk';

function ReceiveCrypto({ walletAddress }: { walletAddress: string }) {
  const [chainId, setChainId] = useState(CHAIN_IDS.BASE);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleShare = (content: ShareContent) => {
    if (navigator.share) {
      navigator.share({
        title: 'My Wallet Address',
        text: content.text,
        url: content.explorerUrl,
      });
    }
  };

  return (
    <div>
      <select
        value={chainId}
        onChange={(e) => setChainId(Number(e.target.value))}
      >
        <option value={CHAIN_IDS.BASE}>Base</option>
        <option value={CHAIN_IDS.ETHEREUM}>Ethereum</option>
        <option value={CHAIN_IDS.POLYGON}>Polygon</option>
        <option value={CHAIN_IDS.ARBITRUM}>Arbitrum</option>
        <option value={CHAIN_IDS.OPTIMISM}>Optimism</option>
      </select>

      <OneReceiveWidget
        walletAddress={walletAddress}
        chainId={chainId}
        showChainBadge
        showExplorerLink
        onCopy={handleCopy}
        onShare={handleShare}
      />

      {copied && <p>Address copied!</p>}

      <a
        href={getExplorerUrl({
          type: 'address',
          value: walletAddress,
          chainId,
        })}
        target="_blank"
        rel="noopener noreferrer"
      >
        View on Explorer
      </a>
    </div>
  );
}

Next Steps​