+ {title && (
+
+ );
+};
diff --git a/apps/appkit-next/src/core/components/common/index.ts b/apps/appkit-next/src/core/components/common/index.ts
new file mode 100644
index 000000000..a19bc8d08
--- /dev/null
+++ b/apps/appkit-next/src/core/components/common/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 { Card } from './card';
diff --git a/apps/appkit-next/src/core/components/index.ts b/apps/appkit-next/src/core/components/index.ts
new file mode 100644
index 000000000..8e4ac9860
--- /dev/null
+++ b/apps/appkit-next/src/core/components/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+// Common components
+export { Button, Card } from './common';
+
+// Layout components
+export { Layout, ThemeProvider } from './layout';
diff --git a/apps/appkit-next/src/core/components/layout/index.ts b/apps/appkit-next/src/core/components/layout/index.ts
new file mode 100644
index 000000000..9192bf1ff
--- /dev/null
+++ b/apps/appkit-next/src/core/components/layout/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 { Layout } from './layout';
+export { ThemeProvider } from './theme-provider';
diff --git a/apps/appkit-next/src/core/components/layout/layout.tsx b/apps/appkit-next/src/core/components/layout/layout.tsx
new file mode 100644
index 000000000..2ed94bba9
--- /dev/null
+++ b/apps/appkit-next/src/core/components/layout/layout.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 { TonConnectButton } from '@ton/appkit-react';
+import { Layers } from 'lucide-react';
+
+import { ThemeSwitcher } from './theme-switcher';
+
+import { NetworkPicker } from '@/features/network';
+
+interface LayoutProps {
+ children: React.ReactNode;
+ title?: string;
+}
+
+export const Layout: React.FC
+
+ )}
+
+ {title}
+{children}
+
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/apps/appkit-next/src/core/components/layout/theme-provider.tsx b/apps/appkit-next/src/core/components/layout/theme-provider.tsx
new file mode 100644
index 000000000..854fa5a45
--- /dev/null
+++ b/apps/appkit-next/src/core/components/layout/theme-provider.tsx
@@ -0,0 +1,94 @@
+/**
+ * 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 React, { createContext, useEffect, useMemo, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+type ThemeOption = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+ children: React.ReactNode;
+ defaultTheme?: ThemeOption;
+ storageKey?: string;
+};
+
+type ThemeProviderState = {
+ theme: ThemeOption;
+ calculatedTheme: Theme;
+ setTheme: (theme: ThemeOption) => void;
+};
+
+const initialState: ThemeProviderState = {
+ theme: 'system',
+ calculatedTheme: 'light',
+ setTheme: () => null,
+};
+
+export const ThemeProviderContext = createContext
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+ )}
+
+
+ Swap Demo
+
+
+ );
+};
diff --git a/apps/appkit-next/src/features/balances/components/tokens-card.tsx b/apps/appkit-next/src/features/balances/components/tokens-card.tsx
new file mode 100644
index 000000000..8a62bf899
--- /dev/null
+++ b/apps/appkit-next/src/features/balances/components/tokens-card.tsx
@@ -0,0 +1,138 @@
+/**
+ * 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 { useMemo, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+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 { TokenTransferModal } from './token-transfer-modal';
+
+import { Card, Button } from '@/core/components';
+
+interface SelectedToken {
+ type: 'TON' | 'JETTON';
+ jetton?: Jetton;
+}
+
+export const TokensCard: FC
+
+
+
+
+
+
+ {txBoc ? (
+
+
+
+
+ {tokenInfo.image ? (
+ 
+ ) : tokenType === 'TON' ? (
+
+
+
+ Transfer {tokenInfo.name}
++ Balance: {tokenInfo.balance} {tokenInfo.symbol} +
+
+
+ ) : (
+ <>
+
+
+
+
+
+ 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 && (
+
+
+ )}
+ {transferError}
+
+ {tokenType === 'TON' && (
+ setTransferError(getErrorMessage(error))}
+ onSuccess={(data) => setTxBoc(data.boc)}
+ >
+ {({ isLoading, onSubmit, disabled, text }) => (
+
+ )}
+
+ )}
+
+ {tokenType === 'JETTON' && jetton?.address && (
+ setTransferError(getErrorMessage(error))}
+ onSuccess={(data) => setTxBoc(data.boc)}
+ >
+ {({ isLoading, onSubmit, disabled, text }) => (
+
+ )}
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+ Failed to load balances
+ + +
+
+ Loading balances...
+
+ ) : (
+
+ {/* Summary */}
+
+ )}
+
+
+
+ {/* Token List */}
+ + {totalTokens} {totalTokens === 1 ? 'Asset' : 'Assets'} +
+ +
+ setSelectedToken({ type: 'TON' })}
+ icon="./ton.png"
+ isVerified
+ />
+
+ {/* Jettons */}
+ {jettons.map((jetton) => {
+ const info = getFormattedJettonInfo(jetton);
+
+ if (!info || !info.symbol) {
+ return null;
+ }
+
+ return (
+ setSelectedToken({ type: 'JETTON', jetton })}
+ />
+ );
+ })}
+
+
+ {/* Card preview area */}
+
+
+ {currentCard ? (
+
+
+ {/* Rarity odds info */}
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+ Your card will appear here
+
+
+
+ {/* Mint error */}
+ {mintErrorLocal && (
+
+
+
+
+ 60%
+
+
+
+ 25%
+
+
+
+ 12%
+
+
+
+ 3%
+
+
+
+ )}
+
+ {/* Action buttons */}
+ {mintErrorLocal}
+
+
+
+ {isConnected && canMint && (
+ {
+ mintCard();
+ setMintErrorLocal(null);
+ setMintError(null);
+ toast.success('NFT minted successfully!');
+ }}
+ onError={(error) => {
+ const msg = getErrorMessage(error);
+ setMintErrorLocal(msg);
+ setMintError(msg);
+ }}
+ disabled={!canMint}
+ >
+ {({ isLoading, onSubmit, disabled }) => (
+
+ )}
+
+ )}
+
+
+ {/* Shimmer overlay for legendary cards */}
+ {isLegendary && }
+
+ {/* Card content */}
+
+ );
+};
diff --git a/apps/appkit-next/src/features/mint/components/rarity-badge.tsx b/apps/appkit-next/src/features/mint/components/rarity-badge.tsx
new file mode 100644
index 000000000..c7471aa9b
--- /dev/null
+++ b/apps/appkit-next/src/features/mint/components/rarity-badge.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 type React from 'react';
+
+import { RarityValues, RARITY_CONFIGS } from '../types/card';
+import type { Rarity } from '../types/card';
+
+import { cn } from '@/core/lib/utils';
+
+interface RarityBadgeProps {
+ rarity: Rarity;
+ className?: string;
+}
+
+export const RarityBadge: React.FC
+ {/* Card image */}
+
+
+ {/* Decorative corner elements for epic/legendary */}
+ {/* {(card.rarity === RarityValues.Epic || card.rarity === RarityValues.Legendary) && (
+ <>
+
+
+
+
+
+ )} */}
+
+ {card.imageUrl ? (
+ 
+ ) : (
+
+
+ {/* Card info */}
+
+
+ )}
+
+ {/* Rarity badge overlay */}
+
+
+
+
+ + {card.name} +
+ + {card.description && ( ++ {card.description} +
+ )} +
+
+
+ );
+};
diff --git a/apps/appkit-next/src/features/network/index.ts b/apps/appkit-next/src/features/network/index.ts
new file mode 100644
index 000000000..d3727ee53
--- /dev/null
+++ b/apps/appkit-next/src/features/network/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 { NetworkPicker } from './components/network-picker';
diff --git a/apps/appkit-next/src/features/nft/components/nft-transfer-modal.tsx b/apps/appkit-next/src/features/nft/components/nft-transfer-modal.tsx
new file mode 100644
index 000000000..95091acfa
--- /dev/null
+++ b/apps/appkit-next/src/features/nft/components/nft-transfer-modal.tsx
@@ -0,0 +1,140 @@
+/**
+ * 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 React, { useCallback, useMemo, useState } from 'react';
+import type { NFT } from '@ton/appkit';
+import { getFormattedNftInfo, createTransferNftTransaction, getErrorMessage } from '@ton/appkit';
+import { Transaction, useAppKit } from '@ton/appkit-react';
+import { toast } from 'sonner';
+import { X, Image as ImageIcon } from 'lucide-react';
+
+import { Button } from '@/core/components';
+
+interface NftTransferModalProps {
+ nft: NFT;
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export const NftTransferModal: React.FC
+
+
+
+ );
+};
diff --git a/apps/appkit-next/src/features/nft/components/nfts-card.tsx b/apps/appkit-next/src/features/nft/components/nfts-card.tsx
new file mode 100644
index 000000000..646662573
--- /dev/null
+++ b/apps/appkit-next/src/features/nft/components/nfts-card.tsx
@@ -0,0 +1,106 @@
+/**
+ * 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 { useMemo, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+import type { NFT } from '@ton/appkit';
+import { NftItem, useNfts } from '@ton/appkit-react';
+import { AlertCircle, Image as ImageIcon } from 'lucide-react';
+
+import { NftTransferModal } from './nft-transfer-modal';
+
+import { Card, Button } from '@/core/components';
+
+export const NftsCard: FC
+
+
+
+
+
+
+ {/* NFT Preview */}
+ Transfer NFT
+ +
+
+
+
+ {nftInfo.image ? (
+ 
+ ) : (
+
+ {nftInfo.name}
+{nftInfo.collectionName}
+ {nftInfo.description && ( +{nftInfo.description}
+ )} +
+
+
+
+
+ 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"
+ />
+
+
+
+
+ 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 && (
+
+
+ )}
+ {transferError}
+
+ {
+ handleClose();
+ toast.success('NFT transferred successfully');
+ }}
+ onError={(error) => {
+ setTransferError(getErrorMessage(error));
+ }}
+ disabled={!recipientAddress}
+ >
+ {({ isLoading, onSubmit, disabled, text }) => (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Failed to load NFTs
+ + +
+
+ Loading NFTs...
+
+ ) : nfts.length === 0 ? (
+
+
+ ) : (
+
+
+ No NFTs yet
+Your NFT collection will appear here
+
+ {/* Summary */}
+
+ )}
+
+
+
+ {/* NFT Grid */}
+ + {nfts.length} {nfts.length === 1 ? 'NFT' : 'NFTs'} +
+ +
+ {nfts.slice(0, 8).map((nft) => (
+ setSelectedNft(nft)}
+ />
+ ))}
+
+
+ {nfts.length > 8 && (
+
+
+ )}
+ Showing 8 of {nfts.length} NFTs
+
+ {/* Message Input */}
+
+
+