feat: add negate component for ability to mint

packages/react/src/modules/finance/tiered-sales/components/TieredSalesIfWalletCannotMint.tsx

@@ -0,0 +1,36 @@
+import { Fragment, PropsWithChildren } from 'react';
+
+import { BareComponentProps } from '../../../../common';
+import { useTieredSalesContext } from '../providers/TieredSalesProvider';
+
+type Props = PropsWithChildren<
+  BareComponentProps & {
+    loadingMask?: React.ReactNode;
+    tierId?: number;
+  }
+>;
+
+export const TieredSalesIfWalletCannotMint = ({
+  as,
+  loadingMask = '...',
+  tierId,
+  children,
+  ...attributes
+}: Props) => {
+  const {
+    data: { canMint },
+  } = useTieredSalesContext();
+
+  const Component =
+    as || (attributes.className || attributes.style ? 'span' : Fragment);
+
+  return (
+    <Component {...attributes}>
+      {loadingMask && canMint === undefined ? (
+        <>{loadingMask}</>
+      ) : !canMint ? (
+        <>{children}</>
+      ) : null}
+    </Component>
+  );
+};

packages/react/src/modules/finance/tiered-sales/components/index.ts

@@ -4,6 +4,7 @@ export * from './TieredSalesEligibleAmount';
 export * from './TieredSalesIfNotSoldOut';
 export * from './TieredSalesIfSoldOut';
 export * from './TieredSalesIfWalletCanMint';
+export * from './TieredSalesIfWalletCannotMint';
 export * from './TieredSalesMaxAllocation';
 export * from './TieredSalesMaxSupply';
 export * from './TieredSalesMintButton';