Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new ChainConnect #181

Merged
merged 35 commits into from
Dec 18, 2023
Merged

Add new ChainConnect #181

merged 35 commits into from
Dec 18, 2023

Conversation

abefernan
Copy link
Contributor

@abefernan abefernan commented Nov 20, 2023

This PR replaces the old <ChainSelect /> component with a new <ChainConnect />.

The old component:

  • Displayed a dropdown with the names of all the chain-registry chains.
  • Connected to a network by clicking on its name on the dropdown, this would take a little time since the data needs to be downloaded.
  • Customized the parameters of the network (chainID, rpcNode, etc.), that would appear on the URL whether they would customized or not.

The new component:

  • Displays a modal window with all the networks from the chain-registry, separated between mainnets and testnets, where you can see both the (registry) name of the network and its icon. If you hover over a network, you can see a card with a bit more data.
  • When clicking on a network, you see a confirmation screen that allows you to see the network you're leaving and the one you're joining, and instantly connects you to the new one on confirmation.
  • All the networks from the registry are cached on localStorage, and updated if there is a new version on the registry's github. All the chains' data is available in memory when the app starts, loaded from localStorage.
  • The data from localStorage is loaded from the registry's github, but the associated files for each network are loaded from the JSDelivr CDN to avoid API limits.
  • You can add several custom chains, giving them a locally (to your browser) unique name. This serves for tweaking gas prices for the registry's networks, but also to connect to a local simapp chain. Custom networks are shown before mainnets and testnets on the modal, and can be deleted from the hover card.
  • The 4 most recently connected-to chains can be seen on the modal. The currently connected chain is the first one on the list of recents, and highlighted in green color.
  • All of the networks can be filtered by an input field on the top of the modal making it easier to see the network you're looking for.
  • The main view of the modal is the "Choose chain" tab, and the other "Custom chain" tab is the form that allows you to customize the current chain, or the current to-connect-to chain if you come from the confirmation screen.
  • The URL only shows params that are customized, meaning only those that are different from the same chain on the registry, instead of showing them all. Completely custom chains show all the params on the URL.

@abefernan abefernan self-assigned this Nov 20, 2023
Copy link

vercel bot commented Nov 20, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
cosmos-multisig-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 18, 2023 3:53pm

@abefernan abefernan requested a review from hashedone November 20, 2023 14:10
Copy link

@hashedone hashedone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - went through the code as much as I can, and clicked around the UI - it seems to work as described.

abefernan and others added 3 commits December 12, 2023 15:27
Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com>
@webmaster128 webmaster128 merged commit af2cd8d into feat/add-shadcn Dec 18, 2023
4 of 5 checks passed
@webmaster128 webmaster128 deleted the feat/new-chainselect branch December 18, 2023 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants