Eclipse-Laboratories-Inc · frostfrog · Jul 4, 2025
diff --git a/app/components/Deposit/DepositContent.tsx b/app/components/Deposit/DepositContent.tsx
@@ -55,6 +55,7 @@ export interface DepositContentProps {
   setAmountEther: React.Dispatch<
     React.SetStateAction<number | undefined | string>
   >;
+  isMaintenanceMode?: boolean;
 }
 
 enum Action {
@@ -66,6 +67,7 @@ export const DepositContent: React.FC<DepositContentProps> = ({
   modalStuff,
   amountEther,
   setAmountEther,
+  isMaintenanceMode = false,
 }) => {
   const [walletClient, setWalletClient] = useState<WalletClient<
     Transport,
@@ -253,6 +255,12 @@ export const DepositContent: React.FC<DepositContentProps> = ({
     if (!evmWallet || !solWallet) {
       return "submit-button disabled";
     }
+
+    // Bridge maintenance - only disabled when in maintenance mode and wallets are connected
+    if (isMaintenanceMode) {
+      return "submit-button disabled";
+    }
+
     if (!amountEther) {
       return "submit-button disabled";
     }
@@ -276,6 +284,12 @@ export const DepositContent: React.FC<DepositContentProps> = ({
     if (!evmWallet && !solWallet) {
       return "Connect Wallets";
     }
+
+    // Bridge maintenance - only show disabled message when in maintenance mode and wallets are connected
+    if (isMaintenanceMode) {
+      return `${action} (Disabled - Maintenance)`;
+    }
+
     if (!amountEther) {
       return action;
     }
@@ -296,7 +310,7 @@ export const DepositContent: React.FC<DepositContentProps> = ({
       imageSrc="eth.png"
       direction={action === Action.Deposit ? "From" : "To"}
       chainName={isMainnet ? "Ethereum Mainnet" : "Ethereum Sepolia"}
-      onClickEvent={() => {
+            onClickEvent={() => {
         if (evmWallet) {
           handleUnlinkWallet(evmWallet.id);
           setIsEvmDisconnected(!isEvmDisconnected);
@@ -316,7 +330,7 @@ export const DepositContent: React.FC<DepositContentProps> = ({
       imageSrc={isMainnet ? "eclipse.png" : "eclipse-testnet.png"}
       direction={action === Action.Deposit ? "To" : "From"}
       chainName={isMainnet ? "Eclipse Mainnet" : "Eclipse Testnet"}
-      onClickEvent={() => {
+            onClickEvent={() => {
         if (solWallet) {
           handleUnlinkWallet(solWallet.id);
           setIsSolDisconnected(!isSolDisconnected);
@@ -345,9 +359,13 @@ export const DepositContent: React.FC<DepositContentProps> = ({
       {!isModalOpen && (
         <div>
           <div className="network-section">
-            <div
-              className="arrow-container cursor-pointer"
-              onClick={switchAction}
+                        <div
+              className={isMaintenanceMode && evmWallet && solWallet ? "arrow-container cursor-not-allowed" : "arrow-container cursor-pointer"}
+              onClick={
+                isMaintenanceMode && evmWallet && solWallet
+                  ? () => {} // Disabled during maintenance only when wallets are connected
+                  : switchAction
+              }
             >
               <TransferArrow />
             </div>
@@ -381,8 +399,11 @@ export const DepositContent: React.FC<DepositContentProps> = ({
             <button
               className={`w-full deposit-button p-4 ${determineButtonClass()}`}
               onClick={
-                action === Action.Deposit ? submitDeposit : submitWithdraw
+                isMaintenanceMode
+                  ? () => {} // Disabled during maintenance
+                  : (action === Action.Deposit ? submitDeposit : submitWithdraw)
               }
+              disabled={isMaintenanceMode}
             >
               {determineButtonText()}
             </button>

diff --git a/app/components/Deposit/NetworkBox.tsx b/app/components/Deposit/NetworkBox.tsx
@@ -26,6 +26,7 @@ export interface NetworkBoxProps {
   >;
   gasPriceWei: bigint | undefined;
   maxPriorityFeePerGasWei: bigint | undefined;
+  isMaintenanceMode?: boolean;
 }
 
 function roundUpToFiveDecimals(value: number): number {
@@ -64,6 +65,7 @@ export const NetworkBox: React.FC<NetworkBoxProps> = ({
   setAmountEther,
   gasPriceWei,
   maxPriorityFeePerGasWei,
+  isMaintenanceMode = false,
 }) => {
   const { userWallets, evmWallet, solWallet } = useWallets();
   const [gasPrice, ethPrice, blockNumber] = useContext(EthereumDataContext) ?? [

diff --git a/app/components/Deposit/index.tsx b/app/components/Deposit/index.tsx
@@ -1,3 +1,4 @@
+
 "use client";
 
 import "./styles.css";
@@ -113,11 +114,27 @@ const Deposit: React.FC<DepositProps> = ({ amountEther, setAmountEther }) => {
             )}
           </div>
           {activeTab === Tabs.Deposit && (
-            <DepositContent
-              modalStuff={[isModalOpen, setIsModalOpen]}
-              amountEther={amountEther}
-              setAmountEther={setAmountEther}
-            />
+            <>
+              {/* Maintenance Banner */}
+              <div className="flex w-full items-center justify-center
+                py-[12px] px-[16px]
+                rounded-[10px]
+                bg-[#ff6b6b0d] gap-[12px] text-[14px] font-medium
+                text-[#ff6b6b] mb-[20px]
+                border-[1px] border-[#ff6b6b1a]">
+                <span className="w-[16px] h-[16px] border-[2px] rounded-[50%] border-[#ff6b6b] flex items-center justify-center">
+                  <span className="w-[6px] h-[6px] rounded-[50%] bg-[#ff6b6b]"></span>
+                </span>
+                <span>Bridge is under maintenance, will be back soon</span>
+              </div>
+
+              <DepositContent
+                modalStuff={[isModalOpen, setIsModalOpen]}
+                amountEther={amountEther}
+                setAmountEther={setAmountEther}
+                isMaintenanceMode={true}
+              />
+            </>
           )}
           {activeTab === Tabs.Relay && <RelaySwapWidget />}
           {activeTab === Tabs.Activity && (

diff --git a/app/components/WithdrawDetails/index.tsx b/app/components/WithdrawDetails/index.tsx
@@ -465,13 +465,13 @@ export const WithdrawDetails: React.FC<TransactionDetailsProps> = ({
       {!txHash && (
         <div
           className="
-            flex w-full items-center justify-center 
+            flex w-full items-center justify-center
             py-[4px] px-[8px] h-[42px]
             rounded-[10px]
             bg-[#a1fea00d] gap-[12px] text-[16px] font-medium
             text-[#a1fea099] mt-[30px]
             border-[1px] border-[#a1fea01a]
-            h-[66px] text-left 
+            h-[66px] text-left
             cursor-pointer mb-[10px]
       "
           onClick={() => setCheckbox(!checkbox)}
@@ -491,8 +491,8 @@ export const WithdrawDetails: React.FC<TransactionDetailsProps> = ({
       {waitingPeriodStatus !== WaitingPeriodState.Ready && (
         <button
           onClick={txHash ? closeModal : handleInitiate}
-          className={`initiate-button flex items-center justify-center gap-[8px] 
-            ${(txHash || initiateStatus === InitiateTxStates.InWallet) && "!text-[#ffffff4d] !bg-[#ffffff0d] cursor-pointer"} 
+          className={`initiate-button flex items-center justify-center gap-[8px]
+            ${(txHash || initiateStatus === InitiateTxStates.InWallet) && "!text-[#ffffff4d] !bg-[#ffffff0d] cursor-pointer"}
             ${!checkbox && "!text-[#ffffff4d] cursor-not-allowed !bg-[#ffffff0d]"}`}
         >
           {initiateStatus === InitiateTxStates.InWallet && (
@@ -502,16 +502,29 @@ export const WithdrawDetails: React.FC<TransactionDetailsProps> = ({
         </button>
       )}
       {waitingPeriodStatus === WaitingPeriodState.Ready && (
-        <button
-          className={`initiate-button flex items-center justify-center gap-[8px] !mt-[25px] 
-            ${buttonText != "Claim Now" && "!text-[#ffffff4d] cursor-not-allowed !bg-[#ffffff0d]"}`}
-          onClick={isClaimFlowOpen ? () => {} : submitClaim}
-        >
-          {buttonText != "Claim Now" && (
-            <Loading loadingClassName="" style={{}} />
-          )}
-          {buttonText}
-        </button>
+        <>
+          {/* Maintenance Banner */}
+          <div className="flex w-full items-center justify-center
+            py-[12px] px-[16px]
+            rounded-[10px]
+            bg-[#ff6b6b0d] gap-[12px] text-[14px] font-medium
+            text-[#ff6b6b] mt-[25px] mb-[15px]
+            border-[1px] border-[#ff6b6b1a]">
+            <span className="w-[16px] h-[16px] border-[2px] rounded-[50%] border-[#ff6b6b] flex items-center justify-center">
+              <span className="w-[6px] h-[6px] rounded-[50%] bg-[#271212]"></span>
+            </span>
+            <span>Bridge is under maintenance, will be back soon</span>
+          </div>
+
+          {/* Disabled Claim Button */}
+          <button
+            className="initiate-button flex items-center justify-center gap-[8px] !mt-[0px]
+              !text-[#ffffff4d] cursor-not-allowed !bg-[#ffffff0d]"
+            disabled={true}
+          >
+            Claim Now (Disabled)
+          </button>
+        </>
       )}
     </div>
   );