feat: profile page lists NFTs by wallet

Author: netpoe

app/package.json

@@ -38,6 +38,7 @@
     "lodash": "^4.17.21",
     "materialize-css": "^1.0.0-rc.2",
     "moment": "^2.29.1",
+    "moralis": "^2.26.1",
     "next": "^14.2.1",
     "next-i18next": "^8.2.0",
     "react": "^18.2.0",

app/src/context/evm/ERC721/Erc721Context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+import { Erc721ContextType } from "./Erc721Context.types";
+
+export const Erc721Context = createContext<Erc721ContextType | undefined>(undefined);

app/src/context/evm/ERC721/Erc721Context.types.ts

@@ -0,0 +1,11 @@
+import { GetNFTsByWalletResult } from "api/evm/ERC721/types";
+import { ReactNode } from "react";
+
+export type Erc721ContextControllerProps = {
+  children: ReactNode;
+};
+
+export type Erc721ContextType = {
+  nftsByWallet: GetNFTsByWalletResult[][];
+  getNFTsByWallet: () => Promise<void>;
+};

app/src/context/evm/ERC721/Erc721ContextController.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { useAccount } from "wagmi";
+import axios from "axios";
+import { GetNFTsByWalletRequest, GetNFTsByWalletResult } from "api/evm/ERC721/types";
+import _ from "lodash";
+
+import { useRoutes } from "hooks/useRoutes/useRoutes";
+
+import { Erc721ContextControllerProps, Erc721ContextType } from "./Erc721Context.types";
+import { Erc721Context } from "./Erc721Context";
+
+const groupNFTsByContract = (nfts: GetNFTsByWalletResult[]) => {
+  const group = _.groupBy(nfts, "tokenAddress");
+
+  console.log(_.map(group));
+
+  return _.map(group);
+};
+
+export const Erc721ContextController = ({ children }: Erc721ContextControllerProps) => {
+  const [nftsByWallet, setNftsByWallet] = React.useState<Erc721ContextType["nftsByWallet"]>([]);
+
+  const { address, chainId } = useAccount();
+  const routes = useRoutes();
+
+  const getNFTsByWallet = async () => {
+    try {
+      const data: GetNFTsByWalletRequest = {
+        chainId: chainId!,
+        walletAddress: address!,
+      };
+
+      const result = await axios.post<GetNFTsByWalletResult[]>(routes.api.evm.ERC721.getNFTsByWallet(), {
+        data,
+      });
+
+      console.log(result.data);
+
+      setNftsByWallet(groupNFTsByContract(result.data));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const props: Erc721ContextType = {
+    getNFTsByWallet,
+    nftsByWallet,
+  };
+
+  return <Erc721Context.Provider value={props}>{children}</Erc721Context.Provider>;
+};

app/src/context/evm/ERC721/useErc721Context.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { Erc721Context } from "./Erc721Context";
+
+export const useErc721Context = () => {
+  const context = useContext(Erc721Context);
+
+  if (context === undefined) {
+    throw new Error("useErc721Context must be used within a Erc721Context");
+  }
+
+  return context;
+};

app/src/hooks/useRoutes/useRoutes.tsx

@@ -1,43 +1,14 @@
-type RouteMap = {
-  home: () => string;
-  market: {
-    price: (args: { marketId: string }) => string;
-  };
-  api: {
-    promptWars: {
-      createGuestAccount: () => string;
-      create: () => string;
-      reveal: () => string;
-      resolve: () => string;
-    };
-    chat: {
-      dropboxESign: () => string;
-      openai: {
-        completionsAPI: () => string;
-        assistantsAPI: () => string;
-      };
-      googleai: {
-        completionsAPI: () => string;
-      };
-    };
-  };
-  dashboard: {
-    latestTrends: () => string;
-    promptWars: {
-      home: () => string;
-      previousMarkets: () => string;
-      market: (args: { marketId: string }) => string;
-    };
-    market: (args: { marketId: string }) => string;
-  };
-};
-
-export const routes: RouteMap = {
+export const routes = {
   home: () => `/`,
-  market: {
-    price: ({ marketId }) => `/market/price/${marketId}`,
+  profile: {
+    index: () => `/profile`,
   },
   api: {
+    evm: {
+      ERC721: {
+        getNFTsByWallet: () => `/api/evm/ERC721/get-nfts-by-wallet`,
+      },
+    },
     promptWars: {
       createGuestAccount: () => `/api/prompt-wars/create-guest-account`,
       create: () => `/api/prompt-wars/create`,
@@ -55,15 +26,6 @@ export const routes: RouteMap = {
       },
     },
   },
-  dashboard: {
-    latestTrends: () => `/`,
-    promptWars: {
-      home: () => `/`,
-      previousMarkets: () => `/previous-rounds`,
-      market: ({ marketId }) => `/${marketId}`,
-    },
-    market: ({ marketId }) => `/market/${marketId}`,
-  },
 };
 
-export const useRoutes: () => RouteMap = () => routes;
+export const useRoutes = () => routes;

app/src/layouts/home-layout/HomeLayout.tsx

@@ -8,6 +8,7 @@ import { ToastContextController } from "context/toast/ToastContextController";
 import { ThemeContextController } from "context/theme/ThemeContextController";
 import { EvmWalletSelectorContextController } from "context/evm/wallet-selector/EvmWalletSelectorContextController";
 import { Footer } from "ui/footer/Footer";
+import { Erc721ContextController } from "context/evm/ERC721/Erc721ContextController";
 
 import { ChatLayoutProps } from "./HomeLayout.types";
 import styles from "./HomeLayout.module.scss";
@@ -27,17 +28,19 @@ export const HomeLayout: React.FC<ChatLayoutProps> = ({ children }) => {
       </Head>
       <ThemeContextController>
         <EvmWalletSelectorContextController>
-          <ToastContextController>
-            <div id="modal-root" />
-            <div id="dropdown-portal" />
-            <div className={clsx(styles["home-layout"])}>
-              <Navbar />
+          <Erc721ContextController>
+            <ToastContextController>
+              <div id="modal-root" />
+              <div id="dropdown-portal" />
+              <div className={clsx(styles["home-layout"])}>
+                <Navbar />
 
-              <MainPanel>{children}</MainPanel>
+                <MainPanel>{children}</MainPanel>
 
-              <Footer />
-            </div>
-          </ToastContextController>
+                <Footer />
+              </div>
+            </ToastContextController>
+          </Erc721ContextController>
         </EvmWalletSelectorContextController>
       </ThemeContextController>
     </>

app/src/pages/api/evm/ERC721/get-nfts-by-wallet.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import logger from "providers/logger";
+import moralis from "providers/moralis";
+
+export default async function Fn(request: NextApiRequest, response: NextApiResponse) {
+  try {
+    await moralis.loadClient();
+  } catch (error) {
+    logger.error(error);
+  }
+
+  try {
+    const { data } = request.body;
+    logger.info(`api/evm/ERC721/get-nfts-by-wallet: ${JSON.stringify(data)}`);
+
+    const result = await moralis.client.EvmApi.nft.getWalletNFTs({
+      chain: data.chainId,
+      format: "decimal",
+      mediaItems: false,
+      address: data.walletAddress,
+    });
+
+    response.status(200).json(result.result);
+  } catch (error) {
+    logger.error(error);
+
+    response.status(500).json({ error: (error as Error).message });
+  }
+}

app/src/pages/api/evm/ERC721/types.ts

@@ -0,0 +1,11 @@
+import { EvmNft } from "@moralisweb3/common-evm-utils/lib";
+import { MoralisDataObjectValue } from "@moralisweb3/common-core/lib";
+
+export type GetNFTsByWalletResult = EvmNft & {
+  metadata: MoralisDataObjectValue & Record<string, any>;
+};
+
+export type GetNFTsByWalletRequest = {
+  walletAddress: string;
+  chainId: number;
+};

app/src/pages/profile/index.tsx

@@ -0,0 +1,37 @@
+import { GetServerSidePropsContext, NextPage } from "next";
+import { i18n, useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Head from "next/head";
+
+import { HomeLayout } from "layouts/home-layout/HomeLayout";
+import { Collections } from "ui/lease721/profile/collections/Collections";
+
+const Index: NextPage = () => {
+  const { t } = useTranslation("head");
+
+  return (
+    <HomeLayout>
+      <Head>
+        <title>{t("head.og.title")}</title>
+        <meta name="description" content={t("head.og.description")} />
+        <meta property="og:title" content={t("head.og.title")} />
+        <meta property="og:description" content={t("head.og.description")} />
+        <meta property="og:url" content="https://lease721.com/" />
+      </Head>
+
+      <Collections />
+    </HomeLayout>
+  );
+};
+
+export const getServerSideProps = async ({ locale }: GetServerSidePropsContext) => {
+  await i18n?.reloadResources();
+
+  return {
+    props: {
+      ...(await serverSideTranslations(locale!, ["common", "head", "chat", "prompt-wars"])),
+    },
+  };
+};
+
+export default Index;