From 537cdce38001a4dfc5526e0b7c787656de741bd8 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Tue, 5 May 2026 18:35:36 +0400
Subject: [PATCH 1/4] feat(onramp): start integrating backend

---
 .../appkit/actions/onramp/build-onramp-url.ts |   7 +-
 ...t-onramp-quote.ts => get-onramp-quotes.ts} |  12 +-
 packages/appkit-react/.storybook/app-kit.ts   |   2 +
 .../features/onramp/hooks/use-onramp-quote.ts |  34 ---
 .../onramp/hooks/use-onramp-quotes.ts         |  34 +++
 .../onramp-widget-provider.tsx                |  96 ++++-----
 .../onramp-widget-ui/onramp-widget-ui.tsx     |   2 +-
 packages/appkit-react/src/locales/en.ts       |   1 +
 packages/appkit/docs/actions.md               |  13 +-
 packages/appkit/package.json                  |  14 +-
 packages/appkit/src/actions/index.ts          |   2 +-
 ...t-onramp-quote.ts => get-onramp-quotes.ts} |  16 +-
 .../src/onramp/appkit-onramp}/index.ts        |   2 +-
 packages/appkit/src/onramp/index.ts           |   8 +-
 packages/appkit/src/onramp/ton-pay/index.ts   |   9 -
 packages/appkit/src/queries/index.ts          |  16 +-
 .../src/queries/onramp/get-onramp-quote.ts    |  45 ----
 .../src/queries/onramp/get-onramp-quotes.ts   |  47 +++++
 packages/walletkit/package.json               |  14 +-
 .../walletkit/src/api/interfaces/OnrampAPI.ts |  20 +-
 packages/walletkit/src/api/models/index.ts    |   2 +
 .../src/api/models/onramp/OnrampFee.ts        |  18 ++
 .../src/api/models/onramp/OnrampQuote.ts      |  22 +-
 .../api/models/onramp/OnrampServiceInfo.ts    |  24 +++
 .../src/defi/onramp/OnrampManager.ts          |  59 ++----
 .../src/defi/onramp/OnrampProvider.ts         |  10 +-
 .../appkit-onramp/AppkitOnrampProvider.ts     | 195 ++++++++++++++++++
 .../src/defi/onramp/appkit-onramp/index.ts    |  11 +
 .../src/defi/onramp/appkit-onramp/types.ts    |  48 +++++
 .../src/defi/onramp/appkit-onramp/utils.ts    |  64 ++++++
 packages/walletkit/src/defi/onramp/errors.ts  |   1 +
 packages/walletkit/src/defi/onramp/index.ts   |   3 +-
 .../defi/onramp/mercuryo/MercuryoProvider.ts  | 140 -------------
 .../defi/onramp/moonpay/MoonpayProvider.ts    | 122 -----------
 .../src/defi/onramp/moonpay/index.ts          |   9 -
 .../src/defi/onramp/ton-pay/TonPayProvider.ts | 123 -----------
 .../src/defi/onramp/ton-pay/index.ts          |   9 -
 37 files changed, 597 insertions(+), 657 deletions(-)
 rename demo/examples/src/appkit/actions/onramp/{get-onramp-quote.ts => get-onramp-quotes.ts} (53%)
 delete mode 100644 packages/appkit-react/src/features/onramp/hooks/use-onramp-quote.ts
 create mode 100644 packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.ts
 rename packages/appkit/src/actions/onramp/{get-onramp-quote.ts => get-onramp-quotes.ts} (51%)
 rename packages/{walletkit/src/defi/onramp/mercuryo => appkit/src/onramp/appkit-onramp}/index.ts (75%)
 delete mode 100644 packages/appkit/src/onramp/ton-pay/index.ts
 delete mode 100644 packages/appkit/src/queries/onramp/get-onramp-quote.ts
 create mode 100644 packages/appkit/src/queries/onramp/get-onramp-quotes.ts
 create mode 100644 packages/walletkit/src/api/models/onramp/OnrampFee.ts
 create mode 100644 packages/walletkit/src/api/models/onramp/OnrampServiceInfo.ts
 create mode 100644 packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
 create mode 100644 packages/walletkit/src/defi/onramp/appkit-onramp/index.ts
 create mode 100644 packages/walletkit/src/defi/onramp/appkit-onramp/types.ts
 create mode 100644 packages/walletkit/src/defi/onramp/appkit-onramp/utils.ts
 delete mode 100644 packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts
 delete mode 100644 packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts
 delete mode 100644 packages/walletkit/src/defi/onramp/moonpay/index.ts
 delete mode 100644 packages/walletkit/src/defi/onramp/ton-pay/TonPayProvider.ts
 delete mode 100644 packages/walletkit/src/defi/onramp/ton-pay/index.ts

diff --git a/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts b/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts
index 184260bd6..063ead6e0 100644
--- a/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts
+++ b/demo/examples/src/appkit/actions/onramp/build-onramp-url.ts
@@ -7,16 +7,19 @@
  */
 
 import type { AppKit } from '@ton/appkit';
