diff --git a/apps/admin/src/main.tsx b/apps/admin/src/main.tsx index b56f5a06..ee02821a 100644 --- a/apps/admin/src/main.tsx +++ b/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( diff --git a/apps/dev-sandbox/.babelrc b/apps/dev-sandbox/.babelrc new file mode 100644 index 00000000..61641ec8 --- /dev/null +++ b/apps/dev-sandbox/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": [ + [ + "@nrwl/react/babel", + { + "runtime": "automatic" + } + ] + ], + "plugins": [] +} diff --git a/apps/dev-sandbox/.browserslistrc b/apps/dev-sandbox/.browserslistrc new file mode 100644 index 00000000..f1d12df4 --- /dev/null +++ b/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'. \ No newline at end of file diff --git a/apps/dev-sandbox/.eslintrc.json b/apps/dev-sandbox/.eslintrc.json new file mode 100644 index 00000000..734ddace --- /dev/null +++ b/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": {} + } + ] +} diff --git a/apps/dev-sandbox/jest.config.ts b/apps/dev-sandbox/jest.config.ts new file mode 100644 index 00000000..6c97e710 --- /dev/null +++ b/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', +}; diff --git a/apps/dev-sandbox/project.json b/apps/dev-sandbox/project.json new file mode 100644 index 00000000..530bc538 --- /dev/null +++ b/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": [] +} diff --git a/apps/dev-sandbox/src/App.tsx b/apps/dev-sandbox/src/App.tsx new file mode 100644 index 00000000..78ddc7f9 --- /dev/null +++ b/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(); + + return ( + + + + ); +}; diff --git a/apps/dev-sandbox/src/Routes.tsx b/apps/dev-sandbox/src/Routes.tsx new file mode 100644 index 00000000..018e6467 --- /dev/null +++ b/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; +}) => { + 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 ( + + }> + } /> + + }> + } /> + } /> + + + ); +}; diff --git a/apps/dev-sandbox/src/assets/.gitkeep b/apps/dev-sandbox/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/apps/dev-sandbox/src/components/HomeContent.tsx b/apps/dev-sandbox/src/components/HomeContent.tsx new file mode 100644 index 00000000..72828808 --- /dev/null +++ b/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 ( + +
+

Home

+ Development Sandbox +
+ + ); +}; diff --git a/apps/dev-sandbox/src/environments/environment.prod.ts b/apps/dev-sandbox/src/environments/environment.prod.ts new file mode 100644 index 00000000..c9669790 --- /dev/null +++ b/apps/dev-sandbox/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true, +}; diff --git a/apps/dev-sandbox/src/environments/environment.ts b/apps/dev-sandbox/src/environments/environment.ts new file mode 100644 index 00000000..7ed83767 --- /dev/null +++ b/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, +}; diff --git a/apps/dev-sandbox/src/favicon.ico b/apps/dev-sandbox/src/favicon.ico new file mode 100755 index 00000000..d2184928 Binary files /dev/null and b/apps/dev-sandbox/src/favicon.ico differ diff --git a/apps/dev-sandbox/src/index.html b/apps/dev-sandbox/src/index.html new file mode 100644 index 00000000..e5688388 --- /dev/null +++ b/apps/dev-sandbox/src/index.html @@ -0,0 +1,14 @@ + + + + + DAOHaus DevSandbox + + + + + + +
+ + diff --git a/apps/dev-sandbox/src/layout/DaoContainer.tsx b/apps/dev-sandbox/src/layout/DaoContainer.tsx new file mode 100644 index 00000000..b81d1fed --- /dev/null +++ b/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 ( + + } + > + + + + + + ); +}; diff --git a/apps/dev-sandbox/src/layout/HomeContainer.tsx b/apps/dev-sandbox/src/layout/HomeContainer.tsx new file mode 100644 index 00000000..a39f38ec --- /dev/null +++ b/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 ( + DAOhaus Admin Tool} + pathname={location.pathname} + navLinks={[{ label: 'Hub', href: `/` }]} + footer={