From c978721d032861d25a6f7a66bb24c34c8de2bd2b Mon Sep 17 00:00:00 2001
From: Diego <diego35.da@gmail.com>
Date: Sat, 10 Sep 2022 11:46:18 -0500
Subject: [PATCH 1/3] feat: alchemy sdk get nft metadata in nft component

---
 .../pages/web3-components/index.tsx           |  5 +-
 packages/components/package.json              |  1 +
 .../components/src/components/NFT/NFT.tsx     | 56 +++++++++++--------
 .../Web3uiProvider/Web3uiProvider.tsx         | 28 ++++++----
 yarn.lock                                     |  2 +-
 5 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/apps/playground/pages/web3-components/index.tsx b/apps/playground/pages/web3-components/index.tsx
index a09ef7d..6d7a0ef 100644
--- a/apps/playground/pages/web3-components/index.tsx
+++ b/apps/playground/pages/web3-components/index.tsx
@@ -152,7 +152,10 @@ const Web3ComponentsPage: NextPage = () => {
           >
             NFT
           </Text>
-          <NFT />
+          <NFT
+            contractAddress="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
+            tokenId="4560"
+          />
         </div>
       </div>
     </main>
diff --git a/packages/components/package.json b/packages/components/package.json
index 0fb467b..a1dba34 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -62,6 +62,7 @@
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
     "react": "18.1.0",
+    "react-query": "^3.39.2",
     "ts-jest": "^28.0.5",
     "tsconfig": "*",
     "tsup": "^6.2.0",
diff --git a/packages/components/src/components/NFT/NFT.tsx b/packages/components/src/components/NFT/NFT.tsx
index fcaf0cb..08cc635 100644
--- a/packages/components/src/components/NFT/NFT.tsx
+++ b/packages/components/src/components/NFT/NFT.tsx
@@ -1,7 +1,11 @@
 // 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';
+
+// Using default settings - pass in a settings object to specify your API key and network
+const alchemy = new Alchemy();
 
 export type NFTProps = {
   /**
@@ -27,30 +31,38 @@ 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);
-
-  // 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);
+export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
+  const { data, isLoading } = useQuery(
+    ['getNFTMetadata', contractAddress, tokenId],
+    () => {
+      return fetchNft({
+        contractAddress,
+        tokenId,
+      });
+    },
+    {
+      enabled: !!contractAddress && !!tokenId,
+    }
+  );
+
+  const fetchNft = async ({
+    contractAddress,
+    tokenId,
+  }: getNFTMetadataProps) => {
+    if (!contractAddress || !tokenId) return null;
+    const data = await alchemy.nft.getNftMetadata(contractAddress!, tokenId!);
+    return data;
+  };
+
+  console.log(data);
 
   return <div>nft here</div>;
 };
diff --git a/packages/components/src/provider/Web3uiProvider/Web3uiProvider.tsx b/packages/components/src/provider/Web3uiProvider/Web3uiProvider.tsx
index 73b8d0e..31deb24 100644
--- a/packages/components/src/provider/Web3uiProvider/Web3uiProvider.tsx
+++ b/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>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 1dec77e..59cb3c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13402,7 +13402,7 @@ react-query@4.0.0-beta.23:
     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==

From e9257d46b64ec141431b47dd18f488e3aa414b93 Mon Sep 17 00:00:00 2001
From: Diego Alzate <diego35.da@gmail.com>
Date: Sat, 10 Sep 2022 14:20:26 -0500
Subject: [PATCH 2/3] feat: nft component

---
 .../pages/web3-components/index.tsx           |  5 +--
 .../src/components/NFT/NFT.stories.tsx        | 26 +++++++-------
 .../components/src/components/NFT/NFT.tsx     | 34 ++++++++++++++++---
 .../components/src/elements/Card/Card.tsx     | 27 +++++++++++++++
 4 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/apps/playground/pages/web3-components/index.tsx b/apps/playground/pages/web3-components/index.tsx
index 6d7a0ef..a863eef 100644
--- a/apps/playground/pages/web3-components/index.tsx
+++ b/apps/playground/pages/web3-components/index.tsx
@@ -153,8 +153,9 @@ const Web3ComponentsPage: NextPage = () => {
             NFT
           </Text>
           <NFT
-            contractAddress="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
-            tokenId="4560"
+            contractAddress="0x23581767a106ae21c074b2276d25e5c3e136a68b"
+            tokenId="6240"
+            size="xl"
           />
         </div>
       </div>
diff --git a/packages/components/src/components/NFT/NFT.stories.tsx b/packages/components/src/components/NFT/NFT.stories.tsx
index 9d42dbd..53d7075 100644
--- a/packages/components/src/components/NFT/NFT.stories.tsx
+++ b/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',
+};
diff --git a/packages/components/src/components/NFT/NFT.tsx b/packages/components/src/components/NFT/NFT.tsx
index 08cc635..4e99dc7 100644
--- a/packages/components/src/components/NFT/NFT.tsx
+++ b/packages/components/src/components/NFT/NFT.tsx
@@ -3,6 +3,8 @@ import React, { useEffect } from 'react';
 // import { useNFTsByOwner } from '@web3-ui/hooks';
 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();
@@ -39,7 +41,7 @@ type getNFTMetadataProps = {
 /**
  * Component to fetch and display NFT data
  */
-export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
+export const NFT = ({ contractAddress, tokenId, size }: NFTProps) => {
   const { data, isLoading } = useQuery(
     ['getNFTMetadata', contractAddress, tokenId],
     () => {
@@ -58,11 +60,33 @@ export const NFT = ({ contractAddress, tokenId, size = 'xs' }: NFTProps) => {
     tokenId,
   }: getNFTMetadataProps) => {
     if (!contractAddress || !tokenId) return null;
-    const data = await alchemy.nft.getNftMetadata(contractAddress!, tokenId!);
+    const data = await alchemy.nft.getNftMetadata(contractAddress, tokenId);
     return data;
   };
 
-  console.log(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>
+  );
 };
diff --git a/packages/components/src/elements/Card/Card.tsx b/packages/components/src/elements/Card/Card.tsx
index c8c4933..aedba83 100644
--- a/packages/components/src/elements/Card/Card.tsx
+++ b/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',
   },
 });

From bc74e2b5c845f3b7fab219a69b3a9bdc2f70cc76 Mon Sep 17 00:00:00 2001
From: Diego Alzate <diego35.da@gmail.com>
Date: Sat, 10 Sep 2022 15:24:47 -0500
Subject: [PATCH 3/3] fix: moved react query to dependency instead of dev
 dependency

---
 packages/components/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index a1dba34..0e9075a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -62,7 +62,6 @@
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
     "react": "18.1.0",
-    "react-query": "^3.39.2",
     "ts-jest": "^28.0.5",
     "tsconfig": "*",
     "tsup": "^6.2.0",
@@ -72,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",