Using @alephium/web3-wallet in react-native fails

[gilles-hemmerle]

Context

I'm currently trying to implement the bridge in sezame wallet (react native application).
I imported wormhole-sdk and I try to use the bridge directly through the wallet.

I need to use transferLocalTokenFromAlph which expects a SignerProvider as a first params. So I figured out in your documentation that we can create a SignerProvider from the PrivateKeyWallet class which is exposed in the @alephium/web3-wallet project.

Environnement

• node 18.19.0
• yarn 1.22.21

What I did

I imported the following dependencies :

    "@alephium/web3": "^0.42.0",
    "@alephium/web3-wallet": "^0.42.0",
    "@alephium/wormhole-sdk": "^0.2.5",

However, when I want to import the PrivateKeyWallet like this :

import {PrivateKeyWallet} from '@alephium/web3-wallet';

I get the following error when running the app in a ios device

npx react-native start --reset-cache and then executing the app : yarn ios

error: Error: While trying to resolve module @alephium/web3-wallet from file sezame/wallet-react-native/src/screens/bridge/bridge-screen.tsx, the package sezame/wallet-react-native/node_modules/@alephium/web3-wallet/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (sezame/wallet-react-native/node_modules/@alephium/web3-wallet/dist/alephium-web3.min.js. Indeed, none of these files exist:

Repo to desmonstrate the issue

https://github.com/gilles-hemmerle/alephium-web3-wallet-issue

Questions

• Anyone does have the same issue?
• Did you already try to implement the bridge in your rect native wallets, if yes, do you have a git showing this?
• I'm using the womhole sdk transferLocalTokenFromAlph function. The first argument requires a SignerProvider. But if I pass a PrivateKeyWallet, it complains : 'PrivateKeyWallet' is not assignable to the 'SignerProvider' type parameter. Howver, in the source files I see class PrivateKeyWallet extends SignerProviderSimple and abstract class SignerProviderSimple extends SignerProvide, so transferLocalTokenFromAlph should accept a PrivateKeyWallet, do I have some inompatibility between the dependencies i'm using?

[polarker]

@nop33 @mvaivre Could you please help?

[nop33]

@gilles-hemmerle maybe having a look at our own React Native mobile wallet will give you some help? https://github.com/alephium/alephium-frontend/tree/next/apps/mobile-wallet

[nop33]

It might be that the entry points of the @alephium/web3-wallet package need to be changed to match the ones in the @alephium/web3 package.

Related PR: #352

[nop33]

To validate this hypothesis, I would suggest @gilles-hemmerle to find the package.json file inside the node_modules folder of their React Native project and change the entry points to be:

  "main": "dist/src/index.js",
  "browser": "dist/alephium-web3-wallet.min.js",
  "exports": {
    "node": "./dist/src/index.js",
    "default": "./dist/alephium-web3-wallet.min.js"
  },

and then launch the React Native dev server again and see if the issue persists.

[polarker]

@nop33 The changes you introduced work well with our mobile wallet, right?

[nop33]

I was waiting for a new web3 version to be released on npm, I havent' had the chance to update yet. Will do it later today. But based on my tests here, it works: #352 (comment)

[polarker]

I was waiting for a new web3 version to be released on npm, I havent' had the chance to update yet. Will do it later today. But based on my tests here, it works: #352 (comment)

We have released 0.42.0 today. Please help us give it a test!

[mvaivre]

Successfully tested 0.42.0 on mobile and explorer: alephium/alephium-frontend#619
As expected, this allowed us to remove node polyfilling from the explorer.
Will test more with our other Apps, but so far so good ;)

[gilles-hemmerle]

@gilles-hemmerle maybe having a look at our own React Native mobile wallet will give you some help? https://github.com/alephium/alephium-frontend/tree/next/apps/mobile-wallet

Thanks, did you integrate the bridge in your wallet actually?

[gilles-hemmerle]

Successfully tested 0.42.0 on mobile and explorer: alephium/alephium-frontend#619 As expected, this allowed us to remove node polyfilling from the explorer. Will test more with our other Apps, but so far so good ;)

This minimal repo is working in your end? Can I ask you which node / npm / yarn version you are using?
https://github.com/gilles-hemmerle/alephium-web3-wallet-issue

[polarker]

@gilles-hemmerle We will test the bridge SDK tomorrow. That one might need to be updated to support react-native

[gilles-hemmerle]

Have you been able to test ?

I'm still strugling using PrivateKeyWallet in a react native app.
And, as your bridge sdk required a valid signer, I am unable to integrate the bridge in the wallet.

Plus I tried to check in your mono repo wallet, and it appears you are not using PrivateKeyWallet to create a signer from a private key (which seems the only way I could see to use the existing bridge sdk).

I wanted to finalize the bridge implementation before the event this weekend but I'm strugling to implement the sdk in a react native app.

[polarker]

Hey @gilles-hemmerle , thanks for the ping. Sorry that I have forgotten this due the Rhone upgrade. Let me do it right now.

[nop33]

So there are 2 problems with @alephium/web3-wallet.

The first one is that the name of the Webpack minified output is alephium-web3-wallet.min.js, but in the package.json it is referred wrongly as alephium-web3.min.js.

The second is that Webpack was not being executed so the minified file that RN expected was never there.

This PR should be addressing both issues: #377

[nop33]

@gilles-hemmerle 1.0.3 should be addressing the issue you had with @alephium/web3-wallet. However, we are facing another known issue now: alephium/alephium-frontend#683

[nop33]

@gilles-hemmerle can you check if 1.0.5 works for you too?

[gilles-hemmerle]

Yes seems to work, I'm now able to create a PrivateKeyWallet successfully, thanks!
I'll check if I can use it with the bridge sdk soon.