Fix if conditioned before hooks

src/components/Checkbox.tsx

@@ -24,25 +24,15 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   onCheckedChange,
   id,
   label,
-  disabled,
+  disabled
 }) => (
   <Styled.Container>
-    <Styled.Root
+    <Styled.Root className={className} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} id={id}>
-      className={className}
-      checked={checked}
-      disabled={disabled}
-      onCheckedChange={onCheckedChange}
-      id={id}
-    >
       <Styled.Indicator>
         <CheckIcon />
       </Styled.Indicator>
     </Styled.Root>
-    {label && (
+    {label && <Styled.label disabled={disabled} htmlFor={id}>{label}</Styled.label>}
-      <Styled.Label disabled={disabled} htmlFor={id}>
-        {label}
-      </Styled.Label>
-    )}
   </Styled.Container>
 );
 
@@ -52,6 +42,10 @@ Styled.Container = styled.div`
   ${layoutMixins.row}
   gap: 1ch;
   font: var(--font-small-book);
+
+  label {
+    cursor: pointer;
+  }
 `;
 
 Styled.Root = styled(Root)`
@@ -83,14 +77,10 @@ Styled.Indicator = styled(Indicator)`
   color: var(--color-text-2);
 `;
 
-Styled.Label = styled.label<{ disabled?: boolean }>`
+Styled.label = styled.div<{ disabled: boolean; }>`
-  cursor: pointer;
   color: var(--color-text-2);
 
-  ${({ disabled }) =>
+  ${({disabled}) => disabled && css`
-    disabled &&
-    css`
-      cursor: not-allowed;
     color: var(--color-text-0);
   `}
 `;

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -55,6 +55,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const stringGetter = useStringGetter();
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
   const { selectedNetwork } = useSelectedNetwork();
 
   const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
@@ -373,8 +374,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     return <LoadingSpace id="DepositForm" />;
   }
 
-  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
-
   return (
     <Styled.Form onSubmit={onSubmit}>
       <SourceSelectMenu