Generic StarkNet contract interaction handler.
'use client' import { useCallAnyContract } from "@chipi-pay/chipi-sdk"; import { useState } from "react"; // Sample wallet data - replace with your wallet in production const sampleWallet: { publicKey: string; encryptedPrivateKey: string } = { publicKey: "0x123...yourPublicKeyHere", encryptedPrivateKey: "encrypted:key:data" // This would be encrypted data in production }; export function GenericContractForm() { const { callAsync, callData, isLoading, error } = useCallAnyContract(); const [wallet] = useState(sampleWallet); const [form, setForm] = useState({ pin: '', contractAddress: '', entrypoint: '', calldata: '' }); const handleCall = async (e: React.FormEvent) => { e.preventDefault(); try { await callAsync({ encryptKey: form.pin, wallet: { publicKey: wallet.publicKey, encryptedPrivateKey: wallet.encryptedPrivateKey }, contractAddress: form.contractAddress, entrypoint: form.entrypoint, calldata: JSON.parse(form.calldata || "[]") }); } catch (err) { console.error('Contract call failed:', err); } }; return ( <div className="bg-white rounded-xl shadow-lg p-6"> <h2 className="text-2xl font-bold mb-4">Contract Interaction</h2> <form onSubmit={handleCall} className="space-y-4"> <div> <label className="block text-sm font-medium mb-1">Security PIN</label> <input type="password" value={form.pin} onChange={(e) => setForm({...form, pin: e.target.value})} className="w-full p-2 border rounded-md" required /> </div> <div> <label className="block text-sm font-medium mb-1">Contract Address</label> <input type="text" value={form.contractAddress} onChange={(e) => setForm({...form, contractAddress: e.target.value})} className="w-full p-2 border rounded-md" required /> </div> <div> <label className="block text-sm font-medium mb-1">Method Name</label> <input type="text" value={form.entrypoint} onChange={(e) => setForm({...form, entrypoint: e.target.value})} className="w-full p-2 border rounded-md" required /> </div> <div> <label className="block text-sm font-medium mb-1">Call Data (JSON array)</label> <input type="text" value={form.calldata} onChange={(e) => setForm({...form, calldata: e.target.value})} className="w-full p-2 border rounded-md" placeholder='Example: [123, "0xabc...", true]' /> </div> <button type="submit" disabled={isLoading} className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:bg-gray-400" > {isLoading ? 'Processing...' : 'Execute'} </button> </form> {callData && ( <div className="mt-4 p-3 bg-gray-50 rounded-md"> <p className="text-sm font-mono break-all"> TX Hash: {callData} </p> </div> )} {error && ( <div className="mt-4 p-3 bg-red-50 text-red-700 rounded-md"> Error: {error.message} </div> )} </div> ); }