SHIELDING_THRESHOLD UI

Author: irubido

packages/web-wallet/src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 type ButtonVariant = 'primary' | 'secondary';
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   onClick: () => void;
   label: string;
   classNames?: string;
@@ -17,10 +17,12 @@ function Button({
   classNames = '',
   variant = 'primary',
   icon,
+  ...rest
 }: ButtonProps) {
   const buttonClasses = cn(
     'min-w-[228px] px-6 py-3 rounded-3xl text-base font-medium leading-normal',
-    'cursor-pointer transition-all hover:transition-all',
+    'transition-all hover:transition-all',
+    { 'cursor-not-allowed': rest.disabled, 'cursor-pointer': !rest.disabled },
     {
       'bg-[#0e0e0e] text-white border hover:bg-buttonBlackGradientHover':
         variant === 'primary',
@@ -31,7 +33,7 @@ function Button({
   );
 
   return (
-    <button onClick={onClick} className={buttonClasses}>
+    <button onClick={onClick} className={buttonClasses} {...rest}>
       <div className="flex items-center justify-center">
         {icon && <span className="mr-2 flex items-center">{icon}</span>}
         <span>{label}</span>

packages/web-wallet/src/pages/ShieldBalance/ShieldBalance.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ZcashYellowPNG } from '../../assets';
 import PageHeading from '../../components/PageHeading/PageHeading';
 import useBalance from '../../hooks/useBalance';
@@ -45,6 +45,10 @@ export function ShieldBalance(): React.JSX.Element {
     handlePcztShieldTransaction(1, addresses.unifiedAddress, unshieldedBalance.toString());
   }
 
+  const isMinimalShieldAmount = useMemo(()=>{
+    return unshieldedBalance > 100000;
+  },[unshieldedBalance])
+
   return (
     <div className="flex flex-col w-full">
       <PageHeading title="Shield Balance">
@@ -88,11 +92,17 @@ export function ShieldBalance(): React.JSX.Element {
               </div>
             </div>
             <div className="self-stretch pt-6 flex-col justify-center items-center gap-3 flex">
-              <div className="justify-start items-start inline-flex">
+              <div className="flex flex-col items-center justify-center">
                 <Button
                   onClick={handleShieldBalance}
                   label={'Shield balance'}
+                  disabled={!isMinimalShieldAmount}
                 />
+                {!isMinimalShieldAmount && (
+                  <div className="text-red-500 text-sm mt-2">
+                    The minimum shielding balance required is 0.001 ZEC.
+                  </div>
+                )}
               </div>
             </div>
           </div>