Skip to main content

Send Crypto

The ONE SDK provides both UI components and a programmatic API for sending cryptocurrency. Use the OneSendWidget for a complete send flow, individual transaction buttons for specific actions, or the sendTransaction engine method for full control.

Web Only

OneSendWidget, its presets, and the transaction button components are available only on web. They are not exported from the React Native entry point. See Mobile & Desktop for platform details.

OneSendWidget​

A complete send form with address input, amount entry, token selection, and confirmation.

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

function SendPage() {
  return (
    <OneSendWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      onSuccess={(tx) => {
        console.log('Sent! Hash:', tx.transactionHash);
      }}
      onError={(error) => {
        console.error('Send failed:', error.message);
      }}
    />
  );
}

OneSendWidgetProps​

interface OneSendWidgetProps {
  /** Sender wallet address. */
  fromAddress: string;

  /** Chain ID for the transaction. Defaults to CHAIN_IDS.BASE. */
  chainId?: number;

  /** Pre-fill the recipient address. */
  toAddress?: string;

  /** Pre-fill the token to send. Defaults to native token. */
  token?: string;

  /** Pre-fill the amount. */
  amount?: string;

  /** Restrict token selection to these symbols. */
  allowedTokens?: string[];

  /** Callback fired on successful transaction. */
  onSuccess?: (tx: TransactionResult) => void;

  /** Callback fired on transaction failure. */
  onError?: (error: OneSDKError) => void;

  /** Callback fired when the user cancels. */
  onCancel?: () => void;

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

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

interface TransactionResult {
  /** The on-chain transaction hash. */
  transactionHash: string;

  /** ONE SDK internal transaction ID. */
  transactionId: string;

  /** Chain ID the transaction was submitted on. */
  chainId: number;

  /** Transaction status. */
  status: 'pending' | 'confirmed' | 'failed';

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

Presets​

OneSendETHWidget​

Pre-configured widget for sending ETH (or the native gas token on the current chain).

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

function SendETH() {
  return (
    <OneSendETHWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      onSuccess={(tx) => console.log('ETH sent:', tx.transactionHash)}
    />
  );
}

OneSendUSDCWidget​

Pre-configured widget for sending USDC.

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

function SendUSDC() {
  return (
    <OneSendUSDCWidget
      fromAddress="0xYourWallet..."
      chainId={8453}
      toAddress="0xRecipient..."
      amount="100.00"
      onSuccess={(tx) => console.log('USDC sent:', tx.transactionHash)}
    />
  );
}

sendTransaction API​

For full programmatic control, use the engine client's sendTransaction method.

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

function ProgrammaticSend() {
  const { engineClient } = useOneClient();

  const handleSend = async () => {
    const tx = await engineClient.sendTransaction({
      fromAddress: '0xYourWallet...',
      toAddress: '0xRecipient...',
      chainId: CHAIN_IDS.BASE,
      value: '0.5',
      currency: 'ETH',
    });

    console.log('Hash:', tx.transactionHash);
    console.log('Status:', tx.status);
    console.log('Explorer:', tx.explorerUrl);
  };

  return <button onClick={handleSend}>Send 0.5 ETH</button>;
}

Sending ERC-20 Tokens​

const tx = await engineClient.sendTransaction({
  fromAddress: '0xYourWallet...',
  toAddress: '0xRecipient...',
  chainId: CHAIN_IDS.BASE,
  value: '100',
  currency: 'USDC',
  contractAddress: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
});

EngineTransactionRequest Type​

interface EngineTransactionRequest {
  /** Sender wallet address. */
  fromAddress: string;

  /** Recipient wallet address. */
  toAddress: string;

  /** Chain ID for the transaction. */
  chainId: number;

  /** Amount to send as a decimal string (human-readable, not in wei). */
  value: string;

  /** Token symbol (e.g. 'ETH', 'USDC'). */
  currency: string;

  /** ERC-20 contract address. Required for non-native tokens. */
  contractAddress?: string;

  /** Optional raw calldata for advanced transactions. */
  data?: string;

  /** Optional gas limit override. */
  gasLimit?: string;

  /** Optional memo or note attached to the transaction. */
  memo?: string;
}

Transaction Buttons​

The SDK provides pre-built button components for common transaction actions.

OneTransactionButton​

A generic button that executes a transaction request on click.

import { OneTransactionButton } from '@one_deploy/sdk';
import type { EngineTransactionRequest } from '@one_deploy/sdk';

function TransactionButtonExample() {
  const txRequest: EngineTransactionRequest = {
    fromAddress: '0xYourWallet...',
    toAddress: '0xRecipient...',
    chainId: 8453,
    value: '0.1',
    currency: 'ETH',
  };

  return (
    <OneTransactionButton
      transaction={txRequest}
      label="Send 0.1 ETH"
      onSuccess={(tx) => console.log('Done:', tx.transactionHash)}
      onError={(err) => console.error('Failed:', err.message)}
    />
  );
}

OneSendETHButton​

A button pre-configured for sending ETH.

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

function SendETHButton() {
  return (
    <OneSendETHButton
      fromAddress="0xYourWallet..."
      toAddress="0xRecipient..."
      amount="0.05"
      chainId={8453}
      onSuccess={(tx) => console.log('ETH sent:', tx.transactionHash)}
    />
  );
}

OneApproveButton​

A button that sends an ERC-20 token approval transaction.

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

function ApproveUSDC() {
  return (
    <OneApproveButton
      ownerAddress="0xYourWallet..."
      spenderAddress="0xSpenderContract..."
      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      amount="1000"
      chainId={CHAIN_IDS.BASE}
      label="Approve USDC"
      onSuccess={(tx) => console.log('Approved:', tx.transactionHash)}
      onError={(err) => console.error('Approval failed:', err.message)}
    />
  );
}

Full Send Flow Example​

Combine the connect button, balance display, and send widget for a complete flow.

import { useState } from 'react';
import {
  OneConnectButton,
  OneWalletBalance,
  OneSendWidget,
  CHAIN_IDS,
} from '@one_deploy/sdk';
import type { ConnectedWallet } from '@one_deploy/sdk';

function SendFlow() {
  const [wallet, setWallet] = useState<ConnectedWallet | null>(null);

  if (!wallet) {
    return <OneConnectButton onConnect={setWallet} />;
  }

  return (
    <div>
      <OneWalletBalance
        walletAddress={wallet.address}
        chains={[CHAIN_IDS.BASE]}
      />
      <OneSendWidget
        fromAddress={wallet.address}
        chainId={CHAIN_IDS.BASE}
        onSuccess={(tx) => {
          console.log('Transaction confirmed:', tx.transactionHash);
        }}
      />
    </div>
  );
}

Next Steps​