SendTransactionQR

The SendTransactionQR component is a component that allows dApp to send transaction.

SendTransaction QR

Basic Usage

import { SendTransactionQR, SendTransactionResultType } from 'zigap-utils';

const App = () => {
  const [result, setResult] = useState<SendTransactionResultType | null>(null);

  return (
    <div>
      <SendTransactionQR
        dapp='My Awesome Dapp'
        url='https://myapp.com'
        availableNetworks='v2xphere'
        validSeconds={600}
        transaction={{
          type: 0,
          to: '0x1234567890123456789012345678901234567890',
          value: '1000000000000000000', // 1 XP
          gasLimit: '21000',
          gasPrice: '1000000000',
        }}
        onReceive={({ status, result }) => {
          if (status === 'SUCCESS') {
            console.log('Transaction Complete!', result);
            setResult(result as SendTransactionResultType);
          }
        }}
      />
    </div>
  );
};

Props

Prop	Type	Required	Default	Description
dapp	string	✅	-	Name of the dApp to use
url	string	✅	-	The url of dApp to connect
availableNetworks	('binance' \| 'ethereum' \| 'v2xphere' \| 'v3xphere')	✅	-	List of supported networks in dApp (single value)
validSeconds	number	✅	-	QR code valid seconds
transaction	TransactionType	✅	-	Transaction configuration
onReceive	(res) => void	optional	-	Callback
icon	string	optional	-	Your dApp icon url to be displayed.
processingMark	ProcessingMarkType	optional	{ type: 'DEFAULT'}	How to show the QR image when it's being processed. This prop is optional and the default value is { type: 'DEFAULT'}
qrDomain	string	optional	https://zigap.io	QR domain

Supported Networks

• binance : bsc

• ethereum : eth

• v2xphere : xp

• v3xphere : xpt

TransactionType

// Type 0: Legacy (pre-EIP-2718)
interface TransactionType0 {
  type: 0 | '0x0';
  to: string;
  data?: string;
  value: string;
  gasLimit: string;
  gasPrice: string;
  chainId?: number;
}

// Type 1: EIP-2930 (access list)
interface TransactionType1 {
  type: 1 | '0x1';
  to: string;
  data?: string;
  value: string;
  gasLimit: string;
  gasPrice: string;
  accessList?: AccessList;
  chainId?: number;
}

// Type 2: EIP-1559 (dynamic fees)
interface TransactionType2 {
  type: 2 | '0x2';
  to: string;
  data?: string;
  value: string;
  gasLimit: string;
  maxFeePerGas: string;
  maxPriorityFeePerGas: string;
  chainId?: number;
}

type TransactionType = TransactionType0 | TransactionType1 | TransactionType2;

SendTransactionResultType

interface SendTransactionResultType {
  txHash: string;
  status: 0 | 1; // 0 : fail , 1 : success
  error: string;
}

Status Values

Type	Description
SUCCESS	Transaction successful
REQUEST	Request in progress
ERROR	Error occurred

Common Style Props

Common style options available for all QR components

Props

Prop	Type	Default	Description
size	number	128	canvas width of QR code
bgColor	string	#fff	background color
fgColor	string	#000	foreground color
style	CSSProperties	-	custom css style
isShowLogo	boolean	false	Zigap logo in the middle of the QR code
logoSize	number	30	logo width & height

Example

<LoginQR

  // ... other props

  size={200}
  bgColor='#ffffff'
  fgColor='#000000'
  isShowLogo={true}
  logoSize={40}
  style={{ borderRadius: '8px' }}
/>

Processing Mark Options

Configure how to display during processing.

Options

Type	Description
DEFAULT	Shows default "processing..." message
CUSTOM	Allows custom React component
NONE	No visual indicator

Custom Component Example

<SendTransactionQR

  // ... other props

    processingMark={{
    type: 'CUSTOM',
    component: (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}
      >
        <div className='spinner'></div>
        <span>Processing payment...</span>
      </div>
    ),
  }}
/>

Expire Configuration

Configure expiration time and type.

Example

// No expiration
expire={{ type: 'NONE' }}

// Fixed expiration time
expire={{ type: 'FIX', seconds: 3600 }}

// Extendable expiration time
expire={{ type: 'EXTEND', seconds: 3600 }}