feat: refactor how to execute txs and indexing

packages/app/package.json

@@ -14,7 +14,8 @@
     "@ensdomains/ensjs": "^3.7.0",
     "@helia/delegated-routing-v1-http-api-client": "^3.0.1",
     "@helia/unixfs": "^3.0.5",
-    "@hookform/resolvers": "^2.8.8",
+    "@helia/verified-fetch": "^1.3.14",
+    "@hookform/resolvers": "^3.3.4",
     "@ipfs-shipyard/pinning-service-client": "^1.0.3",
     "@libp2p/autonat": "^1.0.1",
     "@libp2p/bootstrap": "^10.0.2",
@@ -63,7 +64,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.29.0",
+    "react-hook-form": "^7.51.3",
     "react-p5": "^1.3.33",
     "react-query": "^3.34.16",
     "react-router-dom": "^6.2.2",
@@ -112,6 +113,9 @@
   },
   "devDependencies": {
     "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
     "@types/draft-convert": "^2.1.4",
     "@types/draft-js": "^0.11.10",
     "@types/jest": "^27.0.1",
@@ -124,11 +128,8 @@
     "@types/turndown": "^5.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "prettier": "^2.5.1",
-    "vite": "^5.0.10",
-    "vite-tsconfig-paths": "^4.3.2",
     "typescript": "^4.4.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1"
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

packages/app/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react"
 import { PublicationView } from "@/components/views/publication/PublicationView"
-import { Routes, Route } from "react-router-dom"
+import { Routes, Route, useLocation } from "react-router-dom"
 import { SnackbarProvider } from "notistack"
 import { Provider as UrqlProvider } from "urql"
 /** Views **/
@@ -18,16 +18,27 @@ import PreviewArticleView from "@/components/views/publication/PreviewArticleVie
 import { EnsProvider } from "@/services/ens/context"
 import { useWeb3ModalAccount } from "@web3modal/ethers5/react"
 import { useIPFSContext } from "@/services/ipfs/context"
+import { CHAINS } from "@/config/network"
 
 const App: React.FC = () => {
-  const { chainId } = useWeb3ModalAccount()
-
-  const [currentSubgraphClient, setCurrentSubgraphClient] = useState(subgraphClient(chainId))
+  const { chainId: userChainId } = useWeb3ModalAccount()
+  const location = useLocation()
+  const [currentSubgraphClient, setCurrentSubgraphClient] = useState(subgraphClient(userChainId))
   const { startIpfsClientInstance } = useIPFSContext()
 
   useEffect(() => {
-    setCurrentSubgraphClient(subgraphClient(chainId))
-  }, [chainId])
+    const pathParts = location.pathname.split("-")
+    let urlChainId = pathParts[0].replace("/", "")
+    console.log("urlChainId", urlChainId)
+    const validChainIds = CHAINS.map((chain) => chain.id.toString())
+
+    if (!validChainIds.includes(urlChainId) && userChainId) {
+      urlChainId = userChainId.toString()
+    }
+
+    const client = subgraphClient(parseInt(urlChainId))
+    setCurrentSubgraphClient(client)
+  }, [location, userChainId])
 
   useEffect(() => {
     const initIPFS = async () => {

packages/app/src/components/commons/CreatableSelect.tsx

@@ -1,11 +1,14 @@
 import Select from "react-select/creatable"
 import { OnChangeValue } from "react-select"
-import React, { useEffect, useState } from "react"
-import { palette, typography } from "../../theme"
-import { CreateSelectOption } from "../../models/dropdown"
-import { FormHelperText } from "@mui/material"
+import { forwardRef, useEffect, useState } from "react"
+import { palette, typography } from "@/theme"
+import { CreateSelectOption } from "@/models/dropdown"
+import { Box, FormHelperText } from "@mui/material"
+import { useController } from "react-hook-form"
 
 export interface CreateSelectProps {
+  control: any
+  name: string
   options?: CreateSelectOption[]
   onSelected?: (items: CreateSelectOption[]) => void
   value?: string[]
@@ -60,49 +63,49 @@ const customStyles = {
   }),
 }
 
-export const CreatableSelect: React.FC<CreateSelectProps> = ({
-  options,
-  onSelected,
-  value,
-  placeholder,
-  errorMsg,
-  limit,
-}) => {
+export const CreatableSelect = forwardRef(({ control, name, options, placeholder, errorMsg }: CreateSelectProps) => {
+  const {
+    field: { onChange, onBlur, value, ref: inputRef },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  })
   const [values, setValues] = useState<CreateSelectOption[]>([])
 
   useEffect(() => {
-    if (value?.length) {
-      const newValues = value.map((item) => {
-        return { label: item, value: item }
-      })
-      setValues(newValues)
+    if (value) {
+      const formattedValues = value.map((val: any) => (typeof val === "string" ? { label: val, value: val } : val))
+      setValues(formattedValues)
     }
   }, [value])
 
   const handleChange = (newValue: OnChangeValue<CreateSelectOption, any>) => {
     const list = newValue as CreateSelectOption[]
-    if (limit && list.length > limit) {
-      return
-    }
-    if (onSelected) {
-      onSelected(newValue as CreateSelectOption[])
-    }
-    setValues(newValue as CreateSelectOption[])
+
+    onChange(list)
+    setValues(list)
   }
 
   return (
-    <>
+    <Box>
       <Select
+        ref={(e) => {
+          inputRef(e)
+        }}
         styles={customStyles}
         value={values}
         options={options}
         isMulti
         onChange={handleChange}
+        onBlur={onBlur}
         placeholder={placeholder}
       />
-      {errorMsg && (
-        <FormHelperText sx={{ color: palette.secondary[1000], textTransform: "capitalize" }}>{errorMsg}</FormHelperText>
+      {error && (
+        <FormHelperText sx={{ color: "error.main", textTransform: "capitalize" }}>
+          {error.message || errorMsg}
+        </FormHelperText>
       )}
-    </>
+    </Box>
   )
-}
+})

packages/app/src/components/commons/PublicationAvatar.tsx

@@ -1,13 +1,13 @@
 import { Avatar, Badge, Stack } from "@mui/material"
 import { styled } from "@mui/styles"
 import React, { ChangeEvent, useEffect, useRef, useState } from "react"
-import { palette, typography } from "../../theme"
+import { palette, typography } from "@/theme"
 import AddIcon from "@mui/icons-material/Add"
 import ClearIcon from "@mui/icons-material/Clear"
 import EditIcon from "@mui/icons-material/Edit"
-import { useIpfs } from "../../hooks/useIpfs"
-import { usePublicationContext } from "../../services/publications/contexts"
-import { useDynamicFavIcon } from "../../hooks/useDynamicFavIco"
+import { useIpfs } from "@/hooks/useIpfs"
+import { usePublicationContext } from "@/services/publications/contexts"
+import { useDynamicFavIcon } from "@/hooks/useDynamicFavIco"
 
 const SmallAvatar = styled(Avatar)({
   width: 40,

packages/app/src/components/views/home/LandingView.tsx

@@ -70,7 +70,7 @@ export const LandingView: React.FC = () => {
   const classes = useStyles()
   const navigate = useNavigate()
 
-  const handleInit = () => {
+  const handleInit = async () => {
     if (!isConnected) return open()
     navigate(`/publications`)
   }