Initial commit

.eslintignore

@@ -0,0 +1,2 @@
+src/services/subgraph/generated.ts
+.eslintrc.ts

.eslintrc.ts

@@ -0,0 +1,34 @@
+export default {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    ecmaFeatures: {
+      // Allows for the parsing of JSX
+      jsx: true,
+    },
+  },
+  ignorePatterns: ["node_modules/**/*"],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  extends: [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["react", "@typescript-eslint", "react-hooks", "prettier"],
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+  },
+}

.gitignore

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

.nvmrc

@@ -0,0 +1 @@
+v20.10.0

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": false,
+  "printWidth": 90,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.4.0

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  // eslint options
+  "eslint.enable": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  // prettier settings
+  "prettier.configPath": ".prettierrc",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // other settings
+  "editor.formatOnSave": true,
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
+  // "editor.rulers": [90],
+}

README.md

@@ -0,0 +1,28 @@
+# v1-interface
+
+Marginal V1 Interface web app.
+
+## Installation
+
+Install with yarn
+
+```sh
+yarn
+```
+
+## Requirements
+
+Require a valid alchemy rpc stored in your .env file:
+
+```sh
+REACT_APP_SEPOLIA_ALCHEMY_RPC = YOUR_API_KEY
+REACT_APP_CODEX = YOUR_API_KEY
+```
+
+## Local Development
+
+To start local development on localhost:3000
+
+```sh
+yarn start
+```

codegen.ts

@@ -0,0 +1,27 @@
+import { CodegenConfig } from "@graphql-codegen/cli"
+
+const config: CodegenConfig = {
+  overwrite: true,
+  documents: "./src/graphql/*.graphql",
+  schema:
+    "https://api.studio.thegraph.com/query/83456/marginal-v1-ethereum-mainnet/version/latest",
+  generates: {
+    "src/services/subgraph/generated.ts": {
+      plugins: [
+        "typescript",
+        "typescript-operations",
+        {
+          "typescript-rtk-query": {
+            importBaseApiFrom: "./api",
+            exportHooks: true,
+          },
+        },
+      ],
+      hooks: {
+        afterOneFileWrite: ["prettier --write"],
+      },
+    },
+  },
+}
+
+export default config

craco.config.js

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

package.json

@@ -0,0 +1,104 @@
+{
+  "name": "m-interface",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^7.1.0",
+    "@ethersproject/abstract-provider": "^5.7.0",
+    "@ethersproject/contracts": "^5.7.0",
+    "@ethersproject/providers": "^5.7.2",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@headlessui/react": "^1.7.19",
+    "@heroicons/react": "^2.1.1",
+    "@lingui/macro": "^4.10.0",
+    "@rainbow-me/rainbowkit": "^1.3.0",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@rtk-query/graphql-request-base-query": "^2.3.1",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@tanstack/react-table": "^8.13.2",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.68",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@uniswap/sdk-core": "^4.2.0",
+    "@uniswap/token-lists": "^1.0.0-beta.34",
+    "@wagmi/core": "^1.4.12",
+    "add": "^2.0.6",
+    "axios": "^1.7.7",
+    "cids": "^1.1.9",
+    "copy-to-clipboard": "^3.3.3",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "ethers": "^6.10.0",
+    "framer-motion": "^11.0.8",
+    "graphql": "^16.8.1",
+    "js-big-decimal": "^2.0.7",
+    "jsbi": "^4.3.0",
+    "lodash": "^4.17.21",
+    "multicodec": "^3.2.1",
+    "multihashes": "^4.0.3",
+    "prettier": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.0.2",
+    "react-router-dom": "^6.21.2",
+    "react-scripts": "^5.0.1",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
+    "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-border-gradient-radius": "^3.0.1",
+    "typescript": "^4.9.5",
+    "viem": "1.21.4",
+    "wagmi": "^1.4.10",
+    "web-vitals": "^2.1.4",
+    "yarn": "^1.22.21",
+    "zod": "^3.22.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "graphql:generate": "graphql-codegen --config codegen.ts",
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-codegen/introspection": "^4.0.0",
+    "@graphql-codegen/typescript-rtk-query": "^3.1.1",
+    "@types/lodash": "^4.14.202",
+    "@types/react-window": "^1.8.8",
+    "autoprefixer": "^10.4.16",
+    "css-loader": "^6.9.0",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^7.3.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "style-loader": "^3.3.4"
+  }
+}

postcss.config.js

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

public/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/marginal.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Permissionless markets with leverage" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/marginal.svg" />
+    <!--
+      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>Marginal Protocol</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,13 @@
+{
+  "short_name": "Marginal",
+  "name": "Marginal",
+  "icons": [
+    {
+      "src": "marginal.svg",
+      "sizes": "48x24",
+      "type": "image/svg+xml"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone"
+}

public/robots.txt

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

src/App.tsx

@@ -0,0 +1,13 @@
+import { BrowserRouter as Router } from "react-router-dom"
+import Routes from "./routes"
+import "./index.css"
+
+function App() {
+  return (
+    <Router>
+      <Routes />
+    </Router>
+  )
+}
+
+export default App