Govern integration

docs/developers/govern-js.md

@@ -66,6 +66,25 @@ import { query } from '@aragon/govern'
 const query = await query(myQuery, {...});
 ```
 
+### createDao(args, options) ⇒ ``Promise<TransactionResponse>``
+
+Create
+
+| Param    | Type                            | Description                             |
+| -------- | ------------------------------- | --------------------------------------- |
+| args     | <code>CreateDaoParams</code>    | Dao name, Dao token, useProxies option  |
+| options  | <code>CreateDaoOptions</code>   | EIP 1193 provider, Dao factory address  |
+
+Examples:
+
+For Node.js:
+``` typescript
+import { createDao } from '@aragon/govern'
+
+const result = await createDao(args, options);
+```
+
+
 ### configure(config) ⇒ ``void``
 
 Overwrites the default configuration of govern.

packages/govern-console/src/App.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Web3ReactProvider } from '@web3-react/core';
 import Home from 'containers/HomePage/HomePage';
 import { Web3Provider } from '@ethersproject/providers';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { UseWalletProvider } from 'use-wallet';
+import { HashRouter as Router } from 'react-router-dom';
+import { WalletProvider } from './EthersWallet';
 
 function getLibrary(provider: any): Web3Provider {
   const library = new Web3Provider(provider);
@@ -13,19 +13,10 @@ function getLibrary(provider: any): Web3Provider {
 
 export default function App() {
   return (
-    <UseWalletProvider
-      chainId={4}
-      connectors={
-        {
-          // This is how connectors get configured
-          // portis: { dAppId: 'my-dapp-id-123-xyz' },
-          // test test test test
-        }
-      }
-    >
+    <WalletProvider>
       <Router>
         <Home />
       </Router>
-    </UseWalletProvider>
+    </WalletProvider>
   );
 }

packages/govern-console/src/EthersWallet.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, useMemo } from 'react';
+import { providers as EthersProviders } from 'ethers';
+import { UseWalletProvider, useWallet } from 'use-wallet';
+
+const WalletAugmentedContext = React.createContext({});
+
+function useWalletAugmented() {
+  return useContext(WalletAugmentedContext);
+}
+
+// Adds Ethers.js to the useWallet() object
+const WalletAugmented: React.FC<unknown> = ({ children }) => {
+  const wallet = useWallet();
+  const ethereum: any = wallet.ethereum;
+
+  const ethersProvider = useMemo(
+    () => (ethereum ? new EthersProviders.Web3Provider(ethereum) : null),
+    [ethereum],
+  );
+
+  const contextValue = useMemo(() => ({ ...wallet, ethersProvider }), [
+    wallet,
+    ethersProvider,
+  ]);
+
+  return (
+    <WalletAugmentedContext.Provider value={contextValue}>
+      {children}
+    </WalletAugmentedContext.Provider>
+  );
+};
+
+const WalletProvider: React.FC<unknown> = ({ children }) => {
+  return (
+    <UseWalletProvider chainId={4}>
+      <WalletAugmented>{children}</WalletAugmented>
+    </UseWalletProvider>
+  );
+};
+
+export { useWalletAugmented as useWallet, WalletProvider };

packages/govern-console/src/components/Checkboxs/BlueCheckbox.stories.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+
+import { Story, Meta } from '@storybook/react';
+
+import { BlueCheckbox } from './BlueCheckbox';
+
+export default {
+  title: 'Blue-checkbox',
+  component: BlueCheckbox,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story = (args) => <BlueCheckbox {...args} />;
+
+export const blue_checkbox = Template.bind({});

packages/govern-console/src/components/Checkboxs/BlueCheckbox.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import checkedIcon from '../../images/svgs/check_box_checked.svg';
+import unCheckedIcon from '../../images/svgs/check_box_unchecked.svg';
+
+export const BlueCheckbox = (props: CheckboxProps) => {
+  return (
+    <Checkbox
+      disableRipple
+      color="default"
+      checkedIcon={<img src={checkedIcon} />}
+      icon={<img src={unCheckedIcon} />}
+      {...props}
+    />
+  );
+};

packages/govern-console/src/components/Footer/Footer.tsx

@@ -1,7 +1,79 @@
 import React from 'react';
+import { styled, useTheme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import governIcon from 'images/aragon-icon.svg';
+import aragonText from 'images/svgs/Aragon.svg';
+import discordIcon from 'images/svgs/discord.svg';
+import messageIcon from 'images/svgs/message.svg';
+import twitterIcon from 'images/svgs/twitter.svg';
+import youtubeIcon from 'images/svgs/youtube.svg';
+import Wallet from 'components/Wallet/Wallet';
+import { useHistory } from 'react-router-dom';
 
-const Footer = ({ ...args }) => {
-  return <div></div>;
+const Footer = ({}) => {
+  const history = useHistory();
+  const HeaderWrapperDiv = styled('div')({
+    height: '106px',
+    width: '100%',
+    display: 'block',
+  });
+  const TitleText = styled(Typography)({
+    fontFamily: 'Manrope',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: '18px',
+    lineHeight: '25px',
+    color: '#7483B2',
+    width: '200px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  });
+  const Navbar = styled('div')({
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    height: '100%',
+  });
+  const Title = styled('div')({
+    display: 'flex',
+    width: 'fit-content',
+    cursor: 'pointer',
+    marginLeft: '50px',
+  });
+  const Account = styled('div')({
+    display: 'flex',
+    width: '200px',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginRight: '50px',
+  });
+
+  const redirectToHomePage = () => {
+    history.push('/');
+  };
+
+  return (
+    <HeaderWrapperDiv id="header">
+      <Navbar id="navbar">
+        <Title id="navbar_title" onClick={redirectToHomePage}>
+          <img
+            src={governIcon}
+            style={{ height: '31px', width: '35px', paddingTop: '35px' }}
+          />
+          <img src={aragonText} />
+        </Title>
+        <Account id="account">
+          <img src={youtubeIcon} />
+          <img src={twitterIcon} />
+          <img src={discordIcon} />
+          <img src={messageIcon} />
+        </Account>
+      </Navbar>
+    </HeaderWrapperDiv>
+  );
 };
 
 export default Footer;

packages/govern-console/src/components/Header/Header.tsx

@@ -3,9 +3,10 @@ import { styled, useTheme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import governIcon from 'images/aragon-icon.svg';
 import Wallet from 'components/Wallet/Wallet';
-// import
+import { useHistory } from 'react-router-dom';
 
 const Header = ({}) => {
+  const history = useHistory();
   const HeaderWrapperDiv = styled('div')({
     height: '106px',
     width: '100%',
@@ -43,10 +44,15 @@ const Header = ({}) => {
     justifyContent: 'flex-end',
     alignItems: 'center',
   });
+
+  const redirectToHomePage = () => {
+    history.push('/');
+  };
+
   return (
     <HeaderWrapperDiv id="header">
       <Navbar id="navbar">
-        <Title id="navbar_title">
+        <Title id="navbar_title" onClick={redirectToHomePage}>
           <img src={governIcon} />
           <TitleText>Govern Console</TitleText>
         </Title>

packages/govern-console/src/components/InputFields/InputField.tsx

@@ -24,6 +24,7 @@ export interface InputFieldProps {
    * Width of the input box
    */
   width: string;
+  value?: string;
 }
 
 export const InputField: React.FC<InputFieldProps> = ({
@@ -32,6 +33,7 @@ export const InputField: React.FC<InputFieldProps> = ({
   label,
   height,
   width,
+  value,
   ...props
 }) => {
   const theme = useTheme();
@@ -56,6 +58,7 @@ export const InputField: React.FC<InputFieldProps> = ({
     },
     input: {
       padding: '0px 0px 0px 24px',
+      boxSizing: 'border-box',
       margin: '0px',
       color: `${theme.custom.black}`,
       fontSize: 16,
@@ -88,6 +91,7 @@ export const InputField: React.FC<InputFieldProps> = ({
       InputLabelProps={{ shrink: true, classes: inputLabelClasses }}
       InputProps={{ classes: inputBaseClasses, disableUnderline: true }}
       onChange={(e) => onInputChange(e.target.value)}
+      value={value}
     />
   );
 };

packages/govern-console/src/components/ProgressBars/BlueProgressBar.stories.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable */
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+
+import { Story, Meta } from '@storybook/react';
+
+import { BlueProgressBar } from './BlueProgressBar';
+import { LinearProgressProps } from '@material-ui/core/LinearProgress';
+
+export default {
+  title: 'Blue-progressBar',
+  component: BlueProgressBar,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story<LinearProgressProps> = (args) => (
+  <BlueProgressBar {...args} />
+);
+
+export const blue_progress_bar = Template.bind({});
+
+blue_progress_bar.args = {
+  value: 50,
+};

packages/govern-console/src/components/ProgressBars/BlueProgressBar.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import LinearProgress, {
+  LinearProgressProps,
+} from '@material-ui/core/LinearProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  determinate: {
+    flexGrow: 1,
+    width: '100%',
+    height: '11px',
+    borderRadius: '10px',
+    backgroundColor: '#ECFAFF',
+  },
+  barColorPrimary: {
+    width: '100%',
+    height: '11px',
+    borderRadius: '50px',
+    backgroundColor: '#00B3EC',
+  },
+});
+
+export const BlueProgressBar = (props: LinearProgressProps) => {
+  const classes = useStyles();
+
+  return (
+    <LinearProgress
+      variant={'determinate'}
+      classes={{
+        determinate: classes.determinate,
+        barColorPrimary: classes.barColorPrimary,
+      }}
+      {...props}
+    />
+  );
+};

packages/govern-console/src/components/PropsalOptions/ProposalOptions.stories.tsx

@@ -14,7 +14,6 @@ const Template: Story<ProposalOptionsProps> = (args) => {
     updateOptions([...options, { value: '' }]);
   };
   const onDeleteOption = (index: number) => {
-    debugger;
     const tempOptions = [...options];
     tempOptions.splice(index, 1);
     updateOptions(tempOptions);

packages/govern-console/src/components/Switchs/BlueSwitch.stories.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable */
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+
+import { Story, Meta } from '@storybook/react';
+
+import { BlueSwitch, SwitchProps } from './BlueSwitch';
+
+export default {
+  title: 'Blue-Switch',
+  component: BlueSwitch,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story<SwitchProps> = (args) => <BlueSwitch {...args} />;
+
+export const Blue_Switch = Template.bind({});
+
+Blue_Switch.args = {
+  disabled: true,
+};