update

thirdweb-dev · Aug 4, 2024 · 5b467ce · 5b467ce
1 parent 564d387
commit 5b467ce
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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,25 +18,27 @@ 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
         size="lg"
         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
@@ -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>