fea: connect wallet using walletconnet-v2

.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

App.tsx

@@ -0,0 +1,34 @@
+import "./expo-crypto-shim.ts";
+import { Web3Modal } from "@web3modal/react-native";
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaView, StyleSheet } from "react-native";
+import ConnectWallet from "./components/ConnectWallet/index";
+
+const projectId = "YOUR_PROJECT_ID";
+
+const providerMetadata = {
+  name: "YOUR_PROJECT_NAME",
+  description: "YOUR_PROJECT_DESCRIPTION",
+  url: "https://your-project-website.com/",
+  icons: ["https://your-project-logo.com/"],
+  redirect: {
+    native: "YOUR_APP_SCHEME://",
+    universal: "YOUR_APP_UNIVERSAL_LINK.com",
+  },
+};
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.screenContainer}>
+      <StatusBar style="auto" />
+      <ConnectWallet />
+      <Web3Modal projectId={projectId} providerMetadata={providerMetadata} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screenContainer: {
+    flex: 1,
+  },
+});

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "walletconnect-v2",
+    "slug": "walletconnect-v2",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports=function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/ConnectWallet/UsingCustomButton.tsx

@@ -0,0 +1,67 @@
+import { useWeb3Modal } from "@web3modal/react-native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../UI/Button";
+
+export default function UsingCustomButton() {
+  const [signature, setSignature] = React.useState<null | string>(null);
+  const { isConnected, address, provider, open } = useWeb3Modal();
+
+  const disconnect = () => provider?.disconnect();
+
+  const signMessage = async () => {
+    try {
+      const signature = await provider?.request({
+        method: "personal_sign",
+        params: [address, "YOUR_SIGN_MESSAGE"],
+      });
+      setSignature(signature as string);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* ConnectWallet using Web3Button */}
+
+      {isConnected ? (
+        <>
+          <Text>{address}</Text>
+          <Button onPress={disconnect} style={styles.btnStyle}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button onPress={open}>Connect Wallet</Button>
+      )}
+
+      {/* sign message  */}
+
+      {isConnected ? (
+        <>
+          <Button onPress={signMessage}>Sign Message</Button>
+          <View style={styles.textContainer}>
+            {signature ? <Text>{signature}</Text> : null}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  btnStyle: {
+    marginVertical: 16,
+  },
+  textContainer: {
+    marginTop: 16,
+    marginBottom: 48,
+  },
+});

components/ConnectWallet/UsingWeb3Button.tsx

@@ -0,0 +1,29 @@
+import { Web3Button, useWeb3Modal } from "@web3modal/react-native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function UsingWeb3Button() {
+  const { isConnected, address } = useWeb3Modal();
+
+  return (
+    <View style={styles.container}>
+      <Web3Button />
+      <View style={styles.textContainer}>
+        {isConnected ? <Text>{address}</Text> : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  textContainer: {
+    marginTop: 16,
+    marginBottom: 48,
+  },
+});

components/ConnectWallet/index.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { StyleSheet, Switch, Text, View } from "react-native";
+import UsingWeb3Button from "./UsingWeb3Button";
+import UsingCustomButton from "./UsingCustomButton";
+
+export default function ConnectWallet() {
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.innerContainer}>
+        {isEnabled ? <UsingWeb3Button /> : <UsingCustomButton />}
+        <View style={styles.customBtnContainer}>
+          <Text style={styles.customBtnTitle}>Connect using Web3Button?</Text>
+          <Switch onValueChange={toggleSwitch} value={isEnabled} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  innerContainer: {
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  customBtnContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  customBtnTitle: {
+    marginRight: 16,
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

components/UI/Button.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from "react-native";
+
+interface ButtonProps {
+  children: string;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  onPress: () => void;
+}
+const Button: React.FC<ButtonProps> = ({
+  children,
+  style,
+  textStyle,
+  onPress,
+}) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.9}
+      style={[styles.container, style]}
+      onPress={onPress}
+    >
+      <Text style={[styles.content, textStyle]}>{children}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Button);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+    paddingHorizontal: 48,
+    borderRadius: 16,
+    backgroundColor: "#394867",
+    alignItems: "center",
+  },
+  content: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "white",
+  },
+});

enums.ts

@@ -0,0 +1,11 @@
+export enum Rpc_Methods {
+  Send_Txn = "eth_sendTransaction",
+  Personal_Sign = "personal_sign",
+  Sign_Txn = "eth_signTransaction",
+}
+export enum Chains {
+  Ethereum_Mainnet = "eip155:1",
+  Ethereum_Goerli = "eip155:5",
+  Polygon_Mainnet = "eip155:137",
+  Polygon_Testnet = "eip155:80001",
+}

expo-crypto-shim.ts

@@ -0,0 +1,21 @@
+// Polyfill for expo-crypto until issue with react-native-get-random-values is solved
+// Apply only with Expo SDK >= 48
+
+import { getRandomValues as expoCryptoGetRandomValues } from "expo-crypto";
+
+class Crypto {
+  getRandomValues = expoCryptoGetRandomValues;
+}
+
+// eslint-disable-next-line no-undef
+const webCrypto = typeof crypto !== "undefined" ? crypto : new Crypto();
+
+(() => {
+  if (typeof crypto === "undefined") {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      enumerable: true,
+      get: () => webCrypto,
+    });
+  }
+})();

global.ts

@@ -0,0 +1,36 @@
+import { Platform, LogBox } from "react-native";
+
+export interface Global {
+  btoa: any;
+  atob: any;
+  self: any;
+  Buffer: any;
+  process: any;
+  location: any;
+}
+
+declare var global: Global;
+if (typeof global.self === "undefined") {
+  global.self = global;
+}
+
+if (Platform.OS !== "web") {
+  require("react-native-get-random-values");
+  LogBox.ignoreLogs([
+    "Warning: The provided value 'ms-stream' is not a valid 'responseType'.",
+    "Warning: The provided value 'moz-chunked-arraybuffer' is not a valid 'responseType'.",
+  ]);
+}
+
+global.btoa = global.btoa || require("base-64").encode;
+global.atob = global.atob || require("base-64").decode;
+
+global.Buffer = require("buffer").Buffer;
+
+global.process = require("process");
+global.process.env.NODE_ENV = __DEV__ ? "development" : "production";
+global.process.version = "v9.40";
+
+global.location = {
+  protocol: "https",
+};

metro.config.ts

@@ -0,0 +1,5 @@
+module.exports = {
+  resolver: {
+    extraNodeModules: require("expo-crypto-polyfills"),
+  },
+};