Merge pull request #430 from HausDAO/feature/wizard-form

Feature/wizard form

apps/admin/src/main.tsx

@@ -1,8 +1,10 @@
-import { HausThemeProvider } from '@daohaus/ui';
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { HausThemeProvider } from '@daohaus/ui';
+
 import { App } from './App';
 
 const root = ReactDOM.createRoot(

apps/dev-sandbox/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/dev-sandbox/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/dev-sandbox/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/dev-sandbox/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'dev-sandbox',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/dev-sandbox',
+};

apps/dev-sandbox/project.json

@@ -0,0 +1,84 @@
+{
+  "name": "dev-sandbox",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/dev-sandbox/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/dev-sandbox",
+        "index": "apps/dev-sandbox/src/index.html",
+        "baseHref": "/",
+        "main": "apps/dev-sandbox/src/main.tsx",
+        "polyfills": "apps/dev-sandbox/src/polyfills.ts",
+        "tsConfig": "apps/dev-sandbox/tsconfig.app.json",
+        "assets": [
+          "apps/dev-sandbox/src/favicon.ico",
+          "apps/dev-sandbox/src/assets"
+        ],
+        "styles": [],
+        "scripts": [],
+        "webpackConfig": "@nrwl/react/plugins/webpack"
+      },
+      "configurations": {
+        "development": {
+          "extractLicenses": false,
+          "optimization": false,
+          "sourceMap": true,
+          "vendorChunk": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/dev-sandbox/src/environments/environment.ts",
+              "with": "apps/dev-sandbox/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/webpack:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "dev-sandbox:build",
+        "hmr": true
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "dev-sandbox:build:development"
+        },
+        "production": {
+          "buildTarget": "dev-sandbox:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/dev-sandbox/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/dev-sandbox/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

apps/dev-sandbox/src/App.tsx

@@ -0,0 +1,13 @@
+import { DHConnectProvider } from '@daohaus/connect';
+import { useState } from 'react';
+import { Routes } from './Routes';
+
+export const App = () => {
+  const [daoChainId, setDaoChainId] = useState<string | undefined>();
+
+  return (
+    <DHConnectProvider daoChainId={daoChainId}>
+      <Routes setDaoChainId={setDaoChainId} />
+    </DHConnectProvider>
+  );
+};

apps/dev-sandbox/src/Routes.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import {
+  matchPath,
+  useLocation,
+  Routes as RoutesDom,
+  Route,
+} from 'react-router-dom';
+
+import { ReactSetter } from '@daohaus/utils';
+import { MULTI_DAO_ROUTER } from '@daohaus/moloch-v3-hooks';
+
+import { DaoContainer } from './layout/DaoContainer';
+import { HomeContainer } from './layout/HomeContainer';
+import { DaoOverview } from './pages/DaoOverview';
+import { Home } from './pages/Home';
+import { FormTest } from './pages/FormTest';
+
+export const Routes = ({
+  setDaoChainId,
+}: {
+  setDaoChainId: ReactSetter<string | undefined>;
+}) => {
+  const location = useLocation();
+  const pathMatch = matchPath('molochv3/:daochain/:daoid/*', location.pathname);
+
+  useEffect(() => {
+    if (pathMatch?.params?.daochain) {
+      setDaoChainId(pathMatch?.params?.daochain);
+    }
+    if (!pathMatch?.params?.daochain) {
+      setDaoChainId(undefined);
+    }
+  }, [pathMatch?.params?.daochain, setDaoChainId]);
+
+  return (
+    <RoutesDom>
+      <Route path="/" element={<HomeContainer />}>
+        <Route path="/" element={<Home />} />
+      </Route>
+      <Route path={MULTI_DAO_ROUTER} element={<DaoContainer />}>
+        <Route index element={<DaoOverview />} />
+        <Route path="formtest" element={<FormTest />} />
+      </Route>
+    </RoutesDom>
+  );
+};

apps/dev-sandbox/src/components/HomeContent.tsx

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+
+import { breakpoints, H1, ParXl } from '@daohaus/ui';
+
+const ViewBox = styled.div`
+  grid-area: body;
+  width: 100%;
+  height: 70rem;
+  display: flex;
+  background-image: url('assets/hub-illustration.svg');
+  background-size: auto 60rem;
+  background-repeat: no-repeat;
+  background-position: -10% 180%;
+  margin-top: 6.3rem;
+  .text-section {
+    width: 100%;
+    max-width: 40rem;
+    min-width: 28rem;
+  }
+  .hero {
+    font-size: 6rem;
+    font-weight: 900;
+  }
+  .tag-line {
+    font-size: 1.6rem;
+    margin-bottom: 3.2rem;
+    font-weight: 700;
+  }
+  ul {
+    margin-top: 2.4rem;
+    padding-inline-start: 2.4rem;
+    margin-top: 2.4rem;
+  }
+  li {
+    font-size: 1.6rem;
+  }
+  @media (min-width: ${breakpoints.xs}) {
+    height: 80rem;
+    background-size: auto 70rem;
+    background-position: 6rem 8rem;
+  }
+  @media (min-width: ${breakpoints.sm}) {
+    height: 90rem;
+    background-size: auto 80rem;
+    background-position: 20rem 10rem;
+    .hero {
+      font-size: 6.6rem;
+    }
+    .tag-line {
+      font-size: 3.2rem;
+    }
+  }
+  @media (min-width: ${breakpoints.md}) {
+    .text-section {
+      max-width: 52rem;
+    }
+    height: 100rem;
+    background-size: auto 90rem;
+    background-position: 110% 30%;
+  }
+`;
+export const HomeContent = () => {
+  return (
+    <ViewBox>
+      <div className="text-section">
+        <H1 className="hero">Home</H1>
+        <ParXl className="tag-line">Development Sandbox</ParXl>
+      </div>
+    </ViewBox>
+  );
+};

apps/dev-sandbox/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

apps/dev-sandbox/src/environments/environment.ts

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false,
+};

apps/dev-sandbox/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DAOHaus DevSandbox</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

apps/dev-sandbox/src/layout/DaoContainer.tsx

@@ -0,0 +1,58 @@
+import { Outlet, useLocation, useParams } from 'react-router-dom';
+
+import { DHLayout, useDHConnect } from '@daohaus/connect';
+import { CurrentDaoProvider, useDaoData } from '@daohaus/moloch-v3-hooks';
+import { ValidNetwork } from '@daohaus/keychain-utils';
+import { TXBuilder } from '@daohaus/tx-builder';
+import { Footer } from '@daohaus/ui';
+
+export const DaoContainer = () => {
+  const { address, publicClient } = useDHConnect();
+  const { daoChain, daoId, proposalId, memberAddress } = useParams<{
+    daoChain: ValidNetwork;
+    daoId: string;
+    proposalId: string;
+    memberAddress: string;
+  }>();
+
+  const { dao } = useDaoData({
+    daoId: daoId as string,
+    daoChain: daoChain as string,
+  });
+
+  const location = useLocation();
+
+  const navLinks = [
+    { label: 'Home', href: `/` },
+    { label: 'DAO', href: `/molochv3/${daoChain}/${daoId}` },
+    { label: 'Form Test', href: `/molochv3/${daoChain}/${daoId}/formtest` },
+  ];
+
+  return (
+    <TXBuilder
+      chainId={daoChain}
+      daoId={daoId}
+      safeId={dao?.safeAddress}
+      appState={{ dao, userAddress: address }}
+      publicClient={publicClient}
+    >
+      <DHLayout
+        pathname={location.pathname}
+        navLinks={navLinks}
+        footer={<Footer />}
+      >
+        <CurrentDaoProvider
+          userAddress={address}
+          targetDao={{
+            daoChain,
+            daoId,
+            proposalId,
+            memberAddress,
+          }}
+        >
+          <Outlet />
+        </CurrentDaoProvider>
+      </DHLayout>
+    </TXBuilder>
+  );
+};

apps/dev-sandbox/src/layout/HomeContainer.tsx

@@ -0,0 +1,18 @@
+import { DHLayout } from '@daohaus/connect';
+import { Footer, H4 } from '@daohaus/ui';
+import { Outlet, useLocation } from 'react-router-dom';
+
+export const HomeContainer = () => {
+  const location = useLocation();
+
+  return (
+    <DHLayout
+      leftNav={<H4>DAOhaus Admin Tool</H4>}
+      pathname={location.pathname}
+      navLinks={[{ label: 'Hub', href: `/` }]}
+      footer={<Footer />}
+    >
+      <Outlet />
+    </DHLayout>
+  );
+};