ini refactor index (#743)

src/components/ClaimTokensPopup/ClaimTokensPopup.tsx

@@ -3,12 +3,14 @@ import { Button } from '@massalabs/react-ui-kit';
 import { Link } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 import Intl from '@/i18n/i18n';
+import { Status, useGlobalStatusesStore } from '@/store/globalStatusesStore';
 import { useBridgeModeStore } from '@/store/store';
 import { useClaimableOperations } from '@/utils/lambdaApi';
 
 export function ClaimTokensPopup() {
   const { chain: evmConnectedChain } = useAccount();
   const { currentMode } = useBridgeModeStore();
+  const { box } = useGlobalStatusesStore();
 
   const [renderButton, setRenderButton] = useState(false);
 
@@ -18,6 +20,10 @@ export function ClaimTokensPopup() {
     setRenderButton(!!claimableOperations.length);
   }, [claimableOperations, currentMode]);
 
+  const isOperationPending = box !== Status.None;
+
+  if (isOperationPending) return null;
+
   function ClaimButton() {
     const evmChainName = evmConnectedChain?.name;
     if (!evmChainName) return null;

src/custom/bridge/useBurn.ts

@@ -96,6 +96,7 @@ export function useBurn() {
     }
   }, [
     amount,
+    minimalFees,
     evmAddress,
     massaClient,
     selectedToken,

src/pages/IndexPage/IndexPage.tsx

@@ -1,48 +1,12 @@
 import { BridgeRedeemLayout } from './Layouts/BridgeRedeemLayout/BridgeRedeemLayout';
 
 import { ClaimTokensPopup } from '@/components/ClaimTokensPopup/ClaimTokensPopup';
-import { BRIDGE_OFF, REDEEM_OFF } from '@/const/env/maintenance';
-import {
-  ChainContext,
-  useEvmChainValidation,
-  useMassaNetworkValidation,
-} from '@/custom/bridge/useNetworkValidation';
-import { Status } from '@/store/globalStatusesStore';
-import {
-  useAccountStore,
-  useGlobalStatusesStore,
-  useOperationStore,
-} from '@/store/store';
 
 export function IndexPage() {
-  const { box } = useGlobalStatusesStore();
-  const { connectedAccount, isFetching } = useAccountStore();
-
-  const { isMassaToEvm, inputAmount } = useOperationStore();
-
-  const massaToEvm = isMassaToEvm();
-  const isValidEvmNetwork = useEvmChainValidation(ChainContext.BRIDGE);
-  const isValidMassaNetwork = useMassaNetworkValidation();
-
-  const isOperationPending = box !== Status.None;
-  const blurClass = isOperationPending ? 'blur-md' : '';
-
-  const isButtonDisabled =
-    isFetching ||
-    !connectedAccount ||
-    !isValidEvmNetwork ||
-    !inputAmount ||
-    !isValidMassaNetwork ||
-    (BRIDGE_OFF && !massaToEvm) ||
-    (REDEEM_OFF && massaToEvm);
-
   return (
     <div className="flex flex-col gap-36 items-center justify-center w-full h-full">
-      <BridgeRedeemLayout
-        isBlurred={blurClass}
-        isButtonDisabled={isButtonDisabled}
-      />
-      {!isOperationPending && <ClaimTokensPopup />}
+      <BridgeRedeemLayout />
+      <ClaimTokensPopup />
     </div>
   );
 }

src/pages/IndexPage/Layouts/BridgeRedeemLayout/BridgeRedeemLayout.tsx

@@ -3,38 +3,42 @@ import { Button } from '@massalabs/react-ui-kit';
 import { FiArrowRight } from 'react-icons/fi';
 import { OperationLayout } from './OperationLayout';
 import { ConfirmationLayout } from '../ConfirmationLayout/ConfirmationLayout';
+import { BRIDGE_OFF, REDEEM_OFF } from '@/const/env/maintenance';
 import { validate } from '@/custom/bridge/handlers/validateTransaction';
 import useEvmToken from '@/custom/bridge/useEvmToken';
+import {
+  ChainContext,
+  useEvmChainValidation,
+  useMassaNetworkValidation,
+} from '@/custom/bridge/useNetworkValidation';
 import { useSubmitBridge } from '@/custom/bridge/useSubmitBridge';
 import { useSubmitRedeem } from '@/custom/bridge/useSubmitRedeem';
 import Intl from '@/i18n/i18n';
 import { PendingOperationLayout } from '@/pages';
 import { Status } from '@/store/globalStatusesStore';
-import { useGlobalStatusesStore, useOperationStore } from '@/store/store';
-
-interface BridgeRedeemProps {
-  isBlurred: string;
-  isButtonDisabled: boolean;
-}
+import {
+  useAccountStore,
+  useGlobalStatusesStore,
+  useOperationStore,
+} from '@/store/store';
 
 enum StepsEnum {
   PENDING = 'pending',
   AWAITING_CONFIRMATION = 'confirmation',
 }
 
-export function BridgeRedeemLayout(props: BridgeRedeemProps) {
-  const { isBlurred, isButtonDisabled } = props;
-
+export function BridgeRedeemLayout() {
   const { tokenBalance } = useEvmToken();
   const { box } = useGlobalStatusesStore();
-  const { isMassaToEvm } = useOperationStore();
-
-  const massaToEvm = isMassaToEvm();
-
+  const { isMassaToEvm, inputAmount } = useOperationStore();
   const { handleSubmitBridge } = useSubmitBridge();
   const { handleSubmitRedeem } = useSubmitRedeem();
-
+  const { connectedAccount, isFetching } = useAccountStore();
   const [step, setStep] = useState<StepsEnum>(StepsEnum.PENDING);
+  const isValidEvmNetwork = useEvmChainValidation(ChainContext.BRIDGE);
+  const isValidMassaNetwork = useMassaNetworkValidation();
+
+  const massaToEvm = isMassaToEvm();
 
   function prevPage() {
     setStep(StepsEnum.PENDING);
@@ -59,6 +63,16 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
   }
 
   const isOperationPending = box !== Status.None;
+  const blurClass = isOperationPending ? 'blur-md' : '';
+
+  const isButtonDisabled =
+    isFetching ||
+    !connectedAccount ||
+    !isValidEvmNetwork ||
+    !inputAmount ||
+    !isValidMassaNetwork ||
+    (BRIDGE_OFF && !massaToEvm) ||
+    (REDEEM_OFF && massaToEvm);
 
   if (isOperationPending) return <PendingOperationLayout />;
 
@@ -67,7 +81,7 @@ export function BridgeRedeemLayout(props: BridgeRedeemProps) {
     <>
       <div
         className={`flex flex-col gap-2 p-10 max-w-3xl w-full border border-tertiary rounded-2xl
-            bg-secondary/50 text-f-primary mb-5 ${isBlurred}`}
+            bg-secondary/50 text-f-primary mb-5 ${blurClass}`}
       >
         {OperationSteps[step]}
         <div className="mb-5">