feat(tangle-dapp): Bridge UI on Tangle Dapp #2307

vutuanlinh2k2 · 2024-05-13T14:27:48Z

Summary of changes

Provide a detailed description of proposed changes.

Add new Bridge page to the site
Current functionalities of Bridge Container: select and switch Source & Destination Chain

Proposed area of change

Put an x in the boxes that apply.

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Closes Bridge UI front-end for Tangle dApp #2305

Screen Recording

If possible provide a screen recording of proposed change.

CleanShot.2024-05-14.at.13.36.41.mp4

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

netlify · 2024-05-13T14:28:09Z

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	`a632d35`
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/664432fb94c4f00008b6b067
😎 Deploy Preview	https://deploy-preview-2307--tangle-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

drewstone · 2024-05-13T14:35:22Z

We should be able to interact with the UI without connecting a wallet too, entirely IMO.
If I'm transferring from Chain A then I shouldn't see Chain A as an option for a destination @vutuanlinh2k2

github-actions · 2024-05-13T14:36:25Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	43cf7a6fcb05ece9c46601da1a89d9d9e5a6d9bc
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-bridge/deploys/664225634f5bf11bce3ef771
😎 Deploy Preview	https://664225634f5bf11bce3ef771--hubble-bridge.netlify.app

To edit notification comments on pull requests, go to your Netlify site settings.

vutuanlinh2k2 · 2024-05-13T14:37:01Z

We should be able to interact with the UI without connecting a wallet too, entirely IMO.

If I'm transferring from Chain A then I shouldn't see Chain A as an option for a destination @vutuanlinh2k2

We can interact with the UI without connecting to a wallet at the moment.

For the second comment, I will update it now!

drewstone

LG, comment on the logic of chain selection but if you think it's the right UX that's good.

drewstone · 2024-05-13T14:36:47Z

apps/tangle-dapp/app/bridge/ChainSelectors.tsx

+  const onSetDestinationChain = useCallback(
+    (chain: ChainConfig) => {
+      setDestinationChain(chain);
+      // If the destination chain is the same as the source chain, clear the source chain.


It seems that instead of switching and nullifying things that we should not present the same chain as an option? Or do you think this is better. I'm ambivalent is this is the logic you think is worth having.

Working on it right now!

github-actions · 2024-05-14T06:35:53Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	f395aada7803a2cee8d26ac6b7128ba320457ed0
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-bridge/deploys/664306457db7c69ce3ad93a8
😎 Deploy Preview	https://664306457db7c69ce3ad93a8--hubble-bridge.netlify.app

To edit notification comments on pull requests, go to your Netlify site settings.

monaiuu

A few minor updates from me:

Ensure that the width of the dropdown menu is consistent with the width of the selector container above it.
Add a token container display within the amount input field. This will ensure that the user is clear on what token is being transacted. In the future, when we have more Tangle tokens to be bridged (e.g., tgETH, tgDOT), we can turn this container into a dropdown menu for the user to select the desired token.
Update the button copy to 'Approve' or 'Confirm'. Using 'bridge' and 'transfer' simultaneously might be confusing for users, especially we also have 'transfer' in Account.
We could consider displaying the potential applicable fees and the estimated transaction time, similar to the sub-bridge shown in the screenshot. (depending on feasibility on getting the data)

vutuanlinh2k2 · 2024-05-14T09:47:19Z

A few minor updates from me:

Ensure that the width of the dropdown menu is consistent with the width of the selector container above it.

Add a token container display within the amount input field. This will ensure that the user is clear on what token is being transacted. In the future, when we have more Tangle tokens to be bridged (e.g., tgETH, tgDOT), we can turn this container into a dropdown menu for the user to select the desired token.

Update the button copy to 'Approve' or 'Confirm'. Using 'bridge' and 'transfer' simultaneously might be confusing for users.

We could consider displaying the potential applicable fees and the estimated transaction time, similar to the sub-bridge shown in the screenshot. (depending on feasibility on getting the data)

I will work on the section for estimated fees when implementing the logic, it will be more efficient.

For other comments, I will update and re-request you again!

github-actions · 2024-05-14T14:17:25Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	49ba508e69bae4d0c4f4ffff8e37035246269a64
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-bridge/deploys/66437270d54dad2aec3ff112
😎 Deploy Preview	https://66437270d54dad2aec3ff112--hubble-bridge.netlify.app

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2024-05-14T15:01:30Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	45a9d9a798ba4a64f40b5f71bcf06ea03ab49153
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-bridge/deploys/66437cc727dd9e31102491c1
😎 Deploy Preview	https://66437cc727dd9e31102491c1--hubble-bridge.netlify.app

To edit notification comments on pull requests, go to your Netlify site settings.

vutuanlinh2k2 · 2024-05-14T15:56:56Z

A few minor updates from me:

Ensure that the width of the dropdown menu is consistent with the width of the selector container above it.

Add a token container display within the amount input field. This will ensure that the user is clear on what token is being transacted. In the future, when we have more Tangle tokens to be bridged (e.g., tgETH, tgDOT), we can turn this container into a dropdown menu for the user to select the desired token.

Update the button copy to 'Approve' or 'Confirm'. Using 'bridge' and 'transfer' simultaneously might be confusing for users.

We could consider displaying the potential applicable fees and the estimated transaction time, similar to the sub-bridge shown in the screenshot. (depending on feasibility on getting the data)

I will work on the section for estimated fees when implementing the logic, it will be more efficient.

For other comments, I will update and re-request you again!

@monaiuu I have updated the Dropdown Size and the Token Selector.

The preview link does not have this page because we just show it in the development environment at the moment (the same as the page for Validator and Restaking). I might create a task to show these features in the deploy preview.

CleanShot.2024-05-14.at.22.49.18.mp4

drewstone · 2024-05-14T19:22:57Z

Merge conflicts here @vutuanlinh2k2 but otherwise looks good for merge. I do think the style looks different between the implementation and the image @monaiuu presented. I also would like there to be a label over the From and To for the bridge's source and destination chain.

github-actions · 2024-05-15T04:07:20Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	a632d35df8bc68bad8eeed284054a4947a516079
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-bridge/deploys/664434f3bbac65483dc169d3
😎 Deploy Preview	https://664434f3bbac65483dc169d3--hubble-bridge.netlify.app

To edit notification comments on pull requests, go to your Netlify site settings.

vutuanlinh2k2 · 2024-05-15T04:10:29Z

Merge conflicts here @vutuanlinh2k2 but otherwise looks good for merge. I do think the style looks different between the implementation and the image @monaiuu presented. I also would like there to be a label over the From and To for the bridge's source and destination chain.

Try adding labels but it does not look good without them. I personally think the arrow already indicates the source and destination chain for the user.

This can be updated in the future. I will merge this for now

vutuanlinh2k2 added 6 commits May 11, 2024 15:45

feat: add new Bridge page and prepare the UI

38c5017

chore: handle select chain

5c01cf8

chore: handle connect wallet

bf344bf

chore: switch chain button

f76852f

chore: add comments

21aed34

chore: add more comments

43cf7a6

vutuanlinh2k2 requested review from AtelyPham, devpavan04 and yurixander as code owners May 13, 2024 14:27

vutuanlinh2k2 requested review from drewstone and monaiuu May 13, 2024 14:28

vutuanlinh2k2 self-assigned this May 13, 2024

vutuanlinh2k2 added the needs review 👓 label May 13, 2024

drewstone approved these changes May 13, 2024

View reviewed changes

vutuanlinh2k2 added wip 🚧 and removed needs review 👓 labels May 13, 2024

chore: update chain selector logic

f395aad

vutuanlinh2k2 added needs review 👓 and removed wip 🚧 labels May 14, 2024

vutuanlinh2k2 added wip 🚧 and removed needs review 👓 labels May 14, 2024

monaiuu reviewed May 14, 2024

View reviewed changes

vutuanlinh2k2 added 2 commits May 14, 2024 17:13

feat: add token selection dropdown

4041770

chore: update dropdown size

1d0086b

vutuanlinh2k2 added 2 commits May 14, 2024 21:07

fix: update Component name to fix CI

d0cec21

chore: format code

49ba508

chore: fix CI

45a9d9a

yurixander changed the title ~~feat (tangle-dapp): Bridge UI on Tangle Dapp~~ feat(tangle-dapp): Bridge UI on Tangle Dapp May 14, 2024

yurixander approved these changes May 14, 2024

View reviewed changes

vutuanlinh2k2 added needs review 👓 and removed wip 🚧 labels May 14, 2024

vutuanlinh2k2 requested a review from monaiuu May 14, 2024 15:57

vutuanlinh2k2 added 2 commits May 15, 2024 10:12

chore: merge with devleop

5ccf758

chore: UI update

a632d35

vutuanlinh2k2 merged commit 66e5fbf into develop May 15, 2024
12 checks passed

vutuanlinh2k2 deleted the linh/bridge-ui branch May 15, 2024 04:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tangle-dapp): Bridge UI on Tangle Dapp #2307

feat(tangle-dapp): Bridge UI on Tangle Dapp #2307

vutuanlinh2k2 commented May 13, 2024 •

edited

Loading

netlify bot commented May 13, 2024 •

edited

Loading

drewstone commented May 13, 2024

github-actions bot commented May 13, 2024

vutuanlinh2k2 commented May 13, 2024

drewstone left a comment

drewstone May 13, 2024

vutuanlinh2k2 May 13, 2024

github-actions bot commented May 14, 2024

monaiuu left a comment •

edited

Loading

vutuanlinh2k2 commented May 14, 2024

github-actions bot commented May 14, 2024

github-actions bot commented May 14, 2024

vutuanlinh2k2 commented May 14, 2024

drewstone commented May 14, 2024

github-actions bot commented May 15, 2024

vutuanlinh2k2 commented May 15, 2024

feat(tangle-dapp): Bridge UI on Tangle Dapp #2307

feat(tangle-dapp): Bridge UI on Tangle Dapp #2307

Conversation

vutuanlinh2k2 commented May 13, 2024 • edited Loading

Summary of changes

Proposed area of change

Reference issue to close (if applicable)

Screen Recording

Code Checklist

netlify bot commented May 13, 2024 • edited Loading

✅ Deploy Preview for tangle-dapp ready!

drewstone commented May 13, 2024

github-actions bot commented May 13, 2024

vutuanlinh2k2 commented May 13, 2024

drewstone left a comment

Choose a reason for hiding this comment

drewstone May 13, 2024

Choose a reason for hiding this comment

vutuanlinh2k2 May 13, 2024

Choose a reason for hiding this comment

github-actions bot commented May 14, 2024

monaiuu left a comment • edited Loading

Choose a reason for hiding this comment

vutuanlinh2k2 commented May 14, 2024

github-actions bot commented May 14, 2024

github-actions bot commented May 14, 2024

vutuanlinh2k2 commented May 14, 2024

drewstone commented May 14, 2024

github-actions bot commented May 15, 2024

vutuanlinh2k2 commented May 15, 2024

vutuanlinh2k2 commented May 13, 2024 •

edited

Loading

netlify bot commented May 13, 2024 •

edited

Loading

monaiuu left a comment •

edited

Loading