release PR: v0.2.3

.babelrc

@@ -4,8 +4,8 @@
         "next/babel",
         {
           "preset-react": {
-            // "importSource": "theme-ui", // or "@theme-ui/core"
-            "runtime": "classic", // Change to automatic when v0.10.0 of theme-ui
+            "importSource": "@theme-ui/core", // or "@theme-ui/core"
+            "runtime": "automatic", // Change to automatic when v0.10.0 of theme-ui
             "throwIfNamespace": false
           }
         }

.circleci/config.yml

@@ -11,7 +11,7 @@ jobs:
       - run:
           name: Install dependencies
           command: |
-            yarn install
+            yarn
       - save_cache:
           paths:
             - node_modules
@@ -20,6 +20,7 @@ jobs:
   test:
     docker:
       - image: makerdaodux/dapptools-node-circleci-docker
+    resource_class: large
     steps:
       - checkout
       - restore_cache:

__tests__/lib/polling/validator.spec.ts

@@ -1,104 +1,124 @@
-import { validateText } from 'modules/polling/helpers/validator';
+import { validateText, hardcodedCategories } from 'modules/polling/helpers/validator';
 import fs from 'fs';
 const pollMetadata = fs.readFileSync(__dirname + '/poll-431.md').toString();
 
 test('accept a valid document', () => {
-  const result = validateText(pollMetadata);
+  const result = validateText(pollMetadata, hardcodedCategories);
   expect(result.valid).toBeTruthy();
   expect(result.errors.length).toBe(0);
 });
 
 test('reject a blank document', () => {
-  const result = validateText('');
+  const result = validateText('', hardcodedCategories);
   expect(result.valid).toBeFalsy();
 });
 
 test('reject null', () => {
-  const result = validateText(null);
+  const result = validateText(null, hardcodedCategories);
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('expected input to be a string or buffer');
 });
 
 test('reject a document with no options', () => {
-  const result = validateText(`---
+  const result = validateText(
+    `---
 vote_type: Plurality Voting
 ---
 # Hello world
-  `);
+  `,
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Vote options are missing');
 });
 
 test('reject a document with bad options type', () => {
-  const result = validateText(`---
+  const result = validateText(
+    `---
 vote_type: Plurality Voting
 options: wat
 ---
 # Hello world
-    `);
+    `,
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Vote options must be a numbered list');
 });
 
 test('reject a document with bad options keys', () => {
-  const result = validateText(`---
+  const result = validateText(
+    `---
 vote_type: Plurality Voting
 options:
   0: foo
   1: bar
   three: baz
 ---
 # Hello world
-    `);
+    `,
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Vote option IDs must be numbers');
 });
 
 test('reject a document with invalid vote type', () => {
-  const result = validateText(pollMetadata.replace('Plurality', 'Blurality'));
+  const result = validateText(pollMetadata.replace('Plurality', 'Blurality'), hardcodedCategories);
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Invalid vote type: "Blurality Voting"');
 });
 
 test('reject a document with no categories', () => {
-  const result = validateText(`---
+  const result = validateText(
+    `---
 vote_type: Plurality Voting
 options:
   0: foo
   1: bar
 
 ---
-# Hello world`);
+# Hello world`,
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Categories are missing');
 });
 
 test('reject a document with invalid category', () => {
   const result = validateText(
-    pollMetadata.replace('Technical', 'Jechnical').replace('Risk Variable', 'Zisk Zariable')
+    pollMetadata.replace('Technical', 'Jechnical').replace('Risk Variable', 'Zisk Zariable'),
+    hardcodedCategories
   );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Invalid categories: Zisk Zariable, Jechnical');
 });
 
 test('reject a document with a missing date', () => {
-  const result = validateText(pollMetadata.replace('start_date', 'x').replace('end_date', 'y'));
+  const result = validateText(
+    pollMetadata.replace('start_date', 'x').replace('end_date', 'y'),
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Start date is missing');
   expect(result.errors).toContain('End date is missing');
 });
 
 test('reject a document with an invalid date', () => {
   const result = validateText(
-    pollMetadata.replace(/start_date: .*/, 'start_date: foo').replace(/end_date: .*/, 'end_date: bar')
+    pollMetadata.replace(/start_date: .*/, 'start_date: foo').replace(/end_date: .*/, 'end_date: bar'),
+    hardcodedCategories
   );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Invalid start date (should be like "2020-08-16T08:00:00")');
   expect(result.errors).toContain('Invalid end date (should be like "2020-08-16T08:00:00")');
 });
 
 test('reject a document with an invalid duration', () => {
-  const result = validateText(pollMetadata.replace(/end_date: .*/, 'end_date: 2021-01-18T16:59:00'));
+  const result = validateText(
+    pollMetadata.replace(/end_date: .*/, 'end_date: 2021-01-18T16:59:00'),
+    hardcodedCategories
+  );
   expect(result.valid).toBeFalsy();
   expect(result.errors).toContain('Poll duration is too short');
 });

__tests__/pages/executive.spec.tsx

@@ -75,7 +75,7 @@ describe('Executive page', () => {
 
     await screen.findByText('Withdraw from voting contract');
     const inputWithdraw = screen.getByTestId('mkr-input');
-    fireEvent.change(inputWithdraw, { target: { value: '10' } });
+    fireEvent.change(inputWithdraw, { target: { value: '6' } });
 
     const finalDepositButtonWithdraw = await screen.findByText('Withdraw MKR');
 
@@ -88,7 +88,7 @@ describe('Executive page', () => {
 
     const lockedMKR = await screen.findByTestId('locked-mkr');
 
-    expect(lockedMKR).toHaveTextContent(/^0.000000 MKR$/); //find exact match
+    expect(lockedMKR).toHaveTextContent(/^4.000000 MKR$/); //find exact match
   });
 
   test('can vote', async () => {

lib/datetime.ts

@@ -1,12 +1,13 @@
-import { format } from 'date-fns';
+import { format, utcToZonedTime } from 'date-fns-tz';
 
 export const formatDateWithTime = (dateString: Date | undefined | number | string): string => {
   if (!dateString) return '';
 
   const date = new Date(dateString);
+  const utcTime = utcToZonedTime(date, 'UTC');
 
   try {
-    return format(date, 'MMM dd yyyy HH:mm zz');
+    return format(utcTime, 'MMM dd yyyy HH:mm zz', { timeZone: 'UTC' });
   } catch (err) {
     return '--';
   }

lib/hooks/index.ts

@@ -1,8 +1,3 @@
-export * from './useMkrBalance';
 export * from './useTokenAllowance';
-export * from './useMkrDelegated';
-export * from './useLockedMkr';
-export * from './useHat';
-export * from './useAllSlates';
 export * from './useAllUserVotes';
 export * from './useDelegateAddressMap';

lib/maker/index.ts

@@ -8,9 +8,10 @@ import { Web3ReactPlugin } from './web3react';
 import { SupportedNetworks, DEFAULT_NETWORK } from '../constants';
 import { networkToRpc } from './network';
 import { config } from '../config';
+import { MakerClass } from '@makerdao/dai/dist/Maker';
 
-export const ETH = Maker.ETH;
-export const USD = Maker.USD;
+export const ETH = Maker.currencies.ETH;
+export const USD = Maker.currencies.USD;
 export { MKR };
 
 function chainIdToNetworkName(chainId: number): SupportedNetworks {
@@ -67,10 +68,10 @@ function determineNetwork(): SupportedNetworks {
 }
 
 type MakerSingletons = {
-  [SupportedNetworks.MAINNET]: null | Promise<Maker>;
-  [SupportedNetworks.KOVAN]: null | Promise<Maker>;
-  [SupportedNetworks.GOERLI]: null | Promise<Maker>;
-  [SupportedNetworks.TESTNET]: null | Promise<Maker>;
+  [SupportedNetworks.MAINNET]: null | Promise<MakerClass>;
+  [SupportedNetworks.KOVAN]: null | Promise<MakerClass>;
+  [SupportedNetworks.GOERLI]: null | Promise<MakerClass>;
+  [SupportedNetworks.TESTNET]: null | Promise<MakerClass>;
 };
 
 const makerSingletons: MakerSingletons = {
@@ -80,7 +81,7 @@ const makerSingletons: MakerSingletons = {
   [SupportedNetworks.TESTNET]: null
 };
 
-async function getMaker(network?: SupportedNetworks): Promise<Maker> {
+async function getMaker(network?: SupportedNetworks): Promise<MakerClass> {
   // Chose the network we are referring to or default to the one set by the system
   const currentNetwork = network ? network : getNetwork();
 
@@ -107,7 +108,7 @@ async function getMaker(network?: SupportedNetworks): Promise<Maker> {
     makerSingletons[currentNetwork] = instance;
   }
 
-  return makerSingletons[currentNetwork];
+  return makerSingletons[currentNetwork] as Promise<MakerClass>;
 }
 
 let networkSingleton: SupportedNetworks;

lib/theme.js

@@ -28,6 +28,38 @@ export default {
     ornament: '#000',
     skeletonColor: '#EEE',
     skeletonHighlightColor: '#F5F5F5',
+    tagColorOne: '#D44C96',
+    tagColorOneBg: '#FFF4FA',
+    tagColorTwo: '#8F2EC1',
+    tagColorTwoBg: '#FBF2FF',
+    tagColorThree: '#02CB9B',
+    tagColorThreeBg: '#EBFFFA',
+    tagColorFour: '#FF4085',
+    tagColorFourBg: '#FFF0F4',
+    tagColorFive: '#EF5277',
+    tagColorFiveBg: '#FEEEF2',
+    tagColorSix: '#5D48FF',
+    tagColorSixBg: '#F7F5FF',
+    tagColorSeven: '#7D8FAA',
+    tagColorSevenBg: '#F2F5FA',
+    tagColorEight: '#00B5D3',
+    tagColorEightBg: '#EEFAFC',
+    tagColorNine: '#34AAFF',
+    tagColorNineBg: '#F1F9FF',
+    tagColorTen: '#FF8237',
+    tagColorTenBg: '#FFF5EF',
+    tagColorEleven: '#1AAB9B',
+    tagColorElevenBg: '#EEFFFD',
+    tagColorTwelve: '#635696',
+    tagColorTwelveBg: '#F7F4FF',
+    tagColorThirteen: '#E7C200',
+    tagColorThirteenBg: '#FFFBEF',
+    tagColorFourteen: '#FF36C7',
+    tagColorFourteenBg: '#FFF3F8',
+    tagColorFifteen: '#FF8237',
+    tagColorFifteenBg: '#FFFBEF',
+    tagColorSixteen: '#FF8237',
+    tagColorSixteenBg: '#FFFBEF',
     modes: {
       dark: {
         primary: '#1DC1AE',
@@ -53,7 +85,39 @@ export default {
         successAlt: '#002C26',
         onSuccess: '#1DC1AE',
         skeletonColor: '#000',
-        skeletonHighlightColor: '#141414'
+        skeletonHighlightColor: '#141414',
+        tagColorOne: '#D44C96',
+        tagColorOneBg: '#121212',
+        tagColorTwo: '#8F2EC1',
+        tagColorTwoBg: '#121212',
+        tagColorThree: '#02CB9B',
+        tagColorThreeBg: '#121212',
+        tagColorFour: '#FF4085',
+        tagColorFourBg: '#121212',
+        tagColorFive: '#EF5277',
+        tagColorFiveBg: '#121212',
+        tagColorSix: '#5D48FF',
+        tagColorSixBg: '#121212',
+        tagColorSeven: '#7D8FAA',
+        tagColorSevenBg: '#121212',
+        tagColorEight: '#00B5D3',
+        tagColorEightBg: '#121212',
+        tagColorNine: '#34AAFF',
+        tagColorNineBg: '#121212',
+        tagColorTen: '#FF8237',
+        tagColorTenBg: '#121212',
+        tagColorEleven: '#1AAB9B',
+        tagColorElevenBg: '#121212',
+        tagColorTwelve: '#635696',
+        tagColorTwelveBg: '#121212',
+        tagColorThirteen: '#E7C200',
+        tagColorThirteenBg: '#121212',
+        tagColorFourteen: '#FF36C7',
+        tagColorFourteenBg: '#121212',
+        tagColorFifteen: '#FF8237',
+        tagColorFifteenBg: '#121212',
+        tagColorSixteen: '#FF8237',
+        tagColorSixteenBg: '#121212'
       }
     }
   },
@@ -298,7 +362,8 @@ export default {
         my: 2
       },
       li: {
-        fontSize: [2, 3]
+        fontSize: [2, 3],
+        color: 'textSecondary'
       },
       a: {
         color: 'accentBlue',

modules/address/components/AddressDetail.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx, Box, Text, Link as ExternalLink, Flex, Divider } from 'theme-ui';
 import { useBreakpointIndex } from '@theme-ui/match-media';

modules/address/components/AddressIcon.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx, Box } from 'theme-ui';
 import { Jazzicon } from '@ukstv/jazzicon-react';
 

modules/app/components/Cookies.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-
 import React, { useContext } from 'react';
 
 import Link from 'next/link';

modules/app/components/CountdownTimer.tsx

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

modules/app/components/FilterButton.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';
@@ -13,7 +12,7 @@ export default function FilterButton({
 }: Props): JSX.Element {
   return (
     <Menu>
-      <MenuButton sx={{ variant: 'buttons.outline' }} {...props}>
+      <MenuButton sx={{ variant: 'buttons.outline', lineHeight: 'inherit' }} {...props}>
         {name()}
         <Icon name="chevron_down" size={2} ml={2} />
       </MenuButton>

modules/app/components/Icon/index.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from 'theme-ui';
 
 import React from 'react';

modules/app/components/PageLoadingPlaceholder.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import Skeleton from 'modules/app/components/SkeletonThemed';
 import { Box, jsx } from 'theme-ui';
 

modules/app/components/ResourceBox.tsx

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { Box, Heading, Card, Link as ExternalLink, Flex, Text, jsx } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';