+ setIsTokenSelectOpen(false)}
+ tokens={ASSETS}
+ onSelect={setSelectedAsset}
+ title="Select Token"
+ />
+
+ {trackingHash && (
+ setTrackingHash(null)} />
+ )}
+
+ );
+};
diff --git a/apps/appkit-minter/src/features/cross-chain/components/tac/smart-account.tsx b/apps/appkit-minter/src/features/cross-chain/components/tac/smart-account.tsx
new file mode 100644
index 000000000..43c497e84
--- /dev/null
+++ b/apps/appkit-minter/src/features/cross-chain/components/tac/smart-account.tsx
@@ -0,0 +1,156 @@
+/**
+ * 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 React, { useMemo, useState } from 'react';
+import { Network } from '@ton/appkit';
+import { Button, Input, Select } from '@ton/appkit-react';
+import { useSmartAccountAddress } from '@ton/appkit-react/cross-chain';
+import { Copy, ExternalLink, ChevronDownIcon, LayoutGrid } from 'lucide-react';
+import { Skeleton } from '@ton/appkit-react';
+import { useNetwork } from '@ton/appkit-react';
+
+import { TacAddressInput, isTacAddressValid } from './tac-address-input';
+
+const APPS = [
+ {
+ name: 'Orbs',
+ address: '0xaD809718714905344669E2C5150a33b21c35C53E',
+ logo: 'https://assets.coingecko.com/coins/images/4630/standard/Orbs.jpg?1696505200',
+ },
+ {
+ name: 'Merkl',
+ address: '0x74e6b5e701bA5de3245653d72A075c7709EeFDC4',
+ logo: 'https://raw.githubusercontent.com/AngleProtocol/angle-token-list/refs/heads/main/src/assets/protocols/merkl.svg',
+ },
+ {
+ name: 'Euler',
+ address: '0xDD9722bd6874167Ee2b5b4062cf65d0C5Cdb2280',
+ logo: 'https://raw.githubusercontent.com/AngleProtocol/angle-token-list/refs/heads/main/src/assets/tokens/EUL.svg',
+ },
+];
+
+export const SmartAccount: React.FC = () => {
+ const [selectedAppId, setSelectedAppId] = useState(APPS[0].address);
+ const [customAppAddress, setCustomAppAddress] = useState('');
+ const network = useNetwork();
+
+ const appAddress = selectedAppId === 'custom' ? customAppAddress : selectedAppId;
+ const isAppAddressValid = isTacAddressValid(appAddress);
+
+ const { address: smartAccountAddress, isLoading: isAddressLoading } = useSmartAccountAddress({
+ applicationAddress: isAppAddressValid ? appAddress : '',
+ providerId: 'tac',
+ });
+
+ const explorerLink = useMemo(() => {
+ if (!smartAccountAddress) {
+ return undefined;
+ }
+ if (network?.chainId === Network.testnet().chainId) {
+ return `https://spb.explorer.tac.build/address/${smartAccountAddress}`;
+ }
+ return `https://explorer.tac.build/address/${smartAccountAddress}`;
+ }, [smartAccountAddress]);
+
+ const copyToClipboard = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch {
+ // Fail silently
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Amount
+
+
+
+
+
+
+ handleAmountChange((e.target as HTMLInputElement).value)}
+ placeholder="0.0"
+ />
+
+
+
+
+
+
+ {selectedAsset.rate && amount && (
+ <>≈ ${formatLargeValue(calcFiatValue(amount, selectedAsset.rate), 2)}
+ )}
+
+
+
+ Balance:{' '}
+ {isBalanceLoading ? (
+
+
+
+ );
+};
diff --git a/apps/appkit-minter/src/features/cross-chain/components/tac/tac-address-input.tsx b/apps/appkit-minter/src/features/cross-chain/components/tac/tac-address-input.tsx
new file mode 100644
index 000000000..7f5466d6e
--- /dev/null
+++ b/apps/appkit-minter/src/features/cross-chain/components/tac/tac-address-input.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 React from 'react';
+import { Button, Input } from '@ton/appkit-react';
+import { toast } from 'sonner';
+
+export const isTacAddressValid = (address: string) => !address || /^0x[a-fA-F0-9]{40}$/.test(address);
+
+interface TacAddressInputProps {
+ value: string;
+ onChange: (value: string) => void;
+ label?: string;
+ name?: string;
+ placeholder?: string;
+ className?: string;
+}
+
+export const TacAddressInput: React.FC
+
+
+ Select dApp
+
+
+
+ {selectedAppId === 'custom' ? (
+ )
a.address === selectedAppId)?.logo}
+ className="size-5 rounded-full"
+ alt=""
+ />
+ )}
+
+ {selectedAppId === 'custom'
+ ? 'Custom'
+ : APPS.find((a) => a.address === selectedAppId)?.name}
+
+
+
+ {APPS.map((app) => (
+
+ 
+ {app.name}
+
+ ))}
+
+
+
+
+
+
+ {selectedAppId === 'custom' && (
+
+
+ Your Smart Account Address
+
+
+
+
+
+
+ {isAddressLoading ? (
+
+
+
+
+
+
+ onChange((e.target as HTMLInputElement).value)}
+ placeholder={placeholder}
+ />
+
+
+
+
+ );
+};
diff --git a/apps/appkit-minter/src/features/cross-chain/index.ts b/apps/appkit-minter/src/features/cross-chain/index.ts
new file mode 100644
index 000000000..7432910e6
--- /dev/null
+++ b/apps/appkit-minter/src/features/cross-chain/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 { SmartAccount } from './components/tac/smart-account';
+export { BridgeToTacChain } from './components/tac/bridge-to-tac-chain';
diff --git a/apps/appkit-minter/src/pages/bridge-to-tac-page.tsx b/apps/appkit-minter/src/pages/bridge-to-tac-page.tsx
new file mode 100644
index 000000000..122a7e27b
--- /dev/null
+++ b/apps/appkit-minter/src/pages/bridge-to-tac-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 { BridgeToTacChain } from '@/features/cross-chain';
+
+export const BridgeToTacPage: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TON tx hash
+ {trackingHash}
+
+
+
+
+
+ {status === 'completed' && (
+
+ Current Status
+
+ {isTracking
+ ? 'Processing...'
+ : status === 'pending' && totalMessages > 0
+ ? `Processing (${onchainMessages}/${totalMessages})`
+ : status && status !== 'unknown'
+ ? status
+ : 'Pending'}
+
+
+
+
+
+
+
+ )}
+
+ {status === 'failed' && (
+
+
+ )}
+