fix: mint button api errors (#1544)

coinbase · Oct 30, 2024 · 79d846c · 79d846c
1 parent ed910fb
commit 79d846c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/playground/nextjs-app-router/lib/nft/buildMintTransaction.ts b/playground/nextjs-app-router/lib/nft/buildMintTransaction.ts
@@ -3,6 +3,11 @@ import type { Call } from '@/onchainkit/esm/transaction/types';
 import type { definitions } from '@reservoir0x/reservoir-sdk';
 import { ENVIRONMENT_VARIABLES } from '../constants';
 
+const ERROR_MAP = {
+  'Unable to mint requested quantity (max mints per wallet possibly exceeded)':
+    'Mint limit exceeded',
+} as Record<string, string>;
+
 async function getMintData({
   contractAddress,
   takerAddress,
@@ -33,14 +38,15 @@ async function getMintData({
     const data = await response.json();
 
     if (data.message) {
-      return Promise.reject(data.message);
+      const error = ERROR_MAP[data.message] ?? data.message;
+      return Promise.reject(error);
     }
 
     const validData = data as definitions['postExecuteMintV1Response'];
 
     const saleStep = validData.steps?.find((step) => step.id === 'sale');
     if (!saleStep) {
-      return Promise.reject('No sale step found');
+      return Promise.reject('No valid price found');
     }
 
     return saleStep.items.map((item) => ({

diff --git a/src/nft/components/mint/NFTMintButton.tsx b/src/nft/components/mint/NFTMintButton.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAccount, useChainId } from 'wagmi';
 import { Spinner } from '../../../internal/components/Spinner';
-import { cn } from '../../../styles/theme';
+import { cn, color, text } from '../../../styles/theme';
 import {
   Transaction,
   TransactionButton,
@@ -113,14 +113,10 @@ export function NFTMintButton({
   );
 
   const transactionButtonLabel = useMemo(() => {
-    if (isEligibleToMint === false) {
+    if (isEligibleToMint === false || mintError) {
       return 'Minting not available';
     }
 
-    if (mintError) {
-      return mintError;
-    }
-
     if (callData.length === 0) {
       return <Spinner />;
     }
@@ -155,12 +151,17 @@ export function NFTMintButton({
           errorOverride={errorOverride}
           disabled={disabled || transactionButtonLabel !== label}
         />
-        <TransactionSponsor />
+        {!mintError && <TransactionSponsor />}
         <TransactionStatus>
           <TransactionStatusLabel />
           <TransactionStatusAction />
         </TransactionStatus>
       </Transaction>
+      {mintError && (
+        <div className={cn(text.label2, color.foregroundMuted, 'pb-2')}>
+          {mintError}
+        </div>
+      )}
     </div>
   );
 }