[bug]: on iOS I choose the wallet and the app crashes

Open thegoodfellow opened this issue 1 year ago • 1 comments

Description

trying just to connect this app to a wallet, following the docs (https://docs.reown.com/advanced/walletconnectmodal/about?platform=react-native), 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.

WalletConnect Modal SDK version

1.1.0

Output of `npx react-native info`

Xcode stack trace:

Expo Version (if applies)

No response

Steps to reproduce

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

Snack, code example, screenshot, or link to a repository

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: 'https://your-project-website.com/',
    icons: ['https://your-project-logo.com/'],
    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" "http://www.apple.com/DTDs/PropertyList-1.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"
  }
}

Jan 31 '25 16:01 thegoodfellow

hey @thegoodfellow 👋 can you check if commenting this lines work?

https://github.com/WalletConnect/modal-react-native/blob/d5d84412cfecaab132b6aaef542857b11a139dea/src/utils/UiUtil.ts#L5-L7

Mar 28 '25 17:03 ignaciosantise

[bug]: on iOS I choose the wallet and the app crashes

Description

WalletConnect Modal SDK version

Output of npx react-native info

Expo Version (if applies)

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Output of `npx react-native info`