TON-622: Crypto onramp

.gitignore

@@ -34,3 +34,4 @@ packages/walletkit-android-bridge/*.sh
 
 release-artifacts
 *.tgz
+apps/appkit-minter/Caddyfile

apps/appkit-minter/src/core/components/layout/app-router.tsx

@@ -11,7 +11,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { useWatchBalance, useWatchTransactions, useWatchJettons } from '@ton/appkit-react';
 import { toast } from 'sonner';
 
-import { MinterPage, StakingPage, SwapPage, SignMessagePage } from '@/pages';
+import { MinterPage, StakingPage, SwapPage, OnrampPage, SignMessagePage } from '@/pages';
 
 export const AppRouter: React.FC = () => {
     // Enable global real-time balance updates
@@ -52,6 +52,7 @@ export const AppRouter: React.FC = () => {
                 <Route path="/" element={<MinterPage />} />
                 <Route path="/swap" element={<SwapPage />} />
                 <Route path="/staking" element={<StakingPage />} />
+                <Route path="/onramp" element={<OnrampPage />} />
                 <Route path="/sign" element={<SignMessagePage />} />
                 <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>

apps/appkit-minter/src/core/components/layout/app-sidebar.tsx

@@ -7,7 +7,7 @@
  */
 
 import type React from 'react';
-import { Coins, ArrowLeftRight, Sparkles, BookOpen, Github, PenLine } from 'lucide-react';
+import { Coins, ArrowLeftRight, Sparkles, BookOpen, Github, PenLine, CreditCard } from 'lucide-react';
 import { Link, NavLink } from 'react-router-dom';
 
 import { AppLogo } from '../app-logo';
@@ -31,6 +31,7 @@ const NAV_LINKS: readonly { to: string; label: string; icon: React.ComponentType
     { to: '/', label: 'Mint', icon: Sparkles },
     { to: '/swap', label: 'Swap', icon: ArrowLeftRight },
     { to: '/staking', label: 'Staking', icon: Coins },
+    { to: '/onramp', label: 'Buy', icon: CreditCard },
     { to: '/sign', label: 'Sign Message', icon: PenLine },
 ];
 

apps/appkit-minter/src/core/components/layout/layout.tsx

@@ -41,7 +41,7 @@ export const Layout: React.FC<LayoutProps> = ({ title, children }) => {
 
                 <main className="flex-1 w-full max-w-3xl mx-auto px-4 py-4">{children}</main>
 
-                <footer className="text-center py-2 text-xs text-muted-foreground">
+                <footer className="text-center pt-2 pb-4 text-xs text-muted-foreground">
                     <p>Powered by AppKit & TonConnect</p>
                 </footer>
             </SidebarInset>

apps/appkit-minter/src/core/configs/app-kit.ts

@@ -17,6 +17,7 @@ import {
 import { createDeDustProvider } from '@ton/appkit/swap/dedust';
 import { createOmnistonProvider } from '@ton/appkit/swap/omniston';
 import { createTonstakersProvider } from '@ton/appkit/staking/tonstakers';
+import { createLayerswapProvider } from '@ton/appkit/crypto-onramp/layerswap';
 
 import { ENV_TON_API_KEY_TESTNET, ENV_TON_API_KEY_MAINNET } from '@/core/configs/env';
 
@@ -48,7 +49,12 @@ export const appKit = new AppKit({
             },
         }),
     ],
-    providers: [createOmnistonProvider(), createDeDustProvider(), createTonstakersProvider()],
+    providers: [
+        createOmnistonProvider(),
+        createDeDustProvider(),
+        createTonstakersProvider(),
+        createLayerswapProvider(),
+    ],
 });
 
 // TODO: replace in normal config

apps/appkit-minter/src/pages/index.ts

@@ -9,4 +9,5 @@
 export { MinterPage } from './minter-page';
 export { SwapPage } from './swap-page';
 export { StakingPage } from './staking-page';
+export { OnrampPage } from './onramp-page';
 export { SignMessagePage } from './sign-message-page';

