feat: Migrate from Create React App to Vite

.github/workflows/ci.yaml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 21
       - uses: actions/cache@v2
         with:
           path: "**/node_modules"

.github/workflows/dev-cd.yaml

@@ -5,22 +5,22 @@ on:
     branches: main
 
 env:
-  REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
-  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
-  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
-  REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
-  REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
-  REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet
-  REACT_APP_SUBGRAPH_GOERLI: auryn-macmillan/tabula-goerli
-  REACT_APP_SUBGRAPH_SEPOLIA: auryn-macmillan/tabula-sepolia
-  REACT_APP_SUBGRAPH_POLYGON: auryn-macmillan/tabula-polygon
-  REACT_APP_SUBGRAPH_ARBITRUM: auryn-macmillan/tabula-arbitrum
-  REACT_APP_SUBGRAPH_OPTIMISM: auryn-macmillan/tabula-optimism
-  REACT_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN: auryn-macmillan/tabula-optimism-on-gnosis-chain
-  REACT_APP_IPFS_GATEWAY: https://ipfs.io/ipfs
-  REACT_APP_ENS_SUBGRAPH_MAINNET: ensdomains/ens
-  REACT_APP_ENS_SUBGRAPH_GOERLI: ensdomains/ensgoerli
+  VITE_APP_POSTER_CONTRACT: ${{ secrets.VITE_APP_POSTER_CONTRACT }}
+  VITE_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.VITE_APP_INFURA_NETWORK_ACCESS_KEY }}
+  VITE_APP_INFURA_IPFS_API_KEY: ${{ secrets.VITE_APP_INFURA_IPFS_API_KEY }}
+  VITE_APP_INFURA_IPFS_API_SECRET: ${{ secrets.VITE_APP_INFURA_IPFS_API_SECRET }}
+  VITE_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
+  VITE_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
+  VITE_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet
+  VITE_APP_SUBGRAPH_GOERLI: auryn-macmillan/tabula-goerli
+  VITE_APP_SUBGRAPH_SEPOLIA: auryn-macmillan/tabula-sepolia
+  VITE_APP_SUBGRAPH_POLYGON: auryn-macmillan/tabula-polygon
+  VITE_APP_SUBGRAPH_ARBITRUM: auryn-macmillan/tabula-arbitrum
+  VITE_APP_SUBGRAPH_OPTIMISM: auryn-macmillan/tabula-optimism
+  VITE_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN: auryn-macmillan/tabula-optimism-on-gnosis-chain
+  VITE_APP_IPFS_GATEWAY: https://ipfs.io/ipfs
+  VITE_APP_ENS_SUBGRAPH_MAINNET: ensdomains/ens
+  VITE_APP_ENS_SUBGRAPH_GOERLI: ensdomains/ensgoerli
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 21
       - run: npm install -g yarn
       - run: yarn install --frozen-lockfile
       - run: yarn build
@@ -39,7 +39,7 @@ jobs:
         uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
         with:
           pin-name: Tabula - Latest — ${ GITHUB_SHA }
-          path: "./packages/app/build"
+          path: "./packages/app/dist"
           pinata-api-key: ${{ secrets.PINATA_API_KEY }}
           pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}
 

.github/workflows/prod-release-deploy.yaml

@@ -5,22 +5,22 @@ on:
     types: published
 
 env:
