WIP: Privy

DO NOT MERGE

Waiting for project Id to be able to use this, no testing has been done on this

App.tsx

@@ -1,34 +1,13 @@
 import './src/polyfills';
 
+import {PrivyProvider} from '@privy-io/expo';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {Ethereum} from '@thirdweb-dev/chains';
-import {
-  ThirdwebProvider,
-  localWallet,
-  metamaskWallet,
-  walletConnect,
-} from '@thirdweb-dev/react-native';
 import {NativeBaseProvider, extendTheme} from 'native-base';
 import React from 'react';
-import Config from 'react-native-config';
-import {mainnet} from 'viem/chains';
-import {WagmiConfig, configureChains, createConfig} from 'wagmi';
-import {publicProvider} from 'wagmi/providers/public';
 import {ClientProvider} from './src/context/ClientContext';
 import {AppNavigation} from './src/navigation/AppNavigation';
 import {colors} from './src/theme/colors';
 
-const {publicClient, webSocketPublicClient} = configureChains(
-  [mainnet],
-  [publicProvider()],
-);
-
-const config = createConfig({
-  autoConnect: true,
-  publicClient,
-  webSocketPublicClient,
-});
-
 const queryClient = new QueryClient();
 
 function App(): React.JSX.Element {
@@ -54,34 +33,15 @@ function App(): React.JSX.Element {
   };
   const theme = extendTheme({colors: newColorTheme});
   return (
-    <WagmiConfig config={config}>
-      <ThirdwebProvider
-        activeChain={Ethereum}
-        autoConnect={true}
-        clientId={Config.THRID_WEB_CLIENT_ID}
-        dAppMeta={{
-          name: 'XMTP Example',
-          description:
-            'This basic messaging app has an intentionally unopinionated UI to help make it easier for you to build with.',
-          logoUrl:
-            'https://pbs.twimg.com/profile_images/1668323456935510016/2c_Ue8dF_400x400.jpg',
-          url: 'https://xmtp.org',
-        }}
-        supportedWallets={[
-          localWallet(),
-          metamaskWallet(),
-          // coinbaseWallet(),
-          walletConnect({recommended: true}),
-        ]}>
-        <NativeBaseProvider theme={theme}>
-          <QueryClientProvider client={queryClient}>
-            <ClientProvider>
-              <AppNavigation />
-            </ClientProvider>
-          </QueryClientProvider>
-        </NativeBaseProvider>
-      </ThirdwebProvider>
-    </WagmiConfig>
+    <PrivyProvider appId="TODO:">
+      <NativeBaseProvider theme={theme}>
+        <QueryClientProvider client={queryClient}>
+          <ClientProvider>
+            <AppNavigation />
+          </ClientProvider>
+        </QueryClientProvider>
+      </NativeBaseProvider>
+    </PrivyProvider>
   );
 }
 

app.json

@@ -1,4 +1,7 @@
 {
   "name": "XmtpMobileChat",
-  "displayName": "XmtpMobileChat"
+  "displayName": "XmtpMobileChat",
+  "plugins": [
+    "expo-secure-store"
+  ]
 }

ios/Podfile.lock

@@ -13,16 +13,18 @@ PODS:
   - Connect-Swift (0.3.0):
     - SwiftProtobuf (~> 1.20.3)
   - DoubleConversion (1.1.6)
-  - EXApplication (5.8.3):
+  - EXApplication (5.8.4):
     - ExpoModulesCore
-  - EXConstants (15.4.5):
+  - EXConstants (15.4.6):
     - ExpoModulesCore
   - EXFont (11.10.2):
     - ExpoModulesCore
   - Expo (50.0.6):
     - ExpoModulesCore
   - ExpoClipboard (4.8.0):
     - ExpoModulesCore
+  - ExpoCrypto (13.0.2):
+    - ExpoModulesCore
   - ExpoDocumentPicker (11.10.1):
     - ExpoModulesCore
   - ExpoFileSystem (16.0.6):
@@ -38,6 +40,8 @@ PODS:
     - ReactCommon/turbomodule/core
   - ExpoSecureStore (12.8.1):
     - ExpoModulesCore
+  - ExpoWebBrowser (12.8.2):
+    - ExpoModulesCore
   - FBLazyVector (0.73.8)
   - FBReactNativeSpec (0.73.8):
     - RCT-Folly (= 2022.05.16.00)
@@ -1031,6 +1035,10 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
+  - react-native-webview (13.6.4):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - React-nativeconfig (0.73.8)
   - React-NativeModulesApple (0.73.8):
     - glog
@@ -1261,11 +1269,13 @@ DEPENDENCIES:
   - EXFont (from `../node_modules/expo-font/ios`)
   - Expo (from `../node_modules/expo`)
   - ExpoClipboard (from `../node_modules/expo-clipboard/ios`)
+  - ExpoCrypto (from `../node_modules/expo-crypto/ios`)
   - ExpoDocumentPicker (from `../node_modules/expo-document-picker/ios`)
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - ExpoSecureStore (from `../node_modules/expo-secure-store/ios`)
+  - ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
   - Flipper (= 0.201.0)
