Migrate to Vite

Geo-Web-Project · Sep 20, 2023 · bc6a9e1 · bc6a9e1
1 parent b6efaea
commit bc6a9e1
Show file tree

Hide file tree

Showing 21 changed files with 770 additions and 367 deletions.
diff --git a/.env.mainnet b/.env.mainnet
@@ -1,8 +1,8 @@
-NEXT_PUBLIC_NETWORK_ID = 10
-NEXT_PUBLIC_GRAPH_URI = https://api.thegraph.com/subgraphs/name/geo-web-project/geo-web-subgraph
-NEXT_PUBLIC_CERAMIC_URI = https://ceramic.geoweb.network/
-NEXT_PUBLIC_CERAMIC_CONNECT_NETWORK = "mainnet"
-NEXT_PUBLIC_ANNUALRATE = 0.1
-NEXT_PUBLIC_IPFS_GATEWAY = https://w3s.link
-NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY = https://w3s.link
-NEXT_PUBLIC_IPFS_DELEGATE = "/dns4/ceramic.geoweb.network/tcp/443/https"
+VITE_PUBLIC_NETWORK_ID = 10
+VITE_PUBLIC_GRAPH_URI = https://api.thegraph.com/subgraphs/name/geo-web-project/geo-web-subgraph
+VITE_PUBLIC_CERAMIC_URI = https://ceramic.geoweb.network/
+VITE_PUBLIC_CERAMIC_CONNECT_NETWORK = "mainnet"
+VITE_PUBLIC_ANNUALRATE = 0.1
+VITE_PUBLIC_IPFS_GATEWAY = https://w3s.link
+VITE_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY = https://w3s.link
+VITE_PUBLIC_IPFS_DELEGATE = "/dns4/ceramic.geoweb.network/tcp/443/https"
diff --git a/.env.testnet b/.env.testnet
@@ -1,10 +1,10 @@
-NEXT_PUBLIC_NETWORK_ID = 420
-NEXT_PUBLIC_GRAPH_URI = https://api.thegraph.com/subgraphs/name/geo-web-project/geo-web-testnet
-NEXT_PUBLIC_CERAMIC_URI = https://ceramic-clay.geoweb.network/
-NEXT_PUBLIC_CERAMIC_CONNECT_NETWORK = "testnet-clay"
-NEXT_PUBLIC_ANNUALRATE = 0.1
-NEXT_PUBLIC_IPFS_GATEWAY = https://w3s.link
-NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY = https://w3s.link
-NEXT_PUBLIC_IPFS_DELEGATE = "/dns4/ceramic-clay.geoweb.network/tcp/443/https"
-NEXT_PUBLIC_WS_RPC_URL=wss://opt-goerli.g.alchemy.com/v2/Y4RuzHDAmcqDnO6iqLcfwDzmbTk4xHob
-NEXT_PUBLIC_LIVEPEER_API_KEY=8cdf71bd-3f27-46e8-991b-411a0f75b91f
+VITE_PUBLIC_NETWORK_ID = 420
+VITE_PUBLIC_GRAPH_URI = https://api.thegraph.com/subgraphs/name/geo-web-project/geo-web-testnet
+VITE_PUBLIC_CERAMIC_URI = https://ceramic-clay.geoweb.network/
+VITE_PUBLIC_CERAMIC_CONNECT_NETWORK = "testnet-clay"
+VITE_PUBLIC_ANNUALRATE = 0.1
+VITE_PUBLIC_IPFS_GATEWAY = https://w3s.link
+VITE_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY = https://w3s.link
+VITE_PUBLIC_IPFS_DELEGATE = "/dns4/ceramic-clay.geoweb.network/tcp/443/https"
+VITE_PUBLIC_WS_RPC_URL=wss://opt-goerli.g.alchemy.com/v2/Y4RuzHDAmcqDnO6iqLcfwDzmbTk4xHob
+VITE_PUBLIC_LIVEPEER_API_KEY=8cdf71bd-3f27-46e8-991b-411a0f75b91f
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,5 @@ yarn-error.log*
 .direnv
 
 *.pem
+
+dist/
diff --git a/app/layout.tsx b/app/layout.tsx
diff --git a/dec.d.ts b/dec.d.ts
@@ -1 +1,2 @@
-declare module "@latticexyz/store/mud.config";
+declare module "@geo-web/mud-world-base-setup";
+declare module "@ensdomains/content-hash";
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Geospatial Browser for Accessing The Geo Web"
+    />    
+    <title>Geo Web Browser</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="react-root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/next-env.d.ts b/next-env.d.ts
diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -6,20 +6,13 @@
     "@apollo/client": "^3.7.16",
     "@augmented-worlds/system-babylonjs": "^0.1.16",
     "@ensdomains/content-hash": "2.5.7",
-    "@geo-web/mud-world-base-client": "^0.0.10",
+    "@geo-web/mud-world-base-contracts": "^0.0.12",
+    "@geo-web/mud-world-base-setup": "0.0.2",
     "@geo-web/sdk": "^4.2.0",
     "@geo-web/types": "^0.2.0",
     "@google/model-viewer": "^3.2.1",
