Release PR: v0.2.5

__tests__/helpers.tsx

@@ -6,7 +6,7 @@ import { ethers } from 'ethers';
 import WrappedAccountSelect from 'modules/app/components/layout/header/AccountSelect';
 import theme from 'lib/theme';
 import React from 'react';
-import { accountsApi } from 'stores/accounts';
+import { accountsApi } from 'modules/app/stores/accounts';
 import { createCurrency } from '@makerdao/currency';
 import { AnalyticsProvider } from 'modules/app/client/analytics/AnalyticsContext';
 import { CookiesProvider } from 'modules/app/client/cookies/CookiesContext';

__tests__/pages/delegates.spec.tsx

@@ -86,7 +86,7 @@ describe('Delegates list page', () => {
   });
 
   test('can delegate MKR to a delegate', async () => {
-    await screen.findByText('Recognized Delegates');
+    await screen.findAllByText('Recognized Delegates');
 
     // Open delegate modal
     const delegateButton = screen.getByText('Delegate');

__tests__/pages/esmodule.spec.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import { renderWithTheme } from '../helpers';
-import { cleanup, fireEvent, waitFor, configure, screen } from '@testing-library/react';
+import { fireEvent, waitFor, configure, screen } from '@testing-library/react';
 import waitForExpect from 'wait-for-expect';
 import { TestAccountProvider } from '@makerdao/test-helpers';
 import ESModule from '../../pages/esmodule';
 import getMaker from '../../lib/maker';
-import { accountsApi } from '../../stores/accounts';
+import { accountsApi } from '../../modules/app/stores/accounts';
 import BigNumber from 'bignumber.js';
 import { ethers } from 'ethers';
 

__tests__/pages/executive.spec.tsx

@@ -10,7 +10,7 @@ import {
 } from '../helpers';
 import { ExecutiveOverview } from '../../pages/executive';
 import proposals from 'modules/executive/api/mocks/proposals.json';
-import { accountsApi } from 'stores/accounts';
+import { accountsApi } from 'modules/app/stores/accounts';
 
 jest.mock('@theme-ui/match-media', () => {
   return {

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
   ],
   coverageReporters: ['json', 'lcov', 'text-summary'],
   setupFilesAfterEnv: ['<rootDir>/__tests__/setup.ts'],
-  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/setup', '/helpers', '/__tests__/__mocks__', '__tests__/lib/polling/poll-327.js', '__tests__/lib/polling/poll-431.js'],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/setup',  '__tests__/helpers.tsx', '/__tests__/__mocks__', '__tests__/lib/polling/poll-327.js', '__tests__/lib/polling/poll-431.js'],
   transformIgnorePatterns: ['/node_modules/'],
   moduleDirectories: ['node_modules'],
   globals: {

lib/theme.js

@@ -60,18 +60,21 @@ export default {
     tagColorFifteenBg: '#FFFBEF',
     tagColorSixteen: '#FF8237',
     tagColorSixteenBg: '#FFFBEF',
+    bull: '#1AAB9B',
+    bear: '#F77249',
     modes: {
       dark: {
         primary: '#1DC1AE',
         onPrimary: '#000',
         background: '#141414',
         onBackgroundAlt: '#D7C9EA',
+        onBackground: '#7E7E88',
         text: '#D7C9EA',
         textMuted: '#7E7E88',
         textSecondary: '#7E7E88',
         secondaryMuted: '#D7C9EA',
         surface: '#000',
-        onSurface: '#282F3A',
+        onSurface: '#7E7E88',
         outline: '#282F3A',
         primaryMuted: '#13554D',
         muted: '#282F3A',
@@ -117,7 +120,9 @@ export default {
         tagColorFifteen: '#FF8237',
         tagColorFifteenBg: '#121212',
         tagColorSixteen: '#FF8237',
-        tagColorSixteenBg: '#121212'
+        tagColorSixteenBg: '#121212',
+        bull: '#1AAB9B',
+        bear: '#F77249'
       }
     }
   },
@@ -160,6 +165,10 @@ export default {
       variant: 'cards.primary',
       p: 3
     },
+    noPadding: {
+      variant: 'cards.primary',
+      p: 0
+    },
     tight: {
       variant: 'cards.primary',
       p: [2, 2]
@@ -285,6 +294,13 @@ export default {
       color: 'textSecondary',
       letterSpacing: '0.05em'
     },
+    smallCaps: {
+      ...theme.text.caps,
+      fontSize: 1,
+      fontWeight: 'body',
+      color: 'textSecondary',
+      letterSpacing: '0.05em'
+    },
     secondary: {
       color: 'textSecondary',
       fontSize: '15px',
@@ -1095,6 +1111,61 @@ export default {
           />
         </g>
       )
+    },
+    decrease: {
+      viewBox: '0 0 8 7',
+      path: (
+        <g>
+          <path
+            d="M6.97438 1.90227C7.19442 1.90227 7.3728 2.08065 7.3728 2.30069L7.3728 6.68329L6.57597 6.68329L6.57597 2.30069C6.57597 2.08065 6.75434 1.90227 6.97438 1.90227Z"
+            fill="currentColor"
+          />
+          <path
+            d="M2.59178 6.28487C2.59178 6.06483 2.77016 5.88645 2.9902 5.88645L7.3728 5.88645L7.3728 6.68329L2.9902 6.68329C2.77016 6.68329 2.59178 6.50491 2.59178 6.28487Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.85769 6.16818C6.7021 6.32377 6.44983 6.32377 6.29424 6.16818L1.1148 0.988736C0.959209 0.833144 0.959209 0.58088 1.1148 0.425288C1.27039 0.269695 1.52266 0.269695 1.67825 0.425288L6.85769 5.60473C7.01328 5.76032 7.01328 6.01258 6.85769 6.16818Z"
+            fill="currentColor"
+          />
+        </g>
+      )
+    },
+    increase: {
+      viewBox: '0 0 8 8',
+      path: (
+        <g>
+          <path
+            d="M2.59178 1.14842C2.59178 0.928378 2.77016 0.75 2.9902 0.75H7.3728V1.54684H2.9902C2.77016 1.54684 2.59178 1.36846 2.59178 1.14842Z"
+            fill="currentColor"
+          />
+          <path
+            d="M6.97438 5.53102C6.75434 5.53102 6.57597 5.35264 6.57597 5.1326L6.57597 0.75L7.3728 0.75V5.1326C7.3728 5.35264 7.19442 5.53102 6.97438 5.53102Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.85769 1.26511C7.01328 1.4207 7.01328 1.67297 6.85769 1.82856L1.67825 7.008C1.52266 7.16359 1.27039 7.16359 1.1148 7.008C0.95921 6.85241 0.95921 6.60014 1.1148 6.44455L6.29424 1.26511C6.44983 1.10952 6.7021 1.10952 6.85769 1.26511Z"
+            fill="currentColor"
+          />
+        </g>
+      )
+    },
+    minus: {
+      viewBox: '0 0 6 3',
+      path: <path d="M5.6463 2.125V0.851562H0.521296V2.125H5.6463Z" fill="currentColor" />
+    },
+    plus: {
+      viewBox: '0 0 9 9',
+      path: (
+        <path
+          d="M4.66192 5.35938H8.06036V4.20312H4.66192V0.804688H3.50567V4.20312H0.107233V5.35938H3.50567V8.75781H4.66192V5.35938Z"
+          fill="currentColor"
+        />
+      )
     }
   }
 };

lib/utils.ts

@@ -5,8 +5,8 @@ import { cloneElement } from 'react';
 import { jsx } from 'theme-ui';
 import { css, ThemeUIStyleObject } from '@theme-ui/css';
 import BigNumber from 'bignumber.js';
-import { CurrencyObject } from 'types/currency';
-import { SpellStateDiff } from 'types/spellStateDiff';
+import { CurrencyObject } from 'modules/app/types/currency';
+import { SpellStateDiff } from 'modules/app/types/spellStateDiff';
 import { SupportedNetworks, ETHERSCAN_PREFIXES } from './constants';
 import getMaker from './maker';
 import mockPolls from 'modules/polling/api/mocks/polls.json';

modules/address/components/AddressDelegatedTo.tsx

@@ -0,0 +1,213 @@
+import Link from 'next/link';
+import { Box, Text, Link as ThemeUILink, Flex, IconButton, Heading } from 'theme-ui';
+import { useBreakpointIndex } from '@theme-ui/match-media';
+import { Icon } from '@makerdao/dai-ui-icons';
+
+import BigNumber from 'bignumber.js';
+import { getNetwork } from 'lib/maker';
+import { Address } from 'modules/address/components/Address';
+import Skeleton from 'modules/app/components/SkeletonThemed';
+import { DelegationHistory } from 'modules/delegates/types';
+import { useState } from 'react';
+import { getEtherscanLink } from 'lib/utils';
+import { formatDateWithTime } from 'lib/datetime';
+import Tooltip from 'modules/app/components/Tooltip';
+
+type CollapsableRowProps = {
+  delegate: DelegationHistory;
+  network: string;
+  bpi: number;
+  totalDelegated: number;
+};
+
+const CollapsableRow = ({ delegate, network, bpi, totalDelegated }: CollapsableRowProps) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const { address, lockAmount, events } = delegate;
+  const sortedEvents = events.sort((prev, next) => (prev.blockTimestamp > next.blockTimestamp ? -1 : 1));
+
+  return (
+    <tr>
+      <Flex as="td" sx={{ flexDirection: 'column', mb: 3 }}>
+        <Heading variant="microHeading">
+          <Link href={{ pathname: `/address/${address}`, query: { network } }} passHref>
+            <ThemeUILink title="View address detail" sx={{ fontSize: bpi < 1 ? 1 : 3 }}>
+              <Address address={address} />
+            </ThemeUILink>
+          </Link>
+        </Heading>
+        {expanded && (
+          <Flex sx={{ pl: 3, flexDirection: 'column' }}>
+            {sortedEvents.map(({ blockTimestamp }) => {
+              return (
+                <Text
+                  key={blockTimestamp}
+                  variant="smallCaps"
+                  sx={{
+                    ':first-of-type': { pt: 3 },
+                    ':not(:last-of-type)': { pb: 2 }
+                  }}
+                >
+                  {formatDateWithTime(blockTimestamp)}
+                </Text>
+              );
+            })}
+          </Flex>
+        )}
+      </Flex>
+      <Box as="td" sx={{ verticalAlign: 'top' }}>
+        <Text sx={{ fontSize: bpi < 1 ? 1 : 3 }}>
+          {`${new BigNumber(lockAmount).toFormat(2)}${bpi > 0 ? ' MKR' : ''}`}
+        </Text>
+        {expanded && (
+          <Flex sx={{ flexDirection: 'column' }}>
+            {sortedEvents.map(({ blockTimestamp, lockAmount }) => {
+              return (
+                <Flex
+                  key={blockTimestamp}
+                  sx={{
+                    alignItems: 'center',
+                    ':first-of-type': { pt: 3 },
+                    ':not(:last-of-type)': { pb: 2 }
+                  }}
+                >
+                  {lockAmount.indexOf('-') === 0 ? (
+                    <Icon name="decrease" size={2} color="bear" />
+                  ) : (
+                    <Icon name="increase" size={2} color="bull" />
+                  )}
+                  <Text key={blockTimestamp} variant="smallCaps" sx={{ pl: 2 }}>
+                    {`${new BigNumber(
+                      lockAmount.indexOf('-') === 0 ? lockAmount.substring(1) : lockAmount
+                    ).toFormat(2)}${bpi > 0 ? ' MKR' : ''}`}
+                  </Text>
+                </Flex>
+              );
+            })}
+          </Flex>
+        )}
+      </Box>
+      <Box as="td" sx={{ verticalAlign: 'top' }}>
+        <Flex sx={{ alignSelf: 'flex-start' }}>
+          {totalDelegated ? (
+            <Text>{`${new BigNumber(lockAmount).div(totalDelegated).times(100).toFormat(1)}%`}</Text>
+          ) : (
+            <Box sx={{ width: '100%' }}>
+              <Skeleton />
+            </Box>
+          )}
+        </Flex>
+      </Box>
+      <Box as="td" sx={{ textAlign: 'end', verticalAlign: 'top', width: '100%' }}>
+        <Box sx={{ height: '32px' }}>
+          <Flex
+            sx={{
+              bg: 'background',
+              size: 'auto',
+              width: '17px',
+              height: '17px',
+              float: 'right',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 'round'
+            }}
+          >
+            <IconButton aria-label="Delegated to expand" onClick={() => setExpanded(!expanded)}>
+              <Icon name={expanded ? 'minus' : 'plus'} />
+            </IconButton>
+          </Flex>
+        </Box>
+        {expanded && (
+          <Flex sx={{ flexDirection: 'column' }}>
+            {sortedEvents.map(({ blockTimestamp, hash }) => {
+              return (
+                <Flex
+                  key={blockTimestamp}
+                  sx={{
+                    justifyContent: 'flex-end',
+                    lineHeight: '20px',
+                    ':not(:last-of-type)': { pb: 2 }
+                  }}
+                >
+                  <ThemeUILink
+                    href={getEtherscanLink(getNetwork(), hash as string, 'transaction')}
+                    target="_blank"
+                    title="View on Etherscan"
+                    sx={{
+                      textAlign: 'right'
+                    }}
+                  >
+                    <Icon name="arrowTopRight" size={2} />
+                  </ThemeUILink>
+                </Flex>
+              );
+            })}
+          </Flex>
+        )}
+      </Box>
+    </tr>
+  );
+};
+
+type DelegatedByAddressProps = {
+  delegatedTo: DelegationHistory[];
+  totalDelegated: number;
+};
+
+const AddressDelegatedTo = ({ delegatedTo, totalDelegated }: DelegatedByAddressProps): JSX.Element => {
+  const bpi = useBreakpointIndex();
+  const network = getNetwork();
+
+  return (
+    <Box>
+      <table
+        style={{
+          width: '100%',
+          borderCollapse: 'collapse'
+        }}
+      >
+        <thead>
+          <tr>
+            <Text as="th" sx={{ textAlign: 'left', pb: 2, width: '30%' }} variant="caps">
+              Address
+            </Text>
+            <Text as="th" sx={{ textAlign: 'left', pb: 2, width: '30%' }} variant="caps">
+              MKR Delegated
+            </Text>
+            <Tooltip label={'This is the percentage of the total MKR delegated by this address.'}>
+              <Text as="th" sx={{ textAlign: 'left', pb: 2, width: '20%' }} variant="caps">
+                Voting Weight
+              </Text>
+            </Tooltip>
+            <Text as="th" sx={{ textAlign: 'right', pb: 2, width: '20%' }} variant="caps">
+              Expand
+            </Text>
+          </tr>
+        </thead>
+        <tbody>
+          {delegatedTo ? (
+            delegatedTo.map((delegate, i) => (
+              <CollapsableRow
+                key={i}
+                delegate={delegate}
+                network={network}
+                bpi={bpi}
+                totalDelegated={totalDelegated}
+              />
+            ))
+          ) : (
+            <tr key={0}>
+              <td colSpan={3}>
+                <Text color="text" variant="allcaps">
+                  Loading
+                </Text>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </Box>
+  );
+};
+
+export default AddressDelegatedTo;