🚀 Frisch von der Wallet-Integration? Lassen Sie uns aufrüsten: Fügen Sie einfache Token-Übertragungen zu Ihrer Next.js-App mit Wagmi-Hooks hinzu. Perfekt für BNB Chain dApps, behandeln Sie $BNB Sendungen oder ERC-20-Token wie ein Profi und binden Sie sich an gaslose Trends für ein reibungsloseres UX.
Geht davon aus, dass Sie Wagmi/RainbowKit aus meinem letzten Tutorial eingerichtet haben (prüfen Sie es, falls nicht!).
Schnelle Schritte (Next.js 14+):
Installieren Sie viem (bereits in Abhängigkeiten? Überspringen):
npm install viem
Erstellen Sie eine Übertragungsfunktion (z. B. in einer Komponente):
import { useAccount, useSendTransaction } from 'wagmi'
import { parseEther } from 'viem'
function SendBNB() {
const { address } = useAccount()
const { sendTransaction } = useSendTransaction()
const handleSend = () => {
sendTransaction({
to: '0xRecipientAddress', // Ersetzen Sie durch Testadresse
value: parseEther('0.001'), // 0.001 BNB
})
}
return <button onClick={handleSend} disabled={!address}>0.001 BNB senden</button>
}
Für ERC-20 (z.B. $BUSD auf der BNB-Chain): Verwenden Sie useWriteContract stattdessen:
import { useWriteContract } from 'wagmi'
import { parseUnits } from 'viem'
import { erc20Abi } from 'viem/abi' // Oder importiere das Standard-ABI
function SendToken() {
const { writeContract } = useWriteContract()
const handleSend = () => {
writeContract({
address: '0xTokenContractAddr', // z.B. BUSD
abi: erc20Abi,
functionName: 'transfer',
args: ['0xRecipient', parseUnits('1', 18)], // 1 Token, 18 Dezimalstellen
})
}
return <button onClick={handleSend}>Token senden</button>
}
Pro Tipp: Fügen Sie eine Fehlerbehandlung mit useWaitForTransaction für Bestätigungen hinzu. Testen Sie im BNB-Testnetz, holen Sie sich BNB über die Binance-Tools!
Was ist Ihr erster dApp-Transaktionsanwendungsfall? Teilen Sie unten, lassen Sie uns über Upgrades für 2026 nachdenken! 👇
#Web3 #CryptoDev #BNBChain #Nextjs #WAGMI #BlockchainTutorial $ETH