Fix Token balances not loading issue (#402)

Signed-off-by: Manank Patni <manank321@gmail.com> Signed-off-by: Manank Patni <manank321@gmail.com> Co-authored-by: Andrei Taranu <astmobronsita@gmail.com>
dOrgTech · Dec 17, 2022 · 8800469 · 8800469
1 parent 8795ad3
commit 8800469
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 133 deletions.
diff --git a/src/modules/explorer/components/ConfigProposalForm.tsx b/src/modules/explorer/components/ConfigProposalForm.tsx
@@ -3,7 +3,6 @@ import { Grid, Typography, TextField } from "@material-ui/core"
 import React, { useCallback } from "react"
 import { useDAO } from "services/indexer/dao/hooks/useDAO"
 import { SendButton } from "./ProposalFormSendButton"
-import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { useDAOID } from "../pages/DAO/router"
 import { ProposalFormInput } from "./ProposalFormInput"
@@ -36,7 +35,6 @@ interface Props {
 export const ConfigProposalForm: React.FC<Props> = ({ open, handleClose }) => {
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
-  const { data: daoHoldings } = useDAOHoldings(daoId)
 
   const methods = useForm<Values>()
 
@@ -126,7 +124,7 @@ export const ConfigProposalForm: React.FC<Props> = ({ open, handleClose }) => {
             </Typography>
           </Grid>
 
-          <SendButton onClick={methods.handleSubmit(onSubmit as any)} disabled={!dao || !daoHoldings}>
+          <SendButton onClick={methods.handleSubmit(onSubmit as any)} disabled={!dao}>
             Submit
           </SendButton>
         </Grid>

diff --git a/src/modules/explorer/components/DelegationChangeProposalForm.tsx b/src/modules/explorer/components/DelegationChangeProposalForm.tsx
@@ -34,7 +34,6 @@ const Content = styled(Grid)({
 export const DelegationChangeProposalForm: React.FC<Props> = ({ open, handleClose, defaultValues }) => {
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
-  const { data: daoHoldings } = useDAOHoldings(daoId)
 
   const methods = useForm<Values>({
     defaultValues: useMemo(
@@ -96,10 +95,7 @@ export const DelegationChangeProposalForm: React.FC<Props> = ({ open, handleClos
             </Typography>
           </Grid>
 
-          <SendButton
-            onClick={methods.handleSubmit(onSubmit as any)}
-            disabled={!dao || !daoHoldings || !newDelegationAddress}
-          >
+          <SendButton onClick={methods.handleSubmit(onSubmit as any)} disabled={!dao || !newDelegationAddress}>
             Submit
           </SendButton>
         </Content>

diff --git a/src/modules/explorer/components/GuardianChangeProposalForm.tsx b/src/modules/explorer/components/GuardianChangeProposalForm.tsx
@@ -3,7 +3,6 @@ import { Grid, styled, Typography, TextField } from "@material-ui/core"
 import React, { useCallback, useEffect, useMemo } from "react"
 import { useDAO } from "services/indexer/dao/hooks/useDAO"
 import { SendButton } from "./ProposalFormSendButton"
-import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { useDAOID } from "../pages/DAO/router"
 import { ProposalFormInput } from "./ProposalFormInput"
@@ -32,7 +31,6 @@ const Content = styled(Grid)({})
 export const GuardianChangeProposalForm: React.FC<Props> = ({ open, handleClose, defaultValues }) => {
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
-  const { data: daoHoldings } = useDAOHoldings(daoId)
 
   const methods = useForm<Values>({
     defaultValues: useMemo(
@@ -108,10 +106,7 @@ export const GuardianChangeProposalForm: React.FC<Props> = ({ open, handleClose,
             </Typography>
           </Grid>
 
-          <SendButton
-            onClick={methods.handleSubmit(onSubmit as any)}
-            disabled={!dao || !daoHoldings || !newGuardianAddress}
-          >
+          <SendButton onClick={methods.handleSubmit(onSubmit as any)} disabled={!dao || !newGuardianAddress}>
             Submit
           </SendButton>
         </Content>

diff --git a/src/modules/explorer/components/NFTTransfer.tsx b/src/modules/explorer/components/NFTTransfer.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from "react"
 import { Grid, styled, Paper, DialogContent, TextField } from "@material-ui/core"
-import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
+import { useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
 import { ErrorText } from "modules/explorer/components/styled/ErrorText"
 import * as Yup from "yup"
 import { Autocomplete } from "@material-ui/lab"
@@ -93,7 +93,7 @@ export const NFTTransferForm: React.FC<{ open: boolean }> = ({ open }) => {
   const [isBatch, setIsBatch] = useState(values.nftTransferForm.isBatch)
   const [activeTransfer, setActiveTransfer] = React.useState(1)
   const daoId = useDAOID()
-  const { nftHoldings } = useDAOHoldings(daoId)
+  const { nftHoldings } = useDAONFTHoldings(daoId)
 
   const handleIsBatchChange = () => {
     setIsBatch(!isBatch)

diff --git a/src/modules/explorer/pages/NFTs/index.tsx b/src/modules/explorer/pages/NFTs/index.tsx
@@ -1,4 +1,14 @@
-import { Box, Button, Grid, styled, Tooltip, Typography, useMediaQuery, useTheme } from "@material-ui/core"
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Grid,
+  styled,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from "@material-ui/core"
 import { NFT as NFTModel } from "models/Token"
 import { CopyAddress } from "modules/common/CopyAddress"
 import { NFT } from "modules/explorer/components/NFT"
@@ -9,7 +19,7 @@ import { UserBadge } from "modules/explorer/components/UserBadge"
 import React, { useState } from "react"
 import { NFTDAOHolding } from "services/bakingBad/tokenBalances"
 import { useTezos } from "services/beacon/hooks/useTezos"
-import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
+import { useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
 import { useDAO } from "services/indexer/dao/hooks/useDAO"
 import { ContentContainer } from "../../components/ContentContainer"
 import { Hero } from "../../components/Hero"
@@ -49,7 +59,7 @@ export const NFTs: React.FC = () => {
   const theme = useTheme()
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
-  const { nftHoldings } = useDAOHoldings(daoId)
+  const { nftHoldings } = useDAONFTHoldings(daoId)
   const [openTransfer, setOpenTransfer] = useState(false)
   const { account } = useTezos()
   const [defaultValues, setDefaultValues] = useState<ProposalFormDefaultValues>()
@@ -125,61 +135,75 @@ export const NFTs: React.FC = () => {
         </Hero>
         <Grid item>
           <Grid container justifyContent={isMobileSmall ? "center" : "flex-start"} style={{ gap: 12 }}>
-            {nftHoldings.map((nft, i) => (
-              <Card
-                key={`nft-${i}`}
-                item
-                container
-                xs={isMobileSmall ? 12 : undefined}
-                direction="column"
-                style={{ gap: 20 }}
-                onClick={() => onClickNFT(nft)}
-              >
-                <Grid item>
-                  <Grid container direction="column" style={{ gap: 18 }} alignItems="center">
-                    <FullWidthContainer item>
-                      {nft.token.firstCreator ? (
-                        <UserBadge size={35} address={nft.token.firstCreator} short={true} />
-                      ) : (
-                        <Typography color={"textPrimary"} variant={"body1"}>
-                          Unknown
-                        </Typography>
-                      )}
-                    </FullWidthContainer>
-                    <Grid item>
-                      <ImgContainer>
-                        <NFT qmHash={nft.token.artifact_hash} mediaType={nft.token.mediaType} name={nft.token.name} />
-                      </ImgContainer>
-                    </Grid>
-                    <FullWidthContainer item>
-                      <NFTId color="textPrimary">
-                        {nft.token.symbol} #{nft.token.token_id}
-                      </NFTId>
-                    </FullWidthContainer>
-                  </Grid>
+            {!nftHoldings ? (
+              <>
+                <Grid container direction="row" justifyContent="center">
+                  <CircularProgress color="secondary" />
                 </Grid>
-                <Grid item>
-                  <Grid container direction="column" style={{ gap: 20 }}>
+              </>
+            ) : (
+              <>
+                {nftHoldings.map((nft, i) => (
+                  <Card
+                    key={`nft-${i}`}
+                    item
+                    container
+                    xs={isMobileSmall ? 12 : undefined}
+                    direction="column"
+                    style={{ gap: 20 }}
+                    onClick={() => onClickNFT(nft)}
+                  >
                     <Grid item>
-                      <NFTTitle color="textPrimary" variant="h4">
-                        {nft.token.name}
-                      </NFTTitle>
+                      <Grid container direction="column" style={{ gap: 18 }} alignItems="center">
+                        <FullWidthContainer item>
+                          {nft.token.firstCreator ? (
+                            <UserBadge size={35} address={nft.token.firstCreator} short={true} />
+                          ) : (
+                            <Typography color={"textPrimary"} variant={"body1"}>
+                              Unknown
+                            </Typography>
+                          )}
+                        </FullWidthContainer>
+                        <Grid item>
+                          <ImgContainer>
+                            <NFT
+                              qmHash={nft.token.artifact_hash}
+                              mediaType={nft.token.mediaType}
+                              name={nft.token.name}
+                            />
+                          </ImgContainer>
+                        </Grid>
+                        <FullWidthContainer item>
+                          <NFTId color="textPrimary">
+                            {nft.token.symbol} #{nft.token.token_id}
+                          </NFTId>
+                        </FullWidthContainer>
+                      </Grid>
                     </Grid>
                     <Grid item>
-                      <SmallButton
-                        variant="contained"
-                        color="secondary"
-                        size="small"
-                        onClick={e => onClick(e, nft.token)}
-                        disabled={shouldDisable}
-                      >
-                        Propose Transfer
-                      </SmallButton>
+                      <Grid container direction="column" style={{ gap: 20 }}>
+                        <Grid item>
+                          <NFTTitle color="textPrimary" variant="h4">
+                            {nft.token.name}
+                          </NFTTitle>
+                        </Grid>
+                        <Grid item>
+                          <SmallButton
+                            variant="contained"
+                            color="secondary"
+                            size="small"
+                            onClick={e => onClick(e, nft.token)}
+                            disabled={shouldDisable}
+                          >
+                            Propose Transfer
+                          </SmallButton>
+                        </Grid>
+                      </Grid>
                     </Grid>
-                  </Grid>
-                </Grid>
-              </Card>
-            ))}
+                  </Card>
+                ))}
+              </>
+            )}
           </Grid>
         </Grid>
       </Grid>