merging in development

Author: lyaunzbe

package.json

@@ -37,6 +37,7 @@
         "@0x/contract-addresses": "^4.1.0",
         "@0x/contract-wrappers": "^13.2.0",
         "@0x/contracts-dev-utils": "^1.0.2",
+        "@0x/contracts-treasury": "^1.0.2",
         "@0x/json-schemas": "^5.0.2",
         "@0x/order-utils": "^10.0.1",
         "@0x/subproviders": "^6.0.2",
@@ -67,12 +68,17 @@
         "deep-equal": "^1.0.1",
         "ethereum-types": "^3.0.0",
         "ethereumjs-util": "^5.1.1",
+        "ethers": "^5.0.24",
         "find-versions": "^2.0.0",
+        "flickity": "^2.2.2",
         "fuse.js": "^3.4.6",
+        "graphql": "^15.5.0",
+        "graphql-request": "^3.4.0",
         "is-mobile": "^0.2.2",
         "less": "^2.7.2",
         "lodash": "^4.17.11",
         "lottie-web": "^5.6.2",
+        "marked": "^2.0.0",
         "material-ui": "^0.20.0",
         "mersenne-twister": "^1.1.0",
         "moment": "2.21.0",
@@ -86,13 +92,14 @@
         "react-chartjs-2": "^2.7.6",
         "react-copy-to-clipboard": "^5.0.0",
         "react-dom": "^16.12.0",
-        "react-flickity-component": "^3.1.0",
+        "react-flickity-component": "^3.6.1",
         "react-headroom": "2.2.2",
         "react-helmet": "^5.2.1",
         "react-highlight": "0xproject/react-highlight#react-peer-deps",
         "react-instantsearch-dom": "^5.7.0",
         "react-markdown": "^4.0.6",
         "react-popper": "^1.0.0-beta.6",
+        "react-query": "^3.7.1",
         "react-redux": "^7.1.3",
         "react-responsive": "^6.0.1",
         "react-router-dom": "^5.1.2",
@@ -125,6 +132,7 @@
         "@babel/preset-env": "^7.5.5",
         "@babel/preset-react": "^7.0.0",
         "@mdx-js/loader": "^1.3.1",
+        "@types/marked": "^1.2.2",
         "@mdx-js/react": "^1.3.1",
         "@types/accounting": "^0.4.1",
         "@types/algoliasearch": "^3.30.12",

public/images/governance/cross.svg

@@ -82,7 +82,7 @@ Button.defaultProps = {
 const ButtonBase = styled.button<ButtonInterface>`
     appearance: none;
     border: 1px solid transparent;
-    display: inline-block;
+    display: ${(props) => (props.isInline ? 'inline' : 'inline-block')};
     background-color: ${(props) => props.bgColor || colors.brandLight};
     background-color: ${(props) =>
         (props.isTransparent || props.isWithArrow) && (props.transparentBgColor || 'transparent')};

public/images/governance/list_icon.svg

@@ -0,0 +1,119 @@
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import MediaQuery from 'react-responsive';
+import styled from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { Text } from 'ts/components/ui/text';
+import { State } from 'ts/redux/reducer';
+import { colors } from 'ts/style/colors';
+import { AccountReady, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { formatZrx } from 'ts/utils/format_number';
+
+export const RegisterBanner: React.FC<{}> = () => {
+    const [userZRXBalance, setZRXBalance] = React.useState<number>();
+
+    const providerState = useSelector((state: State) => state.providerState);
+    React.useEffect(() => {
+        if (providerState) {
+            const { zrxBalanceBaseUnitAmount } = providerState.account as AccountReady;
+            let zrxBalance: BigNumber | undefined;
+            if (zrxBalanceBaseUnitAmount) {
+                zrxBalance = Web3Wrapper.toUnitAmount(zrxBalanceBaseUnitAmount, constants.DECIMAL_PLACES_ZRX);
+            }
+
+            if (zrxBalance) {
+                const roundedZrxBalance = formatZrx(zrxBalance).roundedValue;
+                setZRXBalance(roundedZrxBalance);
+            }
+        }
+    }, [providerState]);
+
+    if (userZRXBalance && userZRXBalance > 0) {
+        return (
+            <Container>
+                <BannerImage src="/images/governance/register_banner.svg" />
+                <MediaQuery minWidth={768}>
+                    <TextContent>
+                        <Text
+                            noWrap={true}
+                            fontColor={colors.textDarkPrimary}
+                            Tag="h1"
+                            fontSize="28px"
+                            fontFamily="Formular"
+                        >
+                            Register to vote with your ZRX!
+                        </Text>
+                        <Text
+                            noWrap={true}
+                            fontColor={colors.textDarkSecondary}
+                            fontSize="22px"
+                            fontFamily="Formular"
+                            fontWeight={300}
+                        >
+                            Register to vote on upcoming treasury proposals
+                        </Text>
+                    </TextContent>
+                </MediaQuery>
+                <MediaQuery maxWidth={768}>
+                    <TextContent>
+                        <Text noWrap={true} fontColor={colors.textDarkPrimary} Tag="h1" fontSize="22px">
+                            Register to vote with your ZRX!
+                        </Text>
+                        <Text noWrap={true} fontColor={colors.textDarkSecondary} fontSize="14px">
+                            Register to vote on upcoming treasury proposals
+                        </Text>
+                    </TextContent>
+                </MediaQuery>
+                <Button to={WebsitePaths.Register} color={colors.white}>
+                    Register your ZRX
+                </Button>
+            </Container>
+        );
+    }
+    return null;
+};
+
+const Container = styled.div`
+    background-color: ${({ theme }) => theme.lightBgColor};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding-bottom: 20px;
+    max-width: 1500px;
+
+    @media (min-width: 768px) {
+        height: 120px;
+        flex-direction: row;
+        padding-right: 50px;
+        padding-bottom: 0px;
+        width: auto;
+        margin: auto;
+    }
+`;
+
+const BannerImage = styled.img`
+    height: 100%;
+`;
+
+const TextContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1;
+    justify-content: center;
+    white-space: normal;
+    text-align: center;
+    margin: 20px 0;
+
+    @media (min-width: 768px) {
+        margin: 0;
+        padding: 0 50px;
+        white-space: nowrap;
+        text-align: left;
+    }
+`;

public/images/governance/register_banner.svg

@@ -0,0 +1,24 @@
+import marked, { Token, Tokens } from 'marked';
+import React from 'react';
+
+import { Heading, Paragraph } from 'ts/components/text';
+
+export const TreasurySummary: React.FC<{ description: string }> = ({ description }) => {
+    const tokens = marked.lexer(description);
+    const heading = tokens.find(
+        (token: Token) => (token as Tokens.Heading).type === 'heading' && (token as Tokens.Heading).depth === 1,
+    );
+    const paragraph = tokens.find((token: Token) => (token as Tokens.Paragraph).type === 'paragraph');
+    let summary = '';
+    // @ts-ignore
+    paragraph.tokens.forEach((token) => {
+        summary += token.text;
+    });
+
+    return (
+        <>
+            <Heading marginBottom="15px">{(heading as Tokens.Heading).text}</Heading>
+            <Paragraph marginBottom="20px">{summary}</Paragraph>
+        </>
+    );
+};