Add .json extensions toggle for Collection Actions > Batch Update Metadata

components/collections/actions/Action.tsx

@@ -12,6 +12,7 @@ import { AddressInput, NumberInput } from 'components/forms/FormInput'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import { JsonPreview } from 'components/JsonPreview'
+import { Tooltip } from 'components/Tooltip'
 import { TransactionHash } from 'components/TransactionHash'
 import { useWallet } from 'contexts/wallet'
 import type { BaseMinterInstance } from 'contracts/baseMinter'
@@ -63,6 +64,7 @@ export const CollectionActions = ({
   const [collectionInfo, setCollectionInfo] = useState<CollectionInfo>()
   const [explicitContent, setExplicitContent] = useState<ExplicitContentType>(undefined)
   const [resolvedRecipientAddress, setResolvedRecipientAddress] = useState<string>('')
+  const [jsonExtensions, setJsonExtensions] = useState<boolean>(false)
 
   const actionComboboxState = useActionsComboboxState()
   const type = actionComboboxState.value?.id
@@ -228,6 +230,7 @@ export const CollectionActions = ({
       ? baseURIState.value.trim().slice(0, -1)
       : baseURIState.value.trim(),
     collectionInfo,
+    jsonExtensions,
   }
   const resolveRecipientAddress = async () => {
     await resolveAddress(recipientState.value.trim(), wallet).then((resolvedAddress) => {
@@ -507,6 +510,26 @@ export const CollectionActions = ({
               <InputDateTime minDate={new Date()} onChange={(date) => setEndTimestamp(date)} value={endTimestamp} />
             </FormControl>
           </Conditional>
+          <Conditional test={showBaseUriField}>
+            <Tooltip
+              backgroundColor="bg-blue-500"
+              className="ml-7"
+              label="Please toggle this on if the IPFS folder contains files with .json extensions."
+              placement="bottom"
+            >
+              <div className="mt-2 w-3/4 form-control">
+                <label className="justify-start cursor-pointer label">
+                  <span className="mr-4 font-bold">Metadata files with .json extensions?</span>
+                  <input
+                    checked={jsonExtensions}
+                    className={`toggle ${jsonExtensions ? `bg-stargaze` : `bg-gray-600`}`}
+                    onClick={() => setJsonExtensions(!jsonExtensions)}
+                    type="checkbox"
+                  />
+                </label>
+              </div>
+            </Tooltip>
+          </Conditional>
         </div>
         <div className="-mt-6">
           <div className="relative mb-2">

components/collections/actions/actions.ts

@@ -327,6 +327,7 @@ export interface DispatchExecuteArgs {
   tokenRecipients: AirdropAllocation[]
   collectionInfo: CollectionInfo | undefined
   baseUri: string
+  jsonExtensions: boolean
 }
 
 export const dispatchExecute = async (args: DispatchExecuteArgs) => {
@@ -387,7 +388,7 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
       return sg721Messages.updateTokenMetadata(args.tokenId.toString(), args.tokenUri)
     }
     case 'batch_update_token_metadata': {
-      return sg721Messages.batchUpdateTokenMetadata(args.tokenIds, args.baseUri)
+      return sg721Messages.batchUpdateTokenMetadata(args.tokenIds, args.baseUri, args.jsonExtensions)
     }
     case 'freeze_token_metadata': {
       return sg721Messages.freezeTokenMetadata()
@@ -494,7 +495,7 @@ export const previewExecutePayload = (args: DispatchExecuteArgs) => {
       return sg721Messages(sg721Contract)?.updateTokenMetadata(args.tokenId.toString(), args.tokenUri)
     }
     case 'batch_update_token_metadata': {
-      return sg721Messages(sg721Contract)?.batchUpdateTokenMetadata(args.tokenIds, args.baseUri)
+      return sg721Messages(sg721Contract)?.batchUpdateTokenMetadata(args.tokenIds, args.baseUri, args.jsonExtensions)
     }
     case 'freeze_token_metadata': {
       return sg721Messages(sg721Contract)?.freezeTokenMetadata()