Merge pull request #203 from celo-org/therealharpaljadeja/react-nativ…

…e-without-expo-wcv2

React Native (without Expo) WalletConnect V2

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 .env
 packages/*/.env
-packages/*/.env.*
 
 # IntelliJ project files
 *.iml

packages/react-native-app-without-expo/.env.example

@@ -0,0 +1,2 @@
+ENV_PROJECT_ID=
+ENV_RELAY_URL=

packages/react-native-app-without-expo/App.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
-import {Platform, StatusBar, StyleSheet} from 'react-native';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+// @ts-expect-error - `@env` is a virtualised module via Babel config.
+import {ENV_PROJECT_ID} from '@env';
+
+import {Web3Modal} from '@web3modal/react-native';
 import {useEffect} from 'react';
-import {LogBox} from 'react-native';
+import {LogBox, StatusBar, StyleSheet} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {providerMetadata, sessionParams} from './constants/Config';
+import {ThemeProvider} from './context/ThemeProvider';
 import useColorScheme from './hooks/useColorScheme';
 import Navigation from './navigation';
-import {ThemeProvider} from './context/ThemeProvider';
-import WalletConnectProvider from '@walletconnect/react-native-dapp';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+
+console.log('ENV_PROJECT_ID', ENV_PROJECT_ID);
 
 const App = () => {
   const colorScheme = useColorScheme();
@@ -18,31 +21,19 @@ const App = () => {
   }, []);
 
   return (
-    <WalletConnectProvider
-      bridge="https://bridge.walletconnect.org"
-      clientMeta={{
-        name: 'Celo Composer React Native without expo',
-        description: 'React Native Starter Project to build on Celo',
-        url: 'https://celo.org',
-        icons: ['https://walletconnect.org/walletconnect-logo.png'],
-      }}
-      redirectUrl={
-        Platform.OS === 'web'
-          ? window.location.origin
-          : `rnWithoutExpoCeloComposer://`
-      }
-      storageOptions={{
-        asyncStorage: AsyncStorage,
-      }}>
-      <ThemeProvider>
-        <SafeAreaProvider>
-          <Navigation colorScheme={colorScheme} />
-          <StatusBar
-            barStyle={colorScheme == 'dark' ? 'light-content' : 'dark-content'}
-          />
-        </SafeAreaProvider>
-      </ThemeProvider>
-    </WalletConnectProvider>
+    <ThemeProvider>
+      <SafeAreaProvider>
+        <Navigation colorScheme={colorScheme} />
+        <StatusBar
+          barStyle={colorScheme == 'dark' ? 'light-content' : 'dark-content'}
+        />
+        <Web3Modal
+          projectId={ENV_PROJECT_ID}
+          providerMetadata={providerMetadata}
+          sessionParams={sessionParams}
+        />
+      </SafeAreaProvider>
+    </ThemeProvider>
   );
 };
 

packages/react-native-app-without-expo/android/app/_BUCK → packages/react-native-app-without-expo/android/app/BUCK

@@ -35,12 +35,12 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.reactnativeappwithoutexpo",
+    package = "com.celocomposer",
 )
 
 android_resource(
     name = "res",
-    package = "com.reactnativeappwithoutexpo",
+    package = "com.celocomposer",
     res = "src/main/res",
 )
 

packages/react-native-app-without-expo/android/app/build.gradle

