remove sequence, refactor hooks

gnosisguild · Jan 18, 2024 · fd6a817 · fd6a817
1 parent 23def97
commit fd6a817
Show file tree

Hide file tree

Showing 15 changed files with 281 additions and 505 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "0xsequence": "^1.6.2",
     "@rainbow-me/rainbowkit": "^1.3.3",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
@@ -47,5 +46,8 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@tanstack/react-query": "^5.17.15"
+  }
 }
diff --git a/frontend/src/chains.ts b/frontend/src/chains.ts
@@ -15,32 +15,3 @@ export const CHAINS: ChainInfo = {
 export type ChainId = keyof typeof CHAINS
 
 export const DEFAULT_CHAIN = CHAINS[1]
-
-export enum SequenceIndexerServices {
-  MAINNET = "https://mainnet-indexer.sequence.app",
-
-  POLYGON = "https://polygon-indexer.sequence.app",
-  POLYGON_MUMBAI = "https://mumbai-indexer.sequence.app",
-
-  POLYGON_ZKEVM = "https://polygon-zkevm-indexer.sequence.app",
-
-  ARBITRUM = "https://arbitrum-indexer.sequence.app",
-  ARBITRUM_NOVA = "https://arbitrum-nova-indexer.sequence.app",
-
-  OPTIMISM = "https://optimism-indexer.sequence.app",
-  AVALANCHE = "https://avalanche-indexer.sequence.app",
-  GNOSIS = "https://gnosis-indexer.sequence.app",
-
-  BSC = "https://bsc-indexer.sequence.app",
-  BSC_TESTNET = "https://bsc-testnet-indexer.sequence.app",
-
-  GOERLI = "https://goerli-indexer.sequence.app",
-}
-
-export const SEQUENCER_ENDPOINTS: Record<ChainId, SequenceIndexerServices> = {
-  1: SequenceIndexerServices.MAINNET,
-  5: SequenceIndexerServices.GOERLI,
-  100: SequenceIndexerServices.GNOSIS,
-  137: SequenceIndexerServices.POLYGON,
-  80001: SequenceIndexerServices.POLYGON_MUMBAI,
-}
diff --git a/frontend/src/components/NFTGrid/index.tsx b/frontend/src/components/NFTGrid/index.tsx
@@ -1,4 +1,3 @@
-import { ContractType, TokenBalance } from "@0xsequence/indexer"
 import NFTGridItem from "../NFTGridItem"
 import Spinner from "../Spinner"
 
@@ -8,37 +7,35 @@ import { useChainId } from "wagmi"
 import { useDeployedMechs } from "../../hooks/useDeployMech"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
 import useTokenBalances from "../../hooks/useTokenBalances"
+import { getNFTContext, getNFTContexts } from "../../utils/getNFTContext"
+import { MoralisNFT } from "../../types/Token"
 
 interface Props {
   address: string
 }
 
 const NFTGrid: React.FC<Props> = ({ address }) => {
   const chainId = useChainId()
-
-  const { balances, isLoading } = useTokenBalances({
+  console.log("chainId", chainId)
+  const { data, isLoading, error } = useTokenBalances({
     accountAddress: address,
     chainId,
   })
+  const nftBalances = data?.nfts || []
 
-  const nftBalances = balances.filter(
-    (balance) =>
-      balance.contractType === ContractType.ERC721 ||
-      balance.contractType === ContractType.ERC1155
-  )
-
-  const deployedMechs = useDeployedMechs(nftBalances)
+  const deployedMechs = useDeployedMechs(getNFTContexts(nftBalances), chainId)
 
-  const isDeployed = (nft: TokenBalance) =>
+  const isDeployed = (nft: MoralisNFT) =>
     deployedMechs.some(
       (mech) =>
         mech.chainId === chainId &&
-        mech.address.toLowerCase() === calculateMechAddress(nft).toLowerCase()
+        mech.address.toLowerCase() ===
+          calculateMechAddress(getNFTContext(nft), chainId).toLowerCase()
     )
 
   const deployed = nftBalances.filter(isDeployed)
   const undeployed = nftBalances.filter((nft) => !isDeployed(nft))
-
+  console.log("undeployed", undeployed.length)
   return (
     <div className={classes.container}>
       <div className={classes.categoryContainer}>
@@ -54,8 +51,8 @@ const NFTGrid: React.FC<Props> = ({ address }) => {
       )}
       <ul className={classes.grid}>
         {deployed.map((nft, index) => (
-          <li key={`${index}-${nft.contractAddress}`}>
-            <NFTGridItem tokenBalance={nft} />
+          <li key={`${index}-${nft.token_address}`}>
+            <NFTGridItem chainId={chainId} nft={nft} />
           </li>
         ))}
       </ul>
@@ -68,8 +65,8 @@ const NFTGrid: React.FC<Props> = ({ address }) => {
       {undeployed.length > 0 && (
         <ul className={classes.grid}>
           {undeployed.map((nft, index) => (
-            <li key={`${index}-${nft.contractAddress}`}>
-              <NFTGridItem tokenBalance={nft} />
+            <li key={`${index}-${nft.token_address}`}>
+              <NFTGridItem chainId={chainId} nft={nft} />
             </li>
           ))}
         </ul>

diff --git a/frontend/src/components/NFTGridItem/index.tsx b/frontend/src/components/NFTGridItem/index.tsx
@@ -1,4 +1,3 @@
-import { TokenBalance } from "@0xsequence/indexer"
 import { useState } from "react"
 import copy from "copy-to-clipboard"
 import clsx from "clsx"
@@ -10,46 +9,51 @@ import { shortenAddress } from "../../utils/shortenAddress"
 import Spinner from "../Spinner"
 import ChainIcon from "../ChainIcon"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
-import { CHAINS, ChainId } from "../../chains"
+import { CHAINS } from "../../chains"
 import { useDeployMech } from "../../hooks/useDeployMech"
+import { MoralisNFT } from "../../types/Token"
+import { getNFTContext } from "../../utils/getNFTContext"
 
 interface Props {
-  tokenBalance: TokenBalance
+  nft: MoralisNFT
+  chainId: number
 }
 
-const NFTGridItem: React.FC<Props> = ({ tokenBalance }) => {
+const NFTGridItem: React.FC<Props> = ({ nft, chainId }) => {
   const [imageError, setImageError] = useState(false)
 
-  const chain = CHAINS[tokenBalance.chainId as ChainId]
+  const chain = CHAINS[chainId]
 
-  const mechAddress = calculateMechAddress(tokenBalance)
-  const { deploy, deployPending, deployed } = useDeployMech(tokenBalance)
+  const mechAddress = calculateMechAddress(getNFTContext(nft), chainId)
+  const { deploy, deployPending, deployed } = useDeployMech(
+    getNFTContext(nft),
+    chainId
+  )
 
-  const name =
-    tokenBalance.tokenMetadata?.name || tokenBalance.contractInfo?.name
+  const name = nft.name || nft.metadata?.name
 
   return (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
         <p className={classes.tokenName}>
           <Link
-            to={`mechs/${chain.prefix}:${tokenBalance.contractAddress}/${tokenBalance.tokenID}`}
+            to={`mechs/${chain.prefix}:${nft.token_address}/${nft.token_id}`}
           >
             {name || "..."}
           </Link>
         </p>
-        {tokenBalance.tokenID.length < 5 && (
-          <p className={classes.tokenId}>{tokenBalance.tokenID || "..."}</p>
+        {nft.token_id.length < 5 && (
+          <p className={classes.tokenId}>{nft.token_id || "..."}</p>
         )}
       </div>
       <div className={classes.main}>
-        {(imageError || !tokenBalance.tokenMetadata?.image) && (
+        {(imageError || !nft.metadata?.image) && (
           <div className={classes.noImage}></div>
         )}
-        {!imageError && tokenBalance.tokenMetadata?.image && (
+        {!imageError && nft.metadata?.image && (
           <div className={classes.imageContainer}>
             <img
-              src={tokenBalance.tokenMetadata?.image}
+              src={nft.metadata?.image}
               alt={name}
               className={classes.image}
               onError={() => setImageError(true)}
@@ -70,9 +74,7 @@ const NFTGridItem: React.FC<Props> = ({ tokenBalance }) => {
         </div>
       </div>
       {deployed ? (
-        <Link
-          to={`mechs/${chain.prefix}:${tokenBalance.contractAddress}/${tokenBalance.tokenID}`}
-        >
+        <Link to={`mechs/${chain.prefix}:${nft.token_address}/${nft.token_id}`}>
           <Button className={classes.useButton} onClick={() => {}}>
             Use Mech
           </Button>

diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx
@@ -1,4 +1,3 @@
-import { TokenBalance } from "@0xsequence/indexer"
 import classes from "./NFTItem.module.css"
 import { useState } from "react"
 import { shortenAddress } from "../../utils/shortenAddress"
@@ -11,46 +10,50 @@ import { useDeployMech } from "../../hooks/useDeployMech"
 
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
 import { formatUnits } from "viem"
+import { MoralisNFT } from "../../types/Token"
+import { getNFTContext } from "../../utils/getNFTContext"
 
 interface Props {
-  tokenBalance: TokenBalance
+  nft: MoralisNFT
+  chainId: number
 }
 
-const NFTItem: React.FC<Props> = ({ tokenBalance }) => {
-  const mechAddress = calculateMechAddress(tokenBalance)
-  const operatorAddress = tokenBalance.accountAddress
+const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
+  const mechAddress = calculateMechAddress(getNFTContext(nft), chainId)
+  const operatorAddress = nft.owner_of
 
   const [imageError, setImageError] = useState(false)
 
   const {
-    balances: mechBalances,
+    data,
     isLoading: mechBalancesLoading,
     error: mechBalancesError,
   } = useTokenBalances({
     accountAddress: mechAddress,
-    chainId: tokenBalance.chainId,
+    chainId,
   })
 
-  const { deployed } = useDeployMech(tokenBalance)
-  const name =
-    tokenBalance.tokenMetadata?.name || tokenBalance.contractInfo?.name || "..."
+  const mechBalances = data ? [data.native, ...data.erc20s] : []
+
+  const { deployed } = useDeployMech(getNFTContext(nft), chainId)
+  const name = nft.name || nft.metadata?.name || "..."
   return (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
         <p className={classes.tokenName}>{name}</p>
 
-        <p className={classes.tokenId} title={tokenBalance.tokenID}>
-          {tokenBalance.tokenID}
+        <p className={classes.tokenId} title={nft.token_id}>
+          {nft.token_id}
         </p>
       </div>
       <div className={classes.main}>
-        {(imageError || !tokenBalance.tokenMetadata?.image) && (
+        {(imageError || !nft.metadata?.image) && (
           <div className={classes.noImage}></div>
         )}
-        {!imageError && tokenBalance.tokenMetadata?.image && (
+        {!imageError && nft.metadata?.image && (
           <div className={classes.imageContainer}>
             <img
-              src={tokenBalance.tokenMetadata?.image}
+              src={nft.metadata?.image}
               alt={name}
               className={classes.image}
               onError={() => setImageError(true)}
@@ -121,15 +124,12 @@ const NFTItem: React.FC<Props> = ({ tokenBalance }) => {
         <ul className={classes.assetList}>
           {mechBalances.map((balance, index) => (
             <li key={index} className={classes.asset}>
-              <div className={classes.name}>{balance.contractInfo?.name}</div>
+              <div className={classes.name}>{balance.name}</div>
               <div className={classes.value}>
                 <p>
-                  {formatUnits(
-                    BigInt(balance.balance),
-                    balance.contractInfo?.decimals || 0
-                  )}
+                  {formatUnits(BigInt(balance.balance), balance.decimals || 0)}
                 </p>
-                <p>{balance.contractInfo?.symbol}</p>
+                <p>{balance.symbol}</p>
               </div>
             </li>
           ))}

diff --git a/frontend/src/hooks/useDeployMech.tsx b/frontend/src/hooks/useDeployMech.tsx
@@ -1,15 +1,14 @@
-import { TokenBalance } from "@0xsequence/indexer"
 import { useEffect, useState } from "react"
 import {
-  PublicClient,
-  useChainId,
   usePublicClient,
+  useWalletClient,
   useQuery,
   useQueryClient,
-  useWalletClient,
 } from "wagmi"
+import { PublicClient } from "viem"
 import { calculateMechAddress } from "../utils/calculateMechAddress"
 import { makeMechDeployTransaction } from "../utils/deployMech"
+import { NFTContext } from "../types/Token"
 
 interface QueryKeyArgs {
   address: `0x${string}`
@@ -29,35 +28,32 @@ function queryFn(client: PublicClient) {
   }
 }
 
-export const useDeployMech = (token: TokenBalance | null) => {
-  const mechAddress = token && calculateMechAddress(token)
+export const useDeployMech = (token: NFTContext | null, chainId: number) => {
+  const mechAddress = token && calculateMechAddress(token, chainId)
 
-  const publicClient = usePublicClient({ chainId: token?.chainId })
+  const publicClient = usePublicClient({ chainId: chainId })
   const { data: deployed } = useQuery<boolean>(
-    [
-      "mechDeployed",
-      { address: mechAddress, chainId: token?.chainId },
-    ] as const,
+    ["mechDeployed", { address: mechAddress, chainId: chainId }] as const,
     {
       queryFn: queryFn(publicClient) as any,
       enabled: !!mechAddress,
     }
   )
 
-  const { data: walletClient } = useWalletClient({ chainId: token?.chainId })
+  const { data: walletClient } = useWalletClient({ chainId })
 
   const queryClient = useQueryClient()
 
   const [deployPending, setDeployPending] = useState(false)
   const deploy = async () => {
     if (!walletClient || !token) return
-    const tx = makeMechDeployTransaction(token)
+    const tx = makeMechDeployTransaction(token, chainId)
     setDeployPending(true)
     try {
       const hash = await walletClient.sendTransaction(tx)
       const receipt = await publicClient.waitForTransactionReceipt({ hash })
       queryClient.setQueryData(
-        ["mechDeployed", { address: mechAddress, chainId: token.chainId }],
+        ["mechDeployed", { address: mechAddress, chainId }],
         true
       )
       return receipt
@@ -71,7 +67,7 @@ export const useDeployMech = (token: TokenBalance | null) => {
   return { deployed, deploy, deployPending }
 }
 
-export const useDeployedMechs = (nfts: TokenBalance[]) => {
+export const useDeployedMechs = (nfts: NFTContext[], chainId: number) => {
   const queryClient = useQueryClient()
 
   useEffect(() => {
@@ -80,15 +76,15 @@ export const useDeployedMechs = (nfts: TokenBalance[]) => {
         .ensureQueryData([
           "mechDeployed",
           {
-            address: calculateMechAddress(nft),
-            chainId: nft.chainId,
+            address: calculateMechAddress(nft, chainId),
+            chainId: chainId,
           },
         ])
         .catch((e) => {
           /* when switching networks, this might throw an error (`Missing queryFn for queryKey`) */
         })
     })
-  }, [queryClient, nfts])
+  }, [queryClient, nfts, chainId])
 
   const deployedMechs = queryClient.getQueriesData([
     "mechDeployed",