TON-729: Staking UI

.changeset/smooth-bushes-wear.md

@@ -0,0 +1,21 @@
+---
+'@ton/appkit-react': patch
+'@ton/walletkit': patch
+'@ton/appkit': patch
+---
+
+- `@ton/appkit`:
+  - added `getSwapProvider` and `watchSwapProviders` actions
+  - added swap-related events and types to `AppKit` core
+  - added `calcFiatValue` and `formatLargeValue` amount utilities
+  - added `debounce` utility function
+- `@ton/walletkit`:
+  - added `SwapProviderMetadata` interface
+  - added `getMetadata()` method to `SwapProvider`
+  - added metadata support to `DeDustSwapProvider` and `OmnistonSwapProvider`
+- `@ton/appkit-react`:
+  - added `SwapWidget` and related UI components (`SwapField`, `SwapSettings`, `TokenSelector`, etc.)
+  - added `SwapWidgetProvider` for swap state management
+  - added hooks for swap: `useSwapProvider`, `useSwapQuote`, `useBuildSwapTransaction`
+  - added `useDebounceCallback`, `useDebounceValue`, and `useUnmount` utility hooks
+  - added English localizations for swap features

.changeset/staking-ui-and-metadata-refactor.md

@@ -0,0 +1,22 @@
+---
+'@ton/appkit-react': patch
+'@ton/walletkit': patch
+'@ton/appkit': patch
+---
+
+- `@ton/walletkit`:
+  - refactored `StakingProviderMetadata`: flat token fields replaced with `stakeToken: StakingTokenInfo` object and optional `receiveToken?: StakingTokenInfo` group to support both liquid and custodial staking providers
+  - made `contractAddress` optional in `StakingProviderMetadata` for custodial providers without on-chain contracts
+  - renamed `lstExchangeRate` to `exchangeRate` in `StakingProviderInfo`
+  - added `StakingTokenInfo` type export
+  - added `isReversed` parameter to `StakingQuoteParams` for reversed unstake quotes
+  - added deep-merge support for metadata overrides in `TonStakersStakingProvider` constructor
+  - added `getStakingProvider` and `watchStakingProviders` to `DefiManager`
+- `@ton/appkit`:
+  - added `getStakingProviderMetadata`, `getStakingProvider`, and `watchStakingProviders` actions
+  - added `truncateDecimals` and `formatLargeValue` amount utilities
+  - exported `StakingTokenInfo` type
+- `@ton/appkit-react`:
+  - added `StakingWidget` with full stake/unstake UI, balance display, reversed quotes, and unstake mode selector
+  - updated base design tokens to TonConnect colors
+  - added staking hooks and i18n translations

.changeset/staking-widget.md

@@ -0,0 +1,39 @@
+---
+'@ton/walletkit': major
+'@ton/appkit': minor
+'@ton/appkit-react': minor
+---
+
+**Staking widget and provider API**
+
+Breaking changes in `@ton/walletkit`:
+- `getSupportedUnstakeModes()` removed from `StakingProviderInterface` and `StakingProvider`; replaced by `getStakingProviderMetadata(network?)` which returns full static metadata (including unstake modes)
+- `getSupportedNetworks()` added as abstract method to `StakingProvider` — existing custom subclasses must implement it
+- `DefiManagerError` renamed to `DefiError`
+- `lstExchangeRate` renamed to `exchangeRate` in `StakingProviderInfo`
+- `StakingProviderMetadata` shape changed: flat token fields replaced with `stakeToken: StakingTokenInfo` and optional `receiveToken?: StakingTokenInfo`
+
+Breaking changes in `@ton/appkit`:
+- `getStakingProviders()` return type changed from `string[]` to `StakingProviderInterface[]`
+
+New in `@ton/walletkit`:
+- Added `StakingTokenInfo` type (exported)
+- `contractAddress` is now optional in `StakingProviderMetadata` (for custodial providers)
+- Added `isReversed` to `StakingQuoteParams` for reversed unstake quotes
+- `TonStakersStakingProvider` accepts `metadataOverride` in config; constructor deep-merges overrides with defaults
+- `BaseProvider` moved from `interfaces` to `models/core` and re-exported
+- Added `TokenAddress` type (`'ton' | UserFriendlyAddress`)
+- `StakingErrorCode` now exported
+- `DefiError.UNSUPPORTED_NETWORK` error code added
+- `StakingManager`, `StakingProvider`, `StakingError` are now value exports (not only type exports)
+
+New in `@ton/appkit`:
+- Added actions: `getStakingProvider`, `getStakingProviderMetadata`, `watchStakingProviders`
+- Added utilities: `truncateDecimals`, `calcMaxSpendable`
+- `StakingProviderMetadata` and `StakingTokenInfo` now exported from `@ton/appkit`
+
+New in `@ton/appkit-react`:
+- Added `StakingWidget` — full stake/unstake UI with reversed quotes, balance display, and unstake mode selector
+- New components: `StakingWidgetProvider`, `StakingWidgetUi`, `StakingInfo`, `StakingBalanceBlock`, `SelectUnstakeMode`
+- New hooks: `useStakingProvider`, `useStakingProviders`, `useStakingProviderInfo`, `useStakingProviderMetadata`, `useStakingQuote`, `useBuildStakeTransaction`, `useStakedBalance`
+- Added English localizations for all staking UI strings