@@ -134,7 +134,7 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     defaultConfig {
-        applicationId "com.reactnativeappwithoutexpo"
+        applicationId "com.celocomposer"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
@@ -157,7 +157,7 @@ android {
                     cppFlags "-std=c++17"
                     // Make sure this target name is the same you specify inside the
                     // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
-                    targets "reactnativeappwithoutexpo_appmodules"
+                    targets "celocomposer_appmodules"
                 }
             }
             if (!enableSeparateBuildPerCPUArchitecture) {

packages/react-native-app-without-expo/android/app/src/debug/java/com/reactnativeappwithoutexpo/ReactNativeFlipper.java → packages/react-native-app-without-expo/android/app/src/debug/java/com/celocomposer/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.reactnativeappwithoutexpo;
+package com.celocomposer;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

packages/react-native-app-without-expo/android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.reactnativeappwithoutexpo">
+  package="com.celocomposer">
 
     <uses-permission android:name="android.permission.INTERNET" />
 
@@ -21,16 +21,6 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
-
-        <!-- Add this new intent-filter tag -->
-        <!-- Make sure to set the value of android:scheme to your own scheme -->
-
-        <intent-filter>
-          <action android:name="android.intent.action.VIEW" />
-          <category android:name="android.intent.category.DEFAULT" />
-          <category android:name="android.intent.category.BROWSABLE" />
-          <data android:scheme="rnWithoutExpoCeloComposer" />
-        </intent-filter>
       </activity>
     </application>
 </manifest>

packages/react-native-app-without-expo/android/app/src/main/java/com/reactnativeappwithoutexpo/MainActivity.java → packages/react-native-app-without-expo/android/app/src/main/java/com/celocomposer/MainActivity.java

@@ -1,4 +1,4 @@
-package com.reactnativeappwithoutexpo;
+package com.celocomposer;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -12,7 +12,7 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected String getMainComponentName() {
-    return "reactNativeAppWithoutExpo";
+    return "CeloComposer";
   }
 
   /**

packages/react-native-app-without-expo/android/app/src/main/java/com/reactnativeappwithoutexpo/MainApplication.java → packages/react-native-app-without-expo/android/app/src/main/java/com/celocomposer/MainApplication.java

@@ -1,4 +1,4 @@
-package com.reactnativeappwithoutexpo;
+package com.celocomposer;
 
 import android.app.Application;
 import android.content.Context;
@@ -9,7 +9,7 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.soloader.SoLoader;
-import com.reactnativeappwithoutexpo.newarchitecture.MainApplicationReactNativeHost;
+import com.celocomposer.newarchitecture.MainApplicationReactNativeHost;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
@@ -73,7 +73,7 @@ private static void initializeFlipper(
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.reactnativeappwithoutexpo.ReactNativeFlipper");
+        Class<?> aClass = Class.forName("com.celocomposer.ReactNativeFlipper");
         aClass
             .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
             .invoke(null, context, reactInstanceManager);

packages/react-native-app-without-expo/android/app/src/main/java/com/reactnativeappwithoutexpo/newarchitecture/MainApplicationReactNativeHost.java → packages/react-native-app-without-expo/android/app/src/main/java/com/celocomposer/newarchitecture/MainApplicationReactNativeHost.java

@@ -1,4 +1,4 @@
-package com.reactnativeappwithoutexpo.newarchitecture;
+package com.celocomposer.newarchitecture;
 
 import android.app.Application;
 import androidx.annotation.NonNull;
@@ -19,9 +19,9 @@
 import com.facebook.react.fabric.FabricJSIModuleProvider;
 import com.facebook.react.fabric.ReactNativeConfig;
 import com.facebook.react.uimanager.ViewManagerRegistry;
-import com.reactnativeappwithoutexpo.BuildConfig;
-import com.reactnativeappwithoutexpo.newarchitecture.components.MainComponentsRegistry;
-import com.reactnativeappwithoutexpo.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
+import com.celocomposer.BuildConfig;
+import com.celocomposer.newarchitecture.components.MainComponentsRegistry;
+import com.celocomposer.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
 import java.util.ArrayList;
 import java.util.List;
 

packages/react-native-app-without-expo/android/app/src/main/java/com/reactnativeappwithoutexpo/newarchitecture/components/MainComponentsRegistry.java → packages/react-native-app-without-expo/android/app/src/main/java/com/celocomposer/newarchitecture/components/MainComponentsRegistry.java

@@ -1,4 +1,4 @@
-package com.reactnativeappwithoutexpo.newarchitecture.components;
+package com.celocomposer.newarchitecture.components;
 
 import com.facebook.jni.HybridData;
 import com.facebook.proguard.annotations.DoNotStrip;

packages/react-native-app-without-expo/android/app/src/main/java/com/reactnativeappwithoutexpo/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java → packages/react-native-app-without-expo/android/app/src/main/java/com/celocomposer/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java

@@ -1,4 +1,4 @@
-package com.reactnativeappwithoutexpo.newarchitecture.modules;
+package com.celocomposer.newarchitecture.modules;
 
 import com.facebook.jni.HybridData;
 import com.facebook.react.ReactPackage;
@@ -41,7 +41,7 @@ protected synchronized void maybeLoadOtherSoLibraries() {
     if (!sIsSoLibraryLoaded) {
       // If you change the name of your application .so file in the Android.mk file,
       // make sure you update the name here as well.
-      SoLoader.loadLibrary("reactnativeappwithoutexpo_appmodules");
+      SoLoader.loadLibrary("celocomposer_appmodules");
       sIsSoLibraryLoaded = true;
     }
   }

packages/react-native-app-without-expo/android/app/src/main/jni/Android.mk

@@ -10,7 +10,7 @@ include $(CLEAR_VARS)
 LOCAL_PATH := $(THIS_DIR)
 
 # You can customize the name of your application .so file here.
-LOCAL_MODULE := reactnativeappwithoutexpo_appmodules
+LOCAL_MODULE := celocomposer_appmodules
 
 LOCAL_C_INCLUDES := $(LOCAL_PATH)
 LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)

packages/react-native-app-without-expo/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h

@@ -14,7 +14,7 @@ class MainApplicationTurboModuleManagerDelegate
  public:
   // Adapt it to the package you used for your Java class.
   static constexpr auto kJavaDescriptor =
-      "Lcom/reactnativeappwithoutexpo/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
+      "Lcom/celocomposer/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
 
   static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
 

packages/react-native-app-without-expo/android/app/src/main/jni/MainComponentsRegistry.h

@@ -13,7 +13,7 @@ class MainComponentsRegistry
  public:
   // Adapt it to the package you used for your Java class.
   constexpr static auto kJavaDescriptor =
-      "Lcom/reactnativeappwithoutexpo/newarchitecture/components/MainComponentsRegistry;";
+      "Lcom/celocomposer/newarchitecture/components/MainComponentsRegistry;";
 
   static void registerNatives();
 

packages/react-native-app-without-expo/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">reactNativeAppWithoutExpo</string>
+    <string name="app_name">Celo Composer</string>
 </resources>

packages/react-native-app-without-expo/android/settings.gradle

@@ -1,4 +1,4 @@
-rootProject.name = 'reactNativeAppWithoutExpo'
+rootProject.name = 'CeloComposer'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

packages/react-native-app-without-expo/app.json

@@ -1,4 +1,4 @@
 {
-  "name": "reactNativeAppWithoutExpo",
+  "name": "CeloComposer",
   "displayName": "Celo Composer"
-}
+}

packages/react-native-app-without-expo/babel.config.js

@@ -1,3 +1,15 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['module:metro-react-native-babel-preset'],
+    plugins: [
+      ['module:react-native-dotenv'],
+      [
+        '@babel/plugin-transform-react-jsx',
+        {
+          runtime: 'automatic',
+        },
+      ],
+    ],
+  };
 };

packages/react-native-app-without-expo/components/AccountAddress.tsx

@@ -0,0 +1,13 @@
+import {useContext} from 'react';
+import {ThemeContext} from '../context/ThemeProvider';
+import {Text} from './Themed';
+import {useWeb3Modal} from '@web3modal/react-native';
+
+const AccountAddress = () => {
+  const {styles} = useContext(ThemeContext);
+  const {address} = useWeb3Modal();
+
+  return <Text style={styles.externalLink}>{address}</Text>;
+};
+
+export default AccountAddress;

packages/react-native-app-without-expo/components/AccountBalance.tsx

@@ -0,0 +1,20 @@
+import {Text, View} from './Themed';
+import {useWeb3Modal} from '@web3modal/react-native';
+import {useEffect, useState} from 'react';
+
+const AccountBalance = () => {
+  const [balances, setBalances] = useState<any>(null);
+  const {address} = useWeb3Modal();
+
+  return (
+    <View>
+      {balances
+        ? Object.keys(balances).map(key => (
+            <Text>{`${key}: ${balances[key]}`}</Text>
+          ))
+        : null}
+    </View>
+  );
+};
+
+export default AccountBalance;