├── .expo-shared
    └── assets.json
├── .gitignore
├── App.tsx
├── Demo.gif
├── README.md
├── WalletConnectExperience.tsx
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── expo-qrcode.png
├── global.ts
├── metro.config.js
├── package.json
├── tsconfig.json
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
 1 | import "./global";
 2 | 
 3 | import * as React from "react";
 4 | import { StatusBar } from "expo-status-bar";
 5 | import { StyleSheet, View, Platform } from "react-native";
 6 | import WalletConnectProvider from "@walletconnect/react-native-dapp";
 7 | import AsyncStorage from "@react-native-async-storage/async-storage";
 8 | 
 9 | import WalletConnectExperience from "./WalletConnectExperience";
10 | 
11 | const SCHEME_FROM_APP_JSON = "walletconnect-example";
12 | 
13 | export default function App() {
14 |   return (
15 |     <WalletConnectProvider
16 |       redirectUrl={
17 |         Platform.OS === "web"
18 |           ? window.location.origin
19 |           : `${SCHEME_FROM_APP_JSON}://`
20 |       }
21 |       storageOptions={{
22 |         asyncStorage: AsyncStorage,
23 |       }}
24 |     >
25 |       <View style={styles.container}>
26 |         <WalletConnectExperience />
27 |         <StatusBar style="auto" />
28 |       </View>
29 |     </WalletConnectProvider>
30 |   );
31 | }
32 | 
33 | const styles = StyleSheet.create({
34 |   container: {
35 |     flex: 1,
36 |     backgroundColor: "#fff",
37 |     alignItems: "center",
38 |     justifyContent: "center",
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/Demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/Demo.gif


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Expo WalletConnect Demo
 2 | 
 3 | Without ejecting, we're able to connect an Expo app to MetaMask via WalletConnect.
 4 | 
 5 | <img src="./Demo.gif" width="250" />
 6 | 
 7 | ## What do these changes consist of?
 8 | 
 9 | - Polyfilling NodeJS libraries within [metro.config.js](./metro.config.js)
10 | - Creating and updating [global.ts](./global.ts)
11 | 
12 | ## Run this on your own
13 | - clone repo
14 | - yarn install
15 | - expo start
16 | - scan QR code
17 | 


--------------------------------------------------------------------------------
/WalletConnectExperience.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Text, TouchableOpacity, StyleSheet } from "react-native";
 3 | import { useWalletConnect } from "@walletconnect/react-native-dapp";
 4 | 
 5 | const shortenAddress = (address: string) => {
 6 |   return `${address.slice(0, 6)}...${address.slice(
 7 |     address.length - 4,
 8 |     address.length
 9 |   )}`;
10 | };
11 | 
12 | function Button({ onPress, label }: any) {
13 |   return (
14 |     <TouchableOpacity onPress={onPress} style={styles.button}>
15 |       <Text style={styles.text}>{label}</Text>
16 |     </TouchableOpacity>
17 |   );
18 | }
19 | 
20 | export default function WalletConnectExperience() {
21 |   const connector = useWalletConnect();
22 | 
23 |   const connectWallet = React.useCallback(() => {
24 |     return connector.connect();
25 |   }, [connector]);
26 | 
27 |   const killSession = React.useCallback(() => {
28 |     return connector.killSession();
29 |   }, [connector]);
30 | 
31 |   return (
32 |     <>
33 |       {!connector.connected ? (
34 |         <Button onPress={connectWallet} label="Connect a wallet" />
35 |       ) : (
36 |         <>
37 |           <Text>{shortenAddress(connector.accounts[0])}</Text>
38 |           <Button onPress={killSession} label="Log out" />
39 |         </>
40 |       )}
41 |     </>
42 |   );
43 | }
44 | 
45 | const styles = StyleSheet.create({
46 |   button: {
47 |     backgroundColor: "#5A45FF",
48 |     color: "#FFFFFF",
49 |     borderRadius: 12,
50 |     paddingHorizontal: 16,
51 |     paddingVertical: 12,
52 |   },
53 |   text: {
54 |     color: "#FFFFFF",
55 |     fontSize: 16,
56 |     fontWeight: "600",
57 |   },
58 | });
59 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "WalletConnectExample",
 4 |     "slug": "WalletConnectExample",
 5 |     "scheme": "walletconnect-example",
 6 |     "version": "1.0.0",
 7 |     "orientation": "portrait",
 8 |     "icon": "./assets/icon.png",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "updates": {
15 |       "fallbackToCacheTimeout": 0
16 |     },
17 |     "assetBundlePatterns": [
18 |       "**/*"
19 |     ],
20 |     "ios": {
21 |       "supportsTablet": true
22 |     },
23 |     "android": {
24 |       "adaptiveIcon": {
25 |         "foregroundImage": "./assets/adaptive-icon.png",
26 |         "backgroundColor": "#FFFFFF"
27 |       }
28 |     },
29 |     "web": {
30 |       "favicon": "./assets/favicon.png"
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/expo-qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbit/expo-walletconnect-demo/60b9634a01a1c86437057b03809786547e67b828/expo-qrcode.png


--------------------------------------------------------------------------------
/global.ts:
--------------------------------------------------------------------------------
 1 | import { Platform, LogBox } from "react-native";
 2 | 
 3 | export interface Global {
 4 |   btoa: any;
 5 |   atob: any;
 6 |   self: any;
 7 |   Buffer: any;
 8 |   process: any;
 9 |   location: any;
10 | }
11 | 
12 | declare var global: Global;
13 | if (typeof global.self === "undefined") {
14 |   global.self = global;
15 | }
16 | 
17 | if (Platform.OS !== "web") {
18 |   require("react-native-get-random-values");
19 |   LogBox.ignoreLogs([
20 |     "Warning: The provided value 'ms-stream' is not a valid 'responseType'.",
21 |     "Warning: The provided value 'moz-chunked-arraybuffer' is not a valid 'responseType'.",
22 |   ]);
23 | }
24 | 
25 | global.btoa = global.btoa || require("base-64").encode;
26 | global.atob = global.atob || require("base-64").decode;
27 | 
28 | global.Buffer = require("buffer").Buffer;
29 | 
30 | global.process = require("process");
31 | global.process.env.NODE_ENV = __DEV__ ? "development" : "production";
32 | global.process.version = "v9.40";
33 | 
34 | global.location = {
35 |   protocol: "https",
36 | };
37 | 


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   resolver: {
3 |     extraNodeModules: require("expo-crypto-polyfills"),
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "expo-walletconnect-demo",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "eject": "expo eject"
11 |   },
12 |   "dependencies": {
13 |     "@react-native-async-storage/async-storage": "^1.15.15",
14 |     "@walletconnect/react-native-dapp": "^1.7.1",
15 |     "expo": "~44.0.0",
16 |     "expo-crypto-polyfills": "^1.1.0",
17 |     "expo-status-bar": "~1.2.0",
18 |     "react": "17.0.1",
19 |     "react-dom": "17.0.1",
20 |     "react-native": "0.64.3",
21 |     "react-native-get-random-values": "^1.7.2",
22 |     "react-native-web": "0.17.1"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/core": "^7.12.9",
26 |     "@types/react": "~17.0.21",
27 |     "@types/react-native": "~0.64.12",
28 |     "typescript": "~4.3.5"
29 |   },
30 |   "private": true
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "expo/tsconfig.base",
3 |   "compilerOptions": {
4 |     "strict": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------