Use the Values from a React Form to Send Ether Transactions to Others with Fortmatic

Thomas Greco: [0:02] All right. If we take a look at our page, we see we have this little form here. This is where we're going to put a recipient's address such as mine. Below, this is where we're going to specify the amount of Ethereum we wish to send to them.

[0:23] As of right now, clicking this send transaction is just going to log our values for us, but we're going to change this. Inside this useFortmatic hook I'm going to create another function called sendTokens. This is going to take a "to" value which is going to be the address we're sending it to, in addition to an amount which is going to be the amount of a Ethereum that we're sending.

[1:11] The first thing I'm going to do in here is just grab the web3 object off of our window. As you'll see, we're storing it on our window in the authentication phase.

[1:31] Next, I'm just going to format our amount using web3's utils module and toWei is what we're going to use to make sure ether is in the standard format. Here, we're going to first pass in our value, which is amount and then the unit will be ether.

[2:08] Now that we have that, let's just construct the payload really quickly. This is going to have a "to" property, it'll have a "from" which of course, is going to be our account. Here, we're just grabbing the first value out of our accounts array. Now, without a value, what good is this? So we'll place that in there now. So far so good.

[2:43] The last thing we need to do is use the Web3 API again. This time, we're going to hook in the eth and use the sendTransaction method or we'll patch in our payload and then just going to return either an error or a transactionHash.

[3:17] If there's an error, let's just return new error, we're going to say, "Issue sending transaction." Otherwise, we're going to log our hash and then return it. OK, cool.

[3:53] Next, we'll need to expose sendTokens and then we need to replace this logValues function with the sendTokens. Wait, we haven't destructured it off of our useFortmatic hook.

[4:19] Now, from here, I'm just going to paste in this dummy address I have. I'm going to specify 2.5 Ethereum. As you see, Fortmatic is now prompting us to actually execute this transaction if we so wish to do so.

[4:45] Additionally, we can change the gas price which will make our transaction either occur a little bit slower. As you can see, 23 seconds for the faster option at .05 cents or less than .01 cent for the little turtle, A.K.A. slower option.

[5:12] In the words of Ricky Bobby, I want to go fast. We'll choose that as our option. Once we confirm, we'll see that Fortmatic's going to start this countdown until the transaction has finally processed.

[5:34] Once finished, you'll also get the opportunity to view the transaction on Etherscan. However, unlike true Ethereum transactions, this is going to occur in the Rinkeby section of Etherscan, as again, we're operating within the testnet.