In einer React Native App (bloß) öffnen Sie die Brieftasche. ⇐ IOS

[Anonymous]

Versucht, diese App nur mit einer Brieftasche zu verbinden, folgt den Dokumenten (https://docs.reown.com/advanced/walletc ... act-native). />set up:
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-nativ-svg @react-nativ-community/netinfo @walletconnect/react-nativ-compat
Code:

Code: Select all

//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 (


....
{/* Modal for Connection */}



Wallet Not Connected

Connect






);
}
....
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 
#import 

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary  *)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:




CFBundleDevelopmentRegion
en
CFBundleDisplayName
dapp
CFBundleExecutable
$(EXECUTABLE_NAME)
CFBundleIdentifier
$(PRODUCT_BUNDLE_IDENTIFIER)
CFBundleInfoDictionaryVersion
6.0
CFBundleName
$(PRODUCT_NAME)
CFBundlePackageType
APPL
CFBundleShortVersionString
$(MARKETING_VERSION)
CFBundleSignature
????
CFBundleURLTypes


CFBundleTypeRole
Editor
CFBundleURLName
com.dapp
CFBundleURLSchemes

com.dapp



CFBundleVersion
$(CURRENT_PROJECT_VERSION)
LSApplicationQueriesSchemes

metamask

LSRequiresIPhoneOS

NSAppTransportSecurity

NSAllowsArbitraryLoads

NSAllowsLocalNetworking


NSCameraUsageDescription
$(PRODUCT_NAME) needs access to your Camera.
NSLocationWhenInUseUsageDescription

UIBackgroundModes

fetch
remote-notification
processing

UILaunchStoryboardName
LaunchScreen
UIRequiredDeviceCapabilities

arm64

UISupportedInterfaceOrientations

UIInterfaceOrientationPortrait
UIInterfaceOrientationLandscapeLeft
UIInterfaceOrientationLandscapeRight

UIViewControllerBasedStatusBarAppearance




//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 -Stapelverfolgung:
Bildbeschreibung eingeben>