on a react native app (bare) I open wallet connect modal, choose the wallet the app crashes (ONLY iOS) - Stack Overflow

admin管理员组

文章数量:1313121

trying just to connect this app to a wallet, following the docs (), got the wallet connect button, I press it, choose the wallet, it crashes. It does work on android emulator and android physical device, it does not on iPhone emulator and physical device.

set up: npx @react-native-community/[email protected] init waak --version 0.76.0 npm install @walletconnect/modal-react-native npm install @react-native-async-storage/async-storage react-native-get-random-values react-native-modal react-native-svg @react-native-community/netinfo @walletconnect/react-native-compat

code:

//App.tsx
.......
//WALLET CONNECT
import '@walletconnect/react-native-compat';
import { WalletConnectModal } from '@walletconnect/modal-react-native';
import { useWalletConnectModal } from '@walletconnect/modal-react-native';

//WALLET CONNECT SETTINGS
const APP_WALLET_CONNECT_PROJECT_ID="...."
const   providerMetadata  = {
    name: 'you project name',
    description: 'YOUR_PROJECT_DESCRIPTION',
    url: '/',
    icons: ['/'],
    redirect: {
      native: 'com.dapp://', 
    },
  };
const  sessionParams = {
    namespaces: {
      eip155: {
        methods: [
          "eth_requestAccounts",
          "eth_accounts",
          "eth_chainId",
          "eth_blockNumber",
          "eth_getBalance",
          "eth_getStorageAt",
          "eth_getTransactionCount",
          "eth_getBlockByNumber",
          "eth_getBlockByHash",
          "eth_getTransactionByHash",
          "eth_getTransactionReceipt",
          "eth_sendTransaction",
          "eth_signTransaction",
          "eth_sign",
          "personal_sign",
          "eth_signTypedData",
          "eth_signTypedData_v4",
          "wallet_switchEthereumChain",
          "wallet_addEthereumChain",
          "wallet_watchAsset",
          "eth_call",
          "eth_estimateGas",
          "eth_gasPrice",
          "eth_feeHistory",
          "net_version",
          "eth_subscribe",
          "eth_unsubscribe",
          "eth_getLogs",
          "web3_clientVersion",
          "eth_mining",
          "eth_hashrate",
          "eth_getCode",
          "eth_protocolVersion"
        ],
        chains: ['eip155:31337'],
        events: [
          "chainChanged",
          "accountsChanged",
          "disconnect",
          "connect",
          "message",
          "networkChanged"
        ],
        rpcMap: { },
      },
    },
  };
.....
function App(): React.JSX.Element {
  const { isOpen, open, close, provider, isConnected, address } = useWalletConnectModal();
.....
  return (
    <NavigationContainer>
      <Tab.Navigator>
....
      {/* Modal for Connection */}
      <Modal animationType="slide" transparent={true} visible={modalVisible}>
        <View style={styles.modalContainer}>
          <View style={styles.modalView}>
            <Text style={styles.modalTitle}>Wallet Not Connected</Text>
            <Pressable style={styles.connectButton} onPress={connect}>
              <Text style={styles.buttonText}>Connect</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <WalletConnectModal projectId={APP_WALLET_CONNECT_PROJECT_ID} providerMetadata={providerMetadata} sessionParams={sessionParams} />
    </NavigationContainer>
);
}
....
export default app;


//index.js
import 'react-native-get-random-values';
import '@walletconnect/react-native-compat';


import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppDelegate.mm
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTLinkingManager.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"dapp";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

//info.plist:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" ".0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>dapp</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>com.dapp</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>com.dapp</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>$(CURRENT_PROJECT_VERSION)</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>metamask</string>
    </array>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <false/>
        <key>NSAllowsLocalNetworking</key>
        <true/>
    </dict>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) needs access to your Camera.</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>UIBackgroundModes</key>
    <array>
        <string>fetch</string>
        <string>remote-notification</string>
        <string>processing</string>
    </array>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>arm64</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>


//app.json
{
  "name": "dapp",
  "displayName": "dapp"
}

package.json
{
  "name": "dapp",
  "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": {
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@walletconnect/modal-react-native": "^1.1.0",
    "@walletconnect/react-native-compat": "^2.17.5",
    "react": "18.3.1",
    "react-native": "0.76.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "^2.20.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-modal": "^13.0.1",
    "react-native-safe-area-context": "^5.1.0",
    "react-native-screens": "^4.5.0",
    "react-native-svg": "^15.11.1",
    "react-native-vision-camera": "^4.6.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
    "@react-native/babel-preset": "0.76.0",
    "@react-native/eslint-config": "0.76.0",
    "@react-native/metro-config": "0.76.0",
    "@react-native/typescript-config": "0.76.0",
    "@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.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Xcode stack trace:

enter image description here

enter image description here

本文标签：