Create wallet page with iframe

[sync-by-unito]

In the future, we want to support the wallet page with an iframe. Please create a wallet page

1. Functions are all the SAME AS the current App (do not change any functions)
2. Update the background to fit the new design (only UI)

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

[sync-by-unito]

➤ Ethan Wu commented:

Current functions in wallet page include:

Buy Credits => NUM Credits (currently handled with ionic. maybe we can use postmessage to show page? Sam)

Deposit => QR Code + My Asset Wallet address

Withdraw => Asset Wallet => Integrity Wallet. Gas Fee. Pending => Calculate Gas (Sam can you share briefly how ionic does this?)

Export Integrity Wallet (Button)

Copy Asset Wallet

Copy Integrity Wallet

Pull down to refresh

[sync-by-unito]

➤ Sam commented:

Ethan Wu (cc: Tammy Yang) regarding buy credits. We use in app purchase (apple and google might reject if we use non apple/google payment thing)

Buy Credits (can stay ionic)
Deposit (can be iframe)
Withdraw (can be iframe)
Wallet Page itself (can be iframe) also

[sync-by-unito]

➤ Sam commented:

Ethan Wu, yes for buy credit sub-page we will use postMessage thing.

[sync-by-unito]

➤ Ethan Wu commented:

Sam how does ionic do the withdraw action? does it leverage network actions?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I need to look at code I never worked on withdraw function.

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu as far as I remember, withdraw is just calling backend API to transfer fund from asset wallet to integrity wallet

Since users own the private key of the integrity wallet, they are free to import the key and do whatever they want with those fund. This is how we handle it currently

[sync-by-unito]

➤ Tammy Yang commented:

Sam one thing that I would like to confirm with you. Does App store the private key of the integrity wallet locally?

We may want to do a bit more Web3 activities locally with Ionic in the coming future, that's why I ask.

[sync-by-unito]

➤ Sam commented:

Tammy Yang, I need to time to check

[sync-by-unito]

➤ Sam commented:

Yes they are stored in app locally

[sync-by-unito]

➤ Ethan Wu commented:

Sam how do we get the integrity wallet address?

[sync-by-unito]

➤ Ethan Wu commented:

also what bsc scan link is passed into asset wallet history?

[sync-by-unito]

➤ Ethan Wu commented:

current progress:

[sync-by-unito]

➤ Ethan Wu commented:

info pop up view

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu BEP20 has changed to Mainnet. You may refer to the latest update in Ionic side. Plus, all BSCscan history should be replaced by Mainnet explorer (mainnet.num.network)

[sync-by-unito]

➤ Ethan Wu commented:

Does storage backend reflect this?

[sync-by-unito]

➤ Tammy Yang commented:

See progress of NUM migration ( https://app.asana.com/0/0/1203615853062040/f/ )

[sync-by-unito]

➤ Tammy Yang commented:

However, the latest Ionic App already has it implemented even the storage Backend has not yet been deployed.

[sync-by-unito]

➤ Ethan Wu commented:

Sam how is the integrity wallet obtained? it doesn't seem like it can be grabbed from backend. also how do we export the private key?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, the private key is stored locally.
However, if user has auth token (aka tmp token that I pass through iframe) you can try to do a request to https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read ) as you can see it contains the private key

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I think if I pass tmp token to wallets iframe.
Then you can use the token to get asset wallet-related things.

Am I missing anything?😅

[sync-by-unito]

➤ Ethan Wu commented:

Sam for now it is ok 🙂

[sync-by-unito]

➤ Ethan Wu commented:

Sam how do we get integrity wallet? from documentation it looks like there is asset wallet, num wallet, default. which one is integrity wallet?

[sync-by-unito]

➤ Ethan Wu commented:

also when i try to pass in token for asset-wallet get authorization error.

[sync-by-unito]

➤ Tammy Yang commented:

Ethan Wu I think it may be easier to include Olga in the conversation since the purpose of this page is for the "future". No matter how Ionic implement it, we want to review and make sure everything is correct from the backend point of views.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I checked the ionic code.
on the ionic codebase to get integrity wallet (

capture-lite/src/app/shared/dia-backend/wallet/dia-backend-wallet.service.ts

Line 49 in 732dcc5

getIntegrityWallet$() {

) we call this endpoint ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read ).

[sync-by-unito]

➤ Sam commented:

Ethan Wu,

on the ionic codebase (

capture-lite/src/app/shared/dia-backend/auth/dia-backend-auth.service.ts

Line 375 in 5aad1be

async getAuthHeaders() {

), before calling the endpoint ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read ) we include token in header

JS code snipped from ionic codebase (

capture-lite/src/app/shared/dia-backend/auth/dia-backend-auth.service.ts

Line 375 in 5aad1be

async getAuthHeaders() {

) we add header
{ authorization: token ${await this.getToken()} };
before calling endpoint ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read )

So in your case, you also might need to include header authorization: token {{ tmpTokenPassedFromIframe }}

