Quickstart
Add a cross-chain deposit button to a React app. Your users pay from any of 24 chains. Your app receives the token you name.
Before you start
- A React 18 or later app (Next.js, Vite, Remix all work).
- An address your app controls on the chain you want to receive on. For USDC on Optimism, that’s an 0x address.
That’s all. There’s no API key to request and no backend to run.
1Install the SDK
$ npm install uniport-sdk2Add the button
Render UniportButton wherever your app asks for funds. This is the whole integration:
1import { UniportButton } from "uniport-sdk";23export function DepositAction() {4 return (5 <UniportButton6 recipient="0x..."7 destinationToken="optimismUSDC"8 label="Deposit"9 />10 );11}
Nothing else to configure. The SDK talks to Uniport’s hosted backend, which handles quotes, deposit addresses and status. No keys live in your client.
3Set your values
Replace the three props with your own:
| Prop | Set it to |
|---|---|
| recipient | Your address on the destination chain. Funds settle here, so it must be valid for that chain. |
| destinationToken | What your app receives, written {chain}{SYMBOL}: optimismUSDC, baseUSDC, suiUSDC. All 63 tokens |
| label | The button text. Optional; defaults to Pay with Crypto. |
4Try a deposit
Click the button in your app. Your users go through four steps, all inside the modal:
- 01
Pick a chain
Where their funds are now: Solana, Bitcoin, Base…
- 02
Pick a token
Any token Uniport supports on that chain.
- 03
Enter an amount
Uniport returns an exact quote.
- 04
Send exactly that
To one deposit address, by QR or copy. Funds settle to your recipient.
Deposits are real transactions. Try your first one with a small amount, from a chain you already hold funds on.