feat(synapse-interface): Adds switch network button to swap from and to chains

[abtestingalpha]

Summary by CodeRabbit

• New Features

  • Introduced a custom hook for fetching cryptocurrency prices at regular intervals.
  • Updated the StateManagedBridge component to support new actions for setting chain IDs and tokens.
  • Added a SwitchButton component for easier switching between chain IDs and tokens.

• Refactor

  • Enhanced the SwitchButton component for better state management and modularized SVG rendering.
  • Optimized price fetching in the UserProvider component to reduce unnecessary calls.

• Style

  • Adjusted the styling order in the OutputContainer component for improved layout consistency.

• Chores

  • Added a new hook useFetchPricesOnInterval for regular price updates.
  • Improved parameter synchronization with bridge state through additional conditions in useSyncQueryParamsWithBridgeState.

3065bb16345dd27081802683012b3c749bdea7ce: synapse-interface preview link
da8dfbd53216c0aecd6e685a4dc15b3ff6c6d690: synapse-interface preview link
4918bb1860dbc61d04e65b341be412d0c8e7fc96: synapse-interface preview link
fdc6c84cef83b3343e9e383270142ad2d5a77300: synapse-interface preview link
6cc79a6d599ad19804fe996229846dc548c30fdc: synapse-interface preview link
5bd23216f488cd6c549717e5e024485fcf4d1745: synapse-interface preview link
23dd29fd3c1f786ee9e255a2c1c4e99eed976086: synapse-interface preview link
7c54206cebe6c811365ed7f19a7915af95bbed91: synapse-interface preview link
2df66494469cffa678cf541241f8f2f4f4d57753: synapse-interface preview link
ef9b835a8ae811766a80adf91df01e546ff188b5: synapse-interface preview link
b7ca0d6e7d90ed987293ccb20523d03ff514cfdf: synapse-interface preview link
3294b1095c378cab53f3b41b93e5da3296c97450: synapse-interface preview link
69aa147d219d21c1beb910c3d6ca9e91210264b3: synapse-interface preview link
215c7e447fc134e8903e76aacdfe6a19ab173a44: synapse-interface preview link

[coderabbitai]

Walkthrough

The recent updates focus on refining the user interface and enhancing functionality across the Synapse interface. Key improvements include a refined OutputContainer layout, a modular refactor of the SwitchButton for better logic handling, and updates to the StateManagedBridge for expanded chain and token management capabilities. Additionally, the introduction of a new hook for fetching cryptocurrency prices at regular intervals optimizes data fetching, while streamlining the UserProvider component enhances performance. These changes collectively aim to improve user experience and system efficiency.

Changes

File Path	Summary
.../StateManagedBridge/OutputContainer.tsx & .../buttons/SwitchButton.tsx	Adjusted class order in OutputContainer and refactored SwitchButton for separate logic and SVG rendering.
.../state-managed-bridge/index.tsx	Updated to include new actions for chain ID and token management, and added SwitchButton.
.../contexts/BackgroundListenerProvider.tsx & .../contexts/UserProvider.tsx	Added useFetchPricesOnInterval hook in BackgroundListenerProvider and streamlined price fetching in UserProvider.
.../utils/hooks/useFetchPricesOnInterval.ts & .../utils/hooks/useSyncQueryParamsWithBridgeState.ts	Introduced a hook for fetching crypto prices and updated conditions for syncing query params with bridge state.

🐰✨
A hop, a skip, in code we dip,
Refining touch, not one to slip.
Chains and tokens, neatly aligned,
Fetching prices, in time confined.
A rabbit's work, in bytes and bits,
Crafting bridges, where logic fits.
🌟🐾

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

• X
• Mastodon
• Reddit
• LinkedIn

---

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]

Codecov Report

Attention: Patch coverage is 73.07692% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 48.22997%. Comparing base (92c486f) to head (40d6afa).
Report is 61 commits behind head on master.

❗ Current head 40d6afa differs from pull request most recent head 2879811. Consider uploading reports for the commit 2879811 to get more accurate results

Files	Patch %	Lines
contrib/screener-api/screener/screener.go	30.00000%	5 Missing and 2 partials ⚠️

Additional details and impacted files

@@                 Coverage Diff                 @@
##              master       #2121         +/-   ##
===================================================
- Coverage   48.36450%   48.22997%   -0.13453%     
===================================================
  Files            362         358          -4     
  Lines          26414       26299        -115     
  Branches          83          83                 
