+
+
+ );
+};
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
+
+
-
-
-
- {children}
-
-
-
+
-
-
-
-
-
-
- {title}
-
-
- {title}
+ + )} + +
+ {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 (
+
- > = (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/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 }) => {
}
>
- > = ({ className, ...prop
}
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}
+
-
);
};
diff --git a/apps/appkit-minter/src/main.tsx b/apps/appkit-minter/src/main.tsx
index 420ea6f7f..04bb2bcfc 100644
--- a/apps/appkit-minter/src/main.tsx
+++ b/apps/appkit-minter/src/main.tsx
@@ -13,8 +13,6 @@ import { createRoot } from 'react-dom/client';
import { App } from './app';
-import './core/styles/index.css';
-
createRoot(document.getElementById('root')!).render(
-
-
+
+
-
+ if (!wallet) return null;
- {!wallet && Connect wallet to mint
} - - {wallet && ( -
-
+
+ {truncateAddress(address)}
+
- {wallet && (
-
- )}
- - {truncateAddress(address)} -
+ return ( +
+
- )}
-
+
- Network: {networkLabel}
-
-
-
-
-
diff --git a/apps/appkit-minter/src/pages/sign-message-page.tsx b/apps/appkit-minter/src/pages/sign-message-page.tsx
new file mode 100644
index 000000000..fef84a09a
--- /dev/null
+++ b/apps/appkit-minter/src/pages/sign-message-page.tsx
@@ -0,0 +1,20 @@
+/**
+ * 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 { Layout } from '@/core/components';
+import { SignMessageCard } from '@/features/signing';
+
+export const SignMessagePage: React.FC = () => {
+ return (
+
-
- Default provider:
- StonFi provider:
- DeDust provider:
-
+
+
+ );
+ // SAMPLE_END: USE_BUILD_STAKE_TRANSACTION
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staked-balance.tsx b/demo/examples/src/appkit/hooks/staking/use-staked-balance.tsx
new file mode 100644
index 000000000..88829ddb0
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/staking/use-staked-balance.tsx
@@ -0,0 +1,21 @@
+/**
+ * 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 { useStakedBalance } from '@ton/appkit-react';
+
+export const UseStakedBalanceExample = () => {
+ // SAMPLE_START: USE_STAKED_BALANCE
+ const { data: balance, isLoading } = useStakedBalance({
+ userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+ });
+
+ if (isLoading) return Loading balance...
;
+
+ return Staked Balance: {balance?.stakedBalance}
;
+ // SAMPLE_END: USE_STAKED_BALANCE
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking-provider-info.tsx b/demo/examples/src/appkit/hooks/staking/use-staking-provider-info.tsx
new file mode 100644
index 000000000..8ea9fe07c
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/staking/use-staking-provider-info.tsx
@@ -0,0 +1,21 @@
+/**
+ * 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 { useStakingProviderInfo } from '@ton/appkit-react';
+
+export const UseStakingProviderInfoExample = () => {
+ // SAMPLE_START: USE_STAKING_PROVIDER_INFO
+ const { data: info, isLoading } = useStakingProviderInfo({
+ providerId: 'tonstakers',
+ });
+
+ if (isLoading) return Loading info...
;
+
+ return APY: {info?.apy}
;
+ // SAMPLE_END: USE_STAKING_PROVIDER_INFO
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking-provider-metadata.tsx b/demo/examples/src/appkit/hooks/staking/use-staking-provider-metadata.tsx
new file mode 100644
index 000000000..0b4112f2e
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/staking/use-staking-provider-metadata.tsx
@@ -0,0 +1,16 @@
+/**
+ * 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 { useStakingProviderMetadata } from '@ton/appkit-react';
+
+export const UseStakingProviderMetadataExample = () => {
+ // SAMPLE_START: USE_STAKING_PROVIDER_METADATA
+ const metadata = useStakingProviderMetadata();
+ return Receive Token: {metadata?.receiveToken?.ticker}
;
+ // SAMPLE_END: USE_STAKING_PROVIDER_METADATA
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking-provider.tsx b/demo/examples/src/appkit/hooks/staking/use-staking-provider.tsx
new file mode 100644
index 000000000..977e6c7d2
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/staking/use-staking-provider.tsx
@@ -0,0 +1,16 @@
+/**
+ * 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 { useStakingProvider } from '@ton/appkit-react';
+
+export const UseStakingProviderExample = () => {
+ // SAMPLE_START: USE_STAKING_PROVIDER
+ const provider = useStakingProvider({ id: 'tonstakers' });
+ return Result: {provider ? provider.providerId : 'null'}
;
+ // SAMPLE_END: USE_STAKING_PROVIDER
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking-providers.tsx b/demo/examples/src/appkit/hooks/staking/use-staking-providers.tsx
new file mode 100644
index 000000000..63550038d
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/staking/use-staking-providers.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 { useStakingProviders } from '@ton/appkit-react';
+
+export const UseStakingProvidersExample = () => {
+ // SAMPLE_START: USE_STAKING_PROVIDERS
+ const providers = useStakingProviders();
+ return (
+ -
+ {providers.map((p) => (
+
- {p.providerId} + ))} +
Loading quote...
;
+ if (error) return Error: {error.message}
;
+
+ return Expected Output: {quote?.amountOut}
;
+ // SAMPLE_END: USE_STAKING_QUOTE
+};
diff --git a/demo/examples/src/appkit/hooks/staking/use-staking.tsx b/demo/examples/src/appkit/hooks/staking/use-staking.tsx
deleted file mode 100644
index 4b879cdb2..000000000
--- a/demo/examples/src/appkit/hooks/staking/use-staking.tsx
+++ /dev/null
@@ -1,29 +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 { useStakingQuote, useStakedBalance } from '@ton/appkit-react';
-
-export const UseStakingExample = () => {
- // SAMPLE_START: USE_STAKING
- const { data: quote } = useStakingQuote({
- amount: '1000000000',
- direction: 'stake',
- });
-
- const { data: balance } = useStakedBalance({
- userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
- });
-
- return (
-
-
- );
- // SAMPLE_END: USE_STAKING
-};
diff --git a/demo/examples/src/appkit/hooks/swap/swap.test.tsx b/demo/examples/src/appkit/hooks/swap/swap.test.tsx
index 6a1e5ff47..e65d0e81f 100644
--- a/demo/examples/src/appkit/hooks/swap/swap.test.tsx
+++ b/demo/examples/src/appkit/hooks/swap/swap.test.tsx
@@ -12,6 +12,8 @@ import * as AppKitReact from '@ton/appkit-react';
import { UseSwapQuoteExample } from './use-swap-quote';
import { UseBuildSwapTransactionExample } from './use-build-swap-transaction';
+import { UseSwapProviderExample } from './use-swap-provider';
+import { UseSwapProvidersExample } from './use-swap-providers';
// Mock the whole module
vi.mock('@ton/appkit-react', async () => {
@@ -21,6 +23,8 @@ vi.mock('@ton/appkit-react', async () => {
useSwapQuote: vi.fn(),
useBuildSwapTransaction: vi.fn(),
useSendTransaction: vi.fn(),
+ useSwapProvider: vi.fn(),
+ useSwapProviders: vi.fn(),
};
});
@@ -71,6 +75,31 @@ describe('Swap Hooks Examples', () => {
});
});
+ describe('UseSwapProviderExample', () => {
+ it('should render swap provider', () => {
+ vi.mocked(AppKitReact.useSwapProvider).mockReturnValue([
+ { providerId: 'stonfi' } as unknown as AppKitReact.UseSwapProviderReturnType[0],
+ () => {},
+ ]);
+
+ render(Staking Quote: {quote?.amountOut}
- Staked Balance: {balance?.stakedBalance}
-
+
+ );
+ // SAMPLE_END: USE_SWAP_PROVIDER
+};
diff --git a/demo/examples/src/appkit/hooks/swap/use-swap-providers.tsx b/demo/examples/src/appkit/hooks/swap/use-swap-providers.tsx
new file mode 100644
index 000000000..0b7280935
--- /dev/null
+++ b/demo/examples/src/appkit/hooks/swap/use-swap-providers.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 { useSwapProviders } from '@ton/appkit-react';
+
+export const UseSwapProvidersExample = () => {
+ // SAMPLE_START: USE_SWAP_PROVIDERS
+ const providers = useSwapProviders();
+ return (
+ Result: {provider ? provider.providerId : 'null'}
+
+ -
+ {providers.map((p) => (
+
- {p.getMetadata().name} + ))} +
+ 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 067309e34..ddeec6bdc 100644
--- a/packages/appkit-react/docs/hooks.md
+++ b/packages/appkit-react/docs/hooks.md
@@ -694,6 +694,155 @@ return (
);
```
+### `useSwapProvider`
+
+Hook to read and change the currently selected swap provider. Returns a tuple `[provider, setProviderId]` — mirrors `useSelectedWallet`.
+
+```tsx
+const [provider, setProviderId] = useSwapProvider();
+return (
+ = {
- title: 'Private/Components/Block',
- component: Block,
- tags: ['autodocs'],
- argTypes: {
- direction: {
- control: 'radio',
- options: ['row', 'column'],
- },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Column: Story = {
- args: {
- direction: 'column',
- children: (
- <>
- = {
- title: 'Public/Components/Button',
- component: Button,
- tags: ['autodocs'],
- argTypes: {
- disabled: {
- control: 'boolean',
- },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- children: 'Click me',
- },
-};
-
-export const Disabled: Story = {
- args: {
- children: 'Disabled Button',
- disabled: true,
- },
-};
-
-export const WithIcon: Story = {
- args: {
- children: (
- <>
-
- Add Item
-
- ),
- },
-};
diff --git a/packages/appkit-react/src/components/button/button.tsx b/packages/appkit-react/src/components/button/button.tsx
deleted file mode 100644
index a9f9dce44..000000000
--- a/packages/appkit-react/src/components/button/button.tsx
+++ /dev/null
@@ -1,16 +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 styles from './button.module.css';
-
-export const Button: FC> = ({ className, ...props }) => {
- return ;
-};
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 = ({ className, size = 30, src, alt, fallback, ...props }) => {
- return (
-
-
- {fallback ? fallback : alt?.[0]}
-
- )}
-
- );
-};
diff --git a/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css
new file mode 100644
index 000000000..1e635f7b2
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.module.css
@@ -0,0 +1,20 @@
+.container {
+ width: 100%;
+ display: grid;
+ gap: 8px;
+ justify-content: center;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ margin: 0 auto;
+}
+
+.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/shared/amount-presets/amount-presets.stories.tsx b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.stories.tsx
new file mode 100644
index 000000000..fd9ba8e76
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/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: Meta = {
+ title: 'Components/Shared/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/shared/amount-presets/amount-presets.tsx b/packages/appkit-react/src/components/shared/amount-presets/amount-presets.tsx
new file mode 100644
index 000000000..9fa85baff
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/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 '../../ui/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 (
+ = (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/shared/button-with-connect/index.ts b/packages/appkit-react/src/components/shared/button-with-connect/index.ts
new file mode 100644
index 000000000..da4d46a18
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/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/shared/low-balance-modal/index.ts b/packages/appkit-react/src/components/shared/low-balance-modal/index.ts
new file mode 100644
index 000000000..ce630058a
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/low-balance-modal/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 { LowBalanceModal } from './low-balance-modal';
+export type { LowBalanceModalProps, LowBalanceMode } from './low-balance-modal';
diff --git a/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.module.css b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.module.css
new file mode 100644
index 000000000..af645f066
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.module.css
@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ */
+
+.message {
+ margin: 0 0 16px;
+ padding: 0 4px;
+ color: var(--ta-color-text-secondary);
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
diff --git a/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.stories.tsx b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.stories.tsx
new file mode 100644
index 000000000..93fbdd13b
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.stories.tsx
@@ -0,0 +1,39 @@
+/**
+ * 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 { LowBalanceModal } from './low-balance-modal';
+
+const meta: Meta = {
+ title: 'Components/Shared/LowBalanceModal',
+ component: LowBalanceModal,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ open: true,
+ mode: 'reduce',
+ requiredTon: '0.423',
+ onChange: () => {},
+ onCancel: () => {},
+ },
+};
+
+export const Topup: Story = {
+ args: {
+ open: true,
+ mode: 'topup',
+ requiredTon: '0.423',
+ onChange: () => {},
+ onCancel: () => {},
+ },
+};
diff --git a/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.tsx b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.tsx
new file mode 100644
index 000000000..68841ca9c
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/low-balance-modal/low-balance-modal.tsx
@@ -0,0 +1,58 @@
+/**
+ * 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 { Modal } from '../../ui/modal/modal';
+import { Button } from '../../ui/button';
+import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import styles from './low-balance-modal.module.css';
+
+export type LowBalanceMode = 'reduce' | 'topup';
+
+export interface LowBalanceModalProps {
+ open: boolean;
+ /**
+ * `reduce` — user can fix it by reducing the amount (shows Change/Cancel).
+ * `topup` — reducing doesn't help, user must top up TON (shows Close only).
+ */
+ mode: LowBalanceMode;
+ /** Required amount in TON, formatted as a decimal string (e.g. "0.423"). */
+ requiredTon: string;
+ onChange: () => void;
+ onCancel: () => void;
+}
+
+export const LowBalanceModal: FC = ({ open, mode, requiredTon, onChange, onCancel }) => {
+ const { t } = useI18n();
+
+ const messageKey = mode === 'reduce' ? 'lowBalance.messageReduce' : 'lowBalance.messageTopup';
+
+ return (
+ !isOpen && onCancel()} title={t('lowBalance.title')}>
+
+ );
+};
diff --git a/packages/appkit-react/src/components/button/index.ts b/packages/appkit-react/src/components/shared/option-switcher/index.ts
similarity index 82%
rename from packages/appkit-react/src/components/button/index.ts
rename to packages/appkit-react/src/components/shared/option-switcher/index.ts
index 4d25fa681..263b997be 100644
--- a/packages/appkit-react/src/components/button/index.ts
+++ b/packages/appkit-react/src/components/shared/option-switcher/index.ts
@@ -6,4 +6,4 @@
*
*/
-export { Button } from './button';
+export * from './option-switcher';
diff --git a/packages/appkit-react/src/components/shared/option-switcher/option-switcher.module.css b/packages/appkit-react/src/components/shared/option-switcher/option-switcher.module.css
new file mode 100644
index 000000000..581026f99
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/option-switcher/option-switcher.module.css
@@ -0,0 +1,18 @@
+.button {
+ composes: bodyMedium from "../../../styles/typography.module.css";
+
+ display: inline-flex;
+ height: 20px;
+ align-items: center;
+ gap: 4px;
+ padding: 0;
+ background: transparent;
+ border: none;
+ color: var(--ta-color-text);
+ cursor: pointer;
+}
+
+.button:disabled {
+ cursor: default;
+ color: var(--ta-color-text-secondary);
+}
diff --git a/packages/appkit-react/src/components/shared/option-switcher/option-switcher.stories.tsx b/packages/appkit-react/src/components/shared/option-switcher/option-switcher.stories.tsx
new file mode 100644
index 000000000..d6485dfab
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/option-switcher/option-switcher.stories.tsx
@@ -0,0 +1,64 @@
+/**
+ * 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 { fn } from 'storybook/test';
+
+import { OptionSwitcher } from './option-switcher';
+
+const meta: Meta = {
+ title: 'Components/Shared/OptionSwitcher',
+ component: OptionSwitcher,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const PROVIDER_OPTIONS = [
+ { value: 'stonfi', label: 'STON.fi' },
+ { value: 'dedust', label: 'DeDust' },
+ { value: 'omniston', label: 'Omniston' },
+];
+
+const SLIPPAGE_OPTIONS = [
+ { value: '50', label: '0.50%' },
+ { value: '100', label: '1.00%' },
+ { value: '200', label: '2.00%' },
+];
+
+export const Default: Story = {
+ render: () => {
+ const Wrapper = () => {
+ const [value, setValue] = useState('stonfi');
+ return = ({ value, options, onChange, disabled, className }) => {
+ const current = options.find((option) => option.value === value);
+ const currentLabel = current?.label ?? value ?? '—';
+
+ return (
+
+
+ {currentLabel}
+
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+ );
+};
diff --git a/packages/appkit-react/src/components/shared/settings-button/index.ts b/packages/appkit-react/src/components/shared/settings-button/index.ts
new file mode 100644
index 000000000..c3ddee4b5
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/settings-button/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 './settings-button';
diff --git a/packages/appkit-react/src/components/shared/settings-button/settings-button.module.css b/packages/appkit-react/src/components/shared/settings-button/settings-button.module.css
new file mode 100644
index 000000000..3310aaf9c
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/settings-button/settings-button.module.css
@@ -0,0 +1,11 @@
+.settingsButton {
+ flex-shrink: 0;
+ width: 50px;
+ height: 50px;
+ aspect-ratio: 1 / 1;
+}
+
+.settingsButton svg {
+ width: 24px;
+ height: 24px;
+}
diff --git a/packages/appkit-react/src/components/shared/settings-button/settings-button.stories.tsx b/packages/appkit-react/src/components/shared/settings-button/settings-button.stories.tsx
new file mode 100644
index 000000000..c6218a3d5
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/settings-button/settings-button.stories.tsx
@@ -0,0 +1,25 @@
+/**
+ * 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 { SettingsButton } from './settings-button';
+
+const meta: Meta = {
+ title: 'Components/Shared/SettingsButton',
+ component: SettingsButton,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ onClick: () => {},
+ },
+};
diff --git a/packages/appkit-react/src/components/shared/settings-button/settings-button.tsx b/packages/appkit-react/src/components/shared/settings-button/settings-button.tsx
new file mode 100644
index 000000000..b87a55949
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/settings-button/settings-button.tsx
@@ -0,0 +1,33 @@
+/**
+ * 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 '../../ui/button';
+import { SlidersIcon } from '../../ui/icons';
+import styles from './settings-button.module.css';
+
+export interface SettingsButtonProps extends ComponentProps {
+ onClick?: () => void;
+}
+
+export const SettingsButton: FC = ({ onClick, className, ...props }) => {
+ return (
+
+ );
+};
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/index.ts b/packages/appkit-react/src/components/shared/token-select-modal/index.ts
new file mode 100644
index 000000000..8188dd7ec
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-select-modal/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 { TokenSelectModal } from './token-select-modal';
+export type { TokenSelectModalProps } from './token-select-modal';
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css
new file mode 100644
index 000000000..5c051fe7a
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.module.css
@@ -0,0 +1,27 @@
+.searchWrapper {
+ margin-bottom: 16px;
+}
+
+.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;
+}
+
+.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/shared/token-select-modal/token-select-modal.stories.tsx b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.stories.tsx
new file mode 100644
index 000000000..1d965c17a
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.stories.tsx
@@ -0,0 +1,68 @@
+/**
+ * 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 { STORY_TOKENS } from '../../../storybook/fixtures/tokens';
+import { Button } from '../../ui/button';
+import { TokenSelectModal } from './token-select-modal';
+import type { AppkitUIToken } from '../../../types/appkit-ui-token';
+
+const meta: Meta = {
+ title: 'Components/Shared/TokenSelectModal',
+ component: TokenSelectModal,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => {
+ const [open, setOpen] = useState(false);
+ const [selected, setSelected] = useState(null);
+
+ return (
+ <>
+
+ setOpen(false)}
+ tokens={STORY_TOKENS}
+ onSelect={setSelected}
+ title="Select Token"
+ searchPlaceholder="Search by name or symbol"
+ />
+
+ );
+ },
+};
+
+export const Empty: Story = {
+ render: () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+
+ setOpen(false)}
+ tokens={[]}
+ onSelect={() => {}}
+ title="Select Token"
+ searchPlaceholder="Search by name or symbol"
+ />
+
+ );
+ },
+};
diff --git a/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx
new file mode 100644
index 000000000..0689a6902
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/token-select-modal/token-select-modal.tsx
@@ -0,0 +1,103 @@
+/**
+ * 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 { FC } from 'react';
+import { compareAddress } from '@ton/appkit';
+
+import { Input } from '../../ui/input/input';
+import { Modal } from '../../ui/modal/modal';
+import { SearchIcon } from '../../ui/icons';
+import { CurrencyItem } from '../../../features/balances';
+import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import type { AppkitUIToken } from '../../../types/appkit-ui-token';
+import styles from './token-select-modal.module.css';
+
+export interface TokenSelectModalProps {
+ open: boolean;
+ onClose: () => void;
+ tokens: AppkitUIToken[];
+ onSelect: (token: AppkitUIToken) => void;
+ title: string;
+ searchPlaceholder?: string;
+}
+
+export const TokenSelectModal: FC = ({
+ open,
+ onClose,
+ tokens,
+ onSelect,
+ title,
+ searchPlaceholder,
+}) => {
+ const { t } = useI18n();
+ const [search, setSearch] = useState('');
+
+ const filtered = tokens.filter(
+ (token) =>
+ token.symbol.toLowerCase().includes(search.toLowerCase()) ||
+ token.name.toLowerCase().includes(search.toLowerCase()) ||
+ compareAddress(token.address, search),
+ );
+
+ const handleSelect = (token: AppkitUIToken) => () => {
+ onSelect(token);
+ onClose();
+ setSearch('');
+ };
+
+ const handleOpenChange = (isOpen: boolean) => {
+ if (!isOpen) {
+ onClose();
+ setSearch('');
+ }
+ };
+
+ return (
+
+
+
+
+
+ setSearch(e.target.value)}
+ autoFocus
+ />
+
+
+
+
+ );
+};
diff --git a/packages/appkit-react/src/components/ton-icon/ton-icon.stories.tsx b/packages/appkit-react/src/components/ton-icon/ton-icon.stories.tsx
deleted file mode 100644
index 068f195be..000000000
--- a/packages/appkit-react/src/components/ton-icon/ton-icon.stories.tsx
+++ /dev/null
@@ -1,79 +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 { Meta, StoryObj } from '@storybook/react';
-
-import { TonIcon, TonIconCircle } from './ton-icon';
-
-const meta: Meta = {
- title: 'Private/Components/TonIcon',
- component: TonIcon,
- tags: ['autodocs'],
- argTypes: {
- size: {
- control: { type: 'range', min: 12, max: 64, step: 4 },
- },
- },
- decorators: [
- (Story) => (
- ;
-
-export const Default: Story = {
- args: {
- size: 24,
- },
-};
-
-export const Small: Story = {
- args: {
- size: 16,
- },
-};
-
-export const Large: Story = {
- args: {
- size: 48,
- },
-};
-
-export const CustomColor: Story = {
- args: {
- size: 32,
- style: { color: '#0098EB' },
- },
-};
-
-export const Circle: StoryObj = {
- render: (args) => = {
- render: (args) => = {
- render: (args) => , 'width' | 'height'> {
- size?: number;
-}
-
-export const TonIcon: FC = ({ size = 16, ...props }) => {
- return (
-
- );
-};
-
-export const TonIconCircle: FC = ({ size = 16, ...props }) => {
- return (
-
- );
-};
diff --git a/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.module.css b/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.module.css
new file mode 100644
index 000000000..a909d3a19
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/ui/amount-reversed/amount-reversed.tsx b/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.tsx
new file mode 100644
index 000000000..ba2911779
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/amount-reversed/amount-reversed.tsx
@@ -0,0 +1,65 @@
+/**
+ * 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';
+import { FlipIcon } from '../icons';
+
+export interface AmountReversedProps extends ComponentProps<'div'> {
+ value: string;
+ onChangeDirection?: () => void;
+ ticker?: string;
+ symbol?: string;
+ decimals?: number;
+ errorMessage?: string;
+ isLoading?: boolean;
+}
+
+export const AmountReversed: FC = ({
+ value,
+ onChangeDirection,
+ ticker,
+ symbol,
+ decimals,
+ errorMessage,
+ className,
+ isLoading,
+ ...props
+}) => {
+ if (errorMessage) {
+ return (
+ = {
+ title: 'Components/UI/Block',
+ component: Block,
+ tags: ['autodocs'],
+ argTypes: {
+ direction: {
+ control: 'radio',
+ options: ['row', 'column'],
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Column: Story = {
+ args: {
+ direction: 'column',
+ children: (
+ <>
+ = {
+ title: 'Components/UI/Button',
+ component: Button,
+ tags: ['autodocs'],
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['s', 'm', 'l', 'unset'],
+ },
+ borderRadius: {
+ control: 'select',
+ options: ['s', 'm', 'l', 'xl', '2xl', 'full'],
+ },
+ variant: {
+ control: 'select',
+ options: ['fill', 'secondary', 'bezeled', 'gray', 'ghost', 'unstyled'],
+ },
+ disabled: {
+ control: 'boolean',
+ },
+ loading: {
+ control: 'boolean',
+ },
+ fullWidth: {
+ control: 'boolean',
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+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) => (
+ , ButtonBorderRadius> = {
+ s: '2xl',
+ m: 'l',
+ l: 'xl',
+};
+
+const RADIUS_CLASS: Record = {
+ s: 'radiusS',
+ m: 'radiusM',
+ l: 'radiusL',
+ xl: 'radiusXl',
+ '2xl': 'radius2xl',
+ full: 'radiusFull',
+};
+
+export const Button = forwardRef(
+ (
+ {
+ className,
+ size = 'm',
+ borderRadius,
+ variant = 'fill',
+ loading = false,
+ fullWidth = false,
+ disabled,
+ icon,
+ children,
+ ...props
+ },
+ ref,
+ ) => {
+ const radius = borderRadius ?? (size === 'unset' ? undefined : SIZE_DEFAULT_RADIUS[size]);
+
+ return (
+
+ );
+ },
+);
+
+Button.displayName = 'Button';
diff --git a/packages/appkit-react/src/components/ui/button/index.ts b/packages/appkit-react/src/components/ui/button/index.ts
new file mode 100644
index 000000000..628283402
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/button/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 { Button } from './button';
+export type { ButtonProps } from './button';
diff --git a/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.module.css b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.module.css
new file mode 100644
index 000000000..f2dece67a
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/ui/centered-amount-input/centered-amount-input.stories.tsx b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.stories.tsx
new file mode 100644
index 000000000..83ac3b280
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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: 'Components/UI/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',
+ 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 (
+ = {
+ title: 'Components/UI/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 (
+ = ({ 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 (
+
Loading quote...
;
+if (error) return Error: {error.message}
;
+
+return Expected Output: {quote?.amountOut}
;
+```
+
+```tsx
+const { data: quote } = useStakingQuote({
+ amount: '10',
+ direction: 'stake',
});
+const { mutateAsync: buildTx, isPending: isBuilding } = useBuildStakeTransaction();
+const { mutateAsync: sendTx, isPending: isSending } = useSendTransaction();
+
+const handleStake = async () => {
+ if (!quote) return;
+ try {
+ const transaction = await buildTx({
+ quote,
+ userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+ });
+ await sendTx(transaction);
+ } catch (e) {
+ console.error(e);
+ }
+};
+
+const isPending = isBuilding || isSending;
+
return (
-
);
```
diff --git a/packages/appkit-react/docs/components.md b/packages/appkit-react/docs/components.md
index e431508a9..d63760fbf 100644
--- a/packages/appkit-react/docs/components.md
+++ b/packages/appkit-react/docs/components.md
@@ -105,3 +105,73 @@ A button that triggers the wallet connection flow.
```tsx
return Staking Quote: {quote?.amountOut}
- Staked Balance: {balance?.stakedBalance}
+
+ 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}`}
+
+
+
+
+);
+```
+
+### `useSwapProviders`
+
+Hook to get all registered swap providers. The returned array keeps a stable reference until the provider list changes, so it is safe to use with `useSyncExternalStore`.
+
+```tsx
+const providers = useSwapProviders();
+return (
+ Result: {provider ? provider.providerId : 'null'}
+
+ -
+ {providers.map((p) => (
+
- {p.getMetadata().name} + ))} +
-
+ {providers.map((p) => (
+
- {p.providerId} + ))} +
Result: {provider ? provider.providerId : 'null'}
;
+```
+
+### `useStakingQuote`
+
+Hook to get a quote for staking or unstaking a given amount.
+
+```tsx
+const {
+ data: quote,
+ isLoading,
+ error,
+} = useStakingQuote({
+ amount: '10',
+ direction: 'stake',
+});
+
+if (isLoading) return Loading quote...
;
+if (error) return Error: {error.message}
;
+
+return Expected Output: {quote?.amountOut}
;
+```
+
+### `useStakedBalance`
+
+Hook to get the user's currently staked balance.
+
+```tsx
+const { data: balance, isLoading } = useStakedBalance({
+ userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+});
+
+if (isLoading) return Loading balance...
;
+
+return Staked Balance: {balance?.stakedBalance}
;
+```
+
+### `useStakingProviderInfo`
+
+Hook to get live info about a staking provider (APY, limits, etc.).
+
+```tsx
+const { data: info, isLoading } = useStakingProviderInfo({
+ providerId: 'tonstakers',
+});
+
+if (isLoading) return Loading info...
;
+
+return APY: {info?.apy}
;
+```
+
+### `useStakingProviderMetadata`
+
+Hook to get static metadata about a staking provider (name, receive token, etc.).
+
+```tsx
+const metadata = useStakingProviderMetadata();
+return Receive Token: {metadata?.receiveToken?.ticker}
;
+```
+
+### `useBuildStakeTransaction`
+
+Hook to build a stake transaction from a previously fetched quote.
+
+```tsx
+const { data: quote } = useStakingQuote({
+ amount: '10',
+ direction: 'stake',
+});
+
+const { mutateAsync: buildTx, isPending: isBuilding } = useBuildStakeTransaction();
+const { mutateAsync: sendTx, isPending: isSending } = useSendTransaction();
+
+const handleStake = async () => {
+ if (!quote) return;
+ try {
+ const transaction = await buildTx({
+ quote,
+ userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+ });
+ await sendTx(transaction);
+ } catch (e) {
+ console.error(e);
+ }
+};
+
+const isPending = isBuilding || isSending;
+
+return (
+
+
+
+);
+```
+
## Transaction
### `useSendTransaction`
diff --git a/packages/appkit-react/src/components/block/block.stories.tsx b/packages/appkit-react/src/components/block/block.stories.tsx
deleted file mode 100644
index a14b28716..000000000
--- a/packages/appkit-react/src/components/block/block.stories.tsx
+++ /dev/null
@@ -1,53 +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 { Meta, StoryObj } from '@storybook/react';
-
-import { Block } from './block';
-
-const meta: MetaItem 1
- Item 2
- Item 3
-
- ),
- },
-};
-
-export const Row: Story = {
- args: {
- direction: 'row',
- children: (
- <>
- Item 1
- Item 2
- Item 3
-
- ),
- },
-};
diff --git a/packages/appkit-react/src/components/button/button.module.css b/packages/appkit-react/src/components/button/button.module.css
deleted file mode 100644
index 9482cf6e8..000000000
--- a/packages/appkit-react/src/components/button/button.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.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;
- 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;
-}
-
-.button:hover {
- transform: scale(1.02);
-}
-
-.button:active {
- transform: scale(0.98);
-}
-
-.button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.button:disabled:hover,
-.button:disabled:active {
- transform: none;
-}
diff --git a/packages/appkit-react/src/components/button/button.stories.tsx b/packages/appkit-react/src/components/button/button.stories.tsx
deleted file mode 100644
index a268465b5..000000000
--- a/packages/appkit-react/src/components/button/button.stories.tsx
+++ /dev/null
@@ -1,58 +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 { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './button';
-
-const meta: Meta
+ {presets.map((preset) => (
+
+ ))}
+
+ );
+};
diff --git a/packages/appkit-react/src/components/shared/amount-presets/index.ts b/packages/appkit-react/src/components/shared/amount-presets/index.ts
new file mode 100644
index 000000000..640926678
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/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/shared/button-with-connect/button-with-connect.tsx b/packages/appkit-react/src/components/shared/button-with-connect/button-with-connect.tsx
new file mode 100644
index 000000000..b4e53b9dc
--- /dev/null
+++ b/packages/appkit-react/src/components/shared/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 '../../ui/button';
+import { Button } from '../../ui/button';
+import { useConnectors, useConnect, useSelectedWallet } from '../../../features/wallets';
+import { useI18n } from '../../../features/settings';
+
+export const ButtonWithConnect: FC{t(messageKey, { amount: requiredTon })}
+ +
+ {mode === 'reduce' ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+
+ {tokens.length === 0 ? (
+
+
+
+ ) : filtered.length === 0 ? (
+ {t('tokenSelect.emptyForNetwork')}
+
+
+ ) : (
+ {t('tokenSelect.emptyNoMatch')}
+{t('tokenSelect.emptyTryAddress')}
+-
+ {filtered.map((token) => (
+
-
- ),
- ],
-};
-
-export default meta;
-
-type Story = StoryObj
+ {errorMessage}
+
+ );
+ }
+
+ return (
+
+ {isLoading ? (
+
+ );
+};
diff --git a/packages/appkit-react/src/components/ui/amount-reversed/index.ts b/packages/appkit-react/src/components/ui/amount-reversed/index.ts
new file mode 100644
index 000000000..665f5f879
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/ui/block/block.module.css
similarity index 77%
rename from packages/appkit-react/src/components/block/block.module.css
rename to packages/appkit-react/src/components/ui/block/block.module.css
index 5de8b960d..102bbef8c 100644
--- a/packages/appkit-react/src/components/block/block.module.css
+++ b/packages/appkit-react/src/components/ui/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/ui/block/block.stories.tsx b/packages/appkit-react/src/components/ui/block/block.stories.tsx
new file mode 100644
index 000000000..c54dbba60
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/block/block.stories.tsx
@@ -0,0 +1,65 @@
+/**
+ * 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 { Block } from './block';
+
+const meta: Meta
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+ ),
+ },
+};
+
+export const Row: Story = {
+ args: {
+ direction: 'row',
+ children: (
+ <>
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+ ),
+ },
+};
diff --git a/packages/appkit-react/src/components/block/block.tsx b/packages/appkit-react/src/components/ui/block/block.tsx
similarity index 100%
rename from packages/appkit-react/src/components/block/block.tsx
rename to packages/appkit-react/src/components/ui/block/block.tsx
diff --git a/packages/appkit-react/src/components/block/index.ts b/packages/appkit-react/src/components/ui/block/index.ts
similarity index 100%
rename from packages/appkit-react/src/components/block/index.ts
rename to packages/appkit-react/src/components/ui/block/index.ts
diff --git a/packages/appkit-react/src/components/ui/button/button.module.css b/packages/appkit-react/src/components/ui/button/button.module.css
new file mode 100644
index 000000000..028fde668
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/button/button.module.css
@@ -0,0 +1,131 @@
+.button {
+ appearance: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ box-sizing: border-box;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ transition: opacity 0.15s ease-in-out;
+ text-decoration: none;
+ width: fit-content;
+}
+
+.button:hover:not(:disabled):not(.loading) {
+ opacity: 0.85;
+}
+
+.button:active:not(:disabled):not(.loading) {
+ opacity: 0.65;
+}
+
+.button:disabled {
+ opacity: 0.35;
+ cursor: not-allowed;
+}
+
+.loading {
+ cursor: wait;
+}
+
+/* Sizes */
+.l {
+ composes: bodySemibold from "../../../styles/typography.module.css";
+ padding: 12px 16px;
+}
+
+.m {
+ composes: labelSemibold from "../../../styles/typography.module.css";
+ padding: 12px 16px;
+}
+
+.s {
+ composes: labelSemibold from "../../../styles/typography.module.css";
+ padding: 9px 12px;
+}
+
+/* Border radius */
+.radiusS {
+ border-radius: var(--ta-border-radius-s);
+}
+
+.radiusM {
+ border-radius: var(--ta-border-radius-m);
+}
+
+.radiusL {
+ border-radius: var(--ta-border-radius-l);
+}
+
+.radiusXl {
+ border-radius: var(--ta-border-radius-xl);
+}
+
+.radius2xl {
+ border-radius: var(--ta-border-radius-2xl);
+}
+
+.radiusFull {
+ 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/ui/button/button.stories.tsx b/packages/appkit-react/src/components/ui/button/button.stories.tsx
new file mode 100644
index 000000000..67539ef1a
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/button/button.stories.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 type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './button';
+
+const meta: Meta
+
+
+
+
+ ),
+ args: {
+ variant: 'fill',
+ },
+};
+
+export const Variants: Story = {
+ render: (args) => (
+
+
+
+
+
+ ),
+ args: {
+ size: 'l',
+ },
+};
+
+export const Loading: Story = {
+ args: {
+ children: 'Loading Button',
+ loading: true,
+ },
+};
+
+export const Unstyled: Story = {
+ args: {
+ children: 'Bare button',
+ variant: 'unstyled',
+ size: 'unset',
+ },
+};
diff --git a/packages/appkit-react/src/components/ui/button/button.tsx b/packages/appkit-react/src/components/ui/button/button.tsx
new file mode 100644
index 000000000..5b868b76d
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/button/button.tsx
@@ -0,0 +1,99 @@
+/**
+ * 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 { forwardRef } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import styles from './button.module.css';
+
+export type ButtonSize = 's' | 'm' | 'l' | 'unset';
+export type ButtonBorderRadius = 's' | 'm' | 'l' | 'xl' | '2xl' | 'full';
+export type ButtonVariant = 'fill' | 'secondary' | 'bezeled' | 'gray' | 'ghost' | 'unstyled';
+
+export interface ButtonProps extends ComponentProps<'button'> {
+ /**
+ * Size class applied to the button. Pass `'unset'` to skip the size class
+ * entirely (no padding, no typography) — useful with `variant="unstyled"`.
+ */
+ size?: ButtonSize;
+ borderRadius?: ButtonBorderRadius;
+ /**
+ * Visual variant. Use `'unstyled'` to opt out of all built-in styling —
+ * the consumer is fully responsible for visuals via `className`. The
+ * Button still provides ref forwarding, `disabled`/`loading` plumbing,
+ * and `icon`/`children` rendering.
+ */
+ variant?: ButtonVariant;
+ loading?: boolean;
+ fullWidth?: boolean;
+ icon?: ReactNode;
+}
+
+const SIZE_DEFAULT_RADIUS: Record
+
+ );
+};
+
+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/ui/centered-amount-input/centered-amount-input.tsx b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx
new file mode 100644
index 000000000..cf526e846
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/centered-amount-input/centered-amount-input.tsx
@@ -0,0 +1,118 @@
+/**
+ * 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;
+}
+
+export const CenteredAmountInput: FC inputRef.current?.focus()}
+ {...props}
+ >
+
+
+
+ );
+};
diff --git a/packages/appkit-react/src/components/ui/centered-amount-input/index.ts b/packages/appkit-react/src/components/ui/centered-amount-input/index.ts
new file mode 100644
index 000000000..4145d5582
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/ui/collapsible/collapsible.module.css b/packages/appkit-react/src/components/ui/collapsible/collapsible.module.css
new file mode 100644
index 000000000..d0362c1ef
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/collapsible/collapsible.module.css
@@ -0,0 +1,4 @@
+.collapsible {
+ overflow: hidden;
+ transition: height 0.25s ease;
+}
diff --git a/packages/appkit-react/src/components/ui/collapsible/collapsible.stories.tsx b/packages/appkit-react/src/components/ui/collapsible/collapsible.stories.tsx
new file mode 100644
index 000000000..f71543ffa
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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
+ {symbol && (
+
+ {symbol}
+
+ )}
+ onValueChange(e.target.value)}
+ style={{
+ width: inputWidth ? `${inputWidth}px` : undefined,
+ fontSize: scaledInputFontSize,
+ }}
+ />
+ {ticker && (
+
+ {ticker}
+
+ )}
+
+
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/packages/appkit-react/src/components/ui/collapsible/collapsible.tsx b/packages/appkit-react/src/components/ui/collapsible/collapsible.tsx
new file mode 100644
index 000000000..bce384715
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/ui/collapsible/index.ts b/packages/appkit-react/src/components/ui/collapsible/index.ts
new file mode 100644
index 000000000..ad22db5e2
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/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/components/ui/dialog/dialog.tsx b/packages/appkit-react/src/components/ui/dialog/dialog.tsx
new file mode 100644
index 000000000..dbf4fefdd
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/dialog/dialog.tsx
@@ -0,0 +1,105 @@
+/**
+ * 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 { forwardRef, useCallback, useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+import type { ComponentPropsWithoutRef, ComponentRef, FC, ReactNode } from 'react';
+
+import { DialogContext, useDialogContext } from './use-dialog-context';
+
+interface DialogRootProps {
+ children: ReactNode;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}
+
+const DialogRoot: FC