🚀 Add User Interface for createx.rocks (#52)

Signed-off-by: Pascal Marco Caversaccio <pascal.caversaccio@hotmail.ch>
Co-authored-by: Matt Solomon <matt@mattsolomon.dev>

.eslintignore

@@ -1,4 +1,5 @@
 node_modules
+interface
 lib
 cache
 typechain-types

.github/workflows/checks.yml

@@ -48,7 +48,9 @@ jobs:
         run: pnpm install --prefer-offline --frozen-lockfile
 
       - name: Prettier and lint
-        run: pnpm lint:check
+        run: |
+          pnpm lint:check
+          pnpm lint:check:interface
 
   codespell:
     runs-on: ${{ matrix.os }}
@@ -91,5 +93,6 @@ jobs:
 
       - name: Validate URLs
         run: |
-          awesome_bot ./*.md src/*.sol test/**/*.sol test/public/**/*.sol --allow-dupe --request-delay 0.4 \
+          awesome_bot ./*.md src/*.sol test/**/*.sol test/public/**/*.sol interface/*.md interface/public/*.css interface/src/**/*.css interface/src/**/*.tsx interface/src/**/*.ts interface/src/components/**/*.tsx \
+          --allow-dupe --request-delay 0.4 \
           --white-list "https://github.com/pcaversaccio/createx/issues/new?assignees=pcaversaccio&labels=new+deployment+%E2%9E%95&projects=&template=deployment_request.yml&title=%5BNew-Deployment-Request%5D%3A+",https://twitter.com/PaulRBerg/status/1682346315806539776,https://www.createx.rocks,https://foundry.paradigm.xyz,https://github.com/pcaversaccio/createx.git

.prettierignore

@@ -1,4 +1,5 @@
 node_modules
+interface
 lib
 cache
 typechain-types

.solhintignore

@@ -1,4 +1,5 @@
 node_modules
+interface
 lib
 cache
 typechain-types

CNAME

@@ -1 +1 @@
-createx.rocks
+createx.rocks

interface/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+next-env.d.ts

interface/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next"]
+}

interface/.gitignore

@@ -0,0 +1,51 @@
+# Ignore all Visual Studio Code settings
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local history for Visual Studio Code
+.history
+
+# Built Visual Studio Code extensions
+*.vsix
+
+# Dependency directory
+node_modules
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Log files
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Yarn integrity file
+.yarn-integrity
+
+# Optional npm cache directory
+.npm
+
+# Modern Yarn files
+.pnp.*
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Next.js
+.next
+next-env.d.ts

interface/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+next-env.d.ts

interface/.prettierrc.yml

@@ -0,0 +1,6 @@
+plugins:
+  - "prettier-plugin-tailwindcss"
+  - "@trivago/prettier-plugin-sort-imports"
+importOrder:
+  ["^react(.*)", "next/(.*)", "<THIRD_PARTY_MODULES>", "@/(.*)", "^[./]"]
+importOrderSortSpecifiers: true

interface/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Matt Solomon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

interface/README.md

@@ -0,0 +1,7 @@
+# [`CreateX`](../src/CreateX.sol) User Interface
+
+[Next.js](https://nextjs.org)-based user interface for [createx.rocks](https://www.createx.rocks).
+
+## 🙏🏼 Acknowledgement
+
+Our code is based on a fork of [Matt Solomon](https://github.com/mds1)'s [`Multicall3`](https://github.com/mds1/multicall) [frontend](https://github.com/mds1/multicall3-frontend), licensed under the [MIT License](https://github.com/mds1/multicall3-frontend/blob/main/LICENSE).

interface/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "createx-interface",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Next.js-based user interface for createx.rocks.",
+  "keywords": [
+    "frontend",
+    "interface",
+    "nextjs",
+    "react",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pcaversaccio/createx.git"
+  },
+  "homepage": "https://github.com/pcaversaccio/createx/tree/main/interface#readme",
+  "bugs": {
+    "url": "https://github.com/pcaversaccio/createx/issues"
+  },
+  "author": "pcaversaccio (https://pcaversaccio.com), Matt Solomon (https://mattsolomon.dev)",
+  "license": "MIT",
+  "scripts": {
+    "dev": "npx next dev",
+    "build": "npx next build",
+    "start": "pnpm build && npx next start",
+    "prettier:check": "npx prettier -c **/*.{js,ts,tsx,css,md,json,yml,yaml}",
+    "prettier:fix": "npx prettier -w **/*.{js,ts,tsx,css,md,json,yml,yaml}",
+    "lint:check": "pnpm prettier:check && npx next lint",
+    "lint:fix": "pnpm prettier:fix && npx next lint --fix"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "next": "14.0.4",
+    "next-themes": "^0.2.1",
+    "prismjs": "^1.29.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sharp": "^0.33.0"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "20.10.4",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
+    "autoprefixer": "10.4.16",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.0.4",
+    "postcss": "8.4.32",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "tailwindcss": "3.3.6",
+    "typescript": "5.3.3"
+  }
+}

interface/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

interface/prismjs.d.ts

@@ -0,0 +1,5 @@
+declare module "prismjs";
+declare module "prismjs/themes/*" {
+  const content: string;
+  export default content;
+}

interface/public/prism-dark.css

@@ -0,0 +1,126 @@
+/**
+ * This file was copied from node_modules/prismjs/themes/prism-tomorrow.css and is required for clean
+ * applying and removing of the prism.js themes when switching between light and dark mode.
+ */
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}