Interacting with smart contract functions

Moralis General
#1

Please how can I call both the approve() and transferFrom () function on my dapp? When a user clicks a button that will call the approve() function from USDT contract and after signing he/she clicks a continue button that calls the transferFrom() function from USDT contract. Please I really need help on this.

Here are my codes:

async function approve() {

const options = {

  contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",

  functionName: "approve",

  abi: [

    {"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},

  ],

  params: {

    _spender: spender,

    _value: value,

  }

};

await Moralis.executeFunction(options);
}

useEffect(() => {
if (!isWeb3Enabled && isAuthenticated)
enableWeb3();
},[isWeb3Enabled, isAuthenticated]);

const { isOpen, onOpen, onClose } = useDisclosure()

return (

<>
  <Head>
    <title>Test1</title>
    <meta name="description" content="Test1" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/jpeg" sizes="32x32" href="/favicon.jpeg" />
    <link rel="icon" type="image/jpeg" sizes="16x16" href="/favicon.jpeg" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
  </Head>
  <Flex direction="column" width="100vw" height="100vh">
    <Header user={user} logout={logout} isLoggingOut={isLoggingOut}/>
    <Box flex="1" bg="purple.100" px="11" py="44">
    <Tabs size="lg" colorScheme="purple" align="center" variant="enclosed">
    <Alert status="success">
      <AlertIcon />
      Wallet connected succesfully {user.get("ethAddress")}
    </Alert>
   
    <br />
    <Button onClick={onOpen}>Get it now!</Button>

    <Modal isOpen={isOpen} onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader color="purple">Be among the 1st 100</ModalHeader>
      <ModalCloseButton />
      <ModalBody>
      <Image src="../bored.jpg" />
      </ModalBody>

      <ModalFooter>
        {/* <Button colorScheme='blue' mr={3} onClick={onClose}>
          Close
        </Button> */}
        <Button ml="4" colorScheme="yellow" onClick={approve}>Get It!</Button>
      </ModalFooter>
    </ModalContent>
  </Modal>
#2

What is the issue that you have with current code?

#3

Thanks for your reply. I don’t know how to call the transferFrom() function of USDT contract after the approval function I already have on my code have been clicked by the user.

#4

Similar to how you call approve, you change the abi, parameters and then you call it

#5

Please how about the params(from,to & value), how am I to call the current user (from), in the transferFrom params?

#6

You can get the current wallet address from current user object or web3/ethers instance
The value, you should know it, and also the to parameter

#7

Thanks for your replies, I’m new to this, don’t be offended by my questions. Please what is the current user object or how can I implement it in my code. I had appreciate it if you could use a code sample for me, please.

#8

It may be easier to use transfer function directly:
https://docs.moralis.io/moralis-dapp/sending-assets/transfer-tokens

#10

after updating my code:

async function approve() {

const options = {

  contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",

  functionName: "approve",

  abi: [

    {"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}

  ],

  params: {

    _spender: "00xxx",

    _value: value

  }

};

await Moralis.executeFunction(options);

}

const TransferWeth = () => {

const { fetch, error, isFetching } = useWeb3Transfer({

  amount: Moralis.Units.Token(0.5, 18),

  receiver: "0xcCf003Dc0C42cf763e8fDced937D0a232BC26508",

  type: "erc20",

  contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",

});

}

this was the error message i got;

ReferenceError: error is not defined
{error && }
| ^
423 | <button onClick={() => fetch()} disabled={isFetching}>
424 | Transfer
425 |

#11

I thought that you are using vanilla js and not react.

You can see here how to format code on forum:

you can call that Moralis.transfer function as in vanilla js too

#12 
async function approve() {

    const options = {

      contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",

      functionName: "approve",

      abi: [
        {"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}
      ],

      params: {

        _spender: "00xxx",

        _value: value

      }

    };
  await Moralis.executeFunction(options);
  }

  const TransferWeth = () => {
    const { fetch, error, isFetching } = useWeb3Transfer({
      amount: Moralis.Units.Token(0.5, 18),
      receiver: "address",
      type: "erc20",
      contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",
    });
  }

how about now?

#13 
ReferenceError: error is not defined

> 422 |  {error && <ErrorMessage error={error} />}
      |  ^
  423 |  <button onClick={() => fetch()} disabled={isFetching}>
  424 |    Transfer
  425 |  </button>

Error message that i got.

#14

I see error mentioned here

Can you try to use vanilla js syntax for that transfer?
I can not help you too much in react

#15 
async function approve() {

    const options = {

      contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",

      functionName: "approve",

      abi: [

        {"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}

      ],

      params: {

        _spender: "0x..",

        _value: "1"

      }

    }

  await Moralis.executeFunction(options);

  };

  const { account } = useMoralis();

  async function transferFrom() {

 

  const realOptions = {

    contractAddress: "0xB8c77482e45F1F44dE1745F52C74426C631bDD52",

      functionName: "transferFrom",

      abi: [

        {"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}

      ],

      params: {

        _from: account,

        _to: "0x..",

        _value: "1"

      }

    }

    // console.log(realOptions);

  await Moralis.executeFunction(realOptions);

  };

the command runs but i end up not getting the token i sent to the _to address, please help

#16

what happens, doesn’t metamask pop up for that transfer?

wasn’t easier to use Moralis.transfer? (it should be equivalent)

#17

Yes it did, but the recipient address didn’t get the token that was sent

#18

What do you see if you look in a block explorer for that transaction?

#19

blk
blk899×514 20 KB

what i got.

#20

Did you check the balance to see if it changed for both accounts?

#21

Yes I did, the balance didn’t change for both accounts