hossain-0722 / mobile-app

cypherd-ui

TBD: Next step is to prototype the interaction between React Native app back to webview (response to JSON RPC calls). interaction from Webview to reactNative has already been implemented.

Steps to run the project locally

Configure

1. Sentry in sentry.properties file
2. GoogleService in plist file

React Native MAC Setup Guide

npm install (from the root folder)
npx pod-install (from the root folder)

Okay, one more step to get it working on ios. Basically, when installing the pods we got some duplicates and xcode doesn’t like this. 0. Open XCode and goto our repo -> ios -> Cypherd.xcworkspace

1. Let’s go to the project navigation tab (the folder icon at the top left) 2.Go to Pods (then all of the pods should appear on the right) scroll down to “TcpSockets”
2. Click on “Build Phases” (in the middle of the screen)
3. Then expand “Compile Sources”
4. Click on “GCDAsyncSocket.m”
5. Click on the “-” button to remove it The final step is to do the exact same thing to the “react-native-udp” Pod. Don’t forget to do this. After you remove the GCDAsyncSocket.m reference in both Pods, they should have 3 Compile sources.

To run:

npm install <package-name>
npx pod-install (from the root folder)

npx react-native start --reset-cache
npx react-native run-ios

To clear the cache: If you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

To close the app:

Shift+Command+H twice to open all apps, swipe up to close the app

Introduction

EIP-1193
EIP-1193 Ethereum Provider Javascript API https://eips.ethereum.org/EIPS/eip-1193 Ethereum Provider API defines the standard on how a dApp interacts with the wallet app through RPC calls using injected content-scripts by setting the window.ethereum object in javascript.

Communication between WebView and ReactNative
react-native-webview component has capability for the webview to interact with the react-native app in both directions https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

Installation Instructions for react-native web3.js
web3.js reactive native installation instructions from https://levelup.gitconnected.com/tutorial-how-to-set-up-web3js-1-x-with-react-native-0-6x-2021-467b2e0c94a4

Highlight from the above article Final Step Each time you add a new npm package, you will need to hack the node modules again, to automate this, simply add this to your package.json: "scripts": { ... "postinstall": "./node_modules/.bin/rn-nodeify --install 'crypto,buffer,react-native-randombytes,vm,stream,http,https,os,url,net,fs' --hack" },

Setup Instructions: https://reactnative.dev/docs/next/environment-setup

Note: Once in a while, run the below command to clear the cache.

• Please make sure to run "watchman watch-del-all" and "npm start --reset-cache" before running the app.

M1 Specific instruction

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install -- for pod install