Skip to content

Commit

Permalink
Simplifies ENS lookup for web3 modal account (#505)
Browse files Browse the repository at this point in the history 
* simplifies ENS lookup for web3 modal account

* fixes `ConnectWalletModal` unit test

* fixes `Web3ModalButton` unit test

* nit
  • Loading branch information
@jtrein
jtrein authored Dec 7, 2021
1 parent f38fb78 commit b59ad44
Showing 8 changed files with 53 additions and 66 deletions.
26 changes: 5 additions & 21 deletions src/components/web3/ConnectWalletModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,13 +8,12 @@ import {CHAINS} from '../../config';
import {CopyWithTooltip} from '../common/CopyWithTooltip';
import {CycleEllipsis} from '../feedback';
import {StoreState} from '../../store/types';
import {useENSName, useIsDefaultChain} from './hooks';
import {useIsDefaultChain} from './hooks';
import {useWeb3Modal} from './hooks';
import {WalletIcon} from '.';
import LoaderLarge from '../feedback/LoaderLarge';
import Modal from '../common/Modal';
import TimesSVG from '../../assets/svg/TimesSVG';
import {normalizeString} from '../../util/helpers';

type ConnectWalletModalProps = {
modalProps: {
@@ -53,6 +52,7 @@ export default function ConnectWalletModal(
// @todo Use and handle error in the UI
// error,
account,
accountENS,
connected,
connectWeb3Modal,
disconnectWeb3Modal,
@@ -63,9 +63,6 @@ export default function ConnectWalletModal(

const {defaultChainError, isDefaultChain} = useIsDefaultChain();

const [ensReverseResolvedAddresses, setAddressesToENSReverseResolve] =
useENSName();

/**
* Their hooks
*/
@@ -80,12 +77,6 @@ export default function ConnectWalletModal(
const isWrongNetwork: boolean = isDefaultChain === false;
const isChainGanache = networkId === CHAINS.GANACHE;
const memberProfilePath: string = `/members/${connectedMemberAddress}`;
const [ensName] = ensReverseResolvedAddresses;

const ensNameFound: boolean =
account && normalizeString(ensName) !== normalizeString(account)
? true
: false;

const displayOptions: JSX.Element[] = Object.entries(providerOptions)
// If mobile, filter-out `"injected"`
@@ -136,13 +127,6 @@ export default function ConnectWalletModal(
}
}, [isOpen, memberProfilePath, onRequestClose, pathname, previousPathname]);

// Set eth addresses to ENS reverse resolve
useEffect(() => {
if (!account) return;

setAddressesToENSReverseResolve([account]);
}, [account, setAddressesToENSReverseResolve]);

/**
* Functions
*/
@@ -239,13 +223,13 @@ export default function ConnectWalletModal(
data-tip={
isCopied
? 'copied!'
: ensNameFound
? `${ensName} (${account})`
: accountENS
? `${accountENS} (${account})`
: 'copy'
}
onClick={setCopied}
ref={elementRef}>
{ensName || account}
{accountENS || account}
</span>
)}
textToCopy={account}
10 changes: 4 additions & 6 deletions src/components/web3/ConnectWalletModal.unit.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -2,14 +2,15 @@ import {render, screen, waitFor} from '@testing-library/react';
import {Store} from 'redux';
import {useDispatch, useSelector} from 'react-redux';
import userEvent from '@testing-library/user-event';
import Web3 from 'web3';

import {
connectModalClose,
connectModalOpen,
setConnectedMember,
} from '../../store/actions';
import {CHAINS} from '../../config';
import {DEFAULT_ETH_ADDRESS} from '../../test/helpers';
import {DEFAULT_ETH_ADDRESS, FakeHttpProvider} from '../../test/helpers';
import {REVERSE_RECORDS_ADDRESS} from './helpers';
import {StoreState} from '../../store/types';
import {useEffect} from 'react';
@@ -104,13 +105,9 @@ describe('ConnectWalletModal unit tests', () => {
render(
<Wrapper
useWallet
web3ModalContext={{accountENS: 'someone.eth'}}
getProps={(p) => {
store = p.store;

// Mock the `ReverseRecords.getNames` response
p.mockWeb3Provider.injectResult(
p.web3Instance.eth.abi.encodeParameter('string[]', ['someone.eth'])
);
}}>
<TestApp />
</Wrapper>
@@ -214,6 +211,7 @@ describe('ConnectWalletModal unit tests', () => {
const {getByText} = render(
<Wrapper
useWallet
web3ModalContext={{accountENS: 'someone.eth'}}
getProps={(p) => {
store = p.store;

29 changes: 4 additions & 25 deletions src/components/web3/Web3ModalButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import {isMobile} from '@walletconnect/browser-utils';
import {useDispatch} from 'react-redux';
import {useEffect} from 'react';

import {connectModalOpen} from '../../store/actions';
import {normalizeString, truncateEthAddress} from '../../util/helpers';
import {useENSName, useIsDefaultChain} from './hooks';
import {truncateEthAddress} from '../../util/helpers';
import {useIsDefaultChain} from './hooks';
import {useWeb3Modal} from './hooks';
import {WalletIcon} from './';

@@ -28,12 +27,9 @@ export default function ConnectWalletButton({
* Our hooks
*/

const {account, connected, web3Modal} = useWeb3Modal();
const {account, accountENS, connected, web3Modal} = useWeb3Modal();
const {isDefaultChain} = useIsDefaultChain();

const [ensReverseResolvedAddresses, setAddressesToENSReverseResolve] =
useENSName();

/**
* Their hooks
*/
@@ -44,25 +40,8 @@ export default function ConnectWalletButton({
* Variables
*/

const [ensName] = ensReverseResolvedAddresses;
const isWrongNetwork: boolean = isDefaultChain === false;

const ensNameFound: boolean =
account && normalizeString(ensName) !== normalizeString(account)
? true
: false;

/**
* Effects
*/

// Set eth addresses to ENS reverse resolve
useEffect(() => {
if (!account) return;

setAddressesToENSReverseResolve([account]);
}, [account, setAddressesToENSReverseResolve]);

/**
* Functions
*/
@@ -75,7 +54,7 @@ export default function ConnectWalletButton({
}

if (account) {
return ensNameFound ? ensName : truncateEthAddress(account);
return accountENS || truncateEthAddress(account);
}

return 'Connect';
1 change: 1 addition & 0 deletions src/components/web3/Web3ModalButton.unit.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -57,6 +57,7 @@ describe('Web3ModalButton unit tests', () => {
);
}}
web3ModalContext={{
accountENS: 'someone.eth',
web3Modal: {cachedProvider: 'injected'} as Core,
}}>
<Web3ModalButton />
25 changes: 25 additions & 0 deletions src/components/web3/Web3ModalManager.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import useWeb3ModalManager, {
} from './hooks/useWeb3ModalManager';
import {AsyncStatus} from '../../util/types';
import {ETHEREUM_PROVIDER_URL} from '../../config';
import {normalizeString} from '../../util/helpers';
import {useENSName} from './hooks';

type Web3ModalProviderArguments = {
defaultChain?: number;
@@ -33,6 +35,7 @@ type Web3ModalManagerProps = {

export type Web3ModalContextValue = {
account: string | undefined;
accountENS?: string;
connected: boolean | undefined;
connectWeb3Modal: (providerName: string) => void;
disconnectWeb3Modal: () => void;
@@ -119,6 +122,20 @@ export default function Web3ModalManager({
web3Modal,
} = useWeb3ModalManager(web3ModalProviderArguments);

const [ensReverseResolvedAddresses, setAddressesToENSReverseResolve] =
useENSName(web3Instance);

/**
* Variables
*/

const [ensName] = ensReverseResolvedAddresses;

const accountENS: string | undefined =
ensName && normalizeString(ensName) !== normalizeString(account)
? ensName
: undefined;

/**
* Effects
*/
@@ -136,12 +153,20 @@ export default function Web3ModalManager({
}
}, [connected, initialCachedConnectorCheckStatus]);

// Set eth addresses to ENS reverse resolve
useEffect(() => {
if (!account) return;

setAddressesToENSReverseResolve([account]);
}, [account, setAddressesToENSReverseResolve]);

/**
* Render
*/

const web3ModalContext: Web3ModalContextValue = {
account,
accountENS,
connected,
connectWeb3Modal,
disconnectWeb3Modal,
22 changes: 11 additions & 11 deletions src/components/web3/hooks/useENSName.ts
View file
Original file line number Diff line number Diff line change
@@ -2,12 +2,18 @@ import {useCallback, useEffect, useState} from 'react';
import Web3 from 'web3';

import {reverseResolveENS} from '../helpers';
import {useWeb3Modal} from '.';

export function useENSName(): [
state: string[],
setState: (a: string[]) => void
] {
/**
* A hook to reverse resolve ENS addresses by setting
* the addresses, using the returned callback, and then receving
* the response.
*
* @param web3Instance `Web3`
* @returns `[state: string[], setState: (a: string[]) => void]`
*/
export function useENSName(
web3Instance: Web3 | undefined
): [state: string[], setState: (a: string[]) => void] {
/**
* State
*/
@@ -18,12 +24,6 @@ export function useENSName(): [
string[]
>([]);

/**
* Our hooks
*/

const {web3Instance} = useWeb3Modal();

/**
* Cached callbacks
*/
4 changes: 2 additions & 2 deletions src/components/web3/hooks/useENSName.unit.test.ts
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ describe('useENSName unit tests', () => {

await act(async () => {
const {result, waitForValueToChange} = await renderHook(
() => useENSName(),
() => useENSName(web3Instance),
{
wrapper: Wrapper,
initialProps: {
@@ -64,7 +64,7 @@ describe('useENSName unit tests', () => {

await act(async () => {
const {result, waitForValueToChange} = await renderHook(
() => useENSName(),
() => useENSName(web3Instance),
{
wrapper: Wrapper,
initialProps: {
2 changes: 1 addition & 1 deletion src/pages/members/hooks/useMembers.ts
View file
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export default function useMembers(): UseMembersReturn {
const {web3Instance} = useWeb3Modal();

const [ensReverseResolvedAddresses, setAddressesToENSReverseResolve] =
useENSName();
useENSName(web3Instance);

/**
* GQL Query

0 comments on commit b59ad44

Please sign in to comment.