bubble update for showing order information(order detail) in the transaction

[sync-by-unito[bot]]

design detail

1. Both Transaction Detail and Order Detail will be replaced by Bubble.
2. The current Network Actions feature will be renamed to “Order.”
3. The Order tab will now include the Asset Register Order.

Proposed design update: ✓ Propose design for Capture transaction details

according to this comment we implement it via bubble.

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

[sync-by-unito[bot]]

➤ Sam commented:

Tammy Yang, just to clarify. https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547440946566&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547440946566&cot=14 ) should be implemented in bubble?

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

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, according to this comment ( https://app.asana.com/0/0/1203610962578674/1203835012949494/f ) we implement it via bubble.

I will try to implement on bubble side but for that we need iframe release card maybe v230321-capture-ionic-iframe? Also move Ionic update for showing order information in the transaction ( https://app.asana.com/0/0/1203610962578669 ) as blocking task for v230321-capture-ionic-iframe. 🙏

[sync-by-unito[bot]]

➤ Sam commented:

Tammy Yang, I also need bubble branch v230321-sam. P.S: I'm aware of 3/15 (Wed)-3/16 (Thu) - travel, away from keyboard and may not respond at all So I will get back to this task on Monday.

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Sam (cc Tammy Yang) If this task will be implemented via bubble, please follow the iframe release process. I'll open a new release note for this task. The dev process will be

1. Develop in dev bubble branch.
2. If development is finished, merge into "qa-release" branch.
3. submit the release to QA.

For Show price in the transaction tabs ( https://app.asana.com/0/1201016280880500/1203610861023237/f ), does this task ( https://app.asana.com/0/1201016280880500/1203610861023237/f ) will be anything updated on ionic side? Because I see the comment on this task ( https://app.asana.com/0/1201016280880500/1203610861023237/f ), I think maybe it needs the latest ionic version link to iframe qa branch. Am I right?

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, yes it requires changes in ionic and bubble sides.

according to this miro ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547440946566&cot=14 ) I also need to change NETWORK ACTIONS to ORDERS from ionic side

https://app.asana.com/app/asana/-/get_asset?asset_id=1204191450752774 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204191450752774 )

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Okay, so we need a additional task for ionic.

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, yes so maybe we can do something like this

Show price in the transaction tabs ( https://app.asana.com/0/0/1203610861023237 )

• bubble update for showing order information in the transaction ( https://app.asana.com/0/0/1203610962578669 ) (to implement new Transactions Details ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547439713358&cot=14 ) page with bubble) blocked by v230321-capture-app-iframe ( https://app.asana.com/0/0/1204191430041869 )
• Ionic update for showing order information in the transaction (to make this ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547439577037&cot=14 ) changes) blocked by v230321-capture-app-ionic ( https://app.asana.com/0/0/1204126582920054 )

How do you think?🤔

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Yes, you're right. I will modify the task independency.

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, just to clarify. For this task I need bubble branch v230321-sam forked from Live will you provide or we need to wait for Tammy Yang?

[sync-by-unito[bot]]

➤ Tammy Yang commented:

Sam the release manager (now is me) cam help fork the branch for you

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Sam (cc Tammy YangScott Yan) According to discussion ( https://dt42-numbers.slack.com/archives/C0323488MEJ/p1679398858211379?thread_ts=1679395488.564919&cid=C0323488MEJ ), push this task to Thursday.

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, bubble question.

I'm implementing this page ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764547439713358&cot=14 ) in bubble (order_details). And getting most of inspiration from asset_details page 😅.

https://app.asana.com/app/asana/-/get_asset?asset_id=1204256234396747 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204256234396747 )

My question about variable naming

• member since
• nft_chain

when should I use _ and when just spaces?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam it doesn't matter when it comes to bubble. i think to keep things consistent maybe just add "_"

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu to show order details I want to call this endpoint ( https://docs.captureapp.xyz/network-actions/query-network-action-orders#query-order ).

Where https://node.numbersprotocol.io/api/1.1/wf ( https://node.numbersprotocol.io/api/1.1/wf )... falls under?

Do I need to Add Another API like Network Actions?

https://app.asana.com/app/asana/-/get_asset?asset_id=1204257254635956 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204257254635956 )

[sync-by-unito[bot]]

➤ Ethan Wu commented:

its under storage backend. i believe its [Admin] Storage Backend - Retrieve NUM Order (with error)

[sync-by-unito[bot]]

➤ Ethan Wu commented:

you just pass in order id and it should give you the order details

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu,

During development Storage Backend API call are sent to dev version (aka dia-backend...)? I though all calls are gone to prod urls

https://app.asana.com/app/asana/-/get_asset?asset_id=1204257254635961 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204257254635961 )

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam it should be all production

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu I'm bit confused how it can fetch production data if GET request is sent to https://dia-backend-dev.numbersprotocol.io/api/ not https://api.numbersprotocol.io

even https://bubble.io/page?version=qa-release&type=page&name=asset_page&id=captureappiframe&tab=tabs-5 ( https://bubble.io/page?version=qa-release&type=page&name=asset_page&id=captureappiframe&tab=tabs-5 ) shows it's sending to https://dia-backend-dev.numbersprotocol.io/api/ not https://api.numbersprotocol.io

My question is do we override API url somewhere?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam it's not dev. If you look at the url closely there is no -dev.

api.numbersprotocol.io and dia-backend.numbersprotocol.io are both production. They are the same.

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam there is no override anywhere. The response you get in bubble are all production.

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, yes now I notice there is no -dev 😅. Thank you for clarification🙏

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, can you help to debug bubble workflow please.

In capture app (prod env) I

• take photo (created capture)
• run network action (mint & share on created capture)
• after capture is minted I can see order under network actions tab in capture app (as shown in video)
• then I pass that order id to bubble side
• on bubble side I get order_id from url
  • fetch order via API Provider
  • but getting not found

Currently I just want to get basic order info in bubble for that I created one workflow only. Can you please check what I'm doing wrong in that workflow.

https://bubble.io/page?type=page&name=order_details&version=v230317-sam&id=captureappiframe&tab=tabs-2 ( https://bubble.io/page?type=page&name=order_details&version=v230317-sam&id=captureappiframe&tab=tabs-2 )

https://app.asana.com/app/asana/-/get_asset?asset_id=1204267919379824 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204267919379824 )

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam let me take a look

[sync-by-unito[bot]]

➤ Ethan Wu commented:

ok so the error looks like the order_id cannot be found by the given user. can you provide me with the order_id you are searching?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam i think it should appear since we are using admin token

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam so i tested it out and it worked on my screen with the following order_id = 08195c19-d313-4e33-a411-577502588bbf

[sync-by-unito[bot]]

➤ Ethan Wu commented:

also since you are utilizing an admin api call in api connector you do not need token and refresh_token as url parameters since we are using an authorization token that is set to private

[sync-by-unito[bot]]

➤ Sam commented:

Here is the order id fdc29d95-2011-4ad3-9aff-a655295f983b can you please try with this one?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam do you mind sharing you user token with me. you can dm me on slack. i need to confirm something

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam so im checking various storage backend api calls such as retrieve order, list order, retrieve workflow. it doesn't seem like the order_id exists at any capacity. are you sure the order_id you are getting is correct?

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, not sure just to clarify.

Network action like Mint & Share has order id right?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam yes it does.

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, I notice that when order is created from capture app it also passes ( https://github.com/numbersprotocol/capture-lite/blob/2c617d01716fd309fe5341e3d4b71f85f0e414f2/src/app/shared/actions/service/order-history.service.ts#L66 ) user public_key as uid to bubble api/1.1/obj/order But Order Data Type ( https://bubble.io/page?type=page&name=order_details&version=v230317-sam&id=captureappiframe&tab=tabs-3&subtab=Data+Types&type_id=order ) does not have uid field 🤔.

To show order details in capture app it does the following:

• fetches all order ( https://github.com/numbersprotocol/capture-lite/blob/2c617d01716fd309fe5341e3d4b71f85f0e414f2/src/app/shared/actions/service/order-history.service.ts#L87 )that has uid == public key (it literally passes bubble constraints like this [{"key": "uid", "constraint_type": "equals", "value": "${publicKey}" } ]
• then it just shows order that user clicked by filtering order id ( https://github.com/numbersprotocol/capture-lite/blob/2c617d01716fd309fe5341e3d4b71f85f0e414f2/src/app/features/home/activities/network-action-order-details/network-action-order-details.page.ts#L30 ).

Then from capture app I tried to do the following

• create new account
• create capture
• mint and share
• pass order id to iframe

From bubble side

• get order_id from url
• do search for Order where Order.order_id = Get order_id from page URL

https://app.asana.com/app/asana/-/get_asset?asset_id=1204269052426996 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204269052426996 )

Now the questions is why it didn't found the order (expected to find)?

Because when I send postman request ( https://network-app.numbersprotocol.io/api/1.1/obj/order?sort_field=Created Date&descending=true&constraints=[{"key": "uid", "constraint_type": "equals", "value": "0xf110cEE7495E5097142f598bb2D7CDd387F218E5" } ] ) for the same order id it can be found.

Is that because order in capture app is created in live DB but because I'm developing order_details page in version-sam ( https://bubble.io/page?type=page&name=order_details&version=v230317-sam&id=captureappiframe&tab=tabs-1 ) when I do:

• search for Order where Order.order_id = Get order_id from page URL

it searches not live DB, right?

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam

so there are a few things going on here:

capture-iframe has an Order DB, however this Order DB contains no information regarding Network Actions.

Capture APP order history exists on the Network Action DB (this is the one that I showed you in our huddle).

So if you want to display information you will need to utilize the [Admin] Storage Backend - Get Order.

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam you will be using this one:

Storage Backend - Retrieve a Network Action Order

so you will pass in order_id as id and token as authorization.

since you will be using jwt token you will need to add refresh token logic to your workflow.

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam ok i made the change in your branch and confirmed that it can work.

so the issue is we were using the wrong api endpoint (sorry >.<)

we should be using the retrieve network action order. and after looking at it, it is also an admin endpoint so no need for token and refresh token parameters.

[sync-by-unito[bot]]

➤ Ethan Wu commented:

ex: https://captureappiframe.numbersprotocol.io/version-v230317-sam/order_details?debug_mode=true&order_id=d9ecd744-444d-49fe-ba4e-ec954b7aa84c ( https://captureappiframe.numbersprotocol.io/version-v230317-sam/order_details?debug_mode=true&amp;order_id=d9ecd744-444d-49fe-ba4e-ec954b7aa84c )

test it out and let me know if there are any other issues.

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, just status update here is the preview of bubble details but I need to consult with Ethan Wu on some parts.

Kenny Hung I will notify you again when bubble page is completed.

Ethan Wu can you please have a look at questions at claap please 🙏

https://app.claap.io/numbers-protocol/preview-order-details-not-finished-c-O35CsUM4Uy-0tiCrvfIzTMu ( https://app.claap.io/numbers-protocol/preview-order-details-not-finished-c-O35CsUM4Uy-0tiCrvfIzTMu )

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam i responded on claap

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu, yep sorry forgot to answer in claap (deep dive in bubble 😅) but I found the solution.

Currently working on reusable component to show date as (1 days or 5 minutes ago etc)

Solution was to set created_at as date type (since it's valid date) type and now it can be treated as date and easilly manipulated

https://app.asana.com/app/asana/-/get_asset?asset_id=1204281844772916 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204281844772916 )

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam nice! never tried adjusting those parameters before. always learn something new

[sync-by-unito[bot]]

➤ Sam commented:

Me too I found about that in this video ( https://youtu.be/nO8PSqeJaWk?t=975 ) so it's okay to change data type if we are sure 🤗

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, I finished implementing bubble page here is the demo 🎉.

https://app.claap.io/numbers-protocol/bubble-update-for-showing-order-information-in-the-c-O35CsUM4Uy-QciQiRdVZMTp ( https://app.claap.io/numbers-protocol/bubble-update-for-showing-order-information-in-the-c-O35CsUM4Uy-QciQiRdVZMTp )

Kenny Hung, one more thing. The bubble page is at version-v230317-sam branch. The issue is I changed a lot of thing during experimenting (learning) and it might have issues during merge.

Therefore I suggest

• create fresh branch version-v230328-sam
• copy only necessary changes from version-v230317-sam to version-v230328-sam
• submit version-v230328-sam for QA testing

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Sam (cc Tammy YangEthan WuScott Yan)

I have some concern about this branch.

1. As our process, QA should only test on version-qa-release, it's because avoid any missing through merge process (Like previous situation)
2. The dev branch please make sure based on the latest iframe live version.
3. We need to confirm it's okay during merge into qa branch or live version. If not, we still can't deliver to users after testing.

[sync-by-unito[bot]]

➤ Ethan Wu commented:

Sam

i checked the branch. there is a exclamation point on the top meaning there are some difference between LIVE branch and your current branch. I would resolve those merge first.

than create a qa-release branch. if one exists already you can delete and create a qa-release branch.

then submit for qa.

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung, (cc: Ethan Wu)

Summary of huddle with Ethan Wu.

As I mentioned version-v230317-sam is very dirty because I experimented there a lot. So my next steps are:

• create fresh branch version-v230328-sam from qa-release branch
• apply only necessary changes to version-v230328-sam
• merge version-v230328-sam to qa-release

Ethan Wu are my understanding correct?

[sync-by-unito[bot]]

➤ Kenny Hung commented:

Sam Just as reference & remind😀

Bubble dev doc - Google Slides ( https://docs.google.com/presentation/d/12nGKQQHWESYl7pllOjCDSgq62x17SftHXTzQDdu4N-A/edit#slide=id.g1402279dd22_0_60 )

Ethan Wu please help Sam could able to follow the process, I think also need to merge with live, after create the dev branch.

If Sam has already followed it, could skip this comment.

[sync-by-unito[bot]]

➤ Sam commented:

Kenny Hung thank you for sharing google slides. I will follow the process.

[sync-by-unito[bot]]

➤ Sam commented:

Ethan Wu I have a question should I merge like in the video?