TON-622: Crypto onramp

.changeset/crypto-onramp-async-metadata.md

@@ -0,0 +1,18 @@
+---
+'@ton/walletkit': major
+'@ton/appkit': major
+'@ton/appkit-react': major
+---
+
+Make crypto-onramp provider `getMetadata()` async.
+
+- `@ton/walletkit`:
+    - `CryptoOnrampProvider.getMetadata()` and `CryptoOnrampProviderInterface.getMetadata()` now return `Promise<CryptoOnrampProviderMetadata>`. Concrete `DecentCryptoOnrampProvider` and `LayerswapCryptoOnrampProvider` updated.
+    - `CryptoOnrampManager` gains `getMetadata(providerId?)` proxy with the existing `try/catch + log.debug` pattern.
+    - `getSupportedNetworks()` left synchronous — the shared `DefiProvider` base method is unchanged in this branch.
+- `@ton/appkit`:
+    - New action `getCryptoOnrampProviderMetadata` and matching TanStack query (`getCryptoOnrampProviderMetadataQueryOptions`).
+- `@ton/appkit-react`:
+    - New hook `useCryptoOnrampProviderMetadata` (wagmi-style `UseQueryResult`).
+    - `CryptoOnrampContext` exposes `providersMetadata` (`Record<providerId, metadata | undefined>`) and `isProvidersMetadataLoading`. The settings modal renders providers with per-row `providerId` fallback while metadata resolves — one slow/broken provider does not block the others. The selected provider's name shows a skeleton in the info row until its metadata arrives.
+    - `OptionSwitcher` gains a `loading` prop that replaces the trigger content with a `Skeleton`.

.gitignore

@@ -39,3 +39,4 @@ release-artifacts
 *.tgz
 apps/appkit-minter/Caddyfile
 Caddyfile
+.superset

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

@@ -12,7 +12,7 @@ import { useWatchBalance, useWatchTransactions, useWatchJettons, useBalance } fr
 import { middleEllipsis } from '@ton/appkit';
 import { toast } from 'sonner';
 
-import { JettonsPage, MinterPage, NftsPage, StakingPage, SwapPage } from '@/pages';
+import { CryptoOnrampPage, JettonsPage, MinterPage, NftsPage, StakingPage, SwapPage } from '@/pages';
 
 export const AppRouter: React.FC = () => {
     // Set balance refetch interval to 20 seconds
@@ -58,6 +58,7 @@ export const AppRouter: React.FC = () => {
                 <Route path="/nfts" element={<NftsPage />} />
                 <Route path="/swap" element={<SwapPage />} />
                 <Route path="/staking" element={<StakingPage />} />
+                <Route path="/crypto-onramp" element={<CryptoOnrampPage />} />
                 <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
         </BrowserRouter>

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

@@ -7,7 +7,17 @@
  */
 
 import { TonConnectButton, useAddress } from '@ton/appkit-react';
-import { ArrowLeftRight, BookOpen, Coins, ExternalLink, Github, ImageIcon, Sparkles, Wallet } from 'lucide-react';
+import {
+    ArrowLeftRight,
+    BookOpen,
+    Coins,
+    Bitcoin,
+    ExternalLink,
+    Github,
+    ImageIcon,
+    Sparkles,
+    Wallet,
+} from 'lucide-react';
 import { Link, NavLink } from 'react-router-dom';
 import type { ComponentType, FC, ReactNode } from 'react';
 
@@ -56,6 +66,7 @@ const NAV_GROUPS: readonly { label?: string; links: readonly NavGroupLink[] }[]
         links: [
             { to: '/swap', label: 'Swap', icon: ArrowLeftRight },
             { to: '/staking', label: 'Staking', icon: Coins },
+            { to: '/crypto-onramp', label: 'Crypto Onramp', icon: Bitcoin },
         ],
     },
 ];

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

@@ -17,9 +17,16 @@ 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 { createDecentProvider } from '@ton/appkit/crypto-onramp/decent';
 import { createTonApiGaslessProvider } from '@ton/appkit/gasless/tonapi';
 