===================================================
- Hits           12775       12684         -91     
+ Misses         12315       12293         -22     
+ Partials        1324        1322          -2     

Flag	Coverage Δ
packages	90.52734% <100.00000%> (+0.00925%)	⬆️
promexporter	?

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.

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between fdef3fa and 4d8b64ab8d2b06abb533199e53d5db05420faf0b.

Files selected for processing (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (3 hunks)

Additional comments: 5

packages/synapse-interface/components/buttons/SwitchButton.tsx (2)

• 17-17: The use of template literals for conditional classes is correct. However, ensure that the rotate-90 class does not conflict with other styles or affect the layout unexpectedly in different states or screen sizes.
• 25-54: The SwitchButtonSvg component is well-implemented, separating the SVG rendering from the button logic. This enhances the code's modularity and readability. Ensure that the SVG properties, such as width, height, and viewBox, are appropriately set for your use case and that the icon scales well across different devices.

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

• 27-27: The rearrangement of the className attribute in the OutputContainer component aims to improve the visual layout. Ensure that the removal of mt-[1.125rem] and the reordering of p-md and bg-bgLight classes achieve the desired visual effect without unintended side effects on the component's appearance across different screen sizes.

packages/synapse-interface/pages/state-managed-bridge/index.tsx (2)

• 10-16: The import of new actions (setFromChainId, setFromToken, setToChainId, setToToken) is correctly implemented. These actions are crucial for updating the state related to chain IDs and tokens, enhancing the component's functionality for network switching.
• 87-87: The addition of the SwitchButton component to facilitate switching between chain IDs and tokens is a significant enhancement to the StateManagedBridge component. Ensure that the onClick handler correctly updates the state with the new chain IDs and tokens, and verify that there are no unintended side effects or state inconsistencies after the switch.

Verification successful

---

Based on the extensive context provided from the shell scripts, it's clear that the SwitchButton component's onClick handler is implemented to correctly update the state with new chain IDs and tokens. This is evident from the snippets showing the usage of dispatch functions like setFromChainId, setFromToken, setToChainId, and setToToken within the onClick handler of the SwitchButton component in the StateManagedBridge component. These actions are designed to update the application's state with the new chain IDs and tokens, aligning with the original review comment's concerns about ensuring state updates and avoiding unintended side effects.

Furthermore, the additional context provided does not indicate any issues or unintended side effects arising from the state update process after the switch button is clicked. Therefore, based on the information available, it can be concluded that the implementation of the SwitchButton component and its onClick handler in the StateManagedBridge component meets the requirements mentioned in the original review comment.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Verify that the state updates correctly after the switch button is clicked
# This script is a placeholder for manual verification steps
echo "Manually verify that the state updates correctly after the switch button is clicked, ensuring no unintended side effects."

Length of output: 252

---

---

Script:

#!/bin/bash
# Search for the usage of SwitchButton component and its onClick handler within the StateManagedBridge component or related files
rg "SwitchButton" --context 5

Length of output: 4347

---

Script:

#!/bin/bash
# Specifically search for the onClick handler logic related to the SwitchButton component
rg "onClick" --context 5

Length of output: 278850

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	2879811
Status:	✅  Deploy successful!
Preview URL:	https://9af87ac7.sanguine.pages.dev
Branch Preview URL:	https://fe-switch-networks-button.sanguine.pages.dev

View logs

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between fdef3fa and 862bca693a5fda490137b7953f90d1a4dac8278e.

Files selected for processing (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (2)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between fdef3fa and 62f3528b9a5c9c579b786be6923a3c5d8125e994.

Files selected for processing (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between ab1bc1d and 55fd0fe.

Files selected for processing (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 6aabefa and aca7578.

Files selected for processing (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (3)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx

[coderabbitai]

Review Status

Actionable comments generated: 5

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between aca7578 and bb8a1040808f7390fdd5b9b87236ba4ae2c91798.

Files selected for processing (1)

• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Additional comments: 2

packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (2)

• 33-33: The condition correctly checks if fromChainParam is not null and differs from the current fromChainId. However, it's important to ensure that allowedFromChainIds is always up-to-date and accurately reflects the chains supported by the application. If the list of allowed chain IDs is dynamic or subject to change, consider fetching or updating this list from a centralized source to maintain accuracy.
• 44-44: Similar to the comment on line 33, this condition correctly updates toChainId based on toChainParam. Again, ensure that allowedToChainIds accurately reflects the chains supported by the application and consider strategies for keeping this list current if the supported chains are subject to change.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between aca7578 and 4cc9a62ffa13236e16e2de9676919855e1272db8.

Files selected for processing (1)

• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (1)

• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between aca7578 and 6f41c47.

Files selected for processing (5)

• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (2 hunks)
• packages/synapse-interface/contexts/UserProvider.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (4 hunks)
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1 hunks)
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (2)

• packages/synapse-interface/pages/state-managed-bridge/index.tsx
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts

Additional comments: 7

packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (3)

• 1-1: The import statement for React and createContext is correctly structured, following best practices for importing multiple exports from a single module.
• 9-9: Adding the useFetchPricesOnInterval hook from the utility hooks directory is a good practice, ensuring that the functionality related to fetching prices at intervals is encapsulated within a dedicated hook. This enhances modularity and maintainability.
• 20-20: Integrating the useFetchPricesOnInterval hook within the BackgroundListenerProvider component without passing any arguments or using its return value (if any) suggests that this hook is designed to execute side effects (such as fetching data) independently. Ensure that this hook does not require any input from the component or context to function correctly.

packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1)

• 1-15: The imports and the structure of the useFetchPricesOnInterval hook are well-organized, with clear separation of concerns. Importing useEffect from React and useAppDispatch from the store hooks, along with multiple actions from the priceDataSlice, demonstrates a good understanding of React and Redux patterns.

packages/synapse-interface/contexts/UserProvider.tsx (3)

• 8-13: > 📝 NOTE

This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]

The import statements and the structure of the UserProvider component are correctly maintained, ensuring that necessary hooks and utilities are available for the component's functionality.

• 8-13: > 📝 NOTE

This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]

Removing multiple price fetching calls from the UserProvider component and focusing on dispatching fetchFeeAndRebate simplifies the component's responsibilities and likely centralizes price fetching logic elsewhere (e.g., in the useFetchPricesOnInterval hook). This change aligns with best practices for separation of concerns and modularity. Ensure that all necessary price data is still being fetched as required by the application, possibly by the newly introduced hook.

• 8-13: > 📝 NOTE

This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]

