search

masa-finance / masa-react

Masa React Framework
https://masa.finance
MIT License
10 stars 5 forks source link

Spike: Research Solana Wallet Support in Masa React and/or Masa App #584

Closed H34D closed 2 months ago

H34D commented 3 months ago

We are planning to deploy smart contracts to solana. To make sure we can actually use the contracts from our frontend with the given infrastructure we must research the different wallet types available for solana.

Acceptance Criteria

Output

List of most used Solana Wallets

Phantom

The most used Solana wallet on the ecosystem is Phantom. It could be compared with Metamask on its dominance on the market share. Aside from Solana, it has integration with:

Solflare

There were some competitors back in 2021 to Phantom like Sollet eventually died off but one of the oldest that stayed strong in the community is Solflare. Lost the initial battle with Phantom due to UI/UX but still has a following.

Another thing worth noting is that it is Solana only, not like Phantom.

Ledger

Although this is a hardware wallet, it has its own wallet application to use across the web. Phantom and Solflare provide integration with Ledger but having Ledger on its own integrated into our apps might be worth considering.

How to proceed

First of all we must update rainbowkit and wagmi to the latest version. See #590

[!WARNING] First of all we must figure out how to connect Solana wallets to our frontend

Based on the previous decision making on which wallets to support, I'm assuming that we would like to offer the most popular one as we are doing with Metamask for the SBT app. Thus my suggestion would be to just focus integrating Phantom since it is the most popular and it's already supported on Rainbowkit (Phantom's how-to, Rainbowkit's mention of Phantom).

Implementation steps (high-level)

  1. Integrate Solana into the Masa-SDK
  2. Add Solana as a valid chain/network on the Masa-React repo
  3. Add Solana to the SupportedNetworks list
  4. On the SBT app, add Phantom to the list of allowedWallets at src/layout/Providers.tsx
juanmanso commented 3 months ago

🟢 [UPDATE] Adding Phantom to our list of accepted and available wallets

First time working on SDK + Masa-React + SBT integration repos. In this case, I added the Phantom wallet but I'm not able to connect as shown on the video below. I think I'm not configuring the connecter well, will follow that path
H34D commented 3 months ago

🟢 [UPDATE] Adding Phantom to our list of accepted and available wallets

First time working on SDK + Masa-React + SBT integration repos. In this case, I added the Phantom wallet but I'm not able to connect as shown on the video below. I think I'm not configuring the connecter well, will follow that path

there is no configuration for solana networks on the sdk, therefore we can not connect to them right now. I am working on that right now

H34D commented 3 months ago

I think you must fix this with synthetic data somehow (in the time being)

juanmanso commented 3 months ago

I think you must fix this with synthetic data somehow (in the time being)

In other words, mocking the SDK, right?

juanmanso commented 3 months ago

Since I'm having trouble figuring it out from just looking and browsing the codebase, I'm gonna look for some PR where we add a new wallet to know how to do it.

DISCLAIMER: I'm not focusing on Solana itself since Phantom also works for ETH. When solana gets finally added to the SDK (SDK#334 we shall test this completely)

H34D commented 3 months ago

In other words, mocking the SDK, right?

probably yes, always keep in mind. a spike must not necessarly yield code or a PR but rather a solid base for decision making so it can be estimated or implemented easier in the future.

juanmanso commented 3 months ago

In other words, mocking the SDK, right?

probably yes, always keep in mind. a spike must not necessarly yield code or a PR but rather a solid base for decision making so it can be estimated or implemented easier in the future.

Okay, so I'll be updating the list of wallets to have in mind in this ticket's description and continue understanding how the integration of said wallets would work

juanmanso commented 3 months ago

Below you can find the same output of the spike I added to the Description of this ticket (sharing it here just to freeze it in case it changes).

Moving this to review since I find this work to be done. Nonetheless, I'd continue digging deeper into Masa-React to understand how the actual implementation would look like (due to my lack of context of this side of the application)

Click to toggle expand/collapse > # Output > > ## List of most used Solana Wallets > > ### Phantom > The most used Solana wallet on the ecosystem is [Phantom](https://phantom.app/). It could be compared with Metamask on its dominance on the market share. Aside from Solana, it has integration with: > - Ethereum > - Polygon > - Bitcoin Taproot > - Bitcoin Native Segwit > > ### Solflare > There were some competitors back in 2021 to Phantom like Sollet eventually [died off](https://coinledger.io/tools/best-solana-wallet#what-happened-to-sollet-) but one of the oldest that stayed strong in the community is [Solflare](https://solflare.com/). Lost the initial battle with Phantom due to UI/UX but still has a following. > > Another thing worth noting is that it is Solana only, not like Phantom. > > ### Ledger > Although this is a hardware wallet, it has its own wallet application to use across the web. Phantom and Solflare provide integration with Ledger but having Ledger on its own integrated into our apps might be worth considering. > > > ## How to proceed > Based on the previous decision making on which wallets to support, I'm assuming that we would like to offer the most popular one as we are doing with Metamask for the SBT app. Thus my suggestion would be to just focus integrating Phantom since it is the most popular and it's already supported on Rainbowkit ([Phantom's how-to](https://docs.phantom.app/library-integrations/rainbowkit), [Rainbowkit's mention of Phantom](https://www.rainbowkit.com/docs/custom-wallet-list#phantom)). > > ### Implementation steps (high-level) > > 1. Integrate Solana into the Masa-SDK > 2. Add Solana as a valid chain/network on the Masa-React repo > 3. Add Solana to the SupportedNetworks list > 4. On the SBT app, add Phantom to the list of `allowedWallets` at `src/layout/Providers.tsx`
H34D commented 3 months ago

