[bug]: on iOS I choose the wallet and the app crashes #113
Description
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/cli@15.0.0 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"
}
}