The remaining useEffect hooks within the UserProvider component appear to be correctly implemented, focusing on specific aspects of the application state and user interactions. It's important to ensure that the removal of price fetching calls does not inadvertently affect other functionalities that might rely on the fetched price data.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between a946777 and e57f4de2585715b3ad98456120171888a6bb1a80.

Files selected for processing (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (2 hunks)
• packages/synapse-interface/contexts/UserProvider.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (4 hunks)
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1 hunks)
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
• packages/synapse-interface/contexts/UserProvider.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between ff08e9f and 2269a8ea6fa3914781628de3c5ffff758356eb97.

Files selected for processing (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (2 hunks)
• packages/synapse-interface/contexts/UserProvider.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (4 hunks)
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1 hunks)
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
• packages/synapse-interface/contexts/UserProvider.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 9fefc05 and 40d6afa6c491fc4e576b926b7978ab727bdcc9fc.

Files selected for processing (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (2 hunks)
• packages/synapse-interface/contexts/UserProvider.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (4 hunks)
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1 hunks)
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
• packages/synapse-interface/contexts/UserProvider.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts

[aureliusbtc]

@coderabbitai review

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between f24f3e6 and 1c1c672.

Files selected for processing (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (1 hunks)
• packages/synapse-interface/components/buttons/SwitchButton.tsx (2 hunks)
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx (2 hunks)
• packages/synapse-interface/contexts/UserProvider.tsx (2 hunks)
• packages/synapse-interface/pages/state-managed-bridge/index.tsx (4 hunks)
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts (1 hunks)
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts (1 hunks)

Files skipped from review as they are similar to previous changes (7)

• packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
• packages/synapse-interface/components/buttons/SwitchButton.tsx
• packages/synapse-interface/contexts/BackgroundListenerProvider.tsx
• packages/synapse-interface/contexts/UserProvider.tsx
• packages/synapse-interface/pages/state-managed-bridge/index.tsx
• packages/synapse-interface/utils/hooks/useFetchPricesOnInterval.ts
• packages/synapse-interface/utils/hooks/useSyncQueryParamsWithBridgeState.ts