TON-376: Swap 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

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/common/index.ts

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

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

@@ -7,7 +7,7 @@
  */
 
 // Common components
-export { Button, Card } from './common';
+export { Card } from './common';
 export { ToasterProvider } from './common/toaster-provider';
 
 // Layout components

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, SwapPage } from '@/pages';
 
 export const AppRouter: React.FC = () => {
     // Enable global real-time balance updates
@@ -50,6 +50,7 @@ export const AppRouter: React.FC = () => {
         <BrowserRouter>
             <Routes>
                 <Route path="/" element={<MinterPage />} />
+                <Route path="/swap" element={<SwapPage />} />
                 <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
         </BrowserRouter>

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

@@ -9,27 +9,27 @@
 import type React from 'react';
 import { TonConnectButton } from '@ton/appkit-react';
 import { Layers } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 import { ThemeSwitcher } from './theme-switcher';
 
 import { NetworkPicker } from '@/features/network';
 
 interface LayoutProps {
     children: React.ReactNode;
-    title?: string;
 }
 
-export const Layout: React.FC<LayoutProps> = ({ children, title = 'NFT Minter' }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
     return (
         <div className="min-h-screen bg-background">
             <header className="bg-card shadow-sm border-b border-border sticky top-0 z-10">
                 <div className="max-w-2xl mx-auto px-4 py-3 flex items-center">
-                    <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                    <Link to="/" className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center hover:opacity-90 transition-opacity">
                             <Layers className="w-5 h-5 text-white" />
                         </div>
-                        <h1 className="text-xl font-bold text-foreground">{title}</h1>
-                    </div>
+                        <h1 className="text-xl font-bold text-foreground">NFT Minter</h1>
+                    </Link>
 
                     <div className="ml-auto flex items-center gap-2">
                         <NetworkPicker />

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

@@ -7,19 +7,17 @@
  */
 
 import { Moon, Sun } from 'lucide-react';
+import { Button } from '@ton/appkit-react';
 
 import { useTheme } from '@/core/hooks';
 
 export function ThemeSwitcher() {
     const { theme, setTheme } = useTheme();
 
     return (
-        <button
-            className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9"
-            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-        >
+        <Button size="s" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
             {theme === 'light' ? <Sun className="h-[1.2rem] w-[1.2rem]" /> : <Moon className="h-[1.2rem] w-[1.2rem]" />}
             <span className="sr-only">Toggle theme</span>
-        </button>
+        </Button>
     );
 }

apps/appkit-minter/src/core/hooks/use-theme.ts

@@ -8,17 +8,24 @@
 
 import { useContext, useEffect } from 'react';
 import { useAppKitTheme } from '@ton/appkit-react';
+import { useTonConnectUI, THEME } from '@tonconnect/ui-react';
 
 import { ThemeProviderContext } from '@/core/components/layout/theme-provider';
 
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
     const [, setTheme] = useAppKitTheme();
+    const [tonconnect] = useTonConnectUI();
 
     if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
 
     useEffect(() => {
         setTheme(context.theme);
+        tonconnect.uiOptions = {
+            uiPreferences: {
+                theme: context.theme === 'dark' ? THEME.DARK : THEME.LIGHT,
+            },
+        };
     }, [context.theme]);
 
     return context;