Entwicklerdokumentation.md

@@ -243,3 +243,96 @@ function MyApp({ Component, pageProps }) {
 
 export default MyApp;
 ```
+
+
+### Swap-Komponenten
+
+```jsx
+import { useContract } from '@thirdweb-dev/react';
+import SwapInput from 'components/SwapInput';
+
+const TOKEN_ADDRESS = '0x123...'; // ERC20 token address
+const DEX_ADDRESS = '0x456...';   // DEX contract address
+
+export default function Home() {
+  const tokenContract = useContract(TOKEN_ADDRESS);
+  const dexContract = useContract(DEX_ADDRESS);
+
+  const [tokenBalance, setTokenBalance] = useState('0');
+  const [nativeBalance, setNativeBalance] = useState('0');
+  const [tokenSymbol, setTokenSymbol] = useState('');
+  const [amountOut, setAmountOut] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // useEffect hooks to fetch balances & allowance
+  // ...
+
+  async function executeSwap() {
+    try {
+      setIsLoading(true);
+
+      // Approve DEX to spend token
+      await tokenContract.call('approve', [DEX_ADDRESS, tokenAmount]);
+
+      const tx = currentType === 'native'
+        ? await dexContract.call('swapEthToToken', {
+            value: toWei(nativeAmount),
+          })
+        : await dexContract.call('swapTokenToEth', [
+            toWei(tokenAmount),
+          ]);
+
+      await tx.wait();
+      alert(`Swap successful!`);
+    } catch (err) {
+      console.error(err);
+      alert('An error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div>
+      <SwapInput
+        symbol='MATIC'
+        type='native'
+        balance={nativeBalance}
+        amount={nativeAmount}
+        onAmountChange={setNativeAmount}
+      />
+
+      <button onClick={() => setCurrentType(t => t === 'native' ? 'token' : 'native')}>
+        Switch
+      </button>
+
+      <SwapInput
+        symbol={tokenSymbol}
+        type='token'
+        balance={tokenBalance}
+        amount={tokenAmount}
+        onAmountChange={setTokenAmount}
+      />
+
+      {amountOut > 0 && (
+        <p>You will receive ~{formatUnits(amountOut)} tokens</p>
+      )}
+
+      {address ? (
+        <button onClick={executeSwap} disabled={isLoading}>
+          {isLoading ? 'Swapping...' : 'Swap'}
+        </button>
+      ) : (
+        <p>Connect wallet to swap</p>
+      )}
+    </div>
+  )
+}
+```
+
+Diese Komponente verwaltet:
+
+- Abrufen von Token-Salden und Symbolen
+- Berechnung der Menge an Token
+- Genehmigung des DEX zur Ausgabe von Token
+- Ausführung des Swaps
\ No newline at end of file