Skip to content

Commit 32f30c0

Browse files
rohit-710rohit-710
authored
Merge pull request #614 from reown-com/deposit-with-exchange
Docs Update: Adding a Deposit with Exchange doc page
2 parents cf2cd1d + 51d8a9c commit 32f30c0

File tree

10 files changed

+336
-5
lines changed

10 files changed

+336
-5
lines changed

‎.cspell.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"nosocial", "bitget", "leather", "binance", "uniswap", "safepal", "bybit", "phantom", "ledger", "timeless-x", "safe", "zerion", "oneinch", "crypto-com", "imtoken", "kraken", "ronin", "robinhood", "exodus", "argent", "tokenpocket", "Contractaddress",
4040
"executionreverted", "FATF", "VASP", "LLMSTXT", "Frontmatter", "CASP", "DKMS", "hydradx", "phala", "astar", "mangata", "polkadotjs", "Dogecoin", "Blockbook", "vuejs", "xsmall", "rgba", "mintlify", "filteredwallets",
4141
"tnum","minmax","toolkits", "autoplay", "Litoshi", "Litoshis", "encryptor's", "Everscale", "Bitcore", "satoshis", "Parachain", "Bitcore", "walletlist", "Userflow", "retryable", "USDS", "Arbitrum", "Wolfswap", "Halborn", "Pentest", "Spearbit", "valtio",
42-
"reshare", "microstacks", "Prebuild", "APKT", "offchain"
42+
"reshare", "microstacks", "Prebuild", "APKT", "offchain", "Bitgpt", "Restaking", "Synthetix"
4343
]
4444
}
4545

‎appkit/javascript/payments/deposit-with-exchange.mdx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Coinbase and Binance (with more exchanges coming soon). Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.
2+
3+
## Quickstart
4+
5+
This feature will start working as soon as your team is on the allowed-list. Please contact sales@reown.com to get started.
6+
7+
<Warning>
8+
Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
9+
</Warning>
10+
11+
Clicking on Fund your wallet will show the modal below:
12+
<img src="/images/fundDepositWithExchange.jpg" alt="Funding your wallet with Deposit with Exchange" />
13+
14+
## Start Deposit with Exchange from a button
15+
16+
### Install the library
17+
18+
<CodeGroup>
19+
20+
```bash npm
21+
npm install @reown/appkit-pay
22+
```
23+
24+
```bash Yarn
25+
yarn add @reown/appkit-pay
26+
```
27+
28+
```bash Bun
29+
bun a @reown/appkit-pay
30+
```
31+
32+
```bash pnpm
33+
pnpm add @reown/appkit-pay
34+
```
35+
</CodeGroup>
36+
37+
### Usage
38+
Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.
39+
```ts
40+
41+
import { baseUSDC, pay } from '@reown/appkit-pay';
42+
```
43+
44+
Get the address of the connected wallet using the `subscribeAccount` function.
45+
```ts
46+
let address = null;
47+
const appKit = createAppKit({...}); // please check our docs or examples to understand how to create the AppKit instance
48+
appKit.subscribeAccount(state => {
49+
address = state['accountState']?.address;
50+
})
51+
```
52+
53+
In order to run the deposit, use the function `pay`. This function receives three parameters.
54+
55+
```ts
56+
// pay function returns a PaymentResult object
57+
const result = await pay({
58+
recipient: address,
59+
amount: 0.0001,
60+
paymentAsset: baseUSDC
61+
});
62+
63+
if (result.success) {
64+
console.log("Payment successful: "+ result.result);
65+
} else {
66+
console.error("Payment error: "+ result.error);
67+
}
68+
```
69+
70+
## Supported Networks and Assets
71+
72+
For a complete list of supported networks and assets across different exchanges (Coinbase, Binance), please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-exchange#networks-and-assets-supported) section in our Pay with Exchange documentation.
73+
74+
## Assets Configuration
75+
76+
For the moment, AppKit Pay has pre-configured these assets:
77+
- baseETH, baseSepoliaETH, and baseUSDC
78+
- ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
79+
- ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT
80+
81+
```ts
82+
import { baseETH } from '@reown/appkit-pay'
83+
```
84+
85+
For custom assets, you can create a paymentAsset object with all the information:
86+
87+
```ts
88+
// Configure the paymentAsset
89+
const paymentAssetDetails = {
90+
network: 'eip155:8453', // Base Mainnet
91+
asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
92+
metadata: {
93+
name: 'Ethereum', // Or 'USD Coin'
94+
symbol: 'ETH', // Or 'USDC'
95+
decimals: 18 // Or 6 for USDC
96+
}
97+
};
98+
```

‎appkit/next/payments/deposit-with-exchange.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Deposit with Exchange - Next.js
3+
sidebarTitle: Deposit with Exchange
4+
---
5+
6+
import AppKitPayDeposit from "/snippets/appkit/shared/appkit-pay-deposit-react.mdx";
7+
8+
<AppKitPayDeposit />

