Feat: nft component

apps/playground/pages/web3-components/index.tsx

@@ -152,7 +152,11 @@ const Web3ComponentsPage: NextPage = () => {
           >
             NFT
           </Text>
-          <NFT />
+          <NFT
+            contractAddress="0x23581767a106ae21c074b2276d25e5c3e136a68b"
+            tokenId="6240"
+            size="xl"
+          />
         </div>
       </div>
     </main>

packages/components/package.json

@@ -71,7 +71,8 @@
     "@radix-ui/colors": "^0.1.8",
     "@stitches/react": "^1.2.8",
     "@web3-ui/hooks": "*",
-    "react-jazzicon": "^1.0.4"
+    "react-jazzicon": "^1.0.4",
+    "react-query": "^3.39.2"
   },
   "peerDependencies": {
     "ethers": ">=5.5.1",

packages/components/src/components/NFT/NFT.stories.tsx

@@ -5,22 +5,22 @@ import { WagmiDecorator } from '../../../../../apps/storybook/.storybook/decorat
 export default {
   title: 'Components/NFT',
   component: NFT,
-  argTypes: {},
+  argTypes: {
+    size: {
+      type: 'string',
+      defaultValue: 'md',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      control: { type: 'select' },
+    },
+  },
   decorators: [WagmiDecorator],
 } as ComponentMeta<typeof NFT>;
 
 const Template: ComponentStory<typeof NFT> = (args) => <NFT {...args} />;
 
-export const Image = Template.bind({});
-Image.args = {};
+export const Default = Template.bind({});
 
-export const GIF = Template.bind({});
-GIF.args = {};
-
-export const Video = Template.bind({});
-Video.args = {};
-
-export const Audio = Template.bind({});
-Audio.args = {};
-
-export const Error = () => <NFT contractAddress="abcd" tokenId="1" />;
+Default.args = {
+  contractAddress: '0x23581767a106ae21c074b2276d25e5c3e136a68b',
+  tokenId: '6240',
+};

packages/components/src/components/NFT/NFT.tsx

@@ -1,7 +1,13 @@
 // import React, { useCallback, useEffect, useRef } from 'react';
 import React, { useEffect } from 'react';
 // import { useNFTsByOwner } from '@web3-ui/hooks';
-import { useNFTMetadata } from 'ankr-react';
+import { Alchemy } from 'alchemy-sdk';
+import { useQuery } from 'react-query';
+import { Card } from '../../elements';
+import { Flex, Text, Box } from '../../common';
+
+// Using default settings - pass in a settings object to specify your API key and network
+const alchemy = new Alchemy();
 
 export type NFTProps = {
   /**
@@ -27,30 +33,60 @@ export interface NFTData {
   animationUrl?: string;
 }
 
+type getNFTMetadataProps = {
+  contractAddress?: string;
+  tokenId?: string;
+};
+
 /**
  * Component to fetch and display NFT data
  */
-export const NFT = ({
-  // contractAddress,
-  // tokenId,
-  size = 'xs',
-}: NFTProps) => {
-  // const { data, error, isLoading } = useNFTMetadata({
-  //   blockchain: 'eth',
-  //   contractAddress: '0xEdB61f74B0d09B2558F1eeb79B247c1F363Ae452',
-  //   tokenId: '2276'
-  // });
-
-  // console.log('data', data);
+export const NFT = ({ contractAddress, tokenId, size }: NFTProps) => {
+  const { data, isLoading } = useQuery(
+    ['getNFTMetadata', contractAddress, tokenId],
+    () => {
+      return fetchNft({
+        contractAddress,
+        tokenId,
+      });
+    },
+    {
+      enabled: !!contractAddress && !!tokenId,
+    }
+  );
 
-  // working ankr api hook for nfts by owner
-  // const { data, error, isLoading } = useNFTsByOwner({
-  //   walletAddress: '0xb8c2C29ee19D8307cb7255e1Cd9CbDE883A267d5',
-  //   blockchain: ['eth', 'polygon']
-  // });
-  // console.log('loading', isLoading);
-  // console.log('error', error);
-  // console.log(data);
+  const fetchNft = async ({
+    contractAddress,
+    tokenId,
+  }: getNFTMetadataProps) => {
+    if (!contractAddress || !tokenId) return null;
+    const data = await alchemy.nft.getNftMetadata(contractAddress, tokenId);
+    return data;
+  };
 
-  return <div>nft here</div>;
+  return (
+    <Card size={size}>
+      <Flex direction={'column'}>
+        {data?.media.at(0)?.gateway ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={data?.media.at(0)?.gateway}
+            alt={data?.title || 'nft image'}
+          />
+        ) : (
+          <Box
+            css={{
+              height: '$36',
+              width: '100%',
+              backgroundColor: '$gray400',
+            }}
+          />
+        )}
+        <Flex direction={'column'}>
+          <Text weight={'semibold'}>{data?.title}</Text>
+          <Text>{data?.tokenId}</Text>
+        </Flex>
+      </Flex>
+    </Card>
+  );
 };

packages/components/src/elements/Card/Card.tsx

@@ -130,8 +130,35 @@ export const Card = styled('div', {
         borderRadius: '$pill',
       },
     },
+    size: {
+      xs: {
+        width: '$space$20',
+        height: '$space$32',
+      },
+      sm: {
+        width: '$space$32',
+        height: '$space$48',
+      },
+      md: {
+        width: '$space$48',
+        height: '$space$64',
+      },
+      lg: {
+        width: '$space$64',
+        height: '$space$80',
+      },
+      xl: {
+        width: '$space$80',
+        height: '$space$96',
+      },
+      '2xl': {
+        width: '$space$96',
+        height: 'fit-content',
+      },
+    },
   },
   defaultVariants: {
     rounded: 'full',
+    size: 'xs',
   },
 });