First time working on SDK + Masa-React + SBT integration repos. In this case, I added the Phantom wallet but I'm not able to connect as shown on the video below. I think I'm not configuring the connecter well, will follow that path

i rewatched the video and i think its because we are not running the lastest wagmi and viem there is a PR for that that got stale: https://github.com/masa-finance/masa-react/pull/514

H34D commented 3 months ago

i have tried it myself and it does not seem to detect the phantom wallet extension at all on chrome in the current version of rainbowkit/wagmi:

image

H34D commented 3 months ago

@juanmanso have you tested connecting a ledger to the phantom wallet? I added this aspect to the acceptance criteria.

juanmanso commented 3 months ago

@juanmanso have you tested connecting a ledger to the phantom wallet? I added this aspect to the acceptance criteria.

I haven't since I got no Ledger myself 😞

H34D commented 3 months ago

I haven't since I got no Ledger myself 😞

ok, i tested that, it works well with Phantom

H34D commented 3 months ago

@juanmanso follow up tickets missing

juanmanso commented 3 months ago

Closed with these follow-up tickets:

juanmanso commented 3 months ago

Reopening the issue due to this finding:

While working on adding Masa as a valid testnet on new implementation of Wagmi v2 (masa-finance/masa-react#590), I found that Solana is not supported by wagmi/chains:

Furthermore, when reading deeper into Phantom's doc about Rainbowkit there's a was a clear reference that it would only work on EVM-compatible chains, thus Ethereum and Polygon. Support for Solana chain is not there since wagmi is strictly EVM-compatible and Solana goes away from that.

My conclusion is that this task is no longer blocked by Rainbowkit + Wagmi + Viem update to 2.x, but it would require a separated implementation such as @solana/wallet-adapter-react. Will sync with the team to groom next steps

juanmanso commented 3 months ago

From other projects that support both ETH and SOL I found they either:

Either way solutions are not straight forward as it seemed, so we need to reassess priorities :disappointed:

juanmanso commented 3 months ago

As pointed out by @H34D this depends on how we want to handle the UX on the app. Currently we connect the wallet first and then select the network.

With the current findings, we might need to first have the user select the network and then give them the connect button so they select wallets.

For this UX/UI change to be determined, we need to sync with @giovaroma to find a solution on then move forward with implementation.

juanmanso commented 3 months ago

As pointed out by @H34D this depends on how we want to handle the UX on the app. Currently we connect the wallet first and then select the network.

With the current findings, we might need to first have the user select the network and then give them the connect button so they select wallets.

For this UX/UI change to be determined, we need to sync with @giovaroma to find a solution on then move forward with implementation.

In parallel, I'll look at ways to connect any solana wallet into our frontend (with emphasis in supporting Phantom which is the one we found most popular)

obasilakis commented 3 months ago

As per solana's docs, I'm trying out dynamic. Looks promising so far.

obasilakis commented 3 months ago

As per solana's docs, I'm trying out dynamic. Looks promising so far.

It looks like it's working fine. The only issue is that it's a paid service. $99 for the first 2k MAUs and $0.05/MAU after that.

juanmanso commented 3 months ago

Joining to pair and try a free alternative here

juanmanso commented 3 months ago

Made a spike based on this docs integrating @solana/wallet-adapter-wallets:

Made it work but it diverges from our own UX on the SBT app:
juanmanso commented 3 months ago

Summary loom video to detail current issue (1.5x or more recommended 😄):

https://www.loom.com/share/111851fc49bb446c87eaf1c1de224d7a?sid=81cc0b47-7e23-444b-b4d3-fca3b7c5aec9

juanmanso commented 3 months ago

Added blocked label hoping it gives more visibility

juanmanso commented 2 months ago

Since it seems that we are gonna move forward with the free option, I'm trying to make the connection work on masa-react.

As it can be seen on the image below, the UI seems to be working but when clicking the Select Wallet button, nothing happens:

Image

It may be due to the initiation of the providers, where we are passing an empty wallet's array whereas the example passes a new UnsafeBurnerWalletAdapter. We are not using it because by using it we break the Storybook receiving the following error message:

Image

We are still investigating what's going on with this issue and will update soon

juanmanso commented 2 months ago

🟢 [UPDATE]

Fixed the webpack errors but still not popping up the Phantom wallet.

First I tried with this stack overflow suggestion to change the webpack.config.js. Tried everything and no success there. Then I asked myself if it might be a storybook issue rather than a global webpack thing (which would come up eventually but I'm testing on Storybook first).

So, I found this other stack overflow answer, that suggested to change the .storybook/main.js file which I did and errors are no longer showing.

Now, I have to figure out why Wallet connection is not showing on Phantom

juanmanso commented 2 months ago

Closing this task since we are not gonna make it to the deadline since we won't get the definitions in time