Merge pull request #436 from yieldprotocol/feat/removeCenterDependance

remove center api dependance

Author: brucedonovan

.env.example

@@ -6,8 +6,7 @@ NEXT_PUBLIC_TENDERLY_FORK_ID=
 NEXT_PUBLIC_TENDERLY_USER=
 NEXT_PUBLIC_TENDERLY_PROJECT=
 NEXT_PUBLIC_TENDERLY_ACCESS_KEY=
-NEXT_PUBLIC_CENTER_APP_KEY=
-NEXT_PUBLIC_OPENSEA_API_KEY=
+
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
 
 NEXTAUTH_URL=http://localhost:3000

src/components/current/widgets/nft/NftAsset.tsx

@@ -3,7 +3,6 @@ import { Address } from 'wagmi';
 import { ImageResponse } from '@/components/cactiComponents';
 import { ImageVariant } from '@/components/cactiComponents/ImageResponse';
 import { InlineChip } from '@/components/cactiComponents/InlineChip';
-import useNft from '@/hooks/useNft';
 
 export interface NftAssetProps {
   network: Network;
@@ -14,6 +13,20 @@ export interface NftAssetProps {
   previewImageUrl?: string;
   variant?: ImageVariant; // widget variant
   price?: string;
+  attributes?: {trait_type: string, value: string}[];
+}
+
+const TraitList = ({ attributes }: { attributes: {trait_type: string, value: string}[] }) => {
+  return (
+    <div className="">
+      {attributes.map((attribute, index) => (
+        <div key={index} className="text-xs mr-2 mb-2">
+          <span className="font-bold">{attribute.trait_type}</span>: {attribute.value}
+        </div>
+      ))}
+    </div>
+  )
+
 }
 
 export const NftAsset = ({
@@ -25,25 +38,26 @@ export const NftAsset = ({
   previewImageUrl,
   variant,
   price,
+  attributes
 }: NftAssetProps) => {
-  const { data: nftData } = useNft({ network, address, tokenId });
 
   return (
     <ImageResponse
-      image={nftData.smallPreviewImageUrl || previewImageUrl}
+      image={previewImageUrl}
       imageTags={
         variant === ImageVariant.SHOWCASE
           ? [`Token Id: ${tokenId}`, `${network.replace('-mainnet', '')}`]
           : [`Token Id: ${tokenId}`] // always show the token id 
       }
-      title={nftData.name || name}
-      subTitle={nftData.collectionName || collectionName}
+      title={name}
+      subTitle={collectionName}
       imageLink={`https://center.app/${network}/collections/${address}/${tokenId}`}
       variant={variant}
     >
-      {variant === ImageVariant.SHOWCASE && (
+      {/* {variant === ImageVariant.SHOWCASE && (
         <div className="text-xs">{nftData.metadata?.description}</div>
-      )}
+      )} */}
+      {attributes && <TraitList attributes={attributes} />}
       {price && (
         <InlineChip
           className="text-xs"

src/components/current/widgets/nft/NftCollection.tsx

@@ -5,6 +5,7 @@ import { ImageVariant } from '@/components/cactiComponents/ImageResponse';
 import { Widget } from '../../MessageTranslator';
 import ListContainer from '../../containers/ListContainer';
 import { NftAsset } from './NftAsset';
+import { abbreviateHash } from '@/utils';
 
 interface NftCollectionContainerProps {
   network: Network;
@@ -27,11 +28,7 @@ export const NftCollection = ({
   variant,
   assetsToShow = [],
 }: NftCollectionContainerProps) => {
-  const collection = useCollection({
-    network,
-    address,
-  });
-
+  
   /**
    * Get the  array of the asset ids to show:
    * */
@@ -55,10 +52,10 @@ export const NftCollection = ({
       <ListContainer
         items={[
           <ImageResponse
-            image={collection?.smallPreviewImageUrl || previewImageUrl}
-            imageTags={[`${(numAssets || collection?.numAssets || 'Unknown')!.toString()} Assets`]}
-            title={collection?.name || name}
-            subTitle={collection?.symbol || collection?.name}
+            image={previewImageUrl}
+            imageTags={[`${(numAssets || 'Unknown')!.toString()} Assets`, network.split("-")[0] ]}
+            title={name}
+            subTitle={abbreviateHash(address,8)}
             imageLink={`https://center.app/${network}/collections/${address}`}
             key={address}
             variant={variant}