feat: token page WIP

Author: netpoe

app/src/context/evm/larskristo-hellheads/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/larskristo-hellheads/ERC721Context.types.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+
+import { ZeroXAddress } from "../wallet-selector/EvmWalletSelectorContext.types";
+
+export type ItemMetadata = {
+  id?: number;
+  name: string;
+  description: string;
+  image: string;
+  thumbnail: string;
+};
+
+export type ERC721ContextControllerProps = {
+  children: ReactNode;
+  address: ZeroXAddress;
+  tokenId: ZeroXAddress;
+};
+
+export type ERC721ContextActions = {
+  fetchContractValues: { isLoading: boolean };
+  getTokenPrice: { isLoading: boolean };
+  buyToken: { isPending: boolean; isConfirmed: boolean; transactionHash?: string };
+};
+
+export type ERC721ContractValues = {
+  name: string;
+  symbol: string;
+};
+
+export type TokenPrice = {
+  rawValue: bigint;
+  formattedValue: string;
+  exchangeRate?: number;
+  exchangeRateFormatted?: string;
+};
+
+export type Royalty = {
+  rawValue: bigint;
+  percentage: number;
+  percentageFormatted: string;
+};
+
+export type ERC721ContextType = {
+  contractValues?: ERC721ContractValues;
+  contractAddress?: string;
+  actions: ERC721ContextActions;
+  owner?: ZeroXAddress;
+  tokenPrice?: TokenPrice;
+  tokenMetadata?: ItemMetadata;
+  royalty?: Royalty;
+  fetchContractValues: () => Promise<void>;
+  ownerOf: () => Promise<void>;
+  getTokenPrice: (options?: { excludeExchangeRate?: boolean }) => Promise<TokenPrice | undefined>;
+  royaltyInfo: () => Promise<void>;
+  buyToken: () => Promise<void>;
+  getTokenUri: () => Promise<void>;
+  getTokenMetadata: () => Promise<void>;
+  connectedAccountIsOwner: () => boolean;
+};

app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContextController.tsx app/src/context/evm/larskristo-hellheads/ERC721ContextController.tsx

@@ -2,32 +2,36 @@ import React, { useEffect, useState } from "react";
 import { getContract } from "viem";
 import { useAccount } from "wagmi";
 import { ethers } from "ethers";
+import axios from "axios";
 
 import { LarsKristoHellheads__factory } from "providers/evm/contracts/larskristohellheads/LarsKristoHellheads__factory";
 import currency from "providers/currency";
 import { ZeroXAddress } from "../wallet-selector/EvmWalletSelectorContext.types";
 import evm from "providers/evm";
 
