feat(evm): add gateway alert for 0 balance ongoing tx

apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CurrencyAmount, ERC20Token } from '@gobob/currency';
-import { Avatar, Flex, Input, Item, P, Select, Skeleton } from '@gobob/ui';
+import { Alert, Avatar, Flex, Input, Item, P, Select, Skeleton, Link } from '@gobob/ui';
 import { t, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { chain, mergeProps } from '@react-aria/utils';
@@ -10,10 +10,10 @@ import { useMemo } from 'react';
 import { useAccount } from 'wagmi';
 
 import { BtcTokenInput, GatewayGasSwitch, GatewayTransactionDetails } from '../../../components';
-import { useGateway, useGatewayForm } from '../../../hooks';
+import { useGateway, useGatewayForm, useGetGatewayTransactions } from '../../../hooks';
 
 import { AuthButton } from '@/connect-ui';
-import { isProd } from '@/constants';
+import { isProd, mempoolUrl } from '@/constants';
 import { TokenData } from '@/hooks';
 import { BRIDGE_RECIPIENT, BridgeFormValues } from '@/lib/form/bridge';
 import { GatewayTransactionType, InitGatewayTransaction } from '@/types';
@@ -39,6 +39,12 @@ const BtcBridgeForm = ({
 }: BtcBridgeFormProps): JSX.Element => {
   const { i18n } = useLingui();
 
+  const { data: gatewayTransactions } = useGetGatewayTransactions();
+
+  const latestPendingTransaction = gatewayTransactions
+    ?.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    ?.find((transaction) => transaction.status === 'btc-confirmation');
+
   const { address: evmAddress } = useAccount();
 
   const defaultToken = availableTokens[0];
@@ -93,12 +99,33 @@ const BtcBridgeForm = ({
     [btcToken]
   );
 
+  const showBalanceAlert = !!latestPendingTransaction && !gateway.query.balance.isPending;
+
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     <Flex direction='column' elementType='form' gap='xl' marginTop='md' onSubmit={form.handleSubmit as any}>
+      {showBalanceAlert && (
+        <Alert status='info' title={<Trans>Heads up!</Trans>}>
+          <P size='s'>
+            <Trans>
+              If your BTC balance shows smaller value or 0, it might be due to a transaction in progress, such as this
+              one:{' '}
+              <Link
+                external
+                href={`${mempoolUrl}/tx/${latestPendingTransaction.btcTxId}`}
+                size='inherit'
+                underlined='always'
+              >
+                View Transaction
+              </Link>
+              . Please wait for it to confirm before checking again.
+            </Trans>
+          </P>
+        </Alert>
+      )}
       <BtcTokenInput
         amount={gateway.amount}
-        balance={gateway.query.balance}
+        balance={gateway.query.balance.data}
         {...mergeProps(fields.amount, {
           onValueChange: gateway.setAmount
         })}

apps/evm/src/app/[lang]/(bridge)/hooks/tests/useGatewayForm.test.ts

@@ -38,7 +38,7 @@ vi.mock(import('@gobob/sats-wagmi'), async (importOriginal) => {
 describe('useGatewayForm', () => {
   const mockQuery = {
     minAmount: { toExact: () => '0.01' },
-    balance: { toExact: () => '1.0' },
+    balance: { data: { toExact: () => '1.0' } },
     fee: {
       estimate: { data: {} },
       rates: { data: {} }

apps/evm/src/app/[lang]/(bridge)/hooks/useGateway.ts

@@ -108,7 +108,7 @@ type UseGatewayQueryDataReturnType = {
   liquidity: UseQueryResult<UseLiquidityDataReturnType | undefined>;
   quote: UseQueryResult<UseQuoteDataReturnType | undefined>;
   minAmount: CurrencyAmount<Bitcoin>;
-  balance: CurrencyAmount<Bitcoin>;
+  balance: { data: CurrencyAmount<Bitcoin>; isPending: boolean };
 };
 
 type StakeParams = {
@@ -171,7 +171,7 @@ const useGateway = ({
   const { address: evmAddress } = useAccount();
 
   const { address: btcAddress, connector: satsConnector, addressType: btcAddressType } = useSatsAccount();
-  const { data: satsBalance } = useSatsBalance();
+  const { data: satsBalance, isPending: isSatsBalancePending } = useSatsBalance();
 
   const [isTopUpEnabled, setTopUpEnabled] = useState(true);
   const [selectedFee, setSelectedFee] = useState<GatewayTransactionFee>({ speed: GatewayTransactionSpeed.SLOW });
@@ -227,11 +227,13 @@ const useGateway = ({
   const feeRate =
     selectedFee.speed === 'custom' ? selectedFee.networkRate : feeRatesQueryResult.data?.[selectedFee.speed];
 
+  const feeEstimateQueryEnabled = Boolean(satsBalance && satsBalance.total > 0n && evmAddress);
+
   const feeEstimateQueryResult = useSatsFeeEstimate({
     opReturnData: evmAddress,
     feeRate: feeRate,
     query: {
-      enabled: Boolean(satsBalance && satsBalance.total > 0n && evmAddress),
+      enabled: feeEstimateQueryEnabled,
       select: (data) => CurrencyAmount.fromRawAmount(BITCOIN, data.amount)
     }
   });
@@ -413,7 +415,13 @@ const useGateway = ({
       liquidity: liquidityQueryResult,
       quote: quoteQueryResult,
       minAmount,
-      balance
+      balance: {
+        data: balance,
+        isPending:
+          isSatsBalancePending ||
+          liquidityQueryResult.isPending ||
+          (feeEstimateQueryEnabled ? feeEstimateQueryResult.isPending : false)
+      }
     },
     type: params.type,
     mutation,

apps/evm/src/app/[lang]/(bridge)/hooks/useGatewayForm.ts

@@ -44,7 +44,7 @@ const useGatewayForm = ({ query, defaultAsset, onSubmit }: UseGatewayFormProps)
   const params: BridgeFormValidationParams = {
     [BRIDGE_AMOUNT]: {
       minAmount: new Big(query.minAmount.toExact()),
-      maxAmount: new Big(query.balance.toExact())
+      maxAmount: new Big(query.balance.data.toExact())
     },
     [BRIDGE_RECIPIENT]: !!isSmartAccount,
     [BRIDGE_BTC_WALLET]: btcAddress,

apps/evm/src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx

@@ -80,7 +80,7 @@ const BtcStakeForm = ({ strategy, stakingInfo, onStart, onSuccess, onError }: Bt
     <Flex direction='column' elementType='form' gap='xl' marginTop='md' onSubmit={form.handleSubmit as any}>
       <BtcTokenInput
         amount={gateway.amount}
-        balance={gateway.query.balance}
+        balance={gateway.query.balance.data}
         {...mergeProps(fields.amount, {
           onValueChange: gateway.setAmount
         })}

apps/evm/src/locales/en.po

@@ -336,7 +336,7 @@ msgid "Bridge"
 msgstr "Bridge"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:456
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:143
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:170
 msgid "Bridge Asset"
 msgstr "Bridge Asset"
 
@@ -618,7 +618,7 @@ msgstr "enable ETH top-up for transaction fees on BOB network"
 #~ msgstr "Enter Address"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:482
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:158
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:95
 msgid "Enter destination address"
 msgstr "Enter destination address"
@@ -660,7 +660,7 @@ msgstr "Failed to connect to {0}"
 #~ msgid "Failed to finalize."
 #~ msgstr "Failed to finalize."
 
-#: src/app/[lang]/(bridge)/hooks/useGateway.ts:241
+#: src/app/[lang]/(bridge)/hooks/useGateway.ts:243
 msgid "Failed to get estimated fee"
 msgstr "Failed to get estimated fee"
 
@@ -805,6 +805,10 @@ msgstr "Harvest {pointsMissing} more Spice to play"
 msgid "Harvest Spice by depositing into BOB apps, voting, and solving quests. Keep an eye out for special events."
 msgstr "Harvest Spice by depositing into BOB apps, voting, and solving quests. Keep an eye out for special events."
 
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:108
+msgid "Heads up!"
+msgstr "Heads up!"
+
 #: src/app/[lang]/fusion/components/UserInfo/UserReferralModal.tsx:57
 msgid "Here are your active referrals and the Spice they're currently earning for you. The more they earn, the more you benefit!"
 msgstr "Here are your active referrals and the Spice they're currently earning for you. The more they earn, the more you benefit!"
@@ -841,6 +845,26 @@ msgstr "Hybrid L2"
 msgid "If you already own BTC LSTs on other chains, you can bridge them over to BOB and start harvesting Spice."
 msgstr "If you already own BTC LSTs on other chains, you can bridge them over to BOB and start harvesting Spice."
 
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:109
+#~ msgid "If your BTC balance here shows as 0 or is very different from your wallet balance, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr "If your BTC balance here shows as 0 or is very different from your wallet balance, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:111
+#~ msgid "If your BTC balance shows as 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr "If your BTC balance shows as 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+#~ msgid "If your BTC balance shows smaller number or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr "If your BTC balance shows smaller number or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+#~ msgid "If your BTC balance shows smaller number, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr "If your BTC balance shows smaller number, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+msgid "If your BTC balance shows smaller value or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+msgstr "If your BTC balance shows smaller value or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+
 #: src/app/[lang]/(bridge)/stake/components/StrategyDetailsModal/StrategyDetailsModal.tsx:38
 #~ msgid "Incentives"
 #~ msgstr "Incentives"
@@ -1192,7 +1216,7 @@ msgstr "Points"
 msgid "POWERED BY BTC & ETH"
 msgstr "POWERED BY BTC & ETH"
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:143
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:170
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:112
 msgid "Preparing..."
 msgstr "Preparing..."
@@ -1244,7 +1268,7 @@ msgstr "Read more here"
 msgid "Read the official Fusion Guide on the new BOB Blog and start harvesting Spice now."
 msgstr "Read the official Fusion Guide on the new BOB Blog and start harvesting Spice now."
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:108
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:135
 msgid "Receive"
 msgstr "Receive"
 
@@ -1257,7 +1281,7 @@ msgstr "Receive"
 #~ msgstr "Receive {ticker}"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:481
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:158
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:94
 msgid "Recipient"
 msgstr "Recipient"
@@ -1779,7 +1803,7 @@ msgstr "This is often done to comply with local laws and regulations. Website ho
 msgid "This is the amount of spice you have harvested in the last 24 hours. It is updated every 15 minutes. Babylon points update every 24 hours."
 msgstr "This is the amount of spice you have harvested in the last 24 hours. It is updated every 15 minutes. Babylon points update every 24 hours."
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:136
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:163
 msgid "This is the final amount you will receive after deducting the Protocol fees from your input amount."
 msgstr "This is the final amount you will receive after deducting the Protocol fees from your input amount."
 
@@ -2147,7 +2171,7 @@ msgstr "You still have assets locked in Season One. Please redeem your funds"
 msgid "You will need to actively monitor your position, especially if it has a small range."
 msgstr "You will need to actively monitor your position, especially if it has a small range."
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:134
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:161
 #: src/app/[lang]/(bridge)/components/TransactionDetails/TransactionDetails.tsx:86
 #: src/app/[lang]/(bridge)/components/TransactionModal/GatewayTransactionModal.tsx:71
 msgid "You will receive"

apps/evm/src/locales/zh.po

@@ -336,7 +336,7 @@ msgid "Bridge"
 msgstr "桥"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:456
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:143
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:170
 msgid "Bridge Asset"
 msgstr ""
 
@@ -618,7 +618,7 @@ msgstr ""
 #~ msgstr ""
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:482
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:158
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:95
 msgid "Enter destination address"
 msgstr ""
@@ -660,7 +660,7 @@ msgstr ""
 #~ msgid "Failed to finalize."
 #~ msgstr ""
 
-#: src/app/[lang]/(bridge)/hooks/useGateway.ts:241
+#: src/app/[lang]/(bridge)/hooks/useGateway.ts:243
 msgid "Failed to get estimated fee"
 msgstr ""
 
@@ -805,6 +805,10 @@ msgstr ""
 msgid "Harvest Spice by depositing into BOB apps, voting, and solving quests. Keep an eye out for special events."
 msgstr "通过存入BOB应用、投票和完成任务来收获Spice。密切关注特别活动"
 
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:108
+msgid "Heads up!"
+msgstr ""
+
 #: src/app/[lang]/fusion/components/UserInfo/UserReferralModal.tsx:57
 msgid "Here are your active referrals and the Spice they're currently earning for you. The more they earn, the more you benefit!"
 msgstr "这里展示了你推荐的活跃用户及他们为你赚取的Spice。他们赚得越多，你获益越多！"
@@ -841,6 +845,26 @@ msgstr ""
 msgid "If you already own BTC LSTs on other chains, you can bridge them over to BOB and start harvesting Spice."
 msgstr "如果你已经在其他链上拥有BTC LSTs，你可以将它们跨链到BOB并开始收获Spice。"
 
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:109
+#~ msgid "If your BTC balance here shows as 0 or is very different from your wallet balance, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr ""
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:111
+#~ msgid "If your BTC balance shows as 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr ""
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+#~ msgid "If your BTC balance shows smaller number or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr ""
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+#~ msgid "If your BTC balance shows smaller number, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+#~ msgstr ""
+
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:110
+msgid "If your BTC balance shows smaller value or 0, it might be due to a transaction in progress, such as this one: <0>View Transaction</0>. Please wait for it to confirm before checking again."
+msgstr ""
+
 #: src/app/[lang]/(bridge)/stake/components/StrategyDetailsModal/StrategyDetailsModal.tsx:38
 #~ msgid "Incentives"
 #~ msgstr ""
@@ -1192,7 +1216,7 @@ msgstr ""
 msgid "POWERED BY BTC & ETH"
 msgstr "比特币 + 以太坊共同驱动"
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:143
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:170
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:112
 msgid "Preparing..."
 msgstr ""
@@ -1244,7 +1268,7 @@ msgstr "点此了解更多"
 msgid "Read the official Fusion Guide on the new BOB Blog and start harvesting Spice now."
 msgstr ""
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:108
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:135
 msgid "Receive"
 msgstr "接收"
 
@@ -1257,7 +1281,7 @@ msgstr "接收"
 #~ msgstr "接收 {ticker}"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:481
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:131
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:158
 #: src/app/[lang]/(bridge)/stake/components/StakeForm/BtcStakeForm.tsx:94
 msgid "Recipient"
 msgstr ""
@@ -1771,7 +1795,7 @@ msgstr ""
 msgid "This is the amount of spice you have harvested in the last 24 hours. It is updated every 15 minutes. Babylon points update every 24 hours."
 msgstr ""
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:136
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:163
 msgid "This is the final amount you will receive after deducting the Protocol fees from your input amount."
 msgstr ""
 
@@ -2134,7 +2158,7 @@ msgstr ""
 msgid "You will need to actively monitor your position, especially if it has a small range."
 msgstr "请密切关注你的仓位，尤其是当设定的价格范围较窄时。"
 
-#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:134
+#: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BtcBridgeForm.tsx:161
 #: src/app/[lang]/(bridge)/components/TransactionDetails/TransactionDetails.tsx:86
 #: src/app/[lang]/(bridge)/components/TransactionModal/GatewayTransactionModal.tsx:71
 msgid "You will receive"