fix: getTokenPrice on GridItem

netpoe · netpoe · commit 7168630cdb47 · 2024-04-29T01:07:21.000-06:00
diff --git a/app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContext.types.ts b/app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContext.types.ts
@@ -8,6 +8,7 @@ export type LarskristoHellheadsContextControllerProps = {
 
 export type LarskristoHellheadsContextActions = {
   fetchContractValues: { isLoading: boolean };
+  getTokenPrice: { isLoading: boolean };
   buyToken: { isPending: boolean; isConfirmed: boolean; transactionHash?: string };
 };
 
@@ -19,8 +20,8 @@ export type LarskristoHellheadsContractValues = {
 export type TokenPrice = {
   rawValue: bigint;
   formattedValue: string;
-  exchangeRate: number;
-  exchangeRateFormatted: string;
+  exchangeRate?: number;
+  exchangeRateFormatted?: string;
 };
 
 export type Royalty = {
@@ -38,7 +39,8 @@ export type LarskristoHellheadsContextType = {
   royalty?: Royalty;
   fetchContractValues: (address: string) => Promise<void>;
   ownerOf: (tokenId: number) => Promise<void>;
-  getTokenPrice: (tokenId: number) => Promise<void>;
+  getTokenPrice: (tokenId: number, options?: { excludeExchangeRate?: boolean }) => Promise<TokenPrice | undefined>;
   royaltyInfo: (tokenId: number) => Promise<void>;
   buyToken: (tokenId: number) => Promise<void>;
+  connectedAccountIsOwner: () => boolean;
 };
diff --git a/app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContextController.tsx b/app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContextController.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { Client, getContract } from "viem";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
-import { getClient } from "@wagmi/core";
+import { getContract } from "viem";
+import { useAccount } from "wagmi";
 import { ethers } from "ethers";
 
 import { LarsKristoHellheads__factory } from "providers/evm/contracts/larskristohellheads/LarsKristoHellheads__factory";
-import { useEvmWalletSelectorContext } from "../wallet-selector/useEvmWalletSelectorContext";
 import currency from "providers/currency";
 import { ZeroXAddress } from "../wallet-selector/EvmWalletSelectorContext.types";
+import evm from "providers/evm";
 
 import { LarskristoHellheadsContext } from "./LarskristoHellheadsContext";
 import {
@@ -36,82 +35,117 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
       isPending: false,
       isConfirmed: false,
     },
+    getTokenPrice: {
+      isLoading: false,
+    },
   });
 
-  const { address: connectedAccountAddress, chainId } = useAccount();
-  const { wagmiConfig } = useEvmWalletSelectorContext();
-  const { data: hash, error: writeContractError, writeContract, isPending } = useWriteContract();
-  const {
-    isLoading: isConfirming,
-    isSuccess: isConfirmed,
-    data,
-  } = useWaitForTransactionReceipt({
-    hash,
-  });
-
-  useEffect(() => {
-    setActions((prev) => ({
-      ...prev,
-      buyToken: {
-        isPending: isPending || isConfirming,
-        isConfirmed,
-        transactionHash: data?.transactionHash,
-      },
-    }));
-  }, [isPending, isConfirming, isConfirmed, data]);
+  const { address: connectedAccountAddress } = useAccount();
+  const { publicClient } = evm;
 
-  if (writeContractError) {
-    console.error(writeContractError);
-  }
+  const getContractInstance = () =>
+    getContract({
+      address: contractAddress as ZeroXAddress,
+      abi: LarsKristoHellheads__factory.abi,
+      client: publicClient,
+    });
 
-  const client = getClient(wagmiConfig, { chainId }) as Client;
+  const connectedAccountIsOwner = () => owner === connectedAccountAddress;
 
   const buyToken = async (tokenId: number) => {
     try {
-      await writeContract({
-        address: contractAddress as ZeroXAddress,
-        abi: LarsKristoHellheads__factory.abi,
-        functionName: "buyToken" as "buyToken",
-        args: [BigInt(tokenId)],
+      setActions((prev) => ({
+        ...prev,
+        buyToken: {
+          isPending: true,
+          isConfirmed: false,
+        },
+      }));
+
+      const contract = getContractInstance();
+
+      const hash = await contract.write.buyToken([BigInt(tokenId)], {
         account: connectedAccountAddress as ZeroXAddress,
         value: tokenPrice?.rawValue!,
+        chain: undefined,
       });
+
+      console.log({ hash });
+
+      const receipt = await publicClient.waitForTransactionReceipt({ hash });
+
+      console.log({ receipt });
+
+      setActions((prev) => ({
+        ...prev,
+        buyToken: {
+          isPending: false,
+          isConfirmed: true,
+          transactionHash: receipt.transactionHash,
+        },
+      }));
     } catch (error) {
       console.error(error);
     }
   };
 
-  const getTokenPrice = async (tokenId: number) => {
+  const getTokenPrice = async (tokenId: number, options?: { excludeExchangeRate?: boolean }) => {
     try {
-      const contract = getContract({
-        address: contractAddress as ZeroXAddress,
-        abi: LarsKristoHellheads__factory.abi,
-        client,
-      });
+      setActions((prev) => ({
+        ...prev,
+        getTokenPrice: {
+          isLoading: true,
+        },
+      }));
+
+      const contract = getContractInstance();
 
       const rawValue = await contract.read.getTokenPrice([BigInt(tokenId)]);
       const formattedValue = ethers.formatEther(rawValue);
-      const exchangeRate = await currency.getCoinCurrentPrice("ethereum", "usd");
-      const exchangeRateFormatted = currency.formatFiatCurrency(Number(formattedValue) * exchangeRate);
 
-      setTokenPrice({
+      const values: TokenPrice = {
         rawValue,
         formattedValue,
-        exchangeRate,
-        exchangeRateFormatted,
-      });
+      };
+
+      if (!options?.excludeExchangeRate) {
+        const exchangeRate = await currency.getCoinCurrentPrice("ethereum", "usd");
+        const exchangeRateFormatted = currency.formatFiatCurrency(Number(formattedValue) * exchangeRate);
+        values.exchangeRate = exchangeRate;
+        values.exchangeRateFormatted = exchangeRateFormatted;
+      }
+
+      setTokenPrice(values);
+
+      setActions((prev) => ({
+        ...prev,
+        getTokenPrice: {
+          isLoading: false,
+        },
+      }));
+
+      return values;
     } catch (error) {
       console.error(error);
+      setTokenPrice(undefined);
     }
+
+    setActions((prev) => ({
+      ...prev,
+      getTokenPrice: {
+        isLoading: false,
+      },
+    }));
+
+    return {
+      rawValue: BigInt(0),
+      formattedValue: "0.00",
+    };
   };
 
   const royaltyInfo = async (tokenId: number) => {
     try {
-      const contract = getContract({
-        address: contractAddress as ZeroXAddress,
-        abi: LarsKristoHellheads__factory.abi,
-        client,
-      });
+      const contract = getContractInstance();
 
       const [, rawValue] = await contract.read.royaltyInfo([BigInt(tokenId), tokenPrice!.rawValue]);
       const percentage = Number(ethers.formatEther(rawValue)) / Number(ethers.formatEther(tokenPrice!.rawValue));
@@ -128,11 +162,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
 
   const ownerOf = async (tokenId: number) => {
     try {
-      const contract = getContract({
-        address: contractAddress as ZeroXAddress,
-        abi: LarsKristoHellheads__factory.abi,
-        client,
-      });
+      const contract = getContractInstance();
 
       const result = await contract.read.ownerOf([BigInt(tokenId)]);
 
@@ -154,7 +184,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
       const contract = getContract({
         address: address as ZeroXAddress,
         abi: LarsKristoHellheads__factory.abi,
-        client,
+        client: publicClient,
       });
 
       const [name, symbol] = await Promise.all([contract.read.name(), contract.read.symbol()]);
@@ -199,6 +229,7 @@ export const LarskristoHellheadsContextController = ({ children }: LarskristoHel
     tokenPrice,
     royaltyInfo,
     royalty,
+    connectedAccountIsOwner,
   };
 
   return <LarskristoHellheadsContext.Provider value={props}>{children}</LarskristoHellheadsContext.Provider>;
diff --git a/app/src/providers/evm/client.ts b/app/src/providers/evm/client.ts
@@ -1,9 +1,12 @@
-import { createWalletClient, http } from "viem";
-import { sepolia } from "viem/chains";
+import { createPublicClient, createWalletClient, custom, http } from "viem";
+import { mainnet, sepolia } from "viem/chains";
 
-const client = createWalletClient({
-  chain: sepolia,
-  transport: http(),
+export const walletClient = createWalletClient({
+  chain: process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ENV === "testnet" ? sepolia : mainnet,
+  transport: window !== undefined && (window as any).ethereum ? custom((window as any).ethereum) : http(),
 });
 
-export default client;
+export const publicClient = createPublicClient({
+  chain: process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ENV === "testnet" ? sepolia : mainnet,
+  transport: window !== undefined && (window as any).ethereum ? custom((window as any).ethereum) : http(),
+});
diff --git a/app/src/providers/evm/index.ts b/app/src/providers/evm/index.ts
@@ -1,9 +1,10 @@
-import client from "./client";
+import { walletClient, publicClient } from "./client";
 
 const getBlockExplorerUrl = () =>
   process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ENV === "testnet" ? "https://sepolia.etherscan.io" : "https://etherscan.io";
 
 export default {
-  client,
+  walletClient,
+  publicClient,
   getBlockExplorerUrl,
 };
diff --git a/app/src/theme/forms/_input-fields.scss b/app/src/theme/forms/_input-fields.scss
@@ -30,10 +30,8 @@ textarea.materialize-textarea {
   border-radius: $border-radius-input;
   padding: $input-padding;
   color: $input-text-color;
-  // General Styles
   outline: none;
-
-  // Disabled input style
+  background-color: $input-background;
 
   &:disabled,
   &[readonly="readonly"] {
diff --git a/app/src/theme/variants/_svpervnder.scss b/app/src/theme/variants/_svpervnder.scss
@@ -135,7 +135,7 @@ body[data-theme="lease-721"] {
   --color-value-decrease-bright: #e76823;
 
   // Forms
-  --color-input-text: var(--color-background);
+  --color-input-text: var(--color-typography-text);
   --color-input-text-disabled: var(--color-typography-description);
   --color-input-background: white;
   --color-input-background-disabled: var(--color-background-contrast);
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheadsContainer.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheadsContainer.tsx
@@ -0,0 +1,10 @@
+import { LarskristoHellheadsContextController } from "context/evm/larskristo-hellheads/LarskristoHellheadsContextController";
+
+import { LatestCollectionProps } from "./LarsKristoHellheads.types";
+import { LarsKristoHellheads } from "./LarsKristoHellheads";
+
+export const LarsKristoHellheadsContainer: React.FC<LatestCollectionProps> = () => (
+  <LarskristoHellheadsContextController>
+    <LarsKristoHellheads />
+  </LarskristoHellheadsContextController>
+);
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss
@@ -28,7 +28,8 @@
 
   &__price-card,
   &__details-card,
-  &__author-card {
+  &__author-card,
+  &__forge-card {
     margin-bottom: $space-default;
   }
 
@@ -39,15 +40,81 @@
     }
   }
 
+  &__forge-card {
+    &--row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $space-s;
+
+      &-price,
+      &-button {
+        display: block;
+      }
+
+      > div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      &-img {
+        img {
+          width: 100%;
+          height: auto;
+          border-radius: $border-radius;
+        }
+      }
+
+      &-details {
+        display: flex;
+
+        p {
+          margin-right: $space-m;
+        }
+      }
+    }
+  }
+
+  &__set-for-sale {
+    display: block;
+
+    &--form {
+      position: relative;
+
+      &-price-field {
+        padding-right: 80px !important;
+        font-size: $font-size-text-lead;
+
+        &::placeholder {
+          font-size: $font-size-text-lead;
+        }
+      }
+
+      &-currency {
+        position: absolute;
+        top: 7px;
+        right: $space-default;
+        z-index: $z-index-content;
+      }
+    }
+
+    &--info {
+      border-radius: $border-radius;
+      padding: $space-default;
+      text-align: center;
+      background-color: var(--color-background);
+    }
+  }
+
   &__price-block {
     display: flex;
     justify-content: space-between;
 
     &--success {
-      margin-top: $space-default;
       padding: $space-default;
+      text-align: center;
       color: var(--color-background);
-      background-color: var(--color-primary-shade-low);
+      background-color: var(--color-background);
     }
 
     &--connect-wallet {
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss.d.ts b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.module.scss.d.ts
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/details-modal/DetailsModal.tsx
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/grid-item/GridItem.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/grid-item/GridItem.tsx
diff --git a/app/src/ui/svpervnder/home/Home.tsx b/app/src/ui/svpervnder/home/Home.tsx
