debug output

R-Group-Devs · Dec 9, 2021 · af44ee1 · af44ee1
1 parent 585575c
commit af44ee1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/src/pages/BrowseNftsPage.tsx b/src/pages/BrowseNftsPage.tsx
@@ -4,6 +4,8 @@ import { NETWORKS } from '../constants/contracts';
 import useListRealmNfts from '../hooks/useListRealmNfts';
 import BannerPageHeading from '../components/BannerPageHeading';
 import NftGalleryCard from '../components/NftGalleryCard';
+import { BigNumber } from 'ethers';
+import InfusionTicker from '../components/InfusionTicker';
 
 interface Params {
   network: string;
@@ -18,12 +20,9 @@ const NftList = styled.div`
 
 export default () => {
   const { network, realmId } = useParams<Params>();
-  const { data, isLoading, isError } = useListRealmNfts(
-    realmId,
-    NETWORKS[network]
-  );
-
   const chainId = NETWORKS[network];
+  const { data, isLoading, isError } = useListRealmNfts(realmId, chainId);
+
   if (chainId == null) {
     return <p>invalid network</p>;
   }
@@ -57,6 +56,18 @@ export default () => {
           />
         ))}
       </NftList>
+      <div>
+        {data.realm.infusions.map(infusion => (
+          <div key={infusion.id}>
+            <InfusionTicker
+              chainId={chainId}
+              realmId={BigNumber.from(realmId)}
+              collection={infusion.nft.collection.address}
+              tokenId={BigNumber.from(infusion.nft.tokenId)}
+            />
+          </div>
+        ))}
+      </div>
     </Container>
   );
 };
diff --git a/src/pages/NftDetailPage.tsx b/src/pages/NftDetailPage.tsx
@@ -6,6 +6,10 @@ import useBrowseNftDetails from '../hooks/useBrowseNftDetails';
 import useCollectionInfusions from '../hooks/useCollectionInfusions';
 import useMetadata from '../hooks/useMetadata';
 import { NETWORKS } from '../constants/contracts';
+import { useQuery } from 'react-query';
+import { getLoaders } from '../hypervibes/dataloaders';
+import { BigNumber } from 'ethers';
+import InfusionTicker from '../components/InfusionTicker';
 
 interface Params {
   network: string;
@@ -89,6 +93,13 @@ export default () => {
 
   const { metadata, isLoading: isMetadataLoading } = useMetadata(nft?.tokenUri);
 
+  const infusionDataQuery = useQuery([network, collection, tokenId], () =>
+    getLoaders(chainId).indexedInfusion.load({
+      collection: collection,
+      tokenId: BigNumber.from(tokenId),
+    })
+  );
+
   if (isError) {
     return <p>error fetching realms</p>;
   }
@@ -165,6 +176,26 @@ export default () => {
         </Details>
       </NftDetails>
 
+      {infusionDataQuery.data && (
+        <table>
+          <tbody>
+            {infusionDataQuery.data.infusions.map(infusion => (
+              <tr key={infusion.id}>
+                <td>{infusion.realm.name}:</td>
+                <td>
+                  <InfusionTicker
+                    chainId={chainId}
+                    collection={collection}
+                    realmId={infusion.realm.id}
+                    tokenId={BigNumber.from(tokenId)}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
       {otherCollectionInfusions && otherCollectionInfusions.length > 0 && (
         <>
           <OtherNftsHeading>
@@ -173,7 +204,7 @@ export default () => {
 
           {otherCollectionInfusions.map(nft => (
             <NftGalleryCard
-              key={nft.tokenUri}
+              key={`${nft.collection} ${nft.tokenId}`}
               url={`/${network}/tokens/${nft.collection.address}/${nft.tokenId}`}
               tokenUri={nft.tokenUri}
               size="lg"