React Integration Example

Using Tongo SDK in a React application.

Setup with React Hooks

import { useAccount, useProvider } from '@starknet-react/core';
import { Account as TongoAccount } from '@fatsolutions/tongo-sdk';
import { useState, useEffect } from 'react';

function useTongoAccount() {
    const { account } = useAccount();
    const { provider } = useProvider();
    const [tongoAccount, setTongoAccount] = useState<TongoAccount | null>(null);
    const [balance, setBalance] = useState<bigint>(0n);
    const [pending, setPending] = useState<bigint>(0n);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (account && provider) {
            const tongoPrivateKey = 82130983n;
            // Tongo contract on Sepolia (wraps STRK with 1:1 rate)
            const tongoAddress = "0x00b4cca30f0f641e01140c1c388f55641f1c3fe5515484e622b6cb91d8cee585";
            const tAccount = new TongoAccount(tongoPrivateKey, tongoAddress, provider);
            setTongoAccount(tAccount);
            refreshBalance();
        }
    }, [account, provider]);

    async function refreshBalance() {
        if (!tongoAccount) return;
        setLoading(true);
        try {
            const state = await tongoAccount.state();
            setBalance(state.balance);
            setPending(state.pending);
        } finally {
            setLoading(false);
        }
    }

    return { tongoAccount, balance, pending, loading, refreshBalance };
}

Transfer Component

function TransferForm() {
    const { tongoAccount, refreshBalance } = useTongoAccount();
    const { account } = useAccount();
    const [amount, setAmount] = useState('');
    const [loading, setLoading] = useState(false);

    async function handleTransfer() {
        if (!tongoAccount || !account) return;
        setLoading(true);
        try {
            const transferOp = await tongoAccount.transfer({
                to: recipientPubKey,
                amount: BigInt(amount)
            });
            const tx = await account.execute(transferOp.toCalldata());
            await provider.waitForTransaction(tx.transaction_hash);
            await refreshBalance();
            alert('Transfer successful!');
        } catch (error) {
            alert(`Failed: $${error.message}`);$$
        } finally {
            setLoading(false);
        }
    }

    return (
        <div>
            <input value={amount} onChange={(e) => setAmount(e.target.value)} />
            <button onClick={handleTransfer} disabled={loading}>Send</button>
        </div>
    );
}

Balance Display

function BalanceDisplay() {
    const { balance, pending, loading } = useTongoAccount();

    return (
        <div>
            <h2>Balance</h2>
            {loading ? <p>Loading...</p> : (
                <>
                    <p>Balance: {balance.toString()}</p>
                    <p>Pending: {pending.toString()}</p>
                </>
            )}
        </div>
    );
}