+
+
+ );
+};
diff --git a/apps/appkit-minter/src/features/swap/index.ts b/apps/appkit-minter/src/core/components/app-logo/index.ts
similarity index 79%
rename from apps/appkit-minter/src/features/swap/index.ts
rename to apps/appkit-minter/src/core/components/app-logo/index.ts
index 7857dca09..34fa898aa 100644
--- a/apps/appkit-minter/src/features/swap/index.ts
+++ b/apps/appkit-minter/src/core/components/app-logo/index.ts
@@ -6,4 +6,4 @@
*
*/
-export * from './components/swap-button';
+export { AppLogo } from './app-logo';
diff --git a/apps/appkit-minter/src/core/components/common/button.tsx b/apps/appkit-minter/src/core/components/common/button.tsx
deleted file mode 100644
index b30647602..000000000
--- a/apps/appkit-minter/src/core/components/common/button.tsx
+++ /dev/null
@@ -1,62 +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 React from 'react';
-import { Loader2 } from 'lucide-react';
-
-import { cn } from '@/core/lib/utils';
-
-interface ButtonProps extends React.ButtonHTMLAttributes
+
+
+ {wallet && (
+
+ );
+};
diff --git a/apps/appkit-minter/src/core/components/layout/index.ts b/apps/appkit-minter/src/core/components/layout/index.ts
index cb45e3000..235914793 100644
--- a/apps/appkit-minter/src/core/components/layout/index.ts
+++ b/apps/appkit-minter/src/core/components/layout/index.ts
@@ -7,5 +7,6 @@
*/
export { Layout } from './layout';
+export { AppSidebar } from './app-sidebar';
export { AppRouter } from './app-router';
export { ThemeProvider } from './theme-provider';
diff --git a/apps/appkit-minter/src/core/components/layout/layout.tsx b/apps/appkit-minter/src/core/components/layout/layout.tsx
index 22a88bcd6..e140c0917 100644
--- a/apps/appkit-minter/src/core/components/layout/layout.tsx
+++ b/apps/appkit-minter/src/core/components/layout/layout.tsx
@@ -7,43 +7,44 @@
*/
import type React from 'react';
-import { TonConnectButton } from '@ton/appkit-react';
-import { Layers } from 'lucide-react';
+import { AppSidebar } from './app-sidebar';
+import { HeaderWallet } from './header-wallet';
import { ThemeSwitcher } from './theme-switcher';
-import { NetworkPicker } from '@/features/network';
+import { Separator } from '@/core/components/separator';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/core/components/sidebar';
interface LayoutProps {
- children: React.ReactNode;
title?: string;
+ children: React.ReactNode;
}
-export const Layout: React.FC
+
+ )}
+
+
+
+ {truncateAddress(address)}
+
+
+
+
-
-
-
- {children}
-
-
-
+
-
-
-
-
-
-
- {title}
-
-
- {title}
+ + )} + +
+ {label}
+ {value}
+
+);
+
+const Pill = ({ tone, children }: { tone: 'ok' | 'off' | 'warn'; children: ReactNode }) => {
+ const toneClass =
+ tone === 'ok'
+ ? 'bg-green-500/15 text-green-500'
+ : tone === 'warn'
+ ? 'bg-amber-500/15 text-amber-500'
+ : 'bg-muted/40 text-muted-foreground';
+ return (
+
+ {children}
+
+ );
+};
+
+export const PrivyDebugPanel = () => {
+ const [open, setOpen] = useState(false);
+ const { ready, authenticated, user } = usePrivy();
+ const [selectedWallet] = useSelectedWallet();
+ const connectedWallets = useConnectedWallets();
+ const connectors = useConnectors();
+ const privyConnector = useConnectorById(PRIVY_DEFAULT_CONNECTOR_ID) as PrivyConnector | undefined;
+
+ const [debugInfo, setDebugInfo] = useState
+
+
+ {open && (
+
+ );
+};
diff --git a/apps/appkit-minter/src/core/components/separator/index.ts b/apps/appkit-minter/src/core/components/separator/index.ts
new file mode 100644
index 000000000..319a2d70b
--- /dev/null
+++ b/apps/appkit-minter/src/core/components/separator/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 { Separator } from './separator';
diff --git a/apps/appkit-minter/src/core/components/separator/separator.tsx b/apps/appkit-minter/src/core/components/separator/separator.tsx
new file mode 100644
index 000000000..9413ef728
--- /dev/null
+++ b/apps/appkit-minter/src/core/components/separator/separator.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.
+ *
+ */
+
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/core/lib/utils';
+
+function Separator({
+ className,
+ orientation = 'horizontal',
+ decorative = true,
+ ...props
+}: React.ComponentProps
+ |
+ |
+ |
+ |
+ a.type).join(', ') : '—'}
+ />
+ |
+
+ |
+ |
+ {debugInfo.error} : '—'}
+ />
+ |
+ |
+ |
+
+ `${c.id}:${c.type}`).join(', ') : '—'}
+ />
+ |
+ |
+ |
+ |
+ |
+ |
+
+ )}
+
+ Privy
+
+
+ PrivyConnector
+
+
+ AppKit
+
+
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon &&
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+ return (
+
+
+ ) : (
+ <>
+
+
+ Amount
+
+
+ setAmount(e.target.value)}
+ placeholder="0.00"
+ step="any"
+ min="0"
+ />
+
+
+
+
+
+ Comment (optional)
+
+
+ setComment(e.target.value)}
+ placeholder="Add a comment"
+ />
+
+
+
+ {error && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {error}
+
+
+
+
+
+ )}
+
- > = (props) => {
@@ -74,26 +75,27 @@ export const TokensCard: FC
-
+
+ )}
+
);
};
diff --git a/apps/appkit-minter/src/features/balances/components/tokens-card.tsx b/apps/appkit-minter/src/features/balances/components/tokens-card.tsx
index c64afec63..a0cdcd87f 100644
--- a/apps/appkit-minter/src/features/balances/components/tokens-card.tsx
+++ b/apps/appkit-minter/src/features/balances/components/tokens-card.tsx
@@ -12,10 +12,11 @@ import type { Jetton } from '@ton/appkit';
import { getFormattedJettonInfo } from '@ton/appkit';
import { CurrencyItem, useJettons, useBalance } from '@ton/appkit-react';
import { AlertCircle } from 'lucide-react';
+import { Button } from '@ton/appkit-react';
import { TokenTransferModal } from './token-transfer-modal';
-import { Card, Button } from '@/core/components';
+import { Card } from '@/core/components';
interface SelectedToken {
type: 'TON' | 'JETTON';
@@ -55,7 +56,7 @@ export const TokensCard: FC
- !open && handleClose()}>
+
+
+
-
-
- {txBoc ? (
-
-
-
-
- {tokenInfo.image ? (
- 
- ) : tokenType === 'TON' ? (
-
-
-
- Transfer {tokenInfo.name}
-- Balance: {tokenInfo.balance} {tokenInfo.symbol} -
-
-
+
+
-
+ {tokenInfo.image ? (
+
+ ) : tokenType === 'TON' ? (
+
+
+ {txBoc ? (
+
-
+
-
- setRecipientAddress(e.target.value)}
- placeholder="Enter TON address"
- className="w-full px-3 py-2 bg-input border border-border rounded-lg focus:ring-2 focus:ring-ring focus:border-ring text-sm text-foreground placeholder:text-muted-foreground"
- />
-
-
-
-
- setAmount(e.target.value)}
- placeholder="0.00"
- step="any"
- min="0"
- className="w-full px-3 py-2 bg-input border border-border rounded-lg focus:ring-2 focus:ring-ring focus:border-ring text-sm text-foreground placeholder:text-muted-foreground"
- />
-
-
-
-
- setComment(e.target.value)}
- placeholder="Add a comment"
- className="w-full px-3 py-2 bg-input border border-border rounded-lg focus:ring-2 focus:ring-ring focus:border-ring text-sm text-foreground placeholder:text-muted-foreground"
- />
-
-
- {transferError && (
-
-
- )}
+ {tokenInfo.symbol?.slice(0, 2)}
+ )}
+ {transferError}
-
+
+ Available Balance
++ {tokenInfo.balance} {tokenInfo.symbol} +
+
+
+ ) : (
+ <>
+
+
+
+ Recipient Address
+
+
+ setRecipientAddress(e.target.value)}
+ placeholder="Enter TON address"
+ />
+
+
+
+
+
+ Amount
+
+
+ setAmount(e.target.value)}
+ placeholder="0.00"
+ step="any"
+ min="0"
+ />
+
+
+
+
+
+ Comment (optional)
+
+
+ setComment(e.target.value)}
+ placeholder="Add a comment"
+ />
+
+
+
+ {transferError && (
+
-
+
+ )}
+ {transferError}
- {tokenType === 'TON' && (
- setTransferError(getErrorMessage(error))}
- onSuccess={(data) => setTxBoc(data.boc)}
+
-
+ {tokenType === 'TON' && (
+ setTransferError(getErrorMessage(error))}
+ onSuccess={(data) => setTxBoc(data.boc)}
+ >
+ {({ isLoading, onSubmit, disabled, text }) => (
+
+ {text}
+
)}
-
- {tokenType === 'JETTON' && jetton?.address && (
- setTransferError(getErrorMessage(error))}
- onSuccess={(data) => setTxBoc(data.boc)}
+
+ )}
+
+ {tokenType === 'JETTON' && jetton?.address && (
+ setTransferError(getErrorMessage(error))}
+ onSuccess={(data) => setTxBoc(data.boc)}
+ >
+ {({ isLoading, onSubmit, disabled, text }) => (
+
+ {text}
+
)}
+
+ )}
-
-
-
- )}
- Failed to load balances
-
{/* Summary */}
- = ({ className }) => {
{/* Action buttons */}
diff --git a/apps/appkit-minter/src/features/swap/components/swap-button.tsx b/apps/appkit-minter/src/features/swap/components/swap-button.tsx
deleted file mode 100644
index 58afd4145..000000000
--- a/apps/appkit-minter/src/features/swap/components/swap-button.tsx
+++ /dev/null
@@ -1,67 +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 { useMemo } from 'react';
-import type { FC } from 'react';
-import { Send, useSwapQuote, useNetwork, useAddress, useBuildSwapTransaction } from '@ton/appkit-react';
-
-const USDT_ADDRESS = 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs';
-const TON = { address: 'ton', decimals: 9, symbol: 'TON' };
-const USDT = { address: USDT_ADDRESS, decimals: 6, symbol: 'USDT' };
-
-interface SwapButtonProps {
- amount: string;
- direction: 'from' | 'to';
- providerId?: string;
-}
-
-export const SwapButton: FC
-
diff --git a/apps/appkit-minter/src/features/balances/index.ts b/apps/appkit-minter/src/features/balances/index.ts
index 49fef305b..f82d93a82 100644
--- a/apps/appkit-minter/src/features/balances/index.ts
+++ b/apps/appkit-minter/src/features/balances/index.ts
@@ -9,3 +9,4 @@
// Components
export { TokensCard } from './components/tokens-card';
export { TokenTransferModal } from './components/token-transfer-modal';
+export { DepositButton } from './components/deposit-button';
diff --git a/apps/appkit-minter/src/features/mint/components/card-generator.tsx b/apps/appkit-minter/src/features/mint/components/card-generator.tsx
index 652d26443..90280e948 100644
--- a/apps/appkit-minter/src/features/mint/components/card-generator.tsx
+++ b/apps/appkit-minter/src/features/mint/components/card-generator.tsx
@@ -12,6 +12,7 @@ import { Sparkles, Coins, AlertCircle } from 'lucide-react';
import { useSelectedWallet, Send } from '@ton/appkit-react';
import { getErrorMessage } from '@ton/appkit';
import { toast } from 'sonner';
+import { Button } from '@ton/appkit-react';
import { CardPreview } from './card-preview';
import { useCardGenerator } from '../hooks/use-card-generator';
@@ -19,7 +20,7 @@ import { useNftMintTransaction } from '../hooks/use-nft-mint-transaction';
import { mintCard } from '../store/actions/mint-card';
import { setMintError } from '../store/actions/set-mint-error';
-import { Button, Card } from '@/core/components';
+import { Card } from '@/core/components';
interface CardGeneratorProps {
className?: string;
@@ -86,8 +87,12 @@ export const CardGenerator: React.FC+
+
{/* Token List */}
{totalTokens} {totalTokens === 1 ? 'Asset' : 'Assets'}
-
- setSelectedToken({ type: 'TON' })}
- icon="./ton.png"
- isVerified
- />
+ > = (props) => {
}
return (
- setSelectedToken({ type: 'JETTON', jetton })}
- />
+ className="flex items-center justify-between p-3 bg-muted rounded-lg border border-border"
+ >
+ setSelectedToken({ type: 'JETTON', jetton })}
+ />
+
);
})}
+ setSelectedToken({ type: 'TON' })}
+ icon="./ton.png"
+ isVerified
+ />
+
{/* Jettons */}
{jettons.map((jetton) => {
@@ -104,16 +106,19 @@ export const TokensCard: FC
-
@@ -111,11 +116,11 @@ export const CardGenerator: React.FC = ({ className }) => {
}
>
- = {
@@ -25,11 +27,12 @@ const getNetworkLabel = (chainId: string): string => {
export const NetworkPicker: FC> = ({ className, ...props }) => {
const [defaultNetwork, setDefaultNetwork] = useDefaultNetwork();
const networks = useNetworks();
- const [wallet] = useSelectedWallet();
const handleChange = (e: ChangeEvent) => {
const value = e.target.value;
+ saveStoredNetworkChainId(value);
+
if (value === '') {
setDefaultNetwork(undefined);
} else {
@@ -37,19 +40,14 @@ export const NetworkPicker: FC> = ({ className, ...prop
}
};
- if (wallet) {
- return null;
- }
-
return (
-
-
+
diff --git a/apps/appkit-minter/src/features/staking/components/stake-button.tsx b/apps/appkit-minter/src/features/staking/components/stake-button.tsx
index 0a0baa5e0..d23e13fcc 100644
--- a/apps/appkit-minter/src/features/staking/components/stake-button.tsx
+++ b/apps/appkit-minter/src/features/staking/components/stake-button.tsx
@@ -81,10 +81,12 @@ export const StakeButton: FC = ({
return (
-
- setAmountInput(e.target.value)}
- placeholder="Default: 1"
- step="any"
- min="0"
- className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring"
- />
+
+
+ Amount (optional)
+
+
+ setAmountInput(e.target.value)}
+ placeholder="Default: 1"
+ step="any"
+ min="0"
+ />
+
{amountInvalid ? (
- Enter a positive number or leave empty to use 1.
) : null}
-
+
- Enter a positive number or leave empty to use 1. -
+Tonstakers:
{UNSTAKE_MODE_OPTIONS.map(({ mode, label }) => (
-
+
))}
+
{UNSTAKE_MODE_OPTIONS.find((o) => o.mode === unstakeMode)?.hint}
+
-
-
-
-
- {wallet && (
-
- )}
-
-
-
- {!wallet && Connect wallet to mint
} - - {wallet && ( -
-
- )}
- - {truncateAddress(address)} -
- -Network: {networkLabel}
-
+
+ );
+};
diff --git a/apps/appkit-minter/src/features/wallet/index.ts b/apps/appkit-minter/src/features/wallet/index.ts
index 1063decdb..98f173253 100644
--- a/apps/appkit-minter/src/features/wallet/index.ts
+++ b/apps/appkit-minter/src/features/wallet/index.ts
@@ -6,4 +6,4 @@
*
*/
-export { WalletInfo } from './components/wallet-info';
+export { WalletSelector } from './components/wallet-selector';
diff --git a/apps/appkit-minter/src/main.tsx b/apps/appkit-minter/src/main.tsx
index 420ea6f7f..a611c5f40 100644
--- a/apps/appkit-minter/src/main.tsx
+++ b/apps/appkit-minter/src/main.tsx
@@ -12,11 +12,12 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './app';
+import { AppPrivyProvider } from './privyProvider';
-import './core/styles/index.css';
-
-createRoot(document.getElementById('root')!).render(
-
+ {wallets.map((wallet) => {
+ const walletId = wallet.getWalletId();
+ const address = wallet.getAddress();
+ const isActive = walletId === selectedWalletId;
+ const isCopied = copiedWalletId === walletId;
+
+ return (
+
+ );
+ })}
+
+
+
+ {distinctConnectorIds.map((connectorId) => (
+
+ ))}
+
+
+
+
+ {!address && (
+ Send USDT (Gasless)
++ Send USDT without having TON for gas. The fee will be paid in USDT. +
+
+ Please connect your wallet first.
+
+ )}
+
+ {address && (
+
+
+ )}
+
+
+
+
+
+ {usdtBalance ? Number(usdtBalance).toFixed(2) : '0.00'} USDT
+
+
+
+ setRecipient(e.target.value)}
+ placeholder="Address"
+ />
+
+
+
+
+ setAmount(e.target.value)}
+ />
+
+
+
+
+ {!isConfigLoading && !isUsdtSupported && (
+ + Relayer does not support USDT for gas fees on this network. +
+ )} +
-
diff --git a/apps/appkit-minter/src/pages/nft-purchase-collection-page.tsx b/apps/appkit-minter/src/pages/nft-purchase-collection-page.tsx
new file mode 100644
index 000000000..8f817d44d
--- /dev/null
+++ b/apps/appkit-minter/src/pages/nft-purchase-collection-page.tsx
@@ -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 type { FC } from 'react';
+import { Link, useParams, Navigate } from 'react-router-dom';
+import { ChevronLeft } from 'lucide-react';
+
+import { NftsList } from '@/features/nft_purchase';
+import { Layout } from '@/core/components';
+
+export const NftPurchaseCollectionPage: FC = () => {
+ const { collectionAddress } = useParams<{ collectionAddress: string }>();
+
+ if (!collectionAddress) {
+ return
+
-
-
-
)}
-
- Default provider:
- StonFi provider:
- DeDust provider:
-
+
+
+
+
+
+ );
+ }
+
+ const messageCount = request.request?.messages?.length ?? request.request?.items?.length ?? 0;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Success!
+Message signed successfully
+
+
+ );
+};
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 05e4d3792..757c26d4f 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -30,6 +30,7 @@ export { StreamingStatus } from './StreamingStatus';
export { ProtectedRoute } from './ProtectedRoute';
export { RecentTransactions } from './RecentTransactions';
export { SignDataRequestModal } from './SignDataRequestModal';
+export { SignMessageRequestModal } from './SignMessageRequestModal';
export { TraceRow } from './TraceRow';
export { TransactionRequestModal } from './TransactionRequestModal';
export { WalletPreview } from './WalletPreview';
diff --git a/apps/demo-wallet/src/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
index 61feaece0..aa70f5f1a 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -8,7 +8,14 @@
import React, { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
-import { useWallet, useWalletKit, useTonConnect, useTransactionRequests, useSignDataRequests } from '@demo/wallet-core';
+import {
+ useWallet,
+ useWalletKit,
+ useTonConnect,
+ useTransactionRequests,
+ useSignDataRequests,
+ useSignMessageRequests,
+} from '@demo/wallet-core';
import {
AnimatedBalance,
@@ -18,6 +25,7 @@ import {
ConnectRequestModal,
TransactionRequestModal,
SignDataRequestModal,
+ SignMessageRequestModal,
DisconnectNotifications,
NftsCard,
RecentTransactions,
@@ -64,6 +72,7 @@ export const WalletDashboard: React.FC = () => {
const { pendingTransactionRequest, isTransactionModalOpen } = useTransactionRequests();
const { pendingSignDataRequest, isSignDataModalOpen, approveSignDataRequest, rejectSignDataRequest } =
useSignDataRequests();
+ const { pendingSignMessageRequest, isSignMessageModalOpen } = useSignMessageRequests();
const { error } = useTonWallet();
// Use the paste handler hook
@@ -380,6 +389,15 @@ export const WalletDashboard: React.FC = () => {
onReject={rejectSignDataRequest}
/>
)}
+
+ {/* Sign Message Request Modal */}
+ {pendingSignMessageRequest && (
+
+
+
+
+
+
+
+
+
+ + Sign Message Request +
++ A dApp wants you to sign a transaction without broadcasting it +
+
+
+ )}
+
+
+
+
+ Transaction Details
++ {messageCount} message{messageCount !== 1 ? 's' : ''} to sign (not broadcast) +
+
+
+
+
+
+
+
+
+
+
+ + Warning: This will sign a transaction that the dApp can submit + later. Only approve if you trust the requesting dApp. +
+
+
+ {holdToSign ? (
+
+ Provider: {provider?.providerId}
;
+ // SAMPLE_END: USE_ONRAMP_PROVIDER
+};
diff --git a/demo/examples/src/appkit/hooks/onramp/use-onramp-quote.tsx b/demo/examples/src/appkit/hooks/onramp/use-onramp-quote.tsx
new file mode 100644
index 000000000..971195261
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/onramp/use-onramp-quote.tsx
@@ -0,0 +1,22 @@
+/**
+ * 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 { useOnrampQuote } from '@ton/appkit-react';
+
+export const UseOnrampQuoteExample = () => {
+ // SAMPLE_START: USE_ONRAMP_QUOTE
+ const { data: quote, isLoading } = useOnrampQuote({
+ fiatCurrency: 'USD',
+ cryptoCurrency: 'TON',
+ amount: '100',
+ });
+
+ if (isLoading) return Loading quote...
;
+ return Quote: {quote?.cryptoAmount} TON
;
+ // SAMPLE_END: USE_ONRAMP_QUOTE
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking.tsx b/demo/examples/src/appkit/hooks/staking/use-staking.tsx
index 4b879cdb2..5b94b5257 100644
--- a/demo/examples/src/appkit/hooks/staking/use-staking.tsx
+++ b/demo/examples/src/appkit/hooks/staking/use-staking.tsx
@@ -6,7 +6,7 @@
*
*/
-import { useStakingQuote, useStakedBalance } from '@ton/appkit-react';
+import { useStakingQuote, useStakedBalance, useStakingProviderMetadata } from '@ton/appkit-react';
export const UseStakingExample = () => {
// SAMPLE_START: USE_STAKING
@@ -19,10 +19,13 @@ export const UseStakingExample = () => {
userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
});
+ const metadata = useStakingProviderMetadata();
+
return (
Staking Quote: {quote?.amountOut}
Staked Balance: {balance?.stakedBalance}
+ Receive Token Ticker: {metadata?.receiveToken?.ticker}
Result: {provider ? provider.providerId : 'null'}
;
+ // SAMPLE_END: USE_SWAP_PROVIDER
+};
diff --git a/demo/examples/src/appkit/hooks/transaction/transaction.test.tsx b/demo/examples/src/appkit/hooks/transaction/transaction.test.tsx
index 277ab008e..7d6aee5ef 100644
--- a/demo/examples/src/appkit/hooks/transaction/transaction.test.tsx
+++ b/demo/examples/src/appkit/hooks/transaction/transaction.test.tsx
@@ -14,6 +14,7 @@ import { Network } from '@ton/walletkit';
import { createWrapper } from '../../../__tests__/test-utils';
import { UseSendTransactionExample } from './use-send-transaction';
+import { UseSignMessageExample } from './use-sign-message';
import { UseTransferTonExample } from './use-transfer-ton';
import { UseWatchTransactionsByAddressExample } from './use-watch-transactions-by-address';
import { UseWatchTransactionsExample } from './use-watch-transactions';
@@ -21,14 +22,17 @@ import { UseWatchTransactionsExample } from './use-watch-transactions';
describe('Transaction Hooks Examples', () => {
let mockAppKit: any;
let mockSendTransaction: any;
+ let mockSignMessage: any;
const mockBoc = 'te6cckEBAQEAAgAAAEysuc0=';
+ const mockInternalBoc = 'te6cckEBAQEAAgAAAEysuc1=';
const mockNetwork = Network.mainnet();
const mockWallet = {
getAddress: () => 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
getNetwork: () => mockNetwork,
sendTransaction: vi.fn(),
+ signMessage: vi.fn(),
};
beforeEach(() => {
@@ -38,6 +42,9 @@ describe('Transaction Hooks Examples', () => {
mockSendTransaction = vi.fn().mockResolvedValue({ boc: mockBoc });
mockWallet.sendTransaction = mockSendTransaction;
+ mockSignMessage = vi.fn().mockResolvedValue({ internalBoc: mockInternalBoc });
+ mockWallet.signMessage = mockSignMessage;
+
mockAppKit = {
getDefaultNetwork: vi.fn(),
connectors: [],
@@ -116,6 +123,62 @@ describe('Transaction Hooks Examples', () => {
});
});
+ describe('UseSignMessageExample', () => {
+ it('should render sign button initially', () => {
+ render(
+
+ {error &&
+ );
+ // SAMPLE_END: USE_SIGN_MESSAGE
+};
diff --git a/demo/examples/src/appkit/staking/staking-widget.tsx b/demo/examples/src/appkit/staking/staking-widget.tsx
new file mode 100644
index 000000000..16714655d
--- /dev/null
+++ b/demo/examples/src/appkit/staking/staking-widget.tsx
@@ -0,0 +1,46 @@
+/**
+ * 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 { Network } from '@ton/appkit';
+import { StakingWidget } from '@ton/appkit-react';
+
+export const StakingWidgetExample = () => {
+ // SAMPLE_START: STAKING_WIDGET_DEFAULT
+ // Default UI
+ return Error: {error.message}
}
+ {data && (
+
+
+ )}
+ Message Signed!
+Internal BOC: {data.internalBoc}
+
+ setAmount(e.target.value)}
+ placeholder="Amount to stake"
+ />
+
+ {isQuoteLoading ? (
+
+ )}
+ Fetching quote...
+ ) : quote ? ( +You will receive: {quote.amountOut}
+ ) : null} + + +
+ setFromAmount(e.target.value)} placeholder="Sell" />
+
+
+ )}
+ {isQuoteLoading ? 'Calculating...' : `Receive: ${toAmount}`}
+
+
+
+
+ {({ amount, setAmount, sendTransaction, quote, isQuoteLoading, canSubmit }) => (
+
+);
+```
+
+## Swap
+
+### `SwapWidget`
+
+A high-level component that provides a complete swap interface. It handles token selection, quote fetching, and transaction building.
+
+```tsx
+return
+ {({ fromAmount, setFromAmount, toAmount, isQuoteLoading, sendSwapTransaction, canSubmit }) => (
+
+);
+```
diff --git a/packages/appkit-react/docs/hooks.md b/packages/appkit-react/docs/hooks.md
index b01154a4a..20716c2b6 100644
--- a/packages/appkit-react/docs/hooks.md
+++ b/packages/appkit-react/docs/hooks.md
@@ -695,6 +695,86 @@ return (
);
```
+### `useSwapProvider`
+
+Hook to get a specific swap provider. Returns the provider instance directly or `null` if not found.
+
+```tsx
+const provider = useSwapProvider({ id: 'stonfi' });
+return = {
+ title: 'Public/Components/AmountPresets',
+ component: AmountPresets,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ presets: [
+ { label: '10%', amount: '10' },
+ { label: '50%', amount: '50' },
+ { label: '75%', amount: '75' },
+ { label: 'MAX', amount: '100' },
+ ],
+ onPresetSelect: fn(),
+ },
+};
+
+export const WithCurrencySymbol: Story = {
+ args: {
+ presets: [
+ { label: '10', amount: '10' },
+ { label: '50', amount: '50' },
+ { label: '100', amount: '100' },
+ { label: '500', amount: '500' },
+ ],
+ currencySymbol: '$',
+ onPresetSelect: fn(),
+ },
+};
diff --git a/packages/appkit-react/src/components/amount-presets/amount-presets.tsx b/packages/appkit-react/src/components/amount-presets/amount-presets.tsx
new file mode 100644
index 000000000..8e51bf860
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-presets/amount-presets.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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import { Button } from '../button';
+import styles from './amount-presets.module.css';
+
+export interface AmountPreset {
+ label: string;
+ amount: string;
+ onSelect?: () => void;
+}
+
+export interface AmountPresetsProps extends ComponentProps<'div'> {
+ presets: AmountPreset[];
+ currencySymbol?: string;
+ onPresetSelect: (value: string) => void;
+}
+
+export const AmountPresets: FC = ({
+ presets,
+ currencySymbol,
+ onPresetSelect,
+ className,
+ ...props
+}) => {
+ return (
+ = ({
+ value,
+ onChangeDirection,
+ ticker,
+ symbol,
+ decimals,
+ errorMessage,
+ className,
+ isLoading,
+ ...props
+}) => {
+ if (errorMessage) {
+ return (
+ = (props) => {
+ const connectors = useConnectors();
+ const { mutate: connect, isPending: isConnecting } = useConnect();
+ const [wallet] = useSelectedWallet();
+ const isWalletConnected = wallet !== null;
+
+ const { t } = useI18n();
+
+ if (!isWalletConnected) {
+ return (
+
+ );
+ }
+
+ return ;
+};
diff --git a/packages/appkit-react/src/components/button-with-connect/index.ts b/packages/appkit-react/src/components/button-with-connect/index.ts
new file mode 100644
index 000000000..da4d46a18
--- /dev/null
+++ b/packages/appkit-react/src/components/button-with-connect/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 { ButtonWithConnect } from './button-with-connect';
diff --git a/packages/appkit-react/src/components/button/button.module.css b/packages/appkit-react/src/components/button/button.module.css
index 9482cf6e8..7843e326d 100644
--- a/packages/appkit-react/src/components/button/button.module.css
+++ b/packages/appkit-react/src/components/button/button.module.css
@@ -1,38 +1,116 @@
.button {
- composes: bodyMedium from "../../styles/typography.module.css";
appearance: none;
border: none;
outline: none;
cursor: pointer;
box-sizing: border-box;
- padding: 8px 16px;
- border-radius: 20px;
-
- display: flex;
+ display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
-
- background-color: var(--ta-color-primary);
- color: var(--ta-color-primary-foreground);
- transition: transform 0.125s ease-in-out, background-color 0.2s ease;
- will-change: transform;
+ transition: opacity 0.15s ease-in-out;
+ text-decoration: none;
+ width: fit-content;
}
-.button:hover {
- transform: scale(1.02);
+.button:hover:not(:disabled):not(.loading) {
+ opacity: 0.85;
}
-.button:active {
- transform: scale(0.98);
+.button:active:not(:disabled):not(.loading) {
+ opacity: 0.65;
}
.button:disabled {
- opacity: 0.5;
+ opacity: 0.35;
cursor: not-allowed;
}
-.button:disabled:hover,
-.button:disabled:active {
- transform: none;
+.loading {
+ cursor: wait;
+}
+
+/* Sizes */
+.l {
+ composes: bodySemibold from "../../styles/typography.module.css";
+ padding: 12px 16px;
+ border-radius: var(--ta-border-radius-xl);
+}
+
+.m {
+ composes: labelSemibold from "../../styles/typography.module.css";
+ padding: 12px 16px;
+ border-radius: var(--ta-border-radius-l);
+}
+
+.s {
+ composes: labelSemibold from "../../styles/typography.module.css";
+ padding: 9px 12px;
+ border-radius: var(--ta-border-radius-2xl);
+}
+
+.icon {
+ composes: labelSemibold from "../../styles/typography.module.css";
+ aspect-ratio: 1;
+ padding: 6px;
+ border-radius: var(--ta-border-radius-full);
+}
+
+/* Variants */
+.fill {
+ background-color: var(--ta-color-primary);
+ color: var(--ta-color-primary-foreground);
+}
+
+.secondary {
+ background-color: var(--ta-color-background-secondary);
+ color: var(--ta-color-text);
+}
+
+.bezeled {
+ background-color: var(--ta-color-background-bezeled);
+ color: var(--ta-color-primary);
+}
+
+.gray {
+ background-color: var(--ta-color-background-tertiary);
+ color: var(--ta-color-text);
+}
+
+.ghost {
+ background-color: transparent;
+ color: var(--ta-color-text);
+}
+
+.ghost:hover:not(:disabled):not(.loading) {
+ background-color: var(--ta-color-background-tertiary);
+}
+
+.fullWidth {
+ width: 100%;
+}
+
+.innerIcon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.spinner {
+ width: 18px;
+ height: 18px;
+ border: 2.5px solid currentColor;
+ border-top-color: transparent;
+ border-radius: 50%;
+ animation: button-spin 0.6s linear infinite;
+}
+
+@keyframes button-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
diff --git a/packages/appkit-react/src/components/button/button.stories.tsx b/packages/appkit-react/src/components/button/button.stories.tsx
index a268465b5..1682ac0df 100644
--- a/packages/appkit-react/src/components/button/button.stories.tsx
+++ b/packages/appkit-react/src/components/button/button.stories.tsx
@@ -6,7 +6,7 @@
*
*/
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from './button';
@@ -15,9 +15,23 @@ const meta: Meta = {
component: Button,
tags: ['autodocs'],
argTypes: {
+ size: {
+ control: 'select',
+ options: ['s', 'm', 'l'],
+ },
+ variant: {
+ control: 'select',
+ options: ['fill', 'bezeled', 'gray'],
+ },
disabled: {
control: 'boolean',
},
+ loading: {
+ control: 'boolean',
+ },
+ fullWidth: {
+ control: 'boolean',
+ },
},
};
@@ -25,34 +39,71 @@ export default meta;
type Story = StoryObj;
-export const Default: Story = {
+export const Fill: Story = {
+ args: {
+ children: 'Action',
+ variant: 'fill',
+ size: 'l',
+ },
+};
+
+export const Bezeled: Story = {
+ args: {
+ children: 'Action',
+ variant: 'bezeled',
+ size: 'l',
+ },
+};
+
+export const Gray: Story = {
+ args: {
+ children: 'Action',
+ variant: 'gray',
+ size: 'l',
+ },
+};
+
+export const Sizes: Story = {
+ render: (args) => (
+ > = ({ className, ...props }) => {
- return ;
-};
+export interface ButtonProps extends ComponentProps<'button'> {
+ size?: 's' | 'm' | 'l' | 'icon';
+ variant?: 'fill' | 'secondary' | 'bezeled' | 'gray' | 'ghost';
+ loading?: boolean;
+ fullWidth?: boolean;
+ icon?: ReactNode;
+}
+
+export const Button = forwardRef(
+ (
+ {
+ className,
+ size = 'm',
+ variant = 'fill',
+ loading = false,
+ fullWidth = false,
+ disabled,
+ icon,
+ children,
+ ...props
+ },
+ ref,
+ ) => {
+ return (
+
+ );
+ },
+);
+
+Button.displayName = 'Button';
diff --git a/packages/appkit-react/src/components/button/index.ts b/packages/appkit-react/src/components/button/index.ts
index 4d25fa681..628283402 100644
--- a/packages/appkit-react/src/components/button/index.ts
+++ b/packages/appkit-react/src/components/button/index.ts
@@ -7,3 +7,4 @@
*/
export { Button } from './button';
+export type { ButtonProps } from './button';
diff --git a/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.module.css b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.module.css
new file mode 100644
index 000000000..4105120d4
--- /dev/null
+++ b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.module.css
@@ -0,0 +1,69 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ cursor: text;
+ width: 100%;
+ overflow: hidden;
+}
+
+.row {
+ display: flex;
+ align-items: baseline;
+ max-width: 100%;
+}
+
+.input {
+ composes: inputXl from "../../styles/typography.module.css";
+ color: var(--ta-color-text);
+ border: none;
+ outline: none;
+ background: none;
+ padding: 0;
+ text-align: right;
+ min-width: 24px;
+ max-width: 100%;
+ box-sizing: content-box;
+}
+
+.input::placeholder {
+ color: var(--ta-color-text-tertiary);
+ opacity: 1;
+}
+
+.ticker {
+ composes: inputXlSymbol from "../../styles/typography.module.css";
+ color: var(--ta-color-text-tertiary);
+ white-space: nowrap;
+ user-select: none;
+ margin-left: 0.2em;
+}
+
+.symbol {
+ composes: inputXl from "../../styles/typography.module.css";
+ color: var(--ta-color-text-tertiary);
+ white-space: nowrap;
+ user-select: none;
+}
+
+.mirror {
+ composes: inputXl from "../../styles/typography.module.css";
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ pointer-events: none;
+}
+
+.measureRow {
+ display: flex;
+ align-items: baseline;
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ pointer-events: none;
+}
+
+.measureText {
+ composes: inputXl from "../../styles/typography.module.css";
+}
diff --git a/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.stories.tsx b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.stories.tsx
new file mode 100644
index 000000000..07d11cd0e
--- /dev/null
+++ b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.stories.tsx
@@ -0,0 +1,52 @@
+/**
+ * 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 { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CenteredAmountInput } from './centered-amount-input';
+
+const meta: Meta = {
+ title: 'Public/Components/CenteredAmountInput',
+ component: CenteredAmountInput,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+const Template = (props: { symbol?: string; ticker?: string; placeholder?: string; width?: number }) => {
+ const [value, setValue] = useState('');
+ return (
+ = ({
+ value,
+ onValueChange,
+ ticker,
+ symbol,
+ placeholder = '0',
+ disabled,
+ className,
+ ...props
+}) => {
+ const wrapperRef = useRef(null);
+ const measureRowRef = useRef(null);
+ const mirrorRef = useRef(null);
+ const inputRef = useRef(null);
+ const [inputWidth, setInputWidth] = useState(undefined);
+ const [fontScale, setFontScale] = useState(1);
+
+ const adjustSize = useCallback(() => {
+ const wrapper = wrapperRef.current;
+ const measureRow = measureRowRef.current;
+ const mirror = mirrorRef.current;
+
+ if (!wrapper || !measureRow || !mirror) return;
+
+ const contentWidth = measureRow.offsetWidth;
+ const availableWidth = wrapper.clientWidth - 4;
+
+ let scale = 1;
+ if (contentWidth > 0 && contentWidth > availableWidth) {
+ scale = Math.max(MIN_FONT_SCALE, availableWidth / contentWidth);
+ }
+
+ setFontScale(scale);
+ setInputWidth(mirror.offsetWidth * scale + 4);
+ }, []);
+
+ useLayoutEffect(adjustSize, [value, placeholder, symbol, ticker, adjustSize]);
+
+ useLayoutEffect(() => {
+ const wrapper = wrapperRef.current;
+ if (!wrapper) return;
+
+ const observer = new ResizeObserver(adjustSize);
+ observer.observe(wrapper);
+ return () => observer.disconnect();
+ }, [adjustSize]);
+
+ const scaledInputFontSize = fontScale < 1 ? `calc(var(--ta-input-xl-size) * ${fontScale})` : undefined;
+ const scaledTickerFontSize = fontScale < 1 ? `calc(var(--ta-input-xl-symbol-size) * ${fontScale})` : undefined;
+
+ return (
+ = ({ className, size = 30, src, alt, fallback, ...props }) => {
- return (
-
-
- {fallback ? fallback : alt?.[0]}
-
- )}
-
- );
-};
diff --git a/packages/appkit-react/src/components/collapsible/collapsible.module.css b/packages/appkit-react/src/components/collapsible/collapsible.module.css
new file mode 100644
index 000000000..d0362c1ef
--- /dev/null
+++ b/packages/appkit-react/src/components/collapsible/collapsible.module.css
@@ -0,0 +1,4 @@
+.collapsible {
+ overflow: hidden;
+ transition: height 0.25s ease;
+}
diff --git a/packages/appkit-react/src/components/collapsible/collapsible.stories.tsx b/packages/appkit-react/src/components/collapsible/collapsible.stories.tsx
new file mode 100644
index 000000000..4e0775a02
--- /dev/null
+++ b/packages/appkit-react/src/components/collapsible/collapsible.stories.tsx
@@ -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 { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Collapsible } from './collapsible';
+
+const meta: Meta = {
+ title: 'Public/Components/Collapsible',
+ component: Collapsible,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => {
+ const [open, setOpen] = useState(false);
+ return (
+ = ({ open, children, ...props }) => {
+ const contentRef = useRef(null);
+ const [height, setHeight] = useState(open ? undefined : 0);
+
+ useLayoutEffect(() => {
+ const el = contentRef.current;
+ if (!el) return undefined;
+
+ if (open) {
+ setHeight(el.scrollHeight);
+
+ const onEnd = () => setHeight(undefined);
+ el.addEventListener('transitionend', onEnd, { once: true });
+ return () => el.removeEventListener('transitionend', onEnd);
+ }
+
+ setHeight(el.scrollHeight);
+ const id = requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ setHeight(0);
+ });
+ });
+ return () => cancelAnimationFrame(id);
+ }, [open]);
+
+ return (
+ = {
- title: 'Public/Features/Balances/CurrencyItem',
+ title: 'Public/Components/CurrencyItem',
component: CurrencyItem,
tags: ['autodocs'],
- parameters: {
- layout: 'centered',
- },
args: {
onClick: fn(),
},
@@ -74,6 +71,17 @@ export const NoBalance: Story = {
},
};
+export const WithUnderBalance: Story = {
+ args: {
+ ticker: 'TON',
+ name: 'Toncoin',
+ balance: '55',
+ underBalance: '$385.00',
+ icon: 'https://ton.org/download/ton_symbol.png',
+ isVerified: true,
+ },
+};
+
export const CurrencyList: Story = {
render: () => (
Staking Quote: {quote?.amountOut}
Staked Balance: {balance?.stakedBalance}
+ Receive Token Ticker: {metadata?.receiveToken?.ticker}
+ setAmount(e.target.value)}
+ placeholder="Amount to stake"
+ />
+
+ {isQuoteLoading ?
+ )}
+ Fetching quote...
: quote ?You will receive: {quote.amountOut}
: null} + + +
+ setFromAmount(e.target.value)} placeholder="Sell" />
+
+
+ )}
+ {isQuoteLoading ? 'Calculating...' : `Receive: ${toAmount}`}
+
+
+ Result: {provider ? provider.providerId : 'null'}
;
+```
+
+## Onramp
+
+### `useOnrampQuote`
+
+Hook to get an onramp quote for a specific fiat/crypto pair.
+
+```tsx
+const { data: quote, isLoading } = useOnrampQuote({
+ fiatCurrency: 'USD',
+ cryptoCurrency: 'TON',
+ amount: '100',
+});
+
+if (isLoading) return Loading quote...
;
+return Quote: {quote?.cryptoAmount} TON
;
+```
+
+### `useOnrampProvider`
+
+Hook to get a specific onramp provider.
+
+```tsx
+const provider = useOnrampProvider({ id: 'moonpay' });
+
+return Provider: {provider?.providerId}
;
+```
+
+### `useOnrampProviders`
+
+Hook to get all registered onramp providers.
+
+### `useBuildOnrampUrl`
+
+Hook to build an onramp URL for redirecting the user to the provider.
+
+## Staking
+
+### Staking Hooks
+
+These hooks allow you to interact with staking providers directly.
+
+#### `useStakingQuote`
+Get a quote for staking or unstaking.
+
+#### `useStakedBalance`
+Get the user's staked balance.
+
+#### `useStakingProviderMetadata`
+Get static metadata about a specific staking provider.
+
+```tsx
+const { data: quote } = useStakingQuote({
+ amount: '1000000000',
+ direction: 'stake',
+});
+
+const { data: balance } = useStakedBalance({
+ userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+});
+
+const metadata = useStakingProviderMetadata();
+
+return (
+
+
+);
+```
+
## Transaction
### `useSendTransaction`
@@ -734,6 +814,41 @@ return (
);
```
+### `useSignMessage`
+
+Hook to sign a transaction-shaped request without broadcasting it. Returns a signed internal-message BoC that can be relayed on-chain by a third party (e.g. a gasless relayer). Requires wallet support for the `SignMessage` feature.
+
+```tsx
+const { mutate: signMessage, isPending, error, data } = useSignMessage();
+
+const handleSign = () => {
+ signMessage({
+ validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes
+ messages: [
+ {
+ address: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+ amount: '100000000', // 0.1 TON in nanotons
+ },
+ ],
+ });
+};
+
+return (
+ Staking Quote: {quote?.amountOut}
+ Staked Balance: {balance?.stakedBalance}
+ Receive Token Ticker: {metadata?.receiveToken?.ticker}
+
+
+ {error &&
+);
+```
+
### `useTransferTon`
Hook to simplify transferring TON to another address.
diff --git a/packages/appkit-react/package.json b/packages/appkit-react/package.json
index 949293502..19b087587 100644
--- a/packages/appkit-react/package.json
+++ b/packages/appkit-react/package.json
@@ -45,10 +45,12 @@
"dependencies": {
"@ton/appkit": "workspace:*",
"clsx": "2.1.1",
+ "qrcode.react": "^4.2.0",
"radix-ui": "^1.4.3",
"rosetta": "1.1.0"
},
"devDependencies": {
+ "@privy-io/react-auth": "^3.22.1",
"@storybook/addon-docs": "10.3.5",
"@storybook/react": "10.3.5",
"@storybook/react-vite": "10.3.5",
@@ -66,6 +68,7 @@
"vite-plugin-node-polyfills": "^0.26.0"
},
"peerDependencies": {
+ "@privy-io/react-auth": ">=3.0.0",
"@tanstack/react-query": ">=5.0.0",
"@tonconnect/ui": ">=2.4.1",
"@tonconnect/ui-react": ">=2.4.1",
@@ -73,6 +76,9 @@
"react-dom": ">=18.0.0"
},
"peerDependenciesMeta": {
+ "@privy-io/react-auth": {
+ "optional": true
+ },
"@tonconnect/ui": {
"optional": true
},
diff --git a/packages/appkit-react/src/components/amount-presets/amount-presets.module.css b/packages/appkit-react/src/components/amount-presets/amount-presets.module.css
new file mode 100644
index 000000000..e1e0344d9
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-presets/amount-presets.module.css
@@ -0,0 +1,19 @@
+.container {
+ width: 100%;
+ display: grid;
+ gap: 8px;
+ justify-content: center;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.preset {
+ width: 100%;
+ padding: 8px 16px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.preset:hover {
+ background: var(--ta-color-background-secondary);
+ border-color: var(--ta-color-text-secondary);
+}
diff --git a/packages/appkit-react/src/components/amount-presets/amount-presets.stories.tsx b/packages/appkit-react/src/components/amount-presets/amount-presets.stories.tsx
new file mode 100644
index 000000000..599e1e02c
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-presets/amount-presets.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * 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 { fn } from 'storybook/test';
+
+import { AmountPresets } from './amount-presets';
+
+const meta: MetaError: {error.message}
}
+ {data && (
+
+
+ )}
+ Message Signed!
+Internal BOC: {data.internalBoc}
+
+ {presets.map((preset) => (
+
+ ))}
+
+ );
+};
diff --git a/packages/appkit-react/src/components/amount-presets/index.ts b/packages/appkit-react/src/components/amount-presets/index.ts
new file mode 100644
index 000000000..640926678
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-presets/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 { AmountPresets } from './amount-presets';
+export type { AmountPreset, AmountPresetsProps } from './amount-presets';
diff --git a/packages/appkit-react/src/components/amount-reversed/amount-reversed.module.css b/packages/appkit-react/src/components/amount-reversed/amount-reversed.module.css
new file mode 100644
index 000000000..051d28d81
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-reversed/amount-reversed.module.css
@@ -0,0 +1,34 @@
+.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;
+}
+
+.skeleton {
+ width: 70px;
+ height: calc(var(--ta-body-regular-line-height) - 4px);
+ margin: 2px 0;
+}
+
+.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/components/amount-reversed/amount-reversed.tsx b/packages/appkit-react/src/components/amount-reversed/amount-reversed.tsx
new file mode 100644
index 000000000..0e4cc35a9
--- /dev/null
+++ b/packages/appkit-react/src/components/amount-reversed/amount-reversed.tsx
@@ -0,0 +1,79 @@
+/**
+ * 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 { formatLargeValue } from '@ton/appkit';
+import clsx from 'clsx';
+
+import styles from './amount-reversed.module.css';
+import { Skeleton } from '../skeleton';
+
+export interface AmountReversedProps extends ComponentProps<'div'> {
+ value: string;
+ onChangeDirection?: () => void;
+ ticker?: string;
+ symbol?: string;
+ decimals?: number;
+ errorMessage?: string;
+ isLoading?: boolean;
+}
+
+export const AmountReversed: FC
+ {errorMessage}
+
+ );
+ }
+
+ return (
+
+ {isLoading ? (
+
+ );
+};
diff --git a/packages/appkit-react/src/components/amount-reversed/index.ts b/packages/appkit-react/src/components/amount-reversed/index.ts
new file mode 100644
index 000000000..665f5f879
--- /dev/null
+++ b/packages/appkit-react/src/components/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 { AmountReversed } from './amount-reversed';
+export type { AmountReversedProps } from './amount-reversed';
diff --git a/packages/appkit-react/src/components/block/block.module.css b/packages/appkit-react/src/components/block/block.module.css
index 5de8b960d..102bbef8c 100644
--- a/packages/appkit-react/src/components/block/block.module.css
+++ b/packages/appkit-react/src/components/block/block.module.css
@@ -4,7 +4,7 @@
box-sizing: border-box;
padding: 16px;
border-radius: var(--ta-border-radius-l);
- background-color: var(--ta-color-block);
+ background-color: var(--ta-color-background-secondary);
}
.row {
diff --git a/packages/appkit-react/src/components/block/block.stories.tsx b/packages/appkit-react/src/components/block/block.stories.tsx
index a14b28716..e4af9983e 100644
--- a/packages/appkit-react/src/components/block/block.stories.tsx
+++ b/packages/appkit-react/src/components/block/block.stories.tsx
@@ -6,7 +6,7 @@
*
*/
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
import { Block } from './block';
@@ -31,9 +31,15 @@ export const Column: Story = {
direction: 'column',
children: (
<>
- Item 1
- Item 2
- Item 3
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
),
},
@@ -44,9 +50,15 @@ export const Row: Story = {
direction: 'row',
children: (
<>
- Item 1
- Item 2
- Item 3
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
),
},
diff --git a/packages/appkit-react/src/components/button-with-connect/button-with-connect.tsx b/packages/appkit-react/src/components/button-with-connect/button-with-connect.tsx
new file mode 100644
index 000000000..4eab5f451
--- /dev/null
+++ b/packages/appkit-react/src/components/button-with-connect/button-with-connect.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 { ButtonProps } from '../button';
+import { Button } from '../button';
+import { useConnectors, useConnect, useSelectedWallet } from '../../features/wallets';
+import { useI18n } from '../../features/settings';
+
+export const ButtonWithConnect: FC
+
+
+
+
+ ),
args: {
- children: 'Click me',
+ variant: 'fill',
},
};
-export const Disabled: Story = {
+export const Variants: Story = {
+ render: (args) => (
+
+
+
+
+
+ ),
args: {
- children: 'Disabled Button',
- disabled: true,
+ size: 'l',
},
};
-export const WithIcon: Story = {
+export const Loading: Story = {
args: {
- children: (
- <>
-
- Add Item
-
- ),
+ children: 'Loading Button',
+ loading: true,
},
};
diff --git a/packages/appkit-react/src/components/button/button.tsx b/packages/appkit-react/src/components/button/button.tsx
index a9f9dce44..787d77568 100644
--- a/packages/appkit-react/src/components/button/button.tsx
+++ b/packages/appkit-react/src/components/button/button.tsx
@@ -6,11 +6,60 @@
*
*/
-import type { FC, ComponentProps } from 'react';
+import { forwardRef } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
import clsx from 'clsx';
import styles from './button.module.css';
-export const Button: FC
+
+ );
+};
+
+export const WithSymbol: Story = {
+ render: () => ,
+};
+
+export const WithTicker: Story = {
+ render: () => ,
+};
+
+export const WithSymbolAndTicker: Story = {
+ render: () => ,
+};
+
+export const NarrowContainer: Story = {
+ render: () => ,
+};
diff --git a/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.tsx b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.tsx
new file mode 100644
index 000000000..c30e497f2
--- /dev/null
+++ b/packages/appkit-react/src/components/centered-amount-input/centered-amount-input.tsx
@@ -0,0 +1,121 @@
+/**
+ * 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, useLayoutEffect, useRef, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import styles from './centered-amount-input.module.css';
+
+const MIN_FONT_SCALE = 0.5;
+
+export interface CenteredAmountInputProps extends ComponentProps<'div'> {
+ value: string;
+ onValueChange: (value: string) => void;
+ ticker?: string;
+ symbol?: string;
+ placeholder?: string;
+ disabled?: boolean;
+}
+
+export const CenteredAmountInput: FC inputRef.current?.focus()}
+ {...props}
+ >
+
+
+
+ );
+};
diff --git a/packages/appkit-react/src/components/centered-amount-input/index.ts b/packages/appkit-react/src/components/centered-amount-input/index.ts
new file mode 100644
index 000000000..4145d5582
--- /dev/null
+++ b/packages/appkit-react/src/components/centered-amount-input/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 { CenteredAmountInput } from './centered-amount-input';
+export type { CenteredAmountInputProps } from './centered-amount-input';
diff --git a/packages/appkit-react/src/components/circle-icon/circle-icon.tsx b/packages/appkit-react/src/components/circle-icon/circle-icon.tsx
deleted file mode 100644
index 5ed387403..000000000
--- a/packages/appkit-react/src/components/circle-icon/circle-icon.tsx
+++ /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.
- *
- */
-
-import type { FC, ComponentProps } from 'react';
-import clsx from 'clsx';
-import { Avatar } from 'radix-ui';
-
-import styles from './circle-icon.module.css';
-
-export interface CircleIconProps extends ComponentProps<'div'> {
- size?: number;
- src?: string;
- alt?: string;
- fallback?: string;
-}
-
-export const CircleIcon: FC
+ {symbol && (
+
+ {symbol}
+
+ )}
+ onValueChange(e.target.value)}
+ style={{
+ width: inputWidth ? `${inputWidth}px` : undefined,
+ fontSize: scaledInputFontSize,
+ }}
+ />
+ {ticker && (
+
+ {ticker}
+
+ )}
+
+
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/packages/appkit-react/src/components/collapsible/collapsible.tsx b/packages/appkit-react/src/components/collapsible/collapsible.tsx
new file mode 100644
index 000000000..bce384715
--- /dev/null
+++ b/packages/appkit-react/src/components/collapsible/collapsible.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 { useRef, useLayoutEffect, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+
+import styles from './collapsible.module.css';
+
+export interface CollapsibleProps extends ComponentProps<'div'> {
+ open: boolean;
+}
+
+export const Collapsible: FC
+
+ This content is collapsible.
+It animates from zero height to its natural height.
+
+ {children}
+
+ );
+};
diff --git a/packages/appkit-react/src/components/collapsible/index.ts b/packages/appkit-react/src/components/collapsible/index.ts
new file mode 100644
index 000000000..ad22db5e2
--- /dev/null
+++ b/packages/appkit-react/src/components/collapsible/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 { Collapsible } from './collapsible';
+export type { CollapsibleProps } from './collapsible';
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css b/packages/appkit-react/src/components/currency-item/currency-item.module.css
similarity index 65%
rename from packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css
rename to packages/appkit-react/src/components/currency-item/currency-item.module.css
index d8dc0d179..17e2058bc 100644
--- a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.module.css
+++ b/packages/appkit-react/src/components/currency-item/currency-item.module.css
@@ -1,23 +1,17 @@
-.currencyItem {
+.container {
box-sizing: border-box;
- border-radius: var(--ta-border-radius-l);
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
- padding: 12px;
- background-color: var(--ta-color-block);
- transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ padding: 0;
+ background-color: transparent;
cursor: pointer;
- border: 1px solid transparent;
+ border: none;
outline: none;
}
-.currencyItem:hover {
- border-color: var(--ta-color-primary);
-}
-
.icon {
width: 40px;
height: 40px;
@@ -45,7 +39,7 @@
}
.name {
- composes: bodyBold from "../../../../styles/typography.module.css";
+ composes: bodySemibold from "../../styles/typography.module.css";
color: var(--ta-color-text);
white-space: nowrap;
@@ -62,19 +56,26 @@
}
.ticker {
- composes: bodyMedium from "../../../../styles/typography.module.css";
+ composes: labelMedium from "../../styles/typography.module.css";
color: var(--ta-color-text-secondary);
margin: 0;
}
-.details {
+.rightSide {
text-align: right;
}
-.balance {
- composes: bodyMedium from "../../../../styles/typography.module.css";
+.mainBalance {
+ composes: bodyMedium from "../../styles/typography.module.css";
color: var(--ta-color-text);
margin: 0;
}
+
+.underBalance {
+ composes: labelMedium from "../../styles/typography.module.css";
+
+ color: var(--ta-color-text-secondary);
+ margin: 0;
+}
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx b/packages/appkit-react/src/components/currency-item/currency-item.stories.tsx
similarity index 83%
rename from packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx
rename to packages/appkit-react/src/components/currency-item/currency-item.stories.tsx
index 2ac1f7c2c..f665bfe1d 100644
--- a/packages/appkit-react/src/features/balances/components/currency-item/currency-item.stories.tsx
+++ b/packages/appkit-react/src/components/currency-item/currency-item.stories.tsx
@@ -6,18 +6,15 @@
*
*/
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
import { CurrencyItem } from './currency-item';
const meta: Meta
diff --git a/packages/appkit-react/src/components/currency-item/currency-item.tsx b/packages/appkit-react/src/components/currency-item/currency-item.tsx
new file mode 100644
index 000000000..4c9dad48f
--- /dev/null
+++ b/packages/appkit-react/src/components/currency-item/currency-item.tsx
@@ -0,0 +1,137 @@
+/**
+ * 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, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import { Logo } from '../logo';
+import type { LogoProps } from '../logo';
+import styles from './currency-item.module.css';
+
+export interface CurrencyItemProps extends ComponentProps<'button'> {
+ ticker?: string;
+ name?: string;
+ balance?: string;
+ underBalance?: string;
+ icon?: string;
+ isVerified?: boolean;
+}
+
+const Container: FC> = ({ className, children, ...props }) => (
+
+);
+
+const LogoWrapper: FC = ({ className, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, ...props }) => (
+
+);
+
+const RightSide: FC> = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ = ({
+ ticker,
+ name,
+ balance,
+ underBalance,
+ icon,
+ isVerified,
+ children,
+ ...props
+}) => {
+ if (children) {
+ return {children} ;
+ }
+
+ return (
+
+ {(icon || ticker) &&
+
+ {name || ticker}
+ {isVerified &&
+
+
+ {ticker} {name && ticker && <>• {name}}
+
+
+
+ {(balance || underBalance) && (
+
+ {balance && {balance} }
+ {underBalance && {underBalance} }
+
+ )}
+
+ );
+};
+
+export const CurrencyItem = Object.assign(CurrencyItemRoot, {
+ Container,
+ Logo: LogoWrapper,
+ Info,
+ VerifiedBadge,
+ Header,
+ Name,
+ Ticker,
+ RightSide,
+ MainBalance,
+ UnderBalance,
+});
diff --git a/packages/appkit-react/src/features/balances/components/currency-item/index.ts b/packages/appkit-react/src/components/currency-item/index.ts
similarity index 100%
rename from packages/appkit-react/src/features/balances/components/currency-item/index.ts
rename to packages/appkit-react/src/components/currency-item/index.ts
diff --git a/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.module.css b/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.module.css
new file mode 100644
index 000000000..c5c2e6ad9
--- /dev/null
+++ b/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.module.css
@@ -0,0 +1,49 @@
+.searchWrapper {
+ margin-bottom: 16px;
+}
+
+.body {
+ overflow-y: hidden;
+}
+
+.list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ height: 400px;
+ max-height: 100%;
+ overflow-y: auto;
+ flex: 1;
+}
+
+.section {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.sectionHeader {
+ composes: labelSemibold from "../../styles/typography.module.css";
+
+ color: var(--ta-color-text-secondary);
+ margin: 0;
+ padding: 8px 0 4px;
+}
+
+.section:first-child .sectionHeader {
+ padding-top: 0;
+}
+
+.empty {
+ padding: 32px 0;
+}
+
+.emptyText {
+ composes: bodyRegular from "../../styles/typography.module.css";
+ margin: 0;
+ color: var(--ta-color-text-secondary);
+ text-align: center;
+}
diff --git a/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.tsx b/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.tsx
new file mode 100644
index 000000000..c9519583b
--- /dev/null
+++ b/packages/appkit-react/src/components/currency-select-modal/currency-select-modal.tsx
@@ -0,0 +1,96 @@
+/**
+ * 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, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import type { InputContainerProps } from '../input';
+import { Input } from '../input';
+import type { ModalProps } from '../modal';
+import { Modal } from '../modal';
+import { SearchIcon } from '../search-icon';
+import styles from './currency-select-modal.module.css';
+
+export interface CurrencySelectSearchProps extends Omit {
+ searchValue: string;
+ onSearchChange: (value: string) => void;
+ placeholder?: string;
+}
+
+export const CurrencySelectSearch: FC = ({
+ searchValue,
+ onSearchChange,
+ placeholder,
+ className,
+ ...props
+}) => {
+ return (
+
+
+
+
+
+ onSearchChange(e.target.value)}
+ autoFocus
+ />
+
+
+ );
+};
+
+export interface CurrencySelectListContainerProps extends ComponentProps<'div'> {
+ isEmpty: boolean;
+}
+
+export const CurrencySelectListContainer: FC = ({
+ isEmpty,
+ children,
+ className,
+ ...props
+}) => {
+ return (
+ > = ({ className, children, ...props }) => (
+ > = ({ className, children, ...props }) => (
+ = ({ className, ...props }) => {
+ return = ({ children, open = false, onOpenChange }) => {
+ const titleId = useId();
+ const handleOpenChange = useCallback((value: boolean) => onOpenChange?.(value), [onOpenChange]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+interface DialogPortalProps {
+ children: ReactNode;
+ container?: Element | null;
+}
+
+const DialogPortal: FC = ({ children, container }) => {
+ const { open } = useDialogContext();
+ if (!open || typeof document === 'undefined') return null;
+ return createPortal(children, container ?? document.body);
+};
+
+const DialogOverlay = forwardRef, ComponentPropsWithoutRef<'div'>>((props, ref) => {
+ useEffect(() => {
+ document.body.style.overflow = 'hidden';
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, []);
+
+ return ;
+});
+
+DialogOverlay.displayName = 'DialogOverlay';
+
+const DialogContent = forwardRef, ComponentPropsWithoutRef<'div'>>((props, ref) => {
+ const { onOpenChange, titleId } = useDialogContext();
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onOpenChange(false);
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [onOpenChange]);
+
+ return ;
+});
+
+DialogContent.displayName = 'DialogContent';
+
+const DialogTitle = forwardRef, ComponentPropsWithoutRef<'h2'>>((props, ref) => {
+ const { titleId } = useDialogContext();
+ return ;
+});
+
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogClose = forwardRef, ComponentPropsWithoutRef<'button'>>(
+ ({ onClick, ...props }, ref) => {
+ const { onOpenChange } = useDialogContext();
+ return (
+
+ {children}
+
+);
+
+const Header: FC
+ {children}
+
+);
+
+const Name: FC+ {children} +
+); + +const Ticker: FC+ {children} +
+); + +const VerifiedBadge: FC
+ {children}
+
+);
+
+const MainBalance: FC+ {children} +
+); + +const UnderBalance: FC+ {children} +
+); + +const CurrencyItemRoot: FC
+ {isEmpty ? (
+
+ );
+};
+
+export const CurrencySelectSectionHeader: FC
+
+ ) : (
+ children
+ )}
+ We didn't find any tokens.
+Try searching by address.
++ {children} +
+); + +export const CurrencySelectSection: FC
+ {children}
+
+);
+
+export const CurrencySelectModal: FC