const contract = "0xeb4a8f9f5b11f644812306647a4c15161c90813a5451dc35fa24feb10dcb73d9"; const contractData = "00010001000000000001030000000107000000000000000108000000a90b3400081466745f696f28496e6974436f6e66696700000c01106e616d65040118537472696e6700011873796d626f6c040118537472696e67000120646563696d616c73080108753800000400000502000800000503000c081466745f696f204654416374696f6e000118104d696e74040010011075313238000000104275726e040010011075313238000100205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380002001c417070726f7665080108746f14011c4163746f724964000118616d6f756e74100110753132380003002c546f74616c537570706c790004002442616c616e63654f66040014011c4163746f724964000500001000000507001410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001801205b75383b2033325d0000180000032000000008001c081466745f696f1c46544576656e74000110205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380000001c417070726f76650c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380001002c546f74616c537570706c790400100110753132380002001c42616c616e63650400100110753132380003000020081466745f696f3c496f46756e6769626c65546f6b656e00001801106e616d65040118537472696e6700011873796d626f6c040118537472696e67000130746f74616c5f737570706c791001107531323800012062616c616e6365732401505665633c284163746f7249642c2075313238293e000128616c6c6f77616e6365732c01905665633c284163746f7249642c205665633c284163746f7249642c2075313238293e293e000120646563696d616c730801087538000024000002280028000004081410002c00000230003000000408142400"; const idl = ` constructor { New : (name: str, symbol: str, decimals: u8); }; service Vft { Burn : (from: actor_id, value: u256) -> bool; GrantAdminRole : (to: actor_id) -> null; GrantBurnerRole : (to: actor_id) -> null; GrantMinterRole : (to: actor_id) -> null; Mint : (to: actor_id, value: u256) -> bool; RevokeAdminRole : (from: actor_id) -> null; RevokeBurnerRole : (from: actor_id) -> null; RevokeMinterRole : (from: actor_id) -> null; Approve : (spender: actor_id, value: u256) -> bool; Transfer : (to: actor_id, value: u256) -> bool; TransferFrom : (from: actor_id, to: actor_id, value: u256) -> bool; query Admins : () -> vec actor_id; query Burners : () -> vec actor_id; query Minters : () -> vec actor_id; query Allowance : (owner: actor_id, spender: actor_id) -> u256; query BalanceOf : (account: actor_id) -> u256; query Decimals : () -> u8; query Name : () -> str; query Symbol : () -> str; query TotalSupply : () -> u256; events { Minted: struct { to: actor_id, value: u256 }; Burned: struct { from: actor_id, value: u256 }; Approval: struct { owner: actor_id, spender: actor_id, value: u256 }; Transfer: struct { from: actor_id, to: actor_id, value: u256 }; } }; `; const [ftData, setFtData] = useState(undefined); const [account, setAccount] = useState(undefined); const [response, setResponse] = useState(undefined); return ( <> <VaraNetwork.Wrapper> <div className="border border-black p-3 rounded"> <h4 className="mb-2">Vara Interaction Functions</h4> <div className="d-flex flex-row gap-3"> <VaraNetwork.SailsInteraction trigger={({ getAccountInfo }) => ( <> <button onClick={() => { setAccount(getAccountInfo()); }} > {account ? "Reload Account Information" : "Get Account Information"} </button> </> )} /> <VaraNetwork.SailsInteraction trigger={({ signTransaction, getAccountInfo }) => ( <> <button onClick={() => { const account = getAccountInfo().decodedAddress; const value = 10; const data = { contractId: "0x18fca25312996a371e52c92062faaaac1c3d8c2f8bb6f0e613b81fb1125d79f1", idl: idl, serviceName: "Vft", methodName: "Mint", args: { to: account, value: 10 }, }; const tr = signTransaction(data); tr.then((res) => { setResponse(Object.keys(res)[0]); }); }} > Test Transaction </button> </> )} /> <VaraNetwork.SailsInteraction trigger={({ sendQuery }) => ( <> <button onClick={() => { const data = { contractId: "0x18fca25312996a371e52c92062faaaac1c3d8c2f8bb6f0e613b81fb1125d79f1", idl: idl, serviceName: "Vft", methodName: "Name", }; const info = sendQuery(data); info.then((res) => { console.log("SendQuery", res); setFtData(res); }); }} > {ftData ? "Reload Data" : "Test Read State"} </button> </> )} /> </div> </div> <div className="mt-4"> {account && ( <div className="border border-black p-3 rounded"> <h4 className="mb-2">Account Data</h4> <div className="d-flex flex-row gap-2"> <VaraNetwork.Identicon size={30} /> <p className="m-0 fw-bold">{account.meta.name}</p> </div> <p className="fw-semibold">{account.decodedAddress}</p> </div> )} {response && ( <div className="border border-black p-3 rounded"> <h4 className="mb-2">Response</h4> <p className="m-0 fw-bold">{response}</p> </div> )} {ftData && ( <div className="border border-black p-3 rounded mt-2"> <h4 className="mb-2">Fungible Token Name</h4> <div> <p> Token Name: <b>{ftData}</b> </p> </div> </div> )} </div> </VaraNetwork.Wrapper> </> );