-import { ENV_TON_API_KEY_TESTNET, ENV_TON_API_KEY_MAINNET, ENV_TONCONNECT_MANIFEST_URL } from '@/core/configs/env';
+import {
+    ENV_TON_API_KEY_TESTNET,
+    ENV_TON_API_KEY_MAINNET,
+    ENV_DECENT_API_KEY,
+    ENV_TONCONNECT_MANIFEST_URL,
+} from '@/core/configs/env';
 
 const mainnetApiClient = new ApiClientToncenter({
     network: Network.mainnet(),
@@ -53,6 +60,8 @@ export const appKit = new AppKit({
         createOmnistonProvider(),
         createDeDustProvider(),
         createTonstakersProvider(),
+        createLayerswapProvider(),
+        createDecentProvider({ apiKey: ENV_DECENT_API_KEY }),
         createTonCenterStreamingProvider({ network: Network.mainnet(), apiKey: ENV_TON_API_KEY_MAINNET }),
         createTonCenterStreamingProvider({ network: Network.testnet(), apiKey: ENV_TON_API_KEY_TESTNET }),
         createTonApiGaslessProvider(),

apps/appkit-minter/src/core/configs/env.ts

@@ -10,6 +10,7 @@ export const ENV_TON_API_KEY_MAINNET =
     import.meta.env.VITE_TON_API_KEY ?? '25a9b2326a34b39a5fa4b264fb78fb4709e1bd576fc5e6b176639f5b71e94b0d';
 export const ENV_TON_API_KEY_TESTNET =
     import.meta.env.VITE_TON_API_TESTNET_KEY ?? 'd852b54d062f631565761042cccea87fa6337c41eb19b075e6c7fb88898a3992';
+export const ENV_DECENT_API_KEY = import.meta.env.VITE_DECENT_API_KEY ?? '1be323b5c83198191ba640f07f8815b0';
 
 const DEV_TONCONNECT_MANIFEST_URL = 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json';
 const PROD_TONCONNECT_MANIFEST_URL = import.meta.env.VITE_TONCONNECT_MANIFEST_URL ?? DEV_TONCONNECT_MANIFEST_URL;

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

@@ -11,3 +11,4 @@ export { JettonsPage } from './jettons-page';
 export { NftsPage } from './nfts-page';
 export { SwapPage } from './swap-page';
 export { StakingPage } from './staking-page';
+export { CryptoOnrampPage } from './onramp-page';

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { CryptoOnrampDestinationRef, CryptoOnrampSourceRef } from '@ton/appkit-react';
+import { Caip2ByNetwork } from '@ton/appkit-react';
+
+import { Layout } from '@/core/components';
+
+const DEFAULT_DESTINATION: CryptoOnrampDestinationRef = {
+    address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
+};
+
+const DEFAULT_SOURCE: CryptoOnrampSourceRef = {
+    chain: Caip2ByNetwork.ArbitrumMainnet,
+    address: '0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9',
+};
+
+export const CryptoOnrampPage: React.FC = () => {
+    return (
+        <Layout title="Crypto Onramp">
+            <div className="w-full max-w-[434px] mx-auto flex justify-center items-center">
+                <CryptoOnrampWidget defaultDestination={DEFAULT_DESTINATION} defaultSource={DEFAULT_SOURCE} />
+            </div>
+        </Layout>
+    );
+};

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

@@ -16,6 +16,7 @@ import { USDT_MASTER_MAINNET } from '@/core/constants/tokens';
 
 const TOKENS: AppkitUIToken[] = [
     {
+        id: 'ton',
         symbol: 'TON',
         name: 'Toncoin',
         decimals: 9,
@@ -24,6 +25,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/ton.png',
     },
     {
+        id: 'usdt',
         symbol: 'USD₮',
         name: 'Tether USD',
         decimals: 6,
@@ -33,6 +35,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: `./tokens/usdt.png`,
     },
     {
+        id: 'ston',
         symbol: 'STON',
         name: 'STON',
         decimals: 9,
@@ -41,6 +44,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/ston.png',
     },
     {
+        id: 'xaut',
         symbol: 'XAUt0',
         name: 'Tether Gold',
         decimals: 6,
@@ -49,6 +53,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/xaut0.png',
     },
     {
+        id: 'usde',
         symbol: 'USDe',
         name: 'Ethena USDe',
         decimals: 6,
@@ -58,6 +63,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/usde.png',
     },
     {
+        id: 'tston',
         symbol: 'tsTON',
         name: 'Tonstakers TON',
         decimals: 9,
@@ -66,6 +72,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/tston.svg',
     },
     {
+        id: 'gemston',
         symbol: 'GEMSTON',
         name: 'GEMSTON',
         decimals: 9,
@@ -74,6 +81,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/gemston.png',
     },
     {
+        id: 'utya',
         symbol: 'UTYA',
         name: 'Utya',
         decimals: 9,
@@ -82,6 +90,7 @@ const TOKENS: AppkitUIToken[] = [
         logo: './tokens/utya.png',
     },
     {
+        id: 'weth',
         symbol: 'WETH',
         name: 'Wrapped Ether',
         decimals: 18,
@@ -100,7 +109,7 @@ export const SwapPage: React.FC = () => {
                     network={Network.mainnet()}
                     fiatSymbol="$"
                     defaultFromSymbol="TON"
-                    defaultToSymbol="USD₮"
+                    defaultToSymbol="USDT"
                 />
             </div>
         </Layout>

demo/examples/src/appkit/actions/onramp/get-crypto-onramp-provider-metadata.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 { getCryptoOnrampProviderMetadata } from '@ton/appkit';
+
+export const getCryptoOnrampProviderMetadataExample = async (appKit: AppKit) => {
+    // SAMPLE_START: GET_CRYPTO_ONRAMP_PROVIDER_METADATA
+    const metadata = await getCryptoOnrampProviderMetadata(appKit, { providerId: 'layerswap' });
+    console.log('Crypto onramp provider metadata:', metadata);
+    // SAMPLE_END: GET_CRYPTO_ONRAMP_PROVIDER_METADATA
+};

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
+};