[Dashboard] Feature: Updated Mintable Modules (#5404)

https://linear.app/thirdweb/project/[modular-contracts]-modules-ui-c7a2be28299d/overview
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the `Mintable` functionality in the dashboard and improving the handling of URIs in the `MintableERC721` and `MintableERC1155` modules. It also refines role management for minting processes.

### Detailed summary
- Changed the condition in `module-instance.tsx` to check for "Mintable" instead of "Mintable-ignore".
- Updated `mintWithRole.ts` in both `MintableERC721` and `MintableERC1155` to conditionally process `nfts` and set `baseURI`.
- Simplified import statements in `Mintable.tsx`.
- Modified `hasMinterRole` and `grantRoleTx` to use a more concise syntax for role checking and granting in `Mintable.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: GWSzeto

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx

@@ -27,12 +27,9 @@ import { useTxNotifications } from "hooks/useTxNotifications";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
-import {
-  type PreparedTransaction,
-  prepareContractCall,
-  sendAndConfirmTransaction,
-} from "thirdweb";
+import { type PreparedTransaction, sendAndConfirmTransaction } from "thirdweb";
 import { MintableERC721, MintableERC1155 } from "thirdweb/modules";
+import { grantRoles, hasAllRoles } from "thirdweb/modules";
 import { useReadContract } from "thirdweb/react";
 import type { NFTMetadataInputLimited } from "types/modified-types";
 import { parseAttributes } from "utils/parseAttributes";
@@ -79,10 +76,10 @@ function MintableModule(props: ModuleInstanceProps) {
       contract: contract,
     },
   );
-  const hasMinterRole = useReadContract({
+  const hasMinterRole = useReadContract(hasAllRoles, {
     contract: contract,
-    method: "function hasAllRoles(address user, uint256 roles) returns (bool)",
-    params: [ownerAccount?.address || "", MINTER_ROLE],
+    user: ownerAccount?.address || "",
+    roles: MINTER_ROLE,
   });
 
   const isBatchMetadataInstalled = !!props.allModuleContractInfo.find(
@@ -97,10 +94,10 @@ function MintableModule(props: ModuleInstanceProps) {
       }
 
       if (!hasMinterRole.data) {
-        const grantRoleTx = prepareContractCall({
+        const grantRoleTx = grantRoles({
           contract,
-          method: "function grantRole(address user, uint256 role) public",
-          params: [ownerAccount.address || "", MINTER_ROLE],
+          user: ownerAccount.address,
+          roles: MINTER_ROLE,
         });
 
         await sendAndConfirmTransaction({

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx

@@ -31,7 +31,7 @@ export function ModuleInstance(props: ModuleInstanceProps) {
     return <TransferableModule {...props} />;
   }
 
-  if (props.contractInfo.name.includes("Mintable-ignore")) {
+  if (props.contractInfo.name.includes("Mintable")) {
     return <MintableModule {...props} />;
   }
 

packages/thirdweb/src/extensions/modules/MintableERC1155/mintWithRole.ts

@@ -45,11 +45,14 @@ export function mintWithRole(
   return generatedMint({
     contract: options.contract,
     asyncParams: async () => {
-      const batchOfUris = await uploadOrExtractURIs(
-        [options.nft],
-        options.contract.client,
-      );
-      const baseURI = getBaseUriFromBatch(batchOfUris);
+      let baseURI = "";
+      if (options.nft) {
+        const batchOfUris = await uploadOrExtractURIs(
+          [options.nft],
+          options.contract.client,
+        );
+        baseURI = getBaseUriFromBatch(batchOfUris);
+      }
 
       const tokenId = options.tokenId ?? maxUint256;
       return {

packages/thirdweb/src/extensions/modules/MintableERC721/mintWithRole.ts

@@ -41,11 +41,14 @@ export function mintWithRole(options: BaseTransactionOptions<NFTMintParams>) {
   return generatedMint({
     contract: options.contract,
     asyncParams: async () => {
-      const batchOfUris = await uploadOrExtractURIs(
-        options.nfts,
-        options.contract.client,
-      );
-      const baseURI = getBaseUriFromBatch(batchOfUris);
+      let baseURI = "";
+      if (options.nfts?.[0] !== "") {
+        const batchOfUris = await uploadOrExtractURIs(
+          options.nfts,
+          options.contract.client,
+        );
+        baseURI = getBaseUriFromBatch(batchOfUris);
+      }
 
       return {
         to: getAddress(options.to),