import React, {useState} from “react”
import * as fcl from “@onflow/fcl”
import styled from ‘styled-components’
import * as t from “@onflow/types”
const Card = styled.div`
margin: 10px 5px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
`
const Header = styled.div`
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
`
const Code = styled.pre`
background: #f0f0f0;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
padding: 5px;
`
const simpleTransaction = fcl.cdc`
import NonFungibleToken from 0x4fc019cea9fc4817
import KittyItems from 0x4fc019cea9fc4817
// This transction uses the NFTMinter resource to mint a new NFT.
//
// It must be run with the account that has the minter resource
// stored at path /storage/NFTMinter.
transaction(recipient: Address, typeID: UInt64) {
// local variable for storing the minter reference
let minter: &KittyItems.NFTMinter
prepare(signer: AuthAccount) {
// borrow a reference to the NFTMinter resource in storage
self.minter = signer.borrow<&KittyItems.NFTMinter>(from: KittyItems.MinterStoragePath)
?? panic("Could not borrow a reference to the NFT minter")
}
execute {
// get the public account object for the recipient
let recipient = getAccount(recipient)
// borrow the recipient's public NFT collection reference
let receiver = recipient
.getCapability(KittyItems.CollectionPublicPath)!
.borrow<&{NonFungibleToken.CollectionPublic}>()
?? panic("Could not get receiver reference to the NFT Collection")
// mint the NFT and deposit it to the recipient's collection
self.minter.mintNFT(recipient: receiver, typeID: typeID)
}
}
`
const SendTransaction = () => {
const [status, setStatus] = useState(“Not started”)
const [transaction, setTransaction] = useState(null)
const sendTransaction = async (event) => {
event.preventDefault()
setStatus("Resolving...")
const blockResponse = await fcl.send([
fcl.getLatestBlock(),
])
const block = await fcl.decode(blockResponse)
try {
const typeID = 1
const recipient = fcl.currentUser()
console.log(recipient, "address")
const tx = await fcl.send([
fcl.transaction(simpleTransaction),
fcl.proposer(fcl.currentUser().authorization),
fcl.args([
fcl.arg(String(recipient), t.Address),
fcl.arg(Number(typeID), t.UInt64)
]),
fcl.payer(fcl.currentUser().authorization),
fcl.authorizations([
fcl.currentUser().authorization
]),
fcl.ref(block.id),
])
const { transactionId } = tx
setStatus(`Transaction (${transactionId}) sent, waiting for confirmation`)
const unsub = fcl
.tx(transactionId)
.subscribe(transaction => {
setTransaction(transaction)
if (fcl.tx.isSealed(transaction)) {
setStatus(`Transaction (${transactionId}) is Sealed`)
unsub()
}
})
} catch (error) {
console.error(error)
setStatus("Transaction failed")
}
}
return (
<Card>
<Header>MintNft</Header>
<Code>{simpleTransaction}</Code>
<button onClick={sendTransaction}>
MINT
</button>
<Code>Status: {status}</Code>
{transaction && <Code>{JSON.stringify(transaction, null, 2)}</Code>}
</Card>
)
}
export default SendTransaction
I am getting an error
“errorMessage”: “[Error Code: 1101] cadence runtime error Execution failed:\nerror: invalid argument at index 0: decodeing argument failed: [Error Code: 1052] transaction arguments are invalid: (argument is not json decodable: failed to decode value: invalid JSON Cadence structure)\n–> e62e0a73f58393b12c36d36f73cda31a57e854c7d5a3f9ee6e3718b4b4055460\n”,