We need to ask Olga if endpoint ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/wallets_asset-wallet_read ) can accept tmp tokens as authorization header.

[sync-by-unito]

➤ Olga commented:

Sam if the passed token is jwt token, the answer is yes, jwt token can be used like user token.

[sync-by-unito]

➤ Sam commented:

Olga, as an authorization token header, should I pass the access token?
First I use this endpoint ( https://dia-backend-dev.numbersprotocol.io/api/v3/redoc/#operation/auth_qjwt_create ) which returns
{
"refresh": "eyJ0e...YKEzWY",
"access": "eyJ0e...LbHsXc"
}
Then in my request header should I use access value?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I got it working.
To get an integrity wallet from the bubble side.
You can use the token query parameter that was passed from ionic via the iframe URL.

[sync-by-unito]

➤ Ethan Wu commented:

Sam how are you labeling the wallet page when it migrates to numbers mainnet. for example

bep20 => ?

also for the view asset wallet history which link will you pass for numbers mainnet history?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, bep20 text was replaced by Mainnet text.
And Mainnet value is coming from api/v3/wallets/num-wallet/ which returns

"num_balance": {
"bsc_num": "string",
"eth_num": "string",
"num": "string" <--- use this value as mainnet value
},

[sync-by-unito]

➤ Ethan Wu commented:

Sam what link are you adding to the "view asset history" section?

[sync-by-unito]

➤ Sam commented:

Ethan Wu

https://mainnet.num.network/address/

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu I'll submit the testing result fail first, when you fixed them, please help to submit new release & ping me to test. Thanks

1. The wallet amount should display mainnet instead of BEP20
2. Credits can't show the amount, does it expect? (My test account has over 400+ credits.)
3. Send(Old Withdraw) can't input decimal.
4. The amount display needs to wait 8-11 seconds. (QA thinks it should be within 6 seconds.)
5. Send page doesn't show the chain name.
6. Wallet copy can't work on Deposit page.
7. Deposit page doesn't show the instructions.
8. When user enters the "Deposit" or "Send", it should show "Transfer" instead of "wallet"

[sync-by-unito]

➤ Kenny Hung commented:

#7, #8 screenshot.
And I add
#4 for wallet amount loading time
#9, it doesn't show instructions about only supporting mainnet.

[sync-by-unito]

➤ Ethan Wu commented:

bep20 text was replaced by Mainnet text.
And Mainnet value is coming from api/v3/wallets/num-wallet/ which returns

"num_balance": {
"bsc_num": "string",
"eth_num": "string",
"num": "string" <--- use this value as mainnet value
}

^^

Sam when i run the api the num_balance only shows bsc_num and eth_num. there is no field for num

[sync-by-unito]

➤ Ethan Wu commented:

status update for above ^^ storage backend had to be deployed to have response return what is above. issue is now resolved.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung can you clarify #5 on the list where should it say chain name on send page?

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu There is the 0.72.4 wallet page withdraw screen.

[sync-by-unito]

➤ Ethan Wu commented:

miro updated to reflect fixes. https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764543160051415&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764543160051415&amp;cot=14 )

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu I'll submit the testing result fail first, when you fixed them, please help to submit new release & ping me to test. Thanks

1. Buy NUM should be Buy Credits
2. In withdraw page, the calculate section looks weird. (Only iOS)

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung can you screenshot this for me?

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu Just confirm, about iframe wallet page
Does the wallet copy function could work from url? or need to try it on app?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung needs the app.

[sync-by-unito]

➤ Sam commented:

Ethan Wu maybe in the future when user click copy we can do

1. Copy to clipboard
2. Send postMessage to ionic

Then it will work in both environments

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu #1-#5 is new issue for iframe wallet

1. [Issue] Input box layout is weird on Withdraw page (Only on HTC Exodus 1, Oppo) ( https://app.asana.com/0/1201016280880500/1203901493987149/f ) → should be fixed
2. [Issue] iPhone 12 pro still can't input decimal & enter the amount ( https://app.asana.com/0/1201016280880500/1203901494500391/f )→ should be fixed
3. On SEND page, "Gas fee" should be "Est. Gas Fee" → should be fixed
4. The gas fee should display 4 decimals instead of 3 decimals → should be fixed
5. Before calculating the gas fee, the "send" button should be "Calculate Est. Gas" → Could conditional pass.
6. [Issue] When user operate "send"(Withdraw), the gas fee should be charged credits first instead of NUM token, unless user doesn't have credits. ( https://app.asana.com/0/1201016280880500/1203901494500400/f ) → It also happens on current version, it could be conditional pass, fixed in the future sprint.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung fixed 1, 2, 3, 4

can retest now

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu
#1-4 are fixed.
#5 I found you adjust it to "calculate" before calculating the gas fee, right? If yes, I think it also passed.

[sync-by-unito]

➤ Ethan Wu commented:

i didn't change this one lol. it was always calculate first and after you press it becomes send

[sync-by-unito]

➤ Kenny Hung commented:

Okay, I think we could skip #5, I think the CALCULATE is okay.