Mashrukh - DHedge Frontend Widget

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["unused-imports"],
+  "rules": {
+    "react/jsx-sort-props": [
+      1,
+      {
+        "shorthandFirst": true,
+        "callbacksLast": true
+      }
+    ],
+    "unused-imports/no-unused-imports": "error"
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+/build
+/dist
+# IDE
+
+.vscode/

README.md

@@ -1,2 +1,22 @@
-# frontend-widget
-Widget interface for organization branded dHEDGE pools
+# DHedge Widget
+
+## Steps
+
+- `yarn install`
+- `yarn run start`
+
+## Build Steps
+
+- `yarn build`
+- `yarn publish`
+- Make sure to change publishConfig before publishing
+
+## Using the widget
+
+- `import {DHedgeWidget} from "@widget-package-name"`
+- `import avatar from "./image.png";`
+- ```
+    <div>
+    <DHedgeWidget poolAddress={"0x0000000000000000000000000000000000000000"} avatar={avatar}>
+    </div>
+  ```

babel.config.json

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3.6.5"
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

config-overrides.js

@@ -0,0 +1,53 @@
+module.exports = function override(config, env) {
+  return {
+    ...config,
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                importLoaders: 1,
+              },
+            },
+            "postcss-loader",
+          ],
+        },
+        {
+          test: /\.(ts|js)x?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-typescript", "@babel/preset-react"],
+            },
+          },
+        },
+        {
+          test: /\.svg$/,
+          use: {
+            loader: "svg-url-loader",
+            options: {
+              limit: 10000,
+            },
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".json"],
+    },
+    output: {
+      filename: "static/js/dhedge-widget.js",
+      chunkFilename: "static/js/dhedge-widget.[name].js",
+      path: "/build",
+      pathinfo: false,
+      publicPath: "/",
+      chunkLoadingGlobal: "webpackJsonpfrontend-widget",
+      globalObject: "this",
+    },
+  };
+};

package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@mushroomgenie/dhedge-widget",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^16.11.27",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "@web3-react/abstract-connector": "^6.0.7",
+    "@web3-react/core": "^6.1.9",
+    "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/walletconnect-connector": "^6.2.13",
+    "@web3-react/walletlink-connector": "^6.2.14",
+    "axios": "^0.26.1",
+    "ethers": "^5.6.4",
+    "graphql": "^16.3.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-icons": "^4.3.1",
+    "react-jazzicon": "^1.0.3",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.1.9",
+    "typescript": "^4.6.3",
+    "urql": "^2.2.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "rm -rf dist && NODE_ENV=production babel src/ --out-dir dist --copy-files",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.9",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@tailwindcss/postcss7-compat": "^2.2.17",
+    "autoprefixer": "^10.4.4",
+    "babel-loader": "^8.2.4",
+    "css-loader": "^6.7.1",
+    "customize-cra": "^1.0.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "postcss": "^8.4.12",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.6.2",
+    "react-app-rewired": "^2.2.1",
+    "style-loader": "^3.3.1",
+    "svg-url-loader": "^7.1.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+  }
+}

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+};

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>DHegede Frontend Widget</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Web3ReactProvider } from "@web3-react/core";
+import { ethers } from "ethers";
+import { Provider } from "urql";
+
+import {
+  ConnectModalContext,
+  PerformanceHistoryTabsContext,
+  InvestModalContext,
+  FundCompositionContext,
+  PoolAddressContext,
+  WalletInfoModalContext,
+  AvatarContext,
+} from "./context";
+import WalletConnectionModal from "./components/WalletConnectionModal";
+import { urqlClient } from "./graph";
+import BaseLayout from "./components/BaseLayout";
+import InvestModal from "./components/InvestModal";
+import WalletInfoModal from "./components/WalletInfoModal";
+
+type WidgetProps = {
+  poolAddress: string;
+  avatar?: any;
+};
+const DHedgeWidget: React.FC<WidgetProps> = (props) => {
+  const { poolAddress, avatar } = props;
+
+  const getLibrary = (provider: any): ethers.providers.Web3Provider => {
+    const library = new ethers.providers.Web3Provider(provider);
+    library.pollingInterval = 12000;
+    return library;
+  };
+
+  const [connectModalOpen, setConnectModalOpen] = useState<boolean>(false);
+  const [tabIndex, setTabIndex] = useState<string>("1m");
+  const [investModalOpen, setInvestModalOpen] = useState<boolean>(false);
+  const [depositAssets, setDepositAssets] = useState([]);
+  const [walletInfoModalOpen, setWalletInfoModalOpen] =
+    useState<boolean>(false);
+
+  return (
+    <>
+      <Web3ReactProvider getLibrary={getLibrary}>
+        <Provider value={urqlClient}>
+          <PoolAddressContext.Provider value={poolAddress}>
+            <AvatarContext.Provider value={avatar}>
+              <ConnectModalContext.Provider
+                value={[connectModalOpen, setConnectModalOpen]}
+              >
+                <PerformanceHistoryTabsContext.Provider
+                  value={[tabIndex, setTabIndex]}
+                >
+                  <InvestModalContext.Provider
+                    value={[investModalOpen, setInvestModalOpen]}
+                  >
+                    <FundCompositionContext.Provider
+                      value={[depositAssets, setDepositAssets]}
+                    >
+                      <WalletInfoModalContext.Provider
+                        value={[walletInfoModalOpen, setWalletInfoModalOpen]}
+                      >
+                        <BaseLayout />
+                        <WalletConnectionModal />
+                        <InvestModal />
+                        <WalletInfoModal />
+                      </WalletInfoModalContext.Provider>
+                    </FundCompositionContext.Provider>
+                  </InvestModalContext.Provider>
+                </PerformanceHistoryTabsContext.Provider>
+              </ConnectModalContext.Provider>
+            </AvatarContext.Provider>
+          </PoolAddressContext.Provider>
+        </Provider>
+      </Web3ReactProvider>
+    </>
+  );
+};
+
+export default DHedgeWidget;