Skip to main content

QR Code Scanning

The ONE SDK provides the parseQRCode utility for parsing QR code data into structured results. It supports EIP-681 payment URIs, WalletConnect URIs, and plain wallet addresses.

React Native Entry Point

The parseQRCode utility is exported from the React Native entry point (@one_deploy/sdk/react-native). It is a pure function with no UI dependencies and can be used with any QR scanning library.

parseQRCode​

Parse raw QR code string data into a typed result.

import { parseQRCode } from '@one_deploy/sdk/react-native';

const result = parseQRCode('ethereum:0x1234...abcd@8453?value=1e17');

console.log(result.type);     // 'payment'
console.log(result.address);  // '0x1234...abcd'
console.log(result.chainId);  // 8453
console.log(result.value);    // '0.1'

Function Signature​

function parseQRCode(data: string): QRScanResult;

Parameters:

ParameterTypeDescription
datastringRaw string data from a QR code scan.

Returns: QRScanResult

QRScanResult Type​

The result is a discriminated union based on the type field.

type QRScanResult =
  | QRPaymentResult
  | QRAddressResult
  | QRWalletConnectResult
  | QRUnknownResult;

interface QRPaymentResult {
  type: 'payment';
  /** Recipient wallet address. */
  address: string;
  /** Chain ID parsed from the URI, or null if not specified. */
  chainId: number | null;
  /** Payment amount as a decimal string, or null if not specified. */
  value: string | null;
  /** Token symbol or contract address for ERC-20 transfers. */
  token: string | null;
  /** Token contract address if this is an ERC-20 transfer. */
  contractAddress: string | null;
  /** Additional function parameters from the URI. */
  params: Record<string, string>;
  /** The raw input string. */
  raw: string;
}

interface QRAddressResult {
  type: 'address';
  /** The parsed wallet address. */
  address: string;
  /** The raw input string. */
  raw: string;
}

interface QRWalletConnectResult {
  type: 'walletconnect';
  /** WalletConnect URI for session pairing. */
  uri: string;
  /** WalletConnect protocol version (1 or 2). */
  version: 1 | 2;
  /** The raw input string. */
  raw: string;
}

interface QRUnknownResult {
  type: 'unknown';
  /** The raw input string that could not be parsed. */
  raw: string;
}

EIP-681 Payment URI Parsing​

EIP-681 defines a standard format for payment URIs on Ethereum-compatible chains. The parseQRCode function fully supports this standard.

Native Token Payment​

import { parseQRCode } from '@one_deploy/sdk/react-native';

// ethereum:0x1234...abcd@8453?value=1e17
const result = parseQRCode('ethereum:0x1234567890abcdef1234567890abcdef12345678@8453?value=1e17');

if (result.type === 'payment') {
  console.log(result.address);        // '0x1234567890abcdef1234567890abcdef12345678'
  console.log(result.chainId);        // 8453
  console.log(result.value);          // '0.1' (converted from 1e17 wei)
  console.log(result.token);          // null (native token)
  console.log(result.contractAddress); // null
}

ERC-20 Token Transfer​

import { parseQRCode } from '@one_deploy/sdk/react-native';

// EIP-681 ERC-20 transfer URI
const uri = 'ethereum:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913@8453/transfer?address=0xRecipient&uint256=50000000';

const result = parseQRCode(uri);

if (result.type === 'payment') {
  console.log(result.contractAddress); // '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
  console.log(result.token);          // 'USDC' (resolved from known contract)
  console.log(result.value);          // '50.0' (converted using 6 decimals)
  console.log(result.chainId);        // 8453
  console.log(result.params.address); // '0xRecipient'
}

Plain Address​

import { parseQRCode } from '@one_deploy/sdk/react-native';

const result = parseQRCode('0x1234567890abcdef1234567890abcdef12345678');

if (result.type === 'address') {
  console.log(result.address); // '0x1234567890abcdef1234567890abcdef12345678'
}

WalletConnect URI Support​

The parseQRCode function detects WalletConnect pairing URIs (both v1 and v2).

WalletConnect v2​

import { parseQRCode } from '@one_deploy/sdk/react-native';

const wcUri = 'wc:a]b1c2d3e4f5@2?relay-protocol=irn&symKey=abc123...';
const result = parseQRCode(wcUri);

if (result.type === 'walletconnect') {
  console.log(result.version); // 2
  console.log(result.uri);    // the full WC URI for session pairing
}

WalletConnect v1​

import { parseQRCode } from '@one_deploy/sdk/react-native';

const wcUri = 'wc:sessionId@1?bridge=https://bridge.example.com&key=abc123';
const result = parseQRCode(wcUri);

if (result.type === 'walletconnect') {
  console.log(result.version); // 1
  console.log(result.uri);    // the full WC URI
}

Integration Example​

A complete example showing how to integrate parseQRCode with a camera-based QR scanner and route the result to the appropriate action.

import { useState } from 'react';
import { parseQRCode } from '@one_deploy/sdk/react-native';
import { useOneClient, CHAIN_IDS } from '@one_deploy/sdk';
import type { QRScanResult } from '@one_deploy/sdk';

function QRScanHandler() {
  const { engineClient } = useOneClient();
  const [scanResult, setScanResult] = useState<QRScanResult | null>(null);

  // Called by your QR scanner library when a code is detected
  const handleScan = (rawData: string) => {
    const result = parseQRCode(rawData);
    setScanResult(result);
    routeResult(result);
  };

  const routeResult = async (result: QRScanResult) => {
    switch (result.type) {
      case 'payment': {
        // Navigate to send screen with pre-filled data
        console.log('Payment request detected');
        console.log('To:', result.address);
        console.log('Amount:', result.value);
        console.log('Chain:', result.chainId);

        if (result.value && result.chainId) {
          const tx = await engineClient.sendTransaction({
            fromAddress: '0xMyWallet...',
            toAddress: result.address,
            chainId: result.chainId,
            value: result.value,
            currency: result.token ?? 'ETH',
            contractAddress: result.contractAddress ?? undefined,
          });
          console.log('Sent:', tx.transactionHash);
        }
        break;
      }

      case 'address': {
        // Navigate to send screen with only the address pre-filled
        console.log('Address scanned:', result.address);
        break;
      }

      case 'walletconnect': {
        // Initiate WalletConnect session pairing
        console.log('WalletConnect v' + result.version);
        console.log('URI:', result.uri);
        break;
      }

      case 'unknown': {
        console.warn('Unrecognized QR code:', result.raw);
        break;
      }
    }
  };

  return (
    <div>
      {/* Your QR scanner component goes here */}
      {/* <QRScanner onScan={handleScan} /> */}

      {scanResult && (
        <div>
          <p>Scanned: {scanResult.type}</p>
          <pre>{JSON.stringify(scanResult, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

Next Steps​