Merge pull request #240 from makerdao/develop

Release v0.2.4

PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-### Link to Clubhouse story
+### Link to Shortcut ticket:
 
 ### What does this PR do?
 

__tests__/pages/account.spec.tsx

@@ -52,10 +52,10 @@ describe('Delegate Create page', () => {
     });
 
     // Transaction is initialized
-    await screen.findByText('Confirm transaction');
+    await screen.findByText('Confirm Transaction');
 
     // Transaction state moved to pending
-    await screen.findByText('Transaction pending');
+    await screen.findByText('Transaction Pending');
 
     // Transaction state moved to mined
     await screen.findByText('Transaction Sent');

__tests__/pages/delegates.spec.tsx

@@ -11,7 +11,6 @@ import {
   sendMkrToAddress
 } from '../helpers';
 import { SWRConfig } from 'swr';
-import * as utils from '../../lib/utils';
 import { DelegatesAPIResponse } from 'modules/delegates/types';
 import { DelegateStatusEnum } from 'modules/delegates/delegates.constants';
 
@@ -98,9 +97,9 @@ describe('Delegates list page', () => {
     click(approveMKRButton);
 
     // Transaction is initialized
-    await screen.findByText('Confirm transaction');
+    await screen.findByText('Confirm Transaction');
     // Transaction state moved to pending
-    await screen.findByText('Transaction pending');
+    await screen.findByText('Transaction Pending');
     // Deposit input appears
     await screen.findByText('Deposit into delegate contract');
 
@@ -123,7 +122,7 @@ describe('Delegates list page', () => {
     click(confirmButton);
 
     // Wait for transactions again...
-    await screen.findByText('Transaction pending');
+    await screen.findByText('Transaction Pending');
     await screen.findByText('Transaction Sent');
 
     // UI updates to display totals correctly
@@ -140,8 +139,8 @@ describe('Delegates list page', () => {
     click(approveIOUButton);
 
     // More transaction screens...
-    await screen.findByText('Confirm transaction');
-    await screen.findByText('Transaction pending');
+    await screen.findByText('Confirm Transaction');
+    await screen.findByText('Transaction Pending');
     await screen.findByText('Withdraw from delegate contract');
 
     // Set max button adds input value correctly
@@ -155,7 +154,7 @@ describe('Delegates list page', () => {
     click(undelegateMKRButton);
 
     // Wait for transactions again...
-    await screen.findByText('Transaction pending');
+    await screen.findByText('Transaction Pending');
     await screen.findByText('Transaction Sent');
 
     // Close the modal
@@ -170,14 +169,15 @@ describe('Delegates list page', () => {
     expect(newByYou.previousSibling).toHaveTextContent('0.00');
   });
 
-
   test('Find info', async () => {
-    await screen.findByText('System Info', {
-
-    }, {
-      timeout: 30000
-    });
-
+    await screen.findByText(
+      'System Info',
+      {},
+      {
+        timeout: 30000
+      }
+    );
+
     const totalDelegatesSystemInfo = screen.getByTestId('total-delegates-system-info');
     expect(totalDelegatesSystemInfo).toHaveTextContent('1');
 
@@ -186,8 +186,8 @@ describe('Delegates list page', () => {
 
     const totalShadowDelegatesSystemInfo = screen.getByTestId('total-shadow-delegates-system-info');
     expect(totalShadowDelegatesSystemInfo).toHaveTextContent('0');
-    
+
     const totalMkr = screen.getByTestId('total-mkr-system-info');
     expect(totalMkr).toHaveTextContent('10.24');
-  })
+  });
 });

__tests__/pages/esmodule.spec.tsx

@@ -1,13 +1,15 @@
 // @ts-nocheck
 import { renderWithTheme } from '../helpers';
-import { cleanup, fireEvent, waitFor, configure , screen } from '@testing-library/react';
+import { cleanup, fireEvent, waitFor, configure, screen } from '@testing-library/react';
 import waitForExpect from 'wait-for-expect';
 import { TestAccountProvider } from '@makerdao/test-helpers';
-import { cache } from 'swr';
 import ESModule from '../../pages/esmodule';
 import getMaker from '../../lib/maker';
 import { accountsApi } from '../../stores/accounts';
 import BigNumber from 'bignumber.js';
+import { ethers } from 'ethers';
+
+export const UINT256_MAX = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';
 
 configure({
   getElementError: (message, container) => {
@@ -43,31 +45,26 @@ describe('ES Module', () => {
     }, 30000);
   });
 
-  afterEach(() => {
-    cache.clear();
-    cleanup();
-  });
-
   describe('emergency shutdown render', () => {
     // tests render on mobile view automatically
     test('show progress bar', () => {
-       renderWithTheme(<ESModule />);
+      renderWithTheme(<ESModule />);
       const progressBar = screen.getByTestId('progress-ring');
-      expect(progressBar).toBeTruthy();
+      expect(progressBar).toBeInTheDocument();
     });
 
     test('show esm history', async () => {
       renderWithTheme(<ESModule />);
 
       const title = await screen.findByText('ESM History');
-      expect(title).toBeTruthy();
+      expect(title).toBeInTheDocument();
     });
 
     test('show "Burn your MKR" button', async () => {
       renderWithTheme(<ESModule />);
 
       const buttonBurn = await screen.findByText('Burn Your MKR', {}, { timeout: 15000 });
-      expect(buttonBurn).toBeDefined();
+      expect(buttonBurn).toBeInTheDocument();
       // Initiate Emergency Shutdow
     });
 
@@ -110,7 +107,7 @@ describe('ES Module', () => {
         const amount = 35;
         fireEvent.change(screen.getByTestId('mkr-input'), { target: { value: amount } });
         const tooLow = await screen.findByText('MKR balance too low', {}, { timeout: 3000 });
-        expect(tooLow).toBeTruthy();
+        expect(tooLow).toBeInTheDocument();
 
         // Wait until user balance is loaded
         await screen.findByTestId('mkr-input-balance');
@@ -166,7 +163,7 @@ describe('ES Module', () => {
 
         // Third Step Render
         const signTransaction = await screen.findByText('Sign Transaction');
-        expect(signTransaction).toBeTruthy();
+        expect(signTransaction).toBeInTheDocument();
 
         // Fourth Step Success Render
         await screen.findByText('MKR successfully burned in ESM', {}, { timeout: 10000 });
@@ -181,14 +178,14 @@ describe('ES Module', () => {
       const token = maker.service('smartContract').getContract('MCD_GOV');
       await token['mint(uint256)'](WAD.times(50000).toFixed());
       const esm = maker.service('smartContract').getContract('MCD_ESM');
-      await token.approve(esm.address, -1); //approve unlimited
+      await token.approve(esm.address, ethers.BigNumber.from(UINT256_MAX)); //approve unlimited
       await esm.join(WAD.times(50000).toFixed());
     });
 
     test('show Initiate Shutdown button on threshold reached', async () => {
       await renderWithTheme(<ESModule />);
       const el = await screen.findByText('Initiate Emergency Shutdown', {}, { timeout: 30000 });
-      expect(el).toBeTruthy();
+      expect(el).toBeInTheDocument();
     });
 
     // TODO: this test passing is a false positive bc 'waitFor' is async, but not awaited.

__tests__/pages/executive.spec.tsx

@@ -97,12 +97,10 @@ describe('Executive page', () => {
     const submitButton = screen.getByText('Submit Vote');
     click(submitButton);
 
-    await screen.findByText('Sign Transaction');
-    await screen.findByText('Transaction Sent!');
-    //TODO: get the UI to reflect the vote and test for that
-
-    const dialog = screen.getByRole('dialog');
-    await waitForElementToBeRemoved(dialog);
+    // wait for transaction to progress
+    await screen.findByText('Confirm Transaction');
+    await screen.findByText('Transaction Sent');
+    await screen.findByText('Close');
   });
 
   test('shows delegated balance if account is a delegate', async () => {

__tests__/pages/index.spec.tsx

@@ -14,5 +14,5 @@ beforeAll(async () => {
 });
 
 test('renders', async () => {
-  const { debug } = render(<Index blogPosts={blogPosts} polls={polls} proposals={proposals} />);
+  const { debug } = render(<Index blogPosts={blogPosts} polls={polls.polls} proposals={proposals} />);
 });

lib/constants.ts

@@ -59,7 +59,8 @@ export const SPELL_SCHEDULED_DATE_OVERRIDES = {
 export const POLL_CATEGORIZATION_ENDPOINT =
   'https://raw.githubusercontent.com/makerdao/community/master/governance/polls/meta/retroactive-poll-categorization.json';
 
-const expr = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+const expr =
+  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
 export const URL_REGEX = new RegExp(expr);
 
 export const EXEC_PROPOSAL_INDEX =

lib/datetime.ts

@@ -1,3 +1,4 @@
+import { formatDistance } from 'date-fns';
 import { format, utcToZonedTime } from 'date-fns-tz';
 
 export const formatDateWithTime = (dateString: Date | undefined | number | string): string => {
@@ -24,3 +25,13 @@ export const formatDateWithoutTime = (dateString: Date | undefined | number | st
     return '--';
   }
 };
+
+export const formatTimeAgo = (dateString: Date | undefined | number | string): string => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  try {
+    return formatDistance(date, new Date(), { addSuffix: true });
+  } catch (err) {
+    return '--';
+  }
+};

lib/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from './useTokenAllowance';
-export * from './useAllUserVotes';
 export * from './useDelegateAddressMap';

lib/hooks/useDelegateAddressMap.ts

@@ -8,7 +8,9 @@ type DelegateAddressMapResponse = {
 };
 
 export const useDelegateAddressMap = (): DelegateAddressMapResponse => {
-  const { data: delegatesApiResponse, error } = useSWR(`/api/delegates?network=${getNetwork()}`);
+  const { data: delegatesApiResponse, error } = useSWR(`/api/delegates?network=${getNetwork()}`, null, {
+    refreshInterval: 0
+  });
 
   const data =
     delegatesApiResponse &&

lib/hooks/useTokenAllowance.ts

@@ -6,6 +6,7 @@ type TokenAllowanceResponse = {
   data?: BigNumber;
   loading: boolean;
   error?: Error;
+  mutate: () => void;
 };
 
 // Checks if the user allowed the spending of a token and contract address
@@ -14,7 +15,7 @@ export const useTokenAllowance = (
   userAddress?: string,
   contractAddress?: string
 ): TokenAllowanceResponse => {
-  const { data, error } = useSWR(
+  const { data, error, mutate } = useSWR(
     userAddress && contractAddress ? ['token-balance', token, userAddress, contractAddress] : null,
     (_, token, userAddress, contractAddress) =>
       getMaker().then(maker => maker.getToken(token).allowance(userAddress, contractAddress))
@@ -23,6 +24,7 @@ export const useTokenAllowance = (
   return {
     data,
     loading: !error && !data,
-    error
+    error,
+    mutate
   };
 };

lib/maker/web3react/index.ts

@@ -2,7 +2,7 @@
 
 import ProviderSubprovider from 'web3-provider-engine/dist/es5/subproviders/provider';
 import { InjectedConnector } from '@web3-react/injected-connector';
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
+import { WalletConnectConnector, WalletConnectConnectorArguments } from '@web3-react/walletconnect-connector';
 import { WalletLinkConnector } from '@web3-react/walletlink-connector';
 import { AbstractConnector } from '@web3-react/abstract-connector';
 import { networkToRpc } from '../network';
@@ -33,7 +33,7 @@ export const connectors: Array<[ConnectorName, AbstractConnector]> = [
       bridge: 'https://bridge.walletconnect.org',
       qrcode: true,
       pollingInterval: POLLING_INTERVAL
-    })
+    } as WalletConnectConnectorArguments)
   ],
   [
     'Coinbase Wallet',

modules/address/components/Address.tsx

@@ -0,0 +1,28 @@
+import { formatAddress } from 'lib/utils';
+import { getENS } from 'modules/web3/ens';
+import React, { useEffect, useState } from 'react';
+
+export function Address({ address }: { address: string }): React.ReactElement {
+  const [addressFormated, setAddressFormatted] = useState(formatAddress(address || ''));
+
+  async function fetchENSName(address: string) {
+    try {
+      if (!address) {
+        return;
+      }
+
+      const ens = await getENS(address);
+      setAddressFormatted(ens);
+    } catch (e) {
+      setAddressFormatted(formatAddress(address));
+    }
+  }
+
+  useEffect(() => {
+    if (address) {
+      fetchENSName(address);
+    }
+  }, [address]);
+
+  return <React.Fragment>{addressFormated}</React.Fragment>;
+}

modules/address/components/AddressDetail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { jsx, Box, Text, Link as ExternalLink, Flex, Divider } from 'theme-ui';
+import { Box, Text, Link as ExternalLink, Flex, Divider } from 'theme-ui';
 import { useBreakpointIndex } from '@theme-ui/match-media';
 import { Icon } from '@makerdao/dai-ui-icons';
 import { getNetwork } from 'lib/maker';
@@ -10,6 +10,7 @@ import { AddressAPIStats, VoteProxyInfo } from '../types/addressApiResponse';
 import Tooltip from 'modules/app/components/Tooltip';
 import { cutMiddle } from 'lib/string';
 import { PollingParticipationOverview } from 'modules/polling/components/PollingParticipationOverview';
+import { Address } from './Address';
 
 type PropTypes = {
   address: string;
@@ -52,7 +53,7 @@ export function AddressDetail({ address, stats, voteProxyInfo }: PropTypes): Rea
               target="_blank"
             >
               <Text as="p" sx={{ fontSize: [1, 3], ml: 2 }}>
-                {bpi > 0 ? address : cutMiddle(address, 6, 6)}
+                <Address address={address} />
               </Text>
             </ExternalLink>
             {voteProxyInfo && (

modules/address/components/AddressIcon.tsx

@@ -1,4 +1,4 @@
-import { jsx, Box } from 'theme-ui';
+import { Box } from 'theme-ui';
 import { Jazzicon } from '@ukstv/jazzicon-react';
 
 export default function AddressIcon({

modules/address/types/addressApiResponse.d.ts

@@ -3,6 +3,7 @@ import { Delegate } from 'modules/delegates/types';
 
 export type AddressAPIStats = {
   pollVoteHistory: PollVoteHistory[];
+  lastVote: PollVoteHistory;
 };
 
 export type VoteProxyInfo = {

modules/app/components/Cookies.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import Link from 'next/link';
-import { Box, Button, Flex, jsx, Text, Label, Checkbox } from 'theme-ui';
+import { Box, Button, Flex, Text, Label, Checkbox } from 'theme-ui';
 import { CookiesContext } from 'modules/app/client/cookies/CookiesContext';
 
 export default function Cookies(): React.ReactElement | null {

modules/app/components/CountdownTimer.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Text, Flex, jsx, ThemeUIStyleObject } from 'theme-ui';
+import { Text, Flex, ThemeUIStyleObject } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';
 
 import useInterval from 'lib/useInterval';

modules/app/components/FilterButton.tsx

@@ -1,4 +1,3 @@
-import { jsx } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';