-  REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
-  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
-  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
-  REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
-  REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
-  REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet
-  REACT_APP_SUBGRAPH_GOERLI: auryn-macmillan/tabula-goerli
-  REACT_APP_SUBGRAPH_SEPOLIA: auryn-macmillan/tabula-sepolia
-  REACT_APP_SUBGRAPH_POLYGON: auryn-macmillan/tabula-polygon
-  REACT_APP_SUBGRAPH_ARBITRUM: auryn-macmillan/tabula-arbitrum
-  REACT_APP_SUBGRAPH_OPTIMISM: auryn-macmillan/tabula-optimism
-  REACT_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN: auryn-macmillan/tabula-optimism-on-gnosis-chain
-  REACT_APP_IPFS_GATEWAY: https://ipfs.io/ipfs
-  REACT_APP_ENS_SUBGRAPH_MAINNET: ensdomains/ens
-  REACT_APP_ENS_SUBGRAPH_GOERLI: ensdomains/ensgoerli
+  VITE_APP_POSTER_CONTRACT: ${{ secrets.VITE_APP_POSTER_CONTRACT }}
+  VITE_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.VITE_APP_INFURA_NETWORK_ACCESS_KEY }}
+  VITE_APP_INFURA_IPFS_API_KEY: ${{ secrets.VITE_APP_INFURA_IPFS_API_KEY }}
+  VITE_APP_INFURA_IPFS_API_SECRET: ${{ secrets.VITE_APP_INFURA_IPFS_API_SECRET }}
+  VITE_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
+  VITE_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
+  VITE_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet
+  VITE_APP_SUBGRAPH_GOERLI: auryn-macmillan/tabula-goerli
+  VITE_APP_SUBGRAPH_SEPOLIA: auryn-macmillan/tabula-sepolia
+  VITE_APP_SUBGRAPH_POLYGON: auryn-macmillan/tabula-polygon
+  VITE_APP_SUBGRAPH_ARBITRUM: auryn-macmillan/tabula-arbitrum
+  VITE_APP_SUBGRAPH_OPTIMISM: auryn-macmillan/tabula-optimism
+  VITE_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN: auryn-macmillan/tabula-optimism-on-gnosis-chain
+  VITE_APP_IPFS_GATEWAY: https://ipfs.io/ipfs
+  VITE_APP_ENS_SUBGRAPH_MAINNET: ensdomains/ens
+  VITE_APP_ENS_SUBGRAPH_GOERLI: ensdomains/ensgoerli
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 21
       - run: npm install -g yarn
       - run: yarn install --frozen-lockfile
       - run: yarn build
@@ -39,7 +39,7 @@ jobs:
         uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
         with:
           pin-name: Tabula - Release — ${ GITHUB_SHA }
-          path: "./packages/app/build"
+          path: "./packages/app/dist"
           pinata-api-key: ${{ secrets.PINATA_API_KEY }}
           pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}
 
@@ -144,4 +144,4 @@ jobs:
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: ./packages/app/build
+          folder: ./packages/app/dist

package.json