.changeset/swap-widget.md

@@ -0,0 +1,41 @@
+---
+'@ton/walletkit': major
+'@ton/appkit': minor
+'@ton/appkit-react': minor
+---
+
+**Swap widget and provider API**
+
+Breaking changes in `@ton/walletkit`:
+- `DefiManagerError` renamed to `DefiError`; update any `catch (e instanceof DefiManagerError)` or direct import
+- `SwapFee` type removed; `fee` field removed from `SwapQuote`
+- `getSupportedNetworks()` and `getMetadata()` added as abstract methods to `SwapProvider` — existing custom provider subclasses must implement them
+
+New in `@ton/walletkit`:
+- Added `SwapProviderMetadata` and `SwapProviderMetadataOverride` types
+- `getMetadata()` on `SwapProviderInterface` returns static display info (name, logo, URL)
+- `getSupportedNetworks()` on `SwapProviderInterface` returns supported networks
+- `DeDustSwapProvider` and `OmnistonSwapProvider` expose metadata; both accept `metadataOverride` in config
+- `getProviders()` replaces `getRegisteredProviders()` — returns `SwapProviderInterface[]` instead of `string[]`
+- `removeProvider()` added to `DefiManagerAPI`
+- Re-registering a provider with an existing id now replaces it instead of throwing
+- `DefiError.UNSUPPORTED_NETWORK` error code added
+- `SwapError`, `SwapManager`, `SwapProvider` are now value exports (not only type exports)
+- Providers emit `provider:registered` and `provider:default-changed` events on `AppKit`'s event emitter
+
+New in `@ton/appkit`:
+- Added actions: `getSwapProvider`, `getSwapProviders`, `watchSwapProviders`, `setDefaultSwapProvider`
+- `getSwapQuote` now resolves the active network automatically when `network` is omitted
+- Added utilities: `calcFiatValue`, `formatLargeValue`, `debounce`, `calcMaxSpendable`, `getTonShortfall`
+
+New in `@ton/appkit-react`:
+- Added `SwapWidget` — full-featured swap UI with token selection, amount input, slippage settings, provider picker, and top-up flow
+- New components: `SwapField`, `SwapFlipButton`, `SwapInfo`, `SwapSettingsButton`, `SwapSettingsModal`, `SwapTokenSelectModal`, `SwapWidgetProvider`, `SwapWidgetUi`
+- New hooks: `useSwapProvider`, `useSwapProviders`, `useSwapQuote`, `useBuildSwapTransaction`
+- Added generic `LowBalanceModal` component (shared with staking widget)
+- New utility hooks: `useDebounceCallback`, `useDebounceValue`, `useUnmount`
+- New shared components: `Input`, `Modal`, `Dialog`, `Skeleton`, `Tabs`, `InfoBlock`, `Collapsible`, `CenteredAmountInput`, `AmountPresets`, `TokenSelectModal`, `Logo`, `AmountReversed`
+- Added `AppKitUIToken` type for CSS custom property tokens
+- `useAppKit`, `useAppKitTheme`, `useI18n` moved to `features/settings` (still re-exported from the package root — no import path change needed)
+- `CircleIcon` renamed to `Logo` with an extended API; replace `<CircleIcon src=... />` with `<Logo src=... />`
+- Added English localizations for all swap UI strings

.superset/config.json

@@ -0,0 +1,5 @@
+{
+  "setup": [],
+  "teardown": [],
+  "run": []
+}

apps/appkit-minter/package.json

@@ -22,6 +22,10 @@
     "@ton/crypto": "catalog:",
     "@tonconnect/sdk": "catalog:",
     "@tonconnect/ui-react": "catalog:",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-tooltip": "1.2.8",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/appkit-minter/src/app.tsx

