import { useFlowTransaction } from '@doodlesteam/flooks';

const MyComponent = () => {
  const { execute, status, error } = useFlowTransaction({
    code: `
      import NonFungibleToken from 0x...
      import Wearables from 0x...
 
      transaction(recipientAddress: Address, tokenId: UInt64) {
          let collection: &NonFungibleToken.Collection
          let recipient: &{NonFungibleToken.Receiver}
 
          prepare(signer: AuthAccount) {
              self.collection = signer.borrow<&NonFungibleToken.Collection>(from: Wearables.CollectionStoragePath)
                  ?? panic("Could not borrow a reference to the collection")
              self.recipient = getAccount(recipientAddress)
                  .getCapability<&{NonFungibleToken.Receiver}>(Wearables.CollectionPublicPath)
                  .borrow()
                  ?? panic("Could not borrow a reference to the recipient")
          }
 
          execute {
              let token <- self.collection.withdraw(withdrawID: tokenId)
              self.recipient.deposit(token: <-token)
          } 
      }`,
    args: ['0xf8d6e0586b0a20c7', '1000'],
    onTransactionSealed: (result) => {
      console.log('Transaction sealed:', result);
    },
    onTransactionError: (result) => {
      console.error('Transaction error:', result.error);
    },
  });
 
  const handleTransaction = () => {
    execute();
  };
 
  if (status === 'error') return <div>Error: {error?.message}</div>;
 
  return <button onClick={handleTransaction}>Execute Transaction</button>;
};