Integrate the wormhole sdk in react native app

[gilles-hemmerle]

I'm trying to import the transferLocalTokenFromAlph function from the @alephium/wormhole-sdk in a react native application.

Have you already tried or do you have plan to make it work?

On my side I get the following error :

Version :

• "@alephium/wormhole-sdk": "^0.3.0",

If no plans, I will have to rewrite stuff directly in the sezame wallet, which I would avoid in order not having duplicate code.

How to reproduce :

package.json

{
  "name": "AppDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@alephium/web3-wallet": "^1.0.5",
    "@alephium/wormhole-sdk": "0.2.5", // Same with 0.3.0
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-quick-crypto": "0.7.0-rc.8"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.84",
    "@react-native/eslint-config": "0.74.84",
    "@react-native/metro-config": "0.74.84",
    "@react-native/typescript-config": "0.74.84",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "yarn@3.6.4"
}

App.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {install} from 'react-native-quick-crypto';
install();

import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
  View,
} from 'react-native';

import {Colors, Header} from 'react-native/Libraries/NewAppScreen';

// ----------------- Fails as soon as I import this -------------
import { 
  transferLocalTokenFromAlph,
  CHAIN_ID_ETH,
  MAINNET_ALPH_MINIMAL_CONSISTENCY_LEVEL,
  } from '@alephium/wormhole-sdk';
// -------------------------------------------------------------

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const createSigner = () => {
    // Code to create a signer
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Button
            title="create a signer"
            color={'red'}
            onPress={createSigner}></Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
export default App;

[Lbqds]

We haven't tried using wormhole-sdk in a React Native env yet. I just tested it and indeed there are some issues. I will try to fix these issues this week. Thanks for the report!

[Lbqds]

Hey @gilles-hemmerle, could you try wormhole-sdk v0.3.1-rc.2? Here is an example(based on your repo): https://github.com/Lbqds/react-native-wormhole-sdk-example. Please note that you also need to add a resolver config to metro.config.js: https://github.com/Lbqds/react-native-wormhole-sdk-example/blob/6329474004f9b6f5386a8bfd4e47d852209035d3/metro.config.js#L9.

[gilles-hemmerle]

Seems to work with this version, thanks a lot! This ticket is resolved.

PS: Will do some test to finalize a transferLocalTokenFromAlph transaction asap and I will give you some feedback as soon as I am able to finalize my transaction.