Merge pull request #16 from nezz0746/feat/add-nft-fetching

Feat: add nft fetching

apps/web/package.json

@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^1.1.3",
+    "alchemy-sdk": "3.1.0",
     "classnames": "^2.3.1",
     "daisyui": "4.4.19",
     "dayjs": "^1.11.10",
     "ethers": "^5.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shared-config": "*",
+    "swr": "^2.2.4",
     "wagmi": "1.4.8",
     "wagmi-config": "*",
     "web-kit": "*",

apps/web/src/App.tsx

@@ -12,10 +12,13 @@ import {
 import { Button, Card, Table, Web3Account } from "web-ui";
 import dayjs from "dayjs";
 import { useAccount } from "wagmi";
+import useOwnedNFTs from "./hooks/useOwnedNFTs";
+import { optimism } from "wagmi/chains";
 
 function App() {
   const { address } = useAccount();
   const { chainId, explorer, isLocal } = useChain();
+  const { data } = useOwnedNFTs(optimism.id);
 
   const [number, setNumber] = useState<bigint>(BigInt(0));
 
@@ -133,6 +136,14 @@ function App() {
               </div>
             </div>
           </Card>
+          <Card className="p-4 grid grid-cols-4">
+            {data?.length &&
+              data.map((nft) => (
+                <Card>
+                  <img src={nft.image.cachedUrl} />
+                </Card>
+              ))}
+          </Card>
         </div>
         <div className="w-full md:w-1/2 lg:w-2/3 h-full">
           <Card>

apps/web/src/hooks/useOwnedNFTs.ts

@@ -0,0 +1,16 @@
+import useSWR from "swr";
+import { useAccount } from "wagmi";
+import { getOwnerNFTsPerChainId } from "../services/alchemy";
+
+const useOwnedNFTs = (chainId: number) => {
+  const { address } = useAccount();
+  const { data, isLoading, error } = useSWR(
+    ["/api/owned-nfts", address, chainId],
+    ([, address, chainId]) => getOwnerNFTsPerChainId(address, chainId),
+    {}
+  );
+
+  return { data, isLoading, error };
+};
+
+export default useOwnedNFTs;

apps/web/src/services/alchemy.ts

@@ -0,0 +1,19 @@
+import { Address } from "wagmi";
+import { OwnedNft as AlchemyOwnedNFT } from "alchemy-sdk";
+import { getAlchemyNFT } from "shared-config";
+
+export interface OwnedNft extends AlchemyOwnedNFT {
+  chainId: number;
+}
+
+export const getOwnerNFTsPerChainId = async (
+  owner: Address | undefined,
+  chainId: number
+) => {
+  if (!owner) return;
+  const nft = getAlchemyNFT(chainId);
+
+  const { ownedNfts: response } = await nft.getNftsForOwner(owner);
+
+  return response.map((nft) => ({ ...nft, chainId }));
+};

packages/shared-config/assets.ts

@@ -0,0 +1,24 @@
+import op from "./icons/op.svg";
+import polygon from "./icons/polygon.svg";
+import ethereum from "./icons/ethereum.svg";
+import base from "./icons/base.svg";
+import opensea from "./icons/os.svg";
+
+export const chainIdToIcon: Record<number, any> = {
+  1: ethereum,
+  5: ethereum,
+  137: polygon,
+  80001: polygon,
+  10: op,
+  420: op,
+  8453: base,
+  84531: base,
+};
+
+export const icons = {
+  op,
+  polygon,
+  ethereum,
+  base,
+  opensea,
+};

packages/shared-config/index.t.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

packages/shared-config/index.ts

@@ -1,2 +1,3 @@
 export * from "./nfts";
 export * from "./variables";
+export * from "./assets";

packages/shared-config/nfts.ts

@@ -18,6 +18,7 @@ const chainIdToNetwork: Record<number, Network> = {
   420: Network.OPT_GOERLI,
   137: Network.MATIC_MAINNET,
   80001: Network.MATIC_MUMBAI,
+  8453: Network.BASE_MAINNET,
 };
 
 export const getAlchemyNFT = (chainId: number) => {

packages/shared-config/package.json

@@ -9,6 +9,6 @@
     "lint": "echo 'Add lint script here'"
   },
   "dependencies": {
-    "alchemy-sdk": "^3.1.0"
+    "alchemy-sdk": "3.1.0"
   }
 }

packages/shared-config/tsconfig.json

@@ -4,5 +4,5 @@
     "module": "ESNext",
     "types": ["vite/client"]
   },
-  "include": ["index.ts", "variables.ts"],
+  "include": ["index.ts", "variables.ts", "assets.ts"],
 }

yarn.lock

@@ -3716,7 +3716,7 @@ ajv@^6.12.3, ajv@^6.12.4, ajv@~6.12.6:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alchemy-sdk@^3.1.0:
+[email protected]:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/alchemy-sdk/-/alchemy-sdk-3.1.0.tgz#cd4a03215d7502ea4c3e7548f7b837e25b461864"
   integrity sha512-KMzBo0Dq+cEqXegn4fh2sP74dhAngr9twIv2pBTyPq3/ZJs+aiXXlFzVrVUYaa6x9L7iQtqhz3YKFCuN5uvpAg==
@@ -4569,6 +4569,11 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 clipboardy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-3.0.0.tgz#f3876247404d334c9ed01b6f269c11d09a5e3092"
@@ -9433,6 +9438,14 @@ swap-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+swr@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
+  dependencies:
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
+
 [email protected]:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/sync-request/-/sync-request-6.1.0.tgz#e96217565b5e50bbffe179868ba75532fb597e68"