apps/appkit-minter/src/pages/onramp-page.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type React from 'react';
+import { CryptoOnrampWidget } from '@ton/appkit-react';
+import type { CryptoOnrampToken, CryptoPaymentMethod } from '@ton/appkit-react';
+
+import { Card, Layout } from '@/core/components';
+
+const TOKENS: CryptoOnrampToken[] = [
+    // {
+    //     id: 'ton',
+    //     symbol: 'TON',
+    //     name: 'Toncoin',
+    //     decimals: 9,
+    //     address: '0x0000000000000000000000000000000000000000',
+    //     logo: 'https://asset.ston.fi/img/EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c/c8d21a3d93f9b574381e0a8d8f16d48b325dd8f54ce172f599c1e9d6c62f03f7',
+    // },
+    {
+        id: 'usdt-ton',
+        symbol: 'USDT',
+        name: 'Tether USD',
+        decimals: 6,
+        address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
+        logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
+    },
+];
+
+const PAYMENT_METHODS: CryptoPaymentMethod[] = [
+    // {
+    //     id: 'usdc-base',
+    //     symbol: 'USDC',
+    //     name: 'USD Coin',
+    //     network: 'Base',
+    //     networkId: '8453',
+    //     decimals: 6,
+    //     address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+    //     logo: 'https://assets.coingecko.com/coins/images/6319/standard/USDC.png?1769615602',
+    //     networkLogo: 'https://avatars.githubusercontent.com/u/108554348?s=280&v=4',
+    // },
+    // {
+    //     id: 'usdt-bsc',
+    //     symbol: 'USDT',
+    //     name: 'Tether',
+    //     network: 'BSC',
+    //     networkId: '56',
+    //     decimals: 18,
+    //     address: '0x55d398326f99059fF775485246999027B3197955',
+    //     logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
+    //     networkLogo: 'https://assets.coingecko.com/coins/images/825/standard/bnb-icon2_2x.png',
+    // },
+    {
+        id: 'usdt0-arbitrum',
+        symbol: 'USDT0',
+        name: 'Tether USD0',
+        chain: 'eip155:42161',
+        decimals: 6,
+        address: '0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9',
+        logo: 'https://cdn.layerswap.io/layerswap/currencies/usdt0.png',
+    },
+];
+
+export const OnrampPage: React.FC = () => {
+    return (
+        <Layout title="Buy">
+            <Card className="w-full max-w-[422px] mx-auto">
+                <CryptoOnrampWidget
+                    tokens={TOKENS}
+                    defaultTokenId="usdt-ton"
+                    paymentMethods={PAYMENT_METHODS}
+                    defaultMethodId="usdc-base"
+                />
+            </Card>
+        </Layout>
+    );
+};

apps/appkit-minter/src/pages/swap-page.tsx

