fix: only show one loading at a time

0xflair · Dec 27, 2022 · ed32154 · ed32154
1 parent 88541a1
commit ed32154
Showing 1 changed file with 23 additions and 27 deletions.
diff --git a/packages/react/src/modules/finance/tiered-sales/components/TieredSalesMintStatusBar.tsx b/packages/react/src/modules/finance/tiered-sales/components/TieredSalesMintStatusBar.tsx
@@ -46,39 +46,35 @@ export const TieredSalesMintStatusBar = ({ className }: Props) => {
         )
       ) : isConnected ? (
         <>
-          {mintLoading && (
+          {mintLoading ? (
             <div className="flex items-center gap-2">
               <Spinner />{' '}
               {mintReceipt || mintResponse ? 'Minting...' : 'In progress...'}
             </div>
-          )}
+          ) : allowanceLoading ? (
+            <div className="flex items-center gap-2">
+              <Spinner /> Checking allowance...
+            </div>
+          ) : approveLoading ? (
+            <div className="flex items-center gap-2">
+              <Spinner />
+              {mintReceipt || mintResponse
+                ? 'Approving...'
+                : 'Approve in your wallet...'}
+            </div>
+          ) : mintReceipt || mintResponse ? (
+            <TransactionLink
+              txReceipt={mintReceipt}
+              txResponse={mintResponse}
+            />
+          ) : approveReceipt || approveResponse ? (
+            <TransactionLink
+              txReceipt={approveReceipt}
+              txResponse={approveResponse}
+            />
+          ) : null}
 
           <IfChain connectedTo={chainId}>
-            {allowanceLoading && (
-              <div className="flex items-center gap-2">
-                <Spinner /> Checking allowance...
-              </div>
-            )}
-            {approveLoading && (
-              <div className="flex items-center gap-2">
-                <Spinner />
-                {mintReceipt || mintResponse
-                  ? 'Approving...'
-                  : 'Approve in your wallet...'}
-              </div>
-            )}
-            {mintReceipt || mintResponse ? (
-              <TransactionLink
-                txReceipt={mintReceipt}
-                txResponse={mintResponse}
-              />
-            ) : approveReceipt || approveResponse ? (
-              <TransactionLink
-                txReceipt={approveReceipt}
-                txResponse={approveResponse}
-              />
-            ) : null}
-
             {!mintLoading && mintError && (
               <Errors title="Cannot mint" error={mintError} />
             )}