Testing Integration Issue with Aarna Builder

packages/examples/reactNativeSdkDemo/App.tsx

@@ -57,6 +57,8 @@ const SafeApp = () => {
               'https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png',
             scheme: 'testdapp',
           },
+          // Raplace with your own Infura API key
+          infuraAPIKey: '***********************',
         }}>
         <NavigationContainer ref={navigationRef} onReady={handleNavReady}>
           <RootNavigator />

packages/examples/reactNativeSdkDemo/ios/Podfile.lock

@@ -15,11 +15,11 @@ PODS:
     - hermes-engine/Pre-built (= 0.72.5)
   - hermes-engine/Pre-built (0.72.5)
   - libevent (2.1.12)
-  - metamask-ios-sdk (0.8.1):
+  - metamask-ios-sdk (0.8.4):
     - Socket.IO-Client-Swift (~> 16.1.0)
     - Starscream (= 4.0.6)
-  - metamask-sdk-react-native (0.3.5):
-    - metamask-ios-sdk (~> 0.8.0)
+  - metamask-sdk-react-native (0.3.8):
+    - metamask-ios-sdk (~> 0.8.4)
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - RCT-Folly (2021.07.22.00):
@@ -644,8 +644,8 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: f6cf92a471053245614d9d8097736f6337d5b86c
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  metamask-ios-sdk: e9b1494f82232ffa8f8122a382ea94cf08a5dec3
-  metamask-sdk-react-native: 3df372e523eb6091c39b2dbb09babc3db6e94cb1
+  metamask-ios-sdk: eb147a8b4003f6fce54bd98aae4511e695e9d090
+  metamask-sdk-react-native: 6c43fdb8617da09f9ffc0da93b3c4909d26599d8
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: df81ab637d35fac9e6eb94611cfd20f0feb05455
   RCTTypeSafety: 4636e4a36c7c2df332bda6d59b19b41c443d4287

packages/examples/reactNativeSdkDemo/package.json

@@ -13,7 +13,7 @@
     "allow-scripts": ""
   },
   "dependencies": {
-    "@metamask/sdk-react-native": "^0.3.5",
+    "@metamask/sdk-react-native": "^0.3.8",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",

packages/examples/reactNativeSdkDemo/src/screens/DemoScreen.tsx

@@ -22,6 +22,8 @@ import {Colors} from 'react-native/Libraries/NewAppScreen';
 import packageJSON from '../../package.json';
 import {DAPPView} from '../views/DappView';
 
+import { DemoSignView } from './DemoSign';
+
 export function DemoScreen(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
   const [encryptionTime, setEncryptionTime] = useState<number>();
@@ -89,6 +91,7 @@ export function DemoScreen(): React.JSX.Element {
               .replaceAll('\n', '')}`}
             )
           </Text>
+          <DemoSignView />
           <Button title="Test Encryption" onPress={testEncrypt} />
           <Text style={{color: Colors.black}}>
             {encryptionTime && `Encryption time: ${encryptionTime} ms`}

packages/examples/reactNativeSdkDemo/src/screens/DemoSign.tsx

@@ -0,0 +1,66 @@
+import { useSDK } from '@metamask/sdk-react-native';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Text,
+  View,
+} from 'react-native';
+import { ethers } from 'ethers';
+
+
+export function DemoSignView(): React.JSX.Element {
+  const { provider: MMProvider, account, connected } = useSDK();
+  const [provider, setProvider] = useState<ethers.providers.Web3Provider>();
+
+
+  useEffect(() => {
+    if (connected && MMProvider && !provider) {
+      // The following line will crash the app
+      // if the option `infuraAPIKey` is provided to the MetaMaskProvider
+      // We have this error on the ios sdk side: metamask-ios-sdk/Network.swift:46
+      // *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Invalid type in JSON write (_NSInlineData)'
+      const provider = new ethers.providers.Web3Provider(
+        MMProvider
+      );
+
+      setProvider(provider);
+    }
+  }, [connected, MMProvider, setProvider]);
+
+  return (
+    <>
+      <Text>
+        Sign Demo
+      </Text>
+      {
+        (!provider || !account)
+          ? <Text> User is not connected</Text>
+          : <DemoSignComponent account={account} provider={provider} />
+      }
+    </>
+  );
+}
+
+
+function DemoSignComponent({ account, provider }: { account: string; provider: ethers.providers.Web3Provider }): React.JSX.Element {
+  const [signature, setSignature] = useState<string>();
+
+  async function sign() {
+    const signer = provider.getSigner(account);
+
+    const signature = await signer.signMessage('Hello');
+    setSignature(signature);
+  }
+
+  return (
+    <View>
+      <Text>
+        Sign message with address: {account}
+      </Text>
+      <Button title="Sign" onPress={sign} />
+      <Text>
+        Signature: {signature}
+      </Text>
+    </View>
+  );
+}

packages/examples/reactNativeSdkDemo/yarn.lock

@@ -2499,9 +2499,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/sdk-react-native@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "@metamask/sdk-react-native@npm:0.3.5"
+"@metamask/sdk-react-native@npm:^0.3.8":
+  version: 0.3.8
+  resolution: "@metamask/sdk-react-native@npm:0.3.8"
   peerDependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
@@ -2515,7 +2515,7 @@ __metadata:
       optional: false
     react-native:
       optional: true
-  checksum: 41f2b631f7ceb339a874fea6f53e3a1156b85954ae42eb084ab5a27b63be0ad7dc626e66ef9322cc5856b7b381b90dc3da6980270df11b3efdfb4d9ee5c1b01b
+  checksum: 7e2af2608084325521bb7df18a8343896836ba7f77681245c84380861080b27073ce471c970cded4a8ba858a00b89486b2da522b694e632a8a9a2bcde1d02bb9
   languageName: node
   linkType: hard
 
@@ -10332,7 +10332,7 @@ __metadata:
     "@babel/core": ^7.20.0
     "@babel/preset-env": ^7.20.0
     "@babel/runtime": ^7.20.0
-    "@metamask/sdk-react-native": ^0.3.5
+    "@metamask/sdk-react-native": ^0.3.8
     "@react-native-async-storage/async-storage": ^1.19.3
     "@react-native-community/eslint-config": ^3.2.0
     "@react-native/eslint-config": ^0.72.2