UniportButton
A button that opens Uniport’s deposit modal. Render it anywhere in a React tree. It brings its own modal and styles.
Usage
1import { UniportButton } from "uniport-sdk";23export function DepositAction() {4 return (5 <UniportButton6 recipient="0x..."7 destinationToken="optimismUSDC"8 label="Deposit"9 />10 );11}
Props
Only recipient and destinationToken are required.
| Prop | Type | Default | Description |
|---|---|---|---|
| recipient required | string | — | Your address on the destination chain. Funds settle here. |
| destinationToken required | string | — | What your app receives, as {chain}{SYMBOL}. See destination tokens. |
| label | string | "Pay with Crypto" | The button text. |
| amount | string | — | An exact amount to receive, in destination token units. Omit it to let the payer choose. |
| refundAddress | string | — | Prefills the payer’s refund address on their source chain. |
| theme | "light" | "dark" | "light" | Theme for the button and modal. |
| variant | "default" | "compact" | "outline" | "default" | Button style. |
| disabled | boolean | false | Disables the button. |
| className | string | — | Class name for your own styles. |
| onSuccess | (result) => void | — | Called when the payment completes, with { txHash, amount }. |
| onError | (error) => void | — | Called when the payment fails. |
| onOpenChange | (open) => void | — | Called when the modal opens or closes. |
Fixed amounts
With amount, the modal asks for exactly that much of your destination token. The payer’s quote is rounded up only when the increase is 0.25% or less.
Without it, the payer enters how much they send and your app receives the quoted output.
Refund address
If a payment can’t complete, funds go back to the payer’s refund address on the chain they paid from. The payer enters it in the modal, or you prefill it with refundAddress.
EVM chains only: a blank refund address defaults to Uniport’s address, uniport.eth. On Solana, Sui, Bitcoin and other non-EVM chains the payer has to enter one.
Destination tokens
Pass any of these as destinationToken. Stablecoins are the common choice.
| Chain | destinationToken | Symbol | |
|---|---|---|---|
 Optimism | optimismUSDC | USDC | |
 Base | baseUSDC | USDC | |
 Arbitrum | arbitrumUSDC | USDC | |
 Ethereum | ethereumUSDC | USDC | |
 Solana | solanaUSDC | USDC | |
 Sui | suiUSDC | USDC | |
 Polygon | polygonUSDC | USDC | |
 Avalanche | avalancheUSDC | USDC | |
 BNB Chain | bscUSDC | USDC | |
 NEAR | nearUSDC | USDC | |
 Stellar | stellarUSDC | USDC | Memo + trustline |
 Tron | tronUSDT | USDT |