‎appkit/payments/deposit-with-exchange.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Deposit with Exchange
3+
description: Let users seamlessly fund their connected wallets directly from their exchange accounts or another wallet.
4+
---
5+
6+
**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like **Coinbase** and **Binance** (with more exchanges coming soon).
7+
Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.
8+
9+
## Why Deposit with Exchange?
10+
11+
- **Instant access to existing funds:** No need for fiat payments, KYC, or new providers. Users move crypto they already own.
12+
- **Frictionless experience:** Just a few clicks to deposit directly from an exchange into their wallet.
13+
- **Perpetually available:** Reown establishes direct agreements with partner exchanges to ensure perpetual availability.
14+
- **Security-first:** All activity flows directly through the exchange - no third-party access at any point.
15+
- **Full customization:** Deposit with Exchange is provided through a headless SDK to ensure flexibility for you and your users.
16+
- **Boost activation and retention:** A smoother onboarding and funding flow leads to better conversion, more repeat usage, less drop-offs.
17+
18+
<Note>
19+
**Onramp.money, Rootstock Collective, Bitgpt.xyz**, and a dozen other teams use the Pay/Deposit with Exchange feature already.
20+
</Note>
21+
22+
23+
## How does it work?
24+
25+
1. User connects a wallet through Reown AppKit.
26+
2. After user realizes that their wallet is short on funds, the user selects "Transfer or Deposit with Exchange" as the funding method.
27+
3. User chooses an exchange account and token.
28+
4. User completes the deposit/transfer flow via the CEX's authorization.
29+
5. The funds appear in the connected wallet and the user can proceed with their intended action.
30+
31+
<video
32+
autoPlay
33+
loop
34+
controls
35+
src="/images/deposit-with-exchange.mp4"
36+
></video>
37+
38+
39+
## Supported tokens, networks, and platforms
40+
41+
Currently, AppKit Deposit with Exchange supports the following assets on the following networks:
42+
43+
**Asset -> Network**
44+
45+
**Coinbase**
46+
- USDC → Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
47+
- USDT → Ethereum
48+
49+
**Binance**
50+
- USDC → Ethereum, Optimism, Arbitrum, Base, Polygon, Solana
51+
- USDT → Ethereum, Optimism, Arbitrum, Polygon, Solana
52+
- Native Solana
53+
54+
**Coming soon**
55+
- Robinhood, Kraken, Bybit, Bitget, OKX, plus native gas & stablecoins.
56+
57+
---
58+
**Both EVM and Solana networks and their assets can be added, subject to exchange compatibility.**
59+
60+
For access to additional networks or assets, please contact sales@reown.com.
61+
62+
**Platforms & SDKs**
63+
- **Web**: React, Next.js, Vue, JavaScript SDK
64+
- **Mobile and Native Apps**: Supported via deep link + QR
65+
66+
## Use cases
67+
68+
### Dapps (DeFi, Staking, Restaking)
69+
70+
- Enable users to fund → stake in one smooth flow (early-access).
71+
- Avoid drop-off caused by slow fiat onramps or KYC barriers.
72+
73+
**Examples**: Lido, dYdX, Synthetix, Aave.
74+
75+
### Non-Custodial Wallets
76+
77+
- In-app top-ups from supported exchanges.
78+
- No fiat, bridging, or browser extension hurdles.
79+
- Faster first transaction, better onboarding, reduced support overhead.
80+
81+
**Examples**: Trust Wallet, Frame, Core, Rainbow.
82+
83+
## Get Started
84+
85+
<CardGroup cols={2}>
86+
<Card title="React" icon="react" href="/appkit/react/payments/deposit-with-exchange">
87+
Get started with AppKit Deposit with Exchange and self-custodial wallets in React.
88+
</Card>
89+
90+
<Card
91+
title="Next.js"
92+
icon="square-n"
93+
href="/appkit/next/payments/deposit-with-exchange"
94+
>
95+
Get started with AppKit Deposit with Exchange and self-custodial wallets in Next.js.
96+
</Card>
97+
98+
<Card
99+
title="Vue"
100+
icon="vuejs"
101+
href="/appkit/vue/payments/deposit-with-exchange"
102+
>
103+
Get started with AppKit Deposit with Exchange and self-custodial wallets in Vue.
104+
</Card>
105+
106+
<Card title="JavaScript" icon="js" href="/appkit/javascript/payments/deposit-with-exchange">
107+
Get started with AppKit Deposit with Exchange and self-custodial wallets in JavaScript.
108+
</Card>
109+
</CardGroup>

‎appkit/react/payments/deposit-with-exchange.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Deposit with Exchange - React
3+
sidebarTitle: Deposit with Exchange
4+
---
5+
6+
import AppKitPayDeposit from "/snippets/appkit/shared/appkit-pay-deposit-react.mdx";
7+
8+
<AppKitPayDeposit />

‎appkit/vue/payments/deposit-with-exchange.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Deposit with Exchange - Vue
3+
sidebarTitle: Deposit with Exchange
4+
---
5+
6+
import AppKitPayDeposit from "/snippets/appkit/shared/appkit-pay-deposit-react.mdx";
7+
8+
<AppKitPayDeposit />