-import { LarskristoHellheadsContext } from "./LarskristoHellheadsContext";
+import { ERC721Context } from "./ERC721Context";
 import {
-  LarskristoHellheadsContextActions,
-  LarskristoHellheadsContextControllerProps,
-  LarskristoHellheadsContextType,
-  LarskristoHellheadsContractValues,
+  ERC721ContextActions,
+  ERC721ContextControllerProps,
+  ERC721ContextType,
+  ERC721ContractValues,
+  ItemMetadata,
   Royalty,
   TokenPrice,
-} from "./LarskristoHellheadsContext.types";
-
-const SEPOLIA_TESTNET_ADDRESS = "0x2abbf9c29606b4c752944942aa9952ac2cdf552b";
-const ETHEREUM_MAINNET_ADDRESS = "0x5D003EBE7348d6D3aC1a397619ED2016711d7615";
-
-export const LarskristoHellheadsContextController = ({ children }: LarskristoHellheadsContextControllerProps) => {
-  const [contractAddress, setContractAddress] = useState<string | undefined>();
-  const [contractValues, setContractValues] = useState<LarskristoHellheadsContractValues>();
+} from "./ERC721Context.types";
+
+export const ERC721ContextController = ({
+  children,
+  tokenId,
+  address: contractAddress,
+}: ERC721ContextControllerProps) => {
+  const [contractValues, setContractValues] = useState<ERC721ContractValues>();
   const [owner, setOwner] = useState<`0x${string}`>();
   const [tokenPrice, setTokenPrice] = useState<TokenPrice | undefined>();
   const [royalty, setRoyaltyInfo] = useState<Royalty | undefined>();
-  const [actions, setActions] = useState<LarskristoHellheadsContextActions>({
+  const [tokenUri, setTokenUri] = useState<string | undefined>();
+  const [tokenMetadata, setTokenMetadata] = useState<ItemMetadata | undefined>();
+  const [actions, setActions] = useState<ERC721ContextActions>({
     fetchContractValues: {
       isLoading: false,
     },
@@ -52,7 +56,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
 
   const connectedAccountIsOwner = () => owner === connectedAccountAddress;
 
-  const buyToken = async (tokenId: number) => {
+  const buyToken = async () => {
     try {
       setActions((prev) => ({
         ...prev,
@@ -89,7 +93,53 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     }
   };
 
-  const getTokenPrice = async (tokenId: number, options?: { excludeExchangeRate?: boolean }) => {
+  const getTokenMetadata = async () => {
+    try {
+      const result = await axios.get(tokenUri!, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      setTokenMetadata({
+        ...result.data,
+        id: tokenId,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getTokenUri = async () => {
+    try {
+      const contract = getContractInstance();
+
+      const result = await contract.read.tokenURI([BigInt(tokenId)]);
+
+      setTokenUri(result);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const royaltyInfo = async () => {
+    try {
+      const contract = getContractInstance();
+
+      const [, rawValue] = await contract.read.royaltyInfo([BigInt(tokenId), tokenPrice!.rawValue]);
+      const percentage = Number(ethers.formatEther(rawValue)) / Number(ethers.formatEther(tokenPrice!.rawValue));
+
+      setRoyaltyInfo({
+        rawValue,
+        percentage,
+        percentageFormatted: `${(percentage * 100).toFixed(2)}%`,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getTokenPrice = async (options?: { excludeExchangeRate?: boolean }) => {
     try {
       setActions((prev) => ({
         ...prev,
@@ -143,24 +193,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     };
   };
 
-  const royaltyInfo = async (tokenId: number) => {
-    try {
-      const contract = getContractInstance();
-
-      const [, rawValue] = await contract.read.royaltyInfo([BigInt(tokenId), tokenPrice!.rawValue]);
-      const percentage = Number(ethers.formatEther(rawValue)) / Number(ethers.formatEther(tokenPrice!.rawValue));
-
-      setRoyaltyInfo({
-        rawValue,
-        percentage,
-        percentageFormatted: `${(percentage * 100).toFixed(2)}%`,
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const ownerOf = async (tokenId: number) => {
+  const ownerOf = async () => {
     try {
       const contract = getContractInstance();
 
@@ -172,7 +205,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     }
   };
 
-  const fetchContractValues = async (address: string) => {
+  const fetchContractValues = async () => {
     setActions((prev) => ({
       ...prev,
       fetchContractValues: {
@@ -181,15 +214,11 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     }));
 
     try {
-      const contract = getContract({
-        address: address as ZeroXAddress,
-        abi: LarsKristoHellheads__factory.abi,
-        client: publicClient,
-      });
+      const contract = getContractInstance();
 
       const [name, symbol] = await Promise.all([contract.read.name(), contract.read.symbol()]);
 
-      const values: LarskristoHellheadsContractValues = {
+      const values: ERC721ContractValues = {
         name,
         symbol,
       };
@@ -208,16 +237,21 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
   };
 
   useEffect(() => {
-    const address =
-      process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ENV === "testnet" ? SEPOLIA_TESTNET_ADDRESS : ETHEREUM_MAINNET_ADDRESS;
-    setContractAddress(address);
-
     (async () => {
-      await fetchContractValues(address);
+      await getTokenUri();
+      await fetchContractValues();
     })();
   }, []);
 
-  const props: LarskristoHellheadsContextType = {
+  useEffect(() => {
+    if (!tokenUri) return;
+
+    (async () => {
+      await getTokenMetadata();
+    })();
+  }, [tokenUri]);
+
+  const props: ERC721ContextType = {
     fetchContractValues,
     contractValues,
     actions,
@@ -230,7 +264,10 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     royaltyInfo,
     royalty,
     connectedAccountIsOwner,
+    getTokenUri,
+    getTokenMetadata,
+    tokenMetadata,
   };
 
-  return <LarskristoHellheadsContext.Provider value={props}>{children}</LarskristoHellheadsContext.Provider>;
+  return <ERC721Context.Provider value={props}>{children}</ERC721Context.Provider>;
 };

app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContext.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/context/evm/larskristo-hellheads/LarskristoHellheadsContext.types.ts

@@ -7,10 +7,10 @@ import { LocalStorageKeys } from "hooks/useLocalStorage/useLocalStorage.types";
 import { ThemeContext } from "./ThemeContext";
 import { ThemeContextControllerProps } from "./ThemeContext.types";
 
-const themes: Theme[] = ["svpervnder"];
+const themes: Theme[] = ["lease721"];
 
 export const ThemeContextController = ({ children }: ThemeContextControllerProps) => {
-  const [theme, setTheme] = useState<Theme>("svpervnder");
+  const [theme, setTheme] = useState<Theme>("lease721");
 
   const localStorage = useLocalStorage();