init commit

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_URL=http://devdao_backend/

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_URL=http://18.218.182.48/

.eslintignore

@@ -0,0 +1,4 @@
+/.next
+/node_modules
+/out
+/public

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "plugins": [
+      "react"
+  ],
+  "rules": {
+      "react/prop-types": ["off"]
+  }
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+*.pem

.prettierignore

@@ -0,0 +1,4 @@
+/.next
+/node_modules
+/out
+/public

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/PopupAlert.js

@@ -0,0 +1,44 @@
+/* global require */
+import React, { Component } from "react";
+import Snackbar from "@material-ui/core/Snackbar";
+import MuiAlert from "@material-ui/lab/Alert";
+
+const moment = require("moment");
+
+class PopupAlert extends Component {
+  onClose = () => {
+    const { onClose } = this.props;
+    if (onClose) onClose();
+  };
+
+  render() {
+    const { shown, message, type } = this.props;
+
+    return (
+      <Snackbar
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={shown || false}
+        onClose={this.onClose}
+        key={`topright_${moment().unix()}`}
+        autoHideDuration={2000}
+        style={{
+          zIndex: 9999,
+        }}
+      >
+        <MuiAlert
+          elevation={6}
+          variant="filled"
+          onClose={this.close}
+          severity={type || "warning"}
+        >
+          {message || ""}
+        </MuiAlert>
+      </Snackbar>
+    );
+  }
+}
+
+export default PopupAlert;

components/back-button/BackButton.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import "./back-button.scss";
+
+export default function BackButton({ link, onClick }) {
+  const onClickHandler = onClick || (() => {});
+
+  if (link) {
+    return (
+      <Link to={link} className={"back-btn"} onClick={onClickHandler}>
+        <img src="/back.png" alt="" />
+      </Link>
+    );
+  }
+
+  return (
+    <a className={"back-btn"} onClick={onClickHandler}>
+      <img src="/back.png" alt="" />
+    </a>
+  );
+}

components/back-button/back-button.scss

@@ -0,0 +1,12 @@
+.back-btn {
+  display: flex; 
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

components/form-control/FormSelect.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+export default function FormSelect({
+  required,
+  value,
+  placeholder,
+  onChange,
+  options,
+  name,
+  underlined,
+}) {
+  const className = underlined
+    ? "custom-form-control underlined"
+    : "custom-form-control";
+  const onChangeHandler = onChange || (() => {});
+  const selectOptions = [];
+  if (options && options.length) {
+    options.forEach((item, index) => {
+      selectOptions.push(
+        <option value={item} key={name + "_" + index}>
+          {item}
+        </option>
+      );
+    });
+  }
+
+  return (
+    <select
+      className={className}
+      onChange={onChangeHandler}
+      required={required || false}
+      value={value || ""}
+    >
+      <option value="">{placeholder}</option>
+      {selectOptions}
+    </select>
+  );
+}

components/form-control/form-input/FormInput.js

@@ -0,0 +1,49 @@
+import React from "react";
+import "./form-input.scss";
+
+export default function FormInput({
+  type,
+  required,
+  value,
+  placeholder,
+  onChange,
+  align,
+  name,
+  underlined,
+}) {
+  const onChangeHandler = onChange || (() => {});
+  let className =
+    align && align == "center"
+      ? "custom-form-control text-center"
+      : "custom-form-control";
+  if (underlined) className += " underlined";
+
+  if (name) {
+    return (
+      <input
+        type={type || "text"}
+        required={required || false}
+        value={value || ""}
+        name={name}
+        className={className}
+        placeholder={placeholder || ""}
+        autoComplete="off"
+        autoSave="off"
+        onChange={onChangeHandler}
+      />
+    );
+  }
+
+  return (
+    <input
+      type={type || "text"}
+      required={required || false}
+      value={value || ""}
+      className={className}
+      placeholder={placeholder || ""}
+      autoComplete="off"
+      autoSave="off"
+      onChange={onChangeHandler}
+    />
+  );
+}

components/form-control/form-input/form-input.scss

@@ -0,0 +1,58 @@
+.custom-form-control {
+  display: block;
+  width: 100%;
+  height: 64px;
+  min-height: 28px;
+  border: none;
+  font-size: 1.125rem;
+  font-weight: 700;
+  background-color: white;
+  padding-left: 30px;
+  border-radius: 12px;
+  -webkit-box-shadow: 1px 3px 11px 0px rgba(0,0,0,0.4);
+  -moz-box-shadow: 1px 3px 11px 0px rgba(0,0,0,0.4);
+  box-shadow: 1px 3px 11px 0px rgba(0,0,0,0.4);
+
+  &.custom-form-control-checkbox {
+    border-bottom: none;
+    display: flex;
+    align-items: flex-start;
+
+    input {
+      margin-right: 8px;
+      margin-top: 7px;
+    }
+  }
+
+  &.underlined {
+    box-shadow: none;
+    background-color: transparent;
+    color: white;
+    font-size: 15px;
+    font-weight: 400;
+    border-bottom: 1px solid #ffffff;
+    height: auto;
+    padding-bottom: 4px;
+    padding-left: 0;
+    border-radius: 0;
+  }
+}
+.custom-form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: rgba(0, 0, 0, 0.2);
+}
+.custom-form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgba(0, 0, 0, 0.2);
+}
+.custom-form-control::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgba(0, 0, 0, 0.2);
+}
+
+.custom-form-control.underlined::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: rgba(255, 255, 255, 0.25);
+}
+.custom-form-control.underlined:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgba(255, 255, 255, 0.25);
+}
+.custom-form-control.underlined::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgba(255, 255, 255, 0.25);
+}

components/form-control/hidden-field/HiddenField.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./hidden-field.scss";
+
+export default function HiddenField({ type, name }) {
+  if (name) {
+    return <input type={type || "text"} className="hiddenField" name={name} />;
+  }
+
+  return <input type={type || "text"} className="hiddenField" />;
+}

components/form-control/hidden-field/hidden-field.scss

@@ -0,0 +1,7 @@
+.hiddenField {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}

components/global-canvas/GlobalCanvas.js

@@ -0,0 +1,12 @@
+import React from "react";
+import DotLoader from "react-spinners/DotLoader";
+
+import "./global-canvas.scss";
+
+export default function GlobalCanvas() {
+  return (
+    <div className="global-canvas">
+      <DotLoader color="#0089D7" />
+    </div>
+  );
+}

components/global-canvas/global-canvas.scss

@@ -0,0 +1,12 @@
+.global-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}