@@ -1326,6 +1336,7 @@ DEPENDENCIES:
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1412,6 +1423,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo"
   ExpoClipboard:
     :path: "../node_modules/expo-clipboard/ios"
+  ExpoCrypto:
+    :path: "../node_modules/expo-crypto/ios"
   ExpoDocumentPicker:
     :path: "../node_modules/expo-document-picker/ios"
   ExpoFileSystem:
@@ -1422,6 +1435,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../node_modules/expo-secure-store/ios"
+  ExpoWebBrowser:
+    :path: "../node_modules/expo-web-browser/ios"
   FBLazyVector:
     :path: "../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
@@ -1493,6 +1508,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-randombytes"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1567,16 +1584,18 @@ SPEC CHECKSUMS:
   CoinbaseWalletSDKExpo: c79420eb009f482f768c23b6768fc5b2d7c98777
   Connect-Swift: d38eedc1907d440314f8d26d5a038a00cbb0f6f1
   DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
-  EXApplication: 137189a3f149b4e8e546884629392c3efc94cbd3
-  EXConstants: 988aa430ca0f76b43cd46b66e7fae3287f9cc2fc
+  EXApplication: 16bcea16789221bd566e64b5ea2608cf7756b005
+  EXConstants: a5f6276e565d98f9eb4280f81241fc342d641590
   EXFont: 21b9c760abd593ce8f0d5386b558ced76018506f
   Expo: fb745b3074989670b6641f9f20463e8ee56a69ca
   ExpoClipboard: b8f76767b0dbaefb3be7adbf85049fd85861d527
+  ExpoCrypto: 156078f266bf28f80ecf5e2a9c3a0d6ffce07a1c
   ExpoDocumentPicker: 70254802886e29a45d4ad25486e64b6fc9c8f0cc
   ExpoFileSystem: a9273932e69a9a1e1a8d01b6ba895bb8294bbea2
   ExpoKeepAwake: 0f5cad99603a3268e50af9a6eb8b76d0d9ac956c
   ExpoModulesCore: 96d1751929ad10622773bb729ab28a8423f0dd0c
   ExpoSecureStore: c84ae37d1c36f38524d289c67c3a2e3fc56f1108
+  ExpoWebBrowser: e31c97230ea93b51a2a74c6c2381b0d4fca5698c
   FBLazyVector: df34a309e356a77581809834f6ec3fbe7153f620
   FBReactNativeSpec: bbe8b686178e5ce03d1d8a356789f211f91f31b8
   Flipper: c7a0093234c4bdd456e363f2f19b2e4b27652d44
@@ -1631,6 +1650,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
+  react-native-webview: ff06d1fe175ff827882ec88b696a7efcafa7e98d
   React-nativeconfig: 2e44d0d2dd222b12a5183f4bcaa4a91881497acb
   React-NativeModulesApple: 8aa032fe6c92c1a3c63e4809d42816284a56a9b0
   React-perflogger: f9367428cf475f4606b5965c1d5a71781bb95299

package.json

@@ -17,7 +17,9 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.496.0",
+    "@ethersproject/shims": "^5.7.0",
     "@nozbe/watermelondb": "^0.27.1",
+    "@privy-io/expo": "^0.15.1",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-clipboard/clipboard": "^1.13.2",
     "@react-native-community/blur": "^4.3.2",
@@ -32,6 +34,12 @@
     "aws-sdk": "^2.1540.0",
     "ethers": "^5",
     "expo": ">=50.0.0-0 <51.0.0",
+    "expo-application": "~5.8.4",
+    "expo-constants": "~15.4.6",
+    "expo-crypto": "^13.0.2",
+    "expo-linking": "~6.2.2",
+    "expo-secure-store": "~12.8.1",
+    "expo-web-browser": "~12.8.2",
     "i18n-js": "^4.3.2",
     "native-base": "^3.4.28",
     "node-libs-browser": "^2.2.1",
