Major Refactor: Transition from React to Vite, Integration of Novel Editor, and Web3Modal Implementation

.github/workflows/ci.yaml

@@ -9,16 +9,13 @@ 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"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
       - run: yarn install
       - run: yarn build
-      - name: Generate subgraph.yaml for Goerli
-        working-directory: packages/subgraph
-        run: yarn prepare:goerli
       - name: Generate subgraph.yaml for Sepolia
         working-directory: packages/subgraph
         run: yarn prepare:sepolia

.github/workflows/dev-cd.yaml

@@ -5,22 +5,21 @@ 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_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_SEPOLIA: ensdomains/enssepolia
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -29,7 +28,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 +38,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 }}
 
@@ -78,14 +77,8 @@ jobs:
         working-directory: packages/subgraph
         run: yarn run graph auth --product hosted-service ${{ secrets.GRAPH_ACCESS_TOKEN }}
 
-      - name: Deploy Goerli subgraphs
-        working-directory: packages/subgraph
-        env:
-          HOSTED_SERVICE_SUBGRAPH__GOERLI: auryn-macmillan/tabula-goerli
-        run: yarn deploy:goerli
-
       - name: Deploy Sepolia subgraphs
         working-directory: packages/subgraph
         env:
-          HOSTED_SERVICE_SUBGRAPH__GOERLI: auryn-macmillan/tabula-sepolia
+          HOSTED_SERVICE_SUBGRAPH__SEPOLIA: auryn-macmillan/tabula-sepolia
         run: yarn deploy:sepolia

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

@@ -5,22 +5,21 @@ 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_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_SEPOLIA: ensdomains/enssepolia
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -29,7 +28,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 +38,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 }}
 
@@ -110,16 +109,10 @@ jobs:
           HOSTED_SERVICE_SUBGRAPH__GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
         run: yarn deploy:gnosis-chain
 
-      - name: Deploy subgraph to Goerli
-        working-directory: packages/subgraph
-        env:
-          HOSTED_SERVICE_SUBGRAPH__GOERLI: auryn-macmillan/tabula-goerli
-        run: yarn deploy:goerli
-
       - name: Deploy subgraph to Sepolia
         working-directory: packages/subgraph
         env:
-          HOSTED_SERVICE_SUBGRAPH__GOERLI: auryn-macmillan/tabula-sepolia
+          HOSTED_SERVICE_SUBGRAPH__SEPOLIA: auryn-macmillan/tabula-sepolia
         run: yarn deploy:sepolia
 
       - name: Deploy subgraph to Polygon
@@ -144,4 +137,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4.3.3
         with:
           branch: gh-pages
-          folder: ./packages/app/build
+          folder: ./packages/app/dist

.gitignore

@@ -5,3 +5,4 @@ packages/subgraph/tests/.bin
 packages/subgraph/subgraph.yaml
 **/.env
 .vscode/*
+packages/app/tsconfig.tsbuildinfo

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,16 @@
-
-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_WALLET_CONNECT_ID=
+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_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_SEPOLIA=ensdomains/enssepolia
+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,5 @@
-declare module "react-helmet";
+declare module "react-helmet"
+
 interface Window {
   ethereum: any
-}
+}

packages/app/index.html

@@ -0,0 +1,39 @@
+<!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>
+    <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>