From 5b467ce8f505cbe80114bba07a556ad4250eda72 Mon Sep 17 00:00:00 2001
From: Kien Ngo <github@kien.ngo>
Date: Sun, 4 Aug 2024 18:46:40 -0400
Subject: [PATCH] update

---
 .../tabs/tokens/components/mint-button.tsx    | 25 +++++++++++--------
 .../src/contract-ui/tabs/tokens/page.tsx      |  8 ++++--
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/mint-button.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/mint-button.tsx
index 7e4d7b1201c..0dba71774b0 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/components/mint-button.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/components/mint-button.tsx
@@ -1,8 +1,11 @@
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
 import { Icon, useDisclosure } from "@chakra-ui/react";
-import type { TokenContract, useContract } from "@thirdweb-dev/react";
+import type { useContract } from "@thirdweb-dev/react";
 import { detectFeatures } from "components/contract-components/utils";
+import { thirdwebClient } from "lib/thirdweb-client";
+import { defineDashboardChain } from "lib/v5-adapter";
 import { FiPlus } from "react-icons/fi";
+import { getContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { TokenMintForm } from "./mint-form";
 
@@ -15,17 +18,19 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
   ...restButtonProps
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const isERC20Mintable = detectFeatures<TokenContract>(
-    contractQuery.contract,
-    ["ERC20Mintable"],
-  );
-
-  if (!isERC20Mintable || !contractQuery.contract) {
+  const contractV4 = contractQuery.contract;
+  const contract = contractV4
+    ? getContract({
+      address: contractV4.getAddress(),
+      chain: defineDashboardChain(contractV4.chainId),
+      client: thirdwebClient,
+    })
+    : null;
+  if (!contract || !contractV4) {
     return null;
   }
-
   return (
-    <MinterOnly contract={contractQuery.contract}>
+    <MinterOnly contract={contract}>
       <Drawer
         allowPinchZoom
         preserveScrollBarGap
@@ -33,7 +38,7 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
         onClose={onClose}
         isOpen={isOpen}
       >
-        <TokenMintForm contract={contractQuery.contract} />
+        <TokenMintForm contract={contractV4} />
       </Drawer>
       <Button
         colorScheme="primary"
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
index 29ac44ed424..c11d52fa826 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/page.tsx
@@ -33,6 +33,11 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
     "ERC20",
   ]);
 
+  const isERC20Mintable = detectFeatures<TokenContract>(
+    contractQuery.contract,
+    ["ERC20Mintable"],
+  );
+
   if (!isERC20) {
     return (
       <Card as={Flex} flexDir="column" gap={3}>
@@ -80,8 +85,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
             contractAddress={contractAddress}
             chainId={chainId}
           />
-          {/* TODO: update (mintable detection) */}
-          <TokenMintButton contractQuery={contractQuery} />
+          {isERC20Mintable && contractQuery.contract && <TokenMintButton contractQuery={contractQuery} />}
         </ButtonGroup>
       </Flex>