attempting simply to attach this app to a pockets, following the docs (https://docs.reown.com/superior/walletconnectmodal/about?platform=react-native), acquired the pockets join button, I press it, select the pockets, it crashes.
It does work on android emulator and android bodily gadget, it doesn’t on iPhone emulator and bodily gadget.
arrange:
npx @react-native-community/[email protected] init waak –version 0.76.0
npm set up @walletconnect/modal-react-native
npm set up @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 = {
identify: 'you venture identify',
description: 'YOUR_PROJECT_DESCRIPTION',
url: 'https://your-project-website.com/',
icons: ['https://your-project-logo.com/'],
redirect: {
native: 'com.dapp://',
},
};
const sessionParams = {
namespaces: {
eip155: {
strategies: [
"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'],
occasions: [
"chainChanged",
"accountsChanged",
"disconnect",
"connect",
"message",
"networkChanged"
],
rpcMap: { },
},
},
};
.....
perform App(): React.JSX.Component {
const { isOpen, open, shut, supplier, isConnected, deal with } = useWalletConnectModal();
.....
return (
<NavigationContainer>
<Tab.Navigator>
....
{/* Modal for Connection */}
<Modal animationType="slide" clear={true} seen={modalVisible}>
<View model={kinds.modalContainer}>
<View model={kinds.modalView}>
<Textual content model={kinds.modalTitle}>Pockets Not Related</Textual content>
<Pressable model={kinds.connectButton} onPress={join}>
<Textual content model={kinds.buttonText}>Join</Textual content>
</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 {identify 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)utility:(UIApplication *)utility
openURL:(NSURL *)url
choices:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)choices {
return [RCTLinkingManager application:application openURL:url options:options];
}
- (BOOL)utility:(UIApplication *)utility didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"dapp";
// You possibly can add your customized preliminary props within the dictionary beneath.
// They are going to be handed all the way down to the ViewController utilized 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:@"principal" withExtension:@"jsbundle"];
#endif
}
@finish
//data.plist:
<?xml model="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist model="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) wants entry to your Digital 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
{
"identify": "dapp",
"displayName": "dapp"
}
package deal.json
{
"identify": "dapp",
"model": "0.0.1",
"non-public": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"begin": "react-native begin",
"take a look at": "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",
"@varieties/react": "^18.2.6",
"@varieties/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 hint: