frontend stack setup

frontend/.env.development

@@ -0,0 +1 @@
+REACT_APP_INFURA_KEY=42

frontend/.eslintrc.json

@@ -1,19 +1,5 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  "overrides": [],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "project": "./tsconfig.json",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "root": true,
-  "rules": {
-    "react/react-in-jsx-scope": "off"
-  }
+  "extends": [
+    "@uniswap/eslint-config/react"
+  ]
 }

frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

frontend/README.md

@@ -1,33 +1,3 @@
-# Unruggable Memecoin Frontend
-
-Your gateway to seamlessly deploy safer Memecoins on Starknet.
-
-## TODO
-
-- [ ] Feature: Use already deployed ERC-20 contract classes from a list of predefined contract classes per environment (mainnet, testnet, etc.)
-- [ ] Feature: Use already deployed ERC-20 contract addresses, chosen by the user with arbitrary contract class hash
-- [ ] Add tests
-
-## 🛠️ Build
-
-To build the project, run:
-
-```bash
-yarn build
-```
-
-## 🧪 Test
-
-To test the project, run:
-
-```bash
-yarn test
-```
-
-## Development
-
-To start the development server, run:
-
-```bash
-yarn dev
-```
+<div align="center">
+  <h1 align="center">🚀 Unruggable interface</h1>
+</div>

frontend/craco.config.cjs

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-env node */
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+
+const path = require('path')
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+const shouldLintOrTypeCheck = !isProduction
+
+module.exports = {
+  babel: {
+    plugins: [
+      '@vanilla-extract/babel-plugin',
+    ],
+  },
+  eslint: {
+    enable: shouldLintOrTypeCheck,
+    pluginOptions(eslintConfig) {
+      return Object.assign(eslintConfig, {
+        cache: true,
+        cacheLocation: 'node_modules/.cache/eslint/',
+        ignorePath: '.gitignore',
+      })
+    },
+  },
+  typescript: {
+    enableTypeChecking: shouldLintOrTypeCheck,
+  },
+  webpack: {
+    plugins: [
+      new VanillaExtractPlugin({ identifiers: 'short' }),
+      new MiniCssExtractPlugin(),
+      new NodePolyfillPlugin({
+        excludeAliases: ['console'],
+      }),
+    ],
+    configure: (webpackConfig) => {
+      webpackConfig.resolve = Object.assign(webpackConfig.resolve, {
+        plugins: webpackConfig.resolve.plugins.map((plugin) => {
+          // Allow vanilla-extract in production builds.
+          // This is necessary because create-react-app guards against external imports.
+          // See https://sandroroth.com/blog/vanilla-extract-cra#production-build.
+          if (plugin instanceof ModuleScopePlugin) {
+            plugin.allowedPaths.push(path.join(__dirname, 'node_modules/@vanilla-extract/webpack-plugin'))
+          }
+
+          return plugin
+        }),
+        fallback: {
+          net: false,
+          tls: false,
+          fs: false,
+        },
+      })
+
+      webpackConfig.optimization = Object.assign(
+        webpackConfig.optimization,
+        isProduction
+          ? {
+              splitChunks: {
+                // Cap the chunk size to 5MB.
+                // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip.
+                // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there.
+                // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716.
+                maxSize: 5 * 1024 * 1024,
+                // Optimize over all chunks, instead of async chunks (the default), so that initial chunks are also optimized.
+                chunks: 'all',
+              },
+            }
+          : {}
+      )
+
+      return webpackConfig
+    },
+    rules: [
+      {
+        test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              url: false // Required as image imports should be handled via JS/TS import statements
+            },
+          },
+        ],
+      },
+    ],
+  },
+}

frontend/graphql.config.js

@@ -0,0 +1,8 @@
+/* eslint-env node */
+
+module.exports = {
+  src: './src',
+  language: 'typescript',
+  schema: './src/graphql/data/schema.graphql',
+  exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
+}

frontend/package.json

@@ -1,35 +1,60 @@
 {
-  "name": "starknet-tokenizooor",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
+  "name": "unruggable-interface",
+  "version": "0.1.0",
+  "repository": "[email protected]:0xchqrles/unruggable-interface.git",
+  "author": "chqrles",
+  "license": "MIT",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "start": "craco start",
+    "build": "craco build",
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@starknet-react/chains": "^0.1.0",
-    "@starknet-react/core": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "get-starknet-core": "^3.2.0",
-    "next": "^14.0.1",
+    "@starknet-react/core": "^0.14.8",
+    "@types/react-dom": "^18.2.1",
+    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/recipes": "^0.4.0",
+    "@vanilla-extract/sprinkles": "^1.6.0",
+    "clsx": "^1.2.1",
+    "ms.macro": "^2.0.0",
+    "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "starknet": "^5.19.5",
-    "tailwindcss": "^3.3.5"
+    "react-router-dom": "^6.11.0",
+    "starknet": "^5.10.0",
+    "ua-parser-js": "^1.0.35",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/parser": "^6.13.2",
-    "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "8.33.0",
-    "eslint-plugin-react": "^7.31.4",
-    "postcss": "^8.4.31",
-    "typescript": "4.9.5",
-    "vite": "^4.1.0",
-    "vite-plugin-checker": "^0.5.1"
+    "@craco/craco": "^7.1.0",
+    "@types/ms.macro": "^2.0.0",
+    "@types/react": "^18.2.0",
+    "@types/ua-parser-js": "^0.7.36",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@uniswap/eslint-config": "^1.2.0",
+    "@vanilla-extract/babel-plugin": "^1.2.0",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.55.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "get-graphql-schema": "^2.1.2",
+    "mini-css-extract-plugin": "^2.7.5",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "prettier": "^2.4.1",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.0.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

frontend/public/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      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`.
+    -->
+
+    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>
+
+    <!-- Inter font -->
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
+    <title>Unruggable interface</title>
+
+    <style>
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter var', sans-serif;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Unruggable Interface",
+  "name": "A framework for building safer memecoins.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}