‎docs.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@
252252
"pages": [
253253
"appkit/payments/overview",
254254
"appkit/payments/pay-with-exchange",
255+
"appkit/payments/deposit-with-exchange",
255256
"appkit/payments/one-click-checkout",
256257
"appkit/payments/subscriptions"
257258
]
@@ -362,7 +363,8 @@
362363
{
363364
"group": "Payments",
364365
"pages": [
365-
"appkit/react/payments/pay-with-exchange"
366+
"appkit/react/payments/pay-with-exchange",
367+
"appkit/react/payments/deposit-with-exchange"
366368
]
367369
},
368370
{
@@ -422,7 +424,8 @@
422424
{
423425
"group": "Payments",
424426
"pages": [
425-
"appkit/next/payments/pay-with-exchange"
427+
"appkit/next/payments/pay-with-exchange",
428+
"appkit/next/payments/deposit-with-exchange"
426429
]
427430
},
428431
{
@@ -482,7 +485,8 @@
482485
{
483486
"group": "Payments",
484487
"pages": [
485-
"appkit/vue/payments/pay-with-exchange"
488+
"appkit/vue/payments/pay-with-exchange",
489+
"appkit/vue/payments/deposit-with-exchange"
486490
]
487491
},
488492
{
@@ -541,7 +545,8 @@
541545
{
542546
"group": "Payments",
543547
"pages": [
544-
"appkit/javascript/payments/pay-with-exchange"
548+
"appkit/javascript/payments/pay-with-exchange",
549+
"appkit/javascript/payments/deposit-with-exchange"
545550
]
546551
},
547552
{

‎images/deposit-with-exchange.mp4‎

4.32 MB
Binary file not shown.

‎images/fundDepositWithExchange.jpg‎

59.4 KB
Loading

‎snippets/appkit/shared/appkit-pay-deposit-react.mdx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
**Deposit with Exchange** gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Coinbase and Binance (with more exchanges coming soon). Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.
2+
3+
## Quickstart
4+
5+
This feature will start working as soon as your team is on the allowed-list. Please, contact sales@reown.com to get started.
6+
7+
<Warning>
8+
Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven't done so, please refer to the [Reown AppKit docs](/appkit/overview#quickstart).
9+
</Warning>
10+
11+
Clicking on Fund your wallet will show the modal below:
12+
<img src="/images/fundDepositWithExchange.jpg" alt="Funding your wallet with Deposit with Exchange" />
13+
14+
## Start Deposit with Exchange from a button
15+
16+
### Install the library
17+
18+
<CodeGroup>
19+
20+
```bash npm
21+
npm install @reown/appkit-pay
22+
```
23+
24+
```bash Yarn
25+
yarn add @reown/appkit-pay
26+
```
27+
28+
```bash Bun
29+
bun a @reown/appkit-pay
30+
```
31+
32+
```bash pnpm
33+
pnpm add @reown/appkit-pay
34+
```
35+
</CodeGroup>
36+
37+
### Usage
38+
Import the `baseUSDC` asset, the `pay` function and the `useAppKitAccount` hook to get the address of the connected wallet.
39+
```ts
40+
41+
import { baseUSDC, pay } from '@reown/appkit-pay';
42+
import { useAppKitAccount } from '@reown/appkit/react'
43+
```
44+
45+
Get the address of the connected wallet using the `useAppKitAccount` hook. You can also check if the user is connected using the `isConnected` boolean.
46+
```ts
47+
const { address, isConnected } = useAppKitAccount()
48+
```
49+
50+
In order to run the deposit, use the function `pay`. This function receives three parameters.
51+
52+
```ts
53+
// pay function returns a PaymentResult object
54+
const result = await pay({
55+
recipient: address,
56+
amount: 0.0001,
57+
paymentAsset: baseUSDC
58+
});
59+
60+
if (result.success) {
61+
console.log("Payment successful: "+ result.result);
62+
} else {
63+
console.error("Payment error: "+ result.error);
64+
}
65+
```
66+
67+
## Supported Networks and Assets
68+
69+
For a complete list of supported networks and assets across different exchanges (Coinbase, Binance), please refer to the [Networks and Assets Supported](/appkit/payments/pay-with-exchange#networks-and-assets-supported) section in our Pay with Exchange documentation.
70+
71+
## Assets Configuration
72+
73+
For the moment, AppKit Pay has pre-configured these assets:
74+
- baseETH, baseSepoliaETH, and baseUSDC
75+
- ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
76+
- ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT
77+
78+
```ts
79+
import { baseETH } from '@reown/appkit-pay'
80+
```
81+
82+
For custom assets, you can create a paymentAsset object with all the information:
83+
84+
```ts
85+
// Configure the paymentAsset
86+
const paymentAssetDetails = {
87+
network: 'eip155:8453', // Base Mainnet
88+
asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
89+
metadata: {
90+
name: 'Ethereum', // Or 'USD Coin'
91+
symbol: 'ETH', // Or 'USDC'
92+
decimals: 18 // Or 6 for USDC
93+
}
94+
};
95+
```

0 commit comments

Comments
 (0)