useArcadiansApi instead of usenft

assets/nftCollections.ts

@@ -1,6 +1,6 @@
 export default [
     [
-      "0xc3c8a1e1ce5386258176400541922c414e1b35fd",
+      "0xf08378b8B21ccfA76b7D75B859B7d8D0B861433F",
       "Arcadians",
       "https://opensea.io/collection/arcadians-by-opgames",
     ],

avatar/index.jsx

@@ -390,7 +390,7 @@ function findNodeInOra(part) {
 
 export function loadNFT(nft) {
 
-    nft.rawData.attributes.map( (part) => {
+    nft.attributes.map( (part) => {
         let partPath = findNodeInOra(part);
         if (partPath) {
             updateBabylonParts(part.trait_type, partPath);

components/oraglbviewer/index.tsx

@@ -2,9 +2,12 @@ import type { NftMetadata } from "use-nft"
 
 import { useEffect, useRef, useState } from "react";
 import { useNft } from "use-nft"
+import { useArcadiansApi } from "../../hooks/useArcadiansApi";
 import { Engine, Scene } from "@babylonjs/core";
 import * as AvatarBuilder from "../../avatar/";
 
+
+
 export const colors = {
     background: "#111111",
     accent: "#a669a2",
@@ -35,7 +38,7 @@ let loadedNft:NftMetadata;
     tokenId
     } : OraGlbViewerProps )
     {
-    const { nft, loading, error, reload } = useNft(contract, tokenId)
+    const { data, isLoading, error } = useArcadiansApi(tokenId)
     const reactCanvasBabylon = useRef(null);
     const [ canvasSize, setCanvasSize ] = useState(
       {
@@ -167,18 +170,17 @@ let loadedNft:NftMetadata;
       <>
           <canvas height={canvasSize.height} width={canvasSize.width} ref={reactCanvasBabylon} />
         {(() => {
-          if (loading) {
+          if (isLoading) {
             return <NftLoading />
           }
           if (error) {
-            return <NftError error={error} reload={reload} />
+            return <NftError error={error} />
           }
 
-          loadedNft = nft;
+          loadedNft = data;
 
           return (
           <> 
-          <AnimatedNFT nft={nft} />
           </>
           )
 
@@ -197,13 +199,13 @@ function NftLoading() {
   )
 }
 
-function NftError({ error, reload }: { error: Error; reload: () => void }) {
+function NftError({ error }: { error: Error }) {
   return (
     <div
     >
       <p>
         Loading error.
-        <br /> <button onClick={reload}>Retry?</button>
+        <br />
       </p>
     </div>
   )

hooks/useArcadiansApi/index.tsx

@@ -0,0 +1,34 @@
+import useSWR from "swr";
+
+const ARCADIANS_API = "https://arcadians.dev.outplay.games/v2/arcadians/"
+
+const fetchTokenMetadata = async(uri) : Promise<any> => {
+
+    const uriWithId = `${ARCADIANS_API}${uri}?refreshMetadata=true`;
+
+    const response = await fetch(uriWithId);
+    const data = await response.json();
+    return data;
+};
+
+export const useArcadiansApi = (uri) => {
+  const { data, error, mutate, isLoading } = useSWR(
+    uri,
+    fetchTokenMetadata
+  );
+
+  return {
+    data,
+    error,
+    isLoading,
+    mutate,
+    contracts: data || [],
+    isError: !!error,
+  };
+
+
+
+
+};
+
+

package.json

@@ -21,6 +21,7 @@
     "react-dom": "18.2.0",
     "react-spring": "^9.4.4",
     "sharp": "^0.32.0",
+    "swr": "^2.1.5",
     "use-nft": "^0.12.0",
     "xml2js": "^0.5.0"
   },