merging vite → ui-vite

packages/ui-vite/package.json

@@ -10,11 +10,14 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-helmet": "^6",
     "@vitejs/plugin-react": "^2.0.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.0"

packages/ui-vite/src/App-ORIG.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  )
+}
+
+export default App

packages/ui-vite/src/App.tsx

@@ -1,34 +1,53 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+// import '../styles/globals.css'
+import {Helmet} from 'react-helmet'
+import { ChakraProvider } from '@chakra-ui/react'
+import { Web3ContextProvider } from './lib/hooks'
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  useQuery,
+  gql
+} from '@apollo/client'
+import { CONFIG } from './config'
+import Home from './pages/home'
+import New from './pages/new'
 
-function App() {
-  const [count, setCount] = useState(0)
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link
+} from "react-router-dom";
 
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
-}
+const client = new ApolloClient({
+  uri: CONFIG.nftGraph,
+  cache: new InMemoryCache(),
+})
+
+const App: React.FC = () => (
+  <ChakraProvider>
+    <Helmet>
+      <link
+        rel="shortcut icon"
+        href="favicon.png"
+      />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+      />
+    </Helmet>
+    <ApolloProvider {...{ client }}>
+      <Web3ContextProvider> 
+        <Router>
+          <Routes>
+            <Route path="/new" element={<New/>} />
+            <Route path="/" element={<Home/>} />
+          </Routes>
+        </Router>
+      </Web3ContextProvider>
+    </ApolloProvider>
+  </ChakraProvider>
+)
 
 export default App

packages/ui-vite/src/main.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

packages/vite/src/main.tsx → packages/ui-vite/src/mainORIG.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

yarn.lock

@@ -7079,6 +7079,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-helmet@npm:^6":
+  version: 6.1.5
+  resolution: "@types/react-helmet@npm:6.1.5"
+  dependencies:
+    "@types/react": "*"
+  checksum: d059cc084d3b3071cce3421bb1170dd42819cf39b81afe60d4fbd66c5ef9ffeaadf1802df80efd9553258f621678f69ceb5a21d73df0d8539d40ae9a0f995485
+  languageName: node
+  linkType: hard
+
 "@types/react-reconciler@npm:^0.26.2":
   version: 0.26.4
   resolution: "@types/react-reconciler@npm:0.26.4"
@@ -23871,9 +23880,12 @@ __metadata:
   dependencies:
     "@types/react": ^18.0.15
     "@types/react-dom": ^18.0.6
+    "@types/react-helmet": ^6
     "@vitejs/plugin-react": ^2.0.0
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-helmet: ^6.1.0
+    react-router-dom: ^6.3.0
     typescript: ^4.6.4
     vite: ^3.0.0
   languageName: unknown