-import { buildOnrampUrl, getOnrampQuote } from '@ton/appkit/onramp';
+import { buildOnrampUrl, getOnrampQuotes } from '@ton/appkit/onramp';
 
 export const buildOnrampUrlExample = async (appKit: AppKit) => {
     // SAMPLE_START: BUILD_ONRAMP_URL
-    const quote = await getOnrampQuote(appKit, {
+    const quotes = await getOnrampQuotes(appKit, {
         fiatCurrency: 'USD',
         cryptoCurrency: 'TON',
         amount: '100',
     });
 
+    const [quote] = quotes;
+    if (!quote) throw new Error('No onramp quotes available');
+
     const url = await buildOnrampUrl(appKit, {
         quote,
         userAddress: 'UQ...wallet-address...',
diff --git a/demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts b/demo/examples/src/appkit/actions/onramp/get-onramp-quotes.ts
similarity index 53%
rename from demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts
rename to demo/examples/src/appkit/actions/onramp/get-onramp-quotes.ts
index 868cc30e4..654a59d8e 100644
--- a/demo/examples/src/appkit/actions/onramp/get-onramp-quote.ts
+++ b/demo/examples/src/appkit/actions/onramp/get-onramp-quotes.ts
@@ -7,16 +7,16 @@
  */
 
 import type { AppKit } from '@ton/appkit';
-import { getOnrampQuote } from '@ton/appkit/onramp';
+import { getOnrampQuotes } from '@ton/appkit/onramp';
 
-export const getOnrampQuoteExample = async (appKit: AppKit) => {
-    // SAMPLE_START: GET_ONRAMP_QUOTE
-    const quote = await getOnrampQuote(appKit, {
+export const getOnrampQuotesExample = async (appKit: AppKit) => {
+    // SAMPLE_START: GET_ONRAMP_QUOTES
+    const quotes = await getOnrampQuotes(appKit, {
         fiatCurrency: 'USD',
         cryptoCurrency: 'TON',
         amount: '100',
         isFiatAmount: true,
     });
-    console.log('Onramp Quote:', quote);
-    // SAMPLE_END: GET_ONRAMP_QUOTE
+    console.log('Onramp Quotes:', quotes);
+    // SAMPLE_END: GET_ONRAMP_QUOTES
 };
diff --git a/packages/appkit-react/.storybook/app-kit.ts b/packages/appkit-react/.storybook/app-kit.ts
index a875ed300..486cdd4ab 100644
--- a/packages/appkit-react/.storybook/app-kit.ts
+++ b/packages/appkit-react/.storybook/app-kit.ts
@@ -11,6 +11,7 @@ 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';
+import { createAppkitOnrampProvider } from '@ton/appkit/onramp/appkit-onramp';
 
 export const appKit = new AppKit({
     networks: {
@@ -40,5 +41,6 @@ export const appKit = new AppKit({
         createDeDustProvider(),
         createTonstakersProvider(),
         createLayerswapProvider(),
+        createAppkitOnrampProvider({ apiKey: 'ak_test_66546d3cebb69dc4397570d65aad14dd' }),
     ],
 });
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
deleted file mode 100644
index 5d8a5922d..000000000
--- a/packages/appkit-react/src/features/onramp/hooks/use-onramp-quote.ts
+++ /dev/null
@@ -1,34 +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.
- *
- */
-
-'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/hooks/use-onramp-quotes.ts b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.ts
new file mode 100644
index 000000000..55d414c07
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.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 { getOnrampQuotesQueryOptions } from '@ton/appkit/queries';
+import type { GetOnrampQuotesData, GetOnrampQuotesErrorType, GetOnrampQuotesQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseOnrampQuotesParameters<selectData = GetOnrampQuotesData> = GetOnrampQuotesQueryConfig<selectData>;
+
+export type UseOnrampQuotesReturnType<selectData = GetOnrampQuotesData> = UseQueryReturnType<
+    selectData,
+    GetOnrampQuotesErrorType
+>;
+
+/**
+ * Hook to get onramp quotes from all registered providers (results are flattened).
+ */
+export const useOnrampQuotes = <selectData = GetOnrampQuotesData>(
+    parameters: UseOnrampQuotesParameters<selectData> = {},
+): UseOnrampQuotesReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getOnrampQuotesQueryOptions(appKit, parameters));
+};
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
index 6b4e28977..47c761733 100644
--- 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
@@ -19,10 +19,8 @@ import type {
     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 { useOnrampQuotes } from '../../../hooks/use-onramp-quotes';
 import { useBuildOnrampUrl } from '../../../hooks/use-build-onramp-url';
 import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
 
@@ -143,78 +141,82 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
 
     const [amount, setAmount] = useState('');
     const [amountInputMode, setAmountInputMode] = useState<AmountInputMode>('currency');
+    const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(null);
 
-    // 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({
+    const {
+        data: quotes,
+        isLoading: isQuoteLoading,
+        error: quotesError,
+    } = useOnrampQuotes({
         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,
+            enabled: !!amount && !isNaN(parseFloat(amount)) && parseFloat(amount) > 0,
+            retry: false,
         },
     });
 
+    const providers = useMemo<OnrampWidgetProviderType[]>(
+        () =>
+            quotes?.map((q) => ({
+                id: q.serviceInfo?.id ?? q.providerId,
+                name: q.serviceInfo?.name ?? q.providerId,
+                description: q.serviceInfo?.paymentMethods?.join(', ') ?? '',
+                logo: q.serviceInfo?.lightLogo ?? '',
+            })) ?? [],
+        [quotes],
+    );
+
+    const selectedQuote = useMemo(() => {
+        if (!quotes || quotes.length === 0) return undefined;
+        if (selectedProvider) {
+            const match = quotes.find((q) => (q.serviceInfo?.id ?? q.providerId) === selectedProvider.id);
+            if (match) return match;
+        }
+        return quotes[0];
+    }, [quotes, selectedProvider]);
+
     const convertedAmount = useMemo(() => {
-        if (!quote) return '';
-        return amountInputMode === 'currency' ? quote.cryptoAmount : quote.fiatAmount;
-    }, [quote, amountInputMode]);
+        if (!selectedQuote) return '';
+        return amountInputMode === 'currency' ? selectedQuote.cryptoAmount : selectedQuote.fiatAmount;
+    }, [selectedQuote, amountInputMode]);
+
+    useEffect(() => {
+        if (selectedProvider && providers.find((p) => p.id === selectedProvider.id)) return;
+        setSelectedProvider(providers[0] ?? null);
+    }, [providers, selectedProvider]);
 
     const numericAmount = parseFloat(amount);
-    const error = !isNaN(numericAmount) && numericAmount > ERROR_THRESHOLD ? 'noQuotesFound' : undefined;
+    const error = useMemo<string | undefined>(() => {
+        if (quotesError) {
+            const code = (quotesError as { code?: string }).code;
+            return code === 'PAIR_NOT_SUPPORTED' ? 'pairNotSupported' : 'noQuotesFound';
+        }
+        if (!isNaN(numericAmount) && numericAmount > ERROR_THRESHOLD) return 'noQuotesFound';
+        return undefined;
+    }, [quotesError, numericAmount]);
     const canContinue =
-        amount !== '' && !isNaN(numericAmount) && numericAmount > 0 && !!quote && !error && !!selectedProvider;
+        amount !== '' && !isNaN(numericAmount) && numericAmount > 0 && !!selectedQuote && !error && !!selectedProvider;
 
     const { mutateAsync: buildUrl } = useBuildOnrampUrl();
     const wallets = useConnectedWallets();
     const activeWallet = wallets?.[0];
 
     const onContinue = useCallback(async () => {
-        if (!canContinue || !quote || !activeWallet || !selectedProvider) return;
+        if (!canContinue || !selectedQuote || !activeWallet) return;
 
         try {
             const url = await buildUrl({
-                quote,
+                quote: selectedQuote,
                 userAddress: activeWallet.getAddress(),
-                providerId: selectedProvider.id,
             });
             window.open(url, '_blank');
         } catch {
             // silently swallow — redirect is best-effort
         }
-    }, [canContinue, quote, activeWallet, selectedProvider, buildUrl]);
+    }, [canContinue, selectedQuote, activeWallet, buildUrl]);
 
     const onReset = useCallback(() => {
         setAmount('');
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
index dd501e681..8747f0672 100644
--- 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
@@ -106,7 +106,7 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
             <Button
                 variant="fill"
                 size="l"
-                disabled={!canContinue && !error}
+                disabled={!canContinue}
                 loading={isLoading}
                 onClick={handleContinue}
                 fullWidth
diff --git a/packages/appkit-react/src/locales/en.ts b/packages/appkit-react/src/locales/en.ts
index 7a1341942..c69e38ffe 100644
--- a/packages/appkit-react/src/locales/en.ts
+++ b/packages/appkit-react/src/locales/en.ts
@@ -145,6 +145,7 @@ export default {
         buyToken: 'Buy {{ symbol }}',
         forCurrency: 'for {{ symbol }}',
         noQuotesFound: 'No quotes found',
+        pairNotSupported: 'This currency pair is not supported',
         connectWallet: 'Connect a wallet to continue',
         tonPayError: 'Failed to start TonPay checkout',
         youGet: 'You get',
diff --git a/packages/appkit/docs/actions.md b/packages/appkit/docs/actions.md
index 5c2280b02..b4cad9f1a 100644
--- a/packages/appkit/docs/actions.md
+++ b/packages/appkit/docs/actions.md
@@ -456,18 +456,18 @@ Get all registered onramp providers.
 
 Watch for new onramp providers registration.
 
-### `getOnrampQuote`
+### `getOnrampQuotes`
 
-Get an onramp quote from registered providers.
+Get onramp quotes from all registered providers (results are flattened).
 
 ```ts
-const quote = await getOnrampQuote(appKit, {
+const quotes = await getOnrampQuotes(appKit, {
     fiatCurrency: 'USD',
     cryptoCurrency: 'TON',
     amount: '100',
     isFiatAmount: true,
 });
-console.log('Onramp Quote:', quote);
+console.log('Onramp Quotes:', quotes);
 ```
 
 ### `buildOnrampUrl`
@@ -475,12 +475,15 @@ console.log('Onramp Quote:', quote);
 Build an onramp URL for redirecting the user to the provider.
 
 ```ts
-const quote = await getOnrampQuote(appKit, {
+const quotes = await getOnrampQuotes(appKit, {
     fiatCurrency: 'USD',
     cryptoCurrency: 'TON',
     amount: '100',
 });
 
+const [quote] = quotes;
+if (!quote) throw new Error('No onramp quotes available');
+
 const url = await buildOnrampUrl(appKit, {
     quote,
     userAddress: 'UQ...wallet-address...',
diff --git a/packages/appkit/package.json b/packages/appkit/package.json
index 8ebf78da9..6c1f51cb6 100644
--- a/packages/appkit/package.json
+++ b/packages/appkit/package.json
@@ -71,14 +71,14 @@
         "default": "./dist/cjs/onramp/index.js"
       }
     },
-    "./onramp/ton-pay": {
+    "./onramp/appkit-onramp": {
       "import": {
-        "types": "./dist/esm/onramp/ton-pay/index.d.ts",
-        "default": "./dist/esm/onramp/ton-pay/index.js"
+        "types": "./dist/esm/onramp/appkit-onramp/index.d.ts",
+        "default": "./dist/esm/onramp/appkit-onramp/index.js"
       },
       "require": {
-        "types": "./dist/cjs/onramp/ton-pay/index.d.ts",
-        "default": "./dist/cjs/onramp/ton-pay/index.js"
+        "types": "./dist/cjs/onramp/appkit-onramp/index.d.ts",
+        "default": "./dist/cjs/onramp/appkit-onramp/index.js"
       }
     },
     "./crypto-onramp/swaps-xyz": {
@@ -119,8 +119,8 @@
       "onramp": [
         "./dist/esm/onramp/index.d.ts"
       ],
-      "onramp/ton-pay": [
-        "./dist/esm/onramp/ton-pay/index.d.ts"
+      "onramp/appkit-onramp": [
+        "./dist/esm/onramp/appkit-onramp/index.d.ts"
       ],
       "crypto-onramp/swaps-xyz": [
         "./dist/esm/crypto-onramp/swaps-xyz/index.d.ts"
diff --git a/packages/appkit/src/actions/index.ts b/packages/appkit/src/actions/index.ts
index b3ee61545..e1891694d 100644
--- a/packages/appkit/src/actions/index.ts
+++ b/packages/appkit/src/actions/index.ts
@@ -168,7 +168,7 @@ export {
 // 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 { GetOnrampQuotesOptions, GetOnrampQuotesReturnType } from './onramp/get-onramp-quotes';
 export type { WatchOnrampProvidersParameters, WatchOnrampProvidersReturnType } from './onramp/watch-onramp-providers';
 export type { BuildOnrampUrlOptions, BuildOnrampUrlReturnType } from './onramp/build-onramp-url';
 
diff --git a/packages/appkit/src/actions/onramp/get-onramp-quote.ts b/packages/appkit/src/actions/onramp/get-onramp-quotes.ts
similarity index 51%
rename from packages/appkit/src/actions/onramp/get-onramp-quote.ts
rename to packages/appkit/src/actions/onramp/get-onramp-quotes.ts
index 7a6b46908..971b9cf8a 100644
--- a/packages/appkit/src/actions/onramp/get-onramp-quote.ts
+++ b/packages/appkit/src/actions/onramp/get-onramp-quotes.ts
@@ -11,20 +11,18 @@ 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 GetOnrampQuotesOptions<T = unknown> = OnrampQuoteParams<T>;
 
-export type GetOnrampQuoteReturnType = Promise<OnrampQuote>;
+export type GetOnrampQuotesReturnType = Promise<OnrampQuote[]>;
 
 /**
- * Get onramp quote
+ * Get onramp quotes from all registered providers (results are flattened).
  */
-export const getOnrampQuote = async <T = unknown>(
+export const getOnrampQuotes = async <T = unknown>(
     appKit: AppKit,
-    options: GetOnrampQuoteOptions<T>,
-): GetOnrampQuoteReturnType => {
+    options: GetOnrampQuotesOptions<T>,
+): GetOnrampQuotesReturnType => {
     const network = resolveNetwork(appKit, options.network);
 
-    return appKit.onrampManager.getQuote({ ...options, network }, options.providerId);
+    return appKit.onrampManager.getQuotes({ ...options, network });
 };
diff --git a/packages/walletkit/src/defi/onramp/mercuryo/index.ts b/packages/appkit/src/onramp/appkit-onramp/index.ts
similarity index 75%
rename from packages/walletkit/src/defi/onramp/mercuryo/index.ts
rename to packages/appkit/src/onramp/appkit-onramp/index.ts
index 7e63c6a97..aad7335dd 100644
--- a/packages/walletkit/src/defi/onramp/mercuryo/index.ts
+++ b/packages/appkit/src/onramp/appkit-onramp/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './MercuryoProvider';
+export * from '@ton/walletkit/onramp/appkit-onramp';
diff --git a/packages/appkit/src/onramp/index.ts b/packages/appkit/src/onramp/index.ts
index bed681716..6e2eb6325 100644
--- a/packages/appkit/src/onramp/index.ts
+++ b/packages/appkit/src/onramp/index.ts
@@ -14,10 +14,10 @@ export {
 } 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';
+    getOnrampQuotes,
+    type GetOnrampQuotesOptions,
+    type GetOnrampQuotesReturnType,
+} from '../actions/onramp/get-onramp-quotes';
 export {
     watchOnrampProviders,
     type WatchOnrampProvidersParameters,
diff --git a/packages/appkit/src/onramp/ton-pay/index.ts b/packages/appkit/src/onramp/ton-pay/index.ts
deleted file mode 100644
index 9e00e7bca..000000000
--- a/packages/appkit/src/onramp/ton-pay/index.ts
+++ /dev/null
@@ -1,9 +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.
- *
- */
-
-export * from '@ton/walletkit/onramp/ton-pay';
diff --git a/packages/appkit/src/queries/index.ts b/packages/appkit/src/queries/index.ts
index f3a487a3f..e3c559cb9 100644
--- a/packages/appkit/src/queries/index.ts
+++ b/packages/appkit/src/queries/index.ts
@@ -194,14 +194,14 @@ export {
 
 // Onramp
 export {
-    getOnrampQuoteQueryOptions,
-    type GetOnrampQuoteQueryConfig,
-    type GetOnrampQuoteQueryOptions,
-    type GetOnrampQuoteData,
-    type GetOnrampQuoteErrorType,
-    type GetOnrampQuoteQueryFnData,
-    type GetOnrampQuoteQueryKey,
-} from './onramp/get-onramp-quote';
+    getOnrampQuotesQueryOptions,
+    type GetOnrampQuotesQueryConfig,
+    type GetOnrampQuotesQueryOptions,
+    type GetOnrampQuotesData,
+    type GetOnrampQuotesErrorType,
+    type GetOnrampQuotesQueryFnData,
+    type GetOnrampQuotesQueryKey,
+} from './onramp/get-onramp-quotes';
 export {
     buildOnrampUrlMutationOptions,
     type BuildOnrampUrlMutationOptions,
diff --git a/packages/appkit/src/queries/onramp/get-onramp-quote.ts b/packages/appkit/src/queries/onramp/get-onramp-quote.ts
deleted file mode 100644
index 3a82c06c1..000000000
--- a/packages/appkit/src/queries/onramp/get-onramp-quote.ts
+++ /dev/null
@@ -1,45 +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 { 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/queries/onramp/get-onramp-quotes.ts b/packages/appkit/src/queries/onramp/get-onramp-quotes.ts
new file mode 100644
index 000000000..3f235bdc2
--- /dev/null
+++ b/packages/appkit/src/queries/onramp/get-onramp-quotes.ts
@@ -0,0 +1,47 @@
+/**
+ * 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 { getOnrampQuotes } from '../../actions/onramp/get-onramp-quotes';
+import type { GetOnrampQuotesOptions, GetOnrampQuotesReturnType } from '../../actions/onramp/get-onramp-quotes';
+import type { QueryOptions, QueryParameter } from '../../types/query';
+import type { Compute, ExactPartial } from '../../types/utils';
+import { filterQueryOptions } from '../../utils';
+
+export type GetOnrampQuotesErrorType = Error;
+export type GetOnrampQuotesData = GetOnrampQuotesQueryFnData;
+export type GetOnrampQuotesQueryConfig<selectData = GetOnrampQuotesData> = Compute<
+    ExactPartial<GetOnrampQuotesOptions>
+> &
+    QueryParameter<GetOnrampQuotesQueryFnData, GetOnrampQuotesErrorType, selectData, GetOnrampQuotesQueryKey>;
+
+export const getOnrampQuotesQueryOptions = <selectData = GetOnrampQuotesData>(
+    appKit: AppKit,
+    options: GetOnrampQuotesQueryConfig<selectData> = {},
+): GetOnrampQuotesQueryOptions<selectData> => {
+    return {
+        ...options.query,
+        queryFn: async (context) => {
+            const [, parameters] = context.queryKey as [string, GetOnrampQuotesOptions];
+            return getOnrampQuotes(appKit, parameters);
+        },
+        queryKey: getOnrampQuotesQueryKey(options),
+    };
+};
+
+export type GetOnrampQuotesQueryFnData = Compute<Awaited<GetOnrampQuotesReturnType>>;
+export const getOnrampQuotesQueryKey = (
+    options: Compute<ExactPartial<GetOnrampQuotesOptions>> = {},
+): GetOnrampQuotesQueryKey => ['onramp-quotes', filterQueryOptions(options)] as const;
+export type GetOnrampQuotesQueryKey = readonly ['onramp-quotes', Compute<ExactPartial<GetOnrampQuotesOptions>>];
+export type GetOnrampQuotesQueryOptions<selectData = GetOnrampQuotesData> = QueryOptions<
+    GetOnrampQuotesQueryFnData,
+    GetOnrampQuotesErrorType,
+    selectData,
+    GetOnrampQuotesQueryKey
+>;
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
index b40e78c1b..9cc8b52c6 100644
--- a/packages/walletkit/package.json
+++ b/packages/walletkit/package.json
@@ -61,14 +61,14 @@
         "default": "./dist/cjs/defi/staking/tonstakers/index.js"
       }
     },
-    "./onramp/ton-pay": {
+    "./onramp/appkit-onramp": {
       "import": {
-        "types": "./dist/esm/defi/onramp/ton-pay/index.d.ts",
-        "default": "./dist/esm/defi/onramp/ton-pay/index.js"
+        "types": "./dist/esm/defi/onramp/appkit-onramp/index.d.ts",
+        "default": "./dist/esm/defi/onramp/appkit-onramp/index.js"
       },
       "require": {
-        "types": "./dist/cjs/defi/onramp/ton-pay/index.d.ts",
-        "default": "./dist/cjs/defi/onramp/ton-pay/index.js"
+        "types": "./dist/cjs/defi/onramp/appkit-onramp/index.d.ts",
+        "default": "./dist/cjs/defi/onramp/appkit-onramp/index.js"
       }
     },
     "./crypto-onramp/swaps-xyz": {
@@ -106,8 +106,8 @@
       "staking/tonstakers": [
         "./dist/cjs/defi/staking/tonstakers/index.d.ts"
       ],
-      "onramp/ton-pay": [
-        "./dist/cjs/defi/onramp/ton-pay/index.d.ts"
+      "onramp/appkit-onramp": [
+        "./dist/cjs/defi/onramp/appkit-onramp/index.d.ts"
       ],
       "crypto-onramp/swaps-xyz": [
         "./dist/cjs/defi/crypto-onramp/swaps-xyz/index.d.ts"
diff --git a/packages/walletkit/src/api/interfaces/OnrampAPI.ts b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
index 390fb330a..71f98b811 100644
--- a/packages/walletkit/src/api/interfaces/OnrampAPI.ts
+++ b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
@@ -15,17 +15,10 @@ import type { DefiProvider } from './DefiProvider';
  */
 export interface OnrampAPI extends DefiManagerAPI<OnrampProviderInterface> {
     /**
-     * Get a quote for onramping fiat to crypto
+     * Get quotes for onramping fiat to crypto from all registered providers.
+     * Each provider may emit one or many quotes; results are flattened.
      * @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
+     * @returns A promise that resolves to a flat array of OnrampQuotes
      */
     getQuotes(params: OnrampQuoteParams): Promise<OnrampQuote[]>;
 
@@ -50,11 +43,12 @@ export interface OnrampProviderInterface<TQuoteOptions = unknown, TOnrampOptions
     readonly providerId: string;
 
     /**
-     * Get a quote for onramping fiat to crypto
+     * Get a quote (or quotes) for onramping fiat to crypto.
+     * Aggregating providers may return multiple quotes from a single call;
+     * single-source providers may return one quote directly.
      * @param params Quote parameters including provider-specific options
-     * @returns A promise that resolves to an OnrampQuote
      */
-    getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote>;
+    getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote | OnrampQuote[]>;
 
     /**
      * Build an onramp URL for redirecting the user to the provider
diff --git a/packages/walletkit/src/api/models/index.ts b/packages/walletkit/src/api/models/index.ts
index d24b66eee..9d61eb53d 100644
--- a/packages/walletkit/src/api/models/index.ts
+++ b/packages/walletkit/src/api/models/index.ts
@@ -96,7 +96,9 @@ export type { UnstakeModes } from './staking/UnstakeMode';
 export { UnstakeMode } from './staking/UnstakeMode';
 
 // Onramp models
+export type { OnrampFee, OnrampFeeType } from './onramp/OnrampFee';
 export type { OnrampParams } from './onramp/OnrampParams';
+export type { OnrampServiceInfo } from './onramp/OnrampServiceInfo';
 export type { OnrampQuote } from './onramp/OnrampQuote';
 export type { OnrampQuoteParams } from './onramp/OnrampQuoteParams';
 export type { OnrampLimits } from './onramp/OnrampLimits';
diff --git a/packages/walletkit/src/api/models/onramp/OnrampFee.ts b/packages/walletkit/src/api/models/onramp/OnrampFee.ts
new file mode 100644
index 000000000..bdeaece80
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampFee.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 type OnrampFeeType = 'service' | 'network' | 'processing';
+
+/**
+ * A single fee charged for an onramp transaction.
+ */
+export interface OnrampFee {
+    type: OnrampFeeType;
+    amount: string;
+    currency: string;
+}
diff --git a/packages/walletkit/src/api/models/onramp/OnrampQuote.ts b/packages/walletkit/src/api/models/onramp/OnrampQuote.ts
index 91e9b7245..e02b80250 100644
--- a/packages/walletkit/src/api/models/onramp/OnrampQuote.ts
+++ b/packages/walletkit/src/api/models/onramp/OnrampQuote.ts
@@ -6,10 +6,13 @@
  *
  */
 
+import type { OnrampFee } from './OnrampFee';
+import type { OnrampServiceInfo } from './OnrampServiceInfo';
+
 /**
  * Onramp quote response with pricing information
  */
-export interface OnrampQuote {
+export interface OnrampQuote<TMetadata = unknown> {
     /**
      * Fiat currency ticker (e.g. 'USD')
      */
@@ -36,22 +39,23 @@ export interface OnrampQuote {
     rate: string;
 
     /**
-     * Total fees charged for the transaction (in fiat currency)
+     * Fees charged for the transaction
      */
-    fiatFee?: string;
+    fees?: OnrampFee[];
 
     /**
-     * Network fee estimated (in fiat currency)
+     * Identifier of the registered onramp provider that produced the quote
      */
-    networkFeeFiat?: string;
+    providerId: string;
 
     /**
-     * Identifier of the onramp provider
+     * The underlying onramp service that will fulfill this quote
+     * (set by aggregating providers like AppkitOnramp).
      */
-    providerId: string;
+    serviceInfo?: OnrampServiceInfo;
 
     /**
-     * Provider-specific metadata for the quote
+     * Provider-specific metadata for the quote (e.g. raw response needed to execute)
      */
-    metadata?: unknown;
+    metadata?: TMetadata;
 }
diff --git a/packages/walletkit/src/api/models/onramp/OnrampServiceInfo.ts b/packages/walletkit/src/api/models/onramp/OnrampServiceInfo.ts
new file mode 100644
index 000000000..0ebed8ea7
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampServiceInfo.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.
+ *
+ */
+
+/**
+ * Static info describing an underlying fiat onramp service
+ * (e.g. MoonPay, Mercuryo) attached to a quote.
+ *
+ * Distinct from the SDK-level onramp provider: a single registered provider
+ * (e.g. AppkitOnramp) may surface quotes from many services.
+ */
+export interface OnrampServiceInfo {
+    id: string;
+    name: string;
+    url: string;
+    darkLogo: string;
+    lightLogo: string;
+    paymentMethods: string[];
+    supportUrl: string;
+}
diff --git a/packages/walletkit/src/defi/onramp/OnrampManager.ts b/packages/walletkit/src/defi/onramp/OnrampManager.ts
index 822f7fcf9..a9dadc6fb 100644
--- a/packages/walletkit/src/defi/onramp/OnrampManager.ts
+++ b/packages/walletkit/src/defi/onramp/OnrampManager.ts
@@ -22,44 +22,10 @@ const log = globalLogger.createChild('OnrampManager');
  */
 export class OnrampManager extends DefiManager<OnrampProviderInterface> implements OnrampAPI {
     /**
-     * Get a quote for onramping fiat to crypto
+     * Get quotes for onramping fiat to crypto from all registered providers.
+     * Each provider may return one quote or an array; results are flattened.
      * @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
+     * @returns Promise resolving to a flat array of onramp quotes
      */
     async getQuotes<TProviderOptions = unknown>(params: OnrampQuoteParams<TProviderOptions>): Promise<OnrampQuote[]> {
         log.debug('Getting onramp quotes from all providers', {
@@ -71,15 +37,19 @@ export class OnrampManager extends DefiManager<OnrampProviderInterface> implemen
 
         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) => {
+        results.forEach((result: PromiseSettledResult<OnrampQuote | OnrampQuote[]>, index: number) => {
             if (result.status === 'fulfilled') {
+                if (Array.isArray(result.value)) {
+                    quotes.push(...result.value);
+                    return;
+                }
+
                 quotes.push(result.value);
             } else {
                 log.debug(`Provider ${providers[index].providerId} failed to return a quote`, {
@@ -93,6 +63,17 @@ export class OnrampManager extends DefiManager<OnrampProviderInterface> implemen
             successfulProviders: quotes.map((q) => q.providerId),
         });
 
+        if (quotes.length === 0) {
+            throw new OnrampError(
+                `No onramp service supports ${params.fiatCurrency} → ${params.cryptoCurrency}`,
+                OnrampError.PAIR_NOT_SUPPORTED,
+                {
+                    fiatCurrency: params.fiatCurrency,
+                    cryptoCurrency: params.cryptoCurrency,
+                },
+            );
+        }
+
         return quotes;
     }
 
diff --git a/packages/walletkit/src/defi/onramp/OnrampProvider.ts b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
index 320e4da0e..415ca3368 100644
--- a/packages/walletkit/src/defi/onramp/OnrampProvider.ts
+++ b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
@@ -18,8 +18,8 @@ import type { OnrampProviderInterface } from '../../api/interfaces';
  * @example
  * ```typescript
  * class MyOnrampProvider extends OnrampProvider {
- *   async getQuote(params: OnrampQuoteParams): Promise<OnrampQuote> {
- *     // Implementation
+ *   async getQuote(params: OnrampQuoteParams): Promise<OnrampQuote | OnrampQuote[]> {
+ *     // Implementation — return one quote, or many if aggregating multiple sources
  *   }
  *
  *   async buildOnrampUrl(params: OnrampParams): Promise<string> {
@@ -37,11 +37,11 @@ export abstract class OnrampProvider<
     abstract getSupportedNetworks(): Network[];
 
     /**
-     * Get a quote for onramping fiat to crypto
+     * Get a quote (or quotes) for onramping fiat to crypto.
+     * Single-source providers may return one quote; aggregating providers may return many.
      * @param params - Quote parameters including currencies and amount
-     * @returns Promise resolving to onramp quote with pricing information
      */
-    abstract getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote>;
+    abstract getQuote(params: OnrampQuoteParams<TQuoteOptions>): Promise<OnrampQuote | OnrampQuote[]>;
 
     /**
      * Build an onramp URL for redirecting the user to the provider
diff --git a/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts b/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
new file mode 100644
index 000000000..f7cadc49d
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
@@ -0,0 +1,195 @@
+/**
+ * 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';
+import { createProvider } from '../../../types/factory';
+import { isAppkitOnrampBuildUrlResponse, isAppkitOnrampGetQuoteResponse } from './utils';
+
+const APPKIT_ONRAMP_PROVIDER_ID = 'appkit-onramp';
+const DEFAULT_BASE_URL = 'http://localhost:8090';
+const DEFAULT_NETWORK = 'TON';
+
+export interface AppkitOnrampProviderConfig {
+    /**
+     * Project API key issued by the AppKit Onramp backend (e.g. `ak_test_...`, `ak_live_...`).
+     * Sent as a Bearer token. Required.
+     */
+    apiKey: string;
+
+    /**
+     * Override the backend base URL. Defaults to `http://localhost:8090`.
+     */
+    baseUrl?: string;
+}
+
+/**
+ * Onramp provider that delegates to the AppKit Onramp backend.
+ *
+ * A single `getQuote` call returns quotes from every underlying onramp service
+ * the backend has configured (MoonPay, etc.). Each returned `OnrampQuote` carries
+ * `serviceInfo` describing the underlying service; `buildOnrampUrl` reads
+ * `serviceInfo.id` to forward the user's choice back to the backend.
+ *
+ * @example
+ * ```typescript
+ * import { createAppkitOnrampProvider } from '@ton/walletkit/onramp/appkit-onramp';
+ *
+ * kit.onrampManager.registerProvider(
+ *     createAppkitOnrampProvider({ apiKey: 'ak_test_...' }),
+ * );
+ * ```
+ */
+export class AppkitOnrampProvider extends OnrampProvider<undefined, undefined> {
+    readonly providerId = APPKIT_ONRAMP_PROVIDER_ID;
+
+    private readonly apiKey: string;
+    private readonly baseUrl: string;
+
+    constructor(config: AppkitOnrampProviderConfig) {
+        super();
+        if (!config.apiKey) {
+            throw new OnrampError('AppkitOnramp: apiKey is required', OnrampError.PROVIDER_ERROR);
+        }
+        this.apiKey = config.apiKey;
+        this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, '');
+    }
+
+    getSupportedNetworks(): Network[] {
+        return [Network.mainnet()];
+    }
+
+    async getQuote(params: OnrampQuoteParams<undefined>): Promise<OnrampQuote[]> {
+        const url = new URL(`${this.baseUrl}/onramp/get-quote`);
+        url.searchParams.set('amount', params.amount);
+        url.searchParams.set('fiatCurrency', params.fiatCurrency);
+        url.searchParams.set('cryptoCurrency', params.cryptoCurrency);
+        url.searchParams.set('network', DEFAULT_NETWORK);
+
+        let response: Response;
+        try {
+            response = await fetch(url.toString(), {
+                method: 'GET',
+                headers: { Authorization: `Bearer ${this.apiKey}` },
+            });
+        } catch (error) {
+            throw new OnrampError('AppkitOnramp: network error while fetching quotes', OnrampError.QUOTE_FAILED, error);
+        }
+
+        if (!response.ok) {
+            throw new OnrampError(`AppkitOnramp get-quote failed (HTTP ${response.status})`, OnrampError.QUOTE_FAILED, {
+                status: response.status,
+            });
+        }
+
+        let data: unknown;
+        try {
+            data = await response.json();
+        } catch (error) {
+            throw new OnrampError('AppkitOnramp: invalid JSON response', OnrampError.QUOTE_FAILED, error);
+        }
+
+        if (!isAppkitOnrampGetQuoteResponse(data)) {
+            throw new OnrampError('AppkitOnramp: unexpected get-quote response shape', OnrampError.QUOTE_FAILED, data);
+        }
+
+        return data.quotes.map((q) => ({
+            fiatCurrency: q.fiatCurrency,
+            cryptoCurrency: q.cryptoCurrency,
+            fiatAmount: q.fiatAmount,
+            cryptoAmount: q.cryptoAmount,
+            rate: q.rate,
+            fees: q.fees,
+            providerId: this.providerId,
+            serviceInfo: {
+                id: q.providerMetadata.providerId,
+                name: q.providerMetadata.name,
+                url: q.providerMetadata.url,
+                darkLogo: q.providerMetadata.darkLogo,
+                lightLogo: q.providerMetadata.lightLogo,
+                paymentMethods: q.providerMetadata.paymentMethods,
+                supportUrl: q.providerMetadata.supportUrl,
+            },
+            metadata: q.metadata,
+        }));
+    }
+
+    async buildOnrampUrl(params: OnrampParams<undefined>): Promise<string> {
+        const serviceId = params.quote.serviceInfo?.id;
+        if (!serviceId) {
+            throw new OnrampError(
+                'AppkitOnramp: quote is missing serviceInfo.id — quote must come from this provider',
+                OnrampError.URL_BUILD_FAILED,
+            );
+        }
+
+        const body: Record<string, string> = {
+            providerId: serviceId,
+            amount: params.quote.fiatAmount,
+            fiatCurrency: params.quote.fiatCurrency,
+            cryptoCurrency: params.quote.cryptoCurrency,
+            network: DEFAULT_NETWORK,
+            userAddress: params.userAddress,
+        };
+        if (params.redirectUrl) {
+            body.redirectUrl = params.redirectUrl;
+        }
+
+        let response: Response;
+        try {
+            response = await fetch(`${this.baseUrl}/onramp/build-url`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${this.apiKey}`,
+                },
+                body: JSON.stringify(body),
+            });
+        } catch (error) {
+            throw new OnrampError(
+                'AppkitOnramp: network error while building URL',
+                OnrampError.URL_BUILD_FAILED,
+                error,
+            );
+        }
+
+        if (!response.ok) {
+            throw new OnrampError(
+                `AppkitOnramp build-url failed (HTTP ${response.status})`,
+                OnrampError.URL_BUILD_FAILED,
+                { status: response.status },
+            );
+        }
+
+        let data: unknown;
+        try {
+            data = await response.json();
+        } catch (error) {
+            throw new OnrampError('AppkitOnramp: invalid JSON response', OnrampError.URL_BUILD_FAILED, error);
+        }
+
+        if (!isAppkitOnrampBuildUrlResponse(data)) {
+            throw new OnrampError(
+                'AppkitOnramp: unexpected build-url response shape',
+                OnrampError.URL_BUILD_FAILED,
+                data,
+            );
+        }
+
+        return data.url;
+    }
+}
+
+/**
+ * Returns a `ProviderFactory` for `AppkitOnrampProvider`.
+ * Pass to `providers: [createAppkitOnrampProvider(config)]`.
+ */
+export const createAppkitOnrampProvider = (config: AppkitOnrampProviderConfig) =>
+    createProvider(() => new AppkitOnrampProvider(config));
diff --git a/packages/walletkit/src/defi/onramp/appkit-onramp/index.ts b/packages/walletkit/src/defi/onramp/appkit-onramp/index.ts
new file mode 100644
index 000000000..ea86f5101
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/appkit-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 { AppkitOnrampProvider, createAppkitOnrampProvider } from './AppkitOnrampProvider';
+export type { AppkitOnrampProviderConfig } from './AppkitOnrampProvider';
+export type { AppkitOnrampQuote, AppkitOnrampGetQuoteResponse, AppkitOnrampBuildUrlResponse } from './types';
diff --git a/packages/walletkit/src/defi/onramp/appkit-onramp/types.ts b/packages/walletkit/src/defi/onramp/appkit-onramp/types.ts
new file mode 100644
index 000000000..d3f0575b3
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/appkit-onramp/types.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 { OnrampFee } from '../../../api/models';
+
+/**
+ * Service metadata as it appears on the wire — mirrors the backend's
+ * `ProviderMetadata` Go struct exactly. The `providerId` here is the
+ * underlying onramp service id (e.g. `'moonpay'`), not the SDK provider.
+ */
+export interface AppkitOnrampServiceMetadata {
+    providerId: string;
+    name: string;
+    url: string;
+    darkLogo: string;
+    lightLogo: string;
+    paymentMethods: string[];
+    supportUrl: string;
+}
+
+/**
+ * A quote element returned by the AppKit Onramp `/onramp/get-quote` endpoint.
+ * Mirrors the backend's `OnrampQuote` Go struct.
+ */
+export interface AppkitOnrampQuote {
+    fiatCurrency: string;
+    cryptoCurrency: string;
+    fiatAmount: string;
+    cryptoAmount: string;
+    rate: string;
+    fees: OnrampFee[];
+    providerMetadata: AppkitOnrampServiceMetadata;
+    metadata?: unknown;
+}
+
+export interface AppkitOnrampGetQuoteResponse {
+    quotes: AppkitOnrampQuote[];
+    providerIds: string[];
+}
+
+export interface AppkitOnrampBuildUrlResponse {
+    url: string;
+}
diff --git a/packages/walletkit/src/defi/onramp/appkit-onramp/utils.ts b/packages/walletkit/src/defi/onramp/appkit-onramp/utils.ts
new file mode 100644
index 000000000..d99e2e770
--- /dev/null
+++ b/packages/walletkit/src/defi/onramp/appkit-onramp/utils.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 type { OnrampFee } from '../../../api/models';
+import type {
+    AppkitOnrampBuildUrlResponse,
+    AppkitOnrampGetQuoteResponse,
+    AppkitOnrampQuote,
+    AppkitOnrampServiceMetadata,
+} from './types';
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const isStringArray = (value: unknown): value is string[] =>
+    Array.isArray(value) && value.every((item) => typeof item === 'string');
+
+const isOnrampFee = (value: unknown): value is OnrampFee => {
+    if (!isObject(value)) return false;
+    if (value.type !== 'service' && value.type !== 'network' && value.type !== 'processing') return false;
+    return typeof value.amount === 'string' && typeof value.currency === 'string';
+};
+
+const isAppkitOnrampServiceMetadata = (value: unknown): value is AppkitOnrampServiceMetadata => {
+    if (!isObject(value)) return false;
+    return (
+        typeof value.providerId === 'string' &&
+        typeof value.name === 'string' &&
+        typeof value.url === 'string' &&
+        typeof value.darkLogo === 'string' &&
+        typeof value.lightLogo === 'string' &&
+        isStringArray(value.paymentMethods) &&
+        typeof value.supportUrl === 'string'
+    );
+};
+
+const isAppkitOnrampQuote = (value: unknown): value is AppkitOnrampQuote => {
+    if (!isObject(value)) return false;
+    return (
+        typeof value.fiatCurrency === 'string' &&
+        typeof value.cryptoCurrency === 'string' &&
+        typeof value.fiatAmount === 'string' &&
+        typeof value.cryptoAmount === 'string' &&
+        typeof value.rate === 'string' &&
+        Array.isArray(value.fees) &&
+        value.fees.every(isOnrampFee) &&
+        isAppkitOnrampServiceMetadata(value.providerMetadata)
+    );
+};
+
+export const isAppkitOnrampGetQuoteResponse = (value: unknown): value is AppkitOnrampGetQuoteResponse => {
+    if (!isObject(value)) return false;
+    return Array.isArray(value.quotes) && value.quotes.every(isAppkitOnrampQuote) && isStringArray(value.providerIds);
+};
+
+export const isAppkitOnrampBuildUrlResponse = (value: unknown): value is AppkitOnrampBuildUrlResponse => {
+    if (!isObject(value)) return false;
+    return typeof value.url === 'string';
+};
diff --git a/packages/walletkit/src/defi/onramp/errors.ts b/packages/walletkit/src/defi/onramp/errors.ts
index 337e919a7..34c3484f9 100644
--- a/packages/walletkit/src/defi/onramp/errors.ts
+++ b/packages/walletkit/src/defi/onramp/errors.ts
@@ -13,6 +13,7 @@ export class OnrampError extends DefiError {
     static readonly InvalidParams = 'INVALID_ONRAMP_PARAMS';
     static readonly QUOTE_FAILED = 'QUOTE_FAILED';
     static readonly URL_BUILD_FAILED = 'URL_BUILD_FAILED';
+    static readonly PAIR_NOT_SUPPORTED = 'PAIR_NOT_SUPPORTED';
 
     constructor(message: string, code: string, details?: unknown) {
         super(message, code, details);
diff --git a/packages/walletkit/src/defi/onramp/index.ts b/packages/walletkit/src/defi/onramp/index.ts
index 23e8f2bc3..fb2788a54 100644
--- a/packages/walletkit/src/defi/onramp/index.ts
+++ b/packages/walletkit/src/defi/onramp/index.ts
@@ -9,5 +9,4 @@
 export * from './errors';
 export * from './OnrampManager';
 export * from './OnrampProvider';
-export * from './moonpay';
-export * from './mercuryo';
+export * from './appkit-onramp';
diff --git a/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts b/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts
deleted file mode 100644
index d18c9f15e..000000000
--- a/packages/walletkit/src/defi/onramp/mercuryo/MercuryoProvider.ts
+++ /dev/null
@@ -1,140 +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 { 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/moonpay/MoonpayProvider.ts b/packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts
deleted file mode 100644
index b37714b81..000000000
--- a/packages/walletkit/src/defi/onramp/moonpay/MoonpayProvider.ts
+++ /dev/null
@@ -1,122 +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 { 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
deleted file mode 100644
index cd3eb5473..000000000
--- a/packages/walletkit/src/defi/onramp/moonpay/index.ts
+++ /dev/null
@@ -1,9 +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.
- *
- */
-
-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
deleted file mode 100644
index 4b094eb44..000000000
--- a/packages/walletkit/src/defi/onramp/ton-pay/TonPayProvider.ts
+++ /dev/null
@@ -1,123 +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 { 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
deleted file mode 100644
index af9aa20a1..000000000
--- a/packages/walletkit/src/defi/onramp/ton-pay/index.ts
+++ /dev/null
@@ -1,9 +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.
- *
- */
-
-export * from './TonPayProvider';

From 0df00936f443e0dc0849e61f39a2c658efcff51c Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Tue, 5 May 2026 21:21:32 +0400
Subject: [PATCH 2/4] feat(onramp): add isReversedAmountSupported

---
 .../onramp-amount-reversed.tsx                |  8 +-
 .../crypto-onramp-info-block.stories.tsx      | 65 ++++++++++++++++
 .../crypto-onramp-info-block.tsx              | 78 +++++++++++++++++++
 .../crypto-onramp-info-block/index.ts         | 10 +++
 .../crypto-onramp-widget-ui.tsx               | 68 +++-------------
 .../fiat-onramp/onramp-info-block/index.ts    | 10 +++
 .../onramp-info-block.stories.tsx             | 54 +++++++++++++
 .../onramp-info-block/onramp-info-block.tsx   | 67 ++++++++++++++++
 .../onramp-info-block/use-onramp-balance.ts   | 38 +++++++++
 .../onramp-widget-provider.tsx                | 28 ++++++-
 .../onramp-widget-ui.module.css               |  4 +-
 .../onramp-widget-ui/onramp-widget-ui.tsx     | 22 +++++-
 packages/appkit-react/src/locales/en.ts       |  2 +-
 packages/appkit/src/onramp/index.ts           | 16 ++++
 .../walletkit/src/api/interfaces/OnrampAPI.ts |  7 +-
 packages/walletkit/src/api/models/index.ts    |  1 +
 .../models/onramp/OnrampProviderMetadata.ts   | 45 +++++++++++
 .../src/defi/onramp/OnrampProvider.ts         |  7 +-
 .../appkit-onramp/AppkitOnrampProvider.ts     |  8 ++
 19 files changed, 467 insertions(+), 71 deletions(-)
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.stories.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts
 create mode 100644 packages/walletkit/src/api/models/onramp/OnrampProviderMetadata.ts

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
index 92a08b10a..e46598daa 100644
--- 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
@@ -11,10 +11,8 @@ import type { FC } from 'react';
 import { AmountReversed } from '../../../../components/amount-reversed';
 import type { AmountReversedProps } from '../../../../components/amount-reversed';
 
-export interface OnrampAmountReversedProps extends Omit<AmountReversedProps, 'onChangeDirection'> {
-    onChangeDirection: () => void;
-}
+export type OnrampAmountReversedProps = AmountReversedProps;
 
-export const OnrampAmountReversed: FC<OnrampAmountReversedProps> = (props) => (
-    <AmountReversed {...props} decimals={2} />
+export const OnrampAmountReversed: FC<OnrampAmountReversedProps> = ({ decimals, ...props }) => (
+    <AmountReversed {...props} decimals={decimals ?? 2} />
 );
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.stories.tsx
new file mode 100644
index 000000000..b118555d2
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.stories.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 { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CryptoOnrampInfoBlock } from './crypto-onramp-info-block';
+import type { CryptoOnrampToken } from '../../../types';
+
+const TON_TOKEN: CryptoOnrampToken = {
+    id: 'ton',
+    symbol: 'TON',
+    name: 'Toncoin',
+    decimals: 9,
+    address: '0x0000000000000000000000000000000000000000',
+    logo: 'https://asset.ston.fi/img/EQDQoc5M3Bh8eWFephi9bClhevelbZZvWhkqdo80XuY_0qXv',
+};
+
+const meta: Meta<typeof CryptoOnrampInfoBlock> = {
+    title: 'Public/Features/Onramp/Internal/CryptoOnrampInfoBlock',
+    component: CryptoOnrampInfoBlock,
+};
+
+export default meta;
+type Story = StoryObj<typeof CryptoOnrampInfoBlock>;
+
+export const Default: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        tokenAmount: '12.345678',
+        isLoadingQuote: false,
+        isWalletConnected: true,
+        targetBalance: '100.5',
+        isLoadingTargetBalance: false,
+        quoteProviderName: 'Layerswap',
+    },
+};
+
+export const WalletDisconnected: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        tokenAmount: '12.345678',
+        isLoadingQuote: false,
+        isWalletConnected: false,
+        targetBalance: '',
+        isLoadingTargetBalance: false,
+        quoteProviderName: 'Layerswap',
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        tokenAmount: '0',
+        isLoadingQuote: true,
+        isWalletConnected: true,
+        targetBalance: '0',
+        isLoadingTargetBalance: true,
+        quoteProviderName: null,
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.tsx b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.tsx
new file mode 100644
index 000000000..30da55bf6
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/crypto-onramp-info-block.tsx
@@ -0,0 +1,78 @@
+/**
+ * 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 { InfoBlock } from '../../../../../components/info-block';
+import type { CryptoOnrampToken } from '../../../types';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import { formatOnrampAmount } from '../utils/format-onramp-amount';
+
+export interface CryptoOnrampInfoBlockProps {
+    selectedToken: CryptoOnrampToken | null;
+    /** Amount of the target token the user will receive (already resolved from input/converted). */
+    tokenAmount: string;
+    isLoadingQuote: boolean;
+    isWalletConnected: boolean;
+    targetBalance: string;
+    isLoadingTargetBalance: boolean;
+    quoteProviderName: string | null;
+    className?: string;
+}
+
+export const CryptoOnrampInfoBlock: FC<CryptoOnrampInfoBlockProps> = ({
+    selectedToken,
+    tokenAmount,
+    isLoadingQuote,
+    isWalletConnected,
+    targetBalance,
+    isLoadingTargetBalance,
+    quoteProviderName,
+    className,
+}) => {
+    const { t } = useI18n();
+
+    return (
+        <InfoBlock.Container className={className}>
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('cryptoOnramp.youGet')}</InfoBlock.Label>
+
+                {isLoadingQuote ? (
+                    <InfoBlock.ValueSkeleton />
+                ) : (
+                    <InfoBlock.Value>
+                        {formatOnrampAmount(tokenAmount, selectedToken?.decimals)} {selectedToken?.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>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/index.ts b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/index.ts
new file mode 100644
index 000000000..ddb923007
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/crypto-onramp/crypto-onramp-info-block/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 { CryptoOnrampInfoBlock } from './crypto-onramp-info-block';
+export type { CryptoOnrampInfoBlockProps } from './crypto-onramp-info-block';
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
index e09af2b4a..96be530ec 100644
--- 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
@@ -19,9 +19,8 @@ import { AmountReversed } from '../../../../../components/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/info-block';
+import { CryptoOnrampInfoBlock } from '../crypto-onramp-info-block';
 import type { CryptoOnrampContextType } from '../crypto-onramp-widget-provider';
-import { formatOnrampAmount } from '../utils/format-onramp-amount';
 import { useI18n } from '../../../../settings/hooks/use-i18n';
 import styles from './crypto-onramp-widget-ui.module.css';
 
@@ -150,61 +149,16 @@ export const CryptoOnrampWidgetUI: FC<CryptoOnrampWidgetRenderProps> = ({
                 {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>
+            <CryptoOnrampInfoBlock
+                className={styles.info}
+                selectedToken={selectedToken}
+                tokenAmount={amountInputMode === 'token' ? amount : convertedAmount}
+                isLoadingQuote={isLoadingQuote}
+                isWalletConnected={isWalletConnected}
+                targetBalance={targetBalance}
+                isLoadingTargetBalance={isLoadingTargetBalance}
+                quoteProviderName={quoteProviderName}
+            />
 
             <TokenSelectModal
                 open={isTokenSelectOpen}
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/index.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/index.ts
new file mode 100644
index 000000000..daafb19b9
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/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 { OnrampInfoBlock } from './onramp-info-block';
+export type { OnrampInfoBlockProps } from './onramp-info-block';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
new file mode 100644
index 000000000..558eee074
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
@@ -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 type { Meta, StoryObj } from '@storybook/react-vite';
+import { Network } from '@ton/appkit';
+
+import { OnrampInfoBlock } from './onramp-info-block';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const TON_TOKEN: AppkitUIToken = {
+    id: 'ton',
+    symbol: 'TON',
+    name: 'Toncoin',
+    decimals: 9,
+    address: 'ton',
+    logo: 'https://asset.ston.fi/img/EQDQoc5M3Bh8eWFephi9bClhevelbZZvWhkqdo80XuY_0qXv',
+    network: Network.mainnet(),
+};
+
+const meta: Meta<typeof OnrampInfoBlock> = {
+    title: 'Public/Features/Onramp/Internal/OnrampInfoBlock',
+    component: OnrampInfoBlock,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnrampInfoBlock>;
+
+export const Default: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        selectedQuote: {
+            fiatCurrency: 'USD',
+            cryptoCurrency: 'TON',
+            fiatAmount: '100',
+            cryptoAmount: '50.123456',
+            rate: '0.50123456',
+            providerId: 'appkit-onramp',
+        },
+        isLoading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        selectedQuote: undefined,
+        isLoading: true,
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
new file mode 100644
index 000000000..671abad25
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
@@ -0,0 +1,67 @@
+/**
+ * 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 type { OnrampQuote } from '@ton/appkit/onramp';
+
+import { InfoBlock } from '../../../../../components/info-block';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import { formatOnrampAmount } from '../../crypto-onramp/utils/format-onramp-amount';
+import { useOnrampBalance } from './use-onramp-balance';
+
+export interface OnrampInfoBlockProps {
+    selectedToken: AppkitUIToken | null;
+    selectedQuote?: OnrampQuote;
+    isLoading: boolean;
+    className?: string;
+}
+
+export const OnrampInfoBlock: FC<OnrampInfoBlockProps> = ({ selectedToken, selectedQuote, isLoading, className }) => {
+    const { t } = useI18n();
+
+    const wallets = useConnectedWallets();
+    const activeWallet = wallets?.[0];
+    const isWalletConnected = !!activeWallet;
+    const { targetBalance, isLoadingTargetBalance } = useOnrampBalance({
+        selectedToken,
+        userAddress: activeWallet?.getAddress(),
+    });
+
+    return (
+        <InfoBlock.Container className={className}>
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('onramp.youGet')}</InfoBlock.Label>
+
+                {isLoading ? (
+                    <InfoBlock.ValueSkeleton />
+                ) : (
+                    <InfoBlock.Value>
+                        {formatOnrampAmount(selectedQuote?.cryptoAmount, selectedToken?.decimals)}{' '}
+                        {selectedToken?.symbol}
+                    </InfoBlock.Value>
+                )}
+            </InfoBlock.Row>
+
+            {isWalletConnected && (
+                <InfoBlock.Row>
+                    <InfoBlock.Label>{t('onramp.yourBalance')}</InfoBlock.Label>
+
+                    {isLoadingTargetBalance ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>
+                            {formatOnrampAmount(targetBalance || '0', selectedToken?.decimals)} {selectedToken?.symbol}
+                        </InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>
+            )}
+        </InfoBlock.Container>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts
new file mode 100644
index 000000000..75f5fb243
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.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 { useBalance } from '../../../../balances/hooks/use-balance';
+import { useJettonBalanceByAddress } from '../../../../jettons/hooks/use-jetton-balance-by-address';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const NATIVE_TON_TOKEN_ADDRESS = 'ton';
+
+interface UseOnrampBalanceOptions {
+    selectedToken: AppkitUIToken | null;
+    userAddress: string | undefined;
+}
+
+export const useOnrampBalance = ({ selectedToken, userAddress }: UseOnrampBalanceOptions) => {
+    const isNativeTonTarget = selectedToken?.address === NATIVE_TON_TOKEN_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/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
index 47c761733..717a78671 100644
--- 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
@@ -8,6 +8,7 @@
 
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { FC, PropsWithChildren } from 'react';
+import type { OnrampQuote } from '@ton/appkit/onramp';
 
 import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
 import type { TokenSectionConfig } from '../../../../../components/token-select-modal';
@@ -21,12 +22,15 @@ import type {
 import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
 import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
 import { useOnrampQuotes } from '../../../hooks/use-onramp-quotes';
+import { useOnrampProviders } from '../../../hooks/use-onramp-providers';
 import { useBuildOnrampUrl } from '../../../hooks/use-build-onramp-url';
 import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
+import { useDebounceValue } from '../../../../../hooks/use-debounce-value';
 
 export type { AppkitUIToken };
 
 const ERROR_THRESHOLD = 10000000;
+const QUOTE_DEBOUNCE_MS = 500;
 
 export interface OnrampContextType {
     /** Full list of available tokens to buy */
@@ -66,6 +70,10 @@ export interface OnrampContextType {
     selectedProvider: OnrampWidgetProviderType | null;
     /** Select a provider */
     setSelectedProvider: (provider: OnrampWidgetProviderType) => void;
+    /** Quote tied to the currently selected provider */
+    selectedQuote?: OnrampQuote;
+    /** Whether the registered providers support reversed (crypto-amount) quotes */
+    isReversedAmountSupported: boolean;
 
     /** Whether amount is valid and user can proceed */
     canContinue: boolean;
@@ -97,6 +105,8 @@ const defaultContext: OnrampContextType = {
     providers: [],
     selectedProvider: null,
     setSelectedProvider: () => {},
+    selectedQuote: undefined,
+    isReversedAmountSupported: false,
     canContinue: false,
     error: undefined,
     isLoading: false,
@@ -143,6 +153,16 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
     const [amountInputMode, setAmountInputMode] = useState<AmountInputMode>('currency');
     const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(null);
 
+    const registeredProviders = useOnrampProviders();
+    const isReversedAmountSupported = useMemo(
+        () =>
+            registeredProviders.length > 0 &&
+            registeredProviders.every((p) => p.getMetadata().isReversedAmountSupported ?? true),
+        [registeredProviders],
+    );
+
+    const [amountDebounced] = useDebounceValue(amount, QUOTE_DEBOUNCE_MS);
+
     const {
         data: quotes,
         isLoading: isQuoteLoading,
@@ -150,10 +170,10 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
     } = useOnrampQuotes({
         fiatCurrency: selectedCurrency.code,
         cryptoCurrency: selectedToken?.symbol ?? 'TON',
-        amount: amount || '0',
+        amount: amountDebounced || '0',
         isFiatAmount: amountInputMode === 'currency',
         query: {
-            enabled: !!amount && !isNaN(parseFloat(amount)) && parseFloat(amount) > 0,
+            enabled: !!amountDebounced && !isNaN(parseFloat(amountDebounced)) && parseFloat(amountDebounced) > 0,
             retry: false,
         },
     });
@@ -242,6 +262,8 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
             providers,
             selectedProvider,
             setSelectedProvider,
+            selectedQuote,
+            isReversedAmountSupported,
             canContinue,
             error,
             isLoading: isQuoteLoading,
@@ -259,6 +281,8 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
             convertedAmount,
             providers,
             selectedProvider,
+            selectedQuote,
+            isReversedAmountSupported,
             canContinue,
             error,
             isQuoteLoading,
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
index d22284dd8..1d5dcc782 100644
--- 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
@@ -20,9 +20,9 @@
 }
 
 .presets {
-    margin-bottom: 24px;
+    margin-bottom: 16px;
 }
 
 .info {
-    margin-bottom: 24px;
+    margin-top: 16px;
 }
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
index 8747f0672..ab3af0692 100644
--- 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
@@ -17,6 +17,7 @@ import { AmountPresets } from '../../../../../components/amount-presets';
 import { TokenSelectModal } from '../../../../../components/token-select-modal';
 import { OnrampCurrencySelectModal } from '../../../components/onramp-currency-select-modal';
 import { OnrampProviderSelect } from '../../../components/onramp-provider-select';
+import { OnrampInfoBlock } from '../onramp-info-block';
 import styles from './onramp-widget-ui.module.css';
 import { OnrampAmountReversed } from '../../../components/onramp-amount-reversed';
 import type { OnrampProvider } from '../../../types';
@@ -40,6 +41,8 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
     convertedAmount,
     presetAmounts,
     providers,
+    selectedQuote,
+    isReversedAmountSupported,
     canContinue,
     error,
     isLoading,
@@ -90,9 +93,14 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
                 <OnrampAmountReversed
                     className={styles.converted}
                     value={convertedAmount}
-                    onChangeDirection={() => setAmountInputMode(amountInputMode === 'token' ? 'currency' : 'token')}
+                    onChangeDirection={
+                        isReversedAmountSupported
+                            ? () => setAmountInputMode(amountInputMode === 'token' ? 'currency' : 'token')
+                            : undefined
+                    }
                     ticker={amountInputMode === 'token' ? undefined : selectedToken?.symbol}
                     symbol={amountInputMode === 'token' ? selectedCurrency.symbol : undefined}
+                    decimals={amountInputMode === 'token' ? 2 : (selectedToken?.decimals ?? 0)}
                 />
             </div>
 
@@ -100,7 +108,10 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
                 className={styles.presets}
                 presets={presetAmounts}
                 currencySymbol={selectedCurrency.symbol}
-                onPresetSelect={setAmount}
+                onPresetSelect={(value) => {
+                    setAmountInputMode('currency');
+                    setAmount(value);
+                }}
             />
 
             <Button
@@ -114,6 +125,13 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
                 {error ? t(`onramp.${error}`) : t('onramp.continue')}
             </Button>
 
+            <OnrampInfoBlock
+                className={styles.info}
+                selectedToken={selectedToken}
+                selectedQuote={selectedQuote}
+                isLoading={isLoading}
+            />
+
             <TokenSelectModal
                 open={isTokenSelectOpen}
                 onClose={() => setIsTokenSelectOpen(false)}
diff --git a/packages/appkit-react/src/locales/en.ts b/packages/appkit-react/src/locales/en.ts
index c69e38ffe..b131c569f 100644
--- a/packages/appkit-react/src/locales/en.ts
+++ b/packages/appkit-react/src/locales/en.ts
@@ -149,7 +149,7 @@ export default {
         connectWallet: 'Connect a wallet to continue',
         tonPayError: 'Failed to start TonPay checkout',
         youGet: 'You get',
-        exchangeRate: 'Exchange rate',
+        yourBalance: 'Your balance',
     },
 
     // Staking
diff --git a/packages/appkit/src/onramp/index.ts b/packages/appkit/src/onramp/index.ts
index 6e2eb6325..cb6152dbd 100644
--- a/packages/appkit/src/onramp/index.ts
+++ b/packages/appkit/src/onramp/index.ts
@@ -7,6 +7,22 @@
  */
 
 // fiat-onramp: not ready — exported via sub-path to keep off main @ton/appkit API
+
+export { OnrampProvider, OnrampManager, OnrampError } from '@ton/walletkit';
+
+export type {
+    OnrampAPI,
+    OnrampProviderInterface,
+    OnrampProviderMetadata,
+    OnrampProviderMetadataOverride,
+    OnrampQuote,
+    OnrampQuoteParams,
+    OnrampParams,
+    OnrampServiceInfo,
+    OnrampFee,
+    OnrampFeeType,
+} from '@ton/walletkit';
+
 export {
     getOnrampProvider,
     type GetOnrampProviderOptions,
diff --git a/packages/walletkit/src/api/interfaces/OnrampAPI.ts b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
index 71f98b811..9287458bd 100644
--- a/packages/walletkit/src/api/interfaces/OnrampAPI.ts
+++ b/packages/walletkit/src/api/interfaces/OnrampAPI.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import type { OnrampParams, OnrampQuote, OnrampQuoteParams } from '../models';
+import type { OnrampParams, OnrampProviderMetadata, OnrampQuote, OnrampQuoteParams } from '../models';
 import type { DefiManagerAPI } from './DefiManagerAPI';
 import type { DefiProvider } from './DefiProvider';
 
@@ -42,6 +42,11 @@ export interface OnrampProviderInterface<TQuoteOptions = unknown, TOnrampOptions
      */
     readonly providerId: string;
 
+    /**
+     * Get static metadata for the provider (display name, logo, capability flags).
+     */
+    getMetadata(): OnrampProviderMetadata;
+
     /**
      * Get a quote (or quotes) for onramping fiat to crypto.
      * Aggregating providers may return multiple quotes from a single call;
diff --git a/packages/walletkit/src/api/models/index.ts b/packages/walletkit/src/api/models/index.ts
index 9d61eb53d..e6e09c10a 100644
--- a/packages/walletkit/src/api/models/index.ts
+++ b/packages/walletkit/src/api/models/index.ts
@@ -98,6 +98,7 @@ export { UnstakeMode } from './staking/UnstakeMode';
 // Onramp models
 export type { OnrampFee, OnrampFeeType } from './onramp/OnrampFee';
 export type { OnrampParams } from './onramp/OnrampParams';
+export type { OnrampProviderMetadata, OnrampProviderMetadataOverride } from './onramp/OnrampProviderMetadata';
 export type { OnrampServiceInfo } from './onramp/OnrampServiceInfo';
 export type { OnrampQuote } from './onramp/OnrampQuote';
 export type { OnrampQuoteParams } from './onramp/OnrampQuoteParams';
diff --git a/packages/walletkit/src/api/models/onramp/OnrampProviderMetadata.ts b/packages/walletkit/src/api/models/onramp/OnrampProviderMetadata.ts
new file mode 100644
index 000000000..22858afb4
--- /dev/null
+++ b/packages/walletkit/src/api/models/onramp/OnrampProviderMetadata.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.
+ *
+ */
+
+/**
+ * Static metadata for a registered onramp provider (SDK-level abstraction).
+ *
+ * Distinct from {@link OnrampServiceInfo}, which describes the underlying onramp
+ * service (e.g. MoonPay) attached to an individual quote.
+ */
+export interface OnrampProviderMetadata {
+    /**
+     * Human-readable provider name (e.g. 'AppKit Onramp')
+     */
+    name: string;
+
+    /**
+     * URL to the provider's logo image
+     */
+    logo?: string;
+
+    /**
+     * URL to the provider's website
+     */
+    url?: string;
+
+    /**
+     * Whether this provider supports reversed (crypto-amount) quotes.
+     * When false, the UI should hide the direction toggle and only allow fiat-amount input.
+     */
+    isReversedAmountSupported?: boolean;
+}
+
+/**
+ * Used in provider configuration to override fields of the provider's metadata.
+ */
+export interface OnrampProviderMetadataOverride {
+    name?: string;
+    logo?: string;
+    url?: string;
+}
diff --git a/packages/walletkit/src/defi/onramp/OnrampProvider.ts b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
index 415ca3368..7817fb1dc 100644
--- a/packages/walletkit/src/defi/onramp/OnrampProvider.ts
+++ b/packages/walletkit/src/defi/onramp/OnrampProvider.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import type { Network, OnrampParams, OnrampQuote, OnrampQuoteParams } from '../../api/models';
+import type { Network, OnrampParams, OnrampProviderMetadata, OnrampQuote, OnrampQuoteParams } from '../../api/models';
 import type { OnrampProviderInterface } from '../../api/interfaces';
 
 /**
@@ -36,6 +36,11 @@ export abstract class OnrampProvider<
     abstract readonly providerId: string;
     abstract getSupportedNetworks(): Network[];
 
+    /**
+     * Get static metadata for the provider (display name, logo, capability flags).
+     */
+    abstract getMetadata(): OnrampProviderMetadata;
+
     /**
      * Get a quote (or quotes) for onramping fiat to crypto.
      * Single-source providers may return one quote; aggregating providers may return many.
diff --git a/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts b/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
index f7cadc49d..d0fc700d1 100644
--- a/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
+++ b/packages/walletkit/src/defi/onramp/appkit-onramp/AppkitOnrampProvider.ts
@@ -66,6 +66,14 @@ export class AppkitOnrampProvider extends OnrampProvider<undefined, undefined> {
         return [Network.mainnet()];
     }
 
+    getMetadata() {
+        return {
+            name: 'AppKit Onramp',
+            url: 'https://ton.org/dev',
+            isReversedAmountSupported: false,
+        };
+    }
+
     async getQuote(params: OnrampQuoteParams<undefined>): Promise<OnrampQuote[]> {
         const url = new URL(`${this.baseUrl}/onramp/get-quote`);
         url.searchParams.set('amount', params.amount);

From 80d06efcdcd5d419e1565e64477c09220ea5ef92 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Tue, 5 May 2026 21:29:26 +0400
Subject: [PATCH 3/4] feat(onramp): polishing

---
 .../onramp-widget-provider/index.ts           |   6 +-
 .../onramp-widget-provider/onramp-context.ts  | 106 ++++++++
 .../onramp-widget-provider.tsx                | 254 +++++-------------
 .../use-onramp-quote.ts                       |  98 +++++++
 .../use-onramp-token-state.ts                 |  56 ++++
 .../use-onramp-validation.ts                  |  48 ++++
 .../onramp-widget-ui/onramp-widget-ui.tsx     |  12 +-
 .../onramp-widget/onramp-widget.stories.tsx   |   6 +-
 .../fiat-onramp/utils/map-onramp-error.ts     |  33 +++
 packages/appkit-react/src/locales/en.ts       |   4 +
 10 files changed, 420 insertions(+), 203 deletions(-)
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.ts

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
index 2b79e6063..5fc591d3d 100644
--- 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
@@ -6,5 +6,7 @@
  *
  */
 
-export { OnrampWidgetProvider, useOnrampContext } from './onramp-widget-provider';
-export type { OnrampProviderProps, OnrampContextType } from './onramp-widget-provider';
+export { OnrampWidgetProvider } from './onramp-widget-provider';
+export type { OnrampProviderProps } from './onramp-widget-provider';
+export { OnrampContext, useOnrampContext } from './onramp-context';
+export type { OnrampContextType } from './onramp-context';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
new file mode 100644
index 000000000..238ed347a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
@@ -0,0 +1,106 @@
+/**
+ * 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 { OnrampQuote } from '@ton/appkit/onramp';
+
+import type { TokenSectionConfig } from '../../../../../components/token-select-modal';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import type {
+    OnrampCurrency,
+    OnrampProvider as OnrampWidgetProviderType,
+    AmountInputMode,
+    OnrampAmountPreset,
+    CurrencySectionConfig,
+} from '../../../types';
+
+export interface OnrampContextType {
+    /** Full list of available tokens to buy */
+    tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
+    /** Currently selected token to buy */
+    selectedToken: AppkitUIToken | null;
+    setSelectedToken: (token: AppkitUIToken) => void;
+
+    /** Available fiat currencies */
+    currencies: OnrampCurrency[];
+    /** Optional section configs for grouping currencies */
+    currencySections?: CurrencySectionConfig[];
+    /** Currently selected fiat currency */
+    selectedCurrency: OnrampCurrency;
+    setSelectedCurrency: (currency: OnrampCurrency) => void;
+
+    /** Current amount input value */
+    amount: string;
+    setAmount: (value: string) => void;
+    /** Whether user is entering token amount or fiat amount */
+    amountInputMode: AmountInputMode;
+    setAmountInputMode: (mode: AmountInputMode) => void;
+    /** Converted amount in the opposite denomination (from the selected quote) */
+    convertedAmount: string;
+    /** Preset amount values */
+    presetAmounts: OnrampAmountPreset[];
+
+    /** Available payment providers (derived from received quotes) */
+    providers: OnrampWidgetProviderType[];
+    /** Currently selected payment provider */
+    selectedProvider: OnrampWidgetProviderType | null;
+    setSelectedProvider: (provider: OnrampWidgetProviderType) => void;
+    /** Quote tied to the currently selected provider */
+    selectedQuote?: OnrampQuote;
+    /** Whether registered providers support reversed (crypto-amount) quotes */
+    isReversedAmountSupported: boolean;
+
+    /** Validation/fetch error i18n key, null when everything is ok */
+    error: string | null;
+    /** Whether quotes are being fetched */
+    isLoadingQuote: boolean;
+    /** Whether the user can proceed (valid amount + quote available + provider selected) */
+    canSubmit: boolean;
+
+    /** Reset widget to initial state */
+    onReset: () => void;
+    /** Execute the onramp (build URL and redirect) */
+    onContinue: () => void;
+}
+
+const defaultContext: OnrampContextType = {
+    tokens: [],
+    tokenSections: undefined,
+    selectedToken: null,
+    setSelectedToken: () => {},
+    currencies: [],
+    currencySections: undefined,
+    selectedCurrency: ONRAMP_CURRENCIES[0]!,
+    setSelectedCurrency: () => {},
+    amount: '',
+    setAmount: () => {},
+    amountInputMode: 'currency',
+    setAmountInputMode: () => {},
+    convertedAmount: '',
+    presetAmounts: DEFAULT_ONRAMP_PRESETS,
+    providers: [],
+    selectedProvider: null,
+    setSelectedProvider: () => {},
+    selectedQuote: undefined,
+    isReversedAmountSupported: false,
+    error: null,
+    isLoadingQuote: false,
+    canSubmit: false,
+    onReset: () => {},
+    onContinue: () => {},
+};
+
+export const OnrampContext = createContext<OnrampContextType>(defaultContext);
+
+export const useOnrampContext = (): OnrampContextType => {
+    return useContext(OnrampContext);
+};
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
index 717a78671..e34bd3bda 100644
--- 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
@@ -6,119 +6,20 @@
  *
  */
 
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { FC, PropsWithChildren } from 'react';
-import type { OnrampQuote } from '@ton/appkit/onramp';
 
 import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
 import type { TokenSectionConfig } from '../../../../../components/token-select-modal';
-import type {
-    OnrampCurrency,
-    OnrampProvider as OnrampWidgetProviderType,
-    AmountInputMode,
-    OnrampAmountPreset,
-    CurrencySectionConfig,
-} from '../../../types';
+import type { CurrencySectionConfig } from '../../../types';
 import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
 import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
-import { useOnrampQuotes } from '../../../hooks/use-onramp-quotes';
-import { useOnrampProviders } from '../../../hooks/use-onramp-providers';
 import { useBuildOnrampUrl } from '../../../hooks/use-build-onramp-url';
-import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
-import { useDebounceValue } from '../../../../../hooks/use-debounce-value';
-
-export type { AppkitUIToken };
-
-const ERROR_THRESHOLD = 10000000;
-const QUOTE_DEBOUNCE_MS = 500;
-
-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;
-    /** Quote tied to the currently selected provider */
-    selectedQuote?: OnrampQuote;
-    /** Whether the registered providers support reversed (crypto-amount) quotes */
-    isReversedAmountSupported: boolean;
-
-    /** 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: () => {},
-    selectedQuote: undefined,
-    isReversedAmountSupported: false,
-    canContinue: false,
-    error: undefined,
-    isLoading: false,
-    onReset: () => {},
-    onContinue: () => {},
-};
-
-export const OnrampContext = createContext<OnrampContextType>(defaultContext);
-
-export const useOnrampContext = () => {
-    return useContext(OnrampContext);
-};
+import { useAddress } from '../../../../wallets';
+import { OnrampContext } from './onramp-context';
+import { useOnrampTokenState } from './use-onramp-token-state';
+import { useOnrampQuote } from './use-onramp-quote';
+import { useOnrampValidation } from './use-onramp-validation';
 
 export interface OnrampProviderProps extends PropsWithChildren {
     /** Full list of tokens available for purchase */
@@ -141,116 +42,80 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
     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');
-    const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(null);
-
-    const registeredProviders = useOnrampProviders();
-    const isReversedAmountSupported = useMemo(
-        () =>
-            registeredProviders.length > 0 &&
-            registeredProviders.every((p) => p.getMetadata().isReversedAmountSupported ?? true),
-        [registeredProviders],
-    );
-
-    const [amountDebounced] = useDebounceValue(amount, QUOTE_DEBOUNCE_MS);
+    // 1. Local state
+    const {
+        selectedToken,
+        setSelectedToken,
+        selectedCurrency,
+        setSelectedCurrency,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+        amountDecimals,
+    } = useOnrampTokenState({ tokens, defaultTokenId, defaultCurrencyId });
+
+    // 2. Queries and external readers
+    const userAddress = useAddress();
 
     const {
-        data: quotes,
-        isLoading: isQuoteLoading,
-        error: quotesError,
-    } = useOnrampQuotes({
-        fiatCurrency: selectedCurrency.code,
-        cryptoCurrency: selectedToken?.symbol ?? 'TON',
-        amount: amountDebounced || '0',
-        isFiatAmount: amountInputMode === 'currency',
-        query: {
-            enabled: !!amountDebounced && !isNaN(parseFloat(amountDebounced)) && parseFloat(amountDebounced) > 0,
-            retry: false,
-        },
+        amountDebounced,
+        quoteError,
+        isQuoteFetching,
+        providers,
+        selectedProvider,
+        setSelectedProvider,
+        selectedQuote,
+        convertedAmount,
+        isReversedAmountSupported,
+    } = useOnrampQuote({ selectedToken, selectedCurrency, amount, amountInputMode });
+
+    // 3. Derivations
+    const { error, canSubmit } = useOnrampValidation({
+        amount,
+        amountDebounced,
+        amountDecimals,
+        quoteError,
+        hasQuote: !!selectedQuote,
+        hasSelectedProvider: !!selectedProvider,
     });
 
-    const providers = useMemo<OnrampWidgetProviderType[]>(
-        () =>
-            quotes?.map((q) => ({
-                id: q.serviceInfo?.id ?? q.providerId,
-                name: q.serviceInfo?.name ?? q.providerId,
-                description: q.serviceInfo?.paymentMethods?.join(', ') ?? '',
-                logo: q.serviceInfo?.lightLogo ?? '',
-            })) ?? [],
-        [quotes],
-    );
-
-    const selectedQuote = useMemo(() => {
-        if (!quotes || quotes.length === 0) return undefined;
-        if (selectedProvider) {
-            const match = quotes.find((q) => (q.serviceInfo?.id ?? q.providerId) === selectedProvider.id);
-            if (match) return match;
-        }
-        return quotes[0];
-    }, [quotes, selectedProvider]);
-
-    const convertedAmount = useMemo(() => {
-        if (!selectedQuote) return '';
-        return amountInputMode === 'currency' ? selectedQuote.cryptoAmount : selectedQuote.fiatAmount;
-    }, [selectedQuote, amountInputMode]);
+    const isLoadingQuote = isQuoteFetching || amount !== amountDebounced;
 
     useEffect(() => {
-        if (selectedProvider && providers.find((p) => p.id === selectedProvider.id)) return;
-        setSelectedProvider(providers[0] ?? null);
-    }, [providers, selectedProvider]);
-
-    const numericAmount = parseFloat(amount);
-    const error = useMemo<string | undefined>(() => {
-        if (quotesError) {
-            const code = (quotesError as { code?: string }).code;
-            return code === 'PAIR_NOT_SUPPORTED' ? 'pairNotSupported' : 'noQuotesFound';
+        if (!isReversedAmountSupported && amountInputMode === 'token') {
+            setAmountInputMode('currency');
         }
-        if (!isNaN(numericAmount) && numericAmount > ERROR_THRESHOLD) return 'noQuotesFound';
-        return undefined;
-    }, [quotesError, numericAmount]);
-    const canContinue =
-        amount !== '' && !isNaN(numericAmount) && numericAmount > 0 && !!selectedQuote && !error && !!selectedProvider;
+    }, [isReversedAmountSupported, amountInputMode, setAmountInputMode]);
 
+    // 4. Mutations
     const { mutateAsync: buildUrl } = useBuildOnrampUrl();
-    const wallets = useConnectedWallets();
-    const activeWallet = wallets?.[0];
 
+    // 5. Callbacks
     const onContinue = useCallback(async () => {
-        if (!canContinue || !selectedQuote || !activeWallet) return;
+        if (!canSubmit || !selectedQuote || !userAddress) return;
 
         try {
-            const url = await buildUrl({
-                quote: selectedQuote,
-                userAddress: activeWallet.getAddress(),
-            });
+            const url = await buildUrl({ quote: selectedQuote, userAddress });
             window.open(url, '_blank');
         } catch {
             // silently swallow — redirect is best-effort
         }
-    }, [canContinue, selectedQuote, activeWallet, buildUrl]);
+    }, [canSubmit, selectedQuote, userAddress, buildUrl]);
 
     const onReset = useCallback(() => {
         setAmount('');
         setAmountInputMode('currency');
-    }, []);
+    }, [setAmount, setAmountInputMode]);
 
     const value = useMemo(
         () => ({
             tokens,
             tokenSections,
-            currencySections,
             selectedToken,
             setSelectedToken,
             currencies: ONRAMP_CURRENCIES,
+            currencySections,
             selectedCurrency,
             setSelectedCurrency,
             amount,
@@ -264,28 +129,33 @@ export const OnrampWidgetProvider: FC<OnrampProviderProps> = ({
             setSelectedProvider,
             selectedQuote,
             isReversedAmountSupported,
-            canContinue,
             error,
-            isLoading: isQuoteLoading,
+            isLoadingQuote,
+            canSubmit,
             onReset,
             onContinue,
         }),
         [
             tokens,
             tokenSections,
-            currencySections,
             selectedToken,
+            setSelectedToken,
+            currencySections,
             selectedCurrency,
+            setSelectedCurrency,
             amount,
+            setAmount,
             amountInputMode,
+            setAmountInputMode,
             convertedAmount,
             providers,
             selectedProvider,
+            setSelectedProvider,
             selectedQuote,
             isReversedAmountSupported,
-            canContinue,
             error,
-            isQuoteLoading,
+            isLoadingQuote,
+            canSubmit,
             onReset,
             onContinue,
         ],
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
new file mode 100644
index 000000000..40d832b84
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
@@ -0,0 +1,98 @@
+/**
+ * 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, useState } from 'react';
+import { keepPreviousData } from '@tanstack/react-query';
+
+import { useOnrampQuotes } from '../../../hooks/use-onramp-quotes';
+import { useOnrampProviders } from '../../../hooks/use-onramp-providers';
+import { useDebounceValue } from '../../../../../hooks/use-debounce-value';
+import type { AmountInputMode, OnrampCurrency, OnrampProvider as OnrampWidgetProviderType } from '../../../types';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const QUOTE_DEBOUNCE_MS = 500;
+
+interface UseOnrampQuoteOptions {
+    selectedToken: AppkitUIToken | null;
+    selectedCurrency: OnrampCurrency;
+    amount: string;
+    amountInputMode: AmountInputMode;
+}
+
+export const useOnrampQuote = ({ selectedToken, selectedCurrency, amount, amountInputMode }: UseOnrampQuoteOptions) => {
+    const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(null);
+    const [amountDebounced] = useDebounceValue(amount, QUOTE_DEBOUNCE_MS);
+
+    const registeredProviders = useOnrampProviders();
+    const isReversedAmountSupported = useMemo(
+        () =>
+            registeredProviders.length > 0 &&
+            registeredProviders.every((p) => p.getMetadata().isReversedAmountSupported ?? true),
+        [registeredProviders],
+    );
+
+    const {
+        data: quotes,
+        isFetching: isQuoteFetching,
+        error: quoteError,
+    } = useOnrampQuotes({
+        fiatCurrency: selectedCurrency.code,
+        cryptoCurrency: selectedToken?.symbol ?? 'TON',
+        amount: amountDebounced || '0',
+        isFiatAmount: amountInputMode === 'currency',
+        query: {
+            enabled: !!amountDebounced && !isNaN(parseFloat(amountDebounced)) && parseFloat(amountDebounced) > 0,
+            retry: false,
+            placeholderData: keepPreviousData,
+            refetchOnWindowFocus: false,
+        },
+    });
+
+    const providers = useMemo<OnrampWidgetProviderType[]>(
+        () =>
+            quotes?.map((q) => ({
+                id: q.serviceInfo?.id ?? q.providerId,
+                name: q.serviceInfo?.name ?? q.providerId,
+                description: q.serviceInfo?.paymentMethods?.join(', ') ?? '',
+                logo: q.serviceInfo?.lightLogo ?? '',
+            })) ?? [],
+        [quotes],
+    );
+
+    const selectedQuote = useMemo(() => {
+        if (!quotes || quotes.length === 0) return undefined;
+        if (selectedProvider) {
+            const match = quotes.find((q) => (q.serviceInfo?.id ?? q.providerId) === selectedProvider.id);
+            if (match) return match;
+        }
+        return quotes[0];
+    }, [quotes, selectedProvider]);
+
+    const convertedAmount = useMemo(() => {
+        if (!selectedQuote) return '';
+        return amountInputMode === 'currency' ? selectedQuote.cryptoAmount : selectedQuote.fiatAmount;
+    }, [selectedQuote, amountInputMode]);
+
+    useEffect(() => {
+        if (selectedProvider && providers.find((p) => p.id === selectedProvider.id)) return;
+        setSelectedProvider(providers[0] ?? null);
+    }, [providers, selectedProvider]);
+
+    return {
+        amountDebounced,
+        quotes: quotes ?? null,
+        quoteError,
+        isQuoteFetching,
+        providers,
+        selectedProvider,
+        setSelectedProvider,
+        selectedQuote,
+        convertedAmount,
+        isReversedAmountSupported,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
new file mode 100644
index 000000000..f21deb28a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
@@ -0,0 +1,56 @@
+/**
+ * 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 { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import type { AmountInputMode, OnrampCurrency } from '../../../types';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+interface UseOnrampTokenStateOptions {
+    tokens: AppkitUIToken[];
+    defaultTokenId?: string;
+    defaultCurrencyId?: string;
+}
+
+const FIAT_DECIMALS = 2;
+
+const pickToken = (tokens: AppkitUIToken[], defaultId?: string): AppkitUIToken | null =>
+    tokens.find((t) => t.id === defaultId) ?? tokens[0] ?? null;
+
+const pickCurrency = (defaultId?: string): OnrampCurrency =>
+    ONRAMP_CURRENCIES.find((c) => c.id === defaultId) ?? ONRAMP_CURRENCIES[0]!;
+
+export const useOnrampTokenState = ({ tokens, defaultTokenId, defaultCurrencyId }: UseOnrampTokenStateOptions) => {
+    const [selectedToken, setSelectedToken] = useState<AppkitUIToken | null>(() => pickToken(tokens, defaultTokenId));
+    const [selectedCurrency, setSelectedCurrency] = useState<OnrampCurrency>(() => pickCurrency(defaultCurrencyId));
+    const [amount, setAmountRaw] = useState('');
+    const [amountInputMode, setAmountInputMode] = useState<AmountInputMode>('currency');
+
+    const amountDecimals = amountInputMode === 'token' ? (selectedToken?.decimals ?? 0) : FIAT_DECIMALS;
+
+    const setAmount = useCallback(
+        (value: string) => {
+            if (value === '' || validateNumericString(value, amountDecimals)) setAmountRaw(value);
+        },
+        [amountDecimals],
+    );
+
+    return {
+        selectedToken,
+        setSelectedToken,
+        selectedCurrency,
+        setSelectedCurrency,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+        amountDecimals,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts
new file mode 100644
index 000000000..023d46810
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.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 { useMemo } from 'react';
+
+import { hasTooManyDecimals } from '../../../../../utils/validate-amount';
+import { mapOnrampError } from '../utils/map-onramp-error';
+
+interface UseOnrampValidationOptions {
+    amount: string;
+    amountDebounced: string;
+    amountDecimals?: number;
+    quoteError: Error | null;
+    hasQuote: boolean;
+    hasSelectedProvider: boolean;
+}
+
+interface UseOnrampValidationResult {
+    error: string | null;
+    canSubmit: boolean;
+}
+
+export const useOnrampValidation = ({
+    amount,
+    amountDebounced,
+    amountDecimals,
+    quoteError,
+    hasQuote,
+    hasSelectedProvider,
+}: UseOnrampValidationOptions): UseOnrampValidationResult => {
+    const tooManyDecimals = hasTooManyDecimals(amount, amountDecimals);
+
+    const mappedError = useMemo(() => {
+        if (tooManyDecimals) return 'onramp.tooManyDecimals';
+        if (quoteError && amountDebounced) return mapOnrampError(quoteError);
+        return null;
+    }, [tooManyDecimals, quoteError, amountDebounced]);
+
+    const canSubmit =
+        (parseFloat(amount) || 0) > 0 && !tooManyDecimals && mappedError === null && hasQuote && hasSelectedProvider;
+
+    return { error: mappedError, canSubmit };
+};
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
index ab3af0692..93212072d 100644
--- 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
@@ -43,9 +43,9 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
     providers,
     selectedQuote,
     isReversedAmountSupported,
-    canContinue,
+    canSubmit,
     error,
-    isLoading,
+    isLoadingQuote,
     onContinue,
     setSelectedProvider,
 }) => {
@@ -117,19 +117,19 @@ export const OnrampWidgetUI: FC<OnrampWidgetRenderProps> = ({
             <Button
                 variant="fill"
                 size="l"
-                disabled={!canContinue}
-                loading={isLoading}
+                disabled={!canSubmit}
+                loading={isLoadingQuote}
                 onClick={handleContinue}
                 fullWidth
             >
-                {error ? t(`onramp.${error}`) : t('onramp.continue')}
+                {error ? t(error) : t('onramp.continue')}
             </Button>
 
             <OnrampInfoBlock
                 className={styles.info}
                 selectedToken={selectedToken}
                 selectedQuote={selectedQuote}
-                isLoading={isLoading}
+                isLoading={isLoadingQuote}
             />
 
             <TokenSelectModal
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
index 589f7edbc..fb858c352 100644
--- 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
@@ -38,7 +38,7 @@ export const CustomUI: Story = {
     },
     render: (args) => (
         <OnrampWidget {...args}>
-            {({ selectedToken, selectedCurrency, amount, setAmount, canContinue }) => (
+            {({ selectedToken, selectedCurrency, amount, setAmount, canSubmit }) => (
                 <div
                     style={{
                         display: 'flex',
@@ -59,8 +59,8 @@ export const CustomUI: Story = {
                         inputMode="decimal"
                         style={{ fontSize: 32, fontWeight: 'bold', border: 'none', outline: 'none' }}
                     />
-                    <button disabled={!canContinue} type="button">
-                        {canContinue ? 'Continue' : 'Enter an amount'}
+                    <button disabled={!canSubmit} type="button">
+                        {canSubmit ? 'Continue' : 'Enter an amount'}
                     </button>
                 </div>
             )}
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.ts
new file mode 100644
index 000000000..3ed786f08
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.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 { OnrampError } from '@ton/appkit/onramp';
+
+import { mapDefiError } from '../../../../../utils/map-defi-error';
+
+/**
+ * Map a thrown onramp error to an i18n key. Tries onramp-specific codes first,
+ * falls back to the shared {@link mapDefiError}, and finally to a generic
+ * `onramp.genericError`.
+ */
+export const mapOnrampError = (error: unknown): string => {
+    if (error instanceof OnrampError) {
+        switch (error.code) {
+            case OnrampError.PAIR_NOT_SUPPORTED:
+                return 'onramp.pairNotSupported';
+            case OnrampError.QUOTE_FAILED:
+                return 'onramp.noQuotesFound';
+            case OnrampError.URL_BUILD_FAILED:
+                return 'onramp.urlBuildFailed';
+            case OnrampError.PROVIDER_ERROR:
+                return 'onramp.providerError';
+        }
+    }
+
+    return mapDefiError(error) ?? 'onramp.genericError';
+};
diff --git a/packages/appkit-react/src/locales/en.ts b/packages/appkit-react/src/locales/en.ts
index b131c569f..867162dd4 100644
--- a/packages/appkit-react/src/locales/en.ts
+++ b/packages/appkit-react/src/locales/en.ts
@@ -150,6 +150,10 @@ export default {
         tonPayError: 'Failed to start TonPay checkout',
         youGet: 'You get',
         yourBalance: 'Your balance',
+        tooManyDecimals: 'Too many decimal places',
+        providerError: 'Onramp provider unavailable',
+        urlBuildFailed: 'Could not build the onramp link',
+        genericError: 'Unable to get a quote',
     },
 
     // Staking

From aa13ebbcf118cb533dc84e664c938afc19c0e48c Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Tue, 9 Jun 2026 16:35:51 +0400
Subject: [PATCH 4/4] feat(fiat-onramp): get onramp files back

---
 .../onramp-amount-reversed/index.ts           |  10 +
 .../onramp-amount-reversed.module.css         |  28 +++
 .../onramp-amount-reversed.tsx                |  18 ++
 .../components/onramp-currency-item/index.ts  |  10 +
 .../onramp-currency-item.tsx                  |  31 +++
 .../onramp-currency-select-modal/index.ts     |  10 +
 .../onramp-currency-select-modal.tsx          |  86 ++++++++
 .../onramp-currency-select-modal/utils.ts     |  48 ++++
 .../components/onramp-provider-item/index.ts  |  10 +
 .../onramp-provider-item.module.css           |  25 +++
 .../onramp-provider-item.tsx                  |  36 +++
 .../onramp-provider-select/index.ts           |  10 +
 .../onramp-provider-select.module.css         |   7 +
 .../onramp-provider-select.tsx                |  41 ++++
 .../onramp/hooks/use-build-onramp-url.ts      |  44 ++++
 .../onramp/hooks/use-onramp-provider.ts       |  40 ++++
 .../onramp/hooks/use-onramp-providers.ts      |  35 +++
 .../onramp/hooks/use-onramp-quotes.ts         |  34 +++
 .../appkit-react/src/features/onramp/index.ts |   3 +
 .../features/onramp/mock-data/currencies.ts   |  33 +++
 .../features/onramp/mock-data/providers.ts    |  36 +++
 .../appkit-react/src/features/onramp/types.ts |  69 ++++++
 .../fiat-onramp/onramp-info-block/index.ts    |  10 +
 .../onramp-info-block.stories.tsx             |  54 +++++
 .../onramp-info-block/onramp-info-block.tsx   |  67 ++++++
 .../onramp-info-block/use-onramp-balance.ts   |  38 ++++
 .../onramp-widget-provider/index.ts           |  12 +
 .../onramp-widget-provider/onramp-context.ts  | 106 +++++++++
 .../onramp-widget-provider.tsx                | 165 ++++++++++++++
 .../use-onramp-quote.ts                       |  98 +++++++++
 .../use-onramp-token-state.ts                 |  56 +++++
 .../use-onramp-validation.ts                  |  48 ++++
 .../fiat-onramp/onramp-widget-ui/index.ts     |  10 +
 .../onramp-widget-ui.module.css               |  28 +++
 .../onramp-widget-ui/onramp-widget-ui.tsx     | 161 ++++++++++++++
 .../fiat-onramp/onramp-widget/index.ts        |  10 +
 .../onramp-widget/onramp-widget.stories.tsx   |  69 ++++++
 .../onramp-widget/onramp-widget.tsx           |  50 +++++
 .../fiat-onramp/utils/map-onramp-error.ts     |  33 +++
 .../onramp/widgets/ton-pay-widget/index.ts    |  10 +
 .../ton-pay-widget/ton-pay-widget.module.css  |  35 +++
 .../ton-pay-widget/ton-pay-widget.stories.tsx |  28 +++
 .../widgets/ton-pay-widget/ton-pay-widget.tsx | 208 ++++++++++++++++++
 43 files changed, 1960 insertions(+)
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.module.css
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-currency-item/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-currency-item/onramp-currency-item.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/onramp-currency-select-modal.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-currency-select-modal/utils.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-item/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.module.css
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-item/onramp-provider-item.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-select/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.module.css
 create mode 100644 packages/appkit-react/src/features/onramp/components/onramp-provider-select/onramp-provider-select.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/hooks/use-build-onramp-url.ts
 create mode 100644 packages/appkit-react/src/features/onramp/hooks/use-onramp-provider.ts
 create mode 100644 packages/appkit-react/src/features/onramp/hooks/use-onramp-providers.ts
 create mode 100644 packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.ts
 create mode 100644 packages/appkit-react/src/features/onramp/mock-data/currencies.ts
 create mode 100644 packages/appkit-react/src/features/onramp/mock-data/providers.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-widget-provider.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.module.css
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.stories.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget/onramp-widget.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/index.ts
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.module.css
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.stories.tsx
 create mode 100644 packages/appkit-react/src/features/onramp/widgets/ton-pay-widget/ton-pay-widget.tsx

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..25da63c55
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/components/onramp-amount-reversed/onramp-amount-reversed.tsx
@@ -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.
+ *
+ */
+
+import type { FC } from 'react';
+
+import { AmountReversed } from '../../../../components/ui/amount-reversed';
+import type { AmountReversedProps } from '../../../../components/ui/amount-reversed';
+
+export type OnrampAmountReversedProps = AmountReversedProps;
+
+export const OnrampAmountReversed: FC<OnrampAmountReversedProps> = ({ decimals, ...props }) => (
+    <AmountReversed {...props} decimals={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/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-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-quotes.ts b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.ts
new file mode 100644
index 000000000..55d414c07
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/hooks/use-onramp-quotes.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 { getOnrampQuotesQueryOptions } from '@ton/appkit/queries';
+import type { GetOnrampQuotesData, GetOnrampQuotesErrorType, GetOnrampQuotesQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../settings';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseOnrampQuotesParameters<selectData = GetOnrampQuotesData> = GetOnrampQuotesQueryConfig<selectData>;
+
+export type UseOnrampQuotesReturnType<selectData = GetOnrampQuotesData> = UseQueryReturnType<
+    selectData,
+    GetOnrampQuotesErrorType
+>;
+
+/**
+ * Hook to get onramp quotes from all registered providers (results are flattened).
+ */
+export const useOnrampQuotes = <selectData = GetOnrampQuotesData>(
+    parameters: UseOnrampQuotesParameters<selectData> = {},
+): UseOnrampQuotesReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getOnrampQuotesQueryOptions(appKit, parameters));
+};
diff --git a/packages/appkit-react/src/features/onramp/index.ts b/packages/appkit-react/src/features/onramp/index.ts
index 4f4545def..17993bf2b 100644
--- a/packages/appkit-react/src/features/onramp/index.ts
+++ b/packages/appkit-react/src/features/onramp/index.ts
@@ -6,9 +6,12 @@
  *
  */
 
+// 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 {
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
index 9ecac4d74..b43bb48d7 100644
--- a/packages/appkit-react/src/features/onramp/types.ts
+++ b/packages/appkit-react/src/features/onramp/types.ts
@@ -6,7 +6,76 @@
  *
  */
 
+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 {
+    id: string;
+    /** Token symbol, e.g. "USDC", "USDT" */
+    symbol: string;
+    /** Token name, e.g. "USD Coin", "Tether" */
+    name: string;
+    /** Human-readable network name, e.g. "Base", "BSC" */
+    network: string;
+    /** Source chain id as string (decimal), e.g. "8453", "56" — passed as srcChainId to the onramp provider */
+    networkId: string;
+    /** Number of decimals for the token */
+    decimals: number;
+    /** Token contract address on the source network (empty string / zero address for native) */
+    address: string;
+    logo?: string;
+    networkLogo?: 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/fiat-onramp/onramp-info-block/index.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/index.ts
new file mode 100644
index 000000000..daafb19b9
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/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 { OnrampInfoBlock } from './onramp-info-block';
+export type { OnrampInfoBlockProps } from './onramp-info-block';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
new file mode 100644
index 000000000..558eee074
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.stories.tsx
@@ -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 type { Meta, StoryObj } from '@storybook/react-vite';
+import { Network } from '@ton/appkit';
+
+import { OnrampInfoBlock } from './onramp-info-block';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const TON_TOKEN: AppkitUIToken = {
+    id: 'ton',
+    symbol: 'TON',
+    name: 'Toncoin',
+    decimals: 9,
+    address: 'ton',
+    logo: 'https://asset.ston.fi/img/EQDQoc5M3Bh8eWFephi9bClhevelbZZvWhkqdo80XuY_0qXv',
+    network: Network.mainnet(),
+};
+
+const meta: Meta<typeof OnrampInfoBlock> = {
+    title: 'Public/Features/Onramp/Internal/OnrampInfoBlock',
+    component: OnrampInfoBlock,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnrampInfoBlock>;
+
+export const Default: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        selectedQuote: {
+            fiatCurrency: 'USD',
+            cryptoCurrency: 'TON',
+            fiatAmount: '100',
+            cryptoAmount: '50.123456',
+            rate: '0.50123456',
+            providerId: 'appkit-onramp',
+        },
+        isLoading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        selectedToken: TON_TOKEN,
+        selectedQuote: undefined,
+        isLoading: true,
+    },
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
new file mode 100644
index 000000000..52e428e71
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/onramp-info-block.tsx
@@ -0,0 +1,67 @@
+/**
+ * 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 type { OnrampQuote } from '@ton/appkit/onramp';
+
+import { InfoBlock } from '../../../../../components/ui/info-block';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+import { useConnectedWallets } from '../../../../wallets/hooks/use-connected-wallets';
+import { useI18n } from '../../../../settings/hooks/use-i18n';
+import { formatOnrampAmount } from '../../crypto-onramp/utils/format-onramp-amount';
+import { useOnrampBalance } from './use-onramp-balance';
+
+export interface OnrampInfoBlockProps {
+    selectedToken: AppkitUIToken | null;
+    selectedQuote?: OnrampQuote;
+    isLoading: boolean;
+    className?: string;
+}
+
+export const OnrampInfoBlock: FC<OnrampInfoBlockProps> = ({ selectedToken, selectedQuote, isLoading, className }) => {
+    const { t } = useI18n();
+
+    const wallets = useConnectedWallets();
+    const activeWallet = wallets?.[0];
+    const isWalletConnected = !!activeWallet;
+    const { targetBalance, isLoadingTargetBalance } = useOnrampBalance({
+        selectedToken,
+        userAddress: activeWallet?.getAddress(),
+    });
+
+    return (
+        <InfoBlock.Container className={className}>
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('onramp.youGet')}</InfoBlock.Label>
+
+                {isLoading ? (
+                    <InfoBlock.ValueSkeleton />
+                ) : (
+                    <InfoBlock.Value>
+                        {formatOnrampAmount(selectedQuote?.cryptoAmount, selectedToken?.decimals)}{' '}
+                        {selectedToken?.symbol}
+                    </InfoBlock.Value>
+                )}
+            </InfoBlock.Row>
+
+            {isWalletConnected && (
+                <InfoBlock.Row>
+                    <InfoBlock.Label>{t('onramp.yourBalance')}</InfoBlock.Label>
+
+                    {isLoadingTargetBalance ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>
+                            {formatOnrampAmount(targetBalance || '0', selectedToken?.decimals)} {selectedToken?.symbol}
+                        </InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>
+            )}
+        </InfoBlock.Container>
+    );
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.ts
new file mode 100644
index 000000000..75f5fb243
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-info-block/use-onramp-balance.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 { useBalance } from '../../../../balances/hooks/use-balance';
+import { useJettonBalanceByAddress } from '../../../../jettons/hooks/use-jetton-balance-by-address';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const NATIVE_TON_TOKEN_ADDRESS = 'ton';
+
+interface UseOnrampBalanceOptions {
+    selectedToken: AppkitUIToken | null;
+    userAddress: string | undefined;
+}
+
+export const useOnrampBalance = ({ selectedToken, userAddress }: UseOnrampBalanceOptions) => {
+    const isNativeTonTarget = selectedToken?.address === NATIVE_TON_TOKEN_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/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..5fc591d3d
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/index.ts
@@ -0,0 +1,12 @@
+/**
+ * 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 } from './onramp-widget-provider';
+export type { OnrampProviderProps } from './onramp-widget-provider';
+export { OnrampContext, useOnrampContext } from './onramp-context';
+export type { OnrampContextType } from './onramp-context';
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
new file mode 100644
index 000000000..6fe8e668f
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-context.ts
@@ -0,0 +1,106 @@
+/**
+ * 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 { OnrampQuote } from '@ton/appkit/onramp';
+
+import type { TokenSectionConfig } from '../../../../../components/shared/token-select-modal';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import type {
+    OnrampCurrency,
+    OnrampProvider as OnrampWidgetProviderType,
+    AmountInputMode,
+    OnrampAmountPreset,
+    CurrencySectionConfig,
+} from '../../../types';
+
+export interface OnrampContextType {
+    /** Full list of available tokens to buy */
+    tokens: AppkitUIToken[];
+    /** Optional section configs for grouping tokens in the selector */
+    tokenSections?: TokenSectionConfig[];
+    /** Currently selected token to buy */
+    selectedToken: AppkitUIToken | null;
+    setSelectedToken: (token: AppkitUIToken) => void;
+
+    /** Available fiat currencies */
+    currencies: OnrampCurrency[];
+    /** Optional section configs for grouping currencies */
+    currencySections?: CurrencySectionConfig[];
+    /** Currently selected fiat currency */
+    selectedCurrency: OnrampCurrency;
+    setSelectedCurrency: (currency: OnrampCurrency) => void;
+
+    /** Current amount input value */
+    amount: string;
+    setAmount: (value: string) => void;
+    /** Whether user is entering token amount or fiat amount */
+    amountInputMode: AmountInputMode;
+    setAmountInputMode: (mode: AmountInputMode) => void;
+    /** Converted amount in the opposite denomination (from the selected quote) */
+    convertedAmount: string;
+    /** Preset amount values */
+    presetAmounts: OnrampAmountPreset[];
+
+    /** Available payment providers (derived from received quotes) */
+    providers: OnrampWidgetProviderType[];
+    /** Currently selected payment provider */
+    selectedProvider: OnrampWidgetProviderType | null;
+    setSelectedProvider: (provider: OnrampWidgetProviderType) => void;
+    /** Quote tied to the currently selected provider */
+    selectedQuote?: OnrampQuote;
+    /** Whether registered providers support reversed (crypto-amount) quotes */
+    isReversedAmountSupported: boolean;
+
+    /** Validation/fetch error i18n key, null when everything is ok */
+    error: string | null;
+    /** Whether quotes are being fetched */
+    isLoadingQuote: boolean;
+    /** Whether the user can proceed (valid amount + quote available + provider selected) */
+    canSubmit: boolean;
+
+    /** Reset widget to initial state */
+    onReset: () => void;
+    /** Execute the onramp (build URL and redirect) */
+    onContinue: () => void;
+}
+
+const defaultContext: OnrampContextType = {
+    tokens: [],
+    tokenSections: undefined,
+    selectedToken: null,
+    setSelectedToken: () => {},
+    currencies: [],
+    currencySections: undefined,
+    selectedCurrency: ONRAMP_CURRENCIES[0]!,
+    setSelectedCurrency: () => {},
+    amount: '',
+    setAmount: () => {},
+    amountInputMode: 'currency',
+    setAmountInputMode: () => {},
+    convertedAmount: '',
+    presetAmounts: DEFAULT_ONRAMP_PRESETS,
+    providers: [],
+    selectedProvider: null,
+    setSelectedProvider: () => {},
+    selectedQuote: undefined,
+    isReversedAmountSupported: false,
+    error: null,
+    isLoadingQuote: false,
+    canSubmit: false,
+    onReset: () => {},
+    onContinue: () => {},
+};
+
+export const OnrampContext = createContext<OnrampContextType>(defaultContext);
+
+export const useOnrampContext = (): OnrampContextType => {
+    return useContext(OnrampContext);
+};
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..69d099e28
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/onramp-widget-provider.tsx
@@ -0,0 +1,165 @@
+/**
+ * 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, useMemo } 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 { CurrencySectionConfig } from '../../../types';
+import { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import { DEFAULT_ONRAMP_PRESETS } from '../../../constants';
+import { useBuildOnrampUrl } from '../../../hooks/use-build-onramp-url';
+import { useAddress } from '../../../../wallets';
+import { OnrampContext } from './onramp-context';
+import { useOnrampTokenState } from './use-onramp-token-state';
+import { useOnrampQuote } from './use-onramp-quote';
+import { useOnrampValidation } from './use-onramp-validation';
+
+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,
+}) => {
+    // 1. Local state
+    const {
+        selectedToken,
+        setSelectedToken,
+        selectedCurrency,
+        setSelectedCurrency,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+        amountDecimals,
+    } = useOnrampTokenState({ tokens, defaultTokenId, defaultCurrencyId });
+
+    // 2. Queries and external readers
+    const userAddress = useAddress();
+
+    const {
+        amountDebounced,
+        quoteError,
+        isQuoteFetching,
+        providers,
+        selectedProvider,
+        setSelectedProvider,
+        selectedQuote,
+        convertedAmount,
+        isReversedAmountSupported,
+    } = useOnrampQuote({ selectedToken, selectedCurrency, amount, amountInputMode });
+
+    // 3. Derivations
+    const { error, canSubmit } = useOnrampValidation({
+        amount,
+        amountDebounced,
+        amountDecimals,
+        quoteError,
+        hasQuote: !!selectedQuote,
+        hasSelectedProvider: !!selectedProvider,
+    });
+
+    const isLoadingQuote = isQuoteFetching || amount !== amountDebounced;
+
+    useEffect(() => {
+        if (!isReversedAmountSupported && amountInputMode === 'token') {
+            setAmountInputMode('currency');
+        }
+    }, [isReversedAmountSupported, amountInputMode, setAmountInputMode]);
+
+    // 4. Mutations
+    const { mutateAsync: buildUrl } = useBuildOnrampUrl();
+
+    // 5. Callbacks
+    const onContinue = useCallback(async () => {
+        if (!canSubmit || !selectedQuote || !userAddress) return;
+
+        try {
+            const url = await buildUrl({ quote: selectedQuote, userAddress });
+            window.open(url, '_blank');
+        } catch {
+            // silently swallow — redirect is best-effort
+        }
+    }, [canSubmit, selectedQuote, userAddress, buildUrl]);
+
+    const onReset = useCallback(() => {
+        setAmount('');
+        setAmountInputMode('currency');
+    }, [setAmount, setAmountInputMode]);
+
+    const value = useMemo(
+        () => ({
+            tokens,
+            tokenSections,
+            selectedToken,
+            setSelectedToken,
+            currencies: ONRAMP_CURRENCIES,
+            currencySections,
+            selectedCurrency,
+            setSelectedCurrency,
+            amount,
+            setAmount,
+            amountInputMode,
+            setAmountInputMode,
+            convertedAmount,
+            presetAmounts: DEFAULT_ONRAMP_PRESETS,
+            providers,
+            selectedProvider,
+            setSelectedProvider,
+            selectedQuote,
+            isReversedAmountSupported,
+            error,
+            isLoadingQuote,
+            canSubmit,
+            onReset,
+            onContinue,
+        }),
+        [
+            tokens,
+            tokenSections,
+            selectedToken,
+            setSelectedToken,
+            currencySections,
+            selectedCurrency,
+            setSelectedCurrency,
+            amount,
+            setAmount,
+            amountInputMode,
+            setAmountInputMode,
+            convertedAmount,
+            providers,
+            selectedProvider,
+            setSelectedProvider,
+            selectedQuote,
+            isReversedAmountSupported,
+            error,
+            isLoadingQuote,
+            canSubmit,
+            onReset,
+            onContinue,
+        ],
+    );
+
+    return <OnrampContext.Provider value={value}>{children}</OnrampContext.Provider>;
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
new file mode 100644
index 000000000..40d832b84
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-quote.ts
@@ -0,0 +1,98 @@
+/**
+ * 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, useState } from 'react';
+import { keepPreviousData } from '@tanstack/react-query';
+
+import { useOnrampQuotes } from '../../../hooks/use-onramp-quotes';
+import { useOnrampProviders } from '../../../hooks/use-onramp-providers';
+import { useDebounceValue } from '../../../../../hooks/use-debounce-value';
+import type { AmountInputMode, OnrampCurrency, OnrampProvider as OnrampWidgetProviderType } from '../../../types';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+const QUOTE_DEBOUNCE_MS = 500;
+
+interface UseOnrampQuoteOptions {
+    selectedToken: AppkitUIToken | null;
+    selectedCurrency: OnrampCurrency;
+    amount: string;
+    amountInputMode: AmountInputMode;
+}
+
+export const useOnrampQuote = ({ selectedToken, selectedCurrency, amount, amountInputMode }: UseOnrampQuoteOptions) => {
+    const [selectedProvider, setSelectedProvider] = useState<OnrampWidgetProviderType | null>(null);
+    const [amountDebounced] = useDebounceValue(amount, QUOTE_DEBOUNCE_MS);
+
+    const registeredProviders = useOnrampProviders();
+    const isReversedAmountSupported = useMemo(
+        () =>
+            registeredProviders.length > 0 &&
+            registeredProviders.every((p) => p.getMetadata().isReversedAmountSupported ?? true),
+        [registeredProviders],
+    );
+
+    const {
+        data: quotes,
+        isFetching: isQuoteFetching,
+        error: quoteError,
+    } = useOnrampQuotes({
+        fiatCurrency: selectedCurrency.code,
+        cryptoCurrency: selectedToken?.symbol ?? 'TON',
+        amount: amountDebounced || '0',
+        isFiatAmount: amountInputMode === 'currency',
+        query: {
+            enabled: !!amountDebounced && !isNaN(parseFloat(amountDebounced)) && parseFloat(amountDebounced) > 0,
+            retry: false,
+            placeholderData: keepPreviousData,
+            refetchOnWindowFocus: false,
+        },
+    });
+
+    const providers = useMemo<OnrampWidgetProviderType[]>(
+        () =>
+            quotes?.map((q) => ({
+                id: q.serviceInfo?.id ?? q.providerId,
+                name: q.serviceInfo?.name ?? q.providerId,
+                description: q.serviceInfo?.paymentMethods?.join(', ') ?? '',
+                logo: q.serviceInfo?.lightLogo ?? '',
+            })) ?? [],
+        [quotes],
+    );
+
+    const selectedQuote = useMemo(() => {
+        if (!quotes || quotes.length === 0) return undefined;
+        if (selectedProvider) {
+            const match = quotes.find((q) => (q.serviceInfo?.id ?? q.providerId) === selectedProvider.id);
+            if (match) return match;
+        }
+        return quotes[0];
+    }, [quotes, selectedProvider]);
+
+    const convertedAmount = useMemo(() => {
+        if (!selectedQuote) return '';
+        return amountInputMode === 'currency' ? selectedQuote.cryptoAmount : selectedQuote.fiatAmount;
+    }, [selectedQuote, amountInputMode]);
+
+    useEffect(() => {
+        if (selectedProvider && providers.find((p) => p.id === selectedProvider.id)) return;
+        setSelectedProvider(providers[0] ?? null);
+    }, [providers, selectedProvider]);
+
+    return {
+        amountDebounced,
+        quotes: quotes ?? null,
+        quoteError,
+        isQuoteFetching,
+        providers,
+        selectedProvider,
+        setSelectedProvider,
+        selectedQuote,
+        convertedAmount,
+        isReversedAmountSupported,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
new file mode 100644
index 000000000..f21deb28a
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-token-state.ts
@@ -0,0 +1,56 @@
+/**
+ * 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 { ONRAMP_CURRENCIES } from '../../../mock-data/currencies';
+import type { AmountInputMode, OnrampCurrency } from '../../../types';
+import type { AppkitUIToken } from '../../../../../types/appkit-ui-token';
+
+interface UseOnrampTokenStateOptions {
+    tokens: AppkitUIToken[];
+    defaultTokenId?: string;
+    defaultCurrencyId?: string;
+}
+
+const FIAT_DECIMALS = 2;
+
+const pickToken = (tokens: AppkitUIToken[], defaultId?: string): AppkitUIToken | null =>
+    tokens.find((t) => t.id === defaultId) ?? tokens[0] ?? null;
+
+const pickCurrency = (defaultId?: string): OnrampCurrency =>
+    ONRAMP_CURRENCIES.find((c) => c.id === defaultId) ?? ONRAMP_CURRENCIES[0]!;
+
+export const useOnrampTokenState = ({ tokens, defaultTokenId, defaultCurrencyId }: UseOnrampTokenStateOptions) => {
+    const [selectedToken, setSelectedToken] = useState<AppkitUIToken | null>(() => pickToken(tokens, defaultTokenId));
+    const [selectedCurrency, setSelectedCurrency] = useState<OnrampCurrency>(() => pickCurrency(defaultCurrencyId));
+    const [amount, setAmountRaw] = useState('');
+    const [amountInputMode, setAmountInputMode] = useState<AmountInputMode>('currency');
+
+    const amountDecimals = amountInputMode === 'token' ? (selectedToken?.decimals ?? 0) : FIAT_DECIMALS;
+
+    const setAmount = useCallback(
+        (value: string) => {
+            if (value === '' || validateNumericString(value, amountDecimals)) setAmountRaw(value);
+        },
+        [amountDecimals],
+    );
+
+    return {
+        selectedToken,
+        setSelectedToken,
+        selectedCurrency,
+        setSelectedCurrency,
+        amount,
+        setAmount,
+        amountInputMode,
+        setAmountInputMode,
+        amountDecimals,
+    };
+};
diff --git a/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.ts
new file mode 100644
index 000000000..023d46810
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-provider/use-onramp-validation.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 { useMemo } from 'react';
+
+import { hasTooManyDecimals } from '../../../../../utils/validate-amount';
+import { mapOnrampError } from '../utils/map-onramp-error';
+
+interface UseOnrampValidationOptions {
+    amount: string;
+    amountDebounced: string;
+    amountDecimals?: number;
+    quoteError: Error | null;
+    hasQuote: boolean;
+    hasSelectedProvider: boolean;
+}
+
+interface UseOnrampValidationResult {
+    error: string | null;
+    canSubmit: boolean;
+}
+
+export const useOnrampValidation = ({
+    amount,
+    amountDebounced,
+    amountDecimals,
+    quoteError,
+    hasQuote,
+    hasSelectedProvider,
+}: UseOnrampValidationOptions): UseOnrampValidationResult => {
+    const tooManyDecimals = hasTooManyDecimals(amount, amountDecimals);
+
+    const mappedError = useMemo(() => {
+        if (tooManyDecimals) return 'onramp.tooManyDecimals';
+        if (quoteError && amountDebounced) return mapOnrampError(quoteError);
+        return null;
+    }, [tooManyDecimals, quoteError, amountDebounced]);
+
+    const canSubmit =
+        (parseFloat(amount) || 0) > 0 && !tooManyDecimals && mappedError === null && hasQuote && hasSelectedProvider;
+
+    return { error: mappedError, canSubmit };
+};
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..1d5dcc782
--- /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: 16px;
+}
+
+.info {
+    margin-top: 16px;
+}
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..a0fb15ac6
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/onramp-widget-ui/onramp-widget-ui.tsx
@@ -0,0 +1,161 @@
+/**
+ * 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 { OnrampInfoBlock } from '../onramp-info-block';
+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,
+    selectedQuote,
+    isReversedAmountSupported,
+    canSubmit,
+    error,
+    isLoadingQuote,
+    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={
+                        isReversedAmountSupported
+                            ? () => setAmountInputMode(amountInputMode === 'token' ? 'currency' : 'token')
+                            : undefined
+                    }
+                    ticker={amountInputMode === 'token' ? undefined : selectedToken?.symbol}
+                    symbol={amountInputMode === 'token' ? selectedCurrency.symbol : undefined}
+                    decimals={amountInputMode === 'token' ? 2 : (selectedToken?.decimals ?? 0)}
+                />
+            </div>
+
+            <AmountPresets
+                className={styles.presets}
+                presets={presetAmounts}
+                currencySymbol={selectedCurrency.symbol}
+                onPresetSelect={(value) => {
+                    setAmountInputMode('currency');
+                    setAmount(value);
+                }}
+            />
+
+            <Button
+                variant="fill"
+                size="l"
+                disabled={!canSubmit}
+                loading={isLoadingQuote}
+                onClick={handleContinue}
+                fullWidth
+            >
+                {error ? t(error) : t('onramp.continue')}
+            </Button>
+
+            <OnrampInfoBlock
+                className={styles.info}
+                selectedToken={selectedToken}
+                selectedQuote={selectedQuote}
+                isLoading={isLoadingQuote}
+            />
+
+            <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..fb858c352
--- /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: 'Public/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, canSubmit }) => (
+                <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={!canSubmit} type="button">
+                        {canSubmit ? '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/fiat-onramp/utils/map-onramp-error.ts b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.ts
new file mode 100644
index 000000000..3ed786f08
--- /dev/null
+++ b/packages/appkit-react/src/features/onramp/widgets/fiat-onramp/utils/map-onramp-error.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 { OnrampError } from '@ton/appkit/onramp';
+
+import { mapDefiError } from '../../../../../utils/map-defi-error';
+
+/**
+ * Map a thrown onramp error to an i18n key. Tries onramp-specific codes first,
+ * falls back to the shared {@link mapDefiError}, and finally to a generic
+ * `onramp.genericError`.
+ */
+export const mapOnrampError = (error: unknown): string => {
+    if (error instanceof OnrampError) {
+        switch (error.code) {
+            case OnrampError.PAIR_NOT_SUPPORTED:
+                return 'onramp.pairNotSupported';
+            case OnrampError.QUOTE_FAILED:
+                return 'onramp.noQuotesFound';
+            case OnrampError.URL_BUILD_FAILED:
+                return 'onramp.urlBuildFailed';
+            case OnrampError.PROVIDER_ERROR:
+                return 'onramp.providerError';
+        }
+    }
+
+    return mapDefiError(error) ?? 'onramp.genericError';
+};
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..ad82292d8
--- /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: 'Public/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>
+    );
+};