OriginProtocol · nick · Sep 14, 2023 · Sep 14, 2023 · Sep 18, 2023 · Sep 18, 2023
diff --git a/apps/governance/.eslintrc.json b/apps/governance/.eslintrc.json
@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/governance/index.html b/apps/governance/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <title>Governance</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Inter font -->
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+
+    <!--  Sailec font -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/index.min.css"
+    />
+
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/governance/postcss.config.js b/apps/governance/postcss.config.js
@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/apps/governance/project.json b/apps/governance/project.json
@@ -0,0 +1,80 @@
+{
+  "name": "governance",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/governance/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/governance"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "governance:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "governance:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "governance:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "governance:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "governance:build:development"
+        },
+        "production": {
+          "buildTarget": "governance:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "coverage/apps/governance"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/apps/governance"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "apps/governance/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/governance/public/favicon.ico b/apps/governance/public/favicon.ico
diff --git a/apps/governance/src/assets/logo.svg b/apps/governance/src/assets/logo.svg
diff --git a/apps/governance/src/assets/ogv.svg b/apps/governance/src/assets/ogv.svg
diff --git a/apps/governance/src/assets/ve-ogv.svg b/apps/governance/src/assets/ve-ogv.svg
diff --git a/apps/governance/src/components/Actions.tsx b/apps/governance/src/components/Actions.tsx
@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { StateContext } from './AppState';
+import { ExternalLink } from './Icons';
+
+export const Actions = () => {
+  const { setState } = useContext(StateContext);
+  return (
+    <div className="flex items-center gap-4">
+      <Link
+        className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1"
+        to="https://www.ousd.com/ogv-dashboard"
+        target="_blank"
+      >
+        OGV dashboard
+        <ExternalLink />
+      </Link>
+      <button
+        className="btn-outline text-xs pl-4 pr-3 py-2 leading-tight flex items-center gap-1"
+        // to="https://app.uniswap.org/swap?outputCurrency=0x9c354503C38481a7A7a51629142963F98eCC12D0&chain=mainnet"
+        // target="_blank"
+        onClick={() => setState({ devControls: true })}
+      >
+        Get OGV
+        <ExternalLink />
+      </button>
+    </div>
+  );
+};
diff --git a/apps/governance/src/components/AnimatedModal.tsx b/apps/governance/src/components/AnimatedModal.tsx
@@ -0,0 +1,119 @@
+import { forwardRef, useEffect, useState } from 'react';
+
+import { Modal } from '@mui/base/Modal';
+import { animated, useSpring } from '@react-spring/web';
+
+import { Close } from './Icons';
+
+import type { ReactNode } from 'react';
+
+interface AnimatedModalProps {
+  children: React.ReactNode;
+  open: boolean;
+  shouldClose?: boolean;
+  onClose: () => void;
+  maxWidth?: number;
+}
+
+export const AnimatedModal = (props: AnimatedModalProps) => {
+  const { open, children, onClose } = props;
+  const [shouldClose, setShouldClose] = useState(false);
+
+  const panelProps = useSpring({
+    from: { opacity: 0, y: 0, transform: 'scale(0.95)' },
+    to: {
+      opacity: open && !shouldClose ? 1 : 0,
+      transform: open && !shouldClose ? 'scale(1)' : 'scale(0.95)',
+      y: shouldClose ? 50 : 0,
+    },
+    config: { mass: 0.2, tension: 170, friction: 24 },
+    onChange(result) {
+      if (result.value.opacity < 0.03 && shouldClose) {
+        setShouldClose(false);
+        onClose();
+      }
+    },
+  });
+
+  const opacityProps = useSpring({
+    from: { opacity: 0 },
+    to: {
+      opacity: open && !shouldClose ? 1 : 0,
+    },
+    config: { mass: 1, tension: 170, friction: 24 },
+  });
+
+  useEffect(() => {
+    if (props.shouldClose) setShouldClose(true);
+  }, [props.shouldClose]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setShouldClose(true)}
+      className="fixed inset-0 w-screen overflow-y-auto"
+      slots={{ backdrop: Backdrop }}
+      slotProps={{
+        backdrop: {
+          className: 'fixed inset-0 bg-off-black/80 z-10 pointer-events-none',
+          style: opacityProps as object,
+        },
+      }}
+    >
+      <div
+        className="flex min-h-full justify-center items-center py-4"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) setShouldClose(true);
+        }}
+      >
+        <animated.div
+          style={{ ...panelProps, maxWidth: props.maxWidth || 550 }}
+          className="bg-gray-900 z-20 w-full rounded-lg relative"
+        >
+          {children}
+        </animated.div>
+      </div>
+    </Modal>
+  );
+};
+
+interface BackdropProps {
+  className: string;
+  onClick?: () => void;
+  style: object;
+}
+
+const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(
+  function Backdrop(props, ref) {
+    const { className, onClick, style } = props;
+    return (
+      <animated.div
+        style={style}
+        className={className}
+        ref={ref}
+        onClick={onClick}
+      />
+    );
+  },
+);
+
+interface HeaderProps {
+  children: ReactNode;
+  onClose?: () => void;
+}
+
+export const ModalHeader = ({ children, onClose }: HeaderProps) => {
+  return (
+    <div className="py-4 px-6 font-bold flex items-center justify-between border-b border-off-black leading-none">
+      {children}
+      {!onClose ? null : (
+        <button
+          className="p-1.5 rounded-full bg-gray-800 hover:bg-gray-700"
+          onClick={() => onClose()}
+        >
+          <Close />
+        </button>
+      )}
+    </div>
+  );
+};