packages/components/src/provider/Web3uiProvider/Web3uiProvider.tsx

@@ -4,7 +4,7 @@ import { Provider as AnkrProvider } from 'ankr-react';
 // import { HooksProvider } from '@web3-ui/hooks';
 // import { AlchemyProvider } from '@web3-ui/hooks';
 import { CSS, getCssText, createTheme } from '../../theme/stitches.config';
-
+import { QueryClient, QueryClientProvider } from 'react-query';
 export interface IWeb3uiProviderProps {
   children: React.ReactNode;
   theme?: CSS | null;
@@ -24,6 +24,8 @@ const createThemeRootSelector = (id: string | undefined) => {
   return id ? `[${attr}="${id}-theme"]` : `[${attr}]`;
 };
 
+const queryClient = new QueryClient();
+
 export const Web3uiProvider = ({
   children,
   theme,
@@ -55,16 +57,18 @@ export const Web3uiProvider = ({
 
   // TODO dangerous set innerHTML is set for ssr.  need to test this. https://stitches.dev/docs/server-side-rendering
   return (
-    <AnkrProvider>
-      <div {...createThemeRootProps(id)} className={currentTheme}>
-        <style
-          id="stitches"
-          dangerouslySetInnerHTML={{
-            __html: [`${selector}${getCssText()}`].join(),
-          }}
-        />
-        {children}
-      </div>
-    </AnkrProvider>
+    <QueryClientProvider client={queryClient}>
+      <AnkrProvider>
+        <div {...createThemeRootProps(id)} className={currentTheme}>
+          <style
+            id="stitches"
+            dangerouslySetInnerHTML={{
+              __html: [`${selector}${getCssText()}`].join(),
+            }}
+          />
+          {children}
+        </div>
+      </AnkrProvider>
+    </QueryClientProvider>
   );
 };

yarn.lock

@@ -13402,7 +13402,7 @@ [email protected]:
     match-sorter "^6.0.2"
     use-sync-external-store "^1.1.0"
 
-react-query@^3.39.1:
+react-query@^3.39.1, react-query@^3.39.2:
   version "3.39.2"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
   integrity sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==