[FR] configure capture app to receive deep links

[sync-by-unito]

Current status:

Only completed on

User story:

As a user, I want to be automatically redirected to the Capture Cam after completing the "Swap NUM" process, so that I can seamlessly continue using the app without the need for manual navigation.

Feature request:

Configure Capture Cam to accept deep links

Supporting materials:

For configuring capture app to receive deep links we need to accomplish few steps and might need some admin permissions.

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

[sync-by-unito]

➤ Sam commented:

Kenny Hung

to accomplish [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686 ) we need to configure capture app to accept deep links as I mentioned before Comment by @sam on [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686/1204821706421830/f ).

Please help to arrange this task to next/future sprints 🙏.

[sync-by-unito]

➤ Kenny Hung commented:

Sam Thanks for remind, you mean patch sprint(0619)?

[sync-by-unito]

➤ Sam commented:

Kenny Hung, not sure if we should include it to patch sprint.

I don't know yet what are path sprint items for capture app yet.

But I want to remind that for configuring capture app to receive deep links we need to accomplish few steps ( https://capacitorjs.com/docs/guides/deep-links#create-site-association-file ) and might need some admin permissions.

[sync-by-unito]

➤ Ethan Wu commented:

Sam just checking is this task in-progress? the iframe part of this release is scheduled for tuesday of next week.

just seeing if we need to rearrange as the deeplink setup is a dependency.

[sync-by-unito]

➤ Sam commented:

Ethan Wu its not in progress. Yes we need to re-arrange.

Kenny Hung can you help re-arrange this to nearest milestone? So I can start working on it?

[sync-by-unito]

➤ Kenny Hung commented:

SamEthan Wu (cc Tammy Yang)

If [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686 ) is blocked by this task, I suggest push it ( https://app.asana.com/0/1201016280880500/1204804397935686/f ) to next sprint.

And I'll add this task into next Tuesday ionic release.

How do you think?

[sync-by-unito]

➤ Sam commented:

Kenny Hung if by next tuesday you mean this v230808-capture-app-ionic-launch ( https://app.asana.com/0/1201016280880500/1205132295508392 ) then I can try that.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, this task is blocked by Comment by @sam on [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686/1205208937269002/f )

[sync-by-unito]

➤ Kenny Hung commented:

Sam (cc Ethan Wu) Sorry, could you help to summary the order we implement for these related tasks?

I saw the above comments seem different.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, sure.

[FR] configure capture app to receive deep links ( https://app.asana.com/0/0/1204822013110388 ), is blocked until ✓ v230711-capture-app-iframe ( https://app.asana.com/0/0/1204942805264674 ) is deployed.

If we want deep links to work we need to Creating Site Association Files ( https://capacitorjs.com/docs/guides/deep-links#creating-site-association-files ) in bubble site, which I already implemented ( https://app.asana.com/0/0/1204804397935686/1205208836377538/f ) in our bubble app but I can not merge it to master now (therefore I'm blocked).

Ethan Wu will help to merge my changes to v230711-capture-app-iframe and ping me back when it's deployed to live Comment by @Ethan Wu on [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686/1205205629759631/f ) and after that I can continue working on [FR] configure capture app to receive deep links ( https://app.asana.com/0/1201016280880500/1204822013110388/f ).

Kenny Hung therefore we need to re-arrange [FR] configure capture app to receive deep links ( https://app.asana.com/0/1201016280880500/1204822013110388/f ).

Please let me know if there anything else you want to clarify.

[sync-by-unito]

➤ Kenny Hung commented:

Sam (cc Ethan Wu) Let me summary the order

1. We need to add Creating Site Association Files ( https://capacitorjs.com/docs/guides/deep-links#creating-site-association-files ) in bubble site (this will be added into ✓ v230711-capture-app-iframe ( https://app.asana.com/0/0/1204942805264674 )
2. When ✓ v230711-capture-app-iframe ( https://app.asana.com/0/0/1204942805264674 ) deploy, you could continue this task
3. When this task complete & deploy, [Issue] When the process of "swap NUM" is completed, user still stays on the metamask browser instead of returning Capture App automatically ( https://app.asana.com/0/0/1204804397935686 ) fixed will work.

If my understand is yes, there are two questions.

1. for Bump @capacitor/cli from 2.2.1 to 2.3.0 #1, currently, which branch do we implemented?
2. Does it have an asana card for that?

If my understand is wrong, we need to have a quickly huddle.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, you understanding is correct.

1. sam-experiment-deep-links ( https://bubble.io/page?version=18v1&name=index&id=captureappiframe&tab=tabs-1 )
2. Creating Site Association Files ( https://capacitorjs.com/docs/guides/deep-links#creating-site-association-files ) does not have asana card

[sync-by-unito]

➤ Kenny Hung commented:

Sam I've create a card add Creating Site Association Files in iframe ( https://app.asana.com/0/1201083422707776/1205209959719529/f ) for this part

[sync-by-unito]

➤ Sam commented:

Ethan Wu, (cc: Kenny Hung)

I got basic deep link working on iOS (only), will try with android next.

As you can see in demo user can click button and

• open app
• open app specific page (wallets)

https://app.claap.io/deep-link-i-os-proof-of-concept-c-O35CsUM4Uy-FCmm9ohEa0wy ( https://app.claap.io/deep-link-i-os-proof-of-concept-c-O35CsUM4Uy-FCmm9ohEa0wy )

Ethan Wu, (cc: Kenny Hung). I realized that we do not need to add Creating Site Association Files in iframe ( https://app.asana.com/0/1201016280880500/1205209959719529 ) meaning I'm not blocked by bubble ✓ v230711-capture-app-iframe ( https://app.asana.com/0/1201016280880500/1204942805264674 ) release.

Instead of adding association file in bubble side it' will be better if we add association file in our firebase project.

[sync-by-unito]

➤ Sam commented:

Proof of concept Android version 🎉

https://app.claap.io/numbers-protocol/deep-link-android-proof-of-concept-c-O35CsUM4Uy-Kotj3Q0Zl1yL ( https://app.claap.io/numbers-protocol/deep-link-android-proof-of-concept-c-O35CsUM4Uy-Kotj3Q0Zl1yL )

[sync-by-unito]

➤ Ethan Wu commented:

nice Sam

do you mind sharing what the deeplink url is so i can pass it into bubble?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, sure.

• During development I created firebase project (personal account) to work with.
• Then in bubble I add this to bubble's Run JavaScript.

const url = "https://experiments-deep-links.web.app/wallets";

window.location.assign(url);

However I need to ask James Chien or Bofu Chen to help to create firebase hosting webpage using company's firebase project.

As you can see the deep link web site is under my personal firebase project. So we just need to recreate hosting website with company firebase account.

[sync-by-unito]

➤ Ethan Wu commented:

SamKenny Hung ok got it. so the implementation in bubble will still require us to wait for the deeplink to be set up in companies firebase project.

[sync-by-unito]

➤ Sam commented:

Ethan Wu yes. But I will try to cooperate with Bofu Chen to finish firebase setup by end of today

[sync-by-unito]

➤ Ethan Wu commented:

Sam ok thanks! let me know when its all set up 🙂

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I haven't finished firebase setup yet but from bubble side you can already do this (aka Run javascript to redirect user back to the app after meta mask things are done)

const url = "https://capture-cam-deep-links.web.app/wallets";

window.location.assign(url);

[sync-by-unito]

➤ Sam commented:

Kenny Hung, I tested and can include this feature to v230808-capture-app-ionic-launch ( https://app.asana.com/0/0/1205132295508392 ). Let me know what you think?

Kenny Hung, to verify you can perform the following test (just like in demo ( https://app.asana.com/0/0/1204822013110388/1205209616542903/f ))

• install capture app firebase-v230808 (iOS, Android)
• open capture app, and sign in.
• open safari and navigate to http://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links ( http://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links?debug_mode=true ) you will see "Go to Capture Cam" and "Go to Capture Cam Wallet" buttons
• TEST: click "Go to Capture Cam" should open capture cam
• TEST: click "Go to Capture Cam Wallet" should open capture cam wallets page

[sync-by-unito]

➤ Kenny Hung commented:

Sam

Thanks! I'll add this task into v230808-ionic.

For verifying steps, I think okay, just checking, the demo ( https://app.asana.com/0/1201016280880500/1204822013110388/1205209616542903/f ) link seems just the comment link?

[sync-by-unito]

➤ Bofu Chen commented:

Sam The deep link PR's merge target should be the milestone branch instead of the main branch. Could you help update the merge target? Thanks

[sync-by-unito]

➤ Sam commented:

Bofu Chen, done 🤗. Here is the same PR ( https://github.com/numbersprotocol/capture-cam-deep-links/pull/1 ) but with milestone-v230808 as a merge base

[sync-by-unito]

➤ Bofu Chen commented:

Sam Sorry for that I did not notice that this PR is from a new repo.

What's the consideration creating a new repo instead of putting the deep link files in the Capture Cam repo? It would be easier to maintain if we put the deep link files in the Capture Cam repo.

[sync-by-unito]

➤ Sam commented:

Bofu Chen thats sounds interesting. I will try if deep linking works with github repo link.

If yes then I will redo with github. If not then we just keep existing solution. Good idea though. A bit non standard but make sense in out case.

[sync-by-unito]

➤ Kenny Hung commented:

Okay, I'll also add this task into next sprint milestone.

[sync-by-unito]

➤ Kenny Hung commented:

Tammy YangSam ^^

This task is about Capture Cam support deep link, currently only completed on iOS, considering this feature doesn't block user flow & the public process, I add this task in the next milestone to fix android part.

[sync-by-unito]

➤ Sam commented:

Kenny Hung I was able to open capture cam from meta mask browser here is the demo

https://app.claap.io/numbers-protocol/qa-launch-capture-cam-from-android-metamask-c-O35CsUM4Uy-qcUbXaN3UvW1 ( https://app.claap.io/numbers-protocol/qa-launch-capture-cam-from-android-metamask-c-O35CsUM4Uy-qcUbXaN3UvW1 )

Ethan Wu to navigate

• from bubble page (inside metamask)
• to capture cam

You can change code from this

const url = "https://capture-cam-deep-links.web.app/ ( https://capture-cam-deep-links.web.app/ )";

window.location.assign(url)

to this

const url = "https://capture-cam-deep-links.web.app/";

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

if (isIOS) window.location.assign(url);

else window.open(url, "_blank");

Ethan Wu You can check working version on bubble experiment-deep-links branch

[sync-by-unito]

➤ Sam commented:

Kenny Hung, we can change move this task from capture-cam-ionic to capture-cam-iframe. Because it need changes from bubble side. Thank you.

[sync-by-unito]

➤ Kenny Hung commented:

Sam last time mentioned ( https://dt42-numbers.slack.com/archives/C0323488MEJ/p1692356118854419 ) this task, so the android part is fixed in this version?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung there is no fix yet because as Sam mentioned the fix is done in bubble. we need to change the run javascript code to what he mentioned above.

[sync-by-unito]

➤ Sam commented:

Kenny Hung to fix we do not need to change capture cam side (deep links are setup already). We only need to change bubble side.

So if we change bubble side deep links will work in capture cam 0.83.2

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuSam Okay, just curious, because I test on 0.83.2, iOS could work. So you mean android part also needs to update from bubble side?

[sync-by-unito]

➤ Sam commented:

Kenny Hung, android and iOS use same bubble page.

We just need to update bubble page with the following code

const url = "https://capture-cam-deep-links.web.app/ ( https://capture-cam-deep-links.web.app/ )";

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

if (isIOS) window.location.assign(url);

else window.open(url, "_blank");

and it will work on 0.83.2 (iOS + Android). It means we do not need to re-build or re-publish android 0.83.2. We just need to apply code above to bubble side only.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung did you test this in the MetaMask browser?

Just as Sam mentioned, the deeplinking has already been set up in ionic. For deeplinks to work in Capture Cam we need to have the redirect link called in bubble iframe side.

Early tests Sam was able to do this but later when we implemented in iframe side we found it couldn't work in MetaMask browser. Sam now figured out how to get it to work with a new set of JavaScript code which I can add in the next sprint.

[sync-by-unito]

➤ Sam commented:

And it will also work from meta mask browser. As show demo ( https://app.asana.com/0/0/1204822013110388/1205420677119479/f ).

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuSam

Yes, I know it didn't work on metamask browser.

I mean I just try deep link(not metamask redirect) on ionic last time(testing 0.83.2), it can't work on android device(iOS is work.) So I just want to confirm the android part is fixed.

And deeplink on metamask it could be arranged into next sprint.(aka arrange this task to iframe side next sprint.)

[sync-by-unito]

➤ Kenny Hung commented:

Sam Another question is

How QA test the deep link on ionic?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny HungSam

sam can provide you the link to the bubble page. you can open it in metamask and click on the button and see if it navigates back to capture app automatically

[sync-by-unito]

➤ Sam commented:

Kenny Hung, try the following

• open this link https://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links ( https://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links?debug_mode=true ) in meta-mask browser
• click Go To Capture Cam
• it should open capture cam (expected behavior)

[sync-by-unito]

➤ Kenny Hung commented:

Thanks!

[sync-by-unito]

➤ Sam commented:

Kenny Hung, just reminder this task does not block capture-cam-ionic.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, is the fix you mentioned ( https://app.asana.com/0/0/1204822013110388/1205420028503867/f ) is added to live?

If yes Kenny Hung, can test it and we can close this task.

Otherwise we can change due date and move it to related milestone.

[sync-by-unito]

➤ Ethan Wu commented:

I believe it has been added. But I'm unsure if it is deployed

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu Just want to confirm, which branch you added?

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu (cc Sam)

I try v230822 & v230905, both of them still can't redirect to Capture Cam from metamask browser.

1. Install Capture Cam of v230822-apk or v230905-apk
2. open this link https://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links ( https://captureappiframe.numbersprotocol.io/version-18v1/experiment-deep-links?debug_mode=true ) in meta-mask browser
3. click Go To Capture Cam
4. it should open capture cam (expected behavior)

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung does the link work with the production version of capture app?

maybe the configurations for v230822-apk and v230905-apk aren't configured properly

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu No, I also test on live version apk, it still can't work.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung ok than i think Sam needs to look at this one than

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuSam iOS could work, I think there is still some issue on ionic side instead of iframe side. I push it into next sprint.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, I changed config file ( https://capture-cam-deep-links.web.app/.well-known/assetlinks.json ) to make deep links work for Android.

I downloaded official capture cam 0.85.2 (android) from PlayStore and tried these ( https://app.asana.com/0/0/1204822013110388/1205589969470407/f ) steps. Worked as expected.

Kenny Hung, can you try official android app? If worked then we can close this issue.

[sync-by-unito]

➤ Kenny Hung commented:

Sam Let me try again, wait a moment.

[sync-by-unito]

➤ Kenny Hung commented:

Sam Good job! It could work on android.