@@ -15,6 +15,7 @@ import { Card, Layout } from '@/core/components';
 
 const TOKENS: AppkitUIToken[] = [
     {
+        id: 'ton',
         symbol: 'TON',
         name: 'Toncoin',
         decimals: 9,
@@ -23,6 +24,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c/c8d21a3d93f9b574381e0a8d8f16d48b325dd8f54ce172f599c1e9d6c62f03f7',
     },
     {
+        id: 'usdt',
         symbol: 'USD₮',
         name: 'Tether USD',
         decimals: 6,
@@ -32,6 +34,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
     },
     {
+        id: 'ston',
         symbol: 'STON',
         name: 'STON',
         decimals: 9,
@@ -40,6 +43,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO/7c9798ce1e64707fb4cb8f025d4060f66b386ed381b50498e3b88731cedeffe8',
     },
     {
+        id: 'xaut',
         symbol: 'XAUt0',
         name: 'Tether Gold',
         decimals: 6,
@@ -48,6 +52,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQA1R_LuQCLHlMgOo1S4G7Y7W1cd0FrAkbA10Zq7rddKxi9k/4aaaa7c30d7811bced81ded6bc116dcc82a78c6aea53d6012fd586a5826963ad',
     },
     {
+        id: 'usde',
         symbol: 'USDe',
         name: 'Ethena USDe',
         decimals: 6,
@@ -57,6 +62,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQAIb6KmdfdDR7CN1GBqVJuP25iCnLKCvBlJ07Evuu2dzP5f/dbcc67993cd4aad4845a97a4a9722c6cb618123997c8112c29d4932b2739c4cd',
     },
     {
+        id: 'tston',
         symbol: 'tsTON',
         name: 'Tonstakers TON',
         decimals: 9,
@@ -65,6 +71,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQC98_qAmNEptUtPc7W6xdHh_ZHrBUFpw5Ft_IzNU20QAJav/38f530facb209e4696b8aef17af51df94d16bd879926c517b07d25841da287b7',
     },
     {
+        id: 'gemston',
         symbol: 'GEMSTON',
         name: 'GEMSTON',
         decimals: 9,
@@ -73,6 +80,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQBX6K9aXVl3nXINCyPPL86C4ONVmQ8vK360u6dykFKXpHCa/c6ab1e58e3b9b58a7429d38b7feab731afae2f66dc301a6c42041fdf7e9d7c9c',
     },
     {
+        id: 'utya',
         symbol: 'UTYA',
         name: 'Utya',
         decimals: 9,
@@ -81,6 +89,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQBaCgUwOoc6gHCNln_oJzb0mVs79YG7wYoavh-o1ItaneLA/727e6cc971afdfa8ed9c698d0909eee9de344a0b6766ff5e4ddcc3323449d6f6',
     },
     {
+        id: 'weth',
         symbol: 'WETH',
         name: 'Wrapped Ether',
         decimals: 18,
@@ -99,7 +108,7 @@ export const SwapPage: React.FC = () => {
                     network={Network.mainnet()}
                     fiatSymbol="$"
                     defaultFromSymbol="TON"
-                    defaultToSymbol="USD₮"
+                    defaultToSymbol="USDT"
                 />
             </Card>
         </Layout>

apps/demo-wallet-native/src/features/send/components/token-list-sheet/token-list-sheet.tsx

@@ -63,7 +63,7 @@ export const TokenListSheet: FC<TokenListSheetProps> = ({ isOpen, onClose, onSel
                     </ActiveTouchAction>
                 </View>
 
-                <ActiveTouchAction onPress={handleSelectTon} style={styles.tokenItem}>
+                <ActiveTouchAction onPress={handleSelectTon} style={styles.currencyItem}>
                     <View style={styles.tokenInfo}>
                         <AppLogo />
                         <View style={styles.tokenDetails}>
@@ -89,7 +89,7 @@ export const TokenListSheet: FC<TokenListSheetProps> = ({ isOpen, onClose, onSel
                         <ActiveTouchAction
                             key={address}
                             onPress={() => handleSelectJetton(jetton)}
-                            style={styles.tokenItem}
+                            style={styles.currencyItem}
                         >
                             <View style={styles.tokenInfo}>
                                 {image ? (
@@ -143,7 +143,7 @@ const styles = StyleSheet.create(({ sizes, colors }, runtime) => ({
         top: 0,
         right: 12,
     },
-    tokenItem: {
+    currencyItem: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',

demo/examples/src/appkit/actions/onramp/build-onramp-url.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { AppKit } from '@ton/appkit';
+import { buildOnrampUrl, getOnrampQuote } from '@ton/appkit/onramp';
+
+export const buildOnrampUrlExample = async (appKit: AppKit) => {
+    // SAMPLE_START: BUILD_ONRAMP_URL
+    const quote = await getOnrampQuote(appKit, {
+        fiatCurrency: 'USD',
+        cryptoCurrency: 'TON',
+        amount: '100',
+    });
+
+    const url = await buildOnrampUrl(appKit, {
+        quote,
+        userAddress: 'UQ...wallet-address...',
+    });
+    console.log('Onramp URL:', url);
+    // SAMPLE_END: BUILD_ONRAMP_URL
+};

demo/examples/src/appkit/actions/onramp/get-crypto-onramp-provider.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { AppKit } from '@ton/appkit';
+import { getCryptoOnrampProvider } from '@ton/appkit';
+
+export const getCryptoOnrampProviderExample = (appKit: AppKit) => {
+    // SAMPLE_START: GET_CRYPTO_ONRAMP_PROVIDER
+    const provider = getCryptoOnrampProvider(appKit, { id: 'layerswap' });
+    console.log('Crypto onramp provider:', provider.providerId);
+    // SAMPLE_END: GET_CRYPTO_ONRAMP_PROVIDER
+};

demo/examples/src/appkit/actions/onramp/get-crypto-onramp-providers.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { AppKit } from '@ton/appkit';
+import { getCryptoOnrampProviders } from '@ton/appkit';
+
+export const getCryptoOnrampProvidersExample = (appKit: AppKit) => {
+    // SAMPLE_START: GET_CRYPTO_ONRAMP_PROVIDERS
+    const providers = getCryptoOnrampProviders(appKit);
+    console.log(
+        'Registered crypto onramp providers:',
+        providers.map((p) => p.providerId),
+    );
+    // SAMPLE_END: GET_CRYPTO_ONRAMP_PROVIDERS
+};

demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { AppKit } from '@ton/appkit';
+import { getOnrampQuote } from '@ton/appkit/onramp';
+
+export const getOnrampQuoteExample = async (appKit: AppKit) => {
+    // SAMPLE_START: GET_ONRAMP_QUOTE
+    const quote = await getOnrampQuote(appKit, {
+        fiatCurrency: 'USD',
+        cryptoCurrency: 'TON',
+        amount: '100',
+        isFiatAmount: true,
+    });
+    console.log('Onramp Quote:', quote);
+    // SAMPLE_END: GET_ONRAMP_QUOTE
+};