fix: disable sending bridge transactions when Gelato API is down (#1194)

* fix: disable sending bridge transactions when Gelato API is down

* fix: refactor

* fix: added fetchIsGelatoApiHealth function

src/components/bridge/ethereum/L1.vue

@@ -15,7 +15,7 @@
           :set-right-ui="setRightUi"
           :bridge-amt="String(bridgeAmt)"
           :err-msg="errMsg"
-          :is-disabled-bridge="isDisabledBridge"
+          :is-disabled-bridge="isDisabledBridge || !isGelatoApiConnected"
           :from-bridge-balance="fromBridgeBalance"
           :to-bridge-balance="toBridgeBalance"
           :from-chain-name="fromChainName"
@@ -111,6 +111,7 @@ export default defineComponent({
       l1Network,
       l2Network,
       isActionRequired,
+      isGelatoApiConnected,
       fetchUserHistory,
       handleClaim,
     } = useL1History();
@@ -224,6 +225,7 @@ export default defineComponent({
       isApproved,
       isApproving,
       isApproveMaxAmount,
+      isGelatoApiConnected,
       inputImportTokenHandler,
       cancelHighlight,
       handleSetToken,

src/hooks/bridge/useL1History.ts

@@ -9,6 +9,7 @@ import {
   ZkChainId,
   checkIsL1,
   fetchAccountHistory,
+  fetchIsGelatoApiHealth,
   getChainIdFromNetId,
 } from 'src/modules/zk-evm-bridge';
 import { container } from 'src/v2/common';
@@ -19,8 +20,14 @@ import { useEthProvider } from '../custom-signature/useEthProvider';
 import { astarNativeTokenErcAddr } from 'src/modules/xcm';
 import { AbiItem } from 'web3-utils';
 import ERC20_ABI from 'src/config/abi/ERC20.json';
+import { useStore } from 'src/store';
+import { useI18n } from 'vue-i18n';
 
 export const useL1History = () => {
+  const { t } = useI18n();
+  const store = useStore();
+  const isGelatoApiConnected = ref<boolean>(false);
+
   const l1Network = computed<string>(() => {
     const networkIdxStore = String(localStorage.getItem(LOCAL_STORAGE.NETWORK_IDX));
     return networkIdxStore === String(endpointKey.ASTAR_ZKEVM)
@@ -72,6 +79,12 @@ export const useL1History = () => {
     try {
       isLoadingHistories.value = true;
       const data = await fetchAccountHistory(currentAccount.value);
+      const isHealth = await fetchIsGelatoApiHealth();
+      if (!isHealth) {
+        throw Error('The API is currently in maintenance mode.');
+      }
+      isGelatoApiConnected.value = true;
+
       const l1Web3 = buildWeb3Instance(EthBridgeChainId[l1Network.value as EthBridgeNetworkName]);
       const l2Web3 = buildWeb3Instance(EthBridgeChainId[l2Network.value as EthBridgeNetworkName]);
       let numberInProgress = 0;
@@ -121,6 +134,16 @@ export const useL1History = () => {
       isFetchAutomatically.value = numberInProgress > 0;
       histories.value = formattedResult.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
     } catch (error) {
+      // Memo: disable sending bridge transactions from UI
+      store.dispatch(
+        'general/showAlertMsg',
+        {
+          msg: t('bridge.gelatoApiError'),
+          alertType: 'error',
+        },
+        { root: true }
+      );
+      isGelatoApiConnected.value = false;
       console.error(error);
       isFetchAutomatically.value = false;
     } finally {
@@ -146,6 +169,7 @@ export const useL1History = () => {
     histories,
     isLoadingHistories,
     isActionRequired,
+    isGelatoApiConnected,
     handleClaim,
     fetchUserHistory,
   };

src/i18n/en-US/index.ts

@@ -991,6 +991,7 @@ export default {
     warning32blocks: 'It could take around 10~20mins or more to finalize',
     warning2steps:
       'Bridging to L1 (Ethereum) involves 2 steps, and it requires users to make a claim on the L1 network (available in Recent History)',
+    gelatoApiError: 'Bridge UI is not available, please try again later',
     tokenInfo: {
       invalidTokenAddress: 'Invalid token address',
       tokenAddress: '{network} token address',

src/modules/zk-evm-bridge/l1-bridge/utils.ts

@@ -65,6 +65,13 @@ const getApiUrl = (): string => {
   return zkEvmApi[network];
 };
 
+export const fetchIsGelatoApiHealth = async (): Promise<boolean> => {
+  const base = getApiUrl();
+  const url = `${base}/healthz`;
+  const result = await axios.get<{ status: string }>(url);
+  return result && result.data.status === 'SERVING';
+};
+
 export const fetchAccountHistory = async (address: string): Promise<BridgeHistory[]> => {
   const base = getApiUrl();
   const limit = 15;