[Integrity Migration] Allow users to buy NUM in Capture App

[sync-by-unito]

Current flow:

1. User clicks the Buy NUM button
2. User inputs how much NUM they want to buy
3. Capture App prepares a deeplinking, which launches the MetaMask app with filled the target address (Numbers' fee receiving wallet) and amount automatically
4. https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking
5. MetaMask mobile deeplink generator
6. User sends a Tx
7. Once the payment is received, backend transfers a fixed amount of NUM to user (similar to moonpay)

┆Issue is synchronized with this Asana task by Unito
┆Created By: Tammy Yang

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang can i get some clarification on this one?

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang with the wallet page release we should be able to buy credits

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu this is for allowing users buy NUM in the App.

We want to have a workflow that

1. User click Buy NUM button
2. User input how much NUM they want to buy
3. Connect metamask and allow users to pay with ETH
4. Once the payment is received, transfer a fixed amount of NUM to user (similar to moonpay)

Maybe we can aim to determine the user flow and draw some mockup on miro in this sprint and implement it in the next sprint. How do you think?

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang ok i understand generally.

so one question, we need to support MetaMask Wallet Connection?

and yes i think it would be best to draw the flow first. does this mean we are going to phase out NUM credits?

—-

just some general information: most browsers to my knowledge do not support metamask connection on mobile. typically the wallet itself (MetaMask) has a in-wallet browser that supports this behavior.

I can see if there is a plugin available. Will need to see.

[sync-by-unito]

➤ Tammy Yang commented:

does this mean we are going to phase out NUM credits?

No, we will still keep it.

Most browsers to my knowledge do not support metamask connection on mobile.

As far as I understand, many dApp (web-based) support connecting to Metamask and TrustWallet. I didn't try it myself yet, but I knew Bofu Chen had experiences.

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang I found a bubble plugin that might be able to connect to wallet via mobile

[sync-by-unito]

➤ Bofu Chen commented:

It should be achievable by using MetaMask deeplinking ( https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking ). The user journey will be like

1. User clicks the Buy NUM button

2. User inputs how much NUM they want to buy

3. Capture App prepares a deeplinking, which launches the MetaMask app with filled the target address (Numbers' fee receiving wallet) and amount automatically
   1. https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking ( https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking )
   2. MetaMask mobile deeplink generator ( https://metamask.github.io/metamask-deeplinks/# )

4. User sends a Tx

5. Once the payment is received, backend transfers a fixed amount of NUM to user (similar to moonpay)

[sync-by-unito]

➤ Bofu Chen commented:

After installing the MetaMask mobile app, you can try to click the link on your mobile browser.

Your MetaMask should be launched and show the payment page with the specified payment info.

https://metamask.app.link/send/pay-0x64f7f6b122daaD47Fc427B2B8b620D6130BCb4cE@1?value=1e17 ( https://metamask.app.link/send/pay-0x64f7f6b122daaD47Fc427B2B8b620D6130BCb4cE@1?value=1e17 )

[sync-by-unito]

➤ Ethan Wu commented:

Bofu Chen thanks for the share. will look into it.

[sync-by-unito]

➤ Bofu Chen commented:

Ethan Wu Could you remind me what's the current status of this task?

[sync-by-unito]

➤ Ethan Wu commented:

There is currently no progress on this one. Was never organized into sprint task

[sync-by-unito]

➤ Ethan Wu commented:

I think the stage it is at is research phase

[sync-by-unito]

➤ Ethan Wu commented:

Bofu Chen how do we check that payment has been received?

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu maybe we start from ETH, AVAX <> NUM swap? In that case, we can leverage plugins to call the Metamask or Trust wallet App installed on user's mobile

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang so you mean implement a sort of swap similar to what we did in cc checkout page previously?

[sync-by-unito]

➤ Ethan Wu commented:

oh wait i think its possible to generate a deeplink for token swap via metamask.

[sync-by-unito]

➤ Ethan Wu commented:

Tammy YangBofu Chen

for the buy NUM in Capture APP feature, we want to support mainnet NUM right?

if that's the case maybe it might not be a good idea to go with the ETH swap route? also from my research i don't think metamask supports non ethereum based swap via deeplinking though i may be wrong about this.

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu we can do it in a smart way. We just receive ETH and send out Mainnet to asset wallet, I think it can be very simple without depending on any other external swap service (yes, similar to what we did in cc checkout).

[sync-by-unito]

➤ Ethan Wu commented:

Tammy YangBofu Chen i need the metamask plugin to be added to capture iframe project.

project name: capture-app-iframe

[sync-by-unito]

➤ Ethan Wu commented:

the metamask bubble plugin doesn't work.

the request accountdoesn't work.

i can use deeplinks as previously suggested however i need a way to inform iframe that the transaction has been sent.

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu metamask plugin works in the staking site and also work previously in CC. If it doesn't work in iframe, I believe we need to figure out the reason why before applying other workaround.

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang i am investigating now

[sync-by-unito]

➤ Ethan Wu commented:

Tammy Yang ok i figured it out. i accidentally had the metamask hidden. everything should be fine now

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu

Could you provide the flow?

QA test current flow is

1. User enter to wallet page
2. press buy NUM
3. enter "ETH" (system will convert eth to NUM.)
4. press "copy link"
5. user copy link into metamask
6. enter "ETH" (system will convert eth to NUM.)
7. press "BUY" (I haven't pressed it.)

There are some questions

1. iOS Chinese users cannot input decimal numbers
2. The field only allows input up to two decimal places, which means it only allows for purchasing a large amount of NUM at once.
3. The NUM are purchased from this way, is on our mainnet or erc-20?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung yes one sec.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hunghttps://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764556100597994&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764556100597994&amp;cot=14 )

in summary:

8. iframe will wait for transaction hash

9. once transaction hash received it will show in-progress

10. we will transfer mainnet num to asset wallet

11. show transfer done

12. (if in desktop browser) will return to wallet home page. (if in metamask browser) will show message to return to Capture App.

13. User will click back and refresh to show NUM transferred.

https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764556100597994&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764556100597994&amp;cot=14 )

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung i can adjust the number of decimal places. what is your suggestion.

the num purchased show be mainnet num since we use the network action transfer action.

[sync-by-unito]

➤ Kenny Hung commented:

I suggest four decimal places.

[sync-by-unito]

➤ Ethan Wu commented:

done

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuTammy Yang (cc Scott Yan)

There are some questions.

1. When user copy url from capture app, it means jwt token may leak from the process, I remember we don't want the jwt_token is shown on url. → If Tammy agrees this workaround, it will be conditional pass.
2. For process ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764556100597994&amp;cot=14 ), when user wait a little time & show in progress complete, it doesn't redirect user back to capture app, user is just back to metamask brower with iframe wallet page. (Could refer claap ( https://app.claap.io/numbers-protocol/iframe-v230601-buy-num-c-O35CsUM4Uy-RqWNUentQTzX ).) → If this part needs a lot of time to fix, it also could be conditional pass.
3. QA suggest we add a little instruction to let the user know the actual NUM you get will be a little different. (recording shows 44.64 NUM, actual QA get 44.809.)

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung

1. If its an issue that jwt token is there than i can make an adjustment to remove these parameters from copy link.
2. thanks for the catch. what is supposed to happen is it is supposed to show a message saying the transfer is complete and to navigate back to capture app manually. I will see why this didn't happen.
3. I'll check to see why there is a difference. it should be the same.

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu A little question for #1, if you remove the URL parameter, how the iframe know who buys these NUM?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung so for NUM purchase all we need is the asset wallet. so instead of passing in the full token parameters in the url i can potentially just pass in the asset wallet and it should work.

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu (cc Tammy Yang)

If #1 & #3 could be fixed, I think this feature could be conditional pass.

And just confirm, will you fix today or you need more time?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung It will be ready tomorrow morning. I made the changes already but need to test

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu

I summarize the detail of testing process.

https://app.claap.io/numbers-protocol/iframe-v230601-in-app-num-purchase-test-2-c-O35CsUM4Uy-mbiLJqfTEZDy ( https://app.claap.io/numbers-protocol/iframe-v230601-in-app-num-purchase-test-2-c-O35CsUM4Uy-mbiLJqfTEZDy )

#1, #3 are fixed.

#2, there is limitation because metamask seems not to support webhooks.

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu (cc Tammy YangScott Yan)

Buy NUM can’t work on pixel6 / iphone 8.

Reproduce steps

1. Paste the url on metamask
2. input ETH
3. Display confirmation pop-up, then press confirm, there isn’t any feedback.

https://app.claap.io/numbers-protocol/can-t-buy-num-on-pixel-6-c-O35CsUM4Uy-ikrcKIlRMeXX ( https://app.claap.io/numbers-protocol/can-t-buy-num-on-pixel-6-c-O35CsUM4Uy-ikrcKIlRMeXX )

Current only iPhone 12 pro could work.

Ethan Wu said This might be a metamask issue. I can implement a workaround potentially where I have users I put the amount in iframe and than we generate a link with the eth amount as url parameter and see if it works.

Ethan will finish workaround implementation tomorrow morning.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny HungBofu Chen

so it seems like this issue also happens on my desktop browser as well. this didn't happen before.

my guess is when we sendTransaction to metamask the value field isn't converting to the right wei-hex value.

[sync-by-unito]

➤ Ethan Wu commented:

re-release to qa. confirmed that metamask plugin is working as expected again

[sync-by-unito]

➤ Kenny Hung commented:

qa pass

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuTammy Yang I found an issue on iframe live version about “SWAP NUM”.

When user copy the link, but the link is “version-test” branch instead of “live” branch.

[sync-by-unito]

➤ Tammy Yang commented:

Already fixed and feedback on Slack.