@@ -12,8 +12,7 @@ import { AppKitProvider } from '@ton/appkit-react';
 import { appKit } from '@/core/configs/app-kit';
 import { AppRouter, ThemeProvider, ToasterProvider } from '@/core/components';
 
-import './core/styles/app.css';
-import '@ton/appkit-react/styles.css';
+import './core/styles/index.css';
 
 const queryClient = new QueryClient();
 

apps/appkit-minter/src/core/components/app-logo/app-logo.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { ComponentProps, FC } from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+export const AppLogo: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+    return (
+        <div
+            className={cn(
+                'flex size-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/60 p-1',
+                className,
+            )}
+            {...props}
+        >
+            <svg
+                viewBox="-33 0 255 255"
+                xmlns="http://www.w3.org/2000/svg"
+                preserveAspectRatio="xMidYMid"
+                className="h-full w-full"
+                aria-hidden="true"
+            >
+                <defs>
+                    <linearGradient
+                        id="app-logo-fire"
+                        gradientUnits="userSpaceOnUse"
+                        x1="94.141"
+                        y1="255"
+                        x2="94.141"
+                        y2="0.188"
+                    >
+                        <stop offset="0" stopColor="#ff4c0d" />
+                        <stop offset="1" stopColor="#fc9502" />
+                    </linearGradient>
+                </defs>
+                <g>
+                    <path
+                        fill="url(#app-logo-fire)"
+                        fillRule="evenodd"
+                        d="M187.899,164.809 C185.803,214.868 144.574,254.812 94.000,254.812 C42.085,254.812 -0.000,211.312 -0.000,160.812 C-0.000,154.062 -0.121,140.572 10.000,117.812 C16.057,104.191 19.856,95.634 22.000,87.812 C23.178,83.513 25.469,76.683 32.000,87.812 C35.851,94.374 36.000,103.812 36.000,103.812 C36.000,103.812 50.328,92.817 60.000,71.812 C74.179,41.019 62.866,22.612 59.000,9.812 C57.662,5.384 56.822,-2.574 66.000,0.812 C75.352,4.263 100.076,21.570 113.000,39.812 C131.445,65.847 138.000,90.812 138.000,90.812 C138.000,90.812 143.906,83.482 146.000,75.812 C148.365,67.151 148.400,58.573 155.999,67.813 C163.226,76.600 173.959,93.113 180.000,108.812 C190.969,137.321 187.899,164.809 187.899,164.809 Z"
+                    />
+                    <path
+                        fill="#fc9502"
+                        fillRule="evenodd"
+                        d="M94.000,254.812 C58.101,254.812 29.000,225.711 29.000,189.812 C29.000,168.151 37.729,155.000 55.896,137.166 C67.528,125.747 78.415,111.722 83.042,102.172 C83.953,100.292 86.026,90.495 94.019,101.966 C98.212,107.982 104.785,118.681 109.000,127.812 C116.266,143.555 118.000,158.812 118.000,158.812 C118.000,158.812 125.121,154.616 130.000,143.812 C131.573,140.330 134.753,127.148 143.643,140.328 C150.166,150.000 159.127,167.390 159.000,189.812 C159.000,225.711 129.898,254.812 94.000,254.812 Z"
+                    />
+                    <path
+                        fill="#fce202"
+                        fillRule="evenodd"
+                        d="M95.000,183.812 C104.250,183.812 104.250,200.941 116.000,223.812 C123.824,239.041 112.121,254.812 95.000,254.812 C77.879,254.812 69.000,240.933 69.000,223.812 C69.000,206.692 85.750,183.812 95.000,183.812 Z"
+                    />
+                </g>
+            </svg>
+        </div>
+    );
+};

apps/appkit-minter/src/features/swap/index.ts → apps/appkit-minter/src/core/components/app-logo/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export * from './components/swap-button';
+export { AppLogo } from './app-logo';

apps/appkit-minter/src/core/components/common/index.ts

@@ -6,5 +6,4 @@
  *
  */
 
-export { Button } from './button';
 export { Card } from './card';

apps/appkit-minter/src/core/components/index.ts

@@ -7,8 +7,14 @@
  */
 
 // Common components
-export { Button, Card } from './common';
+export { Card } from './common';
 export { ToasterProvider } from './common/toaster-provider';
 
 // Layout components
 export { Layout, AppRouter, ThemeProvider } from './layout';
+
+// UI components
+export { Sidebar } from './sidebar';
+export { Sheet } from './sheet';
+export { Separator } from './separator';
+export { Tooltip } from './tooltip';

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

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