Mobild-sdk doesnt working on react-native-cli

Coinbase Wallet
1

I develop dapp with react-native-cli setting.

it doesnt working. Is there anyway i can use api in react-native-cli ?

2

Welcome to Coinbase Developer Forum, @dappBaby! We’re happy to help, but first we’ll need you to provide us with the following information so that we can further assist you with the issue:

  • If you are receiving any error messages, can you copy the text of the error messages into this thread?
  • Can you provide a screenshot to demonstrate the problem you are encountering?
  • Have you tried our wrapper libraries and modules for React Native to your Dapp?

Once you send us the information requested above, we’ll work to quickly address this issue. We appreciate your patience and understanding. Thank you!

3

Hi bazinga!

before I upload things you request, is there docs how can i use library in react native ?

this link doesnt help

4

this my full code

import React, { useEffect } from "react";
import type { PropsWithChildren } from "react";
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from "react-native";
import "react-native-url-polyfill/auto";
import { Colors, Header } from "react-native/Libraries/NewAppScreen";
import "./shim";

import MetaMaskSDK from "@metamask/sdk";
import { Linking } from "react-native";
import BackgroundTimer from "react-native-background-timer";

import { configure } from "@coinbase/wallet-mobile-sdk";
import { WalletMobileSDKEVMProvider } from "@coinbase/wallet-mobile-sdk/build/WalletMobileSDKEVMProvider";

const provider = new WalletMobileSDKEVMProvider({
  jsonRpcUrl: "https://goerli.infura.io/v3/e43885183522441b846318ad8a3060ca",
});

configure({
  callbackURL: new URL("https://myappxyz.com/wsegue"),
  hostURL: new URL("https://wallet.coinbase.com/wsegue"),
  hostPackageName: "org.toshi",
});

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

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

  const sdk = new MetaMaskSDK({
    openDeeplink: (link) => {
      Linking.openURL(link);
    },
    timer: BackgroundTimer,
    dappMetadata: {
      name: "React Native Test Dapp",
      url: "example.com",
    },
  });

  const getCoinbase = async () => {
    const address = await provider.request({
      method: "eth_requestAccounts",
      params: [],
    });
    console.log(address);
  };

  const ethereum = sdk.getProvider();

  const accounts = async () => {
    const res = await ethereum.request({ method: "eth_requestAccounts" });
    console.log(res);
  };

  useEffect(() => {
    sdk.getProvider();
    // accounts();
  }, []);
  // const provider = new ethers.providers.Web3Provider(ethereum);

  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="metmask" onPress={() => accounts()} />
          <Button title="coinbase" onPress={() => getCoinbase()} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: "400",
  },
  highlight: {
    fontWeight: "700",
  },
});

export default App;
5

I face 2 errors now.

Error: Failed to create a new MMKV instance: The native MMKV Module could not be found.

Invariant Violation: “pot3” has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
6

this is my development setting

ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin21]
watchman 2023.01.30.00
node 16.19.0

here is my pacakge.json

{
  "name": "pot",
  "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",
    "postinstall": "rn-nodeify --install 'crypto,process,stream,events' --hack"
  },
  "dependencies": {
    "@coinbase/wallet-mobile-sdk": "^1.0.4",
    "@metamask/sdk": "^0.1.0",
    "crypto": "^1.0.1",
    "events": "^3.3.0",
    "expo-modules-core": "^1.1.1",
    "process": "^0.11.10",
    "react": "18.2.0",
    "react-native": "0.71.2",
    "react-native-background-timer": "^2.4.1",
    "react-native-crypto": "^2.2.0",
    "react-native-randombytes": "^3.6.1",
    "react-native-url-polyfill": "^1.3.0",
    "readable-stream": "^1.0.33",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "web3": "^1.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "rn-nodeify": "^10.3.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  },
  "react-native": {
    "crypto": "react-native-crypto",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "stream": "stream-browserify"
  },
  "browser": {
    "crypto": "react-native-crypto",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "stream": "stream-browserify"
  }
}

before i test coinbase wallet sdk, i develop metamask sdk first.

7

Hi dappBaby! Thank you for the information you provided. To further help you with your concern, we suggest you to open a support ticket with our team with the following details:

  • Please provide the code snippet you provided here to demonstrate the problem you are encountering. Kindly ensure to exclude your API credentials for security reasons.

Upon creating a support ticket, kindly include the link of this forum so that the team will be aware that it’s you. Additionally, please use the email address associated with your Coinbase account.

Have a nice day!

1 Like
8

Thank you for your reply.

Can I attach the link to git repository on support ticket ?

9

You are very much welcome, @dappBaby!

Yes, you can attach the link to GitHub when you open a support ticket.

Have a nice day!

1 Like