@@ -56,6 +64,7 @@
     "react-native-screens": "^3.29.0",
     "react-native-svg": "^13.9.0",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-webview": "13.6.4",
     "wagmi": "^1.4.12"
   },
   "devDependencies": {

src/context/AuthContext.tsx

@@ -1,4 +1,3 @@
-import {useAddress} from '@thirdweb-dev/react-native';
 import React, {
   FC,
   PropsWithChildren,
@@ -7,6 +6,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
+import {useClient} from '../hooks/useClient';
 import {getClientKeys} from '../services/encryptedStorage';
 
 type AuthedStatus = 'LOADING' | 'AUTHED' | 'UNAUTHED';
@@ -25,7 +25,8 @@ export const AuthContext = createContext<AuthContextValue>({
 
 export const AuthProvider: FC<PropsWithChildren> = ({children}) => {
   const [authStatus, setAuthStatus] = useState<AuthedStatus>('LOADING');
-  const address = useAddress();
+  const {client} = useClient();
+  const address = client?.address;
 
   useEffect(() => {
     if (!address) {

src/context/ClientContext.tsx

@@ -1,4 +1,4 @@
-import {useAddress, useConnectionStatus} from '@thirdweb-dev/react-native';
+import {usePrivy} from '@privy-io/expo';
 import {Client} from '@xmtp/react-native-sdk';
 import React, {
   FC,
@@ -35,21 +35,24 @@ export const ClientProvider: FC<PropsWithChildren> = ({children}) => {
     null,
   );
   const [loading, setLoading] = useState(true);
-  const address = useAddress();
-  const status = useConnectionStatus();
+  const {user, isReady} = usePrivy();
 
   useEffect(() => {
-    if (status === 'unknown' || status === 'connecting') {
+    if (!isReady) {
       return;
     }
-    if (status === 'disconnected') {
+    if (!user) {
       return setLoading(false);
     }
-    if (!address) {
-      // Address still shows as undefined even when connected
-      return;
+    const wallet = user.linked_accounts.find(account => {
+      return account.type === 'wallet';
+    });
+    if (!wallet) {
+      return setLoading(false);
     }
-    getClientKeys(address as `0x${string}`)
+    const address = wallet?.address as `0x${string}`;
+
+    getClientKeys(address)
       .then(keys => {
         if (!keys) {
           return setLoading(false);
@@ -71,7 +74,7 @@ export const ClientProvider: FC<PropsWithChildren> = ({children}) => {
       .catch(() => {
         return setLoading(false);
       });
-  }, [address, status]);
+  }, [isReady, user]);
 
   return (
     <ClientContext.Provider

src/polyfills.ts

@@ -1,2 +1,4 @@
-import '@thirdweb-dev/react-native-compat';
+import '@ethersproject/shims';
+import 'fast-text-encoding';
+import 'react-native-get-random-values';
 import 'react-native-url-polyfill/auto';

src/screens/AccountSettingsScreen.tsx

@@ -5,7 +5,6 @@ import {
   useENS,
   useWallet,
 } from '@thirdweb-dev/react-native';
-import {} from 'ethers';
 import {Box, FlatList, HStack, SectionList, Switch, VStack} from 'native-base';
 import React, {useCallback, useMemo, useState} from 'react';
 import {

src/screens/OnboardingEnableIdentityScreen.tsx

@@ -1,8 +1,11 @@
-import {useDisconnect, useSigner} from '@thirdweb-dev/react-native';
+import {useEmbeddedWallet} from '@privy-io/expo';
+import {useDisconnect} from '@thirdweb-dev/react-native';
 import {Client} from '@xmtp/react-native-sdk';
 import {VStack} from 'native-base';
 import React, {useCallback, useEffect, useState} from 'react';
 import {Alert, DeviceEventEmitter, Image} from 'react-native';
+import {createWalletClient, custom} from 'viem';
+import {mainnet} from 'viem/chains';
 import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
 import {Screen} from '../components/common/Screen';
@@ -45,16 +48,29 @@ export const OnboardingEnableIdentityScreen = () => {
   const [step, setStep] = useState<Step>('CREATE_IDENTITY');
   const {navigate} = useTypedNavigation();
   const disconnect = useDisconnect();
-  const signer = useSigner();
+  const wallet = useEmbeddedWallet();
   const {setClient} = useClientContext();
 
   useEffect(() => {
     const startClientCreation = async () => {
-      if (!signer) {
+      const provider = await wallet?.getProvider?.();
+      if (!provider) {
         return;
       }
       try {
-        const client = await Client.create(signer, {
+        await provider.request({
+          method: 'wallet_switchEthereumChain',
+          // Replace '0x1' with the chain ID of your desired network
+          params: [{chainId: '0x1'}],
+        });
+        // const ethersProvider = new ethers.providers.Web3Provider(provider);
+        // const signer = ethersProvider.getSigner();
+        const walletClient = createWalletClient({
+          // Replace this with your desired network that you imported from viem
+          chain: mainnet,
+          transport: custom(provider),
+        });
+        const client = await Client.create(walletClient, {
           enableAlphaMls: true,
           env: AppConfig.XMTP_ENV,
           preEnableIdentityCallback: async () => {
@@ -67,16 +83,15 @@ export const OnboardingEnableIdentityScreen = () => {
           codecs: supportedContentTypes,
         });
         const keys = await client.exportKeyBundle();
-        const address = await signer.getAddress();
-        saveClientKeys(address as `0x${string}`, keys);
+        saveClientKeys(client.address as `0x${string}`, keys);
         setClient(client);
       } catch (e: any) {
         console.log('Error creating client', e);
         Alert.alert('Error creating client', e?.message);
       }
     };
     startClientCreation();
-  }, [setClient, signer]);
+  }, [setClient, wallet]);
 
   const handleCreateIdentity = useCallback(() => {
     DeviceEventEmitter.emit(EventEmitterEvents.CREATE_IDENTITY);