[SOLVED] Paypal Clone tutorial - Using decimal matic for payment

Hi Fam!
I really enjoyed the tutorial but, in the preset examples in the Recent Activity section, there are decimals. e.g. -3.50 MATIC. However, the tutorial only shows you how to use whole numbers. How would you implement the ability to request or pay 3.50 MATIC? Any links on that topic would be great.

Hi @DaveRad

It does not require any additional change it code. If you enter the decimal value in input it should accept the payment in decimals as well.

1 Like

Hmm…are you sure?
Because it would not accept a decimal place when running the contract from polygon scan (as per the tutorial). It shows a “big number” error.

And, it does not accept decimals through the front end site. When you click on request, and the modal pops up, if you enter a number with a decimal then click the “proceed to request” button…nothing happens.
If you do the same with a whole number, metamask does pop up to confirm your request.

When testing in a polygon scan you have to convert the native currency to Wei. So if you want to transfer 3.5 then you need to use 3500000000000000000(3.5 * 1e18) to execute the transaction.

Do you see any error in browser console or editor console?

1 Like

Re. 1st response:
Ah, thanks. That makes sense.

Re. 2nd response:
I get an error in the console, the moment I input a decimal number. However, if I continue with the request and press “proceed” to request, nothing happens. But I see that makes sense as well since technically nothing can happen after this error. Here is the error:

Also, I noticed that when I connect to my wallet, I get the following errors. After the first long error messages, I still successfully retrieve the arrays of the account information with requests and stuff. But then another error pops up after the arrays (with no further action taken)

Actually regarding my response to your second inquiry…
I get an error in the console when inputting whole numbers as well, whether manually or by using the arrows. However, the request will go through and open up Metamask for a confirmation.

Hi @DaveRad,

It seems like your Matic balance is only 3.34. Can you try transitioning with a decimal amount of less than your balance?

1 Like

Hi @johnversus ,

The above pic with 4, is just an example of me selecting numbers with the arrow…which started with 1, hence the 3 beside the error message in the console. Pressing the arrow once, gave me the original error. Then pressing again increased the number beside the error.

However, I just discovered that, if you enter an address in the address field first, then it does not produce an error…with whole numbers (it does with a decimal number)

Thus, it seems the errors produced when inputting whole numbers (as per my last comment), do not matter because, once you put in the address (even if you enter the amount before the address), it will proceed and open metamask for a confirmation.

That being said, when making requests i.e. “Proceed To Request”, I had entered amounts that were lower than what was in the wallets that I was requesting from - both with whole numbers and decimal numbers. Only the whole number requests worked. When clicking “Proceed To Request” using a decimal amount (with lower amount than in wallet I was requesting from)…nothing happens. No error in the console, no metamask pop up and no new request added to the request array (although the popup modal does dissapear.

I think I am able to reproduce it now after testing it. Will try for a solution and will update you know on this.

1 Like

Sounds good. Much appreciated!

Hi @DaveRad

The issue is happening because the input type of the payment value is uint256. And as per the contract function we are storing the value in Matic and converting it to wei in the contract.

So since it is a uint256 value we can’t pass decimal value to it.

uint256 toPay = payableRequest.amount * 1000000000000000000;

To fix this we have to update both contract as well as frontend code. We need to update the contract to store the value in wei and use it directly for payment. That can be done by just removing the *100..

uint256 toPay = payableRequest.amount;

On frontend we have to pass the converted wei value of the instead of decimal Matic. I used string in the below code to avoid big number error.

const { config: configRequest, error } = usePrepareContractWrite({
    chainId: polygonMumbai.id,
    address: "0x....",
    abi: ABI,
    functionName: "createRequest",
    args: [
      requestAddress,
      (requestAmount * 1e18).toLocaleString().replaceAll(",", ""), // 👈
      requestMessage,
    ],
  });

I think this should fix it. Let me know if you still have an issue after this.

1 Like

Hi @johnversus!
That is it! Thank you very much!

Now, with the info you gave me, I was able to know what other changes to do, to make the rest of the functionality work.

For instance, to make the toPay function work. I changed:

  const { config } = usePrepareContractWrite({
    chainId: polygonMumbai.id,
    address: "0xCB95D5e54c04B9fa4f6906bDCb860bcfDB08f4D8",
    abi: ABI,
    functionName: "payRequest",
    args: [0],
    overrides: {
      value: String(Number(requests["1"][0] * 1e18)),
    },                                     
  });

to

value: String(Number(requests["1"][0]))

and in the pay modal:

        {requests && requests["0"].length > 0 && (
          <>
            <h2>Sending payment to {requests["3"][0]}</h2>
            <h3>Value: {(requests["1"][0])} Matic</h3> 
            <p>"{requests["2"][0]}"</p>
          </>
        )}

to

            <h3>Value: {(requests["1"][0]) / 1e18} Matic</h3>

And to display the right amount in the “Recent History”
I changed

{record.amount} Matic

to

{(record.amount / 1e18)} Matic

Everything works great now.

Now I am going to work on the “addName functionality”. There should be enough in the existing code for me to figure it out (hopefully).

Thank you for your help and diligence!

2 Likes