Merge pull request #524 from makerdao/adam/delegate-reqs

Remove default provider from getENS

README.md

@@ -1,6 +1,6 @@
 <h1 align="center" style="margin-top: 1em; margin-bottom: 3em;">
   <p><a href="https://vote.makerdao.com/"><img alt="maker logo" src="./maker-logo.png" alt="vote.makerdao.com" width="125"></a></p>
-  <p> <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" alt="Waving Hand" width="25px"> Maker Governance Portal</p>
+  <p>Maker Governance Portal</p>
 </h1>
 
 An open source interface for Dai Credit System governance

lib/davatar/Image.tsx

@@ -24,13 +24,11 @@ export interface Props {
   address?: string | null;
   style?: CSSProperties;
   className?: string;
-  // deprecated
-  graphApiKey?: string;
   provider?: BaseProvider | null;
   defaultComponent?: ReactChild | ReactChild[];
 }
 
-export const getCachedUrl = (key: string) => {
+export const getCachedUrl = (key: string): string | null => {
   const normalizedKey = key.toLowerCase();
   const cachedItem = window.localStorage.getItem(`davatar/${normalizedKey}`);
 
@@ -82,7 +80,15 @@ export const getGatewayUrl = (uri: string, tokenId?: string): string => {
   return tokenId ? url.replaceAll('{id}', tokenId) : url;
 };
 
-export default function Avatar({ uri, style, className, size, address, provider, defaultComponent }: Props) {
+export default function Avatar({
+  uri,
+  style,
+  className,
+  size,
+  address,
+  provider,
+  defaultComponent
+}: Props): JSX.Element {
   const [url, setUrl] = useState<string | null>(null);
   const [loaded, setLoaded] = useState(false);
 

lib/davatar/index.tsx

@@ -1,5 +1,5 @@
-import { Web3Provider, getDefaultProvider, BaseProvider } from '@ethersproject/providers';
 import { SupportedChainId } from 'modules/web3/constants/chainID';
+import { useActiveWeb3React } from 'modules/web3/hooks/useActiveWeb3React';
 import { useEffect, useState, ReactChild, CSSProperties } from 'react';
 
 import Image from './Image';
@@ -9,48 +9,20 @@ export { default as Image } from './Image';
 export interface DavatarProps {
   size: number;
   address: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  provider?: any;
-  // deprecated
-  graphApiKey?: string;
   defaultComponent?: ReactChild | ReactChild[];
   style?: CSSProperties;
 }
 
-export default function Davatar({
-  size,
-  address,
-  provider,
-  graphApiKey,
-  defaultComponent,
-  style
-}: DavatarProps) {
+export default function Davatar({ size, address, defaultComponent, style }: DavatarProps): JSX.Element {
+  const { chainId, library } = useActiveWeb3React();
   const [avatarUri, setAvatarUri] = useState<string | null>(null);
-  const [ethersProvider, setEthersProvider] = useState<BaseProvider | null>(null);
 
   useEffect(() => {
-    let eth = getDefaultProvider();
-    let chainId;
-    let isEthers = false;
-
-    if (provider) {
-      if (provider.currentProvider?.chainId) {
-        chainId = parseInt(provider.currentProvider.chainId);
-      } else if (provider.network?.chainId) {
-        isEthers = true;
-        chainId = provider.network.chainId;
-      }
-
-      if ([1, 3, 4, 5].includes(chainId)) {
-        eth = isEthers ? (provider as BaseProvider) : new Web3Provider(provider.currentProvider);
-      }
-
-      setEthersProvider(eth);
-
+    if (library) {
       if (chainId !== SupportedChainId.GOERLIFORK) {
-        eth.lookupAddress(address).then(ensName => {
+        library.lookupAddress(address).then(ensName => {
           if (ensName) {
-            eth.getResolver(ensName).then(resolver => {
+            library.getResolver(ensName).then(resolver => {
               resolver &&
                 resolver.getText('avatar').then(avatar => {
                   if (avatar && avatar.length > 0) {
@@ -62,15 +34,14 @@ export default function Davatar({
         });
       }
     }
-  }, [address, provider]);
+  }, [address, library]);
 
   return (
     <Image
       size={size}
       address={address}
       uri={avatarUri}
-      graphApiKey={graphApiKey}
-      provider={ethersProvider}
+      provider={library}
       defaultComponent={defaultComponent}
       style={style}
     />

modules/address/components/Address.tsx

@@ -1,23 +1,31 @@
 import { limitString } from 'lib/string';
 import { formatAddress } from 'lib/utils';
 import { getENS } from 'modules/web3/helpers/ens';
+import { useActiveWeb3React } from 'modules/web3/hooks/useActiveWeb3React';
 import React, { useEffect, useState } from 'react';
 
-export function Address({ address, maxLength }: { address: string; maxLength?: number }): React.ReactElement {
+export const Address = React.memo(function Address({
+  address,
+  maxLength
+}: {
+  address: string;
+  maxLength?: number;
+}): React.ReactElement {
+  const { library } = useActiveWeb3React();
   const [addressFormated, setAddressFormatted] = useState(formatAddress(address || '').toLowerCase());
 
-  async function fetchENSName(address: string) {
-    if (!address) {
+  async function fetchENSName() {
+    if (!address || !library) {
       return;
     }
 
-    const ens = await getENS(address);
+    const ens = await getENS({ address, library });
 
     ens ? setAddressFormatted(ens) : setAddressFormatted(formatAddress(address).toLowerCase());
   }
   useEffect(() => {
     if (address) {
-      fetchENSName(address);
+      fetchENSName();
     }
   }, [address]);
 
@@ -26,4 +34,4 @@ export function Address({ address, maxLength }: { address: string; maxLength?: n
       {maxLength ? limitString(addressFormated, maxLength, '...') : addressFormated}
     </React.Fragment>
   );
-}
+});

modules/address/components/AddressIcon.tsx

@@ -2,7 +2,6 @@ import { Box } from 'theme-ui';
 import Davatar from 'lib/davatar';
 import { useDelegateAddressMap } from 'modules/delegates/hooks/useDelegateAddressMap';
 import { DelegatePicture } from 'modules/delegates/components';
-import { useActiveWeb3React } from 'modules/web3/hooks/useActiveWeb3React';
 
 export default function AddressIcon({
   address,
@@ -12,14 +11,13 @@ export default function AddressIcon({
   width?: number;
 }): React.ReactElement {
   const { data: delegateAddresses } = useDelegateAddressMap();
-  const { library } = useActiveWeb3React();
 
   return (
     <Box sx={{ height: width, width: width }}>
       {delegateAddresses[address] ? (
         <DelegatePicture delegate={delegateAddresses[address]} width={width} />
       ) : (
-        <Davatar size={width} address={address} provider={library} />
+        <Davatar size={width} address={address} />
       )}
     </Box>
   );

modules/app/components/layout/Header.tsx

@@ -132,8 +132,8 @@ const Header = (): JSX.Element => {
   const [showMobileMenu, setShowMobileMenu] = useState(false);
   const bpi = useBreakpointIndex();
   const { account } = useAccount();
-  const { data: gas } = useGasPrice();
   const { network } = useActiveWeb3React();
+  const { data: gas } = useGasPrice({ network });
   const { cache } = useSWRConfig();
   const [mode, setMode] = useColorMode();
 

modules/delegates/components/DelegateAvatarName.tsx

@@ -38,7 +38,7 @@ export default function DelegateAvatarName({ delegate }: { delegate: Delegate })
             </Flex>
           )}
         </Flex>
-        <Address address={delegate.voteDelegateAddress} />
+        {delegate.voteDelegateAddress && <Address address={delegate.voteDelegateAddress} />}
       </Box>
     </Flex>
   );

modules/delegates/components/DelegatePicture.tsx

@@ -4,7 +4,6 @@ import { Icon } from '@makerdao/dai-ui-icons';
 import { Delegate } from 'modules/delegates/types';
 import { DelegateStatusEnum } from 'modules/delegates/delegates.constants';
 import Tooltip from 'modules/app/components/Tooltip';
-import { useActiveWeb3React } from 'modules/web3/hooks/useActiveWeb3React';
 import { Address } from 'modules/address/components/Address';
 import { InternalLink } from 'modules/app/components/InternalLink';
 
@@ -15,8 +14,6 @@ export function DelegatePicture({
   delegate: Delegate;
   width?: number;
 }): React.ReactElement {
-  const { library } = useActiveWeb3React();
-
   const tooltipAvatarWidth = 68;
   const delegateMetrics = (
     <Box sx={{ maxWidth: ['auto', '530px'], width: ['auto', '530px'], display: 'block' }}>
@@ -42,7 +39,7 @@ export function DelegatePicture({
             />
           ) : (
             <Box>
-              <Davatar size={tooltipAvatarWidth} address={delegate.address} provider={library} />
+              <Davatar size={tooltipAvatarWidth} address={delegate.address} />
             </Box>
           )}
           {delegate.status === DelegateStatusEnum.recognized && (
@@ -149,7 +146,7 @@ export function DelegatePicture({
                 />
               ) : (
                 <Box>
-                  <Davatar size={width} address={delegate.address} provider={library} />
+                  <Davatar size={width} address={delegate.address} />
                 </Box>
               )}
             </InternalLink>

modules/web3/helpers/ens.ts

@@ -1,11 +1,16 @@
 import { SupportedNetworks } from '../constants/networks';
 import { getDefaultProvider } from './getDefaultProvider';
+import { Web3Provider } from '@ethersproject/providers';
 
-export async function getENS(address: string): Promise<string | null> {
-  const provider = getDefaultProvider(SupportedNetworks.MAINNET);
-
+export async function getENS({
+  address,
+  library
+}: {
+  address: string;
+  library: Web3Provider;
+}): Promise<string | null> {
   try {
-    const name = await provider.lookupAddress(address);
+    const name = await library.lookupAddress(address);
     return name;
   } catch (err) {
     console.log(err);

modules/web3/hooks/useGasPrice.ts

@@ -1,4 +1,5 @@
 import useSWR from 'swr';
+import { SupportedNetworks } from '../constants/networks';
 import { fetchGasPrice } from '../helpers/fetchGasPrice';
 
 type GasResponse = {
@@ -7,8 +8,12 @@ type GasResponse = {
   error?: Error;
 };
 
-export const useGasPrice = (): GasResponse => {
-  const { data, error } = useSWR('fetch-gas', () => fetchGasPrice('fast'), { refreshInterval: 15000 });
+export const useGasPrice = ({ network }: { network: SupportedNetworks }): GasResponse => {
+  const { data, error } = useSWR(
+    network && network === SupportedNetworks.MAINNET ? 'fetch-gas' : null,
+    () => fetchGasPrice('fast'),
+    { refreshInterval: 15000 }
+  );
 
   return {
     data,