tryin' to figure out why Chakra UI is inaccessible 🤼‍♀️

.yarnrc.yml

@@ -8,4 +8,6 @@ preferInteractive: true
 
 progressBarStyle: simba
 
+nmHoistingLimits: none
+
 yarnPath: .yarn/releases/yarn-3.2.0.cjs

packages/scene/.gitignore

@@ -30,3 +30,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.yarn/

packages/scene/package.json

@@ -12,8 +12,8 @@
     "@react-three/drei": "^8.20.2",
     "@react-three/fiber": "^7.0.26",
     "next": "12.1.2",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "three": "^0.139.0"
   },
   "devDependencies": {

packages/ui-vite/package.json

@@ -9,17 +9,33 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.4",
+    "@chakra-ui/react": "^2.2.4",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@walletconnect/web3-provider": "^1.8.0",
+    "esbuild": "^0.14.53",
+    "ethers": "^5.6.9",
+    "framer-motion": "^6.5.1",
+    "graphql": "^16.5.0",
+    "it-all": "^1.0.6",
+    "multiformats": "^9.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.3.0"
+    "react-hook-form": "^7.34.0",
+    "react-is": "^18.2.0",
+    "react-markdown": "^8.0.3",
+    "react-router-dom": "^6.3.0",
+    "web3modal": "^1.9.8"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@types/react-helmet": "^6",
+    "@types/react-helmet": "^6.1.5",
     "@vitejs/plugin-react": "^2.0.0",
-    "typescript": "^4.6.4",
+    "rollup": "^2.77.2",
+    "typescript": "^4.7.4",
     "vite": "^3.0.0"
   }
 }

packages/ui-vite/src/App.tsx

@@ -1,13 +1,11 @@
 // import '../styles/globals.css'
