Merge pull request #103 from xmtp-labs/ar/remove-thirdweb-part1

feat: Remove Thirdweb

src/components/ConversationListHeader.tsx

@@ -1,11 +1,12 @@
-import {useAddress, useENS} from '@thirdweb-dev/react-native';
 import {Box, HStack, VStack} from 'native-base';
 import React, {FC, useCallback} from 'react';
 import {Pressable} from 'react-native';
 import {AvatarWithFallback} from '../components/AvatarWithFallback';
 import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
 import {Text} from '../components/common/Text';
+import {useAddress} from '../hooks/useAddress';
+import {useContactInfo} from '../hooks/useContactInfo';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
 import {ScreenNames} from '../navigation/ScreenNames';
@@ -25,9 +26,8 @@ export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
   onShowMessageRequests,
 }) => {
   const {navigate} = useTypedNavigation();
-  const address = useAddress();
-  const {data} = useENS();
-  const {avatarUrl} = data ?? {};
+  const {address} = useAddress();
+  const {avatarUrl} = useContactInfo(address);
 
   const handleAccountPress = useCallback(() => {
     navigate(ScreenNames.Account);

src/consts/Chains.ts

@@ -0,0 +1,4 @@
+import {mainnet} from 'viem/chains';
+
+export const SUPPORTED_CHAIN = mainnet;
+export const RPC_URL = SUPPORTED_CHAIN.rpcUrls.default.http[0];

src/hooks/useAddress.ts

@@ -0,0 +1,9 @@
+import {useClient} from './useClient';
+
+export const useAddress = () => {
+  const {client, loading} = useClient();
+  return {
+    address: client?.address,
+    loading,
+  };
+};

src/hooks/useAuthed.ts

@@ -1,4 +1,3 @@
-// import {useConnectionStatus, useSigner} from '@thirdweb-dev/react-native';
 import {useContext} from 'react';
 import {AuthContext} from '../context/AuthContext';
 

src/hooks/useContactInfo.ts

@@ -1,4 +1,3 @@
-import {useSupportedChains, useWalletContext} from '@thirdweb-dev/react-native';
 import {useEffect, useState} from 'react';
 import {mmkvStorage} from '../services/mmkvStorage';
 import {formatAddress} from '../utils/formatAddress';
@@ -10,16 +9,17 @@ interface ContactInfoState {
   loading: boolean;
 }
 
-export const useContactInfo = (address: string) => {
+export const useContactInfo = (address?: string) => {
   const [state, setState] = useState<ContactInfoState>({
     displayName: null,
     avatarUrl: null,
     loading: true,
   });
-  const supportedChains = useSupportedChains();
-  const {clientId} = useWalletContext();
 
   useEffect(() => {
+    if (!address) {
+      return;
+    }
     const cachedName = mmkvStorage.getEnsName(address);
     const cachedAvatar = mmkvStorage.getEnsAvatar(address);
     setState({
@@ -28,7 +28,7 @@ export const useContactInfo = (address: string) => {
       loading: true,
     });
 
-    getEnsInfo(address, supportedChains, clientId)
+    getEnsInfo(address)
       .then(({ens, avatarUrl}) => {
         if (ens) {
           mmkvStorage.saveEnsName(address, ens);
@@ -51,9 +51,12 @@ export const useContactInfo = (address: string) => {
           loading: false,
         });
       });
-  }, [address, supportedChains, clientId]);
+  }, [address]);
 
   useEffect(() => {
+    if (!address) {
+      return;
+    }
     if (state.displayName) {
       mmkvStorage.saveEnsName(address, state.displayName);
     }

src/hooks/useContacts.ts

@@ -1,4 +1,3 @@
-import {useSupportedChains, useWalletContext} from '@thirdweb-dev/react-native';
 import {useEffect, useMemo, useState} from 'react';
 import {formatAddress} from '../utils/formatAddress';
 import {getEnsInfo} from '../utils/getEnsInfo';
@@ -9,15 +8,13 @@ export const useContacts = () => {
   const [contacts, setContacts] = useState<{name: string; address: string}[]>(
     [],
   );
-  const supportedChains = useSupportedChains();
-  const {clientId} = useWalletContext();
 
   useEffect(() => {
     const fetchConsentList = async () => {
       const list = await client?.contacts?.consentList();
       list?.forEach(async item => {
         if (item.permissionType === 'allowed') {
-          getEnsInfo(item.value, supportedChains, clientId)
+          getEnsInfo(item.value)
             .then(({ens}) => {
               setContacts(prev => [
                 ...prev,
@@ -40,7 +37,7 @@ export const useContacts = () => {
       });
     };
     fetchConsentList();
-  }, [client?.contacts, client?.conversations, clientId, supportedChains]);
+  }, [client?.contacts, client?.conversations]);
 
   // Avoids hot refresh adding the same contact multiple times
   const filterContacts = useMemo(() => {

src/screens/AccountSettingsScreen.tsx

@@ -1,11 +1,6 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import {useFocusEffect} from '@react-navigation/native';
-import {
-  useAddress,
-  useDisconnect,
-  useENS,
-  useWallet,
-} from '@thirdweb-dev/react-native';
+import {useDisconnect} from '@thirdweb-dev/react-native';
 import {Box, FlatList, HStack, SectionList, Switch, VStack} from 'native-base';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {
@@ -14,6 +9,7 @@ import {
   Platform,
   Pressable,
   SectionListRenderItem,
+  StyleSheet,
 } from 'react-native';
 import {
   checkNotifications,
@@ -29,6 +25,8 @@ import {Screen} from '../components/common/Screen';
 import {Text} from '../components/common/Text';
 import {AppConfig} from '../consts/AppConfig';
 import {useClientContext} from '../context/ClientContext';
+import {useAddress} from '../hooks/useAddress';
+import {useContactInfo} from '../hooks/useContactInfo';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
 import {ScreenNames} from '../navigation/ScreenNames';
@@ -51,14 +49,8 @@ interface Wallet {
 }
 
 const useData = () => {
-  const address = useAddress();
-  const wallet = useWallet();
-  const {data} = useENS();
-  const {ens, avatarUrl} = data ?? {};
-  if (!wallet) {
-    throw new Error('Wallet not found');
-  }
-
+  const {address} = useAddress();
+  const {displayName: ens, avatarUrl} = useContactInfo(address);
   const addresses: Address[] = [
     {
       display: address ? formatAddress(address) : '',
@@ -132,7 +124,7 @@ export const AccountSettingsScreen = () => {
   const {avatarUrl, addresses, wallets, name} = useData();
   const [walletsShown, setWalletsShown] = useState(false);
   const disconnect = useDisconnect();
-  const address = useAddress();
+  const {address} = useAddress();
   const [notificationsEnabled, setNotificationsEnabled] = useState(false);
   const appState = useRef(AppState.currentState);
 
@@ -284,12 +276,12 @@ export const AccountSettingsScreen = () => {
           marginX={'16px'}
           space={[2, 3]}>
           <AvatarWithFallback
-            style={{marginRight: 16}}
+            style={styles.avatar}
             size={32}
             address={item.address}
             avatarUri={item.image}
           />
-          <VStack flex={1} style={{justifyContent: 'flex-start'}}>
+          <VStack flex={1} style={styles.nameContainer}>
             <Text typography="text-base/bold">{item.name}</Text>
             <Text typography="text-xs/mono medium" color={colors.textSecondary}>
               {item.address}
@@ -355,12 +347,12 @@ export const AccountSettingsScreen = () => {
           </Text>
         </Button>
         <HStack flexWrap={'wrap'} justifyContent={'center'}>
-          {addresses.map(address => (
+          {addresses.map(addressItem => (
             <Pill
-              key={address.display}
+              key={addressItem.display}
               size="sm"
-              text={address.display}
-              leftIconName={getIconName(address.type)}
+              text={addressItem.display}
+              leftIconName={getIconName(addressItem.type)}
             />
           ))}
         </HStack>
@@ -420,3 +412,10 @@ export const AccountSettingsScreen = () => {
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  avatar: {marginRight: 16},
+  nameContainer: {
+    justifyContent: 'flex-start',
+  },
+});

src/screens/DevScreen.tsx

@@ -1,11 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import {useQueryClient} from '@tanstack/react-query';
-import {useAddress} from '@thirdweb-dev/react-native';
 import {Box, Container, Pressable, ScrollView} from 'native-base';
 import React, {FC, useCallback, useEffect, useMemo, useState} from 'react';
 import {Icon} from '../components/common/Icon';
 import {Screen} from '../components/common/Screen';
 import {Text} from '../components/common/Text';
+import {useAddress} from '../hooks/useAddress';
 import {useClient} from '../hooks/useClient';
 import {translate} from '../i18n';
 import {QueryKeys} from '../queries/QueryKeys';
@@ -94,7 +94,7 @@ const DataItem: FC<DataItemProps> = ({title, data}) => {
 
 export const DevScreen = () => {
   const {client} = useClient();
-  const address = useAddress();
+  const {address} = useAddress();
   const {goBack} = useNavigation();
   const queryClient = useQueryClient();
   const list = queryClient.getQueriesData({queryKey: [QueryKeys.List]});

src/screens/QrCodeScreen.tsx

@@ -1,6 +1,5 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import {BlurView} from '@react-native-community/blur';
-import {useAddress} from '@thirdweb-dev/react-native';
 import {Box, Center, Pressable} from 'native-base';
 import React, {useCallback} from 'react';
 import {Platform, StyleSheet} from 'react-native';
@@ -10,13 +9,14 @@ import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
 import {Screen} from '../components/common/Screen';
 import {Text} from '../components/common/Text';
+import {useAddress} from '../hooks/useAddress';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
 import {blues, colors, reds} from '../theme/colors';
 
 export const QrCodeScreen = () => {
   const {goBack} = useTypedNavigation();
-  const address = useAddress();
+  const {address} = useAddress();
   const value = `ephemera-chat://new_conversation/${address}`;
   const handleCopy = useCallback(() => {
     Clipboard.setString(value);

src/utils/getEnsInfo.ts

@@ -1,40 +1,14 @@
-import {Chain} from '@thirdweb-dev/chains';
-import {getChainProvider} from '@thirdweb-dev/react-native';
 import {ethers} from 'ethers';
+import {RPC_URL} from '../consts/Chains';
 
-export const getEnsInfo = async (
-  address: string,
-  supportedChains: Chain[],
-  clientId?: string,
-) => {
-  const ethereum = supportedChains.find(chain => chain.chainId === 1);
-  const provider = getChainProvider(1, {
-    clientId,
-    supportedChains: ethereum
-      ? [
-          {
-            chainId: 1,
-            rpc: [...ethereum.rpc],
-            nativeCurrency: ethereum.nativeCurrency,
-            slug: ethereum.slug,
-          },
-        ]
-      : undefined,
-  });
-  if (provider instanceof ethers.providers.JsonRpcProvider) {
-    const [ens, avatarUrl] = await Promise.all([
-      provider.lookupAddress(address),
-      provider.getAvatar(address),
-    ]);
-    return {
-      ens,
-      avatarUrl,
-    };
-  } else {
-    const ens = await provider.lookupAddress(address);
-    return {
-      ens,
-      avatarUrl: null,
-    };
-  }
+export const getEnsInfo = async (address: string) => {
+  const provider = new ethers.providers.JsonRpcProvider(RPC_URL);
+  const [ens, avatarUrl] = await Promise.all([
+    provider.lookupAddress(address),
+    provider.getAvatar(address),
+  ]);
+  return {
+    ens,
+    avatarUrl,
+  };
 };