Added viem/ethers/uprovider examples

.maestro/dapp-flow.yaml

@@ -1,7 +1,7 @@
 # flow.yaml
-appId: "com.walletconnect.web3modal.rnsample"
+appId: "com.walletconnect.modal.rnviemsample"
 ---
 - launchApp
 - extendedWaitUntil:
-    visible: "Connect Wallet"
-    timeout: 60_000
+    visible: "Connect"
+    timeout: 60000

.maestro/wallet-flow.yaml

@@ -4,5 +4,5 @@ appId: "com.walletconnect.web3wallet.rnsample"
 - launchApp
 - extendedWaitUntil:
     visible: "Get Started"
-    timeout: 60_000  
+    timeout: 60000  
 - tapOn: "Get Started"

README.md

@@ -25,7 +25,9 @@ Skeleton Example (WIP)
 
 ## Dapps
 
-- Dapp V2 Explorer: `dapps/v2Explorer` or by checking out the alpha SDK [here](https://github.com/WalletConnect/modal-react-native)
+- WalletConnect Modal + Viem: `dapps/ModalViem`
+- WalletConnect Modal + Ethers v5: `dapps/ModalEthers`
+- WalletConnect Modal + Universal Provider: `dapps/ModalUProvider`
 
 ## Getting Started
 

dapps/v2Explorer/.gitignore → dapps/ModalEthers/.gitignore

@@ -1,8 +1,6 @@
 # OSX
 #
 .DS_Store
-**/.DS_Store
-.env
 
 # Xcode
 #

dapps/ModalEthers/.watchmanconfig

@@ -0,0 +1 @@
+{}

dapps/v2Explorer/Gemfile.lock → dapps/ModalEthers/Gemfile.lock

@@ -3,12 +3,12 @@ GEM
   specs:
     CFPropertyList (3.0.6)
       rexml
-    activesupport (7.0.6)
+    activesupport (7.0.8)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    addressable (2.8.4)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
@@ -65,7 +65,7 @@ GEM
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     json (2.6.3)
-    minitest (5.19.0)
+    minitest (5.20.0)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)

dapps/ModalEthers/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

dapps/v2Explorer/__tests__/App-test.tsx → dapps/ModalEthers/__tests__/App.test.tsx

@@ -4,7 +4,10 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../src/screens/App';
+import App from '../src/App';
+
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

dapps/v2Explorer/android/app/build.gradle → dapps/ModalEthers/android/app/build.gradle

@@ -1,8 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
 
-import com.android.build.OutputFile
-
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -13,8 +11,8 @@ react {
     // root = file("../")
     //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
     // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
-    // codegenDir = file("../node_modules/react-native-codegen")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
     // cliFile = file("../node_modules/react-native/cli.js")
 
@@ -52,14 +50,6 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
-/**
- * Set this to true to create four separate APKs instead of one,
- * one for each native architecture. This is useful if you don't
- * use App Bundles (https://developer.android.com/guide/app-bundle/)
- * and want to have separate APKs to upload to the Play Store.
- */
-def enableSeparateBuildPerCPUArchitecture = false
-
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
@@ -78,37 +68,18 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
-/**
- * Private function to get the list of Native Architectures you want to build.
- * This reads the value from reactNativeArchitectures in your gradle.properties
- * file and works together with the --active-arch-only flag of react-native run-android.
- */
-def reactNativeArchitectures() {
-    def value = project.getProperties().get("reactNativeArchitectures")
-    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 android {
     ndkVersion rootProject.ext.ndkVersion
 
     compileSdkVersion rootProject.ext.compileSdkVersion
 
-    namespace "com.walletconnect.web3modal.rnsample"
+    namespace "com.modalviem"
     defaultConfig {
-        applicationId "com.walletconnect.web3modal.rnsample"
+        applicationId "com.walletconnect.modal.rnetherssample"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 11
-        versionName "1.1"
-    }
-
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
+        versionCode 1
+        versionName "1.0"
     }
     signingConfigs {
         debug {
@@ -130,30 +101,12 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
-
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
-            }
-
-        }
-    }
 }
 
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 
-    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'

dapps/v2Explorer/android/app/src/debug/java/com/walletconnect/web3modal/rnsample/ReactNativeFlipper.java → dapps/ModalEthers/android/app/src/debug/java/com/modalviem/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.walletconnect.web3modal.rnsample;
+package com.modalviem;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

dapps/v2Explorer/android/app/src/main/AndroidManifest.xml → dapps/ModalEthers/android/app/src/main/AndroidManifest.xml

@@ -64,7 +64,7 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         <intent-filter>
-          <data android:scheme="w3msample" />
+          <data android:scheme="wcmviemsample" />
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE" />

dapps/v2Explorer/android/app/src/main/java/com/walletconnect/web3modal/rnsample/MainActivity.java → dapps/ModalEthers/android/app/src/main/java/com/modalviem/MainActivity.java

@@ -1,4 +1,4 @@
-package com.walletconnect.web3modal.rnsample;
+package com.modalviem;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected String getMainComponentName() {
-    return "Web3Modal";
+    return "ModalEthers";
   }
 
   /**

dapps/v2Explorer/android/app/src/main/java/com/walletconnect/web3modal/rnsample/MainApplication.java → dapps/ModalEthers/android/app/src/main/java/com/modalviem/MainApplication.java

@@ -1,4 +1,4 @@
-package com.walletconnect.web3modal.rnsample;
+package com.modalviem;
 
 import android.app.Application;
 import com.facebook.react.PackageList;
@@ -24,7 +24,7 @@ protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new CustomPackage());
+          // packages.add(new MyReactNativePackage());
           return packages;
         }
 

dapps/ModalEthers/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">ModalEthers</string>
+</resources>

dapps/v2Explorer/android/app/src/release/java/com/walletconnect/web3modal/rnsample/ReactNativeFlipper.java → dapps/ModalEthers/android/app/src/release/java/com/modalviem/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.walletconnect.web3modal.rnsample;
+package com.modalviem;
 
 import android.content.Context;
 import com.facebook.react.ReactInstanceManager;

dapps/v2Explorer/android/gradlew → dapps/ModalEthers/android/gradlew

@@ -241,4 +241,4 @@ eval "set -- $(
         tr '\n' ' '
     )" '"$@"'
 
-exec "$JAVACMD" "$@"
+exec "$JAVACMD" "$@"

dapps/v2Explorer/android/gradlew.bat → dapps/ModalEthers/android/gradlew.bat

@@ -89,4 +89,4 @@ exit /b %EXIT_CODE%
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
 
-:omega
+:omega

dapps/ModalEthers/android/settings.gradle

@@ -0,0 +1,4 @@
+rootProject.name = 'ModalEthers'
+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')

dapps/ModalEthers/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "ModalEthers",
+  "displayName": "ModalEthers"
+}

dapps/ModalEthers/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

dapps/v2Explorer/index.js → dapps/ModalEthers/index.js

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './src/screens/App';
+import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);