-import {Helmet} from 'react-helmet'
+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'
@@ -17,7 +15,6 @@ import {
   BrowserRouter as Router,
   Routes,
   Route,
-  Link
 } from "react-router-dom";
 
 const client = new ApolloClient({

packages/ui-vite/src/components/Expandable.tsx

@@ -1,6 +1,7 @@
-import { Maybe } from '../lib/types'
 import { ReactNode, useCallback, useRef, useState } from 'react'
-import { Box, chakra, Flex, FormLabel, Link, Text } from '@chakra-ui/react'
+import {
+  Box, chakra, Flex, FormLabel, Link, Text,
+} from '@chakra-ui/react'
 
 export const Anchor = ({ name }: { name: string }) => {
   const anchor = name.toLowerCase().replace(/\s+/g, '-')
@@ -25,9 +26,11 @@ const Label = ({ name }: { name: string }) => (
   </Flex>
 )
 
-export const Expandable = ({ name, button = null, children }) => {
+export const Expandable = (
+  { name, button = null, children }:
+  { name: string, button: ReactNode, children: ReactNode }) => {
   const [hide, setHide] = useState<Record<string, boolean>>({})
-  const toggle = useCallback((prop) => {
+  const toggle = useCallback((prop: string) => {
     setHide(h => ({ ...h, [prop]: !h[prop] }))
   }, [])
   const box = useRef<HTMLDivElement>(null)

packages/ui-vite/src/components/ModelModal.tsx

@@ -3,6 +3,7 @@ import {
   ModalContent, ModalHeader, ModalOverlay, Select, chakra,
   Input, ModalFooter, Button,
 } from '@chakra-ui/react'
+import { ChangeEvent } from 'react'
 import { FormEvent, useState } from 'react'
 
 export type ModelModalProps = {
@@ -53,7 +54,11 @@ export const ModelModal: React.FC<ModelModalProps> = ({
             <Select
               ml={5} w="calc(100% - 2rem)"
               value={type}
-              onChange={({ target: { value } }) => setType(value)}
+              onChange={
+                ({ target: { value } }: ChangeEvent<HTMLSelectElement>) => {
+                  setType(value)
+                }
+              }
             >
               <chakra.optgroup style={{ padding: 0 }}>
                 <chakra.option value="model/gltf-binary">Binary glTF</chakra.option>
@@ -73,9 +78,11 @@ export const ModelModal: React.FC<ModelModalProps> = ({
               <Input
                 ml={5} mt={3} w="calc(100% - 2rem)" placeholder="Mime Type"
                 required={true} value={specifiedType}
-                onChange={({ target: { value } }) => (
-                  setSpecifiedType(value)
-                )}
+                onChange={
+                  ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+                    setSpecifiedType(value)
+                  }
+                }
               />
             )}
           </FormControl>

packages/ui-vite/src/components/NFTForm.tsx

@@ -210,7 +210,7 @@ export const NFTForm: React.FC<{
         setValue('color', `#${bg}`)
       }
     }
-  }, [metadata, setImage, setValue])
+  }, [metadata, setValue])
 
   useEffect(() => {
     if(!homepage || isEmpty(homepage) || homepage.endsWith('𝘜𝘯𝘬𝘯𝘰𝘸𝘯')) {

packages/ui-vite/src/lib/hooks.tsx

@@ -1,20 +1,18 @@
 import {
-  Web3Provider, JsonRpcProvider, StaticJsonRpcProvider,
+  ExternalProvider, Web3Provider, JsonRpcProvider,
+  StaticJsonRpcProvider,
 } from '@ethersproject/providers'
 import { Contract } from '@ethersproject/contracts'
-import type { Maybe } from './types'
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
+import type { Maybe } from '@/lib/types'
+import {
+  createContext, useCallback, useContext, useEffect,
+  useMemo, useState,
 } from 'react'
 import Web3Modal from 'web3modal'
 import providerOptions from './walletConnect'
-import { NETWORKS } from './networks'
-import CONFIG from '../config'
+import { NETWORKS } from '@/lib/networks'
+import CONFIG from '@/config'
+import { ReactNode } from 'react';
 
 export type Web3ContextType = {
   userProvider?: Web3Provider
@@ -59,8 +57,7 @@ export const useWeb3 = (): Web3ContextType => (
 )
 
 export const Web3ContextProvider = (
-  ({ children }) => {
-    const [wallet, setWallet] = useState<Web3Modal>()
+  ({ children }: { children: ReactNode }) => {
     const [userProvider, setUserProvider] = (
       useState<Web3Provider>()
     )
@@ -143,7 +140,6 @@ export const Web3ContextProvider = (
     const disconnect = useCallback(() => {
       web3Modal?.clearCachedProvider()
       // clearWalletConnect()
-      setWallet(undefined)
       setAddress(undefined)
       setChain(undefined)
       setUserProvider(undefined)
@@ -154,17 +150,15 @@ export const Web3ContextProvider = (
     }, [web3Modal])
 
     const update = useCallback(
-      async (vider) => {
-        setWallet(vider)
-
+      async (vider: ExternalProvider) => {
         const web3Provider = new Web3Provider(vider)
         setUserProvider(web3Provider)
 
         setAddress(await (
           web3Provider.getSigner().getAddress()
         ))
 
-        setChain(vider.chainId)
+        setChain((vider as { chainId: string }).chainId)
       },
       [],
     )

packages/ui-vite/src/pages/new.tsx

@@ -6,9 +6,8 @@ import {
 import { useWeb3 } from '@/lib/hooks'
 import { useCallback, useEffect, useState } from 'react'
 import { NETWORKS } from '@/lib/networks'
-import Head from 'next/head'
-import { OptionsForm, Header } from '@/components'
-import { useRouter } from 'next/router'
+import { Helmet } from 'react-helmet'
+import { Header, OptionsForm } from '@/components'
 import { Event } from 'ethers'
 import { useForm } from 'react-hook-form'
 import { CONFIG } from '@/config'
@@ -68,8 +67,9 @@ const Content: React.FC = () => {
     load()
   }, [roContract])
 
-  const reserve = useCallback(async (data) => {
-    setWorking(true)
+  const reserve = useCallback(
+    async (data: { maintainer?: string }) => {
+      setWorking(true)
 
     try {
       if(!rwContract) {
@@ -103,16 +103,16 @@ const Content: React.FC = () => {
           }
         }
       ))
-
+    
       let { maintainer } = data
       if(maintainer === '') {
         maintainer = address
       }
-      if(maintainer.includes('.')) {
+      if(maintainer?.includes('.')) {
         if(!ensProvider) {
           throw new Error('ENS provider not defined.')
         }
-        maintainer = await ensProvider.resolveName(maintainer)
+        maintainer = await ensProvider.resolveName(maintainer) ?? undefined
       }
       const tx = await rwContract['create(address,uint8[],uint8[])'](
         maintainer, grants, disables

packages/ui-vite/tsconfig.json

@@ -14,7 +14,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "src/",
+    "paths": {
+      "@/lib/*": ["./lib/*"],
+      "@/config": ["./config"],
+      "@/components": ["./components/index"],
+    },
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

packages/ui/package.json

@@ -17,8 +17,8 @@
     "vercel": "vercel"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.6",
+    "@chakra-ui/icons": "^2.0.4",
+    "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@ethersproject/contracts": "^5.5.0",
@@ -39,8 +39,8 @@
     "next": "12.1.0",
     "nft.storage": "^6.0.2",
     "pluralize": "^8.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.28.1",
     "react-markdown": "^8.0.1",
     "tslib": "^2.3.1",

packages/vite/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@chakra-ui/icons": "^2.0.2",
-    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
@@ -23,8 +23,8 @@
     "ethers": "^5.6.9",
     "framer-motion": "^6.4.2",
     "ipfs-http-client": "^57.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.33.1",
     "react-markdown": "^8.0.3",