From cfc4f0e865bb5e5892e6a37adddbb1baf9250d11 Mon Sep 17 00:00:00 2001 From: Alex Risch Date: Tue, 28 May 2024 19:18:15 -0600 Subject: [PATCH] feat: Remove Thirdweb Removed helper hooks from thirdweb that were being used after onboarding This will allow for easier transition to individual wallet providers --- src/components/ConversationListHeader.tsx | 8 ++-- src/consts/Chains.ts | 4 ++ src/hooks/useAddress.ts | 9 +++++ src/hooks/useAuthed.ts | 1 - src/hooks/useContactInfo.ts | 15 ++++--- src/hooks/useContacts.ts | 7 +--- src/screens/AccountSettingsScreen.tsx | 41 ++++++++++--------- src/screens/DevScreen.tsx | 4 +- src/screens/QrCodeScreen.tsx | 4 +- src/utils/getEnsInfo.ts | 48 ++++++----------------- 10 files changed, 63 insertions(+), 78 deletions(-) create mode 100644 src/consts/Chains.ts create mode 100644 src/hooks/useAddress.ts diff --git a/src/components/ConversationListHeader.tsx b/src/components/ConversationListHeader.tsx index 1e003a4..f89b95a 100644 --- a/src/components/ConversationListHeader.tsx +++ b/src/components/ConversationListHeader.tsx @@ -1,4 +1,3 @@ -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'; @@ -6,6 +5,8 @@ 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 = ({ 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); diff --git a/src/consts/Chains.ts b/src/consts/Chains.ts new file mode 100644 index 0000000..9b19319 --- /dev/null +++ b/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]; diff --git a/src/hooks/useAddress.ts b/src/hooks/useAddress.ts new file mode 100644 index 0000000..e105f80 --- /dev/null +++ b/src/hooks/useAddress.ts @@ -0,0 +1,9 @@ +import {useClient} from './useClient'; + +export const useAddress = () => { + const {client, loading} = useClient(); + return { + address: client?.address, + loading, + }; +}; diff --git a/src/hooks/useAuthed.ts b/src/hooks/useAuthed.ts index 587dce8..c645853 100644 --- a/src/hooks/useAuthed.ts +++ b/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'; diff --git a/src/hooks/useContactInfo.ts b/src/hooks/useContactInfo.ts index 6328c32..365db76 100644 --- a/src/hooks/useContactInfo.ts +++ b/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({ 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); } diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts index 9092d7e..fe64a25 100644 --- a/src/hooks/useContacts.ts +++ b/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(() => { diff --git a/src/screens/AccountSettingsScreen.tsx b/src/screens/AccountSettingsScreen.tsx index 12d2782..e279ea2 100644 --- a/src/screens/AccountSettingsScreen.tsx +++ b/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]}> - + {item.name} {item.address} @@ -355,12 +347,12 @@ export const AccountSettingsScreen = () => { - {addresses.map(address => ( + {addresses.map(addressItem => ( ))} @@ -420,3 +412,10 @@ export const AccountSettingsScreen = () => { ); }; + +const styles = StyleSheet.create({ + avatar: {marginRight: 16}, + nameContainer: { + justifyContent: 'flex-start', + }, +}); diff --git a/src/screens/DevScreen.tsx b/src/screens/DevScreen.tsx index c92127b..906680c 100644 --- a/src/screens/DevScreen.tsx +++ b/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 = ({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]}); diff --git a/src/screens/QrCodeScreen.tsx b/src/screens/QrCodeScreen.tsx index 28333b5..d8254c6 100644 --- a/src/screens/QrCodeScreen.tsx +++ b/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); diff --git a/src/utils/getEnsInfo.ts b/src/utils/getEnsInfo.ts index 6170934..c48d81b 100644 --- a/src/utils/getEnsInfo.ts +++ b/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, + }; };