Dev/tim/cross wallet deposit

.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

.gitignore

@@ -35,3 +35,4 @@ packages/walletkit-android-bridge/*.sh
 
 release-artifacts
 *.tgz
+apps/appkit-minter/Caddyfile

apps/appkit-minter/package.json

@@ -20,8 +20,13 @@
     "@ton/appkit-react": "workspace:*",
     "@ton/core": "catalog:",
     "@ton/crypto": "catalog:",
+    "@privy-io/react-auth": "^3.22.1",
     "@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

@@ -9,11 +9,13 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AppKitProvider } from '@ton/appkit-react';
 
+import { PrivyBridgeProvider } from './privyProvider';
+
 import { appKit } from '@/core/configs/app-kit';
-import { AppRouter, ThemeProvider, ToasterProvider } from '@/core/components';
+import { ENV_PRIVY_APP_ID } from '@/core/configs/env';
+import { AppRouter, ThemeProvider, ToasterProvider, TelegramPrivyAutoConnect } from '@/core/components';
 
-import './core/styles/app.css';
-import '@ton/appkit-react/styles.css';
+import './core/styles/index.css';
 
 const queryClient = new QueryClient();
 
@@ -22,8 +24,17 @@ export const App = () => {
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <QueryClientProvider client={queryClient}>
                 <AppKitProvider appKit={appKit}>
-                    <AppRouter />
-                    <ToasterProvider />
+                    <PrivyBridgeProvider>
+                        <AppRouter />
+                        <ToasterProvider />
+
+                        {ENV_PRIVY_APP_ID && (
+                            <>
+                                <TelegramPrivyAutoConnect />
+                                {/* <PrivyDebugPanel /> */}
+                            </>
+                        )}
+                    </PrivyBridgeProvider>
                 </AppKitProvider>
             </QueryClientProvider>
         </ThemeProvider>

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,18 @@
  */
 
 // 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';
+
+// Integrations
+export { TelegramPrivyAutoConnect } from './telegram-privy-auto-connect';
+export { PrivyDebugPanel } from './privy-debug-panel';

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

@@ -11,7 +11,16 @@ 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,
+    OnrampPage,
+    SignMessagePage,
+    NftPurchasePage,
+    NftPurchaseCollectionPage,
+    GaslessPage,
+} from '@/pages';
 
 export const AppRouter: React.FC = () => {
     // Enable global real-time balance updates
@@ -50,6 +59,13 @@ export const AppRouter: React.FC = () => {
         <BrowserRouter>
             <Routes>
                 <Route path="/" element={<MinterPage />} />
+                <Route path="/swap" element={<SwapPage />} />
+                <Route path="/staking" element={<StakingPage />} />
+                <Route path="/onramp" element={<OnrampPage />} />
+                <Route path="/sign" element={<SignMessagePage />} />
+                <Route path="/buy-nft" element={<NftPurchasePage />} />
+                <Route path="/buy-nft/:collectionAddress" element={<NftPurchaseCollectionPage />} />
+                <Route path="/gasless" element={<GaslessPage />} />
                 <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
         </BrowserRouter>

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

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type React from 'react';
+import { Zap, Coins, ArrowLeftRight, Sparkles, BookOpen, Github, PenLine, CreditCard, ShoppingBag } from 'lucide-react';
+import { Link, NavLink } from 'react-router-dom';
+
+import { AppLogo } from '../app-logo';
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '@/core/components/sidebar';
+import { NetworkPicker } from '@/features/network';
+import { WalletSelector } from '@/features/wallet';
+
+const NAV_LINKS: readonly { to: string; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
+    { to: '/', label: 'Mint', icon: Sparkles },
+    { to: '/swap', label: 'Swap', icon: ArrowLeftRight },
+    { to: '/staking', label: 'Staking', icon: Coins },
+    { to: '/onramp', label: 'Buy', icon: CreditCard },
+    { to: '/buy-nft', label: 'Buy NFT', icon: ShoppingBag },
+    { to: '/sign', label: 'Sign Message', icon: PenLine },
+    { to: '/gasless', label: 'Gasless', icon: Zap },
+];
+
+const EXTERNAL_LINKS: readonly { href: string; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
+    { href: 'https://docs.ton.org/ecosystem/appkit/overview', label: 'Docs', icon: BookOpen },
+    { href: 'https://github.com/ton-connect/kit', label: 'GitHub', icon: Github },
+];
+
+export const AppSidebar: React.FC = () => {
+    const { setOpenMobile, isMobile } = useSidebar();
+
+    const closeOnMobile = () => {
+        if (isMobile) setOpenMobile(false);
+    };
+
+    return (
+        <Sidebar collapsible="icon" variant="floating">
+            <SidebarHeader>
+                <Link to="/" onClick={closeOnMobile} className="flex h-8 items-center gap-2 overflow-hidden">
+                    <AppLogo className="size-8" />
+                    <span className="truncate text-base font-bold group-data-[collapsible=icon]:hidden">
+                        NFT Minter
+                    </span>
+                </Link>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {NAV_LINKS.map(({ to, label, icon: Icon }) => (
+                                <SidebarMenuItem key={to}>
+                                    <NavLink to={to} end={to === '/'} onClick={closeOnMobile}>
+                                        {({ isActive }) => (
+                                            <SidebarMenuButton isActive={isActive} tooltip={label}>
+                                                <Icon />
+                                                <span>{label}</span>
+                                            </SidebarMenuButton>
+                                        )}
+                                    </NavLink>
+                                </SidebarMenuItem>
+                            ))}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+
+            <SidebarFooter>
+                <SidebarMenu>
+                    {EXTERNAL_LINKS.map(({ href, label, icon: Icon }) => (
+                        <SidebarMenuItem key={href}>
+                            <SidebarMenuButton asChild tooltip={label}>
+                                <a href={href} target="_blank" rel="noreferrer">
+                                    <Icon />
+                                    <span>{label}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+                <div className="group-data-[collapsible=icon]:hidden">
+                    <NetworkPicker />
+                </div>
+                <WalletSelector />
+            </SidebarFooter>
+        </Sidebar>
+    );
+};