TON-354: staking manager and TonStakers Provider

.changeset/wet-peas-beam.md

@@ -0,0 +1,7 @@
+---
+'@ton/appkit-react': patch
+'@ton/walletkit': patch
+'@ton/appkit': patch
+---
+
+Implemented staking infrastructure including \`StakingManager\` and \`TonStakersStakingProvider\` with support for multiple unstake modes (delayed, instant, best rate). Added core type updates and exported staking features from the package root.

apps/appkit-minter/src/core/configs/app-kit.ts

@@ -7,32 +7,33 @@
  */
 
 import { AppKit, Network } from '@ton/appkit';
-import { TonConnectConnector, ApiClientTonApi } from '@ton/appkit';
+import { TonConnectConnector, ApiClientTonApi, ApiClientToncenter } from '@ton/appkit';
 import { DeDustSwapProvider } from '@ton/appkit/swap/dedust';
 import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
+import { TonStakersStakingProvider } from '@ton/appkit/staking/tonstakers';
 
 import { ENV_TON_API_KEY_TESTNET, ENV_TON_API_KEY_MAINNET } from '@/core/configs/env';
 
+const mainnetApiClient = new ApiClientToncenter({
+    network: Network.mainnet(),
+    apiKey: ENV_TON_API_KEY_MAINNET,
+});
+
+const testnetApiClient = new ApiClientToncenter({
+    network: Network.testnet(),
+    apiKey: ENV_TON_API_KEY_TESTNET,
+});
+
+const tetraApiClient = new ApiClientTonApi({
+    network: Network.tetra(),
+    endpoint: 'https://tetra.tonapi.io',
+});
+
 export const appKit = new AppKit({
     networks: {
-        [Network.mainnet().chainId]: {
-            apiClient: {
-                url: 'https://toncenter.com',
-                key: ENV_TON_API_KEY_MAINNET,
-            },
-        },
-        [Network.testnet().chainId]: {
-            apiClient: {
-                url: 'https://testnet.toncenter.com',
-                key: ENV_TON_API_KEY_TESTNET,
-            },
-        },
-        [Network.tetra().chainId]: {
-            apiClient: new ApiClientTonApi({
-                network: Network.tetra(),
-                endpoint: 'https://tetra.tonapi.io',
-            }),
-        },
+        [Network.mainnet().chainId]: { apiClient: mainnetApiClient },
+        [Network.testnet().chainId]: { apiClient: testnetApiClient },
+        [Network.tetra().chainId]: { apiClient: tetraApiClient },
     },
     connectors: [
         new TonConnectConnector({
@@ -41,5 +42,12 @@ export const appKit = new AppKit({
             },
         }),
     ],
-    providers: [new DeDustSwapProvider(), new OmnistonSwapProvider()],
+    providers: [
+        new DeDustSwapProvider(),
+        new OmnistonSwapProvider(),
+        new TonStakersStakingProvider({
+            [Network.mainnet().chainId]: { apiClient: mainnetApiClient },
+            [Network.testnet().chainId]: { apiClient: testnetApiClient },
+        }),
+    ],
 });

apps/appkit-minter/src/features/staking/components/stake-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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 type { FC } from 'react';
+import {
+    Transaction,
+    useStakingQuote,
+    useNetwork,
+    useAddress,
+    useBuildStakeTransaction,
+    useBuildUnstakeTransaction,
+} from '@ton/appkit-react';
+
+interface StakeButtonProps {
+    amount: string;
+    direction: 'stake' | 'unstake';
+    providerId?: string;
+}
+
+export const StakeButton: FC<StakeButtonProps> = ({ amount, direction, providerId }) => {
+    const network = useNetwork();
+    const address = useAddress();
+
+    const {
+        data: quote,
+        isError,
+        isLoading,
+    } = useStakingQuote({
+        amount,
+        direction,
+        network,
+        providerId,
+    });
+
+    const { mutateAsync: buildStakeTransaction } = useBuildStakeTransaction();
+    const { mutateAsync: buildUnstakeTransaction } = useBuildUnstakeTransaction();
+
+    const handleTransaction = () => {
+        if (!quote || !address) {
+            return Promise.reject(new Error('Missing quote or address'));
+        }
+
+        if (direction === 'stake') {
+            return buildStakeTransaction({
+                quote,
+                userAddress: address,
+            });
+        }
+
+        return buildUnstakeTransaction({
+            quote,
+            userAddress: address,
+        });
+    };
+
+    const buttonText = useMemo(() => {
+        if (isLoading) {
+            return 'Fetching quote...';
+        }
+
+        if (isError || !quote) {
+            return 'Staking Unavailable';
+        }
+
+        const action = direction === 'stake' ? 'Stake' : 'Unstake';
+        return `${action} ${quote.amountIn} ${direction === 'stake' ? 'TON' : 'tsTON'} -> ${quote.amountOut} ${direction === 'stake' ? 'tsTON' : 'TON'}`;
+    }, [isLoading, isError, quote, direction]);
+
+    return <Transaction request={handleTransaction} disabled={!quote || isLoading || isError} text={buttonText} />;
+};

apps/appkit-minter/src/features/staking/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export * from './components/stake-button';

apps/appkit-minter/src/pages/minter-page.tsx

@@ -13,8 +13,9 @@ import { TokensCard } from '@/features/balances';
 import { CardGenerator } from '@/features/mint';
 import { NftsCard } from '@/features/nft';
 import { WalletInfo } from '@/features/wallet';
-import { Layout } from '@/core/components';
+import { Card, Layout } from '@/core/components';
 import { SwapButton } from '@/features/swap';
+import { StakeButton } from '@/features/staking';
 import { SignMessageCard } from '@/features/signing';
 
 export const MinterPage: React.FC = () => {
@@ -35,8 +36,7 @@ export const MinterPage: React.FC = () => {
                         <TokensCard />
                         <NftsCard />
                         <SignMessageCard />
-                        <div className="p-4 bg-gray-100 rounded-lg dark:bg-gray-800">
-                            <h3 className="mb-2 text-sm font-medium text-gray-500 uppercase">Swap Demo</h3>
+                        <Card title="Swap">
                             <div className="flex flex-col gap-2">
                                 <div>Default provider:</div>
                                 <SwapButton amount="0.101" direction="from" />
@@ -50,7 +50,15 @@ export const MinterPage: React.FC = () => {
                                 <SwapButton amount="0.105" direction="from" providerId="dedust" />
                                 <SwapButton amount="0.106" direction="to" providerId="dedust" />
                             </div>
-                        </div>
+                        </Card>
+
+                        <Card title="Staking">
+                            <div className="flex flex-col gap-2">
+                                <div>Tonstakers:</div>
+                                <StakeButton amount="1" direction="stake" />
+                                <StakeButton amount="1" direction="unstake" />
+                            </div>
+                        </Card>
                     </div>
                 )}
             </div>

apps/demo-wallet/src/components/AppRouter.tsx

@@ -21,6 +21,7 @@ import {
     TracePage,
     TransactionDetail,
     Swap,
+    Staking,
 } from '../pages';
 
 import { useWalletDataUpdater } from '@/hooks/useWalletDataUpdater';
@@ -119,6 +120,14 @@ export const AppRouter: React.FC = () => {
                         </ProtectedRoute>
                     }
                 />
+                <Route
+                    path="/staking"
+                    element={
+                        <ProtectedRoute requiresWallet>
+                            <Staking />
+                        </ProtectedRoute>
+                    }
+                />
                 <Route
                     path="/wallet/transactions/:hash"
                     element={

apps/demo-wallet/src/components/staking/StakingInfo.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { FC } from 'react';
+import { useStaking } from '@demo/wallet-core';
+
+import { Card } from '../Card';
+
+export const StakingInfo: FC = () => {
+    const { stakedBalance, providerInfo } = useStaking();
+
+    return (
+        <div className="space-y-6">
+            <Card title="Your Stake">
+                <div className="space-y-4">
+                    <div>
+                        <p className="text-sm text-gray-500 mb-1">Balance</p>
+                        <p className="text-2xl font-bold text-gray-900">
+                            {stakedBalance?.stakedBalance ? stakedBalance?.stakedBalance : '0.00'} tsTON
+                        </p>
+                    </div>
+                </div>
+            </Card>
+
+            <Card title="Pool Info">
+                <div className="space-y-4">
+                    <div className="flex justify-between items-center">
+                        <span className="text-sm text-gray-500">Provider</span>
+                        <span className="text-sm font-medium">Tonstakers</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                        <span className="text-sm text-gray-500">APY</span>
+                        <span className="text-sm font-bold text-green-600">
+                            {providerInfo?.apy ? `${providerInfo.apy.toFixed(2)}%` : '--'}
+                        </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                        <span className="text-sm text-gray-500">Instant Unstake Available</span>
+                        <span className="text-sm font-medium">
+                            {providerInfo?.instantUnstakeAvailable
+                                ? Number(providerInfo?.instantUnstakeAvailable).toFixed(4)
+                                : '0.00'}{' '}
+                            TON
+                        </span>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    );
+};