@@ -9,8 +9,8 @@
   ],
   "dependencies": {
     "@ethersproject/providers": "^5.6.1",
-    "axios": "^0.26.1",
-    "gh-pages": "^3.2.3",
+    "axios": "^1.6.8",
+    "gh-pages": "^6.1.1",
     "markdown-to-jsx": "^7.1.7",
     "react-markdown": "^8.0.0",
     "react-router-dom": "6",

packages/app/.env.example

@@ -1,18 +1,18 @@
 
-REACT_APP_INFURA_NETWORK_ACCESS_KEY=
-REACT_APP_POSTER_CONTRACT=0x000000000000cd17345801aa8147b8D3950260FF
-REACT_APP_SUBGRAPH_BASE_URL=https://api.thegraph.com/subgraphs/name/
-REACT_APP_SUBGRAPH_GNOSIS_CHAIN=auryn-macmillan/tabula-gnosis-chain
-REACT_APP_SUBGRAPH_MAINNET=auryn-macmillan/tabula-mainnet
-REACT_APP_SUBGRAPH_GOERLI=auryn-macmillan/tabula-goerli
-REACT_APP_SUBGRAPH_SEPOLIA=auryn-macmillan/tabula-sepolia
-REACT_APP_SUBGRAPH_POLYGON=auryn-macmillan/tabula-polygon
-REACT_APP_SUBGRAPH_ARBITRUM=auryn-macmillan/tabula-arbitrum
-REACT_APP_SUBGRAPH_OPTIMISM=auryn-macmillan/tabula-optimism
-REACT_APP_ENS_SUBGRAPH_MAINNET=ensdomains/ens
-REACT_APP_ENS_SUBGRAPH_GOERLI=ensdomains/ensgoerli
-REACT_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
-REACT_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN=auryn-macmillan/tabula-optimism-on-gnosis-chain
-REACT_APP_INFURA_IPFS_API_KEY=
-REACT_APP_INFURA_IPFS_API_SECRET=
+VITE_APP_INFURA_NETWORK_ACCESS_KEY=
+VITE_APP_POSTER_CONTRACT=0x000000000000cd17345801aa8147b8D3950260FF
+VITE_APP_SUBGRAPH_BASE_URL=https://api.thegraph.com/subgraphs/name/
+VITE_APP_SUBGRAPH_GNOSIS_CHAIN=auryn-macmillan/tabula-gnosis-chain
+VITE_APP_SUBGRAPH_MAINNET=auryn-macmillan/tabula-mainnet
+VITE_APP_SUBGRAPH_GOERLI=auryn-macmillan/tabula-goerli
+VITE_APP_SUBGRAPH_SEPOLIA=auryn-macmillan/tabula-sepolia
+VITE_APP_SUBGRAPH_POLYGON=auryn-macmillan/tabula-polygon
+VITE_APP_SUBGRAPH_ARBITRUM=auryn-macmillan/tabula-arbitrum
+VITE_APP_SUBGRAPH_OPTIMISM=auryn-macmillan/tabula-optimism
+VITE_APP_ENS_SUBGRAPH_MAINNET=ensdomains/ens
+VITE_APP_ENS_SUBGRAPH_GOERLI=ensdomains/ensgoerli
+VITE_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
+VITE_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN=auryn-macmillan/tabula-optimism-on-gnosis-chain
+VITE_APP_INFURA_IPFS_API_KEY=
+VITE_APP_INFURA_IPFS_API_SECRET=
 

packages/app/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

packages/app/src/react-app-env.d.ts → packages/app/declarations.d.ts

@@ -1,4 +1,6 @@
+
 declare module "react-helmet";
+
 interface Window {
   ethereum: any
 }

packages/app/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Tabula" />
+    <meta property="og:site_name" content="Tabula" />
+    <meta
+      property="og:description"
+      content="Instant web3 publications for writers, DAOs, and any Ethereum-based account."
+    />
+    <meta name="description" content="Instant web3 publications for writers, DAOs, and any Ethereum-based account." />
+    <meta property="og:url" content="https://tabula.gg" />
+    <meta property="og:image" content="https://tabula.gg/image.jpg" />
+    <title>Tabula</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`.
+      -->
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

packages/app/package.json

@@ -6,6 +6,7 @@
   "homepage": "https://onposter.github.io",
   "dependencies": {
     "@chainsafe/web3-context": "^1.3.1",
+    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^2.8.8",
@@ -15,16 +16,14 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.9",
     "@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.13",
+    "add": "^2.0.6",
     "axios": "^0.26.1",
     "blockies-ts": "^1.0.0",
+    "browserslist-to-esbuild": "^1.2.0",
     "draft-convert": "^2.1.13",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
@@ -40,29 +39,31 @@
     "marked": "^5.1.2",
     "moment": "^2.29.2",
     "notistack": "^2.0.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.29.0",
     "react-p5": "^1.3.33",
     "react-query": "^3.34.16",
     "react-router-dom": "^6.2.2",
-    "react-scripts": "4.0.3",
     "react-select": "^5.3.2",
     "turndown": "^7.1.1",
     "typescript": "^4.4.2",
     "uid": "^2.0.1",
     "urql": "^2.2.0",
     "web-vitals": "^2.1.0",
     "webpack": "4.44.2",
+    "yarn": "^1.22.21",
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
-    "old-start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite --port=3000",
+    "clean": "rimraf ./dist ./.cache ./node_modules/.vite",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vite test",
+    "eject": "vite eject",
     "fmt": "prettier '(test|src)/**/*.(ts|tsx)' -w",
     "pre-commit": "yarn fmt"
   },
@@ -72,23 +73,39 @@
       "react-app/jest"
     ]
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "browser": {
     "crypto": false
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "devDependencies": {
+    "@svgr/rollup": "^8.1.0",
     "@types/draft-convert": "^2.1.4",
     "@types/draft-js": "^0.11.10",
+    "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.180",
     "@types/marked": "^5.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-helmet": "^6.1.11",
     "@types/turndown": "^5.0.1",
-    "prettier": "^2.5.1"
-  },
-  "resolutions": {
-    "@babel/runtime": "7.18.0"
+    "@vitejs/plugin-react": "^4.2.1",
+    "prettier": "^2.5.1",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2"
   }
 }