Full Example

1npm install starknet-tokenkit starknet-react @starknet-react/core starknet

1import { useState } from 'react';
2import {
3  StarknetConfig,
4  publicProvider,
5  argent,
6  braavos,
7  useAccount,
8  useConnect,
9  useDisconnect,
10} from '@starknet-react/core';
11import { mainnet } from '@starknet-react/chains';
12import {
13  TokenKitWrapper,
14  SelectTokenModal,
15  themes,
16  type IToken,
17} from 'starknet-tokenkit';
18 
19function WalletButton() {
20  const { address } = useAccount();
21  const { connect, connectors } = useConnect();
22  const { disconnect } = useDisconnect();
23 
24  if (address) {
25    return (
26      <button onClick={() => disconnect()}>
27        {address.slice(0, 6)}...{address.slice(-4)}
28      </button>
29    );
30  }
31 
32  return (
33    <div>
34      {connectors.map((connector) => (
35        <button key={connector.id} onClick={() => connect({ connector })}>
36          Connect {connector.name}
37        </button>
38      ))}
39    </div>
40  );
41}
42 
43function SwapInterface() {
44  const { address } = useAccount();
45  const [selectedToken, setSelectedToken] = useState<IToken | null>(null);
46  const [amount, setAmount] = useState('');
47 
48  const handleSwap = async () => {
49    if (!selectedToken || !address) return;
50 
51    // Use starknet.js or starknet-react to build and send the transaction
52    console.log('Swap', amount, selectedToken.symbol, 'from', address);
53  };
54 
55  return (
56    <div>
57      <h2>Swap Tokens</h2>
58 
59      <SelectTokenModal
60        callBackFunc={(token) => setSelectedToken(token)}
61        selectedToken={selectedToken}
62      >
63        <button>
64          {selectedToken
65            ? `${selectedToken.symbol} (${selectedToken.name})`
66            : 'Select Token'}
67        </button>
68      </SelectTokenModal>
69 
70      {selectedToken && (
71        <>
72          <input
73            type="number"
74            value={amount}
75            onChange={(e) => setAmount(e.target.value)}
76            placeholder="Amount"
77          />
78          <p>
79            You will swap {amount} {selectedToken.symbol}
80          </p>
81          <button onClick={handleSwap} disabled={!amount}>
82            Swap
83          </button>
84        </>
85      )}
86    </div>
87  );
88}
89 
90function App() {
91  return (
92    <StarknetConfig
93      chains={[mainnet]}
94      provider={publicProvider()}
95      connectors={[argent(), braavos()]}
96    >
97      <TokenKitWrapper
98        network="SN_MAIN"
99        apiKey="your-api-key"
100        mainnetEndpoint="https://api.tokenkithq.io"
101        sepoliaEndpoint="https://api.sepolia.tokenkithq.io"
102        themeObject={themes.dark}
103      >
104        <div>
105          <h1>My Swap dApp</h1>
106          <WalletButton />
107          <SwapInterface />
108        </div>
109      </TokenKitWrapper>
110    </StarknetConfig>
111  );
112}
113 
114export default App;