-    "@latticexyz/common": "2.0.0-next.5",
-    "@latticexyz/dev-tools": "2.0.0-next.5",
-    "@latticexyz/react": "2.0.0-next.5",
-    "@latticexyz/recs": "2.0.0-next.5",
-    "@latticexyz/schema-type": "2.0.0-next.5",
-    "@latticexyz/services": "2.0.0-next.5",
-    "@latticexyz/store": "^1.42.0",
-    "@latticexyz/store-sync": "2.0.0-next.5",
-    "@latticexyz/utils": "2.0.0-next.5",
-    "@latticexyz/world": "2.0.0-next.5",
+    "@latticexyz/react": "2.0.0-next.8",
+    "@latticexyz/recs": "2.0.0-next.8",
     "@livepeer/react": "^2.8.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
@@ -31,10 +24,10 @@
     "ethereum-blockies-base64": "^1.0.2",
     "graphql": "^15.8.0",
     "multiformats": "^11.0.2",
-    "next": "^13.4.19",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "sass": "^1.62.1",
     "swiper": "^10.2.0",
     "three": "^0.156.1",
@@ -43,11 +36,10 @@
   },
   "scripts": {
     "dev-https": "local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000",
-    "dev": "next dev",
-    "build": "next build",
-    "export": "next export",
-    "start": "next start",
-    "lint": "next lint",
+    "build": "vite build",
+    "dev": "vite --mode testnet",
+    "preview": "vite preview",
+    "test": "tsc --noEmit",
     "prettier": "prettier -w src/**"
   },
   "browserslist": {
@@ -75,10 +67,12 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/ua-parser-js": "^0.7.36",
+    "@vitejs/plugin-react": "^4.0.4",
     "eslint": "^7.32.0",
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "^8.5.0",
     "local-ssl-proxy": "^1.3.0",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.4",
+    "vite": "^4.4.9"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.scss b/src/App.scss
@@ -24,7 +24,7 @@ $theme-colors: (
 
 $font-family-base: "Abel";
 
-@import "~bootstrap/scss/bootstrap";
+// @import "~bootstrap/scss/bootstrap";
 
 body {
   background: #202333;

diff --git a/app/page.tsx → src/App.tsx b/app/page.tsx → src/App.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, useEffect } from "react";
 import GWLoader from "../src/components/common/Loader/Loader";
 import GWS from "../src/container/GeoWebSystem/GWS";
@@ -28,7 +26,7 @@ const livepeerTheme: ThemeConfig = {
   },
 };
 
-export default function Index() {
+export function App() {
   const [hasAgreedModal, setHasAgreedModal] = useState<boolean | null>(null);
 
   const client = createReactClient({

diff --git a/src/components/common/AugmentedWorld/AugmentedWorld.tsx b/src/components/common/AugmentedWorld/AugmentedWorld.tsx
@@ -27,9 +27,7 @@ import CopyTooltip from "../CopyTooltip";
 import Image from "react-bootstrap/Image";
 import { UAParser } from "ua-parser-js";
 import { Close } from "@material-ui/icons";
-import { encode as encodeDagJson } from "@ipld/dag-json";
-import { decode as decodeJson } from "multiformats/codecs/json";
-import { useMUD } from "@geo-web/mud-world-base-client";
+import { useMUD } from "@geo-web/mud-world-base-setup";
 import { useEntityQuery } from "@latticexyz/react";
 import { Has, getComponentValue } from "@latticexyz/recs";
 import contentHash from "@ensdomains/content-hash";

diff --git a/src/container/GeoWebInterface/components/GeoWebCanvas/GWCanvas.tsx b/src/container/GeoWebInterface/components/GeoWebCanvas/GWCanvas.tsx
@@ -4,12 +4,12 @@ import ContentLabel from "../../../../components/common/ContentLabel/ContentLabe
 import styles from "./styles.module.css";
 import { Entity } from "@latticexyz/recs";
 import { getComponentValue } from "@latticexyz/recs";
-import { useMUD } from "@geo-web/mud-world-base-client";
+import { useMUD } from "@geo-web/mud-world-base-setup";
 import contentHash from "@ensdomains/content-hash";
 import { CID } from "multiformats";
 import { Player } from "@livepeer/react";
 
-const gwGateway = process.env.NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY;
+const gwGateway = import.meta.env.NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY;
 
 export enum MediaObjectType {
   Image,

diff --git a/src/container/GeoWebSystem/GWS.tsx b/src/container/GeoWebSystem/GWS.tsx
@@ -7,19 +7,13 @@ import GWContentView from "../GeoWebInterface/components/GeoWebContent/GWContent
 import { WS_RPC_URL, NETWORK_ID } from "../../lib/constants";
 import { getGeoId, getParcelInfo } from "../../lib/api";
 import { ethers } from "ethers";
-import { useMUD } from "@geo-web/mud-world-base-client";
 import { useComponentValue, useEntityQuery } from "@latticexyz/react";
 import { singletonEntity } from "@latticexyz/store-sync/recs";
 import { Has } from "@latticexyz/recs";
-import { useSearchParams } from "next/navigation";
-import {
-  MUDProvider,
-  SetupResult,
-  setup,
-} from "@geo-web/mud-world-base-client";
+import { useMUD, MUDProvider, setup } from "@geo-web/mud-world-base-setup";
 import { optimismGoerli } from "viem/chains";
 import { MUDChain } from "@latticexyz/common/chains";
-import storeConfig from "@latticexyz/store/mud.config.mjs";
+import { useSearchParams } from "react-router-dom";
 
 const chainId = 420;
 const supportedChains: MUDChain[] = [
@@ -36,10 +30,10 @@ const supportedChains: MUDChain[] = [
 ];
 
 export default function GWS() {
-  const params = useSearchParams();
+  const [params] = useSearchParams();
   const world = params.get("world");
 
-  const [mudSetup, setMUDSetup] = useState<SetupResult | null>(null);
+  const [mudSetup, setMUDSetup] = useState<any | null>(null);
   useEffect(() => {
     (async () => {
       const mudSetup = await setup({
@@ -68,7 +62,7 @@ export default function GWS() {
 }
 
 function InnerGWS() {
-  const params = useSearchParams();
+  const [params] = useSearchParams();
   const lat = params.get("latitude");
   const lon = params.get("longitude");
   const world = params.get("world");

diff --git a/src/helpers/gwUtils.js b/src/helpers/gwUtils.js
@@ -1,7 +1,7 @@
 import { ethers, BigNumber } from "ethers";
 
 //network constants
-let annualRate = process.env.NEXT_PUBLIC_ANNUALRATE;
+let annualRate = import.meta.env.NEXT_PUBLIC_ANNUALRATE;
 let perSecondFeeNumerator = parseFloat(annualRate) * 100;
 let perSecondFeeDenominator = 60 * 60 * 24 * 365 * 100;
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+const rootElement = document.getElementById("react-root");
+if (!rootElement) throw new Error("React root not found");
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+]);
+
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
diff --git a/src/lib/api.js b/src/lib/api.js
@@ -8,7 +8,7 @@ import {
 } from "../helpers/gwParser";
 
 //  Refer Environment Variables
-const GRAPH_URL = process.env.NEXT_PUBLIC_GRAPH_URI;
+const GRAPH_URL = import.meta.env.NEXT_PUBLIC_GRAPH_URI;
 
 //  Instantiate Apollo & Ceramic Clients
 const graphClient = new ApolloClient({

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,14 +1,15 @@
-export const NETWORK_ID = parseInt(process.env.NEXT_PUBLIC_NETWORK_ID!);
+export const NETWORK_ID = parseInt(import.meta.env.VITE_PUBLIC_NETWORK_ID!);
 export const PAYMENT_TOKEN = "ETHx";
-export const SUBGRAPH_URL = process.env.NEXT_PUBLIC_GRAPH_URI;
-export const GRAPH_URL = process.env.NEXT_PUBLIC_GRAPH_URI;
-export const CERAMIC_URL = process.env.NEXT_PUBLIC_CERAMIC_URI;
-export const CONNECT_NETWORK = process.env.NEXT_PUBLIC_CERAMIC_CONNECT_NETWORK;
+export const SUBGRAPH_URL = import.meta.env.VITE_PUBLIC_GRAPH_URI;
+export const GRAPH_URL = import.meta.env.VITE_PUBLIC_GRAPH_URI;
+export const CERAMIC_URL = import.meta.env.VITE_PUBLIC_CERAMIC_URI;
+export const CONNECT_NETWORK = import.meta.env
+  .VITE_PUBLIC_CERAMIC_CONNECT_NETWORK;
 export const CERAMIC_EXPLORER = `https://cerscan.com/${CONNECT_NETWORK}/stream`;
-export const IPFS_DELEGATE = process.env.NEXT_PUBLIC_IPFS_DELEGATE;
+export const IPFS_DELEGATE = import.meta.env.VITE_PUBLIC_IPFS_DELEGATE;
 export const PINATA_API_ENDPOINT = "https://api.pinata.cloud/psa";
 export const STORAGE_WORKER_ENDPOINT =
   "https://storage-workers.geo-web.workers.dev";
 export const SECONDS_IN_YEAR = 60 * 60 * 24 * 365;
-export const WS_RPC_URL = process.env.NEXT_PUBLIC_WS_RPC_URL!;
-export const LIVEPEER_API_KEY = process.env.NEXT_PUBLIC_LIVEPEER_API_KEY!;
+export const WS_RPC_URL = import.meta.env.VITE_PUBLIC_WS_RPC_URL!;
+export const LIVEPEER_API_KEY = import.meta.env.VITE_PUBLIC_LIVEPEER_API_KEY!;