feat: hub adapter and refactor wallets store

[yeager-eren]

Summary

Add adapter to use hub providers alongside legacy providers.

This PR includes adding hub adapter in /react/ and refactor wallets store. From now on, we should be able to develop with our new wallet management system, Hub.

How did you test this change?

You can test the changes by running yarn dev:widget.

Details on how to review and what to test has been written in next section.

Notes for reviewers

Store

Assignee: @Ikari-Shinji-re

We had a separate store for wallets, in order to continue our work to migrate our stores to a single store and make current stores a slice of that, I completely removed wallets store and made it an slice.

The structure is mostly same, but there are one major difference. Previously, we had a connectedWallets which each of them had a balance itself. To simplify the process, I added a separate _balances and keep them separate from connectedWallet.

This change helps us do calculation much simpler (like calculating total balances) and treat this part differently, for example on connecting wallet it has two phases, one for adding the wallet to connectedWallets and another action for getting balances.

Other notable changes

• We were slicing tokens list to simulate pagination (to not showing a long scrollbar), I removed it since it was buggy and also make it more complicated without bringing much value.
• I'm keeping the raw balance data in store, which means whenever we need to show balance to user, we need to make sure we are using shiftedBy in order to show a correct number to user. There were places like Max button needs to be updated which I did. I just mentioned this, maybe there are more places like this I'm unaware.

Area of changes

Mostly embedded/src/store, you can take a look at embedded as well and they will be updating usage of wallets store.

Also removing balance from rango-preset is related to wallets store.

AutoConnect

Assignee: @Ikari-Shinji-re

For having auto connect in Hub, in addition to wallet type/name, we need namespace as well. So I added a separate key in storage.

I tried to reuse the legacy codes as much as I can, eagerConnectHandler, LastConnectedWalletsFromStorage, same filenames are some effort to achieve this.

LastConnectedWalletsFromStorage is actually a shared interface to interact with both legacy and hub storage.

Area of changes

You can start by reviewing react/src/legacy/, I tried to make the legacy code reusable by separating the logic into autoConnect, useAutoConnect. Auto connect is calling in useLegacyProvider.

And then you can start taking a look at react/src/hub/, I tried to use same filename and structure in legacy to make it more consistent and understandable.

When you are reviewing this, you will notice there are some new functions like LastConnectedWallets which are actually a general solutions on legacy codes that needs to be reused in adapter.

These files should be interested to you:

• autoConnect,ts
• constancts.ts
• lastConnectedWallets.ts
• useHubAdapter.ts

In Future

• Having a migration for migrating legacy auto connect storage to hub storage

Adapter

__Assignee: @RyukTheCoder __

In previous PRs, we've prepared the filesystem structure for adding an adapter. In this PR, We've added a new /react/src/hub directory alongside /react/src/legacy.

The idea here is keeping the legacy interface to not needing to update clients (like embedded), to achieve this I created a new hook called useProviders which provides the legacy (ProviderContext) at the end. It simply will load both hub and legacy providers and it's switch between them. For example you are going to use connect in embedded, when it's going to run, it will check the request wallet is a legacy provider or hub provider, then it will call the method on that one.

Each legacy and hub has a hook to implement the legacy interface (ProviderContext), they are useLegacyProviders and useHubProviders.

For backward compatibility, there is an special namespace called DISCOVER_MODE. Alongside DISCOVER_MODE, network will be set as well. here we are manually matching networks to namespaces. This will help us keep the legacy interface and have what hub needs as well. Explained some more details on next section.

Other notable changes

• To call a hub provider, having namespace is required. Since the legacy hasn't this concept, we only have network there. Adapter has a mapping between Networks and Hub's Namespace. Take a look at discoverNamespace to see the mapping. That would be great if @RanGojo check this mapping as well.
• Network can not be passed to wallet's instances (e.g. window.ethereum) directly, for example for switching network, we need to convert Network enum to chain id. take a look at tryConvertNamespaceNetworkToChainInfo in this regard.

Area of changes

Hub enabled in widget/app/src/App.tsx, and there are some update regarding to connect, it needs to have DISCOVER_MODE ( e.g widget/embedded/src/QueueManager.tsx).

Adapter has been written in /react/src/hub. Some parts of the changes is for auto connect. It separately has been assigned to @Ikari-Shinji-re .

Changes to /react/src/legacy are mostly for auto connect feature.

Breaking Changes

• Second param for connect in /react has changed. I updated the usage in embedded.

Phantom

__Assignee: @RyukTheCoder __

Phantom has been migrated to hub and also in addition to Solana namespace, EVM namespace has been added too.

Area of changes

You can take a look at /provider-phantom.

Other changes

• Hub can be enabled and disabled by setting configs.isExperimentalEnabled. I made it enable for now.

TODO

• add package.json for subpath and remove utils from /core/mod.ts
• Write some guide on hub

In Future

• Check hot reload for multiple entrypoins, seems Parcel doesn't support ESM exports for hot reload properly.
• suggestAndConnect hasn't implemented in Hub adapter.
• hub adapter is usingcanSwitchNetworkTo, canEagerConnect, getSigners, getWalletInfo().supportedChains, getInstance from legacy provider.

Related PRs

• feat: introducing hub, our new wallet management #826
• test: add tests for wallets/react #824
• feat:wallet v1 (a.k.a Hub) #623

[yeager-eren]

this can be a breaking change since the hook is public. i don't know why we'd got a second param and didn't use in implementation.

[RanGojo]

It's needed in dApp. Please make sure to not break it.

[yeager-eren]

Thanks for the heads up. I opened a PR there.

[yeager-eren]

It seems the retry function for fetching balances hasn't been implemented. After a wallet connects, we send a request to the server to retrieve the balance of the connected wallet. We use a batch endpoint to get the balances across multiple blockchains in a single request and response. If the server is unable to fetch the balance for any blockchain's address within the expected time, it returns an error for that specific blockchain in the response. We should handle this by checking for errors and retrying the balance fetch for the failed blockchains.

You're right, I'd removed the retry logic by mistake. I've added a retry in my last commit (0879cd000eb4a36a44a26775873fd6158d4cc307).

[yeager-eren]

When a wallet is connected but no blockchain is selected, and we navigate from the home page to the token and blockchain selection page, there's a noticeable lag during the transition and when rendering the token list. To mitigate this, we leveraged the balances stored in the wallet store, which helps avoid this issue. The store values are updated when wallets are connected or disconnected, and accessing an asset has a time complexity of O(1).

1.mp4

Good catch. I fixed it in e99356d

[yeager-eren]

When multiple wallets are connected with the same account, disconnecting one of them results in the balance for that address being completely removed, even though other wallets with the same account are still connected.

2.mp4

This should've been fixed in my latest commit e99356d

[RanGojo]

I didn't check the code but I've conducted a quick test and identified a few issues:

• The infinite loading on the token list isn’t working as expected. (check the attached image)
• Wallet balances are inconsistent across different pages (home page, token list, etc.).(check the attached image)
• Wallet pre-selection confirmation isn’t functioning as intended. (It seems it's already reported by @Ikari-Shinji-re)
• In the namespace selection, we should display the namespace title instead of the chain title for Phantom. It's not similar to Ledger which user connects to a single chain.
• Additionally, we had agreed to add switch chain subscribe to the EVM namespace in this PR, but I couldn’t find any relevant changes. Can you share related changes link?
• I'm unclear on why we used hard-coded values for discoverNamespace. I believe this should be managed by passing parameters (meta) to the hub, rather than using hard-coded ones.
• It would be great if you could separate PRs for different changes, like the balance store or other unrelated parts, to simplify testing.

I've attached some images for the related issues. Let me know if you need any further explanation.

Confirm wallet incorrect wallet pre-selection:

Wrong infinite loader initial state:

Some NaN balances:

[yeager-eren]

8aae1ea

Fixed in 8aae1ea

[yeager-eren]

@RanGojo Thanks. I fixed the NaN bug in my last commit ab16aea.
The rest of items have been discussed offline.