feat(synapse-interface): destination address #2137

bigboydiamonds · 2024-02-29T18:59:30Z

be93430ec4fa130f64fa874ce08d2e8302b288c9: synapse-interface preview link

Summary by CodeRabbit

New Features
- Introduced a new component to display the destination address if it differs from the current address, enhancing user awareness during transactions.
- Added a confirmation warning for verifying the destination address before transactions, improving security.
- Enhanced input validation, error handling, and UI interactions for a smoother user experience.
Refactor
- Refactored state management across several components for improved efficiency and readability.
- Simplified the styling of input elements for a cleaner interface.
- Adjusted the functionality of the bridge transaction button to better handle destination address validations.
Bug Fixes
- Fixed issues related to transaction recipient filtering and date calculations, ensuring accuracy and reliability.
Style
- Improved styling and components for better user interface interactions.
Chores
- Updated and reorganized component structures and transitions for a more streamlined user experience.

fac847377cf2eda8109fdde3aa455c1e23caf11d: synapse-interface preview link
e310d8b172c0c63f556a305b05b75f38e06da1f7: synapse-interface preview link
dbf16fef7375271f1ecc97eda234aeef8b9e6a84: synapse-interface preview link
0d6a17bd6b15996dbeb3376d1875fc6ae327e404: synapse-interface preview link
9c7d22866b1f4390d6b7f4eece5b689c7990a9b5: synapse-interface preview link
86774e03dbf0646c4c15ea1a8d4d6fd07cd4b581: synapse-interface preview link
1d643b3fd771c49fb97ffd1ed02342602e0dcb56: synapse-interface preview link
86fd7f37bff91f03d7f1c964a080a0563eac2993: synapse-interface preview link
9f5303c54950b72aba06909d55f2591dcb3c74a4: synapse-interface preview link
638ac4c32a3efd0e520b2c5c79d5e03149758fc5: synapse-interface preview link
eb1e49b9ab3e9eb41a7c1f83b13b03244827a1c3: synapse-interface preview link
742a9991e51a56e08b7b88ce5ed50ad425476a1c: synapse-interface preview link
2e29c885b388b8c4a0ff253560b39bfce3eae1d4: synapse-interface preview link
dc320f45b4e6740e99ce31fcabc18bd04d4a2685: synapse-interface preview link
79bd7059acfa1d147ecf3afb9d62ee1014120664: synapse-interface preview link
c5bd9352a1ec8bd534709eba827b03b4b89a310b: synapse-interface preview link
104242cd4751d7aac12896121201de2a7684603f: synapse-interface preview link
90625125a0ff81446c8af346232443cff4e51838: synapse-interface preview link
1a2c71cea910b803e81d21ce05665b78de548b64: synapse-interface preview link
5f0bdefafd6d27d490242bb9f41475a7532130ba: synapse-interface preview link
e6615700be99a741e55d8124d36c3cb17be445a5: synapse-interface preview link

coderabbitai · 2024-02-29T18:59:34Z

Note

Reviews Paused

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Walkthrough

The update refines the Synapse bridge component by enhancing user interface elements and functionality. It focuses on improving state management, refining input validation, and enhancing destination address handling with verification warnings. These changes aim to streamline user interactions, emphasize safety through confirmations, and optimize code structure for clarity and efficiency.

Changes

Files	Summary
`.../DestinationAddressInput.tsx`	Overhauled input handling with improved validation, UI enhancements, recipient management.
`.../BridgeTransactionButton.tsx` `.../BridgeWarnings.tsx`	Enhanced destination address handling, including display logic and verification warnings.
`.../BridgeExchangeRateInfo.tsx`	Added logic to display destination address if different and imported necessary functions.
`.../state-managed-bridge/index.tsx`	Updated state management, refactored button handling, and reorganized component structure.

🐰✨

In the world of code, where bridges connect,
A rabbit hopped, changes to inspect.
With a whisker twitch and a gentle fix,
The paths now clear, no more to perplex.

🌉➡️🔍

"Verify your steps," the rabbit advised,
Ensuring your journey is nicely devised.
With each hop forward, a leap in grace,
Through the digital realm, we joyfully race.

🐾🎉

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit-tests for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit tests for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit tests.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

codecov · 2024-02-29T19:05:02Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 47.14108%. Comparing base (748a433) to head (462ccfb).
Report is 7 commits behind head on master.

Additional details and impacted files

@@                 Coverage Diff                 @@
##              master       #2137         +/-   ##
===================================================
+ Coverage   46.97743%   47.14108%   +0.16365%     
===================================================
  Files            373         361         -12     
  Lines          28618       27388       -1230     
  Branches          83          83                 
===================================================
- Hits           13444       12911        -533     
+ Misses         13764       13135        -629     
+ Partials        1410        1342         -68

Flag	Coverage Δ
cctp-relayer	`?`
packages	`90.62500% <ø> (+0.09766%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

aureliusbtc · 2024-03-04T18:36:19Z

@coderabbitai review

coderabbitai

Review Status

Actionable comments generated: 6

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between d57b4dc and d1b0af1.

Files selected for processing (1)

packages/synapse-interface/components/StateManagedBridge/_DestinationAddressInput.tsx (1 hunks)

packages/synapse-interface/components/StateManagedBridge/_DestinationAddressInput.tsx

abtestingalpha · 2024-03-06T01:05:16Z

@bigboydiamonds for QAing this, just writing out scenarios/Qs we'll need to test

On wallet 1

User enters destination address
After txn completes, does destination address clear or stay same? If it's noticeably visible, then we can leave it the same (for users who want to do rapid fire bridging let's say)

User switches to wallet 2 or disconnects

Destination address definitely needs to clear

User is on bridge page, enters dest address, goes to swap page, comes back to bridge page

Address clears and they have to enter it again? Leaning toward clearing any time they visit the bridge page

Basically main goal of all this is we want to make sure that user sending doesn't inadvertently send to wrong destination address (meaning understanding state of where dest address sits & best way to clear it)

cloudflare-workers-and-pages · 2024-03-08T01:18:41Z

Deploying sanguine with Cloudflare Pages

Latest commit:	`462ccfb`
Status:	✅ Deploy successful!
Preview URL:	https://86b3a36b.sanguine.pages.dev
Branch Preview URL:	https://fe-destination-address.sanguine.pages.dev

View logs

…dy accepted warning for session

…t setting turned off

abtestingalpha · 2024-03-26T16:19:01Z

packages/synapse-interface/store/store.ts

-    eventData = {}
-    segmentAnalyticsEvent(eventTitle, eventData)
-  }
+  /** TODO: Replace below segment events with new tracked events */


Add these back

thanks, added back in 1226707

previously commented these out because we initially were planning on removing Settings toggle

abtestingalpha · 2024-03-26T16:21:02Z

packages/synapse-interface/utils/hooks/useBridgeListener.ts

+  // Ensure destination address clears if settings turned off
+  useEffect(() => {
+    if (!showDestinationAddress && destinationAddress) {
+      dispatch(setShowDestinationAddress(null))


false not null?

Also why are we doing it here vs. where the settings get turned off

thanks for catching this, fixed to dispatch the proper action in 8e2c426

we currently are dispatching the action from the Settings onClick toggle here: https://github.com/synapsecns/sanguine/blob/fe/destination-address/packages/synapse-interface/components/StateManagedBridge/SettingsSlideOver.tsx#L63

but I wanted to add an additional line in the bridge listener for a fallback check just incase Settings code gets updated in future (thinking here is that given the destination address feature is a sensitive feature for our Users, wrt to being extra careful about clearing dest. address store value)

bigboydiamonds added 5 commits February 21, 2024 12:38

Init

77879d3

Basic Address Input

fcf1ce8

Detect if input is valid address

0159b08

Click on Input to trigger warning

d32d59e

DestinationInputWarning to handle accept/reject warning

d1b0af1

bigboydiamonds requested review from abtestingalpha and aureliusbtc as code owners February 29, 2024 18:59

github-actions bot added M-synapse-interface size/s labels Feb 29, 2024

bigboydiamonds changed the title ~~[WIP - do not merge] Fe/destination address~~ [WIP] Fe/destination address Mar 1, 2024

coderabbitai bot reviewed Mar 4, 2024

View reviewed changes

bigboydiamonds added 8 commits March 7, 2024 15:43

Hide placeholder when input is active

efab9e7

Input display when input address valid

7e978c5

Input width

59d19e9

DestinationInputWarning state

de974f3

Warning accept/reject callback

d6e7e12

DestinationInputWarning to take up entire output container

70a2dc4

Style Warning

a478832

Focus on Input after accepting warning terms

da0b429

bigboydiamonds added 6 commits March 7, 2024 17:32

showDestinationWarning state in bridge display to track if user alrea…

22ac561

…dy accepted warning for session

Input border red signalling invalid input when activated

69d6f64

Merge

217f2bd

Improve isEmptyString

c601dff

SwitchButton takes priority over OutputContainer in visual layer

faf9769

Clear Input button

46cac4a

bigboydiamonds added 14 commits March 22, 2024 12:16

Increase width of input, limit for mobile

f5e80ab

Remove yellow text in Warning

1c8d669

Only show Destination Address in Receipt if valid

f1782c4

Clear input if invalid and exists

36fbfed

Adjust dropdown spacing

d265e72

Minor adjustments

26b5054

Blur input after clearing

ac213f8

Enter button can submit input text for validation

af56d2d

Paste icon sizing

b5e41cf

Show dest address for unconnected user if inputted

8049cd7

Hide destination address input on page load between page switch

4860582

Merge branch 'master' into fe/destination-address

772609a

Hide Bridge Warning if destination address is turned off

eb7f5c1

Ensure bridge listener clears destination address if destination inpu…

f8279ad

…t setting turned off

bigboydiamonds changed the title ~~[wip] feat(synapse-interface): destination address~~ feat(synapse-interface): destination address Mar 25, 2024

Remove unused code

8701478

abtestingalpha requested changes Mar 26, 2024

View reviewed changes

bigboydiamonds added 4 commits March 26, 2024 09:28

Fix enter bug when wallet disconnected

7eff4c6

Update dispatch value

78c5ced

Update to proper action to dispatch

8e2c426

Add back segment given we are using settings

1226707

github-actions bot added size/m and removed size/l labels Mar 26, 2024

bigboydiamonds and others added 4 commits March 26, 2024 09:40

Merge branch 'master' into fe/destination-address

254e758

Lint

56163a7

Remove side effect to clear dest address

56a3e16

Origin token copy

462ccfb

abtestingalpha approved these changes Mar 27, 2024

View reviewed changes

bigboydiamonds merged commit 44f8af6 into master Mar 27, 2024
42 checks passed

bigboydiamonds deleted the fe/destination-address branch March 27, 2024 16:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(synapse-interface): destination address #2137

feat(synapse-interface): destination address #2137

bigboydiamonds commented Feb 29, 2024 •

edited by github-actions bot

Loading

coderabbitai bot commented Feb 29, 2024 •

edited

Loading

Reviews Paused

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

codecov bot commented Feb 29, 2024 •

edited

Loading

aureliusbtc commented Mar 4, 2024

coderabbitai bot left a comment

abtestingalpha commented Mar 6, 2024

cloudflare-workers-and-pages bot commented Mar 8, 2024 •

edited

Loading

abtestingalpha Mar 26, 2024

bigboydiamonds Mar 26, 2024

abtestingalpha Mar 26, 2024

abtestingalpha Mar 26, 2024

bigboydiamonds Mar 26, 2024

feat(synapse-interface): destination address #2137

feat(synapse-interface): destination address #2137

Conversation

bigboydiamonds commented Feb 29, 2024 • edited by github-actions bot Loading

Summary by CodeRabbit

coderabbitai bot commented Feb 29, 2024 • edited Loading

Reviews Paused

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

codecov bot commented Feb 29, 2024 • edited Loading

Codecov Report

aureliusbtc commented Mar 4, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

abtestingalpha commented Mar 6, 2024

cloudflare-workers-and-pages bot commented Mar 8, 2024 • edited Loading

Deploying sanguine with Cloudflare Pages

abtestingalpha Mar 26, 2024

Choose a reason for hiding this comment

bigboydiamonds Mar 26, 2024

Choose a reason for hiding this comment

abtestingalpha Mar 26, 2024

Choose a reason for hiding this comment

abtestingalpha Mar 26, 2024

Choose a reason for hiding this comment

bigboydiamonds Mar 26, 2024

Choose a reason for hiding this comment

bigboydiamonds commented Feb 29, 2024 •

edited by github-actions bot

Loading

coderabbitai bot commented Feb 29, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

codecov bot commented Feb 29, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 8, 2024 •

edited

Loading