diff --git a/.gitignore b/.gitignore
index 3a6ab9a45..d04abbba0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,4 @@ packages/walletkit-android-bridge/*.sh
 
 release-artifacts
 *.tgz
+apps/appkit-minter/Caddyfile
diff --git a/apps/appkit-minter/src/core/components/layout/app-router.tsx b/apps/appkit-minter/src/core/components/layout/app-router.tsx
index 0a56a72bd..81be506c6 100644
--- a/apps/appkit-minter/src/core/components/layout/app-router.tsx
+++ b/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>
diff --git a/apps/appkit-minter/src/core/components/layout/app-sidebar.tsx b/apps/appkit-minter/src/core/components/layout/app-sidebar.tsx
index c35d6e82c..fe459cc0f 100644
--- a/apps/appkit-minter/src/core/components/layout/app-sidebar.tsx
+++ b/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 },
 ];
 
diff --git a/apps/appkit-minter/src/core/components/layout/layout.tsx b/apps/appkit-minter/src/core/components/layout/layout.tsx
index 4e4ce1d32..3f36cfeb0 100644
--- a/apps/appkit-minter/src/core/components/layout/layout.tsx
+++ b/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>
diff --git a/apps/appkit-minter/src/core/configs/app-kit.ts b/apps/appkit-minter/src/core/configs/app-kit.ts
index 532c2acfc..32a7efcd6 100644
--- a/apps/appkit-minter/src/core/configs/app-kit.ts
+++ b/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
diff --git a/apps/appkit-minter/src/pages/index.ts b/apps/appkit-minter/src/pages/index.ts
index 4c2c5f47f..5b512d331 100644
--- a/apps/appkit-minter/src/pages/index.ts
+++ b/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';
diff --git a/apps/appkit-minter/src/pages/onramp-page.tsx b/apps/appkit-minter/src/pages/onramp-page.tsx
new file mode 100644
index 000000000..d0d595b85
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/apps/appkit-minter/src/pages/swap-page.tsx b/apps/appkit-minter/src/pages/swap-page.tsx
index 63925da84..257820dbc 100644
--- a/apps/appkit-minter/src/pages/swap-page.tsx
+++ b/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>
diff --git a/apps/demo-wallet-native/src/features/send/components/token-list-sheet/token-list-sheet.tsx b/apps/demo-wallet-native/src/features/send/components/token-list-sheet/token-list-sheet.tsx
index 985958c7d..19754ea74 100644
--- a/apps/demo-wallet-native/src/features/send/components/token-list-sheet/token-list-sheet.tsx
+++ b/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',
diff --git a/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts b/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts
new file mode 100644
index 000000000..184260bd6
--- /dev/null
+++ b/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
+};
diff --git a/demo/examples/src/appkit/actions/onramp/get-crypto-onramp-provider.ts b/demo/examples/src/appkit/actions/onramp/get-crypto-onramp-provider.ts
new file mode 100644
index 000000000..f40789b4e
--- /dev/null
+++ b/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
+};
diff --git a/demo/examples/src/appkit/actions/onramp/get-crypto-onramp-providers.ts b/demo/examples/src/appkit/actions/onramp/get-crypto-onramp-providers.ts
new file mode 100644
index 000000000..308939650
--- /dev/null
+++ b/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
+};
diff --git a/demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts b/demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts
new file mode 100644
index 000000000..868cc30e4
--- /dev/null
+++ b/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
+};
diff --git a/demo/examples/src/appkit/hooks/jettons/jettons.test.tsx b/demo/examples/src/appkit/hooks/jettons/jettons.test.tsx
index 7d2bcaf2d..798647102 100644
--- a/demo/examples/src/appkit/hooks/jettons/jettons.test.tsx
+++ b/demo/examples/src/appkit/hooks/jettons/jettons.test.tsx
@@ -8,7 +8,16 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import * as AppKitReact from '@ton/appkit-react';
+import {
+    useJettonInfo,
+    useJettonWalletAddress,
+    useJettonBalanceByAddress,
+    useJettonsByAddress,
+    useJettons,
+    useTransferJetton,
+    useWatchJettons,
+    useWatchJettonsByAddress,
+} from '@ton/appkit-react';
 
 import { UseJettonInfoExample } from './use-jetton-info';
 import { UseJettonBalanceByAddressExample } from './use-jetton-balance-by-address';
@@ -47,7 +56,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseJettonInfoExample', () => {
         it('should render loading state', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonInfo).mockReturnValue({
+            vi.mocked(useJettonInfo).mockReturnValue({
                 isLoading: true,
                 data: undefined,
                 error: null,
@@ -59,7 +68,7 @@ describe('Jetton Hooks Examples', () => {
 
         it('should render error state', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonInfo).mockReturnValue({
+            vi.mocked(useJettonInfo).mockReturnValue({
                 isLoading: false,
                 data: undefined,
                 error: new Error('Failed to fetch'),
@@ -71,7 +80,7 @@ describe('Jetton Hooks Examples', () => {
 
         it('should render jetton info', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonInfo).mockReturnValue({
+            vi.mocked(useJettonInfo).mockReturnValue({
                 isLoading: false,
                 data: {
                     name: 'Test Jetton',
@@ -91,7 +100,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseJettonBalanceByAddressExample', () => {
         it('should render balance', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonBalanceByAddress).mockReturnValue({
+            vi.mocked(useJettonBalanceByAddress).mockReturnValue({
                 isLoading: false,
                 data: '1000000',
                 error: null,
@@ -105,7 +114,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseJettonWalletAddressExample', () => {
         it('should render wallet address', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonWalletAddress).mockReturnValue({
+            vi.mocked(useJettonWalletAddress).mockReturnValue({
                 isLoading: false,
                 data: 'EQB-mock-address',
                 error: null,
@@ -119,7 +128,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseJettonsByAddressExample', () => {
         it('should render list of jettons', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonsByAddress).mockReturnValue({
+            vi.mocked(useJettonsByAddress).mockReturnValue({
                 isLoading: false,
                 data: {
                     jettons: [
@@ -139,7 +148,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseJettonsExample', () => {
         it('should render list of jettons for current wallet', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettons).mockReturnValue({
+            vi.mocked(useJettons).mockReturnValue({
                 isLoading: false,
                 data: {
                     jettons: [{ walletAddress: 'addr1', info: { name: 'My Jetton' }, balance: '100' }],
@@ -156,7 +165,7 @@ describe('Jetton Hooks Examples', () => {
         it('should call transfer mutation on button click', () => {
             const mockMutate = vi.fn();
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useTransferJetton).mockReturnValue({
+            vi.mocked(useTransferJetton).mockReturnValue({
                 mutate: mockMutate,
                 isPending: false,
                 error: null,
@@ -176,7 +185,7 @@ describe('Jetton Hooks Examples', () => {
 
         it('should disable button when loading', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useTransferJetton).mockReturnValue({
+            vi.mocked(useTransferJetton).mockReturnValue({
                 mutate: vi.fn(),
                 isPending: true,
                 error: null,
@@ -191,7 +200,7 @@ describe('Jetton Hooks Examples', () => {
     describe('UseWatchJettonsExample', () => {
         it('should render jetton list', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettons).mockReturnValue({
+            vi.mocked(useJettons).mockReturnValue({
                 isLoading: false,
                 data: {
                     jettons: [{ walletAddress: 'addr1', info: { name: 'My Jetton' }, balance: '100' }],
@@ -201,14 +210,14 @@ describe('Jetton Hooks Examples', () => {
 
             render(<UseWatchJettonsExample />);
             expect(screen.getByText('My Jetton: 100')).toBeDefined();
-            expect(AppKitReact.useWatchJettons).toHaveBeenCalled();
+            expect(useWatchJettons).toHaveBeenCalled();
         });
     });
 
     describe('UseWatchJettonsByAddressExample', () => {
         it('should render jetton list for address', () => {
             // @ts-expect-error - mock
-            vi.mocked(AppKitReact.useJettonsByAddress).mockReturnValue({
+            vi.mocked(useJettonsByAddress).mockReturnValue({
                 isLoading: false,
                 data: {
                     jettons: [{ walletAddress: 'addr2', info: { name: 'Other Jetton' }, balance: '50' }],
@@ -218,7 +227,7 @@ describe('Jetton Hooks Examples', () => {
 
             render(<UseWatchJettonsByAddressExample />);
             expect(screen.getByText('Other Jetton: 50')).toBeDefined();
-            expect(AppKitReact.useWatchJettonsByAddress).toHaveBeenCalledWith({
+            expect(useWatchJettonsByAddress).toHaveBeenCalledWith({
                 address: 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKZ',
             });
         });
diff --git a/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-provider.tsx b/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-provider.tsx
new file mode 100644
index 000000000..a87af42cd
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-provider.tsx
@@ -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 { useCryptoOnrampProvider } from '@ton/appkit-react';
+
+export const UseCryptoOnrampProviderExample = () => {
+    // SAMPLE_START: USE_CRYPTO_ONRAMP_PROVIDER
+    const provider = useCryptoOnrampProvider({ id: 'layerswap' });
+
+    return <div>Provider: {provider?.providerId}</div>;
+    // SAMPLE_END: USE_CRYPTO_ONRAMP_PROVIDER
+};
diff --git a/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-providers.tsx b/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-providers.tsx
new file mode 100644
index 000000000..9ac7a26d2
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/onramp/use-crypto-onramp-providers.tsx
@@ -0,0 +1,23 @@
+/**
+ * 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 { useCryptoOnrampProviders } from '@ton/appkit-react';
+
+export const UseCryptoOnrampProvidersExample = () => {
+    // SAMPLE_START: USE_CRYPTO_ONRAMP_PROVIDERS
+    const providers = useCryptoOnrampProviders();
+
+    return (
+        <ul>
+            {providers.map((p) => (
+                <li key={p.providerId}>{p.providerId}</li>
+            ))}
+        </ul>
+    );
+    // SAMPLE_END: USE_CRYPTO_ONRAMP_PROVIDERS
+};
diff --git a/demo/examples/src/appkit/swap/swap-widget.tsx b/demo/examples/src/appkit/swap/swap-widget.tsx
index 05a896eab..8c30f322a 100644
--- a/demo/examples/src/appkit/swap/swap-widget.tsx
+++ b/demo/examples/src/appkit/swap/swap-widget.tsx
@@ -11,6 +11,7 @@ import { SwapWidget } from '@ton/appkit-react';
 
 const tokens = [
     {
+        id: 'ton',
         address: 'ton',
         symbol: 'TON',
         name: 'Toncoin',
@@ -19,6 +20,7 @@ const tokens = [
         logo: 'https://ton.org/symbol.png',
     },
     {
+        id: 'usdt',
         address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
         symbol: 'USDT',
         name: 'Tether',
diff --git a/packages/appkit-react/.storybook/app-kit.ts b/packages/appkit-react/.storybook/app-kit.ts
index 67ba0f626..a875ed300 100644
--- a/packages/appkit-react/.storybook/app-kit.ts
+++ b/packages/appkit-react/.storybook/app-kit.ts
@@ -6,11 +6,11 @@
  *
  */
 
-import { AppKit, Network } from '@ton/appkit';
-import { createTonConnectConnector } from '@ton/appkit';
+import { AppKit, Network, createTonConnectConnector } from '@ton/appkit';
 import { createOmnistonProvider } from '@ton/appkit/swap/omniston';
 import { createDeDustProvider } from '@ton/appkit/swap/dedust';
 import { createTonstakersProvider } from '@ton/appkit/staking/tonstakers';
+import { createLayerswapProvider } from '@ton/appkit/crypto-onramp/layerswap';
 
 export const appKit = new AppKit({
     networks: {
@@ -35,5 +35,10 @@ export const appKit = new AppKit({
             },
         }),
     ],
-    providers: [createOmnistonProvider(), createDeDustProvider(), createTonstakersProvider()],
+    providers: [
+        createOmnistonProvider(),
+        createDeDustProvider(),
+        createTonstakersProvider(),
+        createLayerswapProvider(),
+    ],
 });
diff --git a/packages/appkit-react/.storybook/main.ts b/packages/appkit-react/.storybook/main.ts
index 555fa6d21..a185a56b2 100644
--- a/packages/appkit-react/.storybook/main.ts
+++ b/packages/appkit-react/.storybook/main.ts
@@ -19,6 +19,10 @@ import { dirname } from 'node:path';
 import type { StorybookConfig } from '@storybook/react-vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
+const getAbsolutePath = (value: string): string => {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+};
+
 const config: StorybookConfig = {
     stories: ['../src/**/*.stories.@(ts|tsx)'],
     addons: [getAbsolutePath('@storybook/addon-docs')],
@@ -66,7 +70,3 @@ const config: StorybookConfig = {
 };
 
 export default config;
-
-function getAbsolutePath(value: string) {
-    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}
diff --git a/packages/appkit-react/docs/hooks.md b/packages/appkit-react/docs/hooks.md
index e46e9d303..dbce1b294 100644
--- a/packages/appkit-react/docs/hooks.md
+++ b/packages/appkit-react/docs/hooks.md
@@ -724,6 +724,34 @@ return (
 );
 ```
 
+## Crypto Onramp
+
+### `useCryptoOnrampProvider`
+
+Hook to get a registered crypto-onramp provider by id, or the default one when no id is given.
+
+```tsx
+const provider = useCryptoOnrampProvider({ id: 'layerswap' });
+
+return <div>Provider: {provider?.providerId}</div>;
+```
+
+### `useCryptoOnrampProviders`
+
+Hook to get all registered crypto-onramp providers.
+
+```tsx
+const providers = useCryptoOnrampProviders();
+
+return (
+    <ul>
+        {providers.map((p) => (
+            <li key={p.providerId}>{p.providerId}</li>
+        ))}
+    </ul>
+);
+```
+
 ## Staking
 
 ### `useStakingProviders`
diff --git a/packages/appkit-react/package.json b/packages/appkit-react/package.json
index 949293502..fd354061e 100644
--- a/packages/appkit-react/package.json
+++ b/packages/appkit-react/package.json
@@ -45,6 +45,7 @@
   "dependencies": {
     "@ton/appkit": "workspace:*",
     "clsx": "2.1.1",
+    "qrcode.react": "^4.2.0",
     "radix-ui": "^1.4.3",
     "rosetta": "1.1.0"
   },
diff --git a/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css
index 1e635f7b2..e1e0344d9 100644
--- a/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css
+++ b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css
@@ -4,7 +4,6 @@
     gap: 8px;
     justify-content: center;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    margin: 0 auto;
 }
 
 .preset {
diff --git a/packages/appkit-react/src/components/shared/button-with-connect/button-with-connect.stories.tsx b/packages/appkit-react/src/components/shared/button-with-connect/button-with-connect.stories.tsx
new file mode 100644
index 000000000..399448c19
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/button-with-connect/button-with-connect.stories.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { ButtonWithConnect } from './button-with-connect';
+
+const meta: Meta<typeof ButtonWithConnect> = {
+    title: 'Components/Shared/ButtonWithConnect',
+    component: ButtonWithConnect,
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonWithConnect>;
+
+export const Default: Story = {
+    args: {
+        children: 'Continue',
+        variant: 'fill',
+        size: 'l',
+        fullWidth: true,
+        onClick: fn(),
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        children: 'Continue',
+        variant: 'fill',
+        size: 'l',
+        fullWidth: true,
+        disabled: true,
+        onClick: fn(),
+    },
+};
diff --git a/packages/appkit-react/src/components/shared/copy-button/copy-button.module.css b/packages/appkit-react/src/components/shared/copy-button/copy-button.module.css
new file mode 100644
index 000000000..bf9d35f3e
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/copy-button/copy-button.module.css
@@ -0,0 +1,19 @@
+.button {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	background: none;
+	cursor: pointer;
+	color: var(--ta-color-text-secondary);
+	border-radius: var(--ta-border-radius-s);
+	transition: color 0.15s, background-color 0.15s;
+}
+
+.button:hover {
+	color: var(--ta-color-text);
+	background-color: var(--ta-color-background-tertiary);
+}
diff --git a/packages/appkit-react/src/components/shared/copy-button/copy-button.stories.tsx b/packages/appkit-react/src/components/shared/copy-button/copy-button.stories.tsx
new file mode 100644
index 000000000..fc5c5dcde
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/copy-button/copy-button.stories.tsx
@@ -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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CopyButton } from './copy-button';
+
+const meta: Meta<typeof CopyButton> = {
+    title: 'Components/Shared/CopyButton',
+    component: CopyButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {
+    args: {
+        value: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
+        'aria-label': 'Copy address',
+    },
+};
diff --git a/packages/appkit-react/src/components/shared/copy-button/copy-button.tsx b/packages/appkit-react/src/components/shared/copy-button/copy-button.tsx
new file mode 100644
index 000000000..400e0857b
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/copy-button/copy-button.tsx
@@ -0,0 +1,31 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import { CheckIcon, CopyIcon } from '../../ui/icons';
+import { useCopy } from '../../../hooks/use-copy';
+import styles from './copy-button.module.css';
+
+export interface CopyButtonProps extends Omit<ComponentProps<'button'>, 'value' | 'children' | 'onClick'> {
+    /** The text written to the clipboard when the button is clicked. */
+    value: string;
+    /** Accessible label for screen readers. */
+    'aria-label': string;
+}
+
+export const CopyButton: FC<CopyButtonProps> = ({ value, className, type = 'button', ...props }) => {
+    const [copied, copy] = useCopy(value);
+
+    return (
+        <button type={type} className={clsx(styles.button, className)} onClick={copy} {...props}>
+            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+        </button>
+    );
+};
diff --git a/packages/appkit-react/src/components/shared/copy-button/index.ts b/packages/appkit-react/src/components/shared/copy-button/index.ts
new file mode 100644
index 000000000..6f660b49e
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/copy-button/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css b/packages/appkit-react/src/components/shared/currency-item/currency-item.module.css
similarity index 72%
rename from packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css
rename to packages/appkit-react/src/components/shared/currency-item/currency-item.module.css
index ac05553b9..f8527c130 100644
--- a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css
+++ b/packages/appkit-react/src/components/shared/currency-item/currency-item.module.css
@@ -1,4 +1,4 @@
-.currencyItem {
+.container {
     box-sizing: border-box;
     width: 100%;
     display: flex;
@@ -39,7 +39,7 @@
 }
 
 .name {
-    composes: bodySemibold from "../../../../styles/typography.module.css";
+    composes: bodySemibold from "../../../styles/typography.module.css";
 
     color: var(--ta-color-text);
     white-space: nowrap;
@@ -56,19 +56,26 @@
 }
 
 .ticker {
-    composes: labelMedium from "../../../../styles/typography.module.css";
+    composes: labelMedium from "../../../styles/typography.module.css";
 
     color: var(--ta-color-text-secondary);
     margin: 0;
 }
 
-.details {
+.rightSide {
     text-align: right;
 }
 
-.balance {
-    composes: bodyMedium from "../../../../styles/typography.module.css";
+.mainBalance {
+    composes: bodyMedium from "../../../styles/typography.module.css";
 
     color: var(--ta-color-text);
     margin: 0;
 }
+
+.underBalance {
+    composes: labelMedium from "../../../styles/typography.module.css";
+
+    color: var(--ta-color-text-secondary);
+    margin: 0;
+}
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx b/packages/appkit-react/src/components/shared/currency-item/currency-item.stories.tsx
similarity index 87%
rename from packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx
rename to packages/appkit-react/src/components/shared/currency-item/currency-item.stories.tsx
index 03ed16e75..2a37d2588 100644
--- a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx
+++ b/packages/appkit-react/src/components/shared/currency-item/currency-item.stories.tsx
@@ -12,7 +12,7 @@ import { fn } from 'storybook/test';
 import { CurrencyItem } from './currency-item';
 
 const meta: Meta<typeof CurrencyItem> = {
-    title: 'Features/Balances/CurrencyItem',
+    title: 'Components/Shared/CurrencyItem',
     component: CurrencyItem,
     tags: ['autodocs'],
     args: {
@@ -71,6 +71,17 @@ export const NoBalance: Story = {
     },
 };
 
+export const WithUnderBalance: Story = {
+    args: {
+        ticker: 'TON',
+        name: 'Toncoin',
+        balance: '55',
+        underBalance: '$385.00',
+        icon: 'https://ton.org/download/ton_symbol.png',
+        isVerified: true,
+    },
+};
+
 export const CurrencyList: Story = {
     render: () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', width: '320px' }}>
diff --git a/packages/appkit-react/src/components/shared/currency-item/currency-item.tsx b/packages/appkit-react/src/components/shared/currency-item/currency-item.tsx
new file mode 100644
index 000000000..87ceef566
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/currency-item/currency-item.tsx
@@ -0,0 +1,137 @@
+/**
+ * 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 { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import { Logo } from '../../ui/logo';
+import type { LogoProps } from '../../ui/logo';
+import styles from './currency-item.module.css';
+
+export interface CurrencyItemProps extends ComponentProps<'button'> {
+    ticker?: string;
+    name?: string;
+    balance?: string;
+    underBalance?: string;
+    icon?: string;
+    isVerified?: boolean;
+}
+
+const Container: FC<ComponentProps<'button'>> = ({ className, children, ...props }) => (
+    <button className={clsx(styles.container, className)} {...props}>
+        {children}
+    </button>
+);
+
+const LogoWrapper: FC<LogoProps> = ({ className, ...props }) => (
+    <Logo className={clsx(styles.icon, className)} size={40} {...props} />
+);
+
+const Info: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.info, className)} {...props}>
+        {children}
+    </div>
+);
+
+const Header: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.header, className)} {...props}>
+        {children}
+    </div>
+);
+
+const Name: FC<ComponentProps<'p'>> = ({ className, children, ...props }) => (
+    <p className={clsx(styles.name, className)} {...props}>
+        {children}
+    </p>
+);
+
+const Ticker: FC<ComponentProps<'p'>> = ({ className, children, ...props }) => (
+    <p className={clsx(styles.ticker, className)} {...props}>
+        {children}
+    </p>
+);
+
+const VerifiedBadge: FC<ComponentProps<'svg'>> = ({ className, ...props }) => (
+    <svg className={clsx(styles.verified, className)} fill="currentColor" viewBox="0 0 20 20" {...props}>
+        <path
+            fillRule="evenodd"
+            d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const RightSide: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.rightSide, className)} {...props}>
+        {children}
+    </div>
+);
+
+const MainBalance: FC<ComponentProps<'p'>> = ({ className, children, ...props }) => (
+    <p className={clsx(styles.mainBalance, className)} {...props}>
+        {children}
+    </p>
+);
+
+const UnderBalance: FC<ComponentProps<'p'>> = ({ className, children, ...props }) => (
+    <p className={clsx(styles.underBalance, className)} {...props}>
+        {children}
+    </p>
+);
+
+const CurrencyItemRoot: FC<CurrencyItemProps> = ({
+    ticker,
+    name,
+    balance,
+    underBalance,
+    icon,
+    isVerified,
+    children,
+    ...props
+}) => {
+    if (children) {
+        return <Container {...props}>{children}</Container>;
+    }
+
+    return (
+        <Container {...props}>
+            {(icon || ticker) && <LogoWrapper src={icon} fallback={ticker?.[0]} alt={ticker} />}
+
+            <Info>
+                <Header>
+                    <Name>{name || ticker}</Name>
+                    {isVerified && <VerifiedBadge />}
+                </Header>
+
+                <Ticker>
+                    {ticker} {name && ticker && <>• {name}</>}
+                </Ticker>
+            </Info>
+
+            {(balance || underBalance) && (
+                <RightSide>
+                    {balance && <MainBalance>{balance}</MainBalance>}
+                    {underBalance && <UnderBalance>{underBalance}</UnderBalance>}
+                </RightSide>
+            )}
+        </Container>
+    );
+};
+
+export const CurrencyItem = Object.assign(CurrencyItemRoot, {
+    Container,
+    Logo: LogoWrapper,
+    Info,
+    VerifiedBadge,
+    Header,
+    Name,
+    Ticker,
+    RightSide,
+    MainBalance,
+    UnderBalance,
+});
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/index.ts b/packages/appkit-react/src/components/shared/currency-item/index.ts
similarity index 100%
rename from packages/appkit-react/src/features/balances/components/currency-item/index.ts
rename to packages/appkit-react/src/components/shared/currency-item/index.ts
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.module.css
similarity index 55%
rename from packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css
rename to packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.module.css
index 5c051fe7a..48723d8c7 100644
--- a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css
+++ b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.module.css
@@ -2,6 +2,10 @@
   margin-bottom: 16px;
 }
 
+.body {
+  overflow-y: hidden;
+}
+
 .list {
   list-style: none;
   margin: 0;
@@ -15,6 +19,24 @@
   flex: 1;
 }
 
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sectionHeader {
+  composes: labelSemibold from "../../../styles/typography.module.css";
+  
+  color: var(--ta-color-text-secondary);
+  margin: 0;
+  padding: 8px 0 4px;
+}
+
+.section:first-child .sectionHeader {
+  padding-top: 0;
+}
+
 .empty {
   padding: 32px 0;
 }
diff --git a/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.stories.tsx b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.stories.tsx
new file mode 100644
index 000000000..fb878f0a7
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.stories.tsx
@@ -0,0 +1,82 @@
+/**
+ * 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 { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CurrencySelect } from './currency-select-modal';
+import { Button } from '../../ui/button';
+import { CurrencyItem } from '../currency-item';
+
+const meta: Meta<typeof CurrencySelect.Modal> = {
+    title: 'Components/Shared/CurrencySelectModal',
+    component: CurrencySelect.Modal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CurrencySelect.Modal>;
+
+const TOKENS = [
+    { ticker: 'TON', name: 'Toncoin', icon: 'https://ton.org/download/ton_symbol.png', balance: '55' },
+    { ticker: 'USDT', name: 'Tether USD', balance: '10' },
+    { ticker: 'NOT', name: 'Notcoin', balance: '500' },
+    { ticker: 'STON', name: 'STON.fi Token', balance: '20' },
+    { ticker: 'BOLT', name: 'Bolt', balance: '0' },
+];
+
+export const Default: Story = {
+    render: () => {
+        const Wrapper = () => {
+            const [open, setOpen] = useState(false);
+            const [search, setSearch] = useState('');
+
+            const filtered = useMemo(() => {
+                const q = search.trim().toLowerCase();
+                if (!q) return TOKENS;
+                return TOKENS.filter((t) => t.ticker.toLowerCase().includes(q) || t.name.toLowerCase().includes(q));
+            }, [search]);
+
+            return (
+                <>
+                    <Button onClick={() => setOpen(true)}>Open</Button>
+                    <CurrencySelect.Modal
+                        open={open}
+                        onOpenChange={(v) => {
+                            setOpen(v);
+                            if (!v) setSearch('');
+                        }}
+                        title="Select token"
+                    >
+                        <CurrencySelect.Search
+                            searchValue={search}
+                            onSearchChange={setSearch}
+                            placeholder="Search..."
+                        />
+                        <CurrencySelect.ListContainer isEmpty={filtered.length === 0}>
+                            <CurrencySelect.Section>
+                                <CurrencySelect.SectionHeader>Popular</CurrencySelect.SectionHeader>
+                                {filtered.map((t) => (
+                                    <CurrencyItem
+                                        key={t.ticker}
+                                        ticker={t.ticker}
+                                        name={t.name}
+                                        balance={t.balance}
+                                        icon={t.icon}
+                                        onClick={() => setOpen(false)}
+                                    />
+                                ))}
+                            </CurrencySelect.Section>
+                        </CurrencySelect.ListContainer>
+                    </CurrencySelect.Modal>
+                </>
+            );
+        };
+        return <Wrapper />;
+    },
+};
diff --git a/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.tsx b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.tsx
new file mode 100644
index 000000000..1bb2b8cf3
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/currency-select-modal/currency-select-modal.tsx
@@ -0,0 +1,96 @@
+/**
+ * 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 { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import type { InputContainerProps } from '../../ui/input';
+import { Input } from '../../ui/input';
+import type { ModalProps } from '../../ui/modal';
+import { Modal } from '../../ui/modal';
+import { SearchIcon } from '../../ui/icons';
+import styles from './currency-select-modal.module.css';
+
+export interface CurrencySelectSearchProps extends Omit<InputContainerProps, 'children'> {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    placeholder?: string;
+}
+
+export const CurrencySelectSearch: FC<CurrencySelectSearchProps> = ({
+    searchValue,
+    onSearchChange,
+    placeholder,
+    className,
+    ...props
+}) => {
+    return (
+        <Input.Container size="s" className={clsx(styles.searchWrapper, className)} {...props}>
+            <Input.Field>
+                <Input.Slot>
+                    <SearchIcon size={24} />
+                </Input.Slot>
+
+                <Input.Input
+                    placeholder={placeholder}
+                    value={searchValue}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                    autoFocus
+                />
+            </Input.Field>
+        </Input.Container>
+    );
+};
+
+export interface CurrencySelectListContainerProps extends ComponentProps<'div'> {
+    isEmpty: boolean;
+}
+
+export const CurrencySelectListContainer: FC<CurrencySelectListContainerProps> = ({
+    isEmpty,
+    children,
+    className,
+    ...props
+}) => {
+    return (
+        <div className={clsx(styles.list, className)} {...props}>
+            {isEmpty ? (
+                <div className={styles.empty}>
+                    <p className={styles.emptyText}>We didn&#x27;t find any tokens.</p>
+                    <p className={styles.emptyText}>Try searching by address.</p>
+                </div>
+            ) : (
+                children
+            )}
+        </div>
+    );
+};
+
+export const CurrencySelectSectionHeader: FC<ComponentProps<'p'>> = ({ className, children, ...props }) => (
+    <p className={clsx(styles.sectionHeader, className)} {...props}>
+        {children}
+    </p>
+);
+
+export const CurrencySelectSection: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.section, className)} {...props}>
+        {children}
+    </div>
+);
+
+export const CurrencySelectModal: FC<ModalProps> = ({ className, ...props }) => {
+    return <Modal className={clsx(styles.body, className)} {...props} />;
+};
+
+export const CurrencySelect = {
+    Modal: CurrencySelectModal,
+    Search: CurrencySelectSearch,
+    ListContainer: CurrencySelectListContainer,
+    SectionHeader: CurrencySelectSectionHeader,
+    Section: CurrencySelectSection,
+};
diff --git a/packages/appkit-react/src/components/shared/currency-select-modal/index.ts b/packages/appkit-react/src/components/shared/currency-select-modal/index.ts
new file mode 100644
index 000000000..255042d50
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/currency-select-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CurrencySelect } from './currency-select-modal';
+export type { CurrencySelectSearchProps, CurrencySelectListContainerProps } from './currency-select-modal';
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/index.ts b/packages/appkit-react/src/components/shared/token-select-modal/index.ts
index 8188dd7ec..7c29be3ca 100644
--- a/packages/appkit-react/src/components/shared/token-select-modal/index.ts
+++ b/packages/appkit-react/src/components/shared/token-select-modal/index.ts
@@ -7,4 +7,4 @@
  */
 
 export { TokenSelectModal } from './token-select-modal';
-export type { TokenSelectModalProps } from './token-select-modal';
+export type { TokenSelectModalProps, TokenSectionConfig, TokenBase } from './token-select-modal';
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx
index 0689a6902..4f803fb45 100644
--- a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx
+++ b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx
@@ -6,46 +6,68 @@
  *
  */
 
-import { useState } from 'react';
-import type { FC } from 'react';
-import { compareAddress } from '@ton/appkit';
+import { useMemo, useState } from 'react';
+import type { JSX } from 'react';
 
-import { Input } from '../../ui/input/input';
-import { Modal } from '../../ui/modal/modal';
-import { SearchIcon } from '../../ui/icons';
-import { CurrencyItem } from '../../../features/balances';
-import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import { CurrencySelect } from '../currency-select-modal';
+import { CurrencyItem } from '../currency-item';
 import type { AppkitUIToken } from '../../../types/appkit-ui-token';
-import styles from './token-select-modal.module.css';
+import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import { filterTokens, groupTokenSections } from './utils';
+
+export interface TokenBase {
+    id: string;
+    symbol: string;
+    name: string;
+    address: string;
+    logo?: string;
+}
 
-export interface TokenSelectModalProps {
+export interface TokenSection<T extends TokenBase = AppkitUIToken> {
+    title: string;
+    tokens: T[];
+}
+
+export interface TokenSectionConfig {
+    title: string;
+    ids: string[];
+}
+
+export interface TokenSelectModalProps<T extends TokenBase = AppkitUIToken> {
     open: boolean;
     onClose: () => void;
-    tokens: AppkitUIToken[];
-    onSelect: (token: AppkitUIToken) => void;
+    tokens: T[];
+    tokenSections?: TokenSectionConfig[];
+    onSelect: (token: T) => void;
     title: string;
     searchPlaceholder?: string;
 }
 
-export const TokenSelectModal: FC<TokenSelectModalProps> = ({
+export const TokenSelectModal = <T extends TokenBase = AppkitUIToken>({
     open,
     onClose,
     tokens,
+    tokenSections,
     onSelect,
     title,
     searchPlaceholder,
-}) => {
+}: TokenSelectModalProps<T>): JSX.Element => {
     const { t } = useI18n();
     const [search, setSearch] = useState('');
 
-    const filtered = tokens.filter(
-        (token) =>
-            token.symbol.toLowerCase().includes(search.toLowerCase()) ||
-            token.name.toLowerCase().includes(search.toLowerCase()) ||
-            compareAddress(token.address, search),
-    );
+    const displaySections = useMemo((): TokenSection<T>[] => {
+        if (search) {
+            return [{ title: '', tokens: filterTokens(tokens, search) }];
+        }
+        if (tokenSections) {
+            return groupTokenSections(tokens, tokenSections, t('tokenSelect.otherTokens'));
+        }
+        return [{ title: '', tokens }];
+    }, [tokens, tokenSections, search, t]);
+
+    const isEmpty = displaySections.every((s) => s.tokens.length === 0);
 
-    const handleSelect = (token: AppkitUIToken) => () => {
+    const handleSelect = (token: T) => () => {
         onSelect(token);
         onClose();
         setSearch('');
@@ -59,34 +81,13 @@ export const TokenSelectModal: FC<TokenSelectModalProps> = ({
     };
 
     return (
-        <Modal open={open} onOpenChange={handleOpenChange} title={title}>
-            <Input.Container className={styles.searchWrapper} size="s">
-                <Input.Field>
-                    <Input.Slot>
-                        <SearchIcon size={24} />
-                    </Input.Slot>
-                    <Input.Input
-                        placeholder={searchPlaceholder}
-                        value={search}
-                        onChange={(e) => setSearch(e.target.value)}
-                        autoFocus
-                    />
-                </Input.Field>
-            </Input.Container>
-
-            <div className={styles.list}>
-                {tokens.length === 0 ? (
-                    <div className={styles.empty}>
-                        <p className={styles.emptyText}>{t('tokenSelect.emptyForNetwork')}</p>
-                    </div>
-                ) : filtered.length === 0 ? (
-                    <div className={styles.empty}>
-                        <p className={styles.emptyText}>{t('tokenSelect.emptyNoMatch')}</p>
-                        <p className={styles.emptyText}>{t('tokenSelect.emptyTryAddress')}</p>
-                    </div>
-                ) : (
-                    <ul className={styles.list}>
-                        {filtered.map((token) => (
+        <CurrencySelect.Modal open={open} onOpenChange={handleOpenChange} title={title}>
+            <CurrencySelect.Search searchValue={search} onSearchChange={setSearch} placeholder={searchPlaceholder} />
+            <CurrencySelect.ListContainer isEmpty={isEmpty}>
+                {displaySections.map((section) => (
+                    <CurrencySelect.Section key={section.title}>
+                        {section.title && <CurrencySelect.SectionHeader>{section.title}</CurrencySelect.SectionHeader>}
+                        {section.tokens.map((token) => (
                             <CurrencyItem
                                 key={token.address}
                                 icon={token.logo}
@@ -95,9 +96,9 @@ export const TokenSelectModal: FC<TokenSelectModalProps> = ({
                                 onClick={handleSelect(token)}
                             />
                         ))}
-                    </ul>
-                )}
-            </div>
-        </Modal>
+                    </CurrencySelect.Section>
+                ))}
+            </CurrencySelect.ListContainer>
+        </CurrencySelect.Modal>
     );
 };
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/utils.ts b/packages/appkit-react/src/components/shared/token-select-modal/utils.ts
new file mode 100644
index 000000000..dde2f028c
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-select-modal/utils.ts
@@ -0,0 +1,54 @@
+/**
+ * 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 { compareAddress } from '@ton/appkit';
+
+import type { TokenBase, TokenSection, TokenSectionConfig } from './token-select-modal';
+
+export const filterTokens = <T extends TokenBase>(tokens: T[], search: string): T[] => {
+    if (!search) return tokens;
+    const lowerSearch = search.toLowerCase();
+    return tokens.filter(
+        (token) =>
+            token.symbol.toLowerCase().includes(lowerSearch) ||
+            token.name.toLowerCase().includes(lowerSearch) ||
+            compareAddress(token.address, search),
+    );
+};
+
+/**
+ * Converts a flat token list + section configs into TokenSection[] for TokenSelectModal.
+ * Tokens not covered by any section config are placed in a final untitled section.
+ */
+export const groupTokenSections = <T extends TokenBase>(
+    tokens: T[],
+    sections: TokenSectionConfig[],
+    otherTitle = 'Other Tokens',
+): TokenSection<T>[] => {
+    const tokenById = new Map(tokens.map((t) => [t.id, t]));
+    const assignedIds = new Set<string>();
+
+    const result: TokenSection<T>[] = sections.map(({ title, ids }) => {
+        const sectionTokens = ids.flatMap((id) => {
+            const token = tokenById.get(id);
+            if (token) {
+                assignedIds.add(id);
+                return [token];
+            }
+            return [];
+        });
+        return { title, tokens: sectionTokens };
+    });
+
+    const remaining = tokens.filter((t) => !assignedIds.has(t.id));
+    if (remaining.length > 0) {
+        result.push({ title: otherTitle, tokens: remaining });
+    }
+
+    return result.filter((s) => s.tokens.length > 0);
+};
diff --git a/packages/appkit-react/src/features/swap/components/token-selector/index.ts b/packages/appkit-react/src/components/shared/token-selector/index.ts
similarity index 100%
rename from packages/appkit-react/src/features/swap/components/token-selector/index.ts
rename to packages/appkit-react/src/components/shared/token-selector/index.ts
diff --git a/packages/appkit-react/src/components/shared/token-selector/token-selector.module.css b/packages/appkit-react/src/components/shared/token-selector/token-selector.module.css
new file mode 100644
index 000000000..10f7049d2
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-selector/token-selector.module.css
@@ -0,0 +1,21 @@
+.tokenSelector:hover {
+  opacity: 0.8;
+}
+
+.readOnly {
+  cursor: default;
+}
+
+.readOnly:hover {
+  opacity: 1;
+}
+
+.symbol {
+  padding-right: 2px;
+  margin-right: auto;
+}
+
+.chevron {
+  opacity: 0.5;
+  margin-left: auto;
+}
diff --git a/packages/appkit-react/src/components/shared/token-selector/token-selector.stories.tsx b/packages/appkit-react/src/components/shared/token-selector/token-selector.stories.tsx
new file mode 100644
index 000000000..3df81431a
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-selector/token-selector.stories.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { TokenSelector } from './token-selector';
+
+const meta: Meta<typeof TokenSelector> = {
+    title: 'Components/Shared/TokenSelector',
+    component: TokenSelector,
+    tags: ['autodocs'],
+    args: {
+        onClick: fn(),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TokenSelector>;
+
+const TON_ICON = 'https://ton.org/download/ton_symbol.png';
+
+export const Default: Story = {
+    args: {
+        title: 'TON',
+        icon: TON_ICON,
+    },
+};
+
+export const NoIcon: Story = {
+    args: {
+        title: 'USDT',
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        title: 'Select token',
+    },
+};
+
+export const WithNetwork: Story = {
+    args: {
+        title: 'USDC',
+        icon: 'https://assets.coingecko.com/coins/images/6319/standard/usdc.png',
+        networkIcon: TON_ICON,
+    },
+};
+
+export const ReadOnly: Story = {
+    args: {
+        title: 'TON',
+        icon: TON_ICON,
+        readOnly: true,
+    },
+};
diff --git a/packages/appkit-react/src/components/shared/token-selector/token-selector.tsx b/packages/appkit-react/src/components/shared/token-selector/token-selector.tsx
new file mode 100644
index 000000000..20331f5f2
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-selector/token-selector.tsx
@@ -0,0 +1,73 @@
+/**
+ * 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 { FC } from 'react';
+import clsx from 'clsx';
+
+import styles from './token-selector.module.css';
+import { Button } from '../../ui/button';
+import type { ButtonProps } from '../../ui/button';
+import { Logo } from '../../ui/logo';
+import { LogoWithNetwork } from '../../ui/logo-with-network';
+
+export interface TokenSelectorProps extends ButtonProps {
+    title: string;
+    icon?: string;
+    iconFallback?: string;
+    /** When provided, renders a network badge overlay on the icon */
+    networkIcon?: string;
+    /** Hide chevron and suppress click handling — use when there's nothing to pick */
+    readOnly?: boolean;
+}
+
+export const TokenSelector: FC<TokenSelectorProps> = ({
+    title,
+    icon,
+    iconFallback,
+    networkIcon,
+    readOnly,
+    onClick,
+    className,
+    ...props
+}) => {
+    return (
+        <Button
+            className={clsx(styles.tokenSelector, readOnly && styles.readOnly, className)}
+            variant="gray"
+            size="s"
+            onClick={readOnly ? undefined : onClick}
+            {...props}
+        >
+            {networkIcon ? (
+                <LogoWithNetwork
+                    size={24}
+                    src={icon}
+                    fallback={iconFallback || title[0]}
+                    alt={title}
+                    networkSrc={networkIcon}
+                />
+            ) : (
+                <Logo size={24} src={icon} fallback={iconFallback || title[0]} alt={title} />
+            )}
+
+            <span className={styles.symbol}>{title}</span>
+
+            {!readOnly && (
+                <svg width="12" height="8" viewBox="0 0 12 8" fill="none" className={styles.chevron}>
+                    <path
+                        d="M1 1.5L6 6.5L11 1.5"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            )}
+        </Button>
+    );
+};
diff --git a/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.stories.tsx b/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.stories.tsx
new file mode 100644
index 000000000..0effb8daa
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.stories.tsx
@@ -0,0 +1,69 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { AmountReversed } from './amount-reversed';
+
+const meta: Meta<typeof AmountReversed> = {
+    title: 'Components/UI/AmountReversed',
+    component: AmountReversed,
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AmountReversed>;
+
+export const Default: Story = {
+    args: {
+        value: '144.74',
+        ticker: 'USDT',
+        decimals: 6,
+    },
+};
+
+export const WithSymbol: Story = {
+    args: {
+        value: '144.74',
+        symbol: '$',
+        decimals: 2,
+    },
+};
+
+export const WithDirectionToggle: Story = {
+    args: {
+        value: '100',
+        ticker: 'TON',
+        decimals: 9,
+        onChangeDirection: fn(),
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        value: '100',
+        ticker: 'TON',
+        isLoading: true,
+    },
+};
+
+export const ZeroValue: Story = {
+    args: {
+        value: '',
+        ticker: 'TON',
+    },
+};
+
+export const Error: Story = {
+    args: {
+        value: '0',
+        errorMessage: 'Unable to fetch quote',
+    },
+};
diff --git a/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx
index cf526e846..c30e497f2 100644
--- a/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx
+++ b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx
@@ -20,6 +20,7 @@ export interface CenteredAmountInputProps extends ComponentProps<'div'> {
     ticker?: string;
     symbol?: string;
     placeholder?: string;
+    disabled?: boolean;
 }
 
 export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
@@ -28,6 +29,7 @@ export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
     ticker,
     symbol,
     placeholder = '0',
+    disabled,
     className,
     ...props
 }) => {
@@ -97,6 +99,7 @@ export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
                     inputMode="decimal"
                     placeholder={placeholder}
                     value={value}
+                    disabled={disabled}
                     onChange={(e) => onValueChange(e.target.value)}
                     style={{
                         width: inputWidth ? `${inputWidth}px` : undefined,
diff --git a/packages/appkit-react/src/components/ui/dialog/dialog.stories.tsx b/packages/appkit-react/src/components/ui/dialog/dialog.stories.tsx
new file mode 100644
index 000000000..d2992dc97
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/dialog/dialog.stories.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 { useState } from 'react';
+import type { CSSProperties } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Dialog } from './dialog';
+import { Button } from '../button';
+
+const meta: Meta<typeof Dialog.Root> = {
+    title: 'Components/UI/Dialog',
+    component: Dialog.Root,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog.Root>;
+
+const overlayStyle: CSSProperties = {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0, 0, 0, 0.4)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+};
+
+const contentStyle: CSSProperties = {
+    background: 'var(--ta-color-background)',
+    color: 'var(--ta-color-text)',
+    padding: 24,
+    borderRadius: 16,
+    minWidth: 320,
+    boxShadow: '0 10px 25px rgba(0,0,0,0.2)',
+};
+
+export const Default: Story = {
+    render: () => {
+        const Wrapper = () => {
+            const [open, setOpen] = useState(false);
+            return (
+                <>
+                    <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+                    <Dialog.Root open={open} onOpenChange={setOpen}>
+                        <Dialog.Portal>
+                            <Dialog.Overlay style={overlayStyle} onClick={() => setOpen(false)}>
+                                <Dialog.Content style={contentStyle} onClick={(e) => e.stopPropagation()}>
+                                    <Dialog.Title style={{ margin: '0 0 12px' }}>Dialog title</Dialog.Title>
+                                    <p style={{ margin: '0 0 16px' }}>
+                                        Bare Dialog primitive. Most consumers should use the higher-level Modal
+                                        component instead.
+                                    </p>
+                                    <Dialog.Close
+                                        style={{
+                                            background: 'var(--ta-color-primary)',
+                                            color: 'var(--ta-color-primary-foreground)',
+                                            border: 'none',
+                                            padding: '8px 16px',
+                                            borderRadius: 8,
+                                            cursor: 'pointer',
+                                        }}
+                                    >
+                                        Close
+                                    </Dialog.Close>
+                                </Dialog.Content>
+                            </Dialog.Overlay>
+                        </Dialog.Portal>
+                    </Dialog.Root>
+                </>
+            );
+        };
+        return <Wrapper />;
+    },
+};
diff --git a/packages/appkit-react/src/components/ui/icons/check-icon.tsx b/packages/appkit-react/src/components/ui/icons/check-icon.tsx
new file mode 100644
index 000000000..de9f70b0c
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/icons/check-icon.tsx
@@ -0,0 +1,32 @@
+/**
+ * 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 { FC } from 'react';
+
+import { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const CheckIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            d="M3 8l3.5 3.5L13 4.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
diff --git a/packages/appkit-react/src/components/ui/icons/copy-icon.tsx b/packages/appkit-react/src/components/ui/icons/copy-icon.tsx
new file mode 100644
index 000000000..cb7413c5a
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/icons/copy-icon.tsx
@@ -0,0 +1,32 @@
+/**
+ * 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 { FC } from 'react';
+
+import { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const CopyIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+        <path
+            d="M3.5 10.5H3a1.5 1.5 0 0 1-1.5-1.5V3A1.5 1.5 0 0 1 3 1.5h6A1.5 1.5 0 0 1 10.5 3v.5"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+        />
+    </svg>
+);
diff --git a/packages/appkit-react/src/components/ui/icons/icons.stories.tsx b/packages/appkit-react/src/components/ui/icons/icons.stories.tsx
index cf6bc056e..7f723f006 100644
--- a/packages/appkit-react/src/components/ui/icons/icons.stories.tsx
+++ b/packages/appkit-react/src/components/ui/icons/icons.stories.tsx
@@ -9,9 +9,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { FC } from 'react';
 
+import { CheckIcon } from './check-icon';
 import { ChevronsIcon } from './chevrons-icon';
 import { ChevronDownIcon } from './chevron-down-icon';
 import { CloseIcon } from './close-icon';
+import { CopyIcon } from './copy-icon';
 import { FailedIcon } from './failed-icon';
 import { FlipIcon } from './flip-icon';
 import { ImageIcon } from './image-icon';
@@ -24,9 +26,11 @@ import { VerifiedIcon } from './verified-icon';
 import type { IconProps } from './types';
 
 const ICONS: { name: string; Component: FC<IconProps> }[] = [
+    { name: 'CheckIcon', Component: CheckIcon },
     { name: 'ChevronsIcon', Component: ChevronsIcon },
     { name: 'ChevronDownIcon', Component: ChevronDownIcon },
     { name: 'CloseIcon', Component: CloseIcon },
+    { name: 'CopyIcon', Component: CopyIcon },
     { name: 'FailedIcon', Component: FailedIcon },
     { name: 'FlipIcon', Component: FlipIcon },
     { name: 'ImageIcon', Component: ImageIcon },
diff --git a/packages/appkit-react/src/components/ui/icons/index.ts b/packages/appkit-react/src/components/ui/icons/index.ts
index 0c96d882e..257d14e5a 100644
--- a/packages/appkit-react/src/components/ui/icons/index.ts
+++ b/packages/appkit-react/src/components/ui/icons/index.ts
@@ -7,9 +7,11 @@
  */
 
 export * from './types';
+export * from './check-icon';
 export * from './chevrons-icon';
 export * from './chevron-down-icon';
 export * from './close-icon';
+export * from './copy-icon';
 export * from './failed-icon';
 export * from './flip-icon';
 export * from './image-icon';
diff --git a/packages/appkit-react/src/components/ui/logo-with-network/index.ts b/packages/appkit-react/src/components/ui/logo-with-network/index.ts
new file mode 100644
index 000000000..83f096f19
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/logo-with-network/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { LogoWithNetwork } from './logo-with-network';
+export type { LogoWithNetworkProps } from './logo-with-network';
diff --git a/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.module.css b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.module.css
new file mode 100644
index 000000000..6ca8df325
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.module.css
@@ -0,0 +1,16 @@
+.root {
+	position: relative;
+	display: inline-flex;
+}
+
+.networkBadge {
+	position: absolute;
+	bottom: -2px;
+	right: -2px;
+	border: var(--ta-border-width-m) solid var(--ta-color-background);
+	border-radius: var(--ta-border-radius-full);
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
diff --git a/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.stories.tsx b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.stories.tsx
new file mode 100644
index 000000000..7d72901de
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.stories.tsx
@@ -0,0 +1,53 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LogoWithNetwork } from './logo-with-network';
+
+const meta: Meta<typeof LogoWithNetwork> = {
+    title: 'Components/UI/LogoWithNetwork',
+    component: LogoWithNetwork,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'range', min: 20, max: 100, step: 5 },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LogoWithNetwork>;
+
+export const WithNetworkBadge: Story = {
+    args: {
+        size: 40,
+        src: 'https://ton.org/download/ton_symbol.png',
+        alt: 'TON',
+        networkSrc: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
+        networkAlt: 'ETH',
+    },
+};
+
+export const FallbackOnly: Story = {
+    args: {
+        size: 40,
+        fallback: 'BTC',
+        alt: 'BTC',
+        networkAlt: 'ETH',
+    },
+};
+
+export const WithoutNetwork: Story = {
+    args: {
+        size: 40,
+        src: 'https://ton.org/download/ton_symbol.png',
+        alt: 'TON',
+    },
+};
diff --git a/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.tsx b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.tsx
new file mode 100644
index 000000000..c62f53c74
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/logo-with-network/logo-with-network.tsx
@@ -0,0 +1,46 @@
+/**
+ * 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 { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ComponentRef } from 'react';
+import clsx from 'clsx';
+
+import { Logo } from '../logo';
+import styles from './logo-with-network.module.css';
+
+export interface LogoWithNetworkProps extends ComponentPropsWithoutRef<'span'> {
+    /** Size of the main logo in pixels */
+    size?: number;
+    /** Image source for the main logo */
+    src?: string;
+    /** Alt text for the main logo */
+    alt?: string;
+    /** Fallback text for the main logo */
+    fallback?: string;
+    /** Image source for the network badge */
+    networkSrc?: string;
+    /** Alt text for the network badge */
+    networkAlt?: string;
+}
+
+export const LogoWithNetwork = forwardRef<ComponentRef<'span'>, LogoWithNetworkProps>(
+    ({ size = 30, src, alt, fallback, networkSrc, networkAlt, className, ...props }, ref) => {
+        return (
+            <span ref={ref} className={clsx(styles.root, className)} {...props}>
+                <Logo size={size} src={src} alt={alt} fallback={fallback} />
+                {!!networkSrc && (
+                    <span className={styles.networkBadge}>
+                        <Logo size={size * 0.4} src={networkSrc} alt={networkAlt} fallback={networkAlt?.[0]} />
+                    </span>
+                )}
+            </span>
+        );
+    },
+);
+
+LogoWithNetwork.displayName = 'LogoWithNetwork';
diff --git a/packages/appkit-react/src/components/ui/logo/logo.tsx b/packages/appkit-react/src/components/ui/logo/logo.tsx
index b325bf4f7..1a2bf3c04 100644
--- a/packages/appkit-react/src/components/ui/logo/logo.tsx
+++ b/packages/appkit-react/src/components/ui/logo/logo.tsx
@@ -95,7 +95,11 @@ export interface LogoProps extends ComponentPropsWithoutRef<'span'> {
 
 export const Logo = forwardRef<ComponentRef<'span'>, LogoProps>(({ size = 30, src, alt, fallback, ...props }, ref) => {
     return (
-        <LogoRoot ref={ref} style={{ width: size, height: size }} {...props}>
+        <LogoRoot
+            ref={ref}
+            style={{ width: size, height: size, minWidth: size, minHeight: size, maxWidth: size, maxHeight: size }}
+            {...props}
+        >
             <LogoImage src={src} alt={alt} />
 
             {(fallback || alt) && <LogoFallback delayMs={600}>{fallback ? fallback : alt?.[0]}</LogoFallback>}
diff --git a/packages/appkit-react/src/components/ui/modal/modal.tsx b/packages/appkit-react/src/components/ui/modal/modal.tsx
index 126c1c40f..d090e4dd6 100644
--- a/packages/appkit-react/src/components/ui/modal/modal.tsx
+++ b/packages/appkit-react/src/components/ui/modal/modal.tsx
@@ -34,9 +34,13 @@ export interface ModalProps {
      * Additional class name for the content container.
      */
     className?: string;
+    /**
+     * Additional class name for the body container.
+     */
+    bodyClassName?: string;
 }
 
-export const Modal: FC<ModalProps> = ({ open, onOpenChange, title, children, className }) => {
+export const Modal: FC<ModalProps> = ({ open, onOpenChange, title, children, className, bodyClassName }) => {
     return (
         <Dialog.Root open={open} onOpenChange={onOpenChange}>
             <Dialog.Portal>
@@ -48,7 +52,7 @@ export const Modal: FC<ModalProps> = ({ open, onOpenChange, title, children, cla
                                 <CloseIcon size={12} />
                             </Dialog.Close>
                         </div>
-                        <div className={styles.body}>{children}</div>
+                        <div className={clsx(styles.body, bodyClassName)}>{children}</div>
                     </Dialog.Content>
                 </Dialog.Overlay>
             </Dialog.Portal>
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.tsx b/packages/appkit-react/src/features/balances/components/currency-item/currency-item.tsx
deleted file mode 100644
index ee65a5471..000000000
--- a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * 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 { FC, ComponentProps } from 'react';
-import clsx from 'clsx';
-
-import { Logo } from '../../../../components/ui/logo';
-import { VerifiedIcon } from '../../../../components/ui/icons';
-import styles from './currency-item.module.css';
-
-export interface CurrencyItemProps extends ComponentProps<'button'> {
-    ticker: string;
-    name?: string;
-    balance?: string;
-    icon?: string;
-    isVerified?: boolean;
-}
-
-export const CurrencyItem: FC<CurrencyItemProps> = ({
-    ticker,
-    name,
-    balance,
-    icon,
-    isVerified,
-    className,
-    ...props
-}) => {
-    return (
-        <button className={clsx(styles.currencyItem, className)} {...props}>
-            <Logo className={styles.icon} size={40} src={icon} fallback={ticker[0]} alt={ticker} />
-
-            <div className={styles.info}>
-                <div className={styles.header}>
-                    <h4 className={styles.name}>{name || ticker}</h4>
-
-                    {isVerified && <VerifiedIcon className={styles.verified} />}
-                </div>
-
-                <p className={styles.ticker}>
-                    {ticker} • {name}
-                </p>
-            </div>
-
-            {balance && (
-                <div className={styles.balance}>
-                    <p>{balance ?? '0'}</p>
-                </div>
-            )}
-        </button>
-    );
-};
diff --git a/packages/appkit-react/src/features/balances/index.ts b/packages/appkit-react/src/features/balances/index.ts
index da4991e6d..e5a7a0f1d 100644
--- a/packages/appkit-react/src/features/balances/index.ts
+++ b/packages/appkit-react/src/features/balances/index.ts
@@ -6,7 +6,6 @@
  *
  */
 
-export * from './components/currency-item';
 export * from './components/balance-badge';
 export * from './components/send-ton-button';
 export * from './components/send-jetton-button';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/index.ts
new file mode 100644
index 000000000..d07d5150b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampAmountReversed } from './onramp-amount-reversed';
+export type { OnrampAmountReversedProps } from './onramp-amount-reversed';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.module.css b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.module.css
new file mode 100644
index 000000000..07bacc131
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.module.css
@@ -0,0 +1,28 @@
+.container {
+    composes: bodySemibold from '../../../../styles/typography.module.css';
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: text;
+    width: 100%;
+    overflow: hidden;
+    color: var(--ta-color-text-secondary);
+    gap: 8px;
+}
+
+.changeDirection {
+    width: 14px;
+    height: 14px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+    color: var(--ta-color-text);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.changeDirection:hover {
+    opacity: 0.8;
+}
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.tsx b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.tsx
new file mode 100644
index 000000000..67a0a7c52
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.tsx
@@ -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 { FC } from 'react';
+
+import { AmountReversed } from '../../../../components/ui/amount-reversed';
+import type { AmountReversedProps } from '../../../../components/ui/amount-reversed';
+
+export interface OnrampAmountReversedProps extends Omit<AmountReversedProps, 'onChangeDirection'> {
+    onChangeDirection: () => void;
+}
+
+export const OnrampAmountReversed: FC<OnrampAmountReversedProps> = (props) => (
+    <AmountReversed {...props} decimals={2} />
+);
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-currency-item/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-currency-item/index.ts
new file mode 100644
index 000000000..fe67367b2
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-currency-item/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampCurrencyItem } from './onramp-currency-item';
+export type { OnrampCurrencyItemProps } from './onramp-currency-item';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-currency-item/onramp-currency-item.tsx b/packages/appkit-react/src/features/onramp/components/onramp-currency-item/onramp-currency-item.tsx
new file mode 100644
index 000000000..be0e40347
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-currency-item/onramp-currency-item.tsx
@@ -0,0 +1,31 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+
+import { CurrencyItem } from '../../../../components/shared/currency-item';
+import type { OnrampCurrency } from '../../types';
+
+export interface OnrampCurrencyItemProps extends ComponentProps<typeof CurrencyItem.Container> {
+    currency: OnrampCurrency;
+}
+
+export const OnrampCurrencyItem: FC<OnrampCurrencyItemProps> = ({ currency, ...props }) => {
+    return (
+        <CurrencyItem.Container {...props}>
+            <CurrencyItem.Logo src={currency.logo} fallback={currency.code[0]} alt={currency.code} />
+            <CurrencyItem.Info>
+                <CurrencyItem.Header>
+                    <CurrencyItem.Name>{currency.name}</CurrencyItem.Name>
+                </CurrencyItem.Header>
+
+                <CurrencyItem.Ticker>{currency.code}</CurrencyItem.Ticker>
+            </CurrencyItem.Info>
+        </CurrencyItem.Container>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/index.ts
new file mode 100644
index 000000000..58d97ad04
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampCurrencySelectModal } from './onramp-currency-select-modal';
+export type { OnrampCurrencySelectModalProps } from './onramp-currency-select-modal';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/onramp-currency-select-modal.tsx b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/onramp-currency-select-modal.tsx
new file mode 100644
index 000000000..4d9d69913
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/onramp-currency-select-modal.tsx
@@ -0,0 +1,86 @@
+/**
+ * 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 { useMemo, useState } from 'react';
+import type { FC } from 'react';
+
+import { CurrencySelect } from '../../../../components/shared/currency-select-modal';
+import type { OnrampCurrency, CurrencySectionConfig } from '../../types';
+import { OnrampCurrencyItem } from '../onramp-currency-item';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { filterCurrencies, groupCurrencySections } from './utils';
+import type { CurrencySection } from './utils';
+
+export interface OnrampCurrencySelectModalProps {
+    open: boolean;
+    onClose: () => void;
+    currencies: OnrampCurrency[];
+    currencySections?: CurrencySectionConfig[];
+    onSelect: (currency: OnrampCurrency) => void;
+}
+
+export const OnrampCurrencySelectModal: FC<OnrampCurrencySelectModalProps> = ({
+    open,
+    onClose,
+    currencies,
+    currencySections,
+    onSelect,
+}) => {
+    const { t } = useI18n();
+    const [search, setSearch] = useState('');
+
+    const displaySections = useMemo((): CurrencySection[] => {
+        if (search) {
+            return [{ title: '', currencies: filterCurrencies(currencies, search) }];
+        }
+        if (currencySections) {
+            return groupCurrencySections(currencies, currencySections, t('tokenSelect.otherCurrencies'));
+        }
+        return [{ title: '', currencies }];
+    }, [currencies, currencySections, search, t]);
+
+    const isEmpty = displaySections.every((s) => s.currencies.length === 0);
+
+    const handleSelect = (currency: OnrampCurrency) => () => {
+        onSelect(currency);
+        onClose();
+        setSearch('');
+    };
+
+    const handleOpenChange = (isOpen: boolean) => {
+        if (!isOpen) {
+            onClose();
+            setSearch('');
+        }
+    };
+
+    return (
+        <CurrencySelect.Modal open={open} onOpenChange={handleOpenChange} title={t('onramp.selectCurrency')}>
+            <CurrencySelect.Search
+                searchValue={search}
+                onSearchChange={setSearch}
+                placeholder={t('onramp.searchCurrency')}
+            />
+
+            <CurrencySelect.ListContainer isEmpty={isEmpty}>
+                {displaySections.map((section) => (
+                    <CurrencySelect.Section key={section.title}>
+                        {section.title && <CurrencySelect.SectionHeader>{section.title}</CurrencySelect.SectionHeader>}
+                        {section.currencies.map((currency) => (
+                            <OnrampCurrencyItem
+                                key={currency.code}
+                                currency={currency}
+                                onClick={handleSelect(currency)}
+                            />
+                        ))}
+                    </CurrencySelect.Section>
+                ))}
+            </CurrencySelect.ListContainer>
+        </CurrencySelect.Modal>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/utils.ts b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/utils.ts
new file mode 100644
index 000000000..66057a46a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/utils.ts
@@ -0,0 +1,48 @@
+/**
+ * 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 { OnrampCurrency, CurrencySectionConfig } from '../../types';
+
+export interface CurrencySection {
+    title: string;
+    currencies: OnrampCurrency[];
+}
+
+export const filterCurrencies = (currencies: OnrampCurrency[], search: string): OnrampCurrency[] => {
+    if (!search) return currencies;
+    const lower = search.toLowerCase();
+    return currencies.filter((c) => c.name.toLowerCase().includes(lower) || c.code.toLowerCase().includes(lower));
+};
+
+export const groupCurrencySections = (
+    currencies: OnrampCurrency[],
+    sections: CurrencySectionConfig[],
+    otherTitle: string,
+): CurrencySection[] => {
+    const currencyById = new Map(currencies.map((c) => [c.id, c]));
+    const assignedIds = new Set<string>();
+
+    const result: CurrencySection[] = sections.map(({ title, ids }) => ({
+        title,
+        currencies: ids.flatMap((id) => {
+            const c = currencyById.get(id);
+            if (c) {
+                assignedIds.add(id);
+                return [c];
+            }
+            return [];
+        }),
+    }));
+
+    const remaining = currencies.filter((c) => !assignedIds.has(c.id));
+    if (remaining.length > 0) {
+        result.push({ title: otherTitle, currencies: remaining });
+    }
+
+    return result.filter((s) => s.currencies.length > 0);
+};
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-item/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/index.ts
new file mode 100644
index 000000000..0213d7109
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampProviderItem } from './onramp-provider-item';
+export type { OnrampProviderItemProps } from './onramp-provider-item';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.module.css b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.module.css
new file mode 100644
index 000000000..815d8f0bd
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.module.css
@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    text-align: left;
+    align-items: center;
+    padding: 16px;
+    gap: 12px;
+    border: var(--ta-border-width-m) solid var(--ta-color-background-tertiary);
+    border-radius: var(--ta-border-radius-xl);
+    cursor: pointer;
+    background: transparent;
+}
+
+.icon {
+    border-radius: var(--ta-border-radius-s);
+}
+
+.name {
+    composes: bodySemibold from "../../../../styles/typography.module.css";
+    color: var(--ta-color-text);
+}
+
+.methods {
+    composes: labelRegular from "../../../../styles/typography.module.css";
+    color: var(--ta-color-text-secondary);
+}
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.tsx b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.tsx
new file mode 100644
index 000000000..6de9a4f49
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.tsx
@@ -0,0 +1,36 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import type { OnrampProvider } from '../../types';
+import { Logo } from '../../../../components/ui/logo';
+import styles from './onramp-provider-item.module.css';
+
+export interface OnrampProviderItemProps extends ComponentProps<'button'> {
+    provider: OnrampProvider;
+}
+
+export const OnrampProviderItem: FC<OnrampProviderItemProps> = ({ provider, className, ...props }) => {
+    return (
+        <button type="button" className={clsx(styles.container, className)} {...props}>
+            <Logo
+                className={styles.icon}
+                size={40}
+                src={provider.logo}
+                fallback={provider.name[0]}
+                alt={provider.name}
+            />
+            <div className={styles.info}>
+                <div className={styles.name}>{provider.name}</div>
+                <div className={styles.methods}>{provider.description}</div>
+            </div>
+        </button>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-select/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/index.ts
new file mode 100644
index 000000000..2853976e1
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampProviderSelect } from './onramp-provider-select';
+export type { OnrampProviderSelectProps } from './onramp-provider-select';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.module.css b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.module.css
new file mode 100644
index 000000000..bcac7f253
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.module.css
@@ -0,0 +1,7 @@
+.list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.tsx b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.tsx
new file mode 100644
index 000000000..7af5d8f72
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 { FC } from 'react';
+
+import { Modal } from '../../../../components/ui/modal';
+import type { OnrampProvider } from '../../types';
+import styles from './onramp-provider-select.module.css';
+import { OnrampProviderItem } from '../onramp-provider-item';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+
+export interface OnrampProviderSelectProps {
+    open: boolean;
+    onClose: () => void;
+    providers: OnrampProvider[];
+    onSelect: (provider: OnrampProvider) => void;
+}
+
+export const OnrampProviderSelect: FC<OnrampProviderSelectProps> = ({ open, onClose, providers, onSelect }) => {
+    const { t } = useI18n();
+
+    const handleSelect = (provider: OnrampProvider) => () => {
+        onSelect(provider);
+        onClose();
+    };
+
+    return (
+        <Modal open={open} onOpenChange={(isOpen) => !isOpen && onClose()} title={t('onramp.checkout')}>
+            <div className={styles.list}>
+                {providers.map((provider) => (
+                    <OnrampProviderItem key={provider.id} provider={provider} onClick={handleSelect(provider)} />
+                ))}
+            </div>
+        </Modal>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/index.ts b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/index.ts
new file mode 100644
index 000000000..c8a0ddb8a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampTokenSelectors } from './onramp-token-selectors';
+export type { OnrampTokenSelectorsProps } from './onramp-token-selectors';
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.module.css b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.module.css
new file mode 100644
index 000000000..78a94fcc4
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.module.css
@@ -0,0 +1,11 @@
+.container {
+    display: grid;
+    gap: 4px;
+    padding: 2px;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+}
+
+.tokenSelector {
+    width: 100%;
+}
diff --git a/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.tsx b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.tsx
new file mode 100644
index 000000000..052845cc6
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.tsx
@@ -0,0 +1,55 @@
+/**
+ * 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 { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import styles from './onramp-token-selectors.module.css';
+import { TokenSelector } from '../../../../components/shared/token-selector';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+
+export interface OnrampTokenSelectorsProps extends ComponentProps<'div'> {
+    from: { title: string; logoSrc?: string; network?: string; networkLogoSrc?: string };
+    to: { title: string; logoSrc?: string; network?: string; networkLogoSrc?: string };
+    onFromClick: () => void;
+    onToClick: () => void;
+}
+
+export const OnrampTokenSelectors: FC<OnrampTokenSelectorsProps> = ({
+    from,
+    to,
+    onFromClick,
+    onToClick,
+    className,
+    ...props
+}) => {
+    const { t } = useI18n();
+
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            <TokenSelector
+                size="m"
+                variant="secondary"
+                className={styles.tokenSelector}
+                title={t('onramp.buyToken', { symbol: from.title })}
+                icon={from.logoSrc}
+                onClick={onFromClick}
+            />
+
+            <TokenSelector
+                size="m"
+                variant="secondary"
+                className={styles.tokenSelector}
+                title={t('onramp.forCurrency', { symbol: to.title })}
+                icon={to.logoSrc}
+                networkIcon={to.networkLogoSrc}
+                onClick={onToClick}
+            />
+        </div>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/constants.ts b/packages/appkit-react/src/features/onramp/constants.ts
new file mode 100644
index 000000000..00efe7d1a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/constants.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 { OnrampAmountPreset } from './types';
+
+export const DEFAULT_ONRAMP_PRESETS: OnrampAmountPreset[] = [
+    { amount: '100', label: '100' },
+    { amount: '250', label: '250' },
+    { amount: '500', label: '500' },
+    { amount: '1000', label: '1000' },
+];
+
+export const NATIVE_TON_ADDRESS = '0x0000000000000000000000000000000000000000';
+
+export const ERROR_THRESHOLD = 10000000;
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-build-onramp-url.ts b/packages/appkit-react/src/features/onramp/hooks/use-build-onramp-url.ts
new file mode 100644
index 000000000..9d45f6ec3
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-build-onramp-url.ts
@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import type { UseMutationResult } from '@tanstack/react-query';
+import { buildOnrampUrlMutationOptions } from '@ton/appkit/queries';
+import type {
+    BuildOnrampUrlData,
+    BuildOnrampUrlErrorType,
+    BuildOnrampUrlMutationOptions,
+    BuildOnrampUrlVariables,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useMutation } from '../../../libs/query';
+
+export type UseBuildOnrampUrlParameters<context = unknown> = BuildOnrampUrlMutationOptions<context>;
+
+export type UseBuildOnrampUrlReturnType<context = unknown> = UseMutationResult<
+    BuildOnrampUrlData,
+    BuildOnrampUrlErrorType,
+    BuildOnrampUrlVariables,
+    context
+>;
+
+/**
+ * Hook to build onramp URL
+ */
+export const useBuildOnrampUrl = <context = unknown>(
+    parameters: UseBuildOnrampUrlParameters<context> = {},
+): UseBuildOnrampUrlReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation({
+        ...buildOnrampUrlMutationOptions<context>(appKit),
+        ...parameters.mutation,
+    });
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-create-crypto-onramp-deposit.ts b/packages/appkit-react/src/features/onramp/hooks/use-create-crypto-onramp-deposit.ts
new file mode 100644
index 000000000..510536933
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-create-crypto-onramp-deposit.ts
@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import type { UseMutationResult } from '@tanstack/react-query';
+import { createCryptoOnrampDepositMutationOptions } from '@ton/appkit/queries';
+import type {
+    CreateCryptoOnrampDepositData,
+    CreateCryptoOnrampDepositErrorType,
+    CreateCryptoOnrampDepositMutationOptions,
+    CreateCryptoOnrampDepositVariables,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useMutation } from '../../../libs/query';
+
+export type UseCreateCryptoOnrampDepositParameters<context = unknown> =
+    CreateCryptoOnrampDepositMutationOptions<context>;
+
+export type UseCreateCryptoOnrampDepositReturnType<context = unknown> = UseMutationResult<
+    CreateCryptoOnrampDepositData,
+    CreateCryptoOnrampDepositErrorType,
+    CreateCryptoOnrampDepositVariables,
+    context
+>;
+
+/**
+ * Hook to create a crypto onramp deposit from a previously obtained quote
+ */
+export const useCreateCryptoOnrampDeposit = <context = unknown>(
+    parameters: UseCreateCryptoOnrampDepositParameters<context> = {},
+): UseCreateCryptoOnrampDepositReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation({
+        ...createCryptoOnrampDepositMutationOptions<context>(appKit),
+        ...parameters.mutation,
+    });
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-provider.ts b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-provider.ts
new file mode 100644
index 000000000..d924c7648
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-provider.ts
@@ -0,0 +1,42 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getCryptoOnrampProvider, watchCryptoOnrampProviders } from '@ton/appkit';
+import type { GetCryptoOnrampProviderOptions, GetCryptoOnrampProviderReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseCryptoOnrampProviderReturnType = GetCryptoOnrampProviderReturnType;
+
+/**
+ * Hook to get a registered crypto-onramp provider by id, or the default one when no id is given.
+ */
+export const useCryptoOnrampProvider = (
+    options: GetCryptoOnrampProviderOptions = {},
+): UseCryptoOnrampProviderReturnType | undefined => {
+    const appKit = useAppKit();
+    const { id } = options;
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchCryptoOnrampProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        try {
+            return getCryptoOnrampProvider(appKit, { id });
+        } catch {
+            return undefined;
+        }
+    }, [appKit, id]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-providers.ts b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-providers.ts
new file mode 100644
index 000000000..6b2457531
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-providers.ts
@@ -0,0 +1,35 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getCryptoOnrampProviders, watchCryptoOnrampProviders } from '@ton/appkit';
+import type { GetCryptoOnrampProvidersReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseCryptoOnrampProvidersReturnType = GetCryptoOnrampProvidersReturnType;
+
+/**
+ * Hook to get all registered crypto-onramp providers.
+ */
+export const useCryptoOnrampProviders = (): UseCryptoOnrampProvidersReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchCryptoOnrampProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getCryptoOnrampProviders(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-quote.ts b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-quote.ts
new file mode 100644
index 000000000..e77851ee7
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-quote.ts
@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import { getCryptoOnrampQuoteQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetCryptoOnrampQuoteData,
+    GetCryptoOnrampQuoteErrorType,
+    GetCryptoOnrampQuoteQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseCryptoOnrampQuoteParameters<selectData = GetCryptoOnrampQuoteData> =
+    GetCryptoOnrampQuoteQueryConfig<selectData>;
+
+export type UseCryptoOnrampQuoteReturnType<selectData = GetCryptoOnrampQuoteData> = UseQueryReturnType<
+    selectData,
+    GetCryptoOnrampQuoteErrorType
+>;
+
+/**
+ * Hook to get a crypto onramp quote
+ */
+export const useCryptoOnrampQuote = <selectData = GetCryptoOnrampQuoteData>(
+    parameters: UseCryptoOnrampQuoteParameters<selectData> = {},
+): UseCryptoOnrampQuoteReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getCryptoOnrampQuoteQueryOptions(appKit, parameters));
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-status.ts b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-status.ts
new file mode 100644
index 000000000..ef5671fa3
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-crypto-onramp-status.ts
@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import { getCryptoOnrampStatusQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetCryptoOnrampStatusData,
+    GetCryptoOnrampStatusErrorType,
+    GetCryptoOnrampStatusQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseCryptoOnrampStatusParameters<selectData = GetCryptoOnrampStatusData> =
+    GetCryptoOnrampStatusQueryConfig<selectData>;
+
+export type UseCryptoOnrampStatusReturnType<selectData = GetCryptoOnrampStatusData> = UseQueryReturnType<
+    selectData,
+    GetCryptoOnrampStatusErrorType
+>;
+
+/**
+ * Hook to get a crypto onramp quote
+ */
+export const useCryptoOnrampStatus = <selectData = GetCryptoOnrampStatusData>(
+    parameters: UseCryptoOnrampStatusParameters<selectData> = {},
+): UseCryptoOnrampStatusReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getCryptoOnrampStatusQueryOptions(appKit, parameters));
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-onramp-provider.ts b/packages/appkit-react/src/features/onramp/hooks/use-onramp-provider.ts
new file mode 100644
index 000000000..4cd81af39
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-onramp-provider.ts
@@ -0,0 +1,40 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getOnrampProvider, watchOnrampProviders } from '@ton/appkit/onramp';
+import type { GetOnrampProviderOptions, GetOnrampProviderReturnType } from '@ton/appkit/onramp';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseOnrampProviderReturnType = GetOnrampProviderReturnType;
+
+/**
+ * Hook to get onramp provider
+ */
+export const useOnrampProvider = (options: GetOnrampProviderOptions = {}): UseOnrampProviderReturnType | undefined => {
+    const appKit = useAppKit();
+    const { id } = options;
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchOnrampProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        try {
+            return getOnrampProvider(appKit, { id });
+        } catch {
+            return undefined;
+        }
+    }, [appKit, id]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-onramp-providers.ts b/packages/appkit-react/src/features/onramp/hooks/use-onramp-providers.ts
new file mode 100644
index 000000000..712ccd308
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-onramp-providers.ts
@@ -0,0 +1,35 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getOnrampProviders, watchOnrampProviders } from '@ton/appkit/onramp';
+import type { GetOnrampProvidersReturnType } from '@ton/appkit/onramp';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseOnrampProvidersReturnType = GetOnrampProvidersReturnType;
+
+/**
+ * Hook to get all registered onramp providers
+ */
+export const useOnrampProviders = (): UseOnrampProvidersReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchOnrampProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getOnrampProviders(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
diff --git a/packages/appkit-react/src/features/onramp/hooks/use-onramp-quote.ts b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quote.ts
new file mode 100644
index 000000000..5d8a5922d
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quote.ts
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import { getOnrampQuoteQueryOptions } from '@ton/appkit/queries';
+import type { GetOnrampQuoteData, GetOnrampQuoteErrorType, GetOnrampQuoteQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseOnrampQuoteParameters<selectData = GetOnrampQuoteData> = GetOnrampQuoteQueryConfig<selectData>;
+
+export type UseOnrampQuoteReturnType<selectData = GetOnrampQuoteData> = UseQueryReturnType<
+    selectData,
+    GetOnrampQuoteErrorType
+>;
+
+/**
+ * Hook to get onramp quote
+ */
+export const useOnrampQuote = <selectData = GetOnrampQuoteData>(
+    parameters: UseOnrampQuoteParameters<selectData> = {},
+): UseOnrampQuoteReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getOnrampQuoteQueryOptions(appKit, parameters));
+};
diff --git a/packages/appkit-react/src/features/onramp/index.ts b/packages/appkit-react/src/features/onramp/index.ts
new file mode 100644
index 000000000..07738c573
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/index.ts
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ */
+
+// export * from './widgets/fiat-onramp/onramp-widget';  // fiat-onramp: not ready
+
+export * from './widgets/crypto-onramp/crypto-onramp-widget';
+export * from './widgets/crypto-onramp/crypto-onramp-widget-ui';
+export * from './widgets/crypto-onramp/crypto-onramp-widget-provider';
+export * from './widgets/ton-pay-widget';
+
+export { useCryptoOnrampProvider, type UseCryptoOnrampProviderReturnType } from './hooks/use-crypto-onramp-provider';
+export { useCryptoOnrampProviders, type UseCryptoOnrampProvidersReturnType } from './hooks/use-crypto-onramp-providers';
+export {
+    useCryptoOnrampQuote,
+    type UseCryptoOnrampQuoteParameters,
+    type UseCryptoOnrampQuoteReturnType,
+} from './hooks/use-crypto-onramp-quote';
+export {
+    useCreateCryptoOnrampDeposit,
+    type UseCreateCryptoOnrampDepositParameters,
+    type UseCreateCryptoOnrampDepositReturnType,
+} from './hooks/use-create-crypto-onramp-deposit';
+export {
+    useCryptoOnrampStatus,
+    type UseCryptoOnrampStatusParameters,
+    type UseCryptoOnrampStatusReturnType,
+} from './hooks/use-crypto-onramp-status';
+
+export * from './types';
diff --git a/packages/appkit-react/src/features/onramp/mock-data/crypto-onramp-tokens.ts b/packages/appkit-react/src/features/onramp/mock-data/crypto-onramp-tokens.ts
new file mode 100644
index 000000000..77cf6d264
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/mock-data/crypto-onramp-tokens.ts
@@ -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 { CryptoOnrampToken } from '../types';
+
+/**
+ * Target tokens (what the user is buying on TON) for the crypto onramp widget.
+ *
+ * Addresses are in the raw form expected by the onramp provider.
+ */
+export const CRYPTO_ONRAMP_TARGET_TOKENS: CryptoOnrampToken[] = [
+    {
+        id: 'ton',
+        symbol: 'TON',
+        name: 'Toncoin',
+        decimals: 9,
+        address: '0x0000000000000000000000000000000000000000',
+        logo: 'https://pretty-picture-g2.s3.eu-central-1.amazonaws.com/ton_ebae1444e3.svg',
+    },
+    {
+        id: 'usdt-ton',
+        symbol: 'USDT',
+        name: 'Tether',
+        decimals: 6,
+        address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
+        logo: 'https://pretty-picture-g2.s3.eu-central-1.amazonaws.com/usdt20_9a8c677b99_c67aed2f04.svg',
+    },
+];
diff --git a/packages/appkit-react/src/features/onramp/mock-data/crypto-payment-methods.ts b/packages/appkit-react/src/features/onramp/mock-data/crypto-payment-methods.ts
new file mode 100644
index 000000000..2dc4cb42b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/mock-data/crypto-payment-methods.ts
@@ -0,0 +1,27 @@
+/**
+ * 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 { CryptoPaymentMethod } from '../types';
+
+/**
+ * Payment methods (source assets) supported by the current crypto onramp pipeline.
+ *
+ * Only EVM sources are included — non-EVM chains require a register-tx flow
+ * that the provider does not implement yet.
+ */
+export const CRYPTO_PAYMENT_METHODS: CryptoPaymentMethod[] = [
+    {
+        id: 'usdt0-arbitrum',
+        symbol: 'USDT0',
+        name: 'Tether USD0',
+        chain: 'eip155:42161',
+        decimals: 6,
+        address: '0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9',
+        logo: 'https://cdn.layerswap.io/layerswap/currencies/usdt0.png',
+    },
+];
diff --git a/packages/appkit-react/src/features/onramp/mock-data/currencies.ts b/packages/appkit-react/src/features/onramp/mock-data/currencies.ts
new file mode 100644
index 000000000..edb84bebf
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/mock-data/currencies.ts
@@ -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 { OnrampCurrency } from '../types';
+
+export const ONRAMP_CURRENCIES: OnrampCurrency[] = [
+    {
+        id: 'eur',
+        code: 'EUR',
+        name: 'Euro',
+        symbol: '\u20AC',
+        logo: 'https://static.moonpay.com/widget/currencies/eur.svg',
+    },
+    {
+        id: 'usd',
+        code: 'USD',
+        name: 'US Dollar',
+        symbol: '$',
+        logo: 'https://static.moonpay.com/widget/currencies/usd.svg',
+    },
+    {
+        id: 'gbp',
+        code: 'GBP',
+        name: 'Pound Sterling',
+        symbol: '\u00A3',
+        logo: 'https://static.moonpay.com/widget/currencies/gbp.svg',
+    },
+];
diff --git a/packages/appkit-react/src/features/onramp/mock-data/providers.ts b/packages/appkit-react/src/features/onramp/mock-data/providers.ts
new file mode 100644
index 000000000..41c037297
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/mock-data/providers.ts
@@ -0,0 +1,36 @@
+/**
+ * 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 { OnrampProvider } from '../types';
+
+export const ONRAMP_PROVIDERS: OnrampProvider[] = [
+    {
+        id: 'moonpay',
+        name: 'MoonPay',
+        description: 'SEPA, PayPal, Debit Card and other options',
+        logo: 'https://images-serviceprovider.meld.io/MOONPAY/short_logo_light.png',
+    },
+    {
+        id: 'transak',
+        name: 'Transak',
+        description: 'Debit Card, Apple Pay, Google Pay, SEPA',
+        logo: 'https://cdn.meld.io/images-serviceprovider/TRANSAK/short_logo_light.png',
+    },
+    {
+        id: 'binance',
+        name: 'Binance',
+        description: 'Debit Card, Apple Pay, Binance Cash Balance and other options',
+        logo: 'https://cdn.meld.io/images-serviceprovider/BINANCECONNECT/short_logo_light.png',
+    },
+    {
+        id: 'mercuryo',
+        name: 'Mercuryo',
+        description: 'Debit Card, Apple Pay, Google Pay, SEPA',
+        logo: 'https://static.mercuryo.io/logo/mercuryo-logo.svg',
+    },
+];
diff --git a/packages/appkit-react/src/features/onramp/types.ts b/packages/appkit-react/src/features/onramp/types.ts
new file mode 100644
index 000000000..e86f30651
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/types.ts
@@ -0,0 +1,84 @@
+/**
+ * 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.
+ *
+ */
+
+export interface OnrampCurrency {
+    id: string;
+    code: string;
+    name: string;
+    symbol?: string;
+    logo?: string;
+}
+
+export interface OnrampProvider {
+    id: string;
+    name: string;
+    description?: string;
+    logo?: string;
+}
+
+export interface CurrencySectionConfig {
+    title: string;
+    ids: string[];
+}
+
+export type AmountInputMode = 'token' | 'currency';
+
+export interface OnrampAmountPreset {
+    amount: string;
+    label: string;
+}
+
+export interface CryptoPaymentMethod {
+    /** Stable identifier for the method — used for selection state and `methodSections.ids` */
+    id: string;
+    /** Token symbol, e.g. "USDC", "USDT" */
+    symbol: string;
+    /** Full token name shown in the picker, e.g. "USD Coin", "Tether" */
+    name: string;
+    /**
+     * Source chain in CAIP-2 format, e.g. "eip155:8453", "eip155:56" — passed
+     * as `sourceChain` to the onramp provider. The widget resolves a display
+     * name and logo for it via the `chains` map (see `CryptoOnrampWidgetProvider`).
+     */
+    chain: string;
+    /** Number of decimals for the token (used to convert between display and base units) */
+    decimals: number;
+    /** Token contract address on the source network (empty string / zero address for native) */
+    address: string;
+    /** Token logo URL shown in the picker and selectors */
+    logo?: string;
+}
+
+export interface PaymentMethodSectionConfig {
+    title: string;
+    ids: string[];
+}
+
+/**
+ * Target token (what the user is buying on TON) in the crypto onramp widget.
+ * Kept separate from AppkitUIToken because `address` is the raw form expected
+ * by the onramp provider (e.g. "0x0000000000000000000000000000000000000000"
+ * for native TON, "EQCx..." for USDT jetton master).
+ */
+export interface CryptoOnrampToken {
+    id: string;
+    /** Token symbol, e.g. "TON", "USDT" */
+    symbol: string;
+    /** Full token name, e.g. "Toncoin", "Tether" */
+    name: string;
+    /** Number of decimals for the token */
+    decimals: number;
+    /** Address as the onramp provider expects it */
+    address: string;
+    logo?: string;
+}
+
+export interface CryptoOnrampTokenSectionConfig {
+    title: string;
+    ids: string[];
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.module.css b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.module.css
new file mode 100644
index 000000000..e558424d4
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.module.css
@@ -0,0 +1,34 @@
+.networkTabs {
+	display: flex;
+	gap: 6px;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	padding: 4px 0 8px;
+	scrollbar-width: none;
+}
+
+.networkTabs::-webkit-scrollbar {
+	display: none;
+}
+
+.networkTab {
+	flex-shrink: 0;
+	padding: 4px 12px;
+	border: none;
+	border-radius: var(--ta-border-radius-full);
+	background-color: var(--ta-color-background-secondary);
+	color: var(--ta-color-text-secondary);
+	cursor: pointer;
+	composes: labelMedium from '../../../../../styles/typography.module.css';
+	transition: background-color 0.15s, color 0.15s;
+}
+
+.networkTab:hover {
+	background-color: var(--ta-color-background-tertiary);
+	color: var(--ta-color-text);
+}
+
+.networkTabActive {
+	background-color: var(--ta-color-primary);
+	color: var(--ta-color-primary-foreground);
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.stories.tsx
new file mode 100644
index 000000000..a01c708e6
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.stories.tsx
@@ -0,0 +1,96 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import type { CryptoPaymentMethod } from '../../../types';
+import type { ChainInfo } from '../utils/chains';
+import { CryptoMethodSelectModal } from './crypto-method-select-modal';
+
+const CHAINS: Record<string, ChainInfo> = {
+    'eip155:1': {
+        name: 'Ethereum',
+        logo: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png',
+    },
+    'eip155:56': {
+        name: 'BSC',
+        logo: 'https://assets.coingecko.com/coins/images/825/standard/bnb-icon2_2x.png',
+    },
+    'eip155:8453': {
+        name: 'Base',
+        logo: 'https://avatars.githubusercontent.com/u/108554348?s=280&v=4',
+    },
+};
+
+const METHODS: CryptoPaymentMethod[] = [
+    {
+        id: 'usdc-base',
+        symbol: 'USDC',
+        name: 'USD Coin',
+        chain: 'eip155:8453',
+        decimals: 6,
+        address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+        logo: 'https://assets.coingecko.com/coins/images/6319/standard/USDC.png?1769615602',
+    },
+    {
+        id: 'usdt-bsc',
+        symbol: 'USDT',
+        name: 'Tether',
+        chain: 'eip155:56',
+        decimals: 18,
+        address: '0x55d398326f99059fF775485246999027B3197955',
+        logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
+    },
+    {
+        id: 'eth-mainnet',
+        symbol: 'ETH',
+        name: 'Ethereum',
+        chain: 'eip155:1',
+        decimals: 18,
+        address: '',
+        logo: 'https://assets.coingecko.com/coins/images/279/standard/ethereum.png',
+    },
+];
+
+const meta: Meta<typeof CryptoMethodSelectModal> = {
+    title: 'Features/Onramp/Internal/CryptoMethodSelectModal',
+    component: CryptoMethodSelectModal,
+};
+
+export default meta;
+type Story = StoryObj<typeof CryptoMethodSelectModal>;
+
+export const Default: Story = {
+    args: {
+        open: true,
+        methods: METHODS,
+        chains: CHAINS,
+        onClose: () => {},
+        onSelect: () => {},
+    },
+};
+
+export const WithSections: Story = {
+    args: {
+        open: true,
+        methods: METHODS,
+        methodSections: [{ title: 'Stablecoins', ids: ['usdc-base', 'usdt-bsc'] }],
+        chains: CHAINS,
+        onClose: () => {},
+        onSelect: () => {},
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        open: true,
+        methods: [],
+        onClose: () => {},
+        onSelect: () => {},
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.tsx
new file mode 100644
index 000000000..4f6864c22
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/crypto-method-select-modal.tsx
@@ -0,0 +1,149 @@
+/**
+ * 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 { useMemo, useState } from 'react';
+import type { FC } from 'react';
+
+import { CurrencySelect } from '../../../../../components/shared/currency-select-modal';
+import { LogoWithNetwork } from '../../../../../components/ui/logo-with-network';
+import { CurrencyItem } from '../../../../../components/shared/currency-item';
+import type { CryptoPaymentMethod, PaymentMethodSectionConfig } from '../../../types';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import type { ChainInfo } from '../utils/chains';
+import { getChainInfo } from '../utils/chains';
+
+export interface CryptoMethodSelectModalProps {
+    open: boolean;
+    onClose: () => void;
+    methods: CryptoPaymentMethod[];
+    methodSections?: PaymentMethodSectionConfig[];
+    /** CAIP-2 → display info map. Defaults to `{}` (helper falls back to the chain reference). */
+    chains?: Record<string, ChainInfo>;
+    onSelect: (method: CryptoPaymentMethod) => void;
+}
+
+interface MethodSection {
+    title: string;
+    methods: CryptoPaymentMethod[];
+}
+
+const filterMethods = (
+    methods: CryptoPaymentMethod[],
+    search: string,
+    chains: Record<string, ChainInfo>,
+): CryptoPaymentMethod[] => {
+    const q = search.toLowerCase();
+    return methods.filter(
+        (m) =>
+            m.symbol.toLowerCase().includes(q) ||
+            m.name.toLowerCase().includes(q) ||
+            getChainInfo(m.chain, chains).name.toLowerCase().includes(q),
+    );
+};
+
+const groupMethodSections = (
+    methods: CryptoPaymentMethod[],
+    sections: PaymentMethodSectionConfig[],
+    otherTitle: string,
+): MethodSection[] => {
+    const idsSeen = new Set<string>();
+    const result: MethodSection[] = sections.map((sec) => {
+        const sectionMethods = sec.ids.flatMap((id) => {
+            const m = methods.find((item) => item.id === id);
+            if (!m) return [];
+            idsSeen.add(m.id);
+            return [m];
+        });
+        return { title: sec.title, methods: sectionMethods };
+    });
+
+    const others = methods.filter((m) => !idsSeen.has(m.id));
+    if (others.length > 0) {
+        result.push({ title: otherTitle, methods: others });
+    }
+
+    return result;
+};
+
+export const CryptoMethodSelectModal: FC<CryptoMethodSelectModalProps> = ({
+    open,
+    onClose,
+    methods,
+    methodSections,
+    chains = {},
+    onSelect,
+}) => {
+    const { t } = useI18n();
+    const [search, setSearch] = useState('');
+
+    const displaySections = useMemo((): MethodSection[] => {
+        if (search) {
+            return [{ title: '', methods: filterMethods(methods, search, chains) }];
+        }
+        if (methodSections) {
+            return groupMethodSections(methods, methodSections, t('tokenSelect.otherTokens'));
+        }
+        return [{ title: '', methods: methods }];
+    }, [methods, methodSections, chains, search, t]);
+
+    const isEmpty = displaySections.every((s) => s.methods.length === 0);
+
+    const handleSelect = (method: CryptoPaymentMethod) => () => {
+        onSelect(method);
+        onClose();
+        setSearch('');
+    };
+
+    const handleOpenChange = (isOpen: boolean) => {
+        if (!isOpen) {
+            onClose();
+            setSearch('');
+        }
+    };
+
+    return (
+        <CurrencySelect.Modal open={open} onOpenChange={handleOpenChange} title={t('cryptoOnramp.methodOfPurchase')}>
+            <CurrencySelect.Search
+                searchValue={search}
+                onSearchChange={setSearch}
+                placeholder={t('cryptoOnramp.searchMethod')}
+            />
+
+            <CurrencySelect.ListContainer isEmpty={isEmpty}>
+                {displaySections.map((section) => (
+                    <CurrencySelect.Section key={section.title}>
+                        {section.title && <CurrencySelect.SectionHeader>{section.title}</CurrencySelect.SectionHeader>}
+                        {section.methods.map((method) => {
+                            const chainInfo = getChainInfo(method.chain, chains);
+                            return (
+                                <CurrencyItem.Container key={method.id} onClick={handleSelect(method)}>
+                                    <LogoWithNetwork
+                                        size={40}
+                                        src={method.logo}
+                                        alt={method.symbol}
+                                        fallback={method.symbol[0]}
+                                        networkSrc={chainInfo.logo}
+                                        networkAlt={chainInfo.name[0]}
+                                    />
+                                    <CurrencyItem.Info>
+                                        <CurrencyItem.Header>
+                                            <CurrencyItem.Name>{method.name}</CurrencyItem.Name>
+                                        </CurrencyItem.Header>
+                                        <CurrencyItem.Ticker>
+                                            {method.symbol} • {chainInfo.name}
+                                        </CurrencyItem.Ticker>
+                                    </CurrencyItem.Info>
+                                </CurrencyItem.Container>
+                            );
+                        })}
+                    </CurrencySelect.Section>
+                ))}
+            </CurrencySelect.ListContainer>
+        </CurrencySelect.Modal>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/index.ts
new file mode 100644
index 000000000..20d90da35
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-method-select-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoMethodSelectModal } from './crypto-method-select-modal';
+export type { CryptoMethodSelectModalProps } from './crypto-method-select-modal';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.module.css b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.module.css
new file mode 100644
index 000000000..531eaef4b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.module.css
@@ -0,0 +1,142 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-bottom: 8px;
+}
+
+.qrWrapper {
+	display: flex;
+	justify-content: center;
+	padding: 16px 0;
+}
+
+.tabsList {
+	margin-top: 4px;
+}
+
+.infoTitle {
+	composes: bodyMedium from '../../../../../styles/typography.module.css';
+	margin: 0;
+}
+
+.infoCard {
+	background-color: var(--ta-color-background-secondary);
+	border-radius: var(--ta-border-radius-l);
+	overflow: hidden;
+}
+
+.infoRow {
+	display: flex;
+	flex-direction: column;
+	padding: 12px 16px;
+}
+
+.infoLabel {
+	composes: footnoteRegular from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text-secondary);
+}
+
+.infoValueRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	height: 28px;
+}
+
+.infoValue {
+	composes: bodyMedium from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text);
+	word-break: break-all;
+}
+
+.copyButton {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	background: none;
+	cursor: pointer;
+	color: var(--ta-color-text-secondary);
+	border-radius: var(--ta-border-radius-s);
+	transition: color 0.15s, background-color 0.15s;
+}
+
+.copyButton:hover {
+	color: var(--ta-color-text);
+	background-color: var(--ta-color-background-tertiary);
+}
+
+.divider {
+	height: 1px;
+	background-color: var(--ta-color-background-tertiary);
+	margin: 0 16px;
+}
+
+.detailsToggle {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 12px 16px;
+	background-color: var(--ta-color-background-secondary);
+	border: none;
+	border-radius: var(--ta-border-radius-l);
+	cursor: pointer;
+	color: var(--ta-color-text);
+	composes: bodyMedium from '../../../../../styles/typography.module.css';
+}
+
+.warning {
+	display: flex;
+	gap: 10px;
+	padding: 12px 14px;
+	background-color: rgba(255, 165, 0, 0.1);
+	border-radius: var(--ta-border-radius-l);
+	border: 1px solid rgba(255, 165, 0, 0.25);
+}
+
+.warningIcon {
+	flex-shrink: 0;
+	color: #ff9500;
+	display: flex;
+	align-items: flex-start;
+	padding-top: 1px;
+}
+
+.warningText {
+	composes: footnoteRegular from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text-secondary);
+	margin: 0;
+}
+
+.balanceRow {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 10px 16px;
+	background-color: var(--ta-color-background-secondary);
+	border-radius: var(--ta-border-radius-l);
+}
+
+.balanceLabel {
+	composes: footnoteRegular from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text-secondary);
+}
+
+.balanceValue {
+	composes: bodyMedium from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text);
+}
+
+.statusText {
+	composes: footnoteRegular from '../../../../../styles/typography.module.css';
+	color: var(--ta-color-text-secondary);
+	text-align: center;
+	margin: 0;
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.stories.tsx
new file mode 100644
index 000000000..1c5d3154d
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.stories.tsx
@@ -0,0 +1,80 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CryptoOnrampDepositModal } from './crypto-onramp-deposit-modal';
+
+const ADDRESS = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
+const TOKEN_LOGO = 'https://assets.coingecko.com/coins/images/6319/standard/USDC.png?1769615602';
+
+const meta: Meta<typeof CryptoOnrampDepositModal> = {
+    title: 'Features/Onramp/Internal/CryptoOnrampDepositModal',
+    component: CryptoOnrampDepositModal,
+};
+
+export default meta;
+type Story = StoryObj<typeof CryptoOnrampDepositModal>;
+
+export const Default: Story = {
+    args: {
+        open: true,
+        address: ADDRESS,
+        amount: '100',
+        symbol: 'USDC',
+        tokenLogo: TOKEN_LOGO,
+        depositStatus: null,
+        targetSymbol: 'USDT',
+        targetBalance: '12.34',
+        targetDecimals: 6,
+        onClose: () => {},
+    },
+};
+
+export const WithMemo: Story = {
+    args: {
+        ...Default.args,
+        memo: '12345678',
+    },
+};
+
+export const WithChainWarning: Story = {
+    args: {
+        ...Default.args,
+        chainWarning: 'This address only accepts USDC on the Base network. Sending other assets will result in loss.',
+    },
+};
+
+export const Pending: Story = {
+    args: {
+        ...Default.args,
+        depositStatus: 'pending',
+    },
+};
+
+export const Success: Story = {
+    args: {
+        ...Default.args,
+        depositStatus: 'success',
+    },
+};
+
+export const Failed: Story = {
+    args: {
+        ...Default.args,
+        depositStatus: 'failed',
+    },
+};
+
+export const LoadingTargetBalance: Story = {
+    args: {
+        ...Default.args,
+        targetBalance: undefined,
+        isLoadingTargetBalance: true,
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.tsx
new file mode 100644
index 000000000..bf5c84f2c
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/crypto-onramp-deposit-modal.tsx
@@ -0,0 +1,215 @@
+/**
+ * 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 { useState } from 'react';
+import type { FC } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import type { CryptoOnrampStatus } from '@ton/appkit';
+
+import { Button } from '../../../../../components/ui/button';
+import { CopyButton } from '../../../../../components/shared/copy-button';
+import { Modal } from '../../../../../components/ui/modal';
+import { Skeleton } from '../../../../../components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../components/ui/tabs';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import { formatOnrampAmount } from '../utils/format-onramp-amount';
+import { truncateAddress } from '../utils/truncate-address';
+import styles from './crypto-onramp-deposit-modal.module.css';
+
+type QrTab = 'address' | 'memo';
+
+const QR_SIZE = 200;
+const QR_LOGO_SIZE = 40;
+const BALANCE_SKELETON_WIDTH = 80;
+const BALANCE_SKELETON_HEIGHT = 16;
+
+export interface CryptoOnrampDepositModalProps {
+    open: boolean;
+    onClose: () => void;
+    /** Deposit address to display as QR code */
+    address: string;
+    /** Amount to send */
+    amount: string;
+    /** Token symbol, e.g. "BTC" */
+    symbol: string;
+    /** Deposit status */
+    depositStatus: CryptoOnrampStatus | null;
+    /** Optional memo / tag / comment */
+    memo?: string;
+    /** URL of the token logo to embed in the QR code center */
+    tokenLogo?: string;
+    /** Optional chain-specific warning message */
+    chainWarning?: string;
+    /** Symbol of the target token the user is buying */
+    targetSymbol?: string;
+    /** User's formatted balance of the target token */
+    targetBalance?: string;
+    /** Decimals of the target token */
+    targetDecimals?: number;
+    /** Whether the target balance is loading */
+    isLoadingTargetBalance?: boolean;
+}
+
+const WarningIcon: FC = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6.86 2.31a1.3 1.3 0 0 1 2.28 0l5.27 9.13A1.3 1.3 0 0 1 13.27 13H2.73a1.3 1.3 0 0 1-1.14-1.56L6.86 2.31Z"
+            stroke="currentColor"
+            strokeWidth="1.2"
+        />
+        <path d="M8 6v3M8 10.5v.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+    </svg>
+);
+
+export const CryptoOnrampDepositModal: FC<CryptoOnrampDepositModalProps> = ({
+    open,
+    onClose,
+    address,
+    amount,
+    symbol,
+    memo,
+    tokenLogo,
+    chainWarning,
+    depositStatus,
+    targetSymbol,
+    targetBalance,
+    targetDecimals,
+    isLoadingTargetBalance,
+}) => {
+    const { t } = useI18n();
+    const [qrTab, setQrTab] = useState<QrTab>('address');
+
+    const qrImageSettings = tokenLogo
+        ? { src: tokenLogo, width: QR_LOGO_SIZE, height: QR_LOGO_SIZE, excavate: true }
+        : undefined;
+    const qrValue = memo && qrTab === 'memo' ? memo : address;
+
+    return (
+        <Modal open={open} onOpenChange={(isOpen) => !isOpen && onClose()} title={t('cryptoOnramp.depositModalTitle')}>
+            <div className={styles.content}>
+                {memo ? (
+                    <Tabs value={qrTab} onValueChange={(v) => setQrTab(v as QrTab)}>
+                        <TabsList className={styles.tabsList}>
+                            <TabsTrigger value="address">{t('cryptoOnramp.addressTab')}</TabsTrigger>
+                            <TabsTrigger value="memo">{t('cryptoOnramp.memoTab')}</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="address">
+                            <div className={styles.qrWrapper}>
+                                <QRCodeSVG
+                                    value={address}
+                                    size={QR_SIZE}
+                                    level="H"
+                                    bgColor="transparent"
+                                    fgColor="var(--ta-color-text)"
+                                    imageSettings={qrImageSettings}
+                                />
+                            </div>
+                        </TabsContent>
+                        <TabsContent value="memo">
+                            <div className={styles.qrWrapper}>
+                                <QRCodeSVG
+                                    value={memo}
+                                    size={QR_SIZE}
+                                    level="H"
+                                    bgColor="transparent"
+                                    fgColor="var(--ta-color-text)"
+                                />
+                            </div>
+                        </TabsContent>
+                    </Tabs>
+                ) : (
+                    <div className={styles.qrWrapper}>
+                        <QRCodeSVG
+                            value={qrValue}
+                            size={QR_SIZE}
+                            level="H"
+                            bgColor="transparent"
+                            fgColor="var(--ta-color-text)"
+                            imageSettings={qrImageSettings}
+                        />
+                    </div>
+                )}
+
+                <p className={styles.infoTitle}>{t('cryptoOnramp.sendExactAmount')}</p>
+
+                <div className={styles.infoCard}>
+                    <div className={styles.infoRow}>
+                        <span className={styles.infoLabel}>{t('cryptoOnramp.youNeedToSend')}</span>
+                        <div className={styles.infoValueRow}>
+                            <span className={styles.infoValue}>
+                                {amount} {symbol}
+                            </span>
+                            <CopyButton value={`${amount} ${symbol}`} aria-label="Copy amount" />
+                        </div>
+                    </div>
+
+                    <div className={styles.divider} />
+
+                    <div className={styles.infoRow}>
+                        <span className={styles.infoLabel}>{t('cryptoOnramp.toThisAddress')}</span>
+                        <div className={styles.infoValueRow}>
+                            <span className={styles.infoValue}>{truncateAddress(address)}</span>
+                            <CopyButton value={address} aria-label="Copy address" />
+                        </div>
+                    </div>
+
+                    {memo && (
+                        <>
+                            <div className={styles.divider} />
+                            <div className={styles.infoRow}>
+                                <span className={styles.infoLabel}>{t('cryptoOnramp.memoTag')}</span>
+                                <div className={styles.infoValueRow}>
+                                    <span className={styles.infoValue}>{memo}</span>
+                                    <CopyButton value={memo} aria-label="Copy memo" />
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                {chainWarning && (
+                    <div className={styles.warning}>
+                        <span className={styles.warningIcon}>
+                            <WarningIcon />
+                        </span>
+                        <p className={styles.warningText}>{chainWarning}</p>
+                    </div>
+                )}
+
+                {targetSymbol && (
+                    <div className={styles.infoCard}>
+                        <div className={styles.infoRow}>
+                            <span className={styles.infoLabel}>{t('cryptoOnramp.yourBalance')}</span>
+                            <div className={styles.infoValueRow}>
+                                {isLoadingTargetBalance ? (
+                                    <Skeleton width={BALANCE_SKELETON_WIDTH} height={BALANCE_SKELETON_HEIGHT} />
+                                ) : (
+                                    <span className={styles.infoValue}>
+                                        {formatOnrampAmount(targetBalance || '0', targetDecimals)} {targetSymbol}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <Button variant={depositStatus === 'success' ? 'fill' : 'gray'} size="l" fullWidth onClick={onClose}>
+                    {depositStatus === 'success' ? t('cryptoOnramp.done') : t('cryptoOnramp.close')}
+                </Button>
+
+                {depositStatus && (
+                    <p className={styles.statusText}>
+                        {depositStatus === 'success' && t('cryptoOnramp.statusSuccess')}
+                        {depositStatus === 'pending' && t('cryptoOnramp.statusPending')}
+                        {depositStatus === 'failed' && t('cryptoOnramp.statusFailed')}
+                    </p>
+                )}
+            </div>
+        </Modal>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/index.ts
new file mode 100644
index 000000000..12c22b8da
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-deposit-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoOnrampDepositModal } from './crypto-onramp-deposit-modal';
+export type { CryptoOnrampDepositModalProps } from './crypto-onramp-deposit-modal';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.module.css b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.module.css
new file mode 100644
index 000000000..7776c6ac5
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.module.css
@@ -0,0 +1,12 @@
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.label {
+    margin: 0;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--ta-color-text-secondary);
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.stories.tsx
new file mode 100644
index 000000000..7bc773a8c
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.stories.tsx
@@ -0,0 +1,53 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CryptoOnrampRefundAddressModal } from './crypto-onramp-refund-address-modal';
+
+const meta: Meta<typeof CryptoOnrampRefundAddressModal> = {
+    title: 'Features/Onramp/Internal/CryptoOnrampRefundAddressModal',
+    component: CryptoOnrampRefundAddressModal,
+};
+
+export default meta;
+type Story = StoryObj<typeof CryptoOnrampRefundAddressModal>;
+
+export const Default: Story = {
+    args: {
+        open: true,
+        value: '',
+        isLoading: false,
+        onClose: () => {},
+        onChange: () => {},
+        onConfirm: () => {},
+    },
+};
+
+export const WithValue: Story = {
+    args: {
+        ...Default.args,
+        value: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        ...Default.args,
+        value: '0xinvalid',
+        error: 'Invalid refund address',
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        ...Default.args,
+        value: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+        isLoading: true,
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.tsx
new file mode 100644
index 000000000..d916984cd
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/crypto-onramp-refund-address-modal.tsx
@@ -0,0 +1,65 @@
+/**
+ * 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 { FC } from 'react';
+
+import { Modal } from '../../../../../components/ui/modal';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import { Button } from '../../../../../components/ui/button';
+import { Input } from '../../../../../components/ui/input';
+import styles from './crypto-onramp-refund-address-modal.module.css';
+
+export interface CryptoOnrampRefundAddressModalProps {
+    open: boolean;
+    onClose: () => void;
+    value: string;
+    onChange: (value: string) => void;
+    onConfirm: () => void;
+    isLoading: boolean;
+    error?: string | null;
+}
+
+export const CryptoOnrampRefundAddressModal: FC<CryptoOnrampRefundAddressModalProps> = ({
+    open,
+    onClose,
+    value,
+    onChange,
+    onConfirm,
+    error,
+    isLoading,
+}) => {
+    const { t } = useI18n();
+
+    return (
+        <Modal
+            open={open}
+            onOpenChange={(isOpen) => !isOpen && onClose()}
+            title={t('cryptoOnramp.refundAddressModalTitle')}
+        >
+            <div className={styles.content}>
+                <p className={styles.label}>{t('cryptoOnramp.refundAddressLabel')}</p>
+
+                <Input.Container size="s" error={!!error}>
+                    <Input.Field>
+                        <Input.Input
+                            value={value}
+                            onChange={(e) => onChange(e.target.value)}
+                            placeholder={t('cryptoOnramp.refundAddressPlaceholder')}
+                            autoFocus
+                        />
+                    </Input.Field>
+                    {error && <Input.Caption>{error}</Input.Caption>}
+                </Input.Container>
+
+                <Button variant="fill" size="l" fullWidth onClick={onConfirm} disabled={!value.trim() || isLoading}>
+                    {t('cryptoOnramp.continue')}
+                </Button>
+            </div>
+        </Modal>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/index.ts
new file mode 100644
index 000000000..31568e8a4
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-refund-address-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoOnrampRefundAddressModal } from './crypto-onramp-refund-address-modal';
+export type { CryptoOnrampRefundAddressModalProps } from './crypto-onramp-refund-address-modal';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-context.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-context.ts
new file mode 100644
index 000000000..98db37869
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-context.ts
@@ -0,0 +1,147 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import type { CryptoOnrampDeposit, CryptoOnrampQuote, CryptoOnrampStatus } from '@ton/appkit';
+
+import { CRYPTO_ONRAMP_TARGET_TOKENS } from '../../../mock-data/crypto-onramp-tokens';
+import { CRYPTO_PAYMENT_METHODS } from '../../../mock-data/crypto-payment-methods';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import type { ChainInfo } from '../utils/chains';
+import { DEFAULT_CHAINS } from '../utils/chains';
+import type {
+    CryptoOnrampToken,
+    CryptoOnrampTokenSectionConfig,
+    CryptoPaymentMethod,
+    OnrampAmountPreset,
+    PaymentMethodSectionConfig,
+} from '../../../types';
+
+export type CryptoAmountInputMode = 'token' | 'method';
+
+export interface CryptoOnrampContextType {
+    /** Full list of tokens to buy */
+    tokens: CryptoOnrampToken[];
+    /** Optional section configs for grouping tokens */
+    tokenSections?: CryptoOnrampTokenSectionConfig[];
+    /** Currently selected token to buy */
+    selectedToken: CryptoOnrampToken | null;
+    setSelectedToken: (token: CryptoOnrampToken) => void;
+
+    /** Available crypto payment methods */
+    paymentMethods: CryptoPaymentMethod[];
+    /** Optional section configs for grouping payment methods */
+    methodSections?: PaymentMethodSectionConfig[];
+    /** Currently selected payment method */
+    selectedMethod: CryptoPaymentMethod;
+    setSelectedMethod: (method: CryptoPaymentMethod) => void;
+    /** CAIP-2 → chain display info map (defaults merged with consumer overrides) */
+    chains: Record<string, ChainInfo>;
+
+    /** Current amount input value */
+    amount: string;
+    setAmount: (value: string) => void;
+    /** Whether user is entering token amount or payment-method amount */
+    amountInputMode: CryptoAmountInputMode;
+    setAmountInputMode: (mode: CryptoAmountInputMode) => void;
+    /** Converted amount from quote */
+    convertedAmount: string;
+    presetAmounts: OnrampAmountPreset[];
+
+    /** Current quote from provider */
+    quote: CryptoOnrampQuote | null;
+    /** Whether quote is being fetched */
+    isLoadingQuote: boolean;
+    /** Error from quote fetch (i18n key) */
+    quoteError: string | null;
+    /** Display name of the provider behind the current quote, when one is available. */
+    quoteProviderName: string | null;
+
+    /** Current deposit offer from provider */
+    deposit: CryptoOnrampDeposit | null;
+    /** Whether deposit is being created */
+    isCreatingDeposit: boolean;
+    /** Error from deposit creation (i18n key) */
+    depositError: string | null;
+    /** Formatted deposit amount */
+    depositAmount: string;
+    /** Function to trigger deposit creation */
+    createDeposit: () => void;
+    /** Deposit status */
+    depositStatus: CryptoOnrampStatus | null;
+
+    /** Whether the current quote provider requires a refund address */
+    isRefundAddressRequired: boolean;
+    /** Whether the current quote provider supports reversed (target-amount) input */
+    isReversedAmountSupported: boolean;
+    /** Refund address */
+    refundAddress: string;
+    setRefundAddress: (address: string) => void;
+
+    /** User's balance of the selected target token (formatted, token units) */
+    targetBalance: string;
+    /** Whether the target token balance is being fetched */
+    isLoadingTargetBalance: boolean;
+
+    /** Whether a TON wallet is currently connected */
+    isWalletConnected: boolean;
+
+    /** Whether the user can proceed (valid amount + quote available + wallet connected) */
+    canContinue: boolean;
+    /** Reset state (invalidate quote and clear deposit) */
+    onReset: () => void;
+}
+
+const defaultContext: CryptoOnrampContextType = {
+    tokens: CRYPTO_ONRAMP_TARGET_TOKENS,
+    tokenSections: undefined,
+    selectedToken: CRYPTO_ONRAMP_TARGET_TOKENS[0]!,
+    setSelectedToken: () => {},
+    paymentMethods: CRYPTO_PAYMENT_METHODS,
+    methodSections: undefined,
+    selectedMethod: CRYPTO_PAYMENT_METHODS[0]!,
+    setSelectedMethod: () => {},
+    chains: DEFAULT_CHAINS,
+    amount: '',
+    setAmount: () => {},
+    amountInputMode: 'method',
+    setAmountInputMode: () => {},
+    convertedAmount: '',
+    presetAmounts: DEFAULT_ONRAMP_PRESETS,
+
+    quote: null,
+    isLoadingQuote: false,
+    quoteError: null,
+    quoteProviderName: null,
+
+    deposit: null,
+    isCreatingDeposit: false,
+    depositError: null,
+    depositAmount: '',
+    createDeposit: () => {},
+    depositStatus: null,
+
+    isRefundAddressRequired: false,
+    isReversedAmountSupported: true,
+    refundAddress: '',
+    setRefundAddress: () => {},
+
+    targetBalance: '',
+    isLoadingTargetBalance: false,
+
+    isWalletConnected: false,
+
+    canContinue: false,
+    onReset: () => {},
+};
+
+export const CryptoOnrampContext = createContext<CryptoOnrampContextType>(defaultContext);
+
+export const useCryptoOnrampContext = (): CryptoOnrampContextType => {
+    return useContext(CryptoOnrampContext);
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-widget-provider.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-widget-provider.tsx
new file mode 100644
index 000000000..31a3d1d3b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/crypto-onramp-widget-provider.tsx
@@ -0,0 +1,200 @@
+/**
+ * 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 { useEffect, useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+import { useAddress } from '../../../../wallets';
+import { CRYPTO_ONRAMP_TARGET_TOKENS } from '../../../mock-data/crypto-onramp-tokens';
+import { CRYPTO_PAYMENT_METHODS } from '../../../mock-data/crypto-payment-methods';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import type {
+    CryptoOnrampToken,
+    CryptoOnrampTokenSectionConfig,
+    CryptoPaymentMethod,
+    PaymentMethodSectionConfig,
+} from '../../../types';
+import type { ChainInfo } from '../utils/chains';
+import { DEFAULT_CHAINS } from '../utils/chains';
+import { CryptoOnrampContext } from './crypto-onramp-context';
+import { useCryptoOnrampBalance } from './use-crypto-onramp-balance';
+import { useCryptoOnrampQuoteAndDeposit } from './use-crypto-onramp-quote-and-deposit';
+import { useCryptoOnrampTokenState } from './use-crypto-onramp-token-state';
+import { useCryptoOnrampValidation } from './use-crypto-onramp-validation';
+
+export interface CryptoOnrampProviderProps extends PropsWithChildren {
+    tokens?: CryptoOnrampToken[];
+    tokenSections?: CryptoOnrampTokenSectionConfig[];
+    paymentMethods?: CryptoPaymentMethod[];
+    methodSections?: PaymentMethodSectionConfig[];
+    /**
+     * Custom CAIP-2 → chain display info overrides. Merged on top of the
+     * built-in defaults, so consumers only need to provide what they want to
+     * override or add (e.g. `{ 'eip155:42161': { name: 'Arbitrum', logo: '...' } }`).
+     */
+    chains?: Record<string, ChainInfo>;
+    defaultTokenId?: string;
+    defaultMethodId?: string;
+}
+
+export const CryptoOnrampWidgetProvider: FC<CryptoOnrampProviderProps> = ({
+    children,
+    tokens = CRYPTO_ONRAMP_TARGET_TOKENS,
+    tokenSections,
+    paymentMethods = CRYPTO_PAYMENT_METHODS,
+    methodSections,
+    chains: chainsOverride,
+    defaultTokenId,
+    defaultMethodId,
+}) => {
+    // 1. Local state
+    const {
+        selectedToken,
+        setSelectedToken,
+        selectedMethod,
+        setSelectedMethod,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+    } = useCryptoOnrampTokenState({ tokens, paymentMethods, defaultTokenId, defaultMethodId });
+
+    // 2. Queries and external readers
+    const userAddress = useAddress();
+    const { targetBalance, isLoadingTargetBalance } = useCryptoOnrampBalance({ selectedToken, userAddress });
+
+    // 4. Mutations (quote query + deposit mutation + status query coordinated together)
+    const {
+        amountDebounced,
+        quote,
+        quoteError,
+        isQuoteFetching,
+        quoteProviderName,
+        isRefundAddressRequired,
+        isReversedAmountSupported,
+        deposit,
+        depositError,
+        isCreatingDeposit,
+        depositStatus,
+        convertedAmount,
+        depositAmount,
+        refundAddress,
+        setRefundAddress,
+        createDeposit,
+        onReset,
+    } = useCryptoOnrampQuoteAndDeposit({
+        selectedToken,
+        selectedMethod,
+        amount,
+        amountInputMode,
+        userAddress,
+    });
+
+    // 3. Derivations
+    const {
+        quoteError: validationQuoteError,
+        depositError: validationDepositError,
+        canSubmit,
+    } = useCryptoOnrampValidation({
+        amount,
+        amountDebounced,
+        amountInputMode,
+        selectedMethod,
+        selectedToken,
+        quoteError,
+        depositError,
+        hasQuote: !!quote,
+    });
+
+    const isLoadingQuote = isQuoteFetching || amount !== amountDebounced;
+    const canContinue = canSubmit && !isQuoteFetching && amount === amountDebounced && !!userAddress;
+
+    const chains = useMemo(() => ({ ...DEFAULT_CHAINS, ...(chainsOverride ?? {}) }), [chainsOverride]);
+
+    useEffect(() => {
+        if (!isReversedAmountSupported && amountInputMode === 'token') {
+            setAmountInputMode('method');
+        }
+    }, [isReversedAmountSupported, amountInputMode, setAmountInputMode]);
+
+    const value = useMemo(
+        () => ({
+            tokens,
+            tokenSections,
+            selectedToken,
+            setSelectedToken,
+            paymentMethods,
+            methodSections,
+            selectedMethod,
+            setSelectedMethod,
+            chains,
+            amount,
+            setAmount,
+            amountInputMode,
+            setAmountInputMode,
+            convertedAmount,
+            presetAmounts: DEFAULT_ONRAMP_PRESETS,
+            quote,
+            isLoadingQuote,
+            quoteError: validationQuoteError,
+            quoteProviderName,
+            isRefundAddressRequired,
+            isReversedAmountSupported,
+            deposit,
+            isCreatingDeposit,
+            depositError: validationDepositError,
+            depositAmount,
+            createDeposit,
+            isWalletConnected: !!userAddress,
+            canContinue,
+            onReset,
+            depositStatus,
+            refundAddress,
+            setRefundAddress,
+            targetBalance,
+            isLoadingTargetBalance,
+        }),
+        [
+            tokens,
+            tokenSections,
+            selectedToken,
+            setSelectedToken,
+            paymentMethods,
+            methodSections,
+            selectedMethod,
+            setSelectedMethod,
+            chains,
+            amount,
+            setAmount,
+            amountInputMode,
+            setAmountInputMode,
+            convertedAmount,
+            quote,
+            isLoadingQuote,
+            validationQuoteError,
+            quoteProviderName,
+            isRefundAddressRequired,
+            isReversedAmountSupported,
+            deposit,
+            isCreatingDeposit,
+            validationDepositError,
+            depositAmount,
+            createDeposit,
+            userAddress,
+            canContinue,
+            onReset,
+            depositStatus,
+            refundAddress,
+            setRefundAddress,
+            targetBalance,
+            isLoadingTargetBalance,
+        ],
+    );
+
+    return <CryptoOnrampContext.Provider value={value}>{children}</CryptoOnrampContext.Provider>;
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/index.ts
new file mode 100644
index 000000000..1928dc5be
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/index.ts
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoOnrampWidgetProvider } from './crypto-onramp-widget-provider';
+export type { CryptoOnrampProviderProps } from './crypto-onramp-widget-provider';
+export { CryptoOnrampContext, useCryptoOnrampContext } from './crypto-onramp-context';
+export type { CryptoOnrampContextType, CryptoAmountInputMode } from './crypto-onramp-context';
+export type { ChainInfo } from '../utils/chains';
+export { DEFAULT_CHAINS, getChainInfo } from '../utils/chains';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-balance.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-balance.ts
new file mode 100644
index 000000000..80b1128d2
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-balance.ts
@@ -0,0 +1,37 @@
+/**
+ * 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 { useBalance } from '../../../../balances/hooks/use-balance';
+import { useJettonBalanceByAddress } from '../../../../jettons/hooks/use-jetton-balance-by-address';
+import { NATIVE_TON_ADDRESS } from '../../../constants';
+import type { CryptoOnrampToken } from '../../../types';
+
+interface UseCryptoOnrampBalanceOptions {
+    selectedToken: CryptoOnrampToken | null;
+    userAddress: string | undefined;
+}
+
+export const useCryptoOnrampBalance = ({ selectedToken, userAddress }: UseCryptoOnrampBalanceOptions) => {
+    const isNativeTonTarget = selectedToken?.address === NATIVE_TON_ADDRESS;
+
+    const { data: nativeBalanceData, isLoading: isNativeBalanceLoading } = useBalance({
+        query: { enabled: isNativeTonTarget && !!userAddress, refetchInterval: 5000 },
+    });
+
+    const { data: jettonBalanceData, isLoading: isJettonBalanceLoading } = useJettonBalanceByAddress({
+        jettonAddress: !isNativeTonTarget ? selectedToken?.address : undefined,
+        ownerAddress: userAddress,
+        jettonDecimals: selectedToken?.decimals,
+        query: { enabled: !isNativeTonTarget && !!selectedToken?.address && !!userAddress, refetchInterval: 5000 },
+    });
+
+    return {
+        targetBalance: (isNativeTonTarget ? nativeBalanceData : jettonBalanceData) ?? '',
+        isLoadingTargetBalance: isNativeTonTarget ? isNativeBalanceLoading : isJettonBalanceLoading,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-quote-and-deposit.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-quote-and-deposit.ts
new file mode 100644
index 000000000..eb1d4fe23
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-quote-and-deposit.ts
@@ -0,0 +1,145 @@
+/**
+ * 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 { useCallback, useMemo, useState } from 'react';
+import { formatUnits, parseUnits } from '@ton/appkit';
+import { keepPreviousData } from '@tanstack/react-query';
+
+import { useCreateCryptoOnrampDeposit } from '../../../hooks/use-create-crypto-onramp-deposit';
+import { useCryptoOnrampProvider } from '../../../hooks/use-crypto-onramp-provider';
+import { useCryptoOnrampQuote } from '../../../hooks/use-crypto-onramp-quote';
+import { useCryptoOnrampStatus } from '../../../hooks/use-crypto-onramp-status';
+import { useDebounceValue } from '../../../../../hooks/use-debounce-value';
+import type { CryptoOnrampToken, CryptoPaymentMethod } from '../../../types';
+import type { CryptoAmountInputMode } from './crypto-onramp-context';
+
+const QUOTE_DEBOUNCE_MS = 500;
+const STATUS_REFETCH_MS = 10000;
+
+interface UseCryptoOnrampQuoteAndDepositOptions {
+    selectedToken: CryptoOnrampToken | null;
+    selectedMethod: CryptoPaymentMethod;
+    amount: string;
+    amountInputMode: CryptoAmountInputMode;
+    userAddress: string | undefined;
+}
+
+export const useCryptoOnrampQuoteAndDeposit = ({
+    selectedToken,
+    selectedMethod,
+    amount,
+    amountInputMode,
+    userAddress,
+}: UseCryptoOnrampQuoteAndDepositOptions) => {
+    const [refundAddress, setRefundAddress] = useState('');
+    const [amountDebounced] = useDebounceValue(amount, QUOTE_DEBOUNCE_MS);
+
+    const requestAmountDecimals =
+        amountInputMode === 'method' ? selectedMethod.decimals : (selectedToken?.decimals ?? 0);
+
+    const requestAmountBase = useMemo(() => {
+        if (!amountDebounced || isNaN(parseFloat(amountDebounced))) return '';
+        try {
+            return parseUnits(amountDebounced, requestAmountDecimals).toString();
+        } catch {
+            return '';
+        }
+    }, [amountDebounced, requestAmountDecimals]);
+
+    const quoteQuery = useCryptoOnrampQuote({
+        amount: requestAmountBase,
+        sourceCurrencyAddress: selectedMethod.address,
+        sourceChain: selectedMethod.chain,
+        targetCurrencyAddress: selectedToken?.address ?? '',
+        recipientAddress: userAddress ?? '',
+        isSourceAmount: amountInputMode === 'method',
+        query: {
+            enabled: !!requestAmountBase && !!selectedToken && !!userAddress && parseFloat(amountDebounced) > 0,
+            retry: false,
+            placeholderData: keepPreviousData,
+            refetchOnWindowFocus: false,
+        },
+    });
+
+    const quoteProvider = useCryptoOnrampProvider({ id: quoteQuery.data?.providerId });
+    const quoteProviderMetadata = quoteProvider?.getMetadata();
+    const quoteProviderName = quoteProviderMetadata?.name ?? null;
+    const isRefundAddressRequired = quoteProviderMetadata?.isRefundAddressRequired ?? false;
+    const isReversedAmountSupported = quoteProviderMetadata?.isReversedAmountSupported ?? true;
+
+    const createDepositMutation = useCreateCryptoOnrampDeposit();
+
+    const { data: depositStatus } = useCryptoOnrampStatus({
+        depositId: createDepositMutation.data?.depositId,
+        query: {
+            refetchInterval: STATUS_REFETCH_MS,
+            retry: false,
+        },
+    });
+
+    const convertedAmount = useMemo(() => {
+        if (!quoteQuery.data) return '';
+        const rawAmount = amountInputMode === 'token' ? quoteQuery.data.sourceAmount : quoteQuery.data.targetAmount;
+        const decimals = amountInputMode === 'token' ? selectedMethod.decimals : (selectedToken?.decimals ?? 0);
+        return formatUnits(rawAmount, decimals);
+    }, [quoteQuery.data, amountInputMode, selectedMethod, selectedToken]);
+
+    const depositAmount = useMemo(() => {
+        if (createDepositMutation.data) {
+            return formatUnits(createDepositMutation.data.amount, selectedMethod.decimals);
+        }
+        return amount;
+    }, [createDepositMutation.data, amount, selectedMethod]);
+
+    const createDeposit = useCallback(() => {
+        if (!quoteQuery.data || !userAddress) return;
+        if (isRefundAddressRequired && !refundAddress) return;
+
+        createDepositMutation.mutate({
+            quote: quoteQuery.data,
+            providerId: quoteQuery.data.providerId,
+            refundAddress,
+        });
+    }, [quoteQuery.data, userAddress, createDepositMutation, refundAddress, isRefundAddressRequired]);
+
+    const onReset = useCallback(() => {
+        createDepositMutation.reset();
+        quoteQuery.refetch();
+        setRefundAddress('');
+    }, [createDepositMutation, quoteQuery]);
+
+    const handleSetRefundAddress = useCallback(
+        (address: string) => {
+            setRefundAddress(address);
+            if (createDepositMutation.isError) {
+                createDepositMutation.reset();
+            }
+        },
+        [createDepositMutation],
+    );
+
+    return {
+        amountDebounced,
+        quote: quoteQuery.data ?? null,
+        quoteError: quoteQuery.error,
+        isQuoteFetching: quoteQuery.isFetching,
+        quoteProviderName,
+        isRefundAddressRequired,
+        isReversedAmountSupported,
+        deposit: createDepositMutation.data ?? null,
+        depositError: createDepositMutation.error,
+        isCreatingDeposit: createDepositMutation.isPending,
+        depositStatus: depositStatus ?? null,
+        convertedAmount,
+        depositAmount,
+        refundAddress,
+        setRefundAddress: handleSetRefundAddress,
+        createDeposit,
+        onReset,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-token-state.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-token-state.ts
new file mode 100644
index 000000000..81a05a15b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-token-state.ts
@@ -0,0 +1,64 @@
+/**
+ * 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 { useCallback, useState } from 'react';
+import { validateNumericString } from '@ton/appkit';
+
+import { CRYPTO_PAYMENT_METHODS } from '../../../mock-data/crypto-payment-methods';
+import type { CryptoOnrampToken, CryptoPaymentMethod } from '../../../types';
+import type { CryptoAmountInputMode } from './crypto-onramp-context';
+
+interface UseCryptoOnrampTokenStateOptions {
+    tokens: CryptoOnrampToken[];
+    paymentMethods: CryptoPaymentMethod[];
+    defaultTokenId?: string;
+    defaultMethodId?: string;
+}
+
+const pickToken = (tokens: CryptoOnrampToken[], defaultId?: string): CryptoOnrampToken | null =>
+    tokens.find((t) => t.id === defaultId) ?? tokens[0] ?? null;
+
+const pickMethod = (methods: CryptoPaymentMethod[], defaultId?: string): CryptoPaymentMethod =>
+    methods.find((m) => m.id === defaultId) ?? methods[0] ?? CRYPTO_PAYMENT_METHODS[0]!;
+
+export const useCryptoOnrampTokenState = ({
+    tokens,
+    paymentMethods,
+    defaultTokenId,
+    defaultMethodId,
+}: UseCryptoOnrampTokenStateOptions) => {
+    const [selectedToken, setSelectedToken] = useState<CryptoOnrampToken | null>(() =>
+        pickToken(tokens, defaultTokenId),
+    );
+    const [selectedMethod, setSelectedMethod] = useState<CryptoPaymentMethod>(() =>
+        pickMethod(paymentMethods, defaultMethodId),
+    );
+    const [amount, setAmountRaw] = useState('');
+    const [amountInputMode, setAmountInputMode] = useState<CryptoAmountInputMode>('method');
+
+    const amountDecimals = amountInputMode === 'method' ? selectedMethod.decimals : (selectedToken?.decimals ?? 0);
+
+    const setAmount = useCallback(
+        (value: string) => {
+            if (value === '' || validateNumericString(value, amountDecimals)) setAmountRaw(value);
+        },
+        [amountDecimals],
+    );
+
+    return {
+        selectedToken,
+        setSelectedToken,
+        selectedMethod,
+        setSelectedMethod,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+        amountDecimals,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-validation.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-validation.ts
new file mode 100644
index 000000000..ddcfdae0b
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-provider/use-crypto-onramp-validation.ts
@@ -0,0 +1,69 @@
+/**
+ * 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 { useMemo } from 'react';
+
+import { hasTooManyDecimals } from '../../../../../utils/validate-amount';
+import { mapCryptoOnrampError } from '../utils/map-crypto-onramp-error';
+import type { CryptoPaymentMethod, CryptoOnrampToken } from '../../../types';
+import type { CryptoAmountInputMode } from './crypto-onramp-context';
+
+interface UseCryptoOnrampValidationOptions {
+    amount: string;
+    amountDebounced: string;
+    amountInputMode: CryptoAmountInputMode;
+    selectedMethod: CryptoPaymentMethod;
+    selectedToken: CryptoOnrampToken | null;
+    quoteError: Error | null;
+    depositError: Error | null;
+    hasQuote: boolean;
+}
+
+interface UseCryptoOnrampValidationResult {
+    quoteError: string | null;
+    depositError: string | null;
+    canSubmit: boolean;
+}
+
+export const useCryptoOnrampValidation = ({
+    amount,
+    amountDebounced,
+    amountInputMode,
+    selectedMethod,
+    selectedToken,
+    quoteError,
+    depositError,
+    hasQuote,
+}: UseCryptoOnrampValidationOptions): UseCryptoOnrampValidationResult => {
+    const decimals = amountInputMode === 'method' ? selectedMethod.decimals : selectedToken?.decimals;
+    const tooManyDecimals = hasTooManyDecimals(amount, decimals);
+
+    const mappedQuoteError = useMemo(
+        () => (amountDebounced && quoteError ? mapCryptoOnrampError(quoteError) : null),
+        [amountDebounced, quoteError],
+    );
+
+    const mappedDepositError = useMemo(
+        () => (depositError ? mapCryptoOnrampError(depositError) : null),
+        [depositError],
+    );
+
+    const canSubmit =
+        (parseFloat(amount) || 0) > 0 &&
+        selectedToken !== null &&
+        !tooManyDecimals &&
+        mappedQuoteError === null &&
+        mappedDepositError === null &&
+        hasQuote;
+
+    return {
+        quoteError: tooManyDecimals ? 'cryptoOnramp.tooManyDecimals' : mappedQuoteError,
+        depositError: mappedDepositError,
+        canSubmit,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.module.css b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.module.css
new file mode 100644
index 000000000..26a8e56d5
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.module.css
@@ -0,0 +1,28 @@
+.widget {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 370px;
+    display: flex;
+    flex-direction: column;
+}
+
+.selectors {
+    margin-bottom: 24px;
+}
+
+.inputSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 28px 0;
+    margin-bottom: 24px;
+}
+
+.info {
+    margin-top: 16px;
+}
+
+.presets {
+    margin-bottom: 16px;
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.tsx
new file mode 100644
index 000000000..e119d6301
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/crypto-onramp-widget-ui.tsx
@@ -0,0 +1,257 @@
+/**
+ * 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 { useCallback, useEffect, useState } from 'react';
+import type { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import { ButtonWithConnect } from '../../../../../components/shared/button-with-connect';
+import { OnrampTokenSelectors } from '../../../components/onramp-token-selectors';
+import { CenteredAmountInput } from '../../../../../components/ui/centered-amount-input';
+import { AmountPresets } from '../../../../../components/shared/amount-presets';
+import { TokenSelectModal } from '../../../../../components/shared/token-select-modal';
+import { AmountReversed } from '../../../../../components/ui/amount-reversed';
+import { CryptoMethodSelectModal } from '../crypto-method-select-modal';
+import { CryptoOnrampDepositModal } from '../crypto-onramp-deposit-modal';
+import { CryptoOnrampRefundAddressModal } from '../crypto-onramp-refund-address-modal';
+import { InfoBlock } from '../../../../../components/ui/info-block';
+import type { CryptoOnrampContextType } from '../crypto-onramp-widget-provider';
+import { getChainInfo } from '../utils/chains';
+import { formatOnrampAmount } from '../utils/format-onramp-amount';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import styles from './crypto-onramp-widget-ui.module.css';
+
+export type CryptoOnrampWidgetRenderProps = CryptoOnrampContextType &
+    Omit<ComponentProps<'div'>, keyof CryptoOnrampContextType>;
+
+export const CryptoOnrampWidgetUI: FC<CryptoOnrampWidgetRenderProps> = ({
+    tokens,
+    tokenSections,
+    selectedToken,
+    setSelectedToken,
+    paymentMethods,
+    methodSections,
+    selectedMethod,
+    setSelectedMethod,
+    chains,
+    amount,
+    setAmount,
+    amountInputMode,
+    setAmountInputMode,
+    convertedAmount,
+    presetAmounts,
+    quote,
+    isLoadingQuote,
+    quoteProviderName,
+    createDeposit,
+    isCreatingDeposit,
+    deposit,
+    depositAmount,
+    isWalletConnected,
+    canContinue,
+    onReset,
+    depositStatus,
+    isRefundAddressRequired,
+    isReversedAmountSupported,
+    refundAddress,
+    setRefundAddress,
+    quoteError,
+    depositError,
+    targetBalance,
+    isLoadingTargetBalance,
+    className,
+    ...props
+}) => {
+    const [isTokenSelectOpen, setIsTokenSelectOpen] = useState(false);
+    const [isMethodSelectOpen, setIsMethodSelectOpen] = useState(false);
+    const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false);
+    const [isDepositOpen, setIsDepositOpen] = useState(false);
+
+    const { t } = useI18n();
+
+    const handleContinue = useCallback(() => {
+        if (!isRefundAddressRequired) {
+            createDeposit();
+            return;
+        }
+        setIsRefundAddressOpen(true);
+    }, [isRefundAddressRequired, createDeposit]);
+
+    const handleConfirmRefundAddress = useCallback(() => {
+        createDeposit();
+    }, [createDeposit]);
+
+    const handleDepositClose = useCallback(() => {
+        setIsDepositOpen(false);
+        onReset();
+    }, [onReset]);
+
+    const handleRefundAddressClose = useCallback(() => {
+        setIsRefundAddressOpen(false);
+        onReset();
+    }, [onReset]);
+
+    useEffect(() => {
+        if (deposit) {
+            setIsDepositOpen(true);
+            setIsRefundAddressOpen(false);
+        }
+    }, [deposit]);
+
+    return (
+        <div className={clsx(styles.widget, className)} {...props}>
+            <OnrampTokenSelectors
+                className={styles.selectors}
+                from={{ title: selectedToken?.symbol ?? '', logoSrc: selectedToken?.logo }}
+                to={{
+                    title: selectedMethod.symbol,
+                    logoSrc: selectedMethod.logo,
+                    networkLogoSrc: getChainInfo(selectedMethod.chain, chains).logo,
+                }}
+                onFromClick={() => setIsTokenSelectOpen(true)}
+                onToClick={() => setIsMethodSelectOpen(true)}
+            />
+
+            <div className={styles.inputSection}>
+                <CenteredAmountInput
+                    className={styles.input}
+                    value={amount}
+                    onValueChange={setAmount}
+                    disabled={!isWalletConnected}
+                    ticker={amountInputMode === 'token' ? selectedToken?.symbol : selectedMethod.symbol}
+                />
+
+                <AmountReversed
+                    className={styles.converted}
+                    value={convertedAmount}
+                    onChangeDirection={
+                        isReversedAmountSupported
+                            ? () => setAmountInputMode(amountInputMode === 'token' ? 'method' : 'token')
+                            : undefined
+                    }
+                    ticker={amountInputMode === 'token' ? selectedMethod.symbol : selectedToken?.symbol}
+                    decimals={amountInputMode === 'token' ? selectedMethod.decimals : (selectedToken?.decimals ?? 0)}
+                />
+            </div>
+
+            <AmountPresets className={styles.presets} presets={presetAmounts} onPresetSelect={setAmount} />
+
+            <ButtonWithConnect
+                variant="fill"
+                size="l"
+                disabled={!canContinue || isCreatingDeposit}
+                loading={isCreatingDeposit}
+                onClick={handleContinue}
+                fullWidth
+            >
+                {quoteError ? t(quoteError) : t('cryptoOnramp.continue')}
+            </ButtonWithConnect>
+
+            <InfoBlock.Container className={styles.info}>
+                <InfoBlock.Row>
+                    <InfoBlock.Label>{t('cryptoOnramp.youGet')}</InfoBlock.Label>
+
+                    {isLoadingQuote ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>
+                            {formatOnrampAmount(
+                                amountInputMode === 'token' ? amount : convertedAmount,
+                                selectedToken?.decimals,
+                            )}{' '}
+                            {selectedToken?.symbol}
+                        </InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>
+
+                {/*<InfoBlock.Row>
+                    <InfoBlock.Label>{t('cryptoOnramp.exchangeRate')}</InfoBlock.Label>
+
+                    {isLoadingQuote ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>
+                            1 {selectedToken?.symbol} ={' '}
+                            {formatOnrampAmount(quote ? (1 / parseFloat(quote.rate)).toString() : '0', 2)}{' '}
+                            {selectedMethod.symbol}
+                        </InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>*/}
+
+                {isWalletConnected && (
+                    <InfoBlock.Row>
+                        <InfoBlock.Label>{t('cryptoOnramp.yourBalance')}</InfoBlock.Label>
+
+                        {isLoadingTargetBalance ? (
+                            <InfoBlock.ValueSkeleton />
+                        ) : (
+                            <InfoBlock.Value>
+                                {formatOnrampAmount(targetBalance || '0', selectedToken?.decimals)}{' '}
+                                {selectedToken?.symbol}
+                            </InfoBlock.Value>
+                        )}
+                    </InfoBlock.Row>
+                )}
+
+                <InfoBlock.Row>
+                    <InfoBlock.Label>{t('cryptoOnramp.provider')}</InfoBlock.Label>
+                    {isLoadingQuote || !quoteProviderName ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>{quoteProviderName}</InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>
+            </InfoBlock.Container>
+
+            <TokenSelectModal
+                open={isTokenSelectOpen}
+                onClose={() => setIsTokenSelectOpen(false)}
+                tokens={tokens}
+                tokenSections={tokenSections}
+                onSelect={setSelectedToken}
+                title={t('onramp.selectToken')}
+                searchPlaceholder={t('onramp.searchToken')}
+            />
+
+            <CryptoMethodSelectModal
+                open={isMethodSelectOpen}
+                onClose={() => setIsMethodSelectOpen(false)}
+                methods={paymentMethods}
+                methodSections={methodSections}
+                chains={chains}
+                onSelect={setSelectedMethod}
+            />
+
+            <CryptoOnrampDepositModal
+                open={isDepositOpen}
+                onClose={handleDepositClose}
+                address={deposit?.address ?? ''}
+                amount={depositAmount}
+                symbol={selectedMethod.symbol}
+                memo={deposit?.memo}
+                tokenLogo={selectedMethod.logo}
+                chainWarning={deposit?.chainWarning}
+                depositStatus={depositStatus}
+                targetSymbol={selectedToken?.symbol ?? ''}
+                targetBalance={targetBalance}
+                targetDecimals={selectedToken?.decimals}
+                isLoadingTargetBalance={isLoadingTargetBalance}
+            />
+
+            <CryptoOnrampRefundAddressModal
+                open={isRefundAddressOpen}
+                onClose={handleRefundAddressClose}
+                value={refundAddress}
+                onChange={setRefundAddress}
+                onConfirm={handleConfirmRefundAddress}
+                isLoading={isCreatingDeposit}
+                error={depositError ? t(depositError) : null}
+            />
+        </div>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/index.ts
new file mode 100644
index 000000000..96460978c
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget-ui/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoOnrampWidgetUI } from './crypto-onramp-widget-ui';
+export type { CryptoOnrampWidgetRenderProps } from './crypto-onramp-widget-ui';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.module.css b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.module.css
new file mode 100644
index 000000000..1321f7d89
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.module.css
@@ -0,0 +1,26 @@
+.widget {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 16px;
+	background-color: var(--ta-color-background-secondary);
+	border-radius: var(--ta-border-radius-xl);
+}
+
+.info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.symbol {
+	composes: bodyMedium from '../../../../styles/typography.module.css';
+	color: var(--ta-color-text);
+}
+
+.amount {
+	composes: footnoteRegular from '../../../../styles/typography.module.css';
+	color: var(--ta-color-text-secondary);
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.stories.tsx
new file mode 100644
index 000000000..dcd042e85
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.stories.tsx
@@ -0,0 +1,61 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import type { CryptoOnrampToken } from '../../../types';
+import { CryptoOnrampWidget } from './crypto-onramp-widget';
+import { CRYPTO_PAYMENT_METHODS } from '../../../mock-data/crypto-payment-methods';
+
+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 meta: Meta<typeof CryptoOnrampWidget> = {
+    title: 'Features/Onramp/CryptoOnrampWidget',
+    component: CryptoOnrampWidget,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CryptoOnrampWidget>;
+
+export const Default: Story = {
+    args: {
+        tokens: TOKENS,
+        defaultTokenId: 'usdt-ton',
+        paymentMethods: CRYPTO_PAYMENT_METHODS,
+        defaultMethodId: 'usdc-base',
+    },
+};
+
+export const WithSections: Story = {
+    args: {
+        tokens: TOKENS,
+        defaultTokenId: 'ton',
+        tokenSections: [{ title: 'Popular', ids: ['ton', 'usdt-ton'] }],
+        paymentMethods: CRYPTO_PAYMENT_METHODS,
+        defaultMethodId: 'usdc-base',
+        methodSections: [{ title: 'EVM Networks', ids: ['usdc-base', 'usdt-bsc'] }],
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.tsx
new file mode 100644
index 000000000..521489779
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/crypto-onramp-widget.tsx
@@ -0,0 +1,73 @@
+/**
+ * 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 { ComponentProps, FC, ReactNode } from 'react';
+
+import type { CryptoOnrampWidgetRenderProps } from '../crypto-onramp-widget-ui';
+import { CryptoOnrampWidgetUI } from '../crypto-onramp-widget-ui';
+import { CryptoOnrampWidgetProvider, useCryptoOnrampContext } from '../crypto-onramp-widget-provider';
+import type { CryptoOnrampProviderProps, CryptoOnrampContextType } from '../crypto-onramp-widget-provider';
+
+type DivExtras = Omit<ComponentProps<'div'>, 'children' | keyof CryptoOnrampContextType>;
+
+/**
+ * Props for the CryptoOnrampWidget component.
+ * Inherits all configuration from CryptoOnrampProviderProps.
+ */
+export interface CryptoOnrampWidgetProps extends Omit<CryptoOnrampProviderProps, 'children'>, DivExtras {
+    /**
+     * Custom render function.
+     * When provided, it replaces the default widget UI and gives full control over the rendering.
+     * Accesses all state and actions from the crypto onramp context.
+     */
+    children?: (props: CryptoOnrampWidgetRenderProps) => ReactNode;
+}
+
+const CryptoOnrampWidgetContent: FC<{ children?: (props: CryptoOnrampWidgetRenderProps) => ReactNode } & DivExtras> = ({
+    children,
+    ...rest
+}) => {
+    const ctx = useCryptoOnrampContext();
+
+    if (children) {
+        return <>{children({ ...ctx, ...rest })}</>;
+    }
+
+    return <CryptoOnrampWidgetUI {...ctx} {...rest} />;
+};
+
+/**
+ * A high-level component that provides a complete crypto-to-crypto onramp interface.
+ *
+ * It manages payment method selection, quote fetching, deposit creation, and
+ * deposit status tracking. It can be used as a standalone widget with default UI
+ * or customized using a render function.
+ */
+export const CryptoOnrampWidget: FC<CryptoOnrampWidgetProps> = ({
+    children,
+    tokens,
+    tokenSections,
+    paymentMethods,
+    methodSections,
+    defaultTokenId,
+    defaultMethodId,
+    ...rest
+}) => {
+    return (
+        <CryptoOnrampWidgetProvider
+            tokens={tokens}
+            tokenSections={tokenSections}
+            paymentMethods={paymentMethods}
+            methodSections={methodSections}
+            defaultTokenId={defaultTokenId}
+            defaultMethodId={defaultMethodId}
+        >
+            <CryptoOnrampWidgetContent {...rest}>{children}</CryptoOnrampWidgetContent>
+        </CryptoOnrampWidgetProvider>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/index.ts
new file mode 100644
index 000000000..2c710bbac
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-widget/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CryptoOnrampWidget } from './crypto-onramp-widget';
+export type { CryptoOnrampWidgetProps } from './crypto-onramp-widget';
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/chains.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/chains.ts
new file mode 100644
index 000000000..4558e04f4
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/chains.ts
@@ -0,0 +1,51 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Display info for a CAIP-2 chain — used by the crypto onramp widget to
+ * render chain names and logos.
+ */
+export interface ChainInfo {
+    name: string;
+    logo?: string;
+}
+
+/**
+ * Default mapping of CAIP-2 chain identifiers to display info used in the
+ * crypto onramp widget. Consumers can override or extend this map via the
+ * `chains` prop on `CryptoOnrampWidgetProvider`.
+ *
+ * @see https://chainagnostic.org/CAIPs/caip-2
+ */
+export const DEFAULT_CHAINS: Record<string, ChainInfo> = {
+    'eip155:1': { name: 'Ethereum' },
+    'eip155:10': { name: 'Optimism' },
+    'eip155:56': { name: 'BSC' },
+    'eip155:137': { name: 'Polygon' },
+    'eip155:8453': { name: 'Base' },
+    'eip155:42161': {
+        name: 'Arbitrum One',
+        logo: 'https://cdn.layerswap.io/layerswap/networks/arbitrum_mainnet.png',
+    },
+    'eip155:43114': { name: 'Avalanche' },
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': { name: 'Solana' },
+    'bip122:000000000019d6689c085ae165831e93': { name: 'Bitcoin' },
+};
+
+/**
+ * Resolve display info for a CAIP-2 chain. Falls back to a synthetic info
+ * object whose `name` is the reference portion of the CAIP-2 string
+ * (e.g. `eip155:9999` → `9999`), or the raw value if it does not look like
+ * a CAIP-2 identifier.
+ */
+export const getChainInfo = (chain: string, chains: Record<string, ChainInfo>): ChainInfo => {
+    const direct = chains[chain];
+    if (direct) return direct;
+    const colonIdx = chain.indexOf(':');
+    return { name: colonIdx >= 0 ? chain.slice(colonIdx + 1) : chain };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/format-onramp-amount.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/format-onramp-amount.ts
new file mode 100644
index 000000000..38088d386
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/format-onramp-amount.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 { formatLargeValue, truncateDecimals } from '@ton/appkit';
+
+const MAX_DISPLAY_DECIMALS = 5;
+
+/**
+ * Format a token amount for display in the crypto-onramp UI.
+ * Truncates the fractional part to {@link MAX_DISPLAY_DECIMALS} (or the token's own decimals when
+ * lower) before passing to {@link formatLargeValue} for grouping. When `decimals` is unknown,
+ * falls back to `0` so we never invent precision the token may not have.
+ */
+export const formatOnrampAmount = (amount: string | undefined, decimals?: number): string => {
+    const trimmed = truncateDecimals(amount || '0', Math.min(MAX_DISPLAY_DECIMALS, decimals ?? 0));
+    return formatLargeValue(trimmed, decimals);
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/map-crypto-onramp-error.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/map-crypto-onramp-error.ts
new file mode 100644
index 000000000..5654656d6
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/map-crypto-onramp-error.ts
@@ -0,0 +1,37 @@
+/**
+ * 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 { CryptoOnrampError } from '@ton/appkit';
+
+import { mapDefiError } from '../../../../../utils/map-defi-error';
+
+/**
+ * Map a thrown crypto-onramp error to an i18n key. Tries crypto-onramp-specific codes first,
+ * falls back to the shared {@link mapDefiError} for base DeFi codes, and finally to a generic
+ * `cryptoOnramp.genericError`.
+ */
+export const mapCryptoOnrampError = (error: unknown): string => {
+    if (error instanceof CryptoOnrampError) {
+        switch (error.code) {
+            case CryptoOnrampError.REFUND_ADDRESS_REQUIRED:
+                return 'cryptoOnramp.refundAddressRequired';
+            case CryptoOnrampError.REVERSED_AMOUNT_NOT_SUPPORTED:
+                return 'cryptoOnramp.reversedAmountNotSupported';
+            case CryptoOnrampError.INVALID_REFUND_ADDRESS:
+                return 'cryptoOnramp.invalidRefundAddress';
+            case CryptoOnrampError.QUOTE_FAILED:
+                return 'cryptoOnramp.quoteError';
+            case CryptoOnrampError.PROVIDER_ERROR:
+                return 'cryptoOnramp.providerError';
+            case CryptoOnrampError.DEPOSIT_FAILED:
+                return 'cryptoOnramp.depositFailed';
+        }
+    }
+
+    return mapDefiError(error) ?? 'cryptoOnramp.genericError';
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/truncate-address.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/truncate-address.ts
new file mode 100644
index 000000000..b66bf1771
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/utils/truncate-address.ts
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ */
+
+const SHORT_ADDRESS_THRESHOLD = 20;
+const HEAD_LENGTH = 10;
+const TAIL_LENGTH = 8;
+
+/**
+ * Shorten a deposit address for display, keeping the first {@link HEAD_LENGTH} and last
+ * {@link TAIL_LENGTH} characters separated by an ellipsis. Addresses shorter than
+ * {@link SHORT_ADDRESS_THRESHOLD} are returned unchanged.
+ */
+export const truncateAddress = (address: string): string => {
+    if (address.length <= SHORT_ADDRESS_THRESHOLD) return address;
+    return `${address.slice(0, HEAD_LENGTH)}...${address.slice(-TAIL_LENGTH)}`;
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/index.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/index.ts
new file mode 100644
index 000000000..2b79e6063
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampWidgetProvider, useOnrampContext } from './onramp-widget-provider';
+export type { OnrampProviderProps, OnrampContextType } from './onramp-widget-provider';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-widget-provider.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-widget-provider.tsx
new file mode 100644
index 000000000..662a7b139
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-widget-provider.tsx
@@ -0,0 +1,269 @@
+/**
+ * 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 { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+import type { TokenSectionConfig } from '../../../../../components/shared/token-select-modal';
+import type {
+    OnrampCurrency,
+    OnrampProvider as OnrampWidgetProviderType,
+    AmountInputMode,
+    OnrampAmountPreset,
+    CurrencySectionConfig,
+} from '../../../types';
+import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import { ONRAMP_PROVIDERS as MOCK_PROVIDERS } from '../../../mock-data/providers';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import { useOnrampProviders } from '../../../hooks/use-onramp-providers';
+import { useOnrampQuote } from '../../../hooks/use-onramp-quote';
+import { useBuildOnrampUrl } from '../../../hooks/use-build-onramp-url';
+import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
+
+export type { AppkitUIToken };
+
+const ERROR_THRESHOLD = 10000000;
+
+export interface OnrampContextType {
+    /** Full list of available tokens to buy */
+    tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
+    /** Optional section configs for grouping currencies in the selector */
+    currencySections?: CurrencySectionConfig[];
+    /** Currently selected token to buy */
+    selectedToken: AppkitUIToken | null;
+    /** Select a token to buy */
+    setSelectedToken: (token: AppkitUIToken) => void;
+
+    /** Available fiat currencies */
+    currencies: OnrampCurrency[];
+    /** Currently selected fiat currency */
+    selectedCurrency: OnrampCurrency;
+    /** Select a fiat currency */
+    setSelectedCurrency: (currency: OnrampCurrency) => void;
+
+    /** Current amount input value */
+    amount: string;
+    /** Set the amount value */
+    setAmount: (value: string) => void;
+    /** Whether user is entering token amount or fiat amount */
+    amountInputMode: AmountInputMode;
+    /** Switch between token / currency input mode */
+    setAmountInputMode: (mode: AmountInputMode) => void;
+    /** Mocked converted amount in the opposite denomination */
+    convertedAmount: string;
+    /** Preset amount values */
+    presetAmounts: OnrampAmountPreset[];
+
+    /** Available payment providers */
+    providers: OnrampWidgetProviderType[];
+    /** Currently selected provider */
+    selectedProvider: OnrampWidgetProviderType | null;
+    /** Select a provider */
+    setSelectedProvider: (provider: OnrampWidgetProviderType) => void;
+
+    /** Whether amount is valid and user can proceed */
+    canContinue: boolean;
+    /** Current error, e.g. 'noQuotesFound' */
+    error?: string;
+    /** Loading state for quotes */
+    isLoading: boolean;
+    /** Reset widget to initial state */
+    onReset: () => void;
+    /** Execute the onramp (build URL and redirect) */
+    onContinue: () => void;
+}
+
+const defaultContext: OnrampContextType = {
+    tokens: [],
+    tokenSections: undefined,
+    currencySections: undefined,
+    selectedToken: null,
+    setSelectedToken: () => {},
+    currencies: [],
+    selectedCurrency: ONRAMP_CURRENCIES[0]!,
+    setSelectedCurrency: () => {},
+    amount: '',
+    setAmount: () => {},
+    amountInputMode: 'currency',
+    setAmountInputMode: () => {},
+    convertedAmount: '',
+    presetAmounts: DEFAULT_ONRAMP_PRESETS,
+    providers: [],
+    selectedProvider: null,
+    setSelectedProvider: () => {},
+    canContinue: false,
+    error: undefined,
+    isLoading: false,
+    onReset: () => {},
+    onContinue: () => {},
+};
+
+export const OnrampContext = createContext<OnrampContextType>(defaultContext);
+
+export const useOnrampContext = () => {
+    return useContext(OnrampContext);
+};
+
+export interface OnrampProviderProps extends PropsWithChildren {
+    /** Full list of tokens available for purchase */
+    tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
+    /** Optional section configs for grouping currencies in the selector */
+    currencySections?: CurrencySectionConfig[];
+    /** Id of the token pre-selected for purchase */
+    defaultTokenId?: string;
+    /** Id of the fiat currency pre-selected */
+    defaultCurrencyId?: string;
+}
+
+export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
+    children,
+    tokens,
+    tokenSections,
+    currencySections,
+    defaultTokenId,
+    defaultCurrencyId,
+}) => {
+    const [selectedToken, setSelectedToken] = useState<AppkitUIToken | null>(
+        () => tokens.find((t) => t.id === defaultTokenId) ?? tokens[0] ?? null,
+    );
+
+    const [selectedCurrency, setSelectedCurrency] = useState<OnrampCurrency>(
+        () => ONRAMP_CURRENCIES.find((c) => c.id === defaultCurrencyId) ?? ONRAMP_CURRENCIES[0]!,
+    );
+
+    const [amount, setAmount] = useState('');
+    const [amountInputMode, setAmountInputMode] = useState<AmountInputMode>('currency');
+
+    // Get real registered providers
+    const registeredProviders = useOnrampProviders();
+
+    const providers = useMemo(() => {
+        if (registeredProviders.length === 0) {
+            return MOCK_PROVIDERS;
+        }
+
+        return registeredProviders.map((rp) => {
+            const metadata = MOCK_PROVIDERS.find((m) => m.id === rp.providerId);
+            return {
+                id: rp.providerId,
+                name: metadata?.name ?? rp.providerId,
+                description: metadata?.description ?? '',
+                logo: metadata?.logo ?? '',
+            };
+        });
+    }, [registeredProviders]);
+
+    const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(
+        () => providers[0] ?? null,
+    );
+
+    // Update selected provider if it's no longer in the list or if the list was initially empty
+    useEffect(() => {
+        if (!selectedProvider || !providers.find((p) => p.id === selectedProvider.id)) {
+            if (providers.length > 0) {
+                setSelectedProvider(providers[0]!);
+            }
+        }
+    }, [providers, selectedProvider]);
+
+    const { data: quote, isLoading: isQuoteLoading } = useOnrampQuote({
+        fiatCurrency: selectedCurrency.code,
+        cryptoCurrency: selectedToken?.symbol ?? 'TON',
+        amount: amount || '0',
+        isFiatAmount: amountInputMode === 'currency',
+        providerId: selectedProvider?.id ?? '',
+        query: {
+            enabled: !!amount && !isNaN(parseFloat(amount)) && parseFloat(amount) > 0 && !!selectedProvider,
+        },
+    });
+
+    const convertedAmount = useMemo(() => {
+        if (!quote) return '';
+        return amountInputMode === 'currency' ? quote.cryptoAmount : quote.fiatAmount;
+    }, [quote, amountInputMode]);
+
+    const numericAmount = parseFloat(amount);
+    const error = !isNaN(numericAmount) && numericAmount > ERROR_THRESHOLD ? 'noQuotesFound' : undefined;
+    const canContinue =
+        amount !== '' && !isNaN(numericAmount) && numericAmount > 0 && !!quote && !error && !!selectedProvider;
+
+    const { mutateAsync: buildUrl } = useBuildOnrampUrl();
+    const wallets = useConnectedWallets();
+    const activeWallet = wallets?.[0];
+
+    const onContinue = useCallback(async () => {
+        if (!canContinue || !quote || !activeWallet || !selectedProvider) return;
+
+        try {
+            const url = await buildUrl({
+                quote,
+                userAddress: activeWallet.getAddress(),
+                providerId: selectedProvider.id,
+            });
+            window.open(url, '_blank');
+        } catch {
+            // silently swallow — redirect is best-effort
+        }
+    }, [canContinue, quote, activeWallet, selectedProvider, buildUrl]);
+
+    const onReset = useCallback(() => {
+        setAmount('');
+        setAmountInputMode('currency');
+    }, []);
+
+    const value = useMemo(
+        () => ({
+            tokens,
+            tokenSections,
+            currencySections,
+            selectedToken,
+            setSelectedToken,
+            currencies: ONRAMP_CURRENCIES,
+            selectedCurrency,
+            setSelectedCurrency,
+            amount,
+            setAmount,
+            amountInputMode,
+            setAmountInputMode,
+            convertedAmount,
+            presetAmounts: DEFAULT_ONRAMP_PRESETS,
+            providers,
+            selectedProvider,
+            setSelectedProvider,
+            canContinue,
+            error,
+            isLoading: isQuoteLoading,
+            onReset,
+            onContinue,
+        }),
+        [
+            tokens,
+            tokenSections,
+            currencySections,
+            selectedToken,
+            selectedCurrency,
+            amount,
+            amountInputMode,
+            convertedAmount,
+            providers,
+            selectedProvider,
+            canContinue,
+            error,
+            isQuoteLoading,
+            onReset,
+            onContinue,
+        ],
+    );
+
+    return <OnrampContext.Provider value={value}>{children}</OnrampContext.Provider>;
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/index.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/index.ts
new file mode 100644
index 000000000..dd9854310
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampWidgetUI } from './onramp-widget-ui';
+export type { OnrampWidgetRenderProps } from './onramp-widget-ui';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.module.css b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.module.css
new file mode 100644
index 000000000..d22284dd8
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.module.css
@@ -0,0 +1,28 @@
+.widget {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 370px;
+    display: flex;
+    flex-direction: column;
+}
+
+.selectors {
+    margin-bottom: 24px;
+}
+
+.inputSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 28px 0;
+    margin-bottom: 24px;
+}
+
+.presets {
+    margin-bottom: 24px;
+}
+
+.info {
+    margin-bottom: 24px;
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.tsx
new file mode 100644
index 000000000..7fd5272eb
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.tsx
@@ -0,0 +1,143 @@
+/**
+ * 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 { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+import { Button } from '../../../../../components/ui/button';
+import type { OnrampContextType } from '../onramp-widget-provider';
+import { OnrampTokenSelectors } from '../../../components/onramp-token-selectors';
+import { CenteredAmountInput } from '../../../../../components/ui/centered-amount-input';
+import { AmountPresets } from '../../../../../components/shared/amount-presets';
+import { TokenSelectModal } from '../../../../../components/shared/token-select-modal';
+import { OnrampCurrencySelectModal } from '../../../components/onramp-currency-select-modal';
+import { OnrampProviderSelect } from '../../../components/onramp-provider-select';
+import styles from './onramp-widget-ui.module.css';
+import { OnrampAmountReversed } from '../../../components/onramp-amount-reversed';
+import type { OnrampProvider } from '../../../types';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+
+export type OnrampWidgetRenderProps = OnrampContextType;
+
+export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
+    tokens,
+    tokenSections,
+    selectedToken,
+    setSelectedToken,
+    currencies,
+    currencySections,
+    selectedCurrency,
+    setSelectedCurrency,
+    amount,
+    setAmount,
+    amountInputMode,
+    setAmountInputMode,
+    convertedAmount,
+    presetAmounts,
+    providers,
+    canContinue,
+    error,
+    isLoading,
+    onContinue,
+    setSelectedProvider,
+}) => {
+    const { t } = useI18n();
+    const [isTokenSelectOpen, setIsTokenSelectOpen] = useState(false);
+
+    const [isCurrencySelectOpen, setIsCurrencySelectOpen] = useState(false);
+    const [isProviderSelectOpen, setIsProviderSelectOpen] = useState(false);
+
+    const handleContinue = useCallback(() => {
+        setIsProviderSelectOpen(true);
+    }, []);
+
+    const handleProviderSelected = useCallback(
+        (provider: OnrampProvider) => {
+            setSelectedProvider(provider);
+            // We give it a small timeout or wait for state update to ensure
+            // the buildOnrampUrl uses the correct providerId if it's derived from state.
+            // In our provider, buildOnrampUrl uses selectedProvider.id from state.
+            setTimeout(() => {
+                onContinue();
+                setIsProviderSelectOpen(false);
+            }, 0);
+        },
+        [onContinue, setSelectedProvider],
+    );
+
+    return (
+        <div className={styles.widget}>
+            <OnrampTokenSelectors
+                className={styles.selectors}
+                from={{ title: selectedToken?.symbol ?? '', logoSrc: selectedToken?.logo }}
+                to={{ title: selectedCurrency.code, logoSrc: selectedCurrency.logo }}
+                onFromClick={() => setIsTokenSelectOpen(true)}
+                onToClick={() => setIsCurrencySelectOpen(true)}
+            />
+
+            <div className={styles.inputSection}>
+                <CenteredAmountInput
+                    value={amount}
+                    onValueChange={setAmount}
+                    ticker={amountInputMode === 'token' ? selectedToken?.symbol : undefined}
+                    symbol={amountInputMode === 'token' ? undefined : selectedCurrency.symbol}
+                />
+                <OnrampAmountReversed
+                    className={styles.converted}
+                    value={convertedAmount}
+                    onChangeDirection={() => setAmountInputMode(amountInputMode === 'token' ? 'currency' : 'token')}
+                    ticker={amountInputMode === 'token' ? undefined : selectedToken?.symbol}
+                    symbol={amountInputMode === 'token' ? selectedCurrency.symbol : undefined}
+                />
+            </div>
+
+            <AmountPresets
+                className={styles.presets}
+                presets={presetAmounts}
+                currencySymbol={selectedCurrency.symbol}
+                onPresetSelect={setAmount}
+            />
+
+            <Button
+                variant="fill"
+                size="l"
+                disabled={!canContinue && !error}
+                loading={isLoading}
+                onClick={handleContinue}
+                fullWidth
+            >
+                {error ? t(`onramp.${error}`) : t('onramp.continue')}
+            </Button>
+
+            <TokenSelectModal
+                open={isTokenSelectOpen}
+                onClose={() => setIsTokenSelectOpen(false)}
+                tokens={tokens}
+                tokenSections={tokenSections}
+                onSelect={setSelectedToken}
+                title={t('onramp.selectToken')}
+                searchPlaceholder={t('onramp.searchToken')}
+            />
+
+            <OnrampCurrencySelectModal
+                open={isCurrencySelectOpen}
+                onClose={() => setIsCurrencySelectOpen(false)}
+                currencies={currencies}
+                currencySections={currencySections}
+                onSelect={setSelectedCurrency}
+            />
+
+            <OnrampProviderSelect
+                open={isProviderSelectOpen}
+                onClose={() => setIsProviderSelectOpen(false)}
+                providers={providers}
+                onSelect={handleProviderSelected}
+            />
+        </div>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/index.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/index.ts
new file mode 100644
index 000000000..8c8b72d43
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OnrampWidget } from './onramp-widget';
+export type { OnrampWidgetProps } from './onramp-widget';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.stories.tsx
new file mode 100644
index 000000000..7e45dfa4e
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.stories.tsx
@@ -0,0 +1,69 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { STORY_TOKENS } from '../../../../../storybook/fixtures/tokens';
+import { OnrampWidget } from './onramp-widget';
+
+const meta: Meta<typeof OnrampWidget> = {
+    title: 'Features/Onramp/OnrampWidget',
+    component: OnrampWidget,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof OnrampWidget>;
+
+export const Default: Story = {
+    args: {
+        tokens: STORY_TOKENS,
+        defaultTokenId: 'ton',
+        defaultCurrencyId: 'usd',
+        tokenSections: [{ title: 'Popular', ids: ['ton', 'usdt'] }],
+        currencySections: [{ title: 'Popular', ids: ['usd', 'eur'] }],
+    },
+};
+
+export const CustomUI: Story = {
+    args: {
+        tokens: STORY_TOKENS,
+        defaultTokenId: 'ton',
+        defaultCurrencyId: 'usd',
+    },
+    render: (args) => (
+        <OnrampWidget {...args}>
+            {({ selectedToken, selectedCurrency, amount, setAmount, canContinue }) => (
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 8,
+                        padding: 16,
+                        border: '1px solid #ccc',
+                        borderRadius: 12,
+                    }}
+                >
+                    <div>
+                        Buy {selectedToken?.symbol} with {selectedCurrency.code}
+                    </div>
+                    <input
+                        value={amount}
+                        onChange={(e) => setAmount(e.target.value)}
+                        placeholder="0"
+                        inputMode="decimal"
+                        style={{ fontSize: 32, fontWeight: 'bold', border: 'none', outline: 'none' }}
+                    />
+                    <button disabled={!canContinue} type="button">
+                        {canContinue ? 'Continue' : 'Enter an amount'}
+                    </button>
+                </div>
+            )}
+        </OnrampWidget>
+    ),
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.tsx
new file mode 100644
index 000000000..24d3c1cab
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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 { FC, ReactNode } from 'react';
+
+import type { OnrampWidgetRenderProps } from '../onramp-widget-ui';
+import { OnrampWidgetUI } from '../onramp-widget-ui';
+import { OnrampWidgetProvider, useOnrampContext } from '../onramp-widget-provider';
+import type { OnrampProviderProps } from '../onramp-widget-provider';
+
+export interface OnrampWidgetProps extends Omit<OnrampProviderProps, 'children'> {
+    /** Custom render function — when provided, replaces the default widget UI */
+    children?: (props: OnrampWidgetRenderProps) => ReactNode;
+}
+
+const OnrampWidgetContent: FC<{ children?: (props: OnrampWidgetRenderProps) => ReactNode }> = ({ children }) => {
+    const ctx = useOnrampContext();
+
+    if (children) {
+        return <>{children(ctx)}</>;
+    }
+
+    return <OnrampWidgetUI {...ctx} />;
+};
+
+export const OnrampWidget: FC<OnrampWidgetProps> = ({
+    children,
+    tokens,
+    tokenSections,
+    currencySections,
+    defaultTokenId,
+    defaultCurrencyId,
+}) => {
+    return (
+        <OnrampWidgetProvider
+            tokens={tokens}
+            tokenSections={tokenSections}
+            currencySections={currencySections}
+            defaultTokenId={defaultTokenId}
+            defaultCurrencyId={defaultCurrencyId}
+        >
+            <OnrampWidgetContent>{children}</OnrampWidgetContent>
+        </OnrampWidgetProvider>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/index.ts b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/index.ts
new file mode 100644
index 000000000..ea36f5990
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { TonPayWidget } from './ton-pay-widget';
+export type { TonPayWidgetProps } from './ton-pay-widget';
diff --git a/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.module.css b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.module.css
new file mode 100644
index 000000000..f5d2bbd23
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.module.css
@@ -0,0 +1,35 @@
+.widget {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 370px;
+    display: flex;
+    flex-direction: column;
+}
+
+.selectors {
+    display: grid;
+    gap: 4px;
+    padding: 2px;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 64px;
+}
+
+.selector {
+    width: 100%;
+}
+
+.input {
+    margin-bottom: 64px;
+}
+
+.presets {
+    margin-bottom: 16px;
+}
+
+.error {
+    composes: footnoteRegular from '../../../../styles/typography.module.css';
+    margin-top: 12px;
+    color: var(--ta-color-error);
+    text-align: center;
+}
diff --git a/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.stories.tsx
new file mode 100644
index 000000000..ed83c2361
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.stories.tsx
@@ -0,0 +1,28 @@
+/**
+ * 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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { STORY_TOKENS } from '../../../../storybook/fixtures/tokens';
+import { TonPayWidget } from './ton-pay-widget';
+
+const meta: Meta<typeof TonPayWidget> = {
+    title: 'Features/Onramp/TonPayWidget',
+    component: TonPayWidget,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TonPayWidget>;
+
+export const Default: Story = {
+    args: {
+        tokens: STORY_TOKENS,
+        defaultTokenId: 'ton',
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.tsx b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.tsx
new file mode 100644
index 000000000..39845c390
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.tsx
@@ -0,0 +1,208 @@
+/**
+ * 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 { useCallback, useMemo, useState } from 'react';
+import type { FC } from 'react';
+
+import { Button } from '../../../../components/ui/button';
+import { CenteredAmountInput } from '../../../../components/ui/centered-amount-input';
+import { TokenSelector } from '../../../../components/shared/token-selector';
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import { TokenSelectModal } from '../../../../components/shared/token-select-modal';
+import type { TokenSectionConfig } from '../../../../components/shared/token-select-modal';
+import { useConnectedWallets } from '../../../wallets/hooks/use-connected-wallets';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { OnrampCurrencySelectModal } from '../../components/onramp-currency-select-modal';
+import { ONRAMP_CURRENCIES } from '../../mock-data/currencies';
+import type { OnrampAmountPreset, OnrampCurrency, CurrencySectionConfig } from '../../types';
+import styles from './ton-pay-widget.module.css';
+import { AmountPresets } from '../../../../components/shared/amount-presets';
+
+const TON_PAY_API_URL = 'https://testnet.pay.ton.org/api/merchant/v1/create-moonpay-transfer';
+const SUPPORTED_ASSETS = ['TON', 'USDT'] as const;
+
+const DEFAULT_CURRENCIES: OnrampCurrency[] = ONRAMP_CURRENCIES.filter((c) => c.id === 'usd');
+
+const DEFAULT_PRESET_AMOUNTS = ['50', '100', '250', '500'];
+
+export interface TonPayWidgetProps {
+    /** Tokens available to buy — only TON and USDT are supported by TonPay */
+    tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
+    /** Id of the token pre-selected for purchase */
+    defaultTokenId?: string;
+    /** Fiat currencies to show in the selector. Defaults to USD only. */
+    currencies?: OnrampCurrency[];
+    /** Optional section configs for grouping currencies in the selector */
+    currencySections?: CurrencySectionConfig[];
+    /** Id of the fiat currency pre-selected */
+    defaultCurrencyId?: string;
+    /** Pre-filled amount */
+    defaultAmount?: string;
+    /** Preset amount buttons (crypto amounts). Defaults to 50/100/250/500 with the token ticker. */
+    presetAmounts?: OnrampAmountPreset[];
+}
+
+export const TonPayWidget: FC<TonPayWidgetProps> = ({
+    tokens,
+    tokenSections,
+    defaultTokenId,
+    currencies = DEFAULT_CURRENCIES,
+    currencySections,
+    defaultCurrencyId,
+    defaultAmount = '',
+    presetAmounts,
+}) => {
+    const { t } = useI18n();
+
+    const supportedTokens = useMemo(
+        () =>
+            tokens.filter((token) =>
+                SUPPORTED_ASSETS.includes(token.symbol.toUpperCase() as (typeof SUPPORTED_ASSETS)[number]),
+            ),
+        [tokens],
+    );
+
+    const [selectedToken, setSelectedToken] = useState<AppkitUIToken | null>(
+        () => supportedTokens.find((t) => t.id === defaultTokenId) ?? supportedTokens[0] ?? null,
+    );
+    const [selectedCurrency, setSelectedCurrency] = useState<OnrampCurrency | null>(
+        () => currencies.find((c) => c.id === defaultCurrencyId) ?? currencies[0] ?? null,
+    );
+    const [amount, setAmount] = useState(defaultAmount);
+    const [isTokenSelectOpen, setIsTokenSelectOpen] = useState(false);
+    const [isCurrencySelectOpen, setIsCurrencySelectOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const wallets = useConnectedWallets();
+    const activeWallet = wallets?.[0];
+
+    const numericAmount = parseFloat(amount);
+    const isAmountValid = !isNaN(numericAmount) && numericAmount > 0;
+    const canContinue = isAmountValid && !!selectedToken && !!activeWallet && !isSubmitting;
+    const isCurrencyReadOnly = currencies.length <= 1;
+    const isTokenReadOnly = supportedTokens.length <= 1;
+
+    const effectivePresets = useMemo<OnrampAmountPreset[]>(() => {
+        if (presetAmounts) return presetAmounts;
+
+        return DEFAULT_PRESET_AMOUNTS.map((amount) => ({
+            amount,
+            label: amount,
+        }));
+    }, [presetAmounts]);
+
+    const handleContinue = useCallback(async () => {
+        if (!canContinue || !selectedToken || !activeWallet) return;
+
+        setIsSubmitting(true);
+        setError(null);
+
+        try {
+            const response = await fetch(TON_PAY_API_URL, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    asset: selectedToken.symbol.toUpperCase(),
+                    amount: numericAmount,
+                    recipientAddr: activeWallet.getAddress(),
+                    directTopUp: true,
+                }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (!data.link) {
+                throw new Error('Missing redirect URL');
+            }
+
+            window.open(data.link, '_blank');
+        } catch {
+            setError(t('onramp.tonPayError'));
+        } finally {
+            setIsSubmitting(false);
+        }
+    }, [canContinue, selectedToken, activeWallet, numericAmount, t]);
+
+    const errorMessage = error ?? (!activeWallet ? t('onramp.connectWallet') : null);
+
+    return (
+        <div className={styles.widget}>
+            <div className={styles.selectors}>
+                <TokenSelector
+                    size="m"
+                    variant="secondary"
+                    className={styles.selector}
+                    title={t('onramp.buyToken', { symbol: selectedToken?.symbol ?? '' })}
+                    icon={selectedToken?.logo}
+                    readOnly={isTokenReadOnly}
+                    onClick={() => setIsTokenSelectOpen(true)}
+                />
+
+                <TokenSelector
+                    size="m"
+                    variant="secondary"
+                    className={styles.selector}
+                    title={t('onramp.forCurrency', { symbol: selectedCurrency?.code ?? '' })}
+                    icon={selectedCurrency?.logo}
+                    readOnly={isCurrencyReadOnly}
+                    onClick={() => setIsCurrencySelectOpen(true)}
+                />
+            </div>
+
+            <CenteredAmountInput
+                className={styles.input}
+                value={amount}
+                onValueChange={setAmount}
+                ticker={selectedToken?.symbol}
+            />
+
+            <AmountPresets className={styles.presets} presets={effectivePresets} onPresetSelect={setAmount} />
+
+            <Button
+                variant="fill"
+                size="l"
+                disabled={!canContinue}
+                loading={isSubmitting}
+                onClick={handleContinue}
+                fullWidth
+            >
+                {t('onramp.continue')}
+            </Button>
+
+            {errorMessage && <div className={styles.error}>{errorMessage}</div>}
+
+            {!isTokenReadOnly && (
+                <TokenSelectModal
+                    open={isTokenSelectOpen}
+                    onClose={() => setIsTokenSelectOpen(false)}
+                    tokens={supportedTokens}
+                    tokenSections={tokenSections}
+                    onSelect={setSelectedToken}
+                    title={t('onramp.selectToken')}
+                    searchPlaceholder={t('onramp.searchToken')}
+                />
+            )}
+
+            {!isCurrencyReadOnly && (
+                <OnrampCurrencySelectModal
+                    open={isCurrencySelectOpen}
+                    onClose={() => setIsCurrencySelectOpen(false)}
+                    currencies={currencies}
+                    currencySections={currencySections}
+                    onSelect={setSelectedCurrency}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/packages/appkit-react/src/features/settings/hooks/use-app-kit-theme.ts b/packages/appkit-react/src/features/settings/hooks/use-app-kit-theme.ts
index 55d7f3997..917c37684 100644
--- a/packages/appkit-react/src/features/settings/hooks/use-app-kit-theme.ts
+++ b/packages/appkit-react/src/features/settings/hooks/use-app-kit-theme.ts
@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react';
 
 export type AppKitTheme = 'light' | 'dark' | string;
 
-export function useAppKitTheme() {
+export const useAppKitTheme = () => {
     const [theme, setTheme] = useState<AppKitTheme>('light');
 
     useEffect(() => {
@@ -19,4 +19,4 @@ export function useAppKitTheme() {
     }, [theme]);
 
     return [theme, setTheme] as const;
-}
+};
diff --git a/packages/appkit-react/src/features/settings/hooks/use-app-kit.ts b/packages/appkit-react/src/features/settings/hooks/use-app-kit.ts
index 2a56599a7..c08260593 100644
--- a/packages/appkit-react/src/features/settings/hooks/use-app-kit.ts
+++ b/packages/appkit-react/src/features/settings/hooks/use-app-kit.ts
@@ -10,7 +10,7 @@ import { useContext } from 'react';
 
 import { AppKitContext } from '../../../providers/app-kit-provider';
 
-export function useAppKit() {
+export const useAppKit = () => {
     const context = useContext(AppKitContext);
 
     if (!context) {
@@ -18,4 +18,4 @@ export function useAppKit() {
     }
 
     return context;
-}
+};
diff --git a/packages/appkit-react/src/features/staking/components/staking-widget-provider/staking-widget-provider.tsx b/packages/appkit-react/src/features/staking/components/staking-widget-provider/staking-widget-provider.tsx
index 885bd00df..3bef2a947 100644
--- a/packages/appkit-react/src/features/staking/components/staking-widget-provider/staking-widget-provider.tsx
+++ b/packages/appkit-react/src/features/staking/components/staking-widget-provider/staking-widget-provider.tsx
@@ -205,7 +205,7 @@ export const StakingWidgetProvider: FC<StakingProviderProps> = ({ children, netw
     // enough TON to cover network fees before sending.
     const { data: nativeBalanceData, isLoading: isNativeBalanceLoading } = useBalance({
         network,
-        query: { refetchInterval: 5000 },
+        query: { enabled: isNativeTon, refetchInterval: 5000 },
     });
 
     const { data: jettonBalanceData, isLoading: isJettonBalanceLoading } = useJettonBalanceByAddress({
diff --git a/packages/appkit-react/src/features/swap/components/swap-field/swap-field.tsx b/packages/appkit-react/src/features/swap/components/swap-field/swap-field.tsx
index f76c3d86e..5c579deb9 100644
--- a/packages/appkit-react/src/features/swap/components/swap-field/swap-field.tsx
+++ b/packages/appkit-react/src/features/swap/components/swap-field/swap-field.tsx
@@ -13,7 +13,7 @@ import clsx from 'clsx';
 import { useI18n } from '../../../settings/hooks/use-i18n';
 import { Input } from '../../../../components/ui/input/input';
 import { Skeleton } from '../../../../components/ui/skeleton';
-import { TokenSelector } from '../token-selector/token-selector';
+import { TokenSelector } from '../../../../components/shared/token-selector';
 import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
 import { getDisplayAmount } from '../../utils/get-display-amount';
 import styles from './swap-field.module.css';
@@ -21,6 +21,7 @@ import styles from './swap-field.module.css';
 export interface SwapFieldProps extends Omit<ComponentProps<typeof Input.Container>, 'children'> {
     type: 'pay' | 'receive';
     amount: string;
+    fiatSymbol?: string;
     token?: AppkitUIToken;
     onAmountChange?: (value: string) => void;
     balance?: string;
@@ -29,7 +30,6 @@ export interface SwapFieldProps extends Omit<ComponentProps<typeof Input.Contain
     onMaxClick?: () => void;
     onTokenSelectorClick?: () => void;
     isWalletConnected?: boolean;
-    fiatSymbol?: string;
 }
 
 export const SwapField: FC<SwapFieldProps> = ({
@@ -73,7 +73,7 @@ export const SwapField: FC<SwapFieldProps> = ({
                     disabled={type === 'receive'}
                 />
                 <Input.Slot side="right">
-                    <TokenSelector symbol={tokenSymbol} icon={token?.logo} onClick={onTokenSelectorClick} />
+                    <TokenSelector title={tokenSymbol ?? ''} icon={token?.logo} onClick={onTokenSelectorClick} />
                 </Input.Slot>
             </Input.Field>
 
diff --git a/packages/appkit-react/src/features/swap/components/swap-flip-button/swap-flip-button.module.css b/packages/appkit-react/src/features/swap/components/swap-flip-button/swap-flip-button.module.css
index 050461239..770fee0fd 100644
--- a/packages/appkit-react/src/features/swap/components/swap-flip-button/swap-flip-button.module.css
+++ b/packages/appkit-react/src/features/swap/components/swap-flip-button/swap-flip-button.module.css
@@ -6,15 +6,10 @@
   cursor: pointer;
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
   box-shadow: var(--ta-shadow-m);
-  appearance: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
   background-color: var(--ta-color-background-tertiary);
   color: var(--ta-color-text);
 }
diff --git a/packages/appkit-react/src/features/swap/components/swap-token-select-modal/swap-token-select-modal.module.css b/packages/appkit-react/src/features/swap/components/swap-token-select-modal/swap-token-select-modal.module.css
deleted file mode 100644
index fd1da9e6d..000000000
--- a/packages/appkit-react/src/features/swap/components/swap-token-select-modal/swap-token-select-modal.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.searchWrapper {
-  margin-bottom: 16px;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  background: none;
-  border-radius: var(--ta-border-radius-l);
-  cursor: pointer;
-  transition: background-color 0.15s;
-  text-align: left;
-}
-
-.item:hover {
-  background: var(--ta-color-background-secondary);
-}
-
-.tokenIcon {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.tokenInfo {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.tokenSymbol {
-  composes: bodySemibold from "../../../../styles/typography.module.css";
-  color: var(--ta-color-text);
-}
-
-.tokenName {
-  composes: footnoteRegular from "../../../../styles/typography.module.css";
-  color: var(--ta-color-text-secondary);
-}
-
-.tokenBalance {
-  composes: bodyRegular from "../../../../styles/typography.module.css";
-  color: var(--ta-color-text-secondary);
-  flex-shrink: 0;
-}
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget-provider/swap-widget-provider.tsx b/packages/appkit-react/src/features/swap/components/swap-widget-provider/swap-widget-provider.tsx
index b7e25c5f0..b4179f591 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget-provider/swap-widget-provider.tsx
+++ b/packages/appkit-react/src/features/swap/components/swap-widget-provider/swap-widget-provider.tsx
@@ -26,6 +26,7 @@ import { useNetwork } from '../../../network';
 import { useSendTransaction } from '../../../transaction/hooks/use-send-transaction';
 import { useDebounceValue } from '../../../../hooks/use-debounce-value';
 import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import type { TokenSectionConfig } from '../../../../components/shared/token-select-modal';
 import { mapSwapWidgetTokens } from '../../utils/map-swap-widget-tokens';
 import { useSwapTokenState } from './use-swap-token-state';
 import { useSwapBalances } from './use-swap-balances';
@@ -40,6 +41,8 @@ export type { AppkitUIToken };
 export interface SwapContextType {
     /** Full list of available tokens for swapping */
     tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
     /** Currently selected source token */
     fromToken: AppkitUIToken | null;
     /** Currently selected target token */
@@ -104,6 +107,7 @@ export interface SwapContextType {
 
 export const SwapContext = createContext<SwapContextType>({
     tokens: [],
+    tokenSections: undefined,
     fromToken: null,
     toToken: null,
     fromAmount: '',
@@ -140,9 +144,9 @@ export const SwapContext = createContext<SwapContextType>({
  * Hook to access the swap context.
  * Must be used within a SwapWidgetProvider (or SwapWidget).
  */
-export function useSwapContext() {
+export const useSwapContext = () => {
     return useContext(SwapContext);
-}
+};
 
 /**
  * Props for the SwapWidgetProvider.
@@ -150,14 +154,17 @@ export function useSwapContext() {
 export interface SwapProviderProps extends PropsWithChildren {
     /** Full list of tokens available for swapping in the UI */
     tokens: AppkitUIToken[];
-    /** Network to use for quote fetching. When omitted, uses the selected wallet's network. */
-    network?: Network;
-    /** Fiat currency symbol for price display, defaults to "$" */
-    fiatSymbol?: string;
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
     /** Ticker of the token pre-selected for the source */
     defaultFromSymbol?: string;
     /** Ticker of the token pre-selected for the target */
     defaultToSymbol?: string;
+    /** Initial slippage in basis points (100 = 1%), defaults to 50 (0.5%) */
+    /** Network to use for quote fetching. When omitted, uses the selected wallet's network. */
+    network?: Network;
+    /** Fiat currency symbol for price display, defaults to "$" */
+    fiatSymbol?: string;
     /** Initial slippage in basis points (100 = 1%), defaults to 100 (1%) */
     defaultSlippage?: number;
 }
@@ -165,6 +172,7 @@ export interface SwapProviderProps extends PropsWithChildren {
 export const SwapWidgetProvider: FC<SwapProviderProps> = ({
     children,
     tokens,
+    tokenSections,
     network: networkProp,
     fiatSymbol = '$',
     defaultFromSymbol,
@@ -309,6 +317,7 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
     const value = useMemo(
         () => ({
             tokens: networkFilteredTokens,
+            tokenSections,
             fromToken,
             toToken,
             fromAmount,
@@ -342,6 +351,7 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
         }),
         [
             networkFilteredTokens,
+            tokenSections,
             fromToken,
             toToken,
             fromAmount,
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-balances.ts b/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-balances.ts
index 0355346e9..c1b925bb0 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-balances.ts
+++ b/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-balances.ts
@@ -19,11 +19,14 @@ interface UseSwapBalancesOptions {
     network: Network | undefined;
 }
 
-export function useSwapBalances({ fromToken, toToken, ownerAddress, network }: UseSwapBalancesOptions) {
+export const useSwapBalances = ({ fromToken, toToken, ownerAddress, network }: UseSwapBalancesOptions) => {
     const isFromNative = fromToken?.address === 'ton';
     const isToNative = toToken?.address === 'ton';
 
-    const { data: tonBalance, isLoading: isTonBalanceLoading } = useBalance({ network });
+    const { data: tonBalance, isLoading: isTonBalanceLoading } = useBalance({
+        network,
+        query: { refetchInterval: 5000 },
+    });
 
     const { data: fromJettonBalance, isLoading: isFromJettonBalanceLoading } = useJettonBalanceByAddress({
         jettonAddress: fromToken?.address,
@@ -47,4 +50,4 @@ export function useSwapBalances({ fromToken, toToken, ownerAddress, network }: U
         isFromBalanceLoading: isFromNative ? isTonBalanceLoading : isFromJettonBalanceLoading,
         isToBalanceLoading: isToNative ? isTonBalanceLoading : isToJettonBalanceLoading,
     };
-}
+};
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-validation.ts b/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-validation.ts
index 39086ba1c..5830e91c9 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-validation.ts
+++ b/packages/appkit-react/src/features/swap/components/swap-widget-provider/use-swap-validation.ts
@@ -22,7 +22,7 @@ interface UseSwapValidationOptions {
     isNetworkSupported: boolean;
 }
 
-export function useSwapValidation({
+export const useSwapValidation = ({
     fromAmount,
     fromAmountDebounced,
     fromToken,
@@ -30,7 +30,7 @@ export function useSwapValidation({
     fromBalance,
     quoteError,
     isNetworkSupported,
-}: UseSwapValidationOptions) {
+}: UseSwapValidationOptions) => {
     const error: string | null = useMemo(() => {
         if (!isNetworkSupported) return 'defi.unsupportedNetwork';
 
@@ -48,4 +48,4 @@ export function useSwapValidation({
     const canSubmit = (parseFloat(fromAmount) || 0) > 0 && fromToken !== null && toToken !== null && error === null;
 
     return { error, canSubmit };
-}
+};
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.module.css b/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.module.css
index 913e61d8a..ac8aa38f4 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.module.css
+++ b/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.module.css
@@ -7,11 +7,6 @@
   gap: 8px;
 }
 
-.card {
-  position: relative;
-  border-radius: var(--ta-border-radius-xl);
-}
-
 .fieldsContainer {
   box-sizing: border-box;
   width: 100%;
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx b/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx
index 94c7288c8..4a5ec13b2 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx
+++ b/packages/appkit-react/src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx
@@ -29,6 +29,7 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
     fromToken,
     toToken,
     tokens,
+    tokenSections,
     fromAmount,
     toAmount,
     fiatSymbol,
@@ -66,6 +67,7 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
     const { t } = useI18n();
 
     const [activeField, setActiveField] = useState<'from' | 'to' | null>(null);
+
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
 
@@ -88,13 +90,13 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
                     type="pay"
                     token={fromToken ?? undefined}
                     amount={fromAmount}
+                    fiatSymbol={fiatSymbol}
                     onAmountChange={setFromAmount}
                     balance={fromBalance}
                     isBalanceLoading={isFromBalanceLoading}
                     onMaxClick={onMaxClick}
                     onTokenSelectorClick={() => setActiveField('from')}
                     isWalletConnected={isWalletConnected}
-                    fiatSymbol={fiatSymbol}
                 />
 
                 <div className={styles.flipButtonWrapper}>
@@ -106,12 +108,12 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
                     type="receive"
                     token={toToken ?? undefined}
                     amount={toAmount}
+                    fiatSymbol={fiatSymbol}
                     balance={toBalance}
                     isBalanceLoading={isToBalanceLoading}
                     onTokenSelectorClick={() => setActiveField('to')}
                     loading={isQuoteLoading}
                     isWalletConnected={isWalletConnected}
-                    fiatSymbol={fiatSymbol}
                 />
             </div>
 
@@ -119,6 +121,7 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
                 open={activeField !== null}
                 onClose={() => setActiveField(null)}
                 tokens={tokens}
+                tokenSections={tokenSections}
                 onSelect={(token) => {
                     if (activeField === 'from') setFromToken(token);
                     else setToToken(token);
diff --git a/packages/appkit-react/src/features/swap/components/swap-widget/swap-widget.tsx b/packages/appkit-react/src/features/swap/components/swap-widget/swap-widget.tsx
index e55ffac27..b9a2da12d 100644
--- a/packages/appkit-react/src/features/swap/components/swap-widget/swap-widget.tsx
+++ b/packages/appkit-react/src/features/swap/components/swap-widget/swap-widget.tsx
@@ -48,6 +48,7 @@ const SwapWidgetContent: FC<
 export const SwapWidget: FC<SwapWidgetProps> = ({
     children,
     tokens,
+    tokenSections,
     network,
     fiatSymbol,
     defaultFromSymbol,
@@ -58,6 +59,7 @@ export const SwapWidget: FC<SwapWidgetProps> = ({
     return (
         <SwapWidgetProvider
             tokens={tokens}
+            tokenSections={tokenSections}
             network={network}
             fiatSymbol={fiatSymbol}
             defaultFromSymbol={defaultFromSymbol}
diff --git a/packages/appkit-react/src/features/swap/components/token-selector/token-selector.module.css b/packages/appkit-react/src/features/swap/components/token-selector/token-selector.module.css
deleted file mode 100644
index 4619cdc0a..000000000
--- a/packages/appkit-react/src/features/swap/components/token-selector/token-selector.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.tokenSelector {
-  padding: 8px;
-}
-
-.tokenSelector:hover {
-  opacity: 0.8;
-}
-
-.chevron {
-  opacity: 0.5;
-  margin-left: 2px;
-}
diff --git a/packages/appkit-react/src/features/swap/components/token-selector/token-selector.tsx b/packages/appkit-react/src/features/swap/components/token-selector/token-selector.tsx
deleted file mode 100644
index 3eb5aafa0..000000000
--- a/packages/appkit-react/src/features/swap/components/token-selector/token-selector.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * 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 { FC } from 'react';
-
-import styles from './token-selector.module.css';
-import { Button } from '../../../../components/ui/button';
-import { ChevronDownIcon } from '../../../../components/ui/icons';
-import { Logo } from '../../../../components/ui/logo';
-import { useI18n } from '../../../settings/hooks/use-i18n';
-
-export interface TokenSelectorProps {
-    symbol?: string;
-    icon?: string;
-    onClick?: () => void;
-}
-
-export const TokenSelector: FC<TokenSelectorProps> = ({ symbol, icon, onClick }) => {
-    const { t } = useI18n();
-    const label = symbol ?? t('swap.selectToken');
-    const fallback = symbol?.[0] ?? '?';
-
-    return (
-        <Button className={styles.tokenSelector} onClick={onClick} variant="gray" size="s">
-            {symbol && <Logo size={24} src={icon} fallback={fallback} alt={symbol} />}
-            <span style={{ lineHeight: '24px' }}>{label}</span>
-            <ChevronDownIcon size={16} className={styles.chevron} />
-        </Button>
-    );
-};
diff --git a/packages/appkit-react/src/features/swap/utils/map-swap-widget-tokens.ts b/packages/appkit-react/src/features/swap/utils/map-swap-widget-tokens.ts
index d9dec3838..da292ce39 100644
--- a/packages/appkit-react/src/features/swap/utils/map-swap-widget-tokens.ts
+++ b/packages/appkit-react/src/features/swap/utils/map-swap-widget-tokens.ts
@@ -13,7 +13,7 @@ import type { AppkitUIToken } from '../../../types/appkit-ui-token';
 export const mapSwapWidgetTokens = (tokens: AppkitUIToken[]): AppkitUIToken[] => {
     const mapped = tokens.reduce((acc, token) => {
         if (token.address === 'ton') {
-            acc.push({ ...token, address: 'ton' });
+            acc.push(token);
 
             return acc;
         }
diff --git a/packages/appkit-react/src/features/transaction/components/transaction-provider/send-provider.tsx b/packages/appkit-react/src/features/transaction/components/transaction-provider/send-provider.tsx
index d3a1be5e6..cd314777e 100644
--- a/packages/appkit-react/src/features/transaction/components/transaction-provider/send-provider.tsx
+++ b/packages/appkit-react/src/features/transaction/components/transaction-provider/send-provider.tsx
@@ -33,11 +33,11 @@ export const SendContext = createContext<SendContextType>({
     isLoading: false,
 });
 
-export function useSendContext() {
+export const useSendContext = () => {
     const context = useContext(SendContext);
 
     return context;
-}
+};
 
 export interface SendProviderProps extends PropsWithChildren {
     /** The transaction request parameters */
diff --git a/packages/appkit-react/src/hooks/use-copy.ts b/packages/appkit-react/src/hooks/use-copy.ts
new file mode 100644
index 000000000..dbe10e8c9
--- /dev/null
+++ b/packages/appkit-react/src/hooks/use-copy.ts
@@ -0,0 +1,30 @@
+/**
+ * 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 { useCallback, useRef, useState } from 'react';
+
+const COPIED_RESET_MS = 2000;
+
+/**
+ * Copy text to the clipboard with a transient `copied` flag that resets after
+ * {@link COPIED_RESET_MS} milliseconds. Returns the flag and a stable trigger.
+ */
+export const useCopy = (text: string): [boolean, () => void] => {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const copy = useCallback(() => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(true);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+        });
+    }, [text]);
+
+    return [copied, copy];
+};
diff --git a/packages/appkit-react/src/hooks/use-debounce-callback.ts b/packages/appkit-react/src/hooks/use-debounce-callback.ts
index 12e23bea9..e9bc00137 100644
--- a/packages/appkit-react/src/hooks/use-debounce-callback.ts
+++ b/packages/appkit-react/src/hooks/use-debounce-callback.ts
@@ -25,11 +25,11 @@ export type DebouncedState<T extends (...args: any[]) => ReturnType<T>> = ((
     ControlFunctions;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useDebounceCallback<T extends (...args: any[]) => ReturnType<T>>(
+export const useDebounceCallback = <T extends (...args: any[]) => ReturnType<T>>(
     func: T,
     delay = 500,
     options?: DebounceOptions,
-): DebouncedState<T> {
+): DebouncedState<T> => {
     const debouncedFunc = useRef<ReturnType<typeof debounce> | null>(null);
 
     useUnmount(() => {
@@ -66,4 +66,4 @@ export function useDebounceCallback<T extends (...args: any[]) => ReturnType<T>>
     }, [func, delay, options]);
 
     return debounced;
-}
+};
diff --git a/packages/appkit-react/src/index.ts b/packages/appkit-react/src/index.ts
index 2ae249e19..25e44c48b 100644
--- a/packages/appkit-react/src/index.ts
+++ b/packages/appkit-react/src/index.ts
@@ -11,23 +11,31 @@ export { I18nProvider } from './providers/i18n-provider';
 
 export * from '@ton/appkit';
 
+// UI primitives
 export * from './components/ui/block';
-export * from './components/ui/info-block';
 export * from './components/ui/button';
+export * from './components/ui/centered-amount-input';
+export * from './components/ui/collapsible';
+export * from './components/ui/icons';
+export * from './components/ui/info-block';
+export * from './components/ui/input';
 export * from './components/ui/logo';
+export * from './components/ui/logo-with-network';
 export * from './components/ui/modal';
+export * from './components/ui/select';
 export * from './components/ui/skeleton';
-export * from './components/ui/input';
-export * from './components/shared/token-select-modal';
 export * from './components/ui/tabs';
-export * from './components/ui/centered-amount-input';
+
+// Shared composites
 export * from './components/shared/amount-presets';
-export * from './components/ui/collapsible';
-export * from './components/ui/select';
+export * from './components/shared/copy-button';
+export * from './components/shared/currency-item';
+export * from './components/shared/currency-select-modal';
 export * from './components/shared/low-balance-modal';
-export * from './components/shared/settings-button';
 export * from './components/shared/option-switcher';
-export * from './components/ui/icons';
+export * from './components/shared/settings-button';
+export * from './components/shared/token-select-modal';
+export * from './components/shared/token-selector';
 
 export * from './features/balances';
 export * from './features/jettons';
@@ -39,5 +47,6 @@ export * from './features/settings';
 export * from './features/swap';
 export * from './features/signing';
 export * from './features/staking';
+export * from './features/onramp';
 
 export * from './types/appkit-ui-token';
diff --git a/packages/appkit-react/src/libs/query.ts b/packages/appkit-react/src/libs/query.ts
index 3a4017316..e027b2236 100644
--- a/packages/appkit-react/src/libs/query.ts
+++ b/packages/appkit-react/src/libs/query.ts
@@ -38,18 +38,18 @@ export type UseMutationReturnType<
     }
 >;
 
-export function useQuery<queryFnData, error, data, queryKey extends QueryKey>(
+export const useQuery = <queryFnData, error, data, queryKey extends QueryKey>(
     parameters: UseQueryParameters<queryFnData, error, data, queryKey> & {
         queryKey: QueryKey;
     },
-): UseQueryReturnType<data, error> {
+): UseQueryReturnType<data, error> => {
     const result = tanstack_useQuery({
         ...parameters,
         // queryKeyHashFn: hashFn, // for bigint support
     }) as UseQueryReturnType<data, error>;
     result.queryKey = parameters.queryKey;
     return result;
-}
+};
 
 export type UseQueryParameters<
     queryFnData = unknown,
diff --git a/packages/appkit-react/src/locales/en.ts b/packages/appkit-react/src/locales/en.ts
index 930259748..f79e650ae 100644
--- a/packages/appkit-react/src/locales/en.ts
+++ b/packages/appkit-react/src/locales/en.ts
@@ -43,6 +43,8 @@ export default {
         emptyNoMatch: "We didn't find any tokens.",
         emptyTryAddress: 'Try searching by address.',
         emptyForNetwork: 'No tokens available for the selected network.',
+        otherTokens: 'Other Tokens',
+        otherCurrencies: 'Other Currencies',
     },
 
     // Shared DeFi error messages (rendered by `mapDefiError`)
@@ -92,6 +94,62 @@ export default {
         close: 'Close',
     },
 
+    // Crypto Onramp
+    cryptoOnramp: {
+        depositModalTitle: 'Crypto deposit',
+        sendExactAmount: 'Send the exact amount to the address below',
+        youNeedToSend: 'You need to send',
+        toThisAddress: 'To this address',
+        memoTag: 'Memo / Tag',
+        transactionDetails: 'Transaction details',
+        deposit: 'Deposit',
+        continue: 'Continue',
+        methodOfPurchase: 'Method of purchase',
+        allNetworks: 'All networks',
+        selectMethod: 'Select payment method',
+        searchMethod: 'Search',
+        quoteError: 'Failed to get a quote',
+        tooManyDecimals: 'Too many decimals',
+        providerError: 'Provider error',
+        depositFailed: 'Failed to create deposit',
+        genericError: 'Something went wrong',
+        addressTab: 'Address',
+        memoTab: 'Memo',
+        youGet: 'You get',
+        exchangeRate: 'Exchange rate',
+        provider: 'Provider',
+        refundAddressModalTitle: 'Refund address',
+        refundAddressLabel:
+            'Enter the address on the source network where the funds will be returned in case of a problem with the exchange',
+        refundAddressRequired: 'Refund address is required',
+        reversedAmountNotSupported: 'This provider only supports entering the source amount',
+        invalidRefundAddress: 'Invalid refund address',
+        refundAddressPlaceholder: 'Your address',
+        yourBalance: 'Your balance',
+        statusPending: 'Waiting for your transfer',
+        statusSuccess: 'Transfer completed',
+        statusFailed: 'Transfer failed',
+        done: 'Done',
+        close: 'Close',
+    },
+
+    // Onramp
+    onramp: {
+        continue: 'Continue',
+        selectToken: 'Token to buy',
+        searchToken: 'Search tokens',
+        selectCurrency: 'Select currency',
+        searchCurrency: 'Search currencies',
+        checkout: 'Checkout',
+        buyToken: 'Buy {{ symbol }}',
+        forCurrency: 'for {{ symbol }}',
+        noQuotesFound: 'No quotes found',
+        connectWallet: 'Connect a wallet to continue',
+        tonPayError: 'Failed to start TonPay checkout',
+        youGet: 'You get',
+        exchangeRate: 'Exchange rate',
+    },
+
     // Staking
     staking: {
         stake: 'Stake',
diff --git a/packages/appkit-react/src/providers/app-kit-provider.tsx b/packages/appkit-react/src/providers/app-kit-provider.tsx
index be5c9d0a3..82d859195 100644
--- a/packages/appkit-react/src/providers/app-kit-provider.tsx
+++ b/packages/appkit-react/src/providers/app-kit-provider.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, FC } from 'react';
 import { createContext } from 'react';
 import type { AppKit } from '@ton/appkit';
 
@@ -19,7 +19,7 @@ export interface AppKitProviderProps extends PropsWithChildren {
     appKit: AppKit;
 }
 
-export function AppKitProvider({ appKit, children }: AppKitProviderProps) {
+export const AppKitProvider: FC<AppKitProviderProps> = ({ appKit, children }) => {
     return (
         <AppKitContext.Provider value={appKit}>
             <TonConnectBridge>
@@ -27,4 +27,4 @@ export function AppKitProvider({ appKit, children }: AppKitProviderProps) {
             </TonConnectBridge>
         </AppKitContext.Provider>
     );
-}
+};
diff --git a/packages/appkit-react/src/storybook/fixtures/tokens.ts b/packages/appkit-react/src/storybook/fixtures/tokens.ts
index d3c47eec0..80e3f6150 100644
--- a/packages/appkit-react/src/storybook/fixtures/tokens.ts
+++ b/packages/appkit-react/src/storybook/fixtures/tokens.ts
@@ -12,6 +12,7 @@ import type { AppkitUIToken } from '../../types/appkit-ui-token';
 
 export const STORY_TOKENS: AppkitUIToken[] = [
     {
+        id: 'ton',
         symbol: 'TON',
         name: 'Toncoin',
         decimals: 9,
@@ -20,7 +21,8 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c/c8d21a3d93f9b574381e0a8d8f16d48b325dd8f54ce172f599c1e9d6c62f03f7',
     },
     {
-        symbol: 'USD₮',
+        id: 'usdt',
+        symbol: 'USDT',
         name: 'Tether USD',
         decimals: 6,
         address: 'UQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_p0p',
@@ -29,6 +31,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
     },
     {
+        id: 'ston',
         symbol: 'STON',
         name: 'STON',
         decimals: 9,
@@ -37,6 +40,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO/7c9798ce1e64707fb4cb8f025d4060f66b386ed381b50498e3b88731cedeffe8',
     },
     {
+        id: 'xaut',
         symbol: 'XAUt0',
         name: 'Tether Gold',
         decimals: 6,
@@ -45,6 +49,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQA1R_LuQCLHlMgOo1S4G7Y7W1cd0FrAkbA10Zq7rddKxi9k/4aaaa7c30d7811bced81ded6bc116dcc82a78c6aea53d6012fd586a5826963ad',
     },
     {
+        id: 'usde',
         symbol: 'USDe',
         name: 'Ethena USDe',
         decimals: 6,
@@ -54,6 +59,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQAIb6KmdfdDR7CN1GBqVJuP25iCnLKCvBlJ07Evuu2dzP5f/dbcc67993cd4aad4845a97a4a9722c6cb618123997c8112c29d4932b2739c4cd',
     },
     {
+        id: 'tston',
         symbol: 'tsTON',
         name: 'Tonstakers TON',
         decimals: 9,
@@ -62,6 +68,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQC98_qAmNEptUtPc7W6xdHh_ZHrBUFpw5Ft_IzNU20QAJav/38f530facb209e4696b8aef17af51df94d16bd879926c517b07d25841da287b7',
     },
     {
+        id: 'gemston',
         symbol: 'GEMSTON',
         name: 'GEMSTON',
         decimals: 9,
@@ -70,6 +77,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQBX6K9aXVl3nXINCyPPL86C4ONVmQ8vK360u6dykFKXpHCa/c6ab1e58e3b9b58a7429d38b7feab731afae2f66dc301a6c42041fdf7e9d7c9c',
     },
     {
+        id: 'utya',
         symbol: 'UTYA',
         name: 'Utya',
         decimals: 9,
@@ -78,6 +86,7 @@ export const STORY_TOKENS: AppkitUIToken[] = [
         logo: 'https://asset.ston.fi/img/EQBaCgUwOoc6gHCNln_oJzb0mVs79YG7wYoavh-o1ItaneLA/727e6cc971afdfa8ed9c698d0909eee9de344a0b6766ff5e4ddcc3323449d6f6',
     },
     {
+        id: 'weth',
         symbol: 'WETH',
         name: 'Wrapped Ether',
         decimals: 18,
diff --git a/packages/appkit-react/src/types/appkit-ui-token.ts b/packages/appkit-react/src/types/appkit-ui-token.ts
index cfb1fcd63..2b866109b 100644
--- a/packages/appkit-react/src/types/appkit-ui-token.ts
+++ b/packages/appkit-react/src/types/appkit-ui-token.ts
@@ -9,6 +9,8 @@
 import type { Network } from '@ton/appkit';
 
 export interface AppkitUIToken {
+    /** Unique identifier for the token, used for section grouping */
+    id: string;
     /** Token symbol, e.g. "TON" */
     symbol: string;
     /** Full token name, e.g. "Toncoin" */
diff --git a/packages/appkit/docs/actions.md b/packages/appkit/docs/actions.md
index 29887fbe1..5c2280b02 100644
--- a/packages/appkit/docs/actions.md
+++ b/packages/appkit/docs/actions.md
@@ -438,6 +438,83 @@ const result = await transferNft(appKit, {
 console.log('NFT Transfer Result:', result);
 ```
 
+## Onramp
+
+### `getOnrampManager`
+
+Get the `OnrampManager` instance.
+
+### `getOnrampProvider`
+
+Get a specific onramp provider by its ID.
+
+### `getOnrampProviders`
+
+Get all registered onramp providers.
+
+### `watchOnrampProviders`
+
+Watch for new onramp providers registration.
+
+### `getOnrampQuote`
+
+Get an onramp quote from registered providers.
+
+```ts
+const quote = await getOnrampQuote(appKit, {
+    fiatCurrency: 'USD',
+    cryptoCurrency: 'TON',
+    amount: '100',
+    isFiatAmount: true,
+});
+console.log('Onramp Quote:', quote);
+```
+
+### `buildOnrampUrl`
+
+Build an onramp URL for redirecting the user to the provider.
+
+```ts
+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);
+```
+
+## Crypto Onramp
+
+### `getCryptoOnrampProvider`
+
+Get a registered crypto-onramp provider by id, or the default one when no id is given.
+
+```ts
+const provider = getCryptoOnrampProvider(appKit, { id: 'layerswap' });
+console.log('Crypto onramp provider:', provider.providerId);
+```
+
+### `getCryptoOnrampProviders`
+
+Get all registered crypto-onramp providers.
+
+```ts
+const providers = getCryptoOnrampProviders(appKit);
+console.log(
+    'Registered crypto onramp providers:',
+    providers.map((p) => p.providerId),
+);
+```
+
+### `watchCryptoOnrampProviders`
+
+Watch for new crypto-onramp providers registration and default-provider changes.
+
 ## Providers
 
 ### `registerProvider`
diff --git a/packages/appkit/package.json b/packages/appkit/package.json
index ef1dce9a0..8ebf78da9 100644
--- a/packages/appkit/package.json
+++ b/packages/appkit/package.json
@@ -60,6 +60,46 @@
         "types": "./dist/cjs/staking/tonstakers/index.d.ts",
         "default": "./dist/cjs/staking/tonstakers/index.js"
       }
+    },
+    "./onramp": {
+      "import": {
+        "types": "./dist/esm/onramp/index.d.ts",
+        "default": "./dist/esm/onramp/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/onramp/index.d.ts",
+        "default": "./dist/cjs/onramp/index.js"
+      }
+    },
+    "./onramp/ton-pay": {
+      "import": {
+        "types": "./dist/esm/onramp/ton-pay/index.d.ts",
+        "default": "./dist/esm/onramp/ton-pay/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/onramp/ton-pay/index.d.ts",
+        "default": "./dist/cjs/onramp/ton-pay/index.js"
+      }
+    },
+    "./crypto-onramp/swaps-xyz": {
+      "import": {
+        "types": "./dist/esm/crypto-onramp/swaps-xyz/index.d.ts",
+        "default": "./dist/esm/crypto-onramp/swaps-xyz/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/crypto-onramp/swaps-xyz/index.d.ts",
+        "default": "./dist/cjs/crypto-onramp/swaps-xyz/index.js"
+      }
+    },
+    "./crypto-onramp/layerswap": {
+      "import": {
+        "types": "./dist/esm/crypto-onramp/layerswap/index.d.ts",
+        "default": "./dist/esm/crypto-onramp/layerswap/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/crypto-onramp/layerswap/index.d.ts",
+        "default": "./dist/cjs/crypto-onramp/layerswap/index.js"
+      }
     }
   },
   "typesVersions": {
@@ -75,6 +115,18 @@
       ],
       "staking/tonstakers": [
         "./dist/esm/staking/tonstakers/index.d.ts"
+      ],
+      "onramp": [
+        "./dist/esm/onramp/index.d.ts"
+      ],
+      "onramp/ton-pay": [
+        "./dist/esm/onramp/ton-pay/index.d.ts"
+      ],
+      "crypto-onramp/swaps-xyz": [
+        "./dist/esm/crypto-onramp/swaps-xyz/index.d.ts"
+      ],
+      "crypto-onramp/layerswap": [
+        "./dist/esm/crypto-onramp/layerswap/index.d.ts"
       ]
     }
   },
diff --git a/packages/appkit/src/actions/crypto-onramp/create-crypto-onramp-deposit.ts b/packages/appkit/src/actions/crypto-onramp/create-crypto-onramp-deposit.ts
new file mode 100644
index 000000000..8796a42b4
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-onramp/create-crypto-onramp-deposit.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 { CryptoOnrampDeposit, CryptoOnrampDepositParams } from '../../crypto-onramp';
+import type { AppKit } from '../../core/app-kit';
+
+export type CreateCryptoOnrampDepositOptions<T = unknown> = CryptoOnrampDepositParams<T> & {
+    providerId?: string;
+};
+
+export type CreateCryptoOnrampDepositReturnType = Promise<CryptoOnrampDeposit>;
+
+/**
+ * Create a crypto onramp deposit from a previously obtained quote
+ */
+export const createCryptoOnrampDeposit = async <T = unknown>(
+    appKit: AppKit,
+    options: CreateCryptoOnrampDepositOptions<T>,
+): CreateCryptoOnrampDepositReturnType => {
+    return appKit.cryptoOnrampManager.createDeposit(options, options.providerId);
+};
diff --git a/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-provider.ts b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-provider.ts
new file mode 100644
index 000000000..47cf0a91f
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-provider.ts
@@ -0,0 +1,27 @@
+/**
+ * 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 { CryptoOnrampProviderInterface } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export interface GetCryptoOnrampProviderOptions {
+    id?: string;
+}
+
+export type GetCryptoOnrampProviderReturnType = CryptoOnrampProviderInterface;
+
+/**
+ * Get a registered crypto-onramp provider by id, or the default one when no id is given.
+ */
+export const getCryptoOnrampProvider = (
+    appKit: AppKit,
+    options: GetCryptoOnrampProviderOptions = {},
+): GetCryptoOnrampProviderReturnType => {
+    return appKit.cryptoOnrampManager.getProvider(options.id);
+};
diff --git a/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-providers.ts b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-providers.ts
new file mode 100644
index 000000000..ea4add53b
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-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 { CryptoOnrampProviderInterface } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export type GetCryptoOnrampProvidersReturnType = CryptoOnrampProviderInterface[];
+
+/**
+ * Get all registered crypto-onramp providers.
+ */
+export const getCryptoOnrampProviders = (appKit: AppKit): GetCryptoOnrampProvidersReturnType => {
+    return appKit.cryptoOnrampManager.getProviders();
+};
diff --git a/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-quote.ts b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-quote.ts
new file mode 100644
index 000000000..32fee07da
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-quote.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 { CryptoOnrampQuote, CryptoOnrampQuoteParams } from '../../crypto-onramp';
+import type { AppKit } from '../../core/app-kit';
+
+export type GetCryptoOnrampQuoteOptions<T = unknown> = CryptoOnrampQuoteParams<T> & {
+    providerId?: string;
+};
+
+export type GetCryptoOnrampQuoteReturnType = Promise<CryptoOnrampQuote>;
+
+/**
+ * Get a crypto onramp quote
+ */
+export const getCryptoOnrampQuote = async <T = unknown>(
+    appKit: AppKit,
+    options: GetCryptoOnrampQuoteOptions<T>,
+): GetCryptoOnrampQuoteReturnType => {
+    return appKit.cryptoOnrampManager.getQuote(options, options.providerId);
+};
diff --git a/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-status.ts b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-status.ts
new file mode 100644
index 000000000..7be56078d
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-onramp/get-crypto-onramp-status.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 { CryptoOnrampStatus, CryptoOnrampStatusParams } from '../../crypto-onramp';
+import type { AppKit } from '../../core/app-kit';
+
+export type GetCryptoOnrampStatusOptions = CryptoOnrampStatusParams & {
+    providerId?: string;
+};
+
+export type GetCryptoOnrampStatusReturnType = Promise<CryptoOnrampStatus>;
+
+/**
+ * Get a crypto onramp quote
+ */
+export const getCryptoOnrampStatus = async (
+    appKit: AppKit,
+    options: GetCryptoOnrampStatusOptions,
+): GetCryptoOnrampStatusReturnType => {
+    return appKit.cryptoOnrampManager.getStatus(options, options.providerId);
+};
diff --git a/packages/appkit/src/actions/crypto-onramp/watch-crypto-onramp-providers.ts b/packages/appkit/src/actions/crypto-onramp/watch-crypto-onramp-providers.ts
new file mode 100644
index 000000000..dea15b8eb
--- /dev/null
+++ b/packages/appkit/src/actions/crypto-onramp/watch-crypto-onramp-providers.ts
@@ -0,0 +1,38 @@
+/**
+ * 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 '../../core/app-kit';
+
+export interface WatchCryptoOnrampProvidersParameters {
+    onChange: () => void;
+}
+
+export type WatchCryptoOnrampProvidersReturnType = () => void;
+
+/**
+ * Watch for new crypto-onramp providers registration and default-provider changes.
+ */
+export const watchCryptoOnrampProviders = (
+    appKit: AppKit,
+    parameters: WatchCryptoOnrampProvidersParameters,
+): WatchCryptoOnrampProvidersReturnType => {
+    const { onChange } = parameters;
+
+    const unsubscribeRegistered = appKit.emitter.on('provider:registered', (event) => {
+        if (event.payload.type === 'crypto-onramp') onChange();
+    });
+
+    const unsubscribeDefaultChanged = appKit.emitter.on('provider:default-changed', (event) => {
+        if (event.payload.type === 'crypto-onramp') onChange();
+    });
+
+    return () => {
+        unsubscribeRegistered();
+        unsubscribeDefaultChanged();
+    };
+};
diff --git a/packages/appkit/src/actions/index.ts b/packages/appkit/src/actions/index.ts
index e9c38eb36..b9d31916d 100644
--- a/packages/appkit/src/actions/index.ts
+++ b/packages/appkit/src/actions/index.ts
@@ -41,6 +41,37 @@ export {
     type WatchConnectorByIdReturnType,
 } from './connectors/watch-connector-by-id';
 
+// Crypto onramp
+export {
+    getCryptoOnrampProvider,
+    type GetCryptoOnrampProviderOptions,
+    type GetCryptoOnrampProviderReturnType,
+} from './crypto-onramp/get-crypto-onramp-provider';
+export {
+    getCryptoOnrampProviders,
+    type GetCryptoOnrampProvidersReturnType,
+} from './crypto-onramp/get-crypto-onramp-providers';
+export {
+    watchCryptoOnrampProviders,
+    type WatchCryptoOnrampProvidersParameters,
+    type WatchCryptoOnrampProvidersReturnType,
+} from './crypto-onramp/watch-crypto-onramp-providers';
+export {
+    getCryptoOnrampQuote,
+    type GetCryptoOnrampQuoteOptions,
+    type GetCryptoOnrampQuoteReturnType,
+} from './crypto-onramp/get-crypto-onramp-quote';
+export {
+    createCryptoOnrampDeposit,
+    type CreateCryptoOnrampDepositOptions,
+    type CreateCryptoOnrampDepositReturnType,
+} from './crypto-onramp/create-crypto-onramp-deposit';
+export {
+    getCryptoOnrampStatus,
+    type GetCryptoOnrampStatusOptions,
+    type GetCryptoOnrampStatusReturnType,
+} from './crypto-onramp/get-crypto-onramp-status';
+
 // Jettons
 export { getJettonInfo, type GetJettonInfoOptions, type GetJettonInfoReturnType } from './jettons/get-jetton-info';
 export {
@@ -134,6 +165,13 @@ export {
     type BuildSwapTransactionReturnType,
 } from './swap/build-swap-transaction';
 
+// Onramp — fiat-onramp: not ready; functions hidden from public API, types kept for internal hooks
+export type { GetOnrampProviderOptions, GetOnrampProviderReturnType } from './onramp/get-onramp-provider';
+export type { GetOnrampProvidersReturnType } from './onramp/get-onramp-providers';
+export type { GetOnrampQuoteOptions, GetOnrampQuoteReturnType } from './onramp/get-onramp-quote';
+export type { WatchOnrampProvidersParameters, WatchOnrampProvidersReturnType } from './onramp/watch-onramp-providers';
+export type { BuildOnrampUrlOptions, BuildOnrampUrlReturnType } from './onramp/build-onramp-url';
+
 // Staking
 export { getStakingManager, type GetStakingManagerReturnType } from './staking/get-staking-manager';
 export { getStakingProviders, type GetStakingProvidersReturnType } from './staking/get-staking-providers';
diff --git a/packages/appkit/src/actions/onramp/build-onramp-url.ts b/packages/appkit/src/actions/onramp/build-onramp-url.ts
new file mode 100644
index 000000000..ec4afbd4d
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/build-onramp-url.ts
@@ -0,0 +1,27 @@
+/**
+ * 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 { OnrampParams } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export type BuildOnrampUrlOptions<T = unknown> = OnrampParams<T> & {
+    providerId?: string;
+};
+
+export type BuildOnrampUrlReturnType = Promise<string>;
+
+/**
+ * Build onramp URL
+ */
+export const buildOnrampUrl = async <T = unknown>(
+    appKit: AppKit,
+    options: BuildOnrampUrlOptions<T>,
+): BuildOnrampUrlReturnType => {
+    return appKit.onrampManager.buildOnrampUrl(options, options.providerId);
+};
diff --git a/packages/appkit/src/actions/onramp/get-onramp-manager.ts b/packages/appkit/src/actions/onramp/get-onramp-manager.ts
new file mode 100644
index 000000000..2fafad61b
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/get-onramp-manager.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 { OnrampManager } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export type GetOnrampManagerReturnType = OnrampManager;
+
+/**
+ * Get onramp manager instance
+ */
+export const getOnrampManager = (appKit: AppKit): GetOnrampManagerReturnType => {
+    return appKit.onrampManager;
+};
diff --git a/packages/appkit/src/actions/onramp/get-onramp-provider.ts b/packages/appkit/src/actions/onramp/get-onramp-provider.ts
new file mode 100644
index 000000000..948386573
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/get-onramp-provider.ts
@@ -0,0 +1,27 @@
+/**
+ * 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 { OnrampProviderInterface } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export interface GetOnrampProviderOptions {
+    id?: string;
+}
+
+export type GetOnrampProviderReturnType = OnrampProviderInterface;
+
+/**
+ * Get onramp provider
+ */
+export const getOnrampProvider = (
+    appKit: AppKit,
+    options: GetOnrampProviderOptions = {},
+): GetOnrampProviderReturnType => {
+    return appKit.onrampManager.getProvider(options.id);
+};
diff --git a/packages/appkit/src/actions/onramp/get-onramp-providers.ts b/packages/appkit/src/actions/onramp/get-onramp-providers.ts
new file mode 100644
index 000000000..97440fc28
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/get-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 { OnrampProviderInterface } from '@ton/walletkit';
+
+import type { AppKit } from '../../core/app-kit';
+
+export type GetOnrampProvidersReturnType = OnrampProviderInterface[];
+
+/**
+ * Get all registered onramp providers
+ */
+export const getOnrampProviders = (appKit: AppKit): GetOnrampProvidersReturnType => {
+    return appKit.onrampManager.getProviders();
+};
diff --git a/packages/appkit/src/actions/onramp/get-onramp-quote.ts b/packages/appkit/src/actions/onramp/get-onramp-quote.ts
new file mode 100644
index 000000000..7a6b46908
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/get-onramp-quote.ts
@@ -0,0 +1,30 @@
+/**
+ * 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 { OnrampQuote, OnrampQuoteParams } from '@ton/walletkit';
+
+import { resolveNetwork } from '../../utils';
+import type { AppKit } from '../../core/app-kit';
+
+export type GetOnrampQuoteOptions<T = unknown> = OnrampQuoteParams<T> & {
+    providerId?: string;
+};
+
+export type GetOnrampQuoteReturnType = Promise<OnrampQuote>;
+
+/**
+ * Get onramp quote
+ */
+export const getOnrampQuote = async <T = unknown>(
+    appKit: AppKit,
+    options: GetOnrampQuoteOptions<T>,
+): GetOnrampQuoteReturnType => {
+    const network = resolveNetwork(appKit, options.network);
+
+    return appKit.onrampManager.getQuote({ ...options, network }, options.providerId);
+};
diff --git a/packages/appkit/src/actions/onramp/watch-onramp-providers.ts b/packages/appkit/src/actions/onramp/watch-onramp-providers.ts
new file mode 100644
index 000000000..a14d12682
--- /dev/null
+++ b/packages/appkit/src/actions/onramp/watch-onramp-providers.ts
@@ -0,0 +1,38 @@
+/**
+ * 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 '../../core/app-kit';
+
+export interface WatchOnrampProvidersParameters {
+    onChange: () => void;
+}
+
+export type WatchOnrampProvidersReturnType = () => void;
+
+/**
+ * Watch for new onramp providers registration
+ */
+export const watchOnrampProviders = (
+    appKit: AppKit,
+    parameters: WatchOnrampProvidersParameters,
+): WatchOnrampProvidersReturnType => {
+    const { onChange } = parameters;
+
+    const unsubscribeRegistered = appKit.emitter.on('provider:registered', (event) => {
+        if (event.payload.type === 'onramp') onChange();
+    });
+
+    const unsubscribeDefaultChanged = appKit.emitter.on('provider:default-changed', (event) => {
+        if (event.payload.type === 'onramp') onChange();
+    });
+
+    return () => {
+        unsubscribeRegistered();
+        unsubscribeDefaultChanged();
+    };
+};
diff --git a/packages/appkit/src/connectors/tonconnect/connectors/ton-connect-connector.ts b/packages/appkit/src/connectors/tonconnect/connectors/ton-connect-connector.ts
index 7b696d786..c53507fc1 100644
--- a/packages/appkit/src/connectors/tonconnect/connectors/ton-connect-connector.ts
+++ b/packages/appkit/src/connectors/tonconnect/connectors/ton-connect-connector.ts
@@ -35,7 +35,7 @@ export const createTonConnectConnector = (config: TonConnectConnectorConfig) =>
 
         const id = config.id ?? TONCONNECT_DEFAULT_CONNECTOR_ID;
 
-        function getTonConnectUI() {
+        const getTonConnectUI = (): TonConnectUI | null => {
             if (originalTonConnectUI) {
                 return originalTonConnectUI;
             }
@@ -59,9 +59,9 @@ export const createTonConnectConnector = (config: TonConnectConnectorConfig) =>
             }
 
             return originalTonConnectUI;
-        }
+        };
 
-        function getConnectedWallets(): WalletInterface[] {
+        const getConnectedWallets = (): WalletInterface[] => {
             const ui = getTonConnectUI();
 
             if (ui && ui.connected && ui.wallet) {
@@ -77,9 +77,9 @@ export const createTonConnectConnector = (config: TonConnectConnectorConfig) =>
             }
 
             return [];
-        }
+        };
 
-        function setupListeners() {
+        const setupListeners = (): void => {
             if (!originalTonConnectUI || unsubscribeTonConnect) {
                 return;
             }
@@ -101,7 +101,7 @@ export const createTonConnectConnector = (config: TonConnectConnectorConfig) =>
                     originalTonConnectUI.setConnectionNetwork(payload.network?.chainId);
                 }
             });
-        }
+        };
 
         return {
             id,
diff --git a/packages/appkit/src/connectors/tonconnect/utils/transaction.ts b/packages/appkit/src/connectors/tonconnect/utils/transaction.ts
index 23f69bd9b..2d6d10069 100644
--- a/packages/appkit/src/connectors/tonconnect/utils/transaction.ts
+++ b/packages/appkit/src/connectors/tonconnect/utils/transaction.ts
@@ -18,33 +18,35 @@ export const DEFAULT_TRANSACTION_VALIDITY_SECONDS = 300;
 /**
  * Convert TonWalletKit TransactionRequest to TonConnect SendTransactionRequest format
  */
-export function toTonConnectTransaction(request: TransactionRequest): SendTransactionRequest {
+export const toTonConnectTransaction = (request: TransactionRequest): SendTransactionRequest => {
     return {
         validUntil: request.validUntil ?? Math.floor(Date.now() / 1000) + DEFAULT_TRANSACTION_VALIDITY_SECONDS,
         messages: request.messages.map(toTonConnectMessage),
     };
-}
+};
 
 /**
  * Convert a single TransactionRequestMessage to TonConnect message format
  */
-export function toTonConnectMessage(msg: TransactionRequestMessage): {
+export const toTonConnectMessage = (
+    msg: TransactionRequestMessage,
+): {
     address: string;
     amount: string;
     payload?: string;
     stateInit?: string;
-} {
+} => {
     return {
         address: msg.address,
         amount: String(msg.amount),
         payload: msg.payload,
         stateInit: msg.stateInit,
     };
-}
+};
 
 /**
  * Get current timestamp plus validity duration
  */
-export function getValidUntil(validitySeconds = DEFAULT_TRANSACTION_VALIDITY_SECONDS): number {
+export const getValidUntil = (validitySeconds = DEFAULT_TRANSACTION_VALIDITY_SECONDS): number => {
     return Math.floor(Date.now() / 1000) + validitySeconds;
-}
+};
diff --git a/packages/appkit/src/core/app-kit/services/app-kit.ts b/packages/appkit/src/core/app-kit/services/app-kit.ts
index 6545206e0..e99423010 100644
--- a/packages/appkit/src/core/app-kit/services/app-kit.ts
+++ b/packages/appkit/src/core/app-kit/services/app-kit.ts
@@ -6,8 +6,14 @@
  *
  */
 
-import { SwapManager, StreamingManager } from '@ton/walletkit';
-import type { ProviderInput, SwapProviderInterface, StakingProviderInterface } from '@ton/walletkit';
+import { SwapManager, StreamingManager, OnrampManager, CryptoOnrampManager } from '@ton/walletkit';
+import type {
+    ProviderInput,
+    SwapProviderInterface,
+    StakingProviderInterface,
+    OnrampProviderInterface,
+    CryptoOnrampProviderInterface,
+} from '@ton/walletkit';
 
 import type { AppKitConfig } from '../types/config';
 import { CONNECTOR_EVENTS, WALLETS_EVENTS } from '../constants/events';
@@ -30,6 +36,8 @@ export class AppKit {
     readonly walletsManager: WalletsManager;
     readonly swapManager: SwapManager;
     readonly stakingManager: StakingManager;
+    readonly onrampManager: OnrampManager;
+    readonly cryptoOnrampManager: CryptoOnrampManager;
 
     readonly networkManager: AppKitNetworkManager;
     readonly streamingManager: StreamingManager;
@@ -52,6 +60,8 @@ export class AppKit {
 
         this.swapManager = new SwapManager(() => this.createFactoryContext());
         this.stakingManager = new StakingManager(() => this.createFactoryContext());
+        this.onrampManager = new OnrampManager(() => this.createFactoryContext());
+        this.cryptoOnrampManager = new CryptoOnrampManager(() => this.createFactoryContext());
         this.streamingManager = new StreamingManager(() => this.createFactoryContext());
 
         if (config.connectors) {
@@ -115,6 +125,12 @@ export class AppKit {
             case 'staking':
                 this.stakingManager.registerProvider(provider as StakingProviderInterface);
                 break;
+            case 'onramp':
+                this.onrampManager.registerProvider(provider as OnrampProviderInterface);
+                break;
+            case 'crypto-onramp':
+                this.cryptoOnrampManager.registerProvider(provider as CryptoOnrampProviderInterface);
+                break;
             default:
                 throw new Error('Unknown provider type');
         }
diff --git a/packages/appkit/src/crypto-onramp/index.ts b/packages/appkit/src/crypto-onramp/index.ts
new file mode 100644
index 000000000..e51f9a065
--- /dev/null
+++ b/packages/appkit/src/crypto-onramp/index.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.
+ *
+ */
+
+export { CryptoOnrampProvider, CryptoOnrampManager, CryptoOnrampError } from '@ton/walletkit';
+
+export type {
+    CryptoOnrampAPI,
+    CryptoOnrampProviderInterface,
+    CryptoOnrampProviderMetadata,
+    CryptoOnrampProviderMetadataOverride,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+} from '@ton/walletkit';
diff --git a/packages/appkit/src/crypto-onramp/layerswap/index.ts b/packages/appkit/src/crypto-onramp/layerswap/index.ts
new file mode 100644
index 000000000..8894baf33
--- /dev/null
+++ b/packages/appkit/src/crypto-onramp/layerswap/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from '@ton/walletkit/crypto-onramp/layerswap';
diff --git a/packages/appkit/src/crypto-onramp/swaps-xyz/index.ts b/packages/appkit/src/crypto-onramp/swaps-xyz/index.ts
new file mode 100644
index 000000000..85909caad
--- /dev/null
+++ b/packages/appkit/src/crypto-onramp/swaps-xyz/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from '@ton/walletkit/crypto-onramp/swaps-xyz';
diff --git a/packages/appkit/src/index.ts b/packages/appkit/src/index.ts
index c5c3702dc..5026c5cff 100644
--- a/packages/appkit/src/index.ts
+++ b/packages/appkit/src/index.ts
@@ -34,6 +34,7 @@ export * from './connectors/tonconnect';
 
 export * from './swap';
 export * from './staking';
+export * from './crypto-onramp';
 
 // Actions
 export * from './actions';
diff --git a/packages/appkit/src/onramp/index.ts b/packages/appkit/src/onramp/index.ts
new file mode 100644
index 000000000..bed681716
--- /dev/null
+++ b/packages/appkit/src/onramp/index.ts
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ */
+
+// fiat-onramp: not ready — exported via sub-path to keep off main @ton/appkit API
+export {
+    getOnrampProvider,
+    type GetOnrampProviderOptions,
+    type GetOnrampProviderReturnType,
+} from '../actions/onramp/get-onramp-provider';
+export { getOnrampProviders, type GetOnrampProvidersReturnType } from '../actions/onramp/get-onramp-providers';
+export {
+    getOnrampQuote,
+    type GetOnrampQuoteOptions,
+    type GetOnrampQuoteReturnType,
+} from '../actions/onramp/get-onramp-quote';
+export {
+    watchOnrampProviders,
+    type WatchOnrampProvidersParameters,
+    type WatchOnrampProvidersReturnType,
+} from '../actions/onramp/watch-onramp-providers';
+export {
+    buildOnrampUrl,
+    type BuildOnrampUrlOptions,
+    type BuildOnrampUrlReturnType,
+} from '../actions/onramp/build-onramp-url';
diff --git a/packages/appkit/src/onramp/ton-pay/index.ts b/packages/appkit/src/onramp/ton-pay/index.ts
new file mode 100644
index 000000000..9e00e7bca
--- /dev/null
+++ b/packages/appkit/src/onramp/ton-pay/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from '@ton/walletkit/onramp/ton-pay';
diff --git a/packages/appkit/src/queries/crypto-onramp/create-crypto-onramp-deposit.ts b/packages/appkit/src/queries/crypto-onramp/create-crypto-onramp-deposit.ts
new file mode 100644
index 000000000..df12493a8
--- /dev/null
+++ b/packages/appkit/src/queries/crypto-onramp/create-crypto-onramp-deposit.ts
@@ -0,0 +1,40 @@
+/**
+ * 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 { MutationOptions } from '@tanstack/query-core';
+
+import type { AppKit } from '../../core/app-kit';
+import { createCryptoOnrampDeposit } from '../../actions/crypto-onramp/create-crypto-onramp-deposit';
+import type {
+    CreateCryptoOnrampDepositOptions,
+    CreateCryptoOnrampDepositReturnType,
+} from '../../actions/crypto-onramp/create-crypto-onramp-deposit';
+import type { MutationParameter } from '../../types/query';
+
+export type CreateCryptoOnrampDepositErrorType = Error;
+export type CreateCryptoOnrampDepositData = Awaited<CreateCryptoOnrampDepositReturnType>;
+export type CreateCryptoOnrampDepositVariables = CreateCryptoOnrampDepositOptions;
+export type CreateCryptoOnrampDepositMutationOptions<context = unknown> = MutationParameter<
+    CreateCryptoOnrampDepositData,
+    CreateCryptoOnrampDepositErrorType,
+    CreateCryptoOnrampDepositVariables,
+    context
+>;
+
+export type CreateCryptoOnrampDepositMutationConfig<context = unknown> = MutationOptions<
+    CreateCryptoOnrampDepositData,
+    CreateCryptoOnrampDepositErrorType,
+    CreateCryptoOnrampDepositVariables,
+    context
+>;
+
+export const createCryptoOnrampDepositMutationOptions = <context = unknown>(
+    appKit: AppKit,
+): CreateCryptoOnrampDepositMutationConfig<context> => ({
+    mutationFn: (variables: CreateCryptoOnrampDepositVariables) => createCryptoOnrampDeposit(appKit, variables),
+});
diff --git a/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-quote.ts b/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-quote.ts
new file mode 100644
index 000000000..f51f3a1a5
--- /dev/null
+++ b/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-quote.ts
@@ -0,0 +1,58 @@
+/**
+ * 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 '../../core/app-kit';
+import { getCryptoOnrampQuote } from '../../actions/crypto-onramp/get-crypto-onramp-quote';
+import type {
+    GetCryptoOnrampQuoteOptions,
+    GetCryptoOnrampQuoteReturnType,
+} from '../../actions/crypto-onramp/get-crypto-onramp-quote';
+import type { QueryOptions, QueryParameter } from '../../types/query';
+import type { Compute, ExactPartial } from '../../types/utils';
+import { filterQueryOptions } from '../../utils';
+
+export type GetCryptoOnrampQuoteErrorType = Error;
+export type GetCryptoOnrampQuoteData = GetCryptoOnrampQuoteQueryFnData;
+export type GetCryptoOnrampQuoteQueryConfig<selectData = GetCryptoOnrampQuoteData> = Compute<
+    ExactPartial<GetCryptoOnrampQuoteOptions>
+> &
+    QueryParameter<
+        GetCryptoOnrampQuoteQueryFnData,
+        GetCryptoOnrampQuoteErrorType,
+        selectData,
+        GetCryptoOnrampQuoteQueryKey
+    >;
+
+export const getCryptoOnrampQuoteQueryOptions = <selectData = GetCryptoOnrampQuoteData>(
+    appKit: AppKit,
+    options: GetCryptoOnrampQuoteQueryConfig<selectData> = {},
+): GetCryptoOnrampQuoteQueryOptions<selectData> => {
+    return {
+        ...options.query,
+        queryFn: async (context) => {
+            const [, parameters] = context.queryKey as [string, GetCryptoOnrampQuoteOptions];
+            return getCryptoOnrampQuote(appKit, parameters);
+        },
+        queryKey: getCryptoOnrampQuoteQueryKey(options),
+    };
+};
+
+export type GetCryptoOnrampQuoteQueryFnData = Compute<Awaited<GetCryptoOnrampQuoteReturnType>>;
+export const getCryptoOnrampQuoteQueryKey = (
+    options: Compute<ExactPartial<GetCryptoOnrampQuoteOptions>> = {},
+): GetCryptoOnrampQuoteQueryKey => ['crypto-onramp-quote', filterQueryOptions(options)] as const;
+export type GetCryptoOnrampQuoteQueryKey = readonly [
+    'crypto-onramp-quote',
+    Compute<ExactPartial<GetCryptoOnrampQuoteOptions>>,
+];
+export type GetCryptoOnrampQuoteQueryOptions<selectData = GetCryptoOnrampQuoteData> = QueryOptions<
+    GetCryptoOnrampQuoteQueryFnData,
+    GetCryptoOnrampQuoteErrorType,
+    selectData,
+    GetCryptoOnrampQuoteQueryKey
+>;
diff --git a/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-status.ts b/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-status.ts
new file mode 100644
index 000000000..f6d81a897
--- /dev/null
+++ b/packages/appkit/src/queries/crypto-onramp/get-crypto-onramp-status.ts
@@ -0,0 +1,59 @@
+/**
+ * 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 '../../core/app-kit';
+import { getCryptoOnrampStatus } from '../../actions/crypto-onramp/get-crypto-onramp-status';
+import type {
+    GetCryptoOnrampStatusOptions,
+    GetCryptoOnrampStatusReturnType,
+} from '../../actions/crypto-onramp/get-crypto-onramp-status';
+import type { QueryOptions, QueryParameter } from '../../types/query';
+import type { Compute, ExactPartial } from '../../types/utils';
+import { filterQueryOptions } from '../../utils';
+
+export type GetCryptoOnrampStatusErrorType = Error;
+export type GetCryptoOnrampStatusData = GetCryptoOnrampStatusQueryFnData;
+export type GetCryptoOnrampStatusQueryConfig<selectData = GetCryptoOnrampStatusData> = Compute<
+    ExactPartial<GetCryptoOnrampStatusOptions>
+> &
+    QueryParameter<
+        GetCryptoOnrampStatusQueryFnData,
+        GetCryptoOnrampStatusErrorType,
+        selectData,
+        GetCryptoOnrampStatusQueryKey
+    >;
+
+export const getCryptoOnrampStatusQueryOptions = <selectData = GetCryptoOnrampStatusData>(
+    appKit: AppKit,
+    options: GetCryptoOnrampStatusQueryConfig<selectData> = {},
+): GetCryptoOnrampStatusQueryOptions<selectData> => {
+    return {
+        ...options.query,
+        queryFn: async (context) => {
+            const [, parameters] = context.queryKey as [string, GetCryptoOnrampStatusOptions];
+            return getCryptoOnrampStatus(appKit, parameters);
+        },
+        queryKey: getCryptoOnrampStatusQueryKey(options),
+        enabled: options.depositId !== undefined,
+    };
+};
+
+export type GetCryptoOnrampStatusQueryFnData = Compute<Awaited<GetCryptoOnrampStatusReturnType>>;
+export const getCryptoOnrampStatusQueryKey = (
+    options: Compute<ExactPartial<GetCryptoOnrampStatusOptions>> = {},
+): GetCryptoOnrampStatusQueryKey => ['crypto-onramp-status', filterQueryOptions(options)] as const;
+export type GetCryptoOnrampStatusQueryKey = readonly [
+    'crypto-onramp-status',
+    Compute<ExactPartial<GetCryptoOnrampStatusOptions>>,
+];
+export type GetCryptoOnrampStatusQueryOptions<selectData = GetCryptoOnrampStatusData> = QueryOptions<
+    GetCryptoOnrampStatusQueryFnData,
+    GetCryptoOnrampStatusErrorType,
+    selectData,
+    GetCryptoOnrampStatusQueryKey
+>;
diff --git a/packages/appkit/src/queries/index.ts b/packages/appkit/src/queries/index.ts
index da7e6f0b9..f3a487a3f 100644
--- a/packages/appkit/src/queries/index.ts
+++ b/packages/appkit/src/queries/index.ts
@@ -37,6 +37,33 @@ export {
     type DisconnectVariables,
 } from './connectors/disconnect';
 
+// Crypto onramp
+export {
+    getCryptoOnrampQuoteQueryOptions,
+    type GetCryptoOnrampQuoteQueryConfig,
+    type GetCryptoOnrampQuoteQueryOptions,
+    type GetCryptoOnrampQuoteData,
+    type GetCryptoOnrampQuoteErrorType,
+    type GetCryptoOnrampQuoteQueryFnData,
+    type GetCryptoOnrampQuoteQueryKey,
+} from './crypto-onramp/get-crypto-onramp-quote';
+export {
+    getCryptoOnrampStatusQueryOptions,
+    type GetCryptoOnrampStatusQueryConfig,
+    type GetCryptoOnrampStatusQueryOptions,
+    type GetCryptoOnrampStatusData,
+    type GetCryptoOnrampStatusErrorType,
+    type GetCryptoOnrampStatusQueryFnData,
+    type GetCryptoOnrampStatusQueryKey,
+} from './crypto-onramp/get-crypto-onramp-status';
+export {
+    createCryptoOnrampDepositMutationOptions,
+    type CreateCryptoOnrampDepositMutationOptions,
+    type CreateCryptoOnrampDepositData,
+    type CreateCryptoOnrampDepositErrorType,
+    type CreateCryptoOnrampDepositVariables,
+} from './crypto-onramp/create-crypto-onramp-deposit';
+
 // Jettons
 export {
     getJettonInfoQueryOptions,
@@ -165,6 +192,24 @@ export {
     type BuildSwapTransactionVariables,
 } from './swap/build-swap-transaction';
 
+// Onramp
+export {
+    getOnrampQuoteQueryOptions,
+    type GetOnrampQuoteQueryConfig,
+    type GetOnrampQuoteQueryOptions,
+    type GetOnrampQuoteData,
+    type GetOnrampQuoteErrorType,
+    type GetOnrampQuoteQueryFnData,
+    type GetOnrampQuoteQueryKey,
+} from './onramp/get-onramp-quote';
+export {
+    buildOnrampUrlMutationOptions,
+    type BuildOnrampUrlMutationOptions,
+    type BuildOnrampUrlData,
+    type BuildOnrampUrlErrorType,
+    type BuildOnrampUrlVariables,
+} from './onramp/build-onramp-url';
+
 // Staking
 export {
     getStakingQuoteQueryOptions,
diff --git a/packages/appkit/src/queries/onramp/build-onramp-url.ts b/packages/appkit/src/queries/onramp/build-onramp-url.ts
new file mode 100644
index 000000000..e930aea18
--- /dev/null
+++ b/packages/appkit/src/queries/onramp/build-onramp-url.ts
@@ -0,0 +1,37 @@
+/**
+ * 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 { MutationOptions } from '@tanstack/query-core';
+
+import type { AppKit } from '../../core/app-kit';
+import { buildOnrampUrl } from '../../actions/onramp/build-onramp-url';
+import type { BuildOnrampUrlOptions, BuildOnrampUrlReturnType } from '../../actions/onramp/build-onramp-url';
+import type { MutationParameter } from '../../types/query';
+
+export type BuildOnrampUrlErrorType = Error;
+export type BuildOnrampUrlData = Awaited<BuildOnrampUrlReturnType>;
+export type BuildOnrampUrlVariables = BuildOnrampUrlOptions;
+export type BuildOnrampUrlMutationOptions<context = unknown> = MutationParameter<
+    BuildOnrampUrlData,
+    BuildOnrampUrlErrorType,
+    BuildOnrampUrlVariables,
+    context
+>;
+
+export type BuildOnrampUrlMutationConfig<context = unknown> = MutationOptions<
+    BuildOnrampUrlData,
+    BuildOnrampUrlErrorType,
+    BuildOnrampUrlVariables,
+    context
+>;
+
+export const buildOnrampUrlMutationOptions = <context = unknown>(
+    appKit: AppKit,
+): BuildOnrampUrlMutationConfig<context> => ({
+    mutationFn: (variables: BuildOnrampUrlVariables) => buildOnrampUrl(appKit, variables),
+});
diff --git a/packages/appkit/src/queries/onramp/get-onramp-quote.ts b/packages/appkit/src/queries/onramp/get-onramp-quote.ts
new file mode 100644
index 000000000..3a82c06c1
--- /dev/null
+++ b/packages/appkit/src/queries/onramp/get-onramp-quote.ts
@@ -0,0 +1,45 @@
+/**
+ * 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 '../../core/app-kit';
+import { getOnrampQuote } from '../../actions/onramp/get-onramp-quote';
+import type { GetOnrampQuoteOptions, GetOnrampQuoteReturnType } from '../../actions/onramp/get-onramp-quote';
+import type { QueryOptions, QueryParameter } from '../../types/query';
+import type { Compute, ExactPartial } from '../../types/utils';
+import { filterQueryOptions } from '../../utils';
+
+export type GetOnrampQuoteErrorType = Error;
+export type GetOnrampQuoteData = GetOnrampQuoteQueryFnData;
+export type GetOnrampQuoteQueryConfig<selectData = GetOnrampQuoteData> = Compute<ExactPartial<GetOnrampQuoteOptions>> &
+    QueryParameter<GetOnrampQuoteQueryFnData, GetOnrampQuoteErrorType, selectData, GetOnrampQuoteQueryKey>;
+
+export const getOnrampQuoteQueryOptions = <selectData = GetOnrampQuoteData>(
+    appKit: AppKit,
+    options: GetOnrampQuoteQueryConfig<selectData> = {},
+): GetOnrampQuoteQueryOptions<selectData> => {
+    return {
+        ...options.query,
+        queryFn: async (context) => {
+            const [, parameters] = context.queryKey as [string, GetOnrampQuoteOptions];
+            return getOnrampQuote(appKit, parameters);
+        },
+        queryKey: getOnrampQuoteQueryKey(options),
+    };
+};
+
+export type GetOnrampQuoteQueryFnData = Compute<Awaited<GetOnrampQuoteReturnType>>;
+export const getOnrampQuoteQueryKey = (
+    options: Compute<ExactPartial<GetOnrampQuoteOptions>> = {},
+): GetOnrampQuoteQueryKey => ['onramp-quote', filterQueryOptions(options)] as const;
+export type GetOnrampQuoteQueryKey = readonly ['onramp-quote', Compute<ExactPartial<GetOnrampQuoteOptions>>];
+export type GetOnrampQuoteQueryOptions<selectData = GetOnrampQuoteData> = QueryOptions<
+    GetOnrampQuoteQueryFnData,
+    GetOnrampQuoteErrorType,
+    selectData,
+    GetOnrampQuoteQueryKey
+>;
diff --git a/packages/appkit/src/types/connector.ts b/packages/appkit/src/types/connector.ts
index 252db3322..834cf92a0 100644
--- a/packages/appkit/src/types/connector.ts
+++ b/packages/appkit/src/types/connector.ts
@@ -57,6 +57,6 @@ export type ConnectorFactory = (ctx: ConnectorFactoryContext) => Connector;
 export type ConnectorInput = Connector | ConnectorFactory;
 
 /** Helper for creating typed connector factories */
-export function createConnector(factory: ConnectorFactory): ConnectorFactory {
+export const createConnector = (factory: ConnectorFactory): ConnectorFactory => {
     return factory;
-}
+};
diff --git a/packages/appkit/src/utils/address/format.ts b/packages/appkit/src/utils/address/format.ts
index af80eca0c..afa0aa36c 100644
--- a/packages/appkit/src/utils/address/format.ts
+++ b/packages/appkit/src/utils/address/format.ts
@@ -8,7 +8,7 @@
 
 import { Address } from '@ton/core';
 
-export function toBounceableAddress(data?: Address | string | null): string | undefined {
+export const toBounceableAddress = (data?: Address | string | null): string | undefined => {
     if (data instanceof Address) {
         return data.toString();
     }
@@ -18,9 +18,9 @@ export function toBounceableAddress(data?: Address | string | null): string | un
     } catch {
         //
     }
-}
+};
 
-export function toNonBounceableAddress(data?: Address | string | null): string | undefined {
+export const toNonBounceableAddress = (data?: Address | string | null): string | undefined => {
     if (data instanceof Address) {
         return data.toString({ bounceable: false });
     }
@@ -30,4 +30,4 @@ export function toNonBounceableAddress(data?: Address | string | null): string |
     } catch {
         //
     }
-}
+};
diff --git a/packages/appkit/src/utils/amount/calc-fiat-value.test.ts b/packages/appkit/src/utils/amount/calc-fiat-value.test.ts
index beb006347..19cb11455 100644
--- a/packages/appkit/src/utils/amount/calc-fiat-value.test.ts
+++ b/packages/appkit/src/utils/amount/calc-fiat-value.test.ts
@@ -32,15 +32,15 @@ describe('calcFiatValue', () => {
         expect(calcFiatValue('', '1.5')).toBe('0');
     });
 
-    it('should calculate fiat value without rounding', () => {
+    it('should calculate fiat value rounded to 2 decimal places', () => {
         expect(calcFiatValue('100', '1.5')).toBe('150');
-        expect(calcFiatValue('1', '0.001')).toBe('0.001');
-        expect(calcFiatValue('3', '1.005')).toBe('3.015');
+        expect(calcFiatValue('1', '0.001')).toBe('0');
+        expect(calcFiatValue('10', '1.005')).toBe('10.05');
     });
 
-    it('should handle decimal amounts without rounding', () => {
+    it('should handle decimal amounts rounded to 2 decimal places', () => {
         expect(calcFiatValue('0.5', '2')).toBe('1');
-        expect(calcFiatValue('1.23456', '100')).toBe('123.456');
-        expect(calcFiatValue('2.996876', '1')).toBe('2.996876');
+        expect(calcFiatValue('1.23456', '100')).toBe('123.46');
+        expect(calcFiatValue('2.994', '1')).toBe('2.99');
     });
 });
diff --git a/packages/appkit/src/utils/amount/calc-fiat-value.ts b/packages/appkit/src/utils/amount/calc-fiat-value.ts
index 973e60efd..8fc9de483 100644
--- a/packages/appkit/src/utils/amount/calc-fiat-value.ts
+++ b/packages/appkit/src/utils/amount/calc-fiat-value.ts
@@ -10,9 +10,9 @@
  * Calculates the fiat value of a token amount.
  * Returns null when rate is unavailable or amount is zero/invalid.
  */
-export function calcFiatValue(amount: string, rate: string | undefined): string {
+export const calcFiatValue = (amount: string, rate: string | undefined): string => {
     if (!rate) return '0';
     const num = parseFloat(amount);
     if (!num || num <= 0) return '0';
-    return Number((num * parseFloat(rate)).toFixed(10)).toString();
-}
+    return Number((num * parseFloat(rate)).toFixed(2)).toString();
+};
diff --git a/packages/appkit/src/utils/arrays/key-by.ts b/packages/appkit/src/utils/arrays/key-by.ts
index 85a9ed0dd..6478b9645 100644
--- a/packages/appkit/src/utils/arrays/key-by.ts
+++ b/packages/appkit/src/utils/arrays/key-by.ts
@@ -6,7 +6,7 @@
  *
  */
 
-export function keyBy<T, K extends PropertyKey>(arr: readonly T[], getKeyFromItem: (item: T) => K): Record<K, T> {
+export const keyBy = <T, K extends PropertyKey>(arr: readonly T[], getKeyFromItem: (item: T) => K): Record<K, T> => {
     const result = {} as Record<K, T>;
 
     arr.forEach((item) => {
@@ -15,4 +15,4 @@ export function keyBy<T, K extends PropertyKey>(arr: readonly T[], getKeyFromIte
     });
 
     return result;
-}
+};
diff --git a/packages/appkit/src/utils/object/map-values.ts b/packages/appkit/src/utils/object/map-values.ts
index 0ccff6fde..c1c02fe17 100644
--- a/packages/appkit/src/utils/object/map-values.ts
+++ b/packages/appkit/src/utils/object/map-values.ts
@@ -6,10 +6,10 @@
  *
  */
 
-export function mapValues<T extends object, K extends keyof T, V>(
+export const mapValues = <T extends object, K extends keyof T, V>(
     object: T,
     getNewValue: (value: T[K], key: K, obj: T) => V,
-): Record<K, V> {
+): Record<K, V> => {
     const result = {} as Record<K, V>;
     const keys = Object.keys(object) as K[];
 
@@ -20,4 +20,4 @@ export function mapValues<T extends object, K extends keyof T, V>(
     }
 
     return result;
-}
+};
diff --git a/packages/appkit/src/utils/predicate/is-string.ts b/packages/appkit/src/utils/predicate/is-string.ts
index 8598c4ab5..4cd63b822 100644
--- a/packages/appkit/src/utils/predicate/is-string.ts
+++ b/packages/appkit/src/utils/predicate/is-string.ts
@@ -6,6 +6,6 @@
  *
  */
 
-export function isString(value: unknown): value is string {
+export const isString = (value: unknown): value is string => {
     return typeof value === 'string';
-}
+};
diff --git a/packages/appkit/src/utils/query/filter-query-options.ts b/packages/appkit/src/utils/query/filter-query-options.ts
index 860ecc977..97d615a7d 100644
--- a/packages/appkit/src/utils/query/filter-query-options.ts
+++ b/packages/appkit/src/utils/query/filter-query-options.ts
@@ -8,8 +8,8 @@
 
 import type { Compute } from '../../types/utils';
 
-export function filterQueryOptions<type extends object>(options: type): Compute<Omit<type, 'query'>> {
+export const filterQueryOptions = <type extends object>(options: type): Compute<Omit<type, 'query'>> => {
     const { query, ...rest } = options as unknown as { query: unknown };
 
     return rest as Compute<Omit<type, 'query'>>;
-}
+};
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
index 87346d19a..b40e78c1b 100644
--- a/packages/walletkit/package.json
+++ b/packages/walletkit/package.json
@@ -60,6 +60,36 @@
         "types": "./dist/cjs/defi/staking/tonstakers/index.d.ts",
         "default": "./dist/cjs/defi/staking/tonstakers/index.js"
       }
+    },
+    "./onramp/ton-pay": {
+      "import": {
+        "types": "./dist/esm/defi/onramp/ton-pay/index.d.ts",
+        "default": "./dist/esm/defi/onramp/ton-pay/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/defi/onramp/ton-pay/index.d.ts",
+        "default": "./dist/cjs/defi/onramp/ton-pay/index.js"
+      }
+    },
+    "./crypto-onramp/swaps-xyz": {
+      "import": {
+        "types": "./dist/esm/defi/crypto-onramp/swaps-xyz/index.d.ts",
+        "default": "./dist/esm/defi/crypto-onramp/swaps-xyz/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/defi/crypto-onramp/swaps-xyz/index.d.ts",
+        "default": "./dist/cjs/defi/crypto-onramp/swaps-xyz/index.js"
+      }
+    },
+    "./crypto-onramp/layerswap": {
+      "import": {
+        "types": "./dist/esm/defi/crypto-onramp/layerswap/index.d.ts",
+        "default": "./dist/esm/defi/crypto-onramp/layerswap/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/defi/crypto-onramp/layerswap/index.d.ts",
+        "default": "./dist/cjs/defi/crypto-onramp/layerswap/index.js"
+      }
     }
   },
   "typesVersions": {
@@ -75,6 +105,15 @@
       ],
       "staking/tonstakers": [
         "./dist/cjs/defi/staking/tonstakers/index.d.ts"
+      ],
+      "onramp/ton-pay": [
+        "./dist/cjs/defi/onramp/ton-pay/index.d.ts"
+      ],
+      "crypto-onramp/swaps-xyz": [
+        "./dist/cjs/defi/crypto-onramp/swaps-xyz/index.d.ts"
+      ],
+      "crypto-onramp/layerswap": [
+        "./dist/cjs/defi/crypto-onramp/layerswap/index.d.ts"
       ]
     }
   },
diff --git a/packages/walletkit/src/api/interfaces/CryptoOnrampAPI.ts b/packages/walletkit/src/api/interfaces/CryptoOnrampAPI.ts
new file mode 100644
index 000000000..80b3f086c
--- /dev/null
+++ b/packages/walletkit/src/api/interfaces/CryptoOnrampAPI.ts
@@ -0,0 +1,88 @@
+/**
+ * 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 {
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampProviderMetadata,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+} from '../models';
+import type { DefiManagerAPI } from './DefiManagerAPI';
+import type { DefiProvider } from './DefiProvider';
+
+/**
+ * Crypto onramp API interface exposed by CryptoOnrampManager
+ */
+export interface CryptoOnrampAPI extends DefiManagerAPI<CryptoOnrampProviderInterface> {
+    /**
+     * Get a quote for onramping from another crypto asset into a TON asset
+     * @param params Quote parameters (source currency/network, target currency, amount)
+     * @param providerId Provider identifier (optional, uses default if not specified)
+     * @returns A promise that resolves to a CryptoOnrampQuote
+     */
+    getQuote(params: CryptoOnrampQuoteParams, providerId?: string): Promise<CryptoOnrampQuote>;
+
+    /**
+     * Create a deposit for a previously obtained quote
+     * @param params Deposit parameters (quote, user TON address)
+     * @param providerId Provider identifier (optional, uses default if not specified)
+     * @returns A promise that resolves to a CryptoOnrampDeposit
+     */
+    createDeposit(params: CryptoOnrampDepositParams, providerId?: string): Promise<CryptoOnrampDeposit>;
+
+    /**
+     * Get the status of a deposit
+     * @param params - Deposit status parameters including the deposit ID
+     * @returns Promise resolving to the deposit status
+     */
+    getStatus(params: CryptoOnrampStatusParams, providerId?: string): Promise<CryptoOnrampStatus>;
+}
+
+/**
+ * Interface that all crypto onramp providers must implement
+ */
+export interface CryptoOnrampProviderInterface<
+    TQuoteOptions = unknown,
+    TDepositOptions = unknown,
+> extends DefiProvider {
+    readonly type: 'crypto-onramp';
+
+    /**
+     * Unique identifier for the provider
+     */
+    readonly providerId: string;
+
+    /**
+     * Get static metadata for the provider (display name, logo, url).
+     */
+    getMetadata(): CryptoOnrampProviderMetadata;
+
+    /**
+     * Get a quote for onramping from another crypto asset into a TON asset
+     * @param params Quote parameters including provider-specific options
+     * @returns A promise that resolves to a CryptoOnrampQuote
+     */
+    getQuote(params: CryptoOnrampQuoteParams<TQuoteOptions>): Promise<CryptoOnrampQuote>;
+
+    /**
+     * Create a deposit for a previously obtained quote
+     * @param params Deposit parameters including provider-specific options
+     * @returns A promise that resolves to a CryptoOnrampDeposit
+     */
+    createDeposit(params: CryptoOnrampDepositParams<TDepositOptions>): Promise<CryptoOnrampDeposit>;
+
+    /**
+     * Get the status of a deposit
+     * @param params - Deposit status parameters including the deposit ID
+     * @returns Promise resolving to the deposit status
+     */
+    getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus>;
+}
diff --git a/packages/walletkit/src/api/interfaces/DefiProvider.ts b/packages/walletkit/src/api/interfaces/DefiProvider.ts
index 33661ca41..2d8c9a24a 100644
--- a/packages/walletkit/src/api/interfaces/DefiProvider.ts
+++ b/packages/walletkit/src/api/interfaces/DefiProvider.ts
@@ -11,7 +11,7 @@ import type { Network, BaseProvider } from '../models';
 /**
  * Type of provider
  */
-export type DefiProviderType = 'swap' | 'staking';
+export type DefiProviderType = 'swap' | 'staking' | 'onramp' | 'crypto-onramp';
 
 /**
  * Base interface for all DeFi providers
diff --git a/packages/walletkit/src/api/interfaces/OnrampAPI.ts b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
new file mode 100644
index 000000000..390fb330a
--- /dev/null
+++ b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
@@ -0,0 +1,65 @@
+/**
+ * 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 { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../models';
+import type { DefiManagerAPI } from './DefiManagerAPI';
+import type { DefiProvider } from './DefiProvider';
+
+/**
+ * Onramp API interface exposed by OnrampManager
+ */
+export interface OnrampAPI extends DefiManagerAPI<OnrampProviderInterface> {
+    /**
+     * Get a quote for onramping fiat to crypto
+     * @param params Quote parameters (fiat, crypto, amount, etc.)
+     * @param providerId Provider identifier (optional, uses default if not specified)
+     * @returns A promise that resolves to an OnrampQuote
+     */
+    getQuote(params: OnrampQuoteParams, providerId?: string): Promise<OnrampQuote>;
+
+    /**
+     * Get quotes for onramping fiat to crypto from all registered providers
+     * @param params Quote parameters (fiat, crypto, amount, etc.)
+     * @returns A promise that resolves to an array of OnrampQuotes
+     */
+    getQuotes(params: OnrampQuoteParams): Promise<OnrampQuote[]>;
+
+    /**
+     * Build an onramp URL for redirecting the user to the provider
+     * @param params Onramp parameters (quote, user address, etc.)
+     * @param providerId Provider identifier (optional, uses default if not specified)
+     * @returns A promise that resolves to a URL string
+     */
+    buildOnrampUrl(params: OnrampParams, providerId?: string): Promise<string>;
+}
+
+/**
+ * Interface that all onramp providers must implement
+ */
+export interface OnrampProviderInterface<TQuoteOptions = unknown, TOnrampOptions = unknown> extends DefiProvider {
+    readonly type: 'onramp';
+
+    /**
+     * Unique identifier for the provider
+     */
+    readonly providerId: string;
+
+    /**
+     * Get a quote for onramping fiat to crypto
+     * @param params Quote parameters including provider-specific options
+     * @returns A promise that resolves to an OnrampQuote
+     */
+    getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote>;
+
+    /**
+     * Build an onramp URL for redirecting the user to the provider
+     * @param params Onramp parameters including provider-specific options
+     * @returns A promise that resolves to a URL string
+     */
+    buildOnrampUrl(params: OnrampParams<TOnrampOptions>): Promise<string>;
+}
diff --git a/packages/walletkit/src/api/interfaces/index.ts b/packages/walletkit/src/api/interfaces/index.ts
index 28170d26a..dda0eb1c7 100644
--- a/packages/walletkit/src/api/interfaces/index.ts
+++ b/packages/walletkit/src/api/interfaces/index.ts
@@ -12,8 +12,10 @@ export type { WalletSigner, ISigner } from './WalletSigner';
 
 // Defi interfaces
 export type { DefiManagerAPI } from './DefiManagerAPI';
-export type { DefiProvider } from './DefiProvider';
 export type { SwapAPI, SwapProviderInterface } from './SwapAPI';
+export type { OnrampAPI, OnrampProviderInterface } from './OnrampAPI';
+export type { CryptoOnrampAPI, CryptoOnrampProviderInterface } from './CryptoOnrampAPI';
+export type { DefiProvider } from './DefiProvider';
 export type { StakingAPI, StakingProviderInterface } from './StakingAPI';
 
 export type { TONConnectSessionManager } from './TONConnectSessionManager';
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDeposit.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDeposit.ts
new file mode 100644
index 000000000..a3c4008fc
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDeposit.ts
@@ -0,0 +1,63 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Deposit details returned by a crypto onramp provider.
+ *
+ * The user must send `amount` of `sourceCurrencyAddress` to `address` on `sourceChain`
+ * to complete the onramp; the provider then delivers the target crypto to the
+ * user's TON address.
+ */
+export interface CryptoOnrampDeposit {
+    /**
+     * Deposit id
+     */
+    depositId: string;
+
+    /**
+     * Deposit address on the source chain
+     */
+    address: string;
+
+    /**
+     * Exact amount of source crypto the user must send
+     */
+    amount: string;
+
+    /**
+     * Source crypto currency address (contract address or 0x0... for native)
+     */
+    sourceCurrencyAddress: string;
+
+    /**
+     * Source chain identifier in CAIP-2 format (e.g. 'eip155:42161').
+     *
+     * @see https://chainagnostic.org/CAIPs/caip-2
+     */
+    sourceChain: string;
+
+    /**
+     * Optional memo / tag required by some chains (e.g. XRP, TON comment)
+     */
+    memo?: string;
+
+    /**
+     * Unix timestamp (ms) after which the deposit offer is no longer valid
+     */
+    expiresAt?: number;
+
+    /**
+     * Chain-specific warning to show the user (e.g. "send only on Solana")
+     */
+    chainWarning?: string;
+
+    /**
+     * Identifier of the provider that issued this deposit
+     */
+    providerId: string;
+}
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDepositParams.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDepositParams.ts
new file mode 100644
index 000000000..3ec0aa586
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampDepositParams.ts
@@ -0,0 +1,31 @@
+/**
+ * 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 { CryptoOnrampQuote } from './CryptoOnrampQuote';
+
+/**
+ * Parameters for creating a crypto onramp deposit.
+ *
+ * The recipient is taken from `quote.recipientAddress` set at quote time.
+ */
+export interface CryptoOnrampDepositParams<TQuoteMetadata = unknown, TProviderOptions = unknown> {
+    /**
+     * Quote to execute the deposit against (contains recipientAddress and provider metadata)
+     */
+    quote: CryptoOnrampQuote<TQuoteMetadata>;
+
+    /**
+     * Address to refund the crypto to in case of failure
+     */
+    refundAddress: string;
+
+    /**
+     * Provider-specific options
+     */
+    providerOptions?: TProviderOptions;
+}
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampProviderMetadata.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampProviderMetadata.ts
new file mode 100644
index 000000000..3df0c4fca
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampProviderMetadata.ts
@@ -0,0 +1,59 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Static metadata for a crypto-onramp provider.
+ */
+export interface CryptoOnrampProviderMetadata {
+    /**
+     * Human-readable provider name (e.g. 'Swaps.xyz')
+     */
+    name: string;
+
+    /**
+     * URL to the provider's logo image
+     */
+    logo?: string;
+
+    /**
+     * URL to the provider's website
+     */
+    url?: string;
+
+    /**
+     * Whether this provider requires a refund address on the source chain.
+     * When true, the UI must collect a refund address before creating a deposit.
+     */
+    isRefundAddressRequired?: boolean;
+
+    /**
+     * Whether this provider supports reversed (target-amount) quotes.
+     * When false, the UI should hide the direction toggle and only allow source-amount input.
+     */
+    isReversedAmountSupported?: boolean;
+}
+
+/**
+ * Used in provider configuration to override fields of the provider's metadata.
+ */
+export interface CryptoOnrampProviderMetadataOverride {
+    /**
+     * Override the provider's display name
+     */
+    name?: string;
+
+    /**
+     * Override the provider's logo URL
+     */
+    logo?: string;
+
+    /**
+     * Override the provider's website URL
+     */
+    url?: string;
+}
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuote.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuote.ts
new file mode 100644
index 000000000..a9e466a03
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuote.ts
@@ -0,0 +1,59 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Crypto onramp quote response with pricing information
+ */
+export interface CryptoOnrampQuote<TMetadata = unknown> {
+    /**
+     * Source crypto currency address (contract address or 0x0... for native)
+     */
+    sourceCurrencyAddress: string;
+
+    /**
+     * Source chain identifier in CAIP-2 format (e.g. 'eip155:42161').
+     *
+     * @see https://chainagnostic.org/CAIPs/caip-2
+     */
+    sourceChain: string;
+
+    /**
+     * Target crypto currency address on TON (contract address or 0x0... for native)
+     */
+    targetCurrencyAddress: string;
+
+    /**
+     * Amount of source crypto to send
+     */
+    sourceAmount: string;
+
+    /**
+     * Amount of target crypto to receive
+     */
+    targetAmount: string;
+
+    /**
+     * Exchange rate (amount of target per 1 unit of source)
+     */
+    rate: string;
+
+    /**
+     * TON address that will receive the target crypto
+     */
+    recipientAddress: string;
+
+    /**
+     * Identifier of the crypto onramp provider
+     */
+    providerId: string;
+
+    /**
+     * Provider-specific metadata for the quote (e.g. raw response needed to execute)
+     */
+    metadata?: TMetadata;
+}
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuoteParams.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuoteParams.ts
new file mode 100644
index 000000000..b31d22204
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampQuoteParams.ts
@@ -0,0 +1,60 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Parameters for requesting a crypto-to-crypto onramp quote.
+ *
+ * The target network is always TON, so only the source side is parameterised.
+ */
+export interface CryptoOnrampQuoteParams<TProviderOptions = unknown> {
+    /**
+     * Amount to onramp (either source or target crypto, depending on isSourceAmount)
+     */
+    amount: string;
+
+    /**
+     * Source crypto currency address (contract address or 0x0... for native)
+     */
+    sourceCurrencyAddress: string;
+
+    /**
+     * Source chain identifier in CAIP-2 format (e.g. 'eip155:1' for Ethereum
+     * mainnet, 'eip155:42161' for Arbitrum One). Providers map this to their
+     * own chain identifiers internally.
+     *
+     * @see https://chainagnostic.org/CAIPs/caip-2
+     */
+    sourceChain: string;
+
+    /**
+     * Target crypto currency address on TON (contract address or 0x0... for native)
+     */
+    targetCurrencyAddress: string;
+
+    /**
+     * TON address that will receive the target crypto
+     */
+    recipientAddress: string;
+
+    /**
+     * Refund address for the source crypto
+     */
+    refundAddress?: string;
+
+    /**
+     * If true, `amount` is the source amount to spend.
+     * If false, `amount` is the target amount to receive.
+     * Defaults to true when omitted.
+     */
+    isSourceAmount?: boolean;
+
+    /**
+     * Provider-specific options
+     */
+    providerOptions?: TProviderOptions;
+}
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatus.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatus.ts
new file mode 100644
index 000000000..29d3dfe89
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatus.ts
@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Deposit details returned by a crypto onramp provider.
+ *
+ * The user must send `amount` of `sourceCurrencyAddress` to `address` on `sourceChain`
+ * to complete the onramp; the provider then delivers the target crypto to the
+ * user's TON address.
+ */
+export type CryptoOnrampStatus = 'success' | 'pending' | 'failed';
diff --git a/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatusParams.ts b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatusParams.ts
new file mode 100644
index 000000000..91eb30647
--- /dev/null
+++ b/packages/walletkit/src/api/models/crypto-onramp/CryptoOnrampStatusParams.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.
+ *
+ */
+
+/**
+ * Deposit details returned by a crypto onramp provider.
+ *
+ * The user must send `amount` of `sourceCurrencyAddress` to `address` on `sourceChain`
+ * to complete the onramp; the provider then delivers the target crypto to the
+ * user's TON address.
+ */
+export interface CryptoOnrampStatusParams {
+    /**
+     * Deposit id
+     */
+    depositId: string;
+
+    /**
+     * Identifier of the provider that issued this deposit
+     */
+    providerId: string;
+}
diff --git a/packages/walletkit/src/api/models/index.ts b/packages/walletkit/src/api/models/index.ts
index b88054833..d24b66eee 100644
--- a/packages/walletkit/src/api/models/index.ts
+++ b/packages/walletkit/src/api/models/index.ts
@@ -95,6 +95,25 @@ export type { StakingQuoteParams } from './staking/StakingQuoteParams';
 export type { UnstakeModes } from './staking/UnstakeMode';
 export { UnstakeMode } from './staking/UnstakeMode';
 
+// Onramp models
+export type { OnrampParams } from './onramp/OnrampParams';
+export type { OnrampQuote } from './onramp/OnrampQuote';
+export type { OnrampQuoteParams } from './onramp/OnrampQuoteParams';
+export type { OnrampLimits } from './onramp/OnrampLimits';
+export type { OnrampLimitParams } from './onramp/OnrampLimitParams';
+
+// Crypto onramp models
+export type { CryptoOnrampQuote } from './crypto-onramp/CryptoOnrampQuote';
+export type { CryptoOnrampQuoteParams } from './crypto-onramp/CryptoOnrampQuoteParams';
+export type { CryptoOnrampDepositParams } from './crypto-onramp/CryptoOnrampDepositParams';
+export type { CryptoOnrampDeposit } from './crypto-onramp/CryptoOnrampDeposit';
+export type { CryptoOnrampStatusParams } from './crypto-onramp/CryptoOnrampStatusParams';
+export type { CryptoOnrampStatus } from './crypto-onramp/CryptoOnrampStatus';
+export type {
+    CryptoOnrampProviderMetadata,
+    CryptoOnrampProviderMetadataOverride,
+} from './crypto-onramp/CryptoOnrampProviderMetadata';
+
 // Transaction models
 export * from './transactions/Transaction';
 export type { TransactionAddressMetadata, TransactionAddressMetadataEntry } from './transactions/TransactionMetadata';
diff --git a/packages/walletkit/src/api/models/onramp/OnrampLimitParams.ts b/packages/walletkit/src/api/models/onramp/OnrampLimitParams.ts
new file mode 100644
index 000000000..d2df9b2ba
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampLimitParams.ts
@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ */
+
+export interface OnrampLimitParams<TProviderOptions = unknown> {
+    /**
+     * Crypto currency ticker (e.g. 'ton')
+     */
+    cryptoCurrency: string;
+
+    /**
+     * Fiat currency ticker (e.g. 'usd')
+     */
+    fiatCurrency: string;
+
+    /**
+     * Provider-specific options (e.g., paymentMethod)
+     */
+    providerOptions?: TProviderOptions;
+}
diff --git a/packages/walletkit/src/api/models/onramp/OnrampLimits.ts b/packages/walletkit/src/api/models/onramp/OnrampLimits.ts
new file mode 100644
index 000000000..7a8f58dc6
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampLimits.ts
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Onramp limits specify the boundaries of what a user can purchase
+ */
+export interface OnrampLimits {
+    /**
+     * Minimum fiat amount allowed
+     */
+    minBaseAmount: number;
+
+    /**
+     * Maximum fiat amount allowed
+     */
+    maxBaseAmount: number;
+
+    /**
+     * Minimum crypto amount allowed
+     */
+    minQuoteAmount?: number;
+
+    /**
+     * Maximum crypto amount allowed
+     */
+    maxQuoteAmount?: number;
+
+    /**
+     * Provider identifier
+     */
+    providerId: string;
+}
diff --git a/packages/walletkit/src/api/models/onramp/OnrampParams.ts b/packages/walletkit/src/api/models/onramp/OnrampParams.ts
new file mode 100644
index 000000000..f676f1d11
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampParams.ts
@@ -0,0 +1,35 @@
+/**
+ * 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 { UserFriendlyAddress } from '../core/Primitives';
+import type { OnrampQuote } from './OnrampQuote';
+
+/**
+ * Parameters for building an onramp URL
+ */
+export interface OnrampParams<TProviderOptions = unknown> {
+    /**
+     * The onramp quote to base the transaction on
+     */
+    quote: OnrampQuote;
+
+    /**
+     * Address of the user receiving the crypto
+     */
+    userAddress: UserFriendlyAddress;
+
+    /**
+     * URL to redirect the user to after a successful transaction (if supported by provider)
+     */
+    redirectUrl?: string;
+
+    /**
+     * Provider-specific options
+     */
+    providerOptions?: TProviderOptions;
+}
diff --git a/packages/walletkit/src/api/models/onramp/OnrampQuote.ts b/packages/walletkit/src/api/models/onramp/OnrampQuote.ts
new file mode 100644
index 000000000..91e9b7245
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampQuote.ts
@@ -0,0 +1,57 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Onramp quote response with pricing information
+ */
+export interface OnrampQuote {
+    /**
+     * Fiat currency ticker (e.g. 'USD')
+     */
+    fiatCurrency: string;
+
+    /**
+     * Crypto currency ticker (e.g. 'TON')
+     */
+    cryptoCurrency: string;
+
+    /**
+     * Amount of fiat to spend
+     */
+    fiatAmount: string;
+
+    /**
+     * Amount of crypto to receive
+     */
+    cryptoAmount: string;
+
+    /**
+     * Exchange rate (amount of crypto per 1 unit of fiat)
+     */
+    rate: string;
+
+    /**
+     * Total fees charged for the transaction (in fiat currency)
+     */
+    fiatFee?: string;
+
+    /**
+     * Network fee estimated (in fiat currency)
+     */
+    networkFeeFiat?: string;
+
+    /**
+     * Identifier of the onramp provider
+     */
+    providerId: string;
+
+    /**
+     * Provider-specific metadata for the quote
+     */
+    metadata?: unknown;
+}
diff --git a/packages/walletkit/src/api/models/onramp/OnrampQuoteParams.ts b/packages/walletkit/src/api/models/onramp/OnrampQuoteParams.ts
new file mode 100644
index 000000000..63a3b3bc5
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampQuoteParams.ts
@@ -0,0 +1,45 @@
+/**
+ * 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 { Network } from '../core/Network';
+
+/**
+ * Base parameters for requesting an onramp quote
+ */
+export interface OnrampQuoteParams<TProviderOptions = unknown> {
+    /**
+     * Amount to onramp (either fiat or crypto, depending on isFiatAmount)
+     */
+    amount: string;
+
+    /**
+     * Fiat currency ticker (e.g. 'USD', 'EUR')
+     */
+    fiatCurrency: string;
+
+    /**
+     * Crypto currency ticker (e.g. 'TON', 'USDT')
+     */
+    cryptoCurrency: string;
+
+    /**
+     * Network on which the crypto will be received
+     */
+    network?: Network;
+
+    /**
+     * Provider-specific options
+     */
+    providerOptions?: TProviderOptions;
+
+    /**
+     * If true, amount is the fiat amount to spend. If false, amount is the crypto amount to receive.
+     * Default depends on the provider implementation but usually defaults to true.
+     */
+    isFiatAmount?: boolean;
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampManager.ts b/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampManager.ts
new file mode 100644
index 000000000..ec53b3a92
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampManager.ts
@@ -0,0 +1,132 @@
+/**
+ * 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 { CryptoOnrampAPI, CryptoOnrampProviderInterface } from '../../api/interfaces';
+import type {
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+} from '../../api/models';
+import { CryptoOnrampError } from './errors';
+import { globalLogger } from '../../core/Logger';
+import { DefiManager } from '../DefiManager';
+
+const log = globalLogger.createChild('CryptoOnrampManager');
+
+/**
+ * CryptoOnrampManager — manages crypto onramp providers and delegates crypto onramp operations.
+ *
+ * Allows registration of multiple crypto onramp providers and provides a unified API
+ * for crypto-to-TON onramp operations. Providers can be switched dynamically.
+ */
+export class CryptoOnrampManager extends DefiManager<CryptoOnrampProviderInterface> implements CryptoOnrampAPI {
+    /**
+     * Get a quote for onramping from another crypto asset into a TON asset
+     * @param params - Quote parameters
+     * @param providerId - Optional provider name to use
+     * @returns Promise resolving to a crypto onramp quote
+     */
+    async getQuote<TProviderOptions = unknown>(
+        params: CryptoOnrampQuoteParams<TProviderOptions>,
+        providerId?: string,
+    ): Promise<CryptoOnrampQuote> {
+        const selectedProviderId = providerId || this.defaultProviderId;
+        log.debug('Getting crypto onramp quote', {
+            sourceCurrencyAddress: params.sourceCurrencyAddress,
+            sourceChain: params.sourceChain,
+            targetCurrencyAddress: params.targetCurrencyAddress,
+            amount: params.amount,
+            isSourceAmount: params.isSourceAmount,
+            providerId: selectedProviderId,
+        });
+
+        try {
+            const quote = await this.getProvider(selectedProviderId).getQuote(params);
+
+            log.debug('Received crypto onramp quote', {
+                sourceAmount: quote.sourceAmount,
+                targetAmount: quote.targetAmount,
+                rate: quote.rate,
+            });
+
+            return quote;
+        } catch (error) {
+            log.error('Failed to get crypto onramp quote', { error, params });
+            throw error;
+        }
+    }
+
+    /**
+     * Create a deposit for a previously obtained quote
+     * @param params - Deposit parameters including the quote and user TON address
+     * @param providerId - Optional provider name to use
+     * @returns Promise resolving to deposit details
+     */
+    async createDeposit<TProviderOptions = unknown>(
+        params: CryptoOnrampDepositParams<TProviderOptions>,
+        providerId?: string,
+    ): Promise<CryptoOnrampDeposit> {
+        const selectedProviderId = providerId || params.quote?.providerId || this.defaultProviderId;
+
+        log.debug('Creating crypto onramp deposit', {
+            providerId: selectedProviderId,
+            recipientAddress: params.quote.recipientAddress,
+        });
+
+        try {
+            const deposit = await this.getProvider(selectedProviderId).createDeposit(params);
+
+            log.debug('Created crypto onramp deposit', {
+                address: deposit.address,
+                amount: deposit.amount,
+                sourceCurrencyAddress: deposit.sourceCurrencyAddress,
+                sourceChain: deposit.sourceChain,
+            });
+
+            return deposit;
+        } catch (error) {
+            log.error('Failed to create crypto onramp deposit', { error, params });
+            throw error;
+        }
+    }
+
+    /**
+     * Get the status of a deposit
+     * @param params - Deposit status parameters including the deposit ID
+     * @param providerId - Optional provider name to use
+     * @returns Promise resolving to the deposit status
+     */
+    async getStatus(params: CryptoOnrampStatusParams, providerId?: string): Promise<CryptoOnrampStatus> {
+        const selectedProviderId = providerId || this.defaultProviderId;
+
+        log.debug('Getting crypto onramp deposit status', {
+            providerId: selectedProviderId,
+            depositId: params.depositId,
+        });
+
+        try {
+            const status = await this.getProvider(selectedProviderId).getStatus(params);
+
+            log.debug('Received crypto onramp deposit status', {
+                status,
+            });
+
+            return status;
+        } catch (error) {
+            log.error('Failed to get crypto onramp deposit status', { error, params });
+            throw error;
+        }
+    }
+
+    protected createError(message: string, code: string, details?: unknown): CryptoOnrampError {
+        return new CryptoOnrampError(message, code, details);
+    }
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampProvider.ts b/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampProvider.ts
new file mode 100644
index 000000000..4ea097e80
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/CryptoOnrampProvider.ts
@@ -0,0 +1,73 @@
+/**
+ * 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 {
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampProviderMetadata,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+    Network,
+} from '../../api/models';
+import type { CryptoOnrampProviderInterface } from '../../api/interfaces';
+
+/**
+ * Abstract base class for crypto onramp providers
+ *
+ * Provides a common interface for implementing crypto-to-TON onramp functionality
+ * across different gateways.
+ *
+ * @example
+ * ```typescript
+ * class MyCryptoOnrampProvider extends CryptoOnrampProvider {
+ *   async getQuote(params: CryptoOnrampQuoteParams): Promise<CryptoOnrampQuote> {
+ *     // Implementation
+ *   }
+ *
+ *   async createDeposit(params: CryptoOnrampDepositParams): Promise<CryptoOnrampDeposit> {
+ *     // Implementation
+ *   }
+ * }
+ * ```
+ */
+export abstract class CryptoOnrampProvider<
+    TQuoteOptions = undefined,
+    TDepositOptions = undefined,
+> implements CryptoOnrampProviderInterface<TQuoteOptions, TDepositOptions> {
+    readonly type = 'crypto-onramp';
+    abstract readonly providerId: string;
+    abstract getSupportedNetworks(): Network[];
+
+    /**
+     * Get static metadata for the provider (display name, logo, url).
+     */
+    abstract getMetadata(): CryptoOnrampProviderMetadata;
+
+    /**
+     * Get a quote for onramping from another crypto asset into a TON asset
+     * @param params - Quote parameters
+     * @returns Promise resolving to a crypto onramp quote with pricing information
+     */
+    abstract getQuote(params: CryptoOnrampQuoteParams<TQuoteOptions>): Promise<CryptoOnrampQuote>;
+
+    /**
+     * Create a deposit that the user must fund to complete the onramp
+     * @param params - Deposit parameters including the quote and user TON address
+     * @returns Promise resolving to deposit details (address, amount, memo, etc.)
+     */
+    abstract createDeposit(params: CryptoOnrampDepositParams<TDepositOptions>): Promise<CryptoOnrampDeposit>;
+
+    /**
+     * Get the status of a deposit
+     * @param params - Deposit status parameters including the deposit ID
+     * @returns Promise resolving to the deposit status
+     */
+    abstract getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus>;
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/README.md b/packages/walletkit/src/defi/crypto-onramp/README.md
new file mode 100644
index 000000000..b280ce500
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/README.md
@@ -0,0 +1,184 @@
+<!--
+This file is auto-generated. Do not edit manually.
+Changes will be overwritten when running the docs update script.
+Source template: template/packages/walletkit/src/defi/crypto-onramp/README.md
+-->
+
+# Crypto Onramp Manager
+
+CryptoOnrampManager provides a unified interface for bridging crypto assets from external chains into TON assets via third-party bridge providers.
+
+## Quick Start
+
+```typescript
+import { TonWalletKit, Network } from '@ton/walletkit';
+import { createSwapsXyzProvider } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+const kit = new TonWalletKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: { url: 'https://toncenter.com', key: 'optional-api-key' },
+        },
+    },
+});
+
+kit.cryptoOnramp.registerProvider(
+    createSwapsXyzProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('swaps-xyz');
+```
+
+## Quote Parameters
+
+All providers accept the same base parameters for `getQuote`:
+
+```typescript
+interface CryptoOnrampQuoteParams<TProviderOptions = unknown> {
+    amount: string;                     // Amount in base units (source or target, see isSourceAmount)
+    sourceCurrencyAddress: string;      // Source token contract address (or native zero address)
+    sourceChain: string;              // Source chain identifier in CAIP-2 format (e.g. 'eip155:1', 'eip155:42161')
+    targetCurrencyAddress: string;      // Target TON token address
+    recipientAddress: string;           // TON address that will receive the target crypto
+    refundAddress?: string;             // Refund address on the source chain (required by some providers)
+    isSourceAmount?: boolean;           // true = spend `amount` source tokens, false = receive `amount` target tokens (default: true)
+    providerOptions?: TProviderOptions; // Provider-specific options (slippage, etc.)
+}
+```
+
+## Getting a Quote
+
+```typescript
+const quote = await kit.cryptoOnramp.getQuote({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceChain: 'eip155:42161', // Arbitrum One in CAIP-2 format
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive the bridged tokens
+});
+
+console.log('Source amount:', quote.sourceAmount);
+console.log('Target amount:', quote.targetAmount);
+console.log('Rate:', quote.rate);
+console.log('Recipient:', quote.recipientAddress);
+```
+
+## Creating a Deposit
+
+```typescript
+const deposit = await kit.cryptoOnramp.createDeposit({
+    quote,
+    refundAddress: '0x...', // EVM address to refund on failure (required by some providers)
+});
+
+console.log('Send to:', deposit.address);
+console.log('Amount:', deposit.amount);
+console.log('Deposit ID:', deposit.depositId);
+```
+
+## Checking Deposit Status
+
+```typescript
+const status = await kit.cryptoOnramp.getStatus({
+    depositId: deposit.depositId,
+});
+// status: 'pending' | 'success' | 'failed'
+```
+
+## Creating a Custom Provider
+
+Extend `CryptoOnrampProvider` to integrate a new bridge:
+
+```typescript
+import {
+    CryptoOnrampProvider,
+    type CryptoOnrampQuoteParams,
+    type CryptoOnrampQuote,
+    type CryptoOnrampDepositParams,
+    type CryptoOnrampDeposit,
+    type CryptoOnrampStatusParams,
+    type CryptoOnrampStatus,
+    type Network,
+} from '@ton/walletkit';
+
+interface MyQuoteOptions {
+    slippageBps?: number;
+}
+
+export class MyCryptoOnrampProvider extends CryptoOnrampProvider<MyQuoteOptions> {
+    readonly providerId = 'my-provider';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    getMetadata() {
+        return { name: 'My Provider', url: 'https://my-provider.com', isRefundAddressRequired: true };
+    }
+
+    async getQuote(params: CryptoOnrampQuoteParams<MyQuoteOptions>): Promise<CryptoOnrampQuote> {
+        const { recipientAddress, sourceCurrencyAddress, targetCurrencyAddress } = params;
+        // Fetch quote from your bridge API...
+        return {
+            sourceCurrencyAddress,
+            sourceChain: params.sourceChain,
+            targetCurrencyAddress,
+            sourceAmount: '...',
+            targetAmount: '...',
+            rate: '...',
+            recipientAddress,
+            providerId: this.providerId,
+        };
+    }
+
+    async createDeposit(params: CryptoOnrampDepositParams): Promise<CryptoOnrampDeposit> {
+        // params.quote.recipientAddress holds the TON recipient set at quote time
+        return { depositId: '...', address: '0x...', amount: '...', sourceCurrencyAddress: '...', sourceChain: '...', providerId: this.providerId };
+    }
+
+    async getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus> {
+        return 'pending';
+    }
+}
+```
+
+## Available Providers
+
+- **[Swaps.xyz](https://github.com/ton-connect/kit/blob/main/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md)**: Multi-chain bridge to TON via swaps.xyz, supporting a wide range of source networks and tokens
+- **[Layerswap](https://github.com/ton-connect/kit/blob/main/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md)**: Multi-chain bridge to TON via Layerswap
+
+## API Reference
+
+### CryptoOnrampManager
+
+#### `getQuote(params, providerId?)`
+Get a quote for a crypto-to-TON bridge operation.
+
+**Parameters:**
+- `params: CryptoOnrampQuoteParams<TProviderOptions>` – `sourceCurrencyAddress`, `sourceChain`, `targetCurrencyAddress`, `amount`, `recipientAddress`, `isSourceAmount?`, `refundAddress?`, `providerOptions?`
+- `providerId?: string` – Provider to use (uses default if omitted)
+
+**Returns:** `Promise<CryptoOnrampQuote>`
+
+#### `createDeposit(params, providerId?)`
+Create a deposit from a previously obtained quote. Returns the address the user must fund on the source chain.
+
+**Parameters:**
+- `params: CryptoOnrampDepositParams` – `quote`, `refundAddress`
+- `providerId?: string` – Resolved from `quote.providerId` when omitted
+
+**Returns:** `Promise<CryptoOnrampDeposit>`
+
+#### `getStatus(params, providerId?)`
+Poll the status of a deposit.
+
+**Parameters:**
+- `params: CryptoOnrampStatusParams` – `depositId`
+- `providerId?: string` – Provider to use (uses default if omitted)
+
+**Returns:** `Promise<CryptoOnrampStatus>` — `'pending' | 'success' | 'failed'`
+
+#### `registerProvider(provider)`
+Register a new crypto onramp provider (instance or factory).
+
+#### `setDefaultProvider(providerId)`
+Set the default provider for operations that do not specify one.
diff --git a/packages/walletkit/src/defi/crypto-onramp/caip2.ts b/packages/walletkit/src/defi/crypto-onramp/caip2.ts
new file mode 100644
index 000000000..c3bd90128
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/caip2.ts
@@ -0,0 +1,38 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Parsed CAIP-2 chain identifier — `<namespace>:<reference>`.
+ *
+ * @see https://chainagnostic.org/CAIPs/caip-2
+ */
+export interface Caip2 {
+    namespace: string;
+    reference: string;
+}
+
+const CAIP2_REGEX = /^([-a-z0-9]{3,8}):([-_a-zA-Z0-9]{1,32})$/;
+
+/**
+ * Parse a CAIP-2 string. Returns `undefined` if the value does not match the
+ * `<namespace>:<reference>` shape.
+ *
+ * @example parseCaip2('eip155:1') // { namespace: 'eip155', reference: '1' }
+ */
+export const parseCaip2 = (value: string): Caip2 | undefined => {
+    const match = CAIP2_REGEX.exec(value);
+    if (!match) return undefined;
+    return { namespace: match[1]!, reference: match[2]! };
+};
+
+/**
+ * Build a CAIP-2 string from namespace and reference.
+ */
+export const formatCaip2 = (namespace: string, reference: string | number): string => {
+    return `${namespace}:${reference}`;
+};
diff --git a/packages/walletkit/src/defi/crypto-onramp/errors.ts b/packages/walletkit/src/defi/crypto-onramp/errors.ts
new file mode 100644
index 000000000..5c15eadc2
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/errors.ts
@@ -0,0 +1,23 @@
+/**
+ * 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 { DefiError } from '../errors';
+
+export class CryptoOnrampError extends DefiError {
+    static readonly PROVIDER_ERROR = 'PROVIDER_ERROR';
+    static readonly QUOTE_FAILED = 'QUOTE_FAILED';
+    static readonly DEPOSIT_FAILED = 'DEPOSIT_FAILED';
+    static readonly REFUND_ADDRESS_REQUIRED = 'REFUND_ADDRESS_REQUIRED';
+    static readonly INVALID_REFUND_ADDRESS = 'INVALID_REFUND_ADDRESS';
+    static readonly REVERSED_AMOUNT_NOT_SUPPORTED = 'REVERSED_AMOUNT_NOT_SUPPORTED';
+
+    constructor(message: string, code: string, details?: unknown) {
+        super(message, code, details);
+        this.name = 'CryptoOnrampError';
+    }
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/index.ts b/packages/walletkit/src/defi/crypto-onramp/index.ts
new file mode 100644
index 000000000..198061a88
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './errors';
+export * from './CryptoOnrampManager';
+export * from './CryptoOnrampProvider';
diff --git a/packages/walletkit/src/defi/crypto-onramp/layerswap/LayerswapCryptoOnrampProvider.ts b/packages/walletkit/src/defi/crypto-onramp/layerswap/LayerswapCryptoOnrampProvider.ts
new file mode 100644
index 000000000..04c4b0d10
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/layerswap/LayerswapCryptoOnrampProvider.ts
@@ -0,0 +1,261 @@
+/**
+ * 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 {
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+} from '../../../api/models';
+import { Network } from '../../../api/models';
+import { CryptoOnrampProvider } from '../CryptoOnrampProvider';
+import { CryptoOnrampError } from '../errors';
+import { createProvider } from '../../../types/factory';
+import type { LayerswapCreateSwapResponse, LayerswapGetSwapResponse } from './types';
+import {
+    ARBITRUM_CAIP2,
+    ARBITRUM_USDT0_ADDRESS,
+    LAYERSWAP_DESTINATION_NETWORK,
+    LAYERSWAP_DESTINATION_TOKEN,
+    LAYERSWAP_SOURCE_NETWORK,
+    LAYERSWAP_SOURCE_TOKEN,
+    TON_USDT_ADDRESS,
+    formatBaseUnits,
+    isErrorResponse,
+    mapStatus,
+    parseBaseUnits,
+} from './utils';
+
+const LAYERSWAP_API_URL = 'https://api.layerswap.io/api/v2';
+const SOURCE_TOKEN_DECIMALS = 6;
+const DESTINATION_TOKEN_DECIMALS = 6;
+
+export interface LayerswapProviderConfig {
+    /**
+     * Optional API key. Forwarded as `X-LS-APIKEY` when provided.
+     */
+    apiKey?: string;
+
+    /**
+     * Override the base API URL. Defaults to https://api.layerswap.io/api/v2
+     */
+    apiUrl?: string;
+}
+
+/**
+ * Metadata stored on the CryptoOnrampQuote returned by this provider.
+ *
+ * The swap is created at quote time, so we cache the swap id and deposit
+ * action here; `createDeposit` just reads them out.
+ */
+export interface LayerswapQuoteMetadata {
+    swapId: string;
+    depositAddress: string;
+    sourceAmountBaseUnits: string;
+    targetAmountBaseUnits: string;
+}
+
+/**
+ * Provider implementation that routes crypto onramps through Layerswap.
+ *
+ * v1 only supports a single hard-coded route: Arbitrum USDT0 → TON USDT.
+ * Any other source network / token combination is rejected.
+ */
+export class LayerswapCryptoOnrampProvider extends CryptoOnrampProvider<undefined, LayerswapQuoteMetadata> {
+    readonly providerId = 'layerswap';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    getMetadata() {
+        return { name: 'Layerswap', url: 'https://layerswap.io', isReversedAmountSupported: false };
+    }
+
+    private readonly apiKey: string | undefined;
+    private readonly apiUrl: string;
+
+    constructor(config: LayerswapProviderConfig = {}) {
+        super();
+        this.apiKey = config.apiKey;
+        this.apiUrl = config.apiUrl ?? LAYERSWAP_API_URL;
+    }
+
+    async getQuote(params: CryptoOnrampQuoteParams<undefined>): Promise<CryptoOnrampQuote<LayerswapQuoteMetadata>> {
+        const recipient = params.recipientAddress;
+
+        if (params.sourceChain !== ARBITRUM_CAIP2) {
+            throw new CryptoOnrampError(
+                `Layerswap: unsupported source chain "${params.sourceChain}" (only Arbitrum One / ${ARBITRUM_CAIP2} is supported)`,
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        if (params.sourceCurrencyAddress.toLowerCase() !== ARBITRUM_USDT0_ADDRESS) {
+            throw new CryptoOnrampError(
+                `Layerswap: unsupported source token "${params.sourceCurrencyAddress}" (only USDT0 on Arbitrum is supported)`,
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        if (params.targetCurrencyAddress !== TON_USDT_ADDRESS) {
+            throw new CryptoOnrampError(
+                `Layerswap: unsupported target token "${params.targetCurrencyAddress}" (only USDT on TON is supported)`,
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        if (params.isSourceAmount === false) {
+            throw new CryptoOnrampError(
+                'Layerswap: only source-amount quotes are supported',
+                CryptoOnrampError.REVERSED_AMOUNT_NOT_SUPPORTED,
+            );
+        }
+
+        const amountDecimal = formatBaseUnits(params.amount, SOURCE_TOKEN_DECIMALS);
+
+        const body = {
+            amount: amountDecimal,
+            source_network: LAYERSWAP_SOURCE_NETWORK,
+            destination_network: LAYERSWAP_DESTINATION_NETWORK,
+            source_token: LAYERSWAP_SOURCE_TOKEN,
+            destination_token: LAYERSWAP_DESTINATION_TOKEN,
+            destination_address: recipient,
+            refuel: false,
+            use_deposit_address: true,
+        };
+
+        let response: Response;
+        try {
+            response = await fetch(`${this.apiUrl}/swaps`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...(this.apiKey ? { 'X-LS-APIKEY': this.apiKey } : {}),
+                },
+                body: JSON.stringify(body),
+            });
+        } catch (error) {
+            throw new CryptoOnrampError(
+                'Layerswap: network error while creating swap',
+                CryptoOnrampError.QUOTE_FAILED,
+                error,
+            );
+        }
+
+        const json = (await response.json().catch(() => undefined)) as LayerswapCreateSwapResponse | undefined;
+
+        if (!response.ok || !json || isErrorResponse(json)) {
+            const err = isErrorResponse(json) ? json.error : undefined;
+            throw new CryptoOnrampError(
+                err?.message ?? `Layerswap create swap failed (HTTP ${response.status})`,
+                err?.code ?? CryptoOnrampError.QUOTE_FAILED,
+                err ?? { status: response.status },
+            );
+        }
+
+        const data = json.data;
+        const depositAction = data.deposit_actions[0];
+        if (!depositAction) {
+            throw new CryptoOnrampError(
+                'Layerswap: swap was created but no deposit action was returned',
+                CryptoOnrampError.QUOTE_FAILED,
+                data,
+            );
+        }
+
+        const targetAmountBaseUnits = parseBaseUnits(data.quote.receive_amount, DESTINATION_TOKEN_DECIMALS);
+        const rate =
+            data.quote.requested_amount > 0
+                ? (data.quote.receive_amount / data.quote.requested_amount).toString()
+                : '0';
+
+        const metadata: LayerswapQuoteMetadata = {
+            swapId: data.swap.id,
+            depositAddress: depositAction.to_address,
+            sourceAmountBaseUnits: depositAction.amount_in_base_units,
+            targetAmountBaseUnits,
+        };
+
+        return {
+            sourceCurrencyAddress: params.sourceCurrencyAddress,
+            sourceChain: ARBITRUM_CAIP2,
+            targetCurrencyAddress: params.targetCurrencyAddress,
+            sourceAmount: metadata.sourceAmountBaseUnits,
+            targetAmount: metadata.targetAmountBaseUnits,
+            rate,
+            recipientAddress: recipient,
+            providerId: this.providerId,
+            metadata,
+        };
+    }
+
+    async createDeposit(params: CryptoOnrampDepositParams<LayerswapQuoteMetadata>): Promise<CryptoOnrampDeposit> {
+        const metadata = params.quote.metadata;
+        if (!metadata?.swapId) {
+            throw new CryptoOnrampError(
+                'Layerswap: quote metadata is missing — quote must be obtained from this provider',
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        return {
+            depositId: metadata.swapId,
+            address: metadata.depositAddress,
+            amount: metadata.sourceAmountBaseUnits,
+            sourceCurrencyAddress: params.quote.sourceCurrencyAddress,
+            sourceChain: params.quote.sourceChain,
+            providerId: this.providerId,
+        };
+    }
+
+    async getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus> {
+        const url = new URL(`${this.apiUrl}/swaps/${params.depositId}`);
+        url.searchParams.set('exclude_deposit_actions', 'true');
+
+        let response: Response;
+        try {
+            response = await fetch(url.toString(), {
+                method: 'GET',
+                headers: this.apiKey ? { 'X-LS-APIKEY': this.apiKey } : undefined,
+            });
+        } catch (error) {
+            throw new CryptoOnrampError(
+                'Layerswap: network error while fetching swap status',
+                CryptoOnrampError.PROVIDER_ERROR,
+                error,
+            );
+        }
+
+        if (response.status === 404) {
+            return 'pending';
+        }
+
+        const json = (await response.json().catch(() => undefined)) as LayerswapGetSwapResponse | undefined;
+
+        if (!response.ok || !json || isErrorResponse(json)) {
+            const err = isErrorResponse(json) ? json.error : undefined;
+            throw new CryptoOnrampError(
+                err?.message ?? `Layerswap get swap failed (HTTP ${response.status})`,
+                err?.code ?? CryptoOnrampError.PROVIDER_ERROR,
+                err ?? { status: response.status },
+            );
+        }
+
+        return mapStatus(json.data.swap.status);
+    }
+}
+
+/**
+ * Returns a `ProviderFactory` for `LayerswapCryptoOnrampProvider`.
+ * Pass to `providers: [createLayerswapProvider(config)]`.
+ */
+export const createLayerswapProvider = (config: LayerswapProviderConfig = {}) =>
+    createProvider(() => new LayerswapCryptoOnrampProvider(config));
diff --git a/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md b/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
new file mode 100644
index 000000000..d05443a2f
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
@@ -0,0 +1,56 @@
+<!--
+This file is auto-generated. Do not edit manually.
+Changes will be overwritten when running the docs update script.
+Source template: template/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
+-->
+
+# Layerswap Crypto Onramp Provider
+
+Layerswap is a multi-chain bridge that routes crypto assets from a wide range of source networks and tokens into TON assets.
+
+For more information about supported chains and tokens, see the [official documentation](https://docs.layerswap.io).
+
+## Quick Start
+
+```typescript
+import { createLayerswapProvider } from '@ton/walletkit/crypto-onramp/layerswap';
+
+kit.cryptoOnramp.registerProvider(
+    createLayerswapProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('layerswap');
+```
+
+## Configuration
+
+```typescript
+interface LayerswapProviderConfig {
+    apiKey?: string;   // Optional API key forwarded as X-LS-APIKEY
+    apiUrl?: string;   // Default: 'https://api.layerswap.io/api/v2'
+}
+```
+
+See [Crypto Onramp README](../README.md) for base `CryptoOnrampQuoteParams`. Layerswap does not define any additional provider-specific quote options.
+
+## Usage Example
+
+```typescript
+const quote = await kit.cryptoOnramp.getQuote({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceChain: 'eip155:42161',
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive tokens
+});
+
+const deposit = await kit.cryptoOnramp.createDeposit({ quote });
+
+// deposit.address — address to send tokens to on the source chain
+// deposit.amount  — amount to send (in source token base units)
+```
+
+## How It Works
+
+1. **`getQuote`** — creates a Layerswap swap at quote time (POST `/swaps`) and caches the `swapId` and `depositAddress` in `quote.metadata`. No extra network call is needed at deposit time.
+2. **`createDeposit`** — reads `swapId` and `depositAddress` directly from `quote.metadata`. No `refundAddress` is required for Layerswap.
+3. **`getStatus`** — polls GET `/swaps/{swapId}` and maps the Layerswap status to the canonical `'pending' | 'success' | 'failed'` enum.
diff --git a/packages/walletkit/src/defi/crypto-onramp/layerswap/index.ts b/packages/walletkit/src/defi/crypto-onramp/layerswap/index.ts
new file mode 100644
index 000000000..538f14af9
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/layerswap/index.ts
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './LayerswapCryptoOnrampProvider';
+export type {
+    LayerswapToken,
+    LayerswapNetwork,
+    LayerswapDepositAction,
+    LayerswapSwap,
+    LayerswapSwapStatus,
+    LayerswapQuote,
+    LayerswapSwapData,
+    LayerswapCreateSwapResponse,
+    LayerswapGetSwapResponse,
+    LayerswapErrorResponse,
+} from './types';
diff --git a/packages/walletkit/src/defi/crypto-onramp/layerswap/types.ts b/packages/walletkit/src/defi/crypto-onramp/layerswap/types.ts
new file mode 100644
index 000000000..26fdadfe5
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/layerswap/types.ts
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Token / network descriptors returned by Layerswap. Non-exhaustive — only the
+ * fields we consume.
+ */
+export interface LayerswapToken {
+    symbol: string;
+    display_asset: string;
+    logo: string | null;
+    contract: string | null;
+    decimals: number;
+    price_in_usd: number;
+    precision: number;
+    listing_date: string;
+    source_rank: number;
+    destination_rank: number;
+    group: string;
+}
+
+export interface LayerswapNetwork {
+    name: string;
+    display_name: string;
+    logo: string;
+    chain_id: string | null;
+    node_url: string | null;
+    nodes: string[];
+    type: string;
+    transaction_explorer_template: string;
+    account_explorer_template: string;
+    token?: LayerswapToken;
+}
+
+export interface LayerswapDepositAction {
+    type: string;
+    to_address: string;
+    amount: number;
+    order: number;
+    amount_in_base_units: string;
+    network: LayerswapNetwork;
+    token: LayerswapToken;
+    fee_token: LayerswapToken;
+    call_data: string | null;
+    encoded_args: unknown[];
+}
+
+export type LayerswapSwapStatus =
+    | 'user_transfer_pending'
+    | 'ls_transfer_pending'
+    | 'completed'
+    | 'failed'
+    | 'refund_pending'
+    | 'refunded';
+
+export interface LayerswapSwap {
+    id: string;
+    created_date: string;
+    source_network: LayerswapNetwork;
+    source_token: LayerswapToken;
+    destination_network: LayerswapNetwork;
+    destination_token: LayerswapToken;
+    requested_amount: number;
+    destination_address: string;
+    status: LayerswapSwapStatus | string;
+    fail_reason: string | null;
+    use_deposit_address: boolean;
+    metadata: Record<string, unknown>;
+    transactions: unknown[];
+}
+
+export interface LayerswapQuote {
+    source_network: LayerswapNetwork;
+    source_token: LayerswapToken;
+    destination_network: LayerswapNetwork;
+    destination_token: LayerswapToken;
+    requested_amount: number;
+    receive_amount: number;
+    fee_discount: number;
+    min_receive_amount: number;
+    blockchain_fee: number;
+    service_fee: number;
+    avg_completion_time: string;
+    refuel_in_source: number;
+    slippage: number;
+    rate: number;
+    total_fee: number;
+    total_fee_in_usd: number;
+}
+
+export interface LayerswapSwapData {
+    deposit_actions: LayerswapDepositAction[];
+    swap: LayerswapSwap;
+    quote: LayerswapQuote;
+    refuel: unknown | null;
+    reward: unknown | null;
+}
+
+export interface LayerswapCreateSwapResponse {
+    data: LayerswapSwapData;
+}
+
+export interface LayerswapGetSwapResponse {
+    data: LayerswapSwapData;
+}
+
+export interface LayerswapErrorResponse {
+    error: {
+        code?: string;
+        message: string;
+        [key: string]: unknown;
+    };
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/layerswap/utils.ts b/packages/walletkit/src/defi/crypto-onramp/layerswap/utils.ts
new file mode 100644
index 000000000..d7d85f9d8
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/layerswap/utils.ts
@@ -0,0 +1,87 @@
+/**
+ * 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 { CryptoOnrampStatus } from '../../../api/models';
+import type { LayerswapErrorResponse, LayerswapSwapStatus } from './types';
+
+const EVM_ADDRESS_REGEX = /^(0x)?[0-9a-fA-F]{40}$/;
+
+export const ARBITRUM_CAIP2 = 'eip155:42161';
+export const ARBITRUM_USDT0_ADDRESS = '0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9';
+export const TON_USDT_ADDRESS = 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs';
+
+export const LAYERSWAP_SOURCE_NETWORK = 'ARBITRUM_MAINNET';
+export const LAYERSWAP_SOURCE_TOKEN = 'USDT0';
+export const LAYERSWAP_DESTINATION_NETWORK = 'TON_MAINNET';
+export const LAYERSWAP_DESTINATION_TOKEN = 'USDT';
+
+export const isEvmAddress = (address: string): boolean => {
+    return EVM_ADDRESS_REGEX.test(address);
+};
+
+export const isErrorResponse = (body: unknown): body is LayerswapErrorResponse => {
+    return (
+        typeof body === 'object' &&
+        body !== null &&
+        typeof (body as { error?: unknown }).error === 'object' &&
+        (body as { error: { message?: unknown } }).error !== null
+    );
+};
+
+export const mapStatus = (status: LayerswapSwapStatus | string): CryptoOnrampStatus => {
+    switch (status) {
+        case 'completed':
+        case 'user_payout_completed':
+        case 'payout_completed':
+            return 'success';
+        case 'user_transfer_pending':
+        case 'user_transfer_delayed':
+        case 'ls_transfer_pending':
+        case 'initiated':
+        case 'created':
+            return 'pending';
+        case 'expired':
+        case 'failed':
+        case 'cancelled':
+        case 'refunded':
+        case 'requires_refund':
+            return 'failed';
+        default:
+            return 'pending';
+    }
+};
+
+/**
+ * Format a base-units integer string into a decimal token-units string.
+ * e.g. formatBaseUnits('2000000', 6) === '2'
+ */
+export const formatBaseUnits = (base: string, decimals: number): string => {
+    if (!/^\d+$/.test(base)) {
+        throw new Error(`formatBaseUnits: not a non-negative integer string: "${base}"`);
+    }
+    if (decimals === 0) return base;
+    const padded = base.padStart(decimals + 1, '0');
+    const whole = padded.slice(0, padded.length - decimals);
+    const frac = padded.slice(padded.length - decimals).replace(/0+$/, '');
+    return frac.length > 0 ? `${whole}.${frac}` : whole;
+};
+
+/**
+ * Scale a decimal token-units string by 10^decimals and return the integer
+ * base-units string, truncating any excess fractional digits.
+ */
+export const parseBaseUnits = (value: number | string, decimals: number): string => {
+    const str = typeof value === 'number' ? value.toString() : value;
+    if (!/^\d+(\.\d+)?$/.test(str)) {
+        throw new Error(`parseBaseUnits: not a non-negative decimal: "${str}"`);
+    }
+    const [whole, frac = ''] = str.split('.');
+    const truncated = frac.slice(0, decimals).padEnd(decimals, '0');
+    const combined = `${whole}${truncated}`.replace(/^0+/, '');
+    return combined.length > 0 ? combined : '0';
+};
diff --git a/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
new file mode 100644
index 000000000..1adf4c6d5
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
@@ -0,0 +1,73 @@
+<!--
+This file is auto-generated. Do not edit manually.
+Changes will be overwritten when running the docs update script.
+Source template: template/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
+-->
+
+# Swaps.xyz Crypto Onramp Provider
+
+Swaps.xyz is a multi-chain bridge aggregator that routes crypto from a wide range of source networks and tokens into TON assets.
+
+For more information about supported chains and tokens, see the [official documentation](https://docs.swaps.xyz).
+
+## Quick Start
+
+```typescript
+import { createSwapsXyzProvider } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+kit.cryptoOnramp.registerProvider(
+    createSwapsXyzProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('swaps-xyz');
+```
+
+## Configuration
+
+```typescript
+interface SwapsXyzProviderConfig {
+    apiKey: string;          // API key issued by swaps.xyz
+    apiUrl?: string;         // Default: 'https://api-v2.swaps.xyz/api'
+    defaultSender?: string;  // Default EVM sender address used at quote time
+}
+```
+
+## Quote Options
+
+```typescript
+interface SwapsXyzQuoteOptions {
+    slippageBps?: number;    // Slippage tolerance in basis points (default: 100 = 1%)
+}
+```
+
+See [Crypto Onramp README](../README.md) for base `CryptoOnrampQuoteParams`.
+
+## Usage Example
+
+```typescript
+import type { SwapsXyzQuoteOptions } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+const quote = await kit.cryptoOnramp.getQuote<SwapsXyzQuoteOptions>({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceChain: 'eip155:42161',
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive tokens
+    providerOptions: {
+        slippageBps: 50, // 0.5%
+    },
+});
+
+const deposit = await kit.cryptoOnramp.createDeposit({
+    quote,
+    refundAddress: '0x...', // EVM address to refund if the bridge fails
+});
+
+// deposit.address — contract to approve + call on the source chain
+// deposit.amount  — amount to send (in source token base units)
+```
+
+## How It Works
+
+1. **`getQuote`** — calls the swaps.xyz `getAction` endpoint. The raw response is stored in `quote.metadata` so that `createDeposit` can avoid a second network round-trip when `refundAddress` matches the address used at quote time.
+2. **`createDeposit`** — if `refundAddress` differs from the address used at quote time (or if a placeholder was used), a fresh `getAction` call is made with the correct sender before returning the deposit details.
+3. **`getStatus`** — polls `getStatus` by `txId` and maps the provider status to the canonical `'pending' | 'success' | 'failed'` enum.
diff --git a/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/SwapsXyzCryptoOnrampProvider.ts b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/SwapsXyzCryptoOnrampProvider.ts
new file mode 100644
index 000000000..c8b474d1b
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/SwapsXyzCryptoOnrampProvider.ts
@@ -0,0 +1,291 @@
+/**
+ * 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 {
+    CryptoOnrampDeposit,
+    CryptoOnrampDepositParams,
+    CryptoOnrampQuote,
+    CryptoOnrampQuoteParams,
+    CryptoOnrampStatus,
+    CryptoOnrampStatusParams,
+} from '../../../api/models';
+import { Network } from '../../../api/models';
+import { CryptoOnrampProvider } from '../CryptoOnrampProvider';
+import { CryptoOnrampError } from '../errors';
+import { createProvider } from '../../../types/factory';
+import type { SwapsXyzGetActionResponse, SwapsXyzSwapDirection } from './types';
+import { evmChainIdToCaip2, isErrorResponse, isEvmAddress, mapStatus, parseEvmChainIdFromCaip2 } from './utils';
+
+const SWAPS_XYZ_API_URL = 'https://api-v2.swaps.xyz/api';
+const TON_CHAIN_ID = 999000337;
+const DEFAULT_SLIPPAGE_BPS = 100;
+const DEFAULT_SENDER = '0x0000000000000000000000000000000000000000';
+
+export interface SwapsXyzProviderConfig {
+    /**
+     * API key issued by swaps.xyz (passed as `x-api-key`)
+     */
+    apiKey: string;
+
+    /**
+     * Override the base API URL. Defaults to https://api-v2.swaps.xyz/api
+     */
+    apiUrl?: string;
+
+    /**
+     * EVM address used as `sender` on getAction requests. Required by the API
+     * even for deposit flows where the actual payer is unknown. Defaults to a
+     * null address when omitted.
+     */
+    defaultSender?: string;
+}
+
+export interface SwapsXyzQuoteOptions {
+    /**
+     * Slippage tolerance in basis points (0-10000). Defaults to 100 (1%).
+     */
+    slippageBps?: number;
+}
+
+/**
+ * Metadata stored on the CryptoOnrampQuote returned by this provider.
+ *
+ * The raw getAction response is kept here so that createDeposit can build a
+ * CryptoOnrampDeposit without an extra network round-trip.
+ */
+export interface SwapsXyzQuoteMetadata {
+    sender: string;
+    response: SwapsXyzGetActionResponse;
+}
+
+/**
+ * Provider implementation that routes crypto onramps through swaps.xyz.
+ *
+ * Supports EVM source chains only — quotes where the source chain's `vmId`
+ * is not `evm` are rejected (non-EVM chains require a separate registerTxs
+ * flow that we do not implement yet).
+ */
+export class SwapsXyzCryptoOnrampProvider extends CryptoOnrampProvider<SwapsXyzQuoteOptions, SwapsXyzQuoteMetadata> {
+    readonly providerId = 'swaps-xyz';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    getMetadata() {
+        return { name: 'Swaps.xyz', url: 'https://swaps.xyz', isRefundAddressRequired: true };
+    }
+
+    private readonly apiKey: string;
+    private readonly apiUrl: string;
+    private readonly defaultSender: string;
+
+    constructor(config: SwapsXyzProviderConfig) {
+        super();
+        this.apiKey = config.apiKey;
+        this.apiUrl = config.apiUrl ?? SWAPS_XYZ_API_URL;
+        this.defaultSender = config.defaultSender ?? DEFAULT_SENDER;
+    }
+
+    async getQuote(
+        params: CryptoOnrampQuoteParams<SwapsXyzQuoteOptions>,
+    ): Promise<CryptoOnrampQuote<SwapsXyzQuoteMetadata>> {
+        const sender = params.refundAddress ?? this.defaultSender;
+        const recipient = params.recipientAddress;
+
+        const srcChainId = parseEvmChainIdFromCaip2(params.sourceChain);
+        if (srcChainId === undefined) {
+            throw new CryptoOnrampError(
+                `SwapsXyz: sourceChain must be a CAIP-2 EVM chain (e.g. "eip155:1"), got "${params.sourceChain}"`,
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        const swapDirection: SwapsXyzSwapDirection =
+            params.isSourceAmount === false ? 'exact-amount-out' : 'exact-amount-in';
+
+        if (!isEvmAddress(sender)) {
+            throw new CryptoOnrampError(
+                'SwapsXyz: senderAddress must be a valid EVM address (got "' + sender + '")',
+                CryptoOnrampError.INVALID_REFUND_ADDRESS,
+            );
+        }
+
+        const url = new URL(`${this.apiUrl}/getAction`);
+        url.searchParams.set('actionType', 'swap-action');
+        url.searchParams.set('sender', sender);
+        url.searchParams.set('srcChainId', String(srcChainId));
+        url.searchParams.set('srcToken', params.sourceCurrencyAddress);
+        url.searchParams.set('dstChainId', String(TON_CHAIN_ID));
+        url.searchParams.set('dstToken', params.targetCurrencyAddress);
+        url.searchParams.set('amount', params.amount);
+        url.searchParams.set('swapDirection', swapDirection);
+        url.searchParams.set('slippage', String(params.providerOptions?.slippageBps ?? DEFAULT_SLIPPAGE_BPS));
+        url.searchParams.set('recipient', recipient);
+        url.searchParams.set('returnDepositAddress', 'true');
+
+        let response: Response;
+        try {
+            response = await fetch(url.toString(), {
+                method: 'GET',
+                headers: { 'x-api-key': this.apiKey },
+            });
+        } catch (error) {
+            throw new CryptoOnrampError(
+                'SwapsXyz: network error while calling getAction',
+                CryptoOnrampError.QUOTE_FAILED,
+                error,
+            );
+        }
+
+        const body = (await response.json().catch(() => undefined)) as SwapsXyzGetActionResponse;
+
+        if (!response.ok || isErrorResponse(body)) {
+            const err = isErrorResponse(body) ? body.error : undefined;
+            throw new CryptoOnrampError(
+                err?.message ?? `SwapsXyz getAction failed (HTTP ${response.status})`,
+                err?.code ?? CryptoOnrampError.QUOTE_FAILED,
+                err ?? { status: response.status },
+            );
+        }
+
+        if (body.vmId !== 'evm') {
+            throw new CryptoOnrampError(
+                `SwapsXyz: only EVM source chains are supported (got vmId="${body.vmId}")`,
+                CryptoOnrampError.INVALID_PARAMS,
+                { vmId: body.vmId, srcChainId },
+            );
+        }
+
+        const metadata: SwapsXyzQuoteMetadata = { sender, response: body };
+
+        return {
+            sourceCurrencyAddress: params.sourceCurrencyAddress,
+            sourceChain: evmChainIdToCaip2(body.amountIn.chainId),
+            targetCurrencyAddress: params.targetCurrencyAddress,
+            sourceAmount: body.amountIn.amount,
+            targetAmount: body.amountOut.amount,
+            rate: String(body.exchangeRate),
+            recipientAddress: recipient,
+            providerId: this.providerId,
+            metadata,
+        };
+    }
+
+    async createDeposit(params: CryptoOnrampDepositParams<SwapsXyzQuoteMetadata>): Promise<CryptoOnrampDeposit> {
+        const metadata = params.quote.metadata;
+        if (!metadata?.response?.tx?.to) {
+            throw new CryptoOnrampError(
+                'SwapsXyz: quote metadata is missing — quote must be obtained from this provider',
+                CryptoOnrampError.INVALID_PARAMS,
+            );
+        }
+
+        const { response } = metadata;
+
+        const needsRefetch =
+            metadata.sender === this.defaultSender ||
+            (params.refundAddress !== undefined && params.refundAddress !== metadata.sender);
+
+        if (needsRefetch) {
+            if (!params.refundAddress) {
+                throw new CryptoOnrampError(
+                    'SwapsXyz: a refund address is required to create a deposit',
+                    CryptoOnrampError.REFUND_ADDRESS_REQUIRED,
+                );
+            }
+
+            if (!isEvmAddress(params.refundAddress)) {
+                throw new CryptoOnrampError(
+                    'SwapsXyz: senderAddress must be a valid EVM address (got "' + params.refundAddress + '")',
+                    CryptoOnrampError.INVALID_REFUND_ADDRESS,
+                );
+            }
+
+            const newQuote = await this.getQuote({
+                amount: params.quote.sourceAmount,
+                sourceCurrencyAddress: params.quote.sourceCurrencyAddress,
+                sourceChain: params.quote.sourceChain,
+                targetCurrencyAddress: params.quote.targetCurrencyAddress,
+                recipientAddress: params.quote.recipientAddress,
+                refundAddress: params.refundAddress,
+                isSourceAmount: true,
+            });
+            const newMetadata = newQuote.metadata;
+
+            if (!newMetadata) {
+                throw new CryptoOnrampError(
+                    'SwapsXyz: quote metadata is missing — quote must be obtained from this provider',
+                    CryptoOnrampError.INVALID_PARAMS,
+                );
+            }
+
+            return {
+                depositId: newMetadata.response.txId,
+                address: newMetadata.response.tx.to,
+                amount: newMetadata.response.amountIn.amount,
+                sourceCurrencyAddress: params.quote.sourceCurrencyAddress,
+                sourceChain: evmChainIdToCaip2(newMetadata.response.amountIn.chainId),
+                providerId: this.providerId,
+            };
+        }
+
+        return {
+            depositId: response.txId,
+            address: response.tx.to,
+            amount: response.amountIn.amount,
+            sourceCurrencyAddress: params.quote.sourceCurrencyAddress,
+            sourceChain: evmChainIdToCaip2(response.amountIn.chainId),
+            providerId: this.providerId,
+        };
+    }
+
+    async getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus> {
+        const url = new URL(`${this.apiUrl}/getStatus`);
+        url.searchParams.set('txId', params.depositId);
+
+        let response: Response;
+        try {
+            response = await fetch(url.toString(), {
+                method: 'GET',
+                headers: { 'x-api-key': this.apiKey },
+            });
+        } catch (error) {
+            throw new CryptoOnrampError(
+                'SwapsXyz: network error while fetching status',
+                CryptoOnrampError.PROVIDER_ERROR,
+                error,
+            );
+        }
+
+        const body = (await response.json().catch(() => undefined)) as { status: string };
+
+        if (!response.ok || isErrorResponse(body)) {
+            const err = isErrorResponse(body) ? body.error : undefined;
+
+            if (isErrorResponse(body) && err?.code === 'NOT_FOUND') {
+                return 'pending';
+            }
+
+            throw new CryptoOnrampError(
+                err?.message ?? `SwapsXyz getStatus failed (HTTP ${response.status})`,
+                err?.code ?? CryptoOnrampError.PROVIDER_ERROR,
+                err ?? { status: response.status },
+            );
+        }
+
+        return mapStatus(body.status);
+    }
+}
+
+/**
+ * Returns a `ProviderFactory` for `SwapsXyzCryptoOnrampProvider`.
+ * Pass to `providers: [createSwapsXyzProvider(config)]`.
+ */
+export const createSwapsXyzProvider = (config: SwapsXyzProviderConfig) =>
+    createProvider(() => new SwapsXyzCryptoOnrampProvider(config));
diff --git a/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/index.ts b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/index.ts
new file mode 100644
index 000000000..daf111aff
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/index.ts
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './SwapsXyzCryptoOnrampProvider';
+export type {
+    SwapsXyzVmId,
+    SwapsXyzSwapDirection,
+    SwapsXyzPayment,
+    SwapsXyzEvmTx,
+    SwapsXyzBridgeRouteStep,
+    SwapsXyzGetActionResponse,
+    SwapsXyzErrorResponse,
+} from './types';
diff --git a/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/types.ts b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/types.ts
new file mode 100644
index 000000000..1ecda04c4
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/types.ts
@@ -0,0 +1,85 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * VM type identifier returned by swaps.xyz. Matches `vmId` from /getChainList.
+ */
+export type SwapsXyzVmId = 'evm' | 'solana' | 'alt-vm' | 'hypercore';
+
+export type SwapsXyzSwapDirection = 'exact-amount-in' | 'exact-amount-out';
+
+/**
+ * Token / amount entry as returned by swaps.xyz (Payment object).
+ */
+export interface SwapsXyzPayment {
+    chainId: number;
+    address: string;
+    name: string;
+    symbol: string;
+    decimals: number;
+    isNative: boolean;
+    amount: string;
+    usdAmount: number;
+    logo: string | null;
+    swapsXyzCode: string;
+}
+
+export interface SwapsXyzEvmTx {
+    to: string;
+    toExtra: string | null;
+    value: string;
+    chainId: number;
+    chainKey: string;
+}
+
+export interface SwapsXyzBridgeRouteStep {
+    srcChainId: number;
+    dstChainId: number;
+    srcBridgeToken: string;
+    dstBridgeToken: string;
+    bridgeId: string;
+}
+
+/**
+ * Successful response of GET /api/getAction for actionType=swap-action.
+ *
+ * Non-exhaustive — only the fields we consume. `allRoutes` is an array of the
+ * same shape and is not typed here.
+ */
+export interface SwapsXyzGetActionResponse {
+    tx: SwapsXyzEvmTx;
+    txId: string;
+    vmId: SwapsXyzVmId;
+    amountIn: SwapsXyzPayment;
+    amountInMax: SwapsXyzPayment;
+    amountOut: SwapsXyzPayment;
+    amountOutMin: SwapsXyzPayment;
+    protocolFee: SwapsXyzPayment;
+    applicationFee: SwapsXyzPayment;
+    bridgeFee: SwapsXyzPayment;
+    bridgeIds: string[];
+    bridgeRoute: SwapsXyzBridgeRouteStep[];
+    exchangeRate: number;
+    estimatedTxTime: number;
+    estimatedPriceImpact: number;
+    requiresTokenApproval: boolean;
+    executionsType: 'DEFAULT' | 'GASLESS';
+}
+
+export interface SwapsXyzErrorResponse {
+    success: false;
+    error: {
+        code: string;
+        name: string;
+        message: string;
+        title: string;
+        statusCode: number;
+        details?: unknown;
+        timestamp: string;
+    };
+}
diff --git a/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/utils.ts b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/utils.ts
new file mode 100644
index 000000000..9c555dad4
--- /dev/null
+++ b/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/utils.ts
@@ -0,0 +1,57 @@
+/**
+ * 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 { CryptoOnrampStatus } from '../../../api/models';
+import { parseCaip2 } from '../caip2';
+import type { SwapsXyzErrorResponse } from './types';
+
+const EVM_ADDRESS_REGEX = /^(0x)?[0-9a-fA-F]{40}$/;
+
+/**
+ * Extract a numeric EVM chain id from a CAIP-2 string. Returns `undefined`
+ * for non-EVM (`namespace !== 'eip155'`) or malformed values.
+ */
+export const parseEvmChainIdFromCaip2 = (value: string): number | undefined => {
+    const parsed = parseCaip2(value);
+    if (!parsed || parsed.namespace !== 'eip155') return undefined;
+    const n = Number(parsed.reference);
+    return Number.isInteger(n) && n > 0 ? n : undefined;
+};
+
+/**
+ * Build the CAIP-2 representation for an EVM chain id.
+ */
+export const evmChainIdToCaip2 = (chainId: number | string): string => `eip155:${chainId}`;
+
+export const isErrorResponse = (body: unknown): body is SwapsXyzErrorResponse => {
+    return (
+        typeof body === 'object' &&
+        body !== null &&
+        (body as { success?: unknown }).success === false &&
+        typeof (body as { error?: unknown }).error === 'object'
+    );
+};
+
+export const mapStatus = (status: string): CryptoOnrampStatus => {
+    switch (status) {
+        case 'success':
+            return 'success';
+        case 'pending':
+            return 'pending';
+        case 'failed':
+        case 'requires refund':
+        case 'refunded':
+            return 'failed';
+        default:
+            return 'pending';
+    }
+};
+
+export const isEvmAddress = (address: string): boolean => {
+    return EVM_ADDRESS_REGEX.test(address);
+};
diff --git a/packages/walletkit/src/defi/index.ts b/packages/walletkit/src/defi/index.ts
new file mode 100644
index 000000000..29eea6c35
--- /dev/null
+++ b/packages/walletkit/src/defi/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './errors';
+export * from './DefiManager';
+export * from './swap';
+export * from './onramp';
+export * from './crypto-onramp';
diff --git a/packages/walletkit/src/defi/onramp/OnrampManager.ts b/packages/walletkit/src/defi/onramp/OnrampManager.ts
new file mode 100644
index 000000000..822f7fcf9
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/OnrampManager.ts
@@ -0,0 +1,131 @@
+/**
+ * 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 { OnrampAPI, OnrampProviderInterface } from '../../api/interfaces';
+import type { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../api/models';
+import { OnrampError } from './errors';
+import { globalLogger } from '../../core/Logger';
+import { DefiManager } from '../DefiManager';
+
+const log = globalLogger.createChild('OnrampManager');
+
+/**
+ * OnrampManager - manages onramp providers and delegates onramp operations
+ *
+ * Allows registration of multiple onramp providers and provides a unified API
+ * for fiat-to-crypto onramp operations. Providers can be switched dynamically.
+ */
+export class OnrampManager extends DefiManager<OnrampProviderInterface> implements OnrampAPI {
+    /**
+     * Get a quote for onramping fiat to crypto
+     * @param params - Quote parameters
+     * @param providerId - Optional provider name to use
+     * @returns Promise resolving to onramp quote
+     */
+    async getQuote<TProviderOptions = unknown>(
+        params: OnrampQuoteParams<TProviderOptions>,
+        providerId?: string,
+    ): Promise<OnrampQuote> {
+        const selectedProviderId = providerId || this.defaultProviderId;
+        log.debug('Getting onramp quote', {
+            fiatCurrency: params.fiatCurrency,
+            cryptoCurrency: params.cryptoCurrency,
+            amount: params.amount,
+            isFiatAmount: params.isFiatAmount,
+            providerId: selectedProviderId,
+        });
+
+        try {
+            const quote = await this.getProvider(selectedProviderId).getQuote(params);
+
+            log.debug('Received onramp quote', {
+                fiatAmount: quote.fiatAmount,
+                cryptoAmount: quote.cryptoAmount,
+                rate: quote.rate,
+            });
+
+            return quote;
+        } catch (error) {
+            log.error('Failed to get onramp quote', { error, params });
+            throw error;
+        }
+    }
+
+    /**
+     * Get quotes for onramping fiat to crypto from all registered providers
+     * @param params - Quote parameters
+     * @returns Promise resolving to an array of onramp quotes
+     */
+    async getQuotes<TProviderOptions = unknown>(params: OnrampQuoteParams<TProviderOptions>): Promise<OnrampQuote[]> {
+        log.debug('Getting onramp quotes from all providers', {
+            fiatCurrency: params.fiatCurrency,
+            cryptoCurrency: params.cryptoCurrency,
+            amount: params.amount,
+            isFiatAmount: params.isFiatAmount,
+        });
+
+        const providers = this.getProviders();
+
+        // Execute all getQuote requests concurrently
+        const results = await Promise.allSettled(
+            providers.map((provider: OnrampProviderInterface) => provider.getQuote(params)),
+        );
+
+        const quotes: OnrampQuote[] = [];
+
+        results.forEach((result: PromiseSettledResult<OnrampQuote>, index: number) => {
+            if (result.status === 'fulfilled') {
+                quotes.push(result.value);
+            } else {
+                log.debug(`Provider ${providers[index].providerId} failed to return a quote`, {
+                    error: result.reason,
+                    params,
+                });
+            }
+        });
+
+        log.debug(`Received ${quotes.length} onramp quotes`, {
+            successfulProviders: quotes.map((q) => q.providerId),
+        });
+
+        return quotes;
+    }
+
+    /**
+     * Build an onramp URL for redirecting the user to the provider
+     * @param params - Onramp parameters including quote
+     * @param providerId - Optional provider name to use
+     * @returns Promise resolving to a URL string
+     */
+    async buildOnrampUrl<TProviderOptions = unknown>(
+        params: OnrampParams<TProviderOptions>,
+        providerId?: string,
+    ): Promise<string> {
+        const selectedProviderId = providerId || params.quote?.providerId || this.defaultProviderId;
+
+        log.debug('Building onramp URL', {
+            providerId: selectedProviderId,
+            userAddress: params.userAddress,
+        });
+
+        try {
+            const url = await this.getProvider(selectedProviderId).buildOnrampUrl(params);
+
+            log.debug('Built onramp URL', { url: url.substring(0, 50) + '...' });
+
+            return url;
+        } catch (error) {
+            log.error('Failed to build onramp URL', { error, params });
+            throw error;
+        }
+    }
+
+    protected createError(message: string, code: string, details?: unknown): OnrampError {
+        return new OnrampError(message, code, details);
+    }
+}
diff --git a/packages/walletkit/src/defi/onramp/OnrampProvider.ts b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
new file mode 100644
index 000000000..320e4da0e
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
@@ -0,0 +1,52 @@
+/**
+ * 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 { Network, OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../api/models';
+import type { OnrampProviderInterface } from '../../api/interfaces';
+
+/**
+ * Abstract base class for onramp providers
+ *
+ * Provides a common interface for implementing fiat-to-crypto onramp functionality
+ * across different gateways.
+ *
+ * @example
+ * ```typescript
+ * class MyOnrampProvider extends OnrampProvider {
+ *   async getQuote(params: OnrampQuoteParams): Promise<OnrampQuote> {
+ *     // Implementation
+ *   }
+ *
+ *   async buildOnrampUrl(params: OnrampParams): Promise<string> {
+ *     // Implementation
+ *   }
+ * }
+ * ```
+ */
+export abstract class OnrampProvider<
+    TQuoteOptions = undefined,
+    TOnrampOptions = undefined,
+> implements OnrampProviderInterface<TQuoteOptions, TOnrampOptions> {
+    readonly type = 'onramp';
+    abstract readonly providerId: string;
+    abstract getSupportedNetworks(): Network[];
+
+    /**
+     * Get a quote for onramping fiat to crypto
+     * @param params - Quote parameters including currencies and amount
+     * @returns Promise resolving to onramp quote with pricing information
+     */
+    abstract getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote>;
+
+    /**
+     * Build an onramp URL for redirecting the user to the provider
+     * @param params - Onramp parameters including quote and user address
+     * @returns Promise resolving to a URL string
+     */
+    abstract buildOnrampUrl(params: OnrampParams<TOnrampOptions>): Promise<string>;
+}
diff --git a/packages/walletkit/src/defi/onramp/errors.ts b/packages/walletkit/src/defi/onramp/errors.ts
new file mode 100644
index 000000000..337e919a7
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/errors.ts
@@ -0,0 +1,21 @@
+/**
+ * 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 { DefiError } from '../errors';
+
+export class OnrampError extends DefiError {
+    static readonly PROVIDER_ERROR = 'PROVIDER_ERROR';
+    static readonly InvalidParams = 'INVALID_ONRAMP_PARAMS';
+    static readonly QUOTE_FAILED = 'QUOTE_FAILED';
+    static readonly URL_BUILD_FAILED = 'URL_BUILD_FAILED';
+
+    constructor(message: string, code: string, details?: unknown) {
+        super(message, code, details);
+        this.name = 'OnrampError';
+    }
+}
diff --git a/packages/walletkit/src/defi/onramp/index.ts b/packages/walletkit/src/defi/onramp/index.ts
new file mode 100644
index 000000000..23e8f2bc3
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './errors';
+export * from './OnrampManager';
+export * from './OnrampProvider';
+export * from './moonpay';
+export * from './mercuryo';
diff --git a/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts b/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts
new file mode 100644
index 000000000..d18c9f15e
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts
@@ -0,0 +1,140 @@
+/**
+ * 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 { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../../api/models';
+import { Network } from '../../../api/models';
+import { OnrampProvider } from '../OnrampProvider';
+import { OnrampError } from '../errors';
+
+/**
+ * Custom options for Mercuryo requests
+ */
+export interface MercuryoQuoteOptions {
+    /**
+     * E.g. credit_card, bank_transfer. Limits the payment methods available.
+     * Often not strictly required by convert endpoint but can be passed.
+     */
+    paymentMethod?: string;
+}
+
+export interface MercuryoOnrampOptions {
+    /**
+     * E.g. The exact widget ID assigned by Mercuryo to the partner
+     */
+    widgetId?: string;
+
+    /**
+     * E.g. The user's email to pre-fill the widget
+     */
+    merchantUserEmail?: string;
+}
+
+/**
+ * Provider implementation for Mercuryo onramp
+ */
+export class MercuryoProvider extends OnrampProvider<MercuryoQuoteOptions, MercuryoOnrampOptions> {
+    readonly providerId = 'mercuryo';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    private readonly baseUrl = 'https://exchange.mercuryo.io/';
+    private readonly apiUrl = 'https://api.mercuryo.io/v1.6';
+
+    /**
+     * Optional default widget ID
+     */
+    private readonly widgetId?: string;
+
+    constructor(widgetId?: string) {
+        super();
+        this.widgetId = widgetId;
+    }
+
+    async getQuote(params: OnrampQuoteParams<MercuryoQuoteOptions>): Promise<OnrampQuote> {
+        try {
+            // Amount string validation
+            const amount = parseFloat(params.amount);
+            if (isNaN(amount) || amount <= 0) {
+                throw new Error('Invalid amount');
+            }
+
+            const url = new URL(`${this.apiUrl}/widget/buy/rate`);
+
+            url.searchParams.append('fiat_currency', params.fiatCurrency.toUpperCase());
+            url.searchParams.append('currency', params.cryptoCurrency.toUpperCase());
+            url.searchParams.append('amount', params.amount);
+
+            if (this.widgetId) {
+                url.searchParams.append('widget_id', this.widgetId);
+            }
+
+            if (params.providerOptions?.paymentMethod) {
+                url.searchParams.append('payment_method', params.providerOptions.paymentMethod);
+            }
+
+            const response = await fetch(url.toString());
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            if (!data.data) {
+                throw new Error('No quote data returned');
+            }
+
+            return {
+                fiatCurrency: params.fiatCurrency,
+                cryptoCurrency: params.cryptoCurrency,
+                fiatAmount: params.amount,
+                cryptoAmount: data.data.amount.toString(),
+                rate: data.data.rate.toString(),
+                fiatFee: data.data.fee ? data.data.fee.toString() : '0',
+                providerId: this.providerId,
+                metadata: data.data,
+            };
+        } catch (error) {
+            throw new OnrampError('Failed to get Mercuryo quote', OnrampError.QUOTE_FAILED, error);
+        }
+    }
+
+    async buildOnrampUrl(params: OnrampParams<MercuryoOnrampOptions>): Promise<string> {
+        try {
+            const url = new URL(this.baseUrl);
+            const activeWidgetId = params.providerOptions?.widgetId || this.widgetId;
+
+            if (activeWidgetId) {
+                url.searchParams.append('widget_id', activeWidgetId);
+            }
+
+            // Prefill with user address
+            if (params.userAddress) {
+                url.searchParams.append('address', params.userAddress);
+            }
+
+            if (params.providerOptions?.merchantUserEmail) {
+                url.searchParams.append('merchant_user_email', params.providerOptions.merchantUserEmail);
+            }
+
+            // Apply quote details
+            url.searchParams.append('fiat_currency', params.quote.fiatCurrency.toUpperCase());
+            url.searchParams.append('fiat_amount', params.quote.fiatAmount);
+            url.searchParams.append('currency', params.quote.cryptoCurrency.toUpperCase());
+
+            if (params.redirectUrl) {
+                url.searchParams.append('return_url', params.redirectUrl);
+            }
+
+            return url.toString();
+        } catch (error) {
+            throw new OnrampError('Failed to build Mercuryo URL', OnrampError.URL_BUILD_FAILED, error);
+        }
+    }
+}
diff --git a/packages/walletkit/src/defi/onramp/mercuryo/index.ts b/packages/walletkit/src/defi/onramp/mercuryo/index.ts
new file mode 100644
index 000000000..7e63c6a97
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/mercuryo/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './MercuryoProvider';
diff --git a/packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts b/packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts
new file mode 100644
index 000000000..b37714b81
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts
@@ -0,0 +1,122 @@
+/**
+ * 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 { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../../api/models';
+import { Network } from '../../../api/models';
+import { OnrampProvider } from '../OnrampProvider';
+import { OnrampError } from '../errors';
+
+/**
+ * Custom options for Moonpay requests
+ */
+export interface MoonpayQuoteOptions {
+    /**
+     * E.g. credit_card, google_pay, apple_pay. Limits the payment methods available.
+     */
+    paymentMethod?: string;
+}
+
+export interface MoonpayOnrampOptions {
+    /**
+     * E.g. dark or light color theme for the widget
+     */
+    theme?: 'dark' | 'light';
+}
+
+/**
+ * Provider implementation for Moonpay onramp
+ *
+ * Note: Moonpay relies heavily on widget redirects. Quotes are typically estimates
+ * and the final price is confirmed on the Moonpay widget.
+ */
+export class MoonpayProvider extends OnrampProvider<MoonpayQuoteOptions, MoonpayOnrampOptions> {
+    readonly providerId = 'moonpay';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    private readonly baseUrl = 'https://buy.moonpay.com';
+    private readonly apiUrl = 'https://api.moonpay.com';
+    private readonly apiKey: string;
+
+    constructor(apiKey: string) {
+        super();
+        if (!apiKey) {
+            throw new OnrampError('Moonpay API key is required', OnrampError.PROVIDER_ERROR);
+        }
+        this.apiKey = apiKey;
+    }
+
+    /**
+     * Note: Moonpay's public API for quotes often requires server-side integration heavily.
+     * Often, wallets just use the URL generator and let Moonpay show the quote in the widget.
+     * We provide a mocked/base implementation here, you may need a server-to-server
+     * call to Moonpay's API to get an accurate quote without the widget.
+     */
+    async getQuote(params: OnrampQuoteParams<MoonpayQuoteOptions>): Promise<OnrampQuote> {
+        try {
+            const url = new URL(`${this.apiUrl}/v3/currencies/${params.cryptoCurrency.toLowerCase()}/buy_quote`);
+            url.searchParams.append('apiKey', this.apiKey);
+            url.searchParams.append('baseCurrencyCode', params.fiatCurrency.toLowerCase());
+            url.searchParams.append('baseCurrencyAmount', params.amount);
+
+            if (params.providerOptions?.paymentMethod) {
+                url.searchParams.append('paymentMethod', params.providerOptions.paymentMethod);
+            }
+
+            const response = await fetch(url.toString());
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            return {
+                fiatCurrency: params.fiatCurrency,
+                cryptoCurrency: params.cryptoCurrency,
+                fiatAmount: params.amount,
+                cryptoAmount: data.quoteCurrencyAmount.toString(),
+                rate: data.quoteCurrencyPrice.toString(),
+                fiatFee: data.feeAmount.toString(),
+                networkFeeFiat: data.networkFeeAmount.toString(),
+                providerId: this.providerId,
+                metadata: data,
+            };
+        } catch (error) {
+            throw new OnrampError('Failed to get Moonpay quote', OnrampError.QUOTE_FAILED, error);
+        }
+    }
+
+    async buildOnrampUrl(params: OnrampParams<MoonpayOnrampOptions>): Promise<string> {
+        try {
+            const url = new URL(this.baseUrl);
+
+            url.searchParams.append('apiKey', this.apiKey);
+            url.searchParams.append('walletAddress', params.userAddress);
+
+            // Moonpay expects lowercase currency codes
+            url.searchParams.append('currencyCode', params.quote.cryptoCurrency.toLowerCase());
+            url.searchParams.append('baseCurrencyCode', params.quote.fiatCurrency.toLowerCase());
+            url.searchParams.append('baseCurrencyAmount', params.quote.fiatAmount);
+
+            // Apply specific provider options
+            if (params.providerOptions?.theme) {
+                url.searchParams.append('theme', params.providerOptions.theme);
+            }
+
+            if (params.redirectUrl) {
+                url.searchParams.append('redirectURL', params.redirectUrl);
+            }
+
+            return url.toString();
+        } catch (error) {
+            throw new OnrampError('Failed to build Moonpay URL', OnrampError.URL_BUILD_FAILED, error);
+        }
+    }
+}
diff --git a/packages/walletkit/src/defi/onramp/moonpay/index.ts b/packages/walletkit/src/defi/onramp/moonpay/index.ts
new file mode 100644
index 000000000..cd3eb5473
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/moonpay/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './MoonpayProvider';
diff --git a/packages/walletkit/src/defi/onramp/ton-pay/TonPayProvider.ts b/packages/walletkit/src/defi/onramp/ton-pay/TonPayProvider.ts
new file mode 100644
index 000000000..4b094eb44
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/ton-pay/TonPayProvider.ts
@@ -0,0 +1,123 @@
+/**
+ * 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 { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../../api/models';
+import { Network } from '../../../api/models';
+import { OnrampProvider } from '../OnrampProvider';
+import { OnrampError } from '../errors';
+
+/**
+ * Custom options for TonPay requests
+ */
+export interface TonPayQuoteOptions {
+    /**
+     * E.g. credit_card, google_pay, apple_pay. Limits the payment methods available.
+     */
+    paymentMethod?: string;
+}
+
+export interface TonPayOnrampOptions {
+    /**
+     * E.g. dark or light color theme for the widget
+     */
+    theme?: 'dark' | 'light';
+}
+
+/**
+ * Provider implementation for TonPay onramp (via pay.ton.org)
+ */
+export class TonPayProvider extends OnrampProvider<TonPayQuoteOptions, TonPayOnrampOptions> {
+    readonly providerId = 'ton-pay';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    private readonly apiUrl = 'https://pay.ton.org/api/merchant/v1/create-moonpay-transfer';
+    private readonly moonpayApiUrl = 'https://api.moonpay.com';
+
+    constructor() {
+        super();
+    }
+
+    /**
+     * TonPay currently acts as a gateway to Moonpay.
+     * We can fetch the quote directly from Moonpay's public API for estimation.
+     */
+    async getQuote(params: OnrampQuoteParams<TonPayQuoteOptions>): Promise<OnrampQuote> {
+        try {
+            const url = new URL(`${this.moonpayApiUrl}/v3/currencies/${params.cryptoCurrency.toLowerCase()}/buy_quote`);
+            url.searchParams.append('apiKey', 'pk_test_J3c52pXIbsTmzwUtYJKQEpKwxuGw8me');
+            url.searchParams.append('baseCurrencyCode', params.fiatCurrency.toLowerCase());
+            url.searchParams.append('baseCurrencyAmount', params.amount);
+
+            if (params.providerOptions?.paymentMethod) {
+                url.searchParams.append('paymentMethod', params.providerOptions.paymentMethod);
+            }
+
+            const response = await fetch(url.toString());
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            return {
+                fiatCurrency: params.fiatCurrency,
+                cryptoCurrency: params.cryptoCurrency,
+                fiatAmount: params.amount,
+                cryptoAmount: data.quoteCurrencyAmount.toString(),
+                rate: data.quoteCurrencyPrice.toString(),
+                fiatFee: data.feeAmount.toString(),
+                networkFeeFiat: data.networkFeeAmount.toString(),
+                providerId: this.providerId,
+                metadata: data,
+            };
+        } catch (error) {
+            throw new OnrampError('Failed to get TonPay quote', OnrampError.QUOTE_FAILED, error);
+        }
+    }
+
+    async buildOnrampUrl(params: OnrampParams<TonPayOnrampOptions>): Promise<string> {
+        try {
+            // Asset — USDT или TON
+            const asset = params.quote.cryptoCurrency.toUpperCase();
+
+            const body = {
+                asset: asset,
+                amount: parseFloat(params.quote.cryptoAmount),
+                recipientAddr: params.userAddress,
+                userIp: '103.86.37.0', // Standard IP placeholder or we could try to omit it
+                directTopUp: true,
+            };
+
+            const response = await fetch(this.apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(body),
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`API error: ${response.status} ${errorText}`);
+            }
+
+            const data = await response.json();
+
+            if (!data.link) {
+                throw new Error('API response missing redirect URL');
+            }
+
+            return data.link;
+        } catch (error) {
+            throw new OnrampError('Failed to build TonPay URL', OnrampError.URL_BUILD_FAILED, error);
+        }
+    }
+}
diff --git a/packages/walletkit/src/defi/onramp/ton-pay/index.ts b/packages/walletkit/src/defi/onramp/ton-pay/index.ts
new file mode 100644
index 000000000..af9aa20a1
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/ton-pay/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './TonPayProvider';
diff --git a/packages/walletkit/src/index.ts b/packages/walletkit/src/index.ts
index 1e04b9390..08e9a4558 100644
--- a/packages/walletkit/src/index.ts
+++ b/packages/walletkit/src/index.ts
@@ -22,6 +22,8 @@ export { JettonsManager } from './core/JettonsManager';
 export { DefiError } from './defi/errors';
 export { SwapManager, SwapProvider, SwapError } from './defi/swap';
 export { StakingManager, StakingProvider, StakingError, StakingErrorCode } from './defi/staking';
+export { OnrampManager, OnrampProvider, OnrampError } from './defi/onramp';
+export { CryptoOnrampManager, CryptoOnrampProvider, CryptoOnrampError } from './defi/crypto-onramp';
 export { EventEmitter } from './core/EventEmitter';
 export type { EventListener, EventPayload, KitEvent } from './core/EventEmitter';
 export type { SharedKitEvents } from './types/emitter';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53e7df18c..17e9def08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -673,6 +673,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@19.2.3)
       radix-ui:
         specifier: ^1.4.3
         version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -8231,6 +8234,11 @@ packages:
     resolution: {integrity: sha512-Uu7ii+FQy4Qf82G4xu7ShHhjhGahEpCWc3x8UavY3CTcWV+ufmmCtwkr7ZKsX42jdL0kr1B5FKUeqJvAn51jzQ==}
     hasBin: true
 
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   qrcode@1.5.4:
     resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
     engines: {node: '>=10.13.0'}
@@ -19008,6 +19016,10 @@ snapshots:
 
   qrcode-terminal@0.11.0: {}
 
+  qrcode.react@4.2.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   qrcode@1.5.4:
     dependencies:
       dijkstrajs: 1.0.3
diff --git a/template/packages/appkit-react/docs/hooks.md b/template/packages/appkit-react/docs/hooks.md
index 4699b2361..86cf2effb 100644
--- a/template/packages/appkit-react/docs/hooks.md
+++ b/template/packages/appkit-react/docs/hooks.md
@@ -194,6 +194,20 @@ Hook to get all registered swap providers. The returned array keeps a stable ref
 
 %%demo/examples/src/appkit/hooks/swap#USE_SWAP_PROVIDERS%%
 
+## Crypto Onramp
+
+### `useCryptoOnrampProvider`
+
+Hook to get a registered crypto-onramp provider by id, or the default one when no id is given.
+
+%%demo/examples/src/appkit/hooks/onramp#USE_CRYPTO_ONRAMP_PROVIDER%%
+
+### `useCryptoOnrampProviders`
+
+Hook to get all registered crypto-onramp providers.
+
+%%demo/examples/src/appkit/hooks/onramp#USE_CRYPTO_ONRAMP_PROVIDERS%%
+
 ## Staking
 
 ### `useStakingProviders`
diff --git a/template/packages/appkit/docs/actions.md b/template/packages/appkit/docs/actions.md
index 78fa64331..cf96cab61 100644
--- a/template/packages/appkit/docs/actions.md
+++ b/template/packages/appkit/docs/actions.md
@@ -208,6 +208,54 @@ Transfer a NFT to a recipient address.
 
 %%demo/examples/src/appkit/actions/nft#TRANSFER_NFT%%
 
+## Onramp
+
+### `getOnrampManager`
+
+Get the `OnrampManager` instance.
+
+### `getOnrampProvider`
+
+Get a specific onramp provider by its ID.
+
+### `getOnrampProviders`
+
+Get all registered onramp providers.
+
+### `watchOnrampProviders`
+
+Watch for new onramp providers registration.
+
+### `getOnrampQuote`
+
+Get an onramp quote from registered providers.
+
+%%demo/examples/src/appkit/actions/onramp#GET_ONRAMP_QUOTE%%
+
+### `buildOnrampUrl`
+
+Build an onramp URL for redirecting the user to the provider.
+
+%%demo/examples/src/appkit/actions/onramp#BUILD_ONRAMP_URL%%
+
+## Crypto Onramp
+
+### `getCryptoOnrampProvider`
+
+Get a registered crypto-onramp provider by id, or the default one when no id is given.
+
+%%demo/examples/src/appkit/actions/onramp#GET_CRYPTO_ONRAMP_PROVIDER%%
+
+### `getCryptoOnrampProviders`
+
+Get all registered crypto-onramp providers.
+
+%%demo/examples/src/appkit/actions/onramp#GET_CRYPTO_ONRAMP_PROVIDERS%%
+
+### `watchCryptoOnrampProviders`
+
+Watch for new crypto-onramp providers registration and default-provider changes.
+
 ## Providers
 
 ### `registerProvider`
diff --git a/template/packages/walletkit/src/defi/crypto-onramp/README.md b/template/packages/walletkit/src/defi/crypto-onramp/README.md
new file mode 100644
index 000000000..f6a0fd822
--- /dev/null
+++ b/template/packages/walletkit/src/defi/crypto-onramp/README.md
@@ -0,0 +1,182 @@
+---
+target: packages/walletkit/src/defi/crypto-onramp/README.md
+---
+
+# Crypto Onramp Manager
+
+CryptoOnrampManager provides a unified interface for bridging crypto assets from external chains into TON assets via third-party bridge providers.
+
+## Quick Start
+
+```typescript
+import { TonWalletKit, Network } from '@ton/walletkit';
+import { createSwapsXyzProvider } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+const kit = new TonWalletKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: { url: 'https://toncenter.com', key: 'optional-api-key' },
+        },
+    },
+});
+
+kit.cryptoOnramp.registerProvider(
+    createSwapsXyzProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('swaps-xyz');
+```
+
+## Quote Parameters
+
+All providers accept the same base parameters for `getQuote`:
+
+```typescript
+interface CryptoOnrampQuoteParams<TProviderOptions = unknown> {
+    amount: string;                     // Amount in base units (source or target, see isSourceAmount)
+    sourceCurrencyAddress: string;      // Source token contract address (or native zero address)
+    sourceNetwork: string;              // Source chain identifier
+    targetCurrencyAddress: string;      // Target TON token address
+    recipientAddress: string;           // TON address that will receive the target crypto
+    refundAddress?: string;             // Refund address on the source chain (required by some providers)
+    isSourceAmount?: boolean;           // true = spend `amount` source tokens, false = receive `amount` target tokens (default: true)
+    providerOptions?: TProviderOptions; // Provider-specific options (slippage, etc.)
+}
+```
+
+## Getting a Quote
+
+```typescript
+const quote = await kit.cryptoOnramp.getQuote({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceNetwork: '42161', // Arbitrum One chain ID
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive the bridged tokens
+});
+
+console.log('Source amount:', quote.sourceAmount);
+console.log('Target amount:', quote.targetAmount);
+console.log('Rate:', quote.rate);
+console.log('Recipient:', quote.recipientAddress);
+```
+
+## Creating a Deposit
+
+```typescript
+const deposit = await kit.cryptoOnramp.createDeposit({
+    quote,
+    refundAddress: '0x...', // EVM address to refund on failure (required by some providers)
+});
+
+console.log('Send to:', deposit.address);
+console.log('Amount:', deposit.amount);
+console.log('Deposit ID:', deposit.depositId);
+```
+
+## Checking Deposit Status
+
+```typescript
+const status = await kit.cryptoOnramp.getStatus({
+    depositId: deposit.depositId,
+});
+// status: 'pending' | 'success' | 'failed'
+```
+
+## Creating a Custom Provider
+
+Extend `CryptoOnrampProvider` to integrate a new bridge:
+
+```typescript
+import {
+    CryptoOnrampProvider,
+    type CryptoOnrampQuoteParams,
+    type CryptoOnrampQuote,
+    type CryptoOnrampDepositParams,
+    type CryptoOnrampDeposit,
+    type CryptoOnrampStatusParams,
+    type CryptoOnrampStatus,
+    type Network,
+} from '@ton/walletkit';
+
+interface MyQuoteOptions {
+    slippageBps?: number;
+}
+
+export class MyCryptoOnrampProvider extends CryptoOnrampProvider<MyQuoteOptions> {
+    readonly providerId = 'my-provider';
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    getMetadata() {
+        return { name: 'My Provider', url: 'https://my-provider.com', isRefundAddressRequired: true };
+    }
+
+    async getQuote(params: CryptoOnrampQuoteParams<MyQuoteOptions>): Promise<CryptoOnrampQuote> {
+        const { recipientAddress, sourceCurrencyAddress, targetCurrencyAddress } = params;
+        // Fetch quote from your bridge API...
+        return {
+            sourceCurrencyAddress,
+            sourceNetwork: params.sourceNetwork,
+            targetCurrencyAddress,
+            sourceAmount: '...',
+            targetAmount: '...',
+            rate: '...',
+            recipientAddress,
+            providerId: this.providerId,
+        };
+    }
+
+    async createDeposit(params: CryptoOnrampDepositParams): Promise<CryptoOnrampDeposit> {
+        // params.quote.recipientAddress holds the TON recipient set at quote time
+        return { depositId: '...', address: '0x...', amount: '...', sourceCurrencyAddress: '...', sourceNetwork: '...', providerId: this.providerId };
+    }
+
+    async getStatus(params: CryptoOnrampStatusParams): Promise<CryptoOnrampStatus> {
+        return 'pending';
+    }
+}
+```
+
+## Available Providers
+
+- **[Swaps.xyz](https://github.com/ton-connect/kit/blob/main/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md)**: Multi-chain bridge to TON via swaps.xyz, supporting a wide range of source networks and tokens
+- **[Layerswap](https://github.com/ton-connect/kit/blob/main/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md)**: Multi-chain bridge to TON via Layerswap
+
+## API Reference
+
+### CryptoOnrampManager
+
+#### `getQuote(params, providerId?)`
+Get a quote for a crypto-to-TON bridge operation.
+
+**Parameters:**
+- `params: CryptoOnrampQuoteParams<TProviderOptions>` – `sourceCurrencyAddress`, `sourceNetwork`, `targetCurrencyAddress`, `amount`, `recipientAddress`, `isSourceAmount?`, `refundAddress?`, `providerOptions?`
+- `providerId?: string` – Provider to use (uses default if omitted)
+
+**Returns:** `Promise<CryptoOnrampQuote>`
+
+#### `createDeposit(params, providerId?)`
+Create a deposit from a previously obtained quote. Returns the address the user must fund on the source chain.
+
+**Parameters:**
+- `params: CryptoOnrampDepositParams` – `quote`, `refundAddress`
+- `providerId?: string` – Resolved from `quote.providerId` when omitted
+
+**Returns:** `Promise<CryptoOnrampDeposit>`
+
+#### `getStatus(params, providerId?)`
+Poll the status of a deposit.
+
+**Parameters:**
+- `params: CryptoOnrampStatusParams` – `depositId`
+- `providerId?: string` – Provider to use (uses default if omitted)
+
+**Returns:** `Promise<CryptoOnrampStatus>` — `'pending' | 'success' | 'failed'`
+
+#### `registerProvider(provider)`
+Register a new crypto onramp provider (instance or factory).
+
+#### `setDefaultProvider(providerId)`
+Set the default provider for operations that do not specify one.
diff --git a/template/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md b/template/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
new file mode 100644
index 000000000..b30767329
--- /dev/null
+++ b/template/packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
@@ -0,0 +1,54 @@
+---
+target: packages/walletkit/src/defi/crypto-onramp/layerswap/README.md
+---
+
+# Layerswap Crypto Onramp Provider
+
+Layerswap is a multi-chain bridge that routes crypto assets from a wide range of source networks and tokens into TON assets.
+
+For more information about supported chains and tokens, see the [official documentation](https://docs.layerswap.io).
+
+## Quick Start
+
+```typescript
+import { createLayerswapProvider } from '@ton/walletkit/crypto-onramp/layerswap';
+
+kit.cryptoOnramp.registerProvider(
+    createLayerswapProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('layerswap');
+```
+
+## Configuration
+
+```typescript
+interface LayerswapProviderConfig {
+    apiKey?: string;   // Optional API key forwarded as X-LS-APIKEY
+    apiUrl?: string;   // Default: 'https://api.layerswap.io/api/v2'
+}
+```
+
+See [Crypto Onramp README](../README.md) for base `CryptoOnrampQuoteParams`. Layerswap does not define any additional provider-specific quote options.
+
+## Usage Example
+
+```typescript
+const quote = await kit.cryptoOnramp.getQuote({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceNetwork: '42161',
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive tokens
+});
+
+const deposit = await kit.cryptoOnramp.createDeposit({ quote });
+
+// deposit.address — address to send tokens to on the source chain
+// deposit.amount  — amount to send (in source token base units)
+```
+
+## How It Works
+
+1. **`getQuote`** — creates a Layerswap swap at quote time (POST `/swaps`) and caches the `swapId` and `depositAddress` in `quote.metadata`. No extra network call is needed at deposit time.
+2. **`createDeposit`** — reads `swapId` and `depositAddress` directly from `quote.metadata`. No `refundAddress` is required for Layerswap.
+3. **`getStatus`** — polls GET `/swaps/{swapId}` and maps the Layerswap status to the canonical `'pending' | 'success' | 'failed'` enum.
diff --git a/template/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md b/template/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
new file mode 100644
index 000000000..a16ed2b22
--- /dev/null
+++ b/template/packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
@@ -0,0 +1,71 @@
+---
+target: packages/walletkit/src/defi/crypto-onramp/swaps-xyz/README.md
+---
+
+# Swaps.xyz Crypto Onramp Provider
+
+Swaps.xyz is a multi-chain bridge aggregator that routes crypto from a wide range of source networks and tokens into TON assets.
+
+For more information about supported chains and tokens, see the [official documentation](https://docs.swaps.xyz).
+
+## Quick Start
+
+```typescript
+import { createSwapsXyzProvider } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+kit.cryptoOnramp.registerProvider(
+    createSwapsXyzProvider({ apiKey: 'your-api-key' }),
+);
+kit.cryptoOnramp.setDefaultProvider('swaps-xyz');
+```
+
+## Configuration
+
+```typescript
+interface SwapsXyzProviderConfig {
+    apiKey: string;          // API key issued by swaps.xyz
+    apiUrl?: string;         // Default: 'https://api-v2.swaps.xyz/api'
+    defaultSender?: string;  // Default EVM sender address used at quote time
+}
+```
+
+## Quote Options
+
+```typescript
+interface SwapsXyzQuoteOptions {
+    slippageBps?: number;    // Slippage tolerance in basis points (default: 100 = 1%)
+}
+```
+
+See [Crypto Onramp README](../README.md) for base `CryptoOnrampQuoteParams`.
+
+## Usage Example
+
+```typescript
+import type { SwapsXyzQuoteOptions } from '@ton/walletkit/crypto-onramp/swaps-xyz';
+
+const quote = await kit.cryptoOnramp.getQuote<SwapsXyzQuoteOptions>({
+    sourceCurrencyAddress: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', // USDT on Arbitrum
+    sourceNetwork: '42161',
+    targetCurrencyAddress: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', // USDT on TON
+    amount: '1000000', // 1 USDT (6 decimals)
+    recipientAddress: 'UQ...', // TON address to receive tokens
+    providerOptions: {
+        slippageBps: 50, // 0.5%
+    },
+});
+
+const deposit = await kit.cryptoOnramp.createDeposit({
+    quote,
+    refundAddress: '0x...', // EVM address to refund if the bridge fails
+});
+
+// deposit.address — contract to approve + call on the source chain
+// deposit.amount  — amount to send (in source token base units)
+```
+
+## How It Works
+
+1. **`getQuote`** — calls the swaps.xyz `getAction` endpoint. The raw response is stored in `quote.metadata` so that `createDeposit` can avoid a second network round-trip when `refundAddress` matches the address used at quote time.
+2. **`createDeposit`** — if `refundAddress` differs from the address used at quote time (or if a placeholder was used), a fresh `getAction` call is made with the correct sender before returning the deposit details.
+3. **`getStatus`** — polls `getStatus` by `txId` and maps the provider status to the canonical `'pending' | 'success' | 'failed'` enum.