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 && !gateway.query.balance.data.greaterThan(0);
+
   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 as 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/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:458
-#: 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:484
-#: 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"
 
@@ -693,7 +693,7 @@ msgstr "Fee"
 msgid "Feeling lucky? Try your luck with the daily lottery!<0/>Participate in Fusion voting to receive 3 lottery tickets each day."
 msgstr "Feeling lucky? Try your luck with the daily lottery!<0/>Participate in Fusion voting to receive 3 lottery tickets each day."
 
-#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:95
+#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:102
 msgid "Fetching bridging operations..."
 msgstr "Fetching bridging operations..."
 
@@ -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:109
+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,14 @@ 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)/stake/components/StrategyDetailsModal/StrategyDetailsModal.tsx:38
 #~ msgid "Incentives"
 #~ msgstr "Incentives"
@@ -886,11 +898,11 @@ msgstr "Learn More"
 #~ msgid "Learn more about {0}"
 #~ msgstr "Learn more about {0}"
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:106
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:104
 msgid "Lend out tBTC on Segment."
 msgstr "Lend out tBTC on Segment."
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:121
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:119
 msgid "Lend out wBTC on Segment."
 msgstr "Lend out wBTC on Segment."
 
@@ -1084,7 +1096,7 @@ msgstr "new tickets drop in {timeToNextDraw}"
 #~ msgid "No assets shown"
 #~ msgstr "No assets shown"
 
-#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:122
+#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:130
 msgid "No bridging operations found"
 msgstr "No bridging operations found"
 
@@ -1192,7 +1204,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 +1256,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 +1269,7 @@ msgstr "Receive"
 #~ msgstr "Receive {ticker}"
 
 #: src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx:483
-#: 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"
@@ -1509,11 +1521,11 @@ msgstr "Stake"
 msgid "Stake BTC into Babylon via Bedrock and receive liquid staking token uniBTC."
 msgstr "Stake BTC into Babylon via Bedrock and receive liquid staking token uniBTC."
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:89
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:87
 msgid "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and deposit into Pell restaking."
 msgstr "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and deposit into Pell restaking."
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:154
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:151
 msgid "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and lend it out on Segment."
 msgstr "Stake BTC into Babylon via Bedrock, get uniBTC liquid staking token, and lend it out on Segment."
 
@@ -1529,15 +1541,15 @@ msgstr "Stake BTC into Babylon via Solv Protocol and receive liquid staking toke
 #~ msgid "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and deposit into Pell."
 #~ msgstr "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and deposit into Pell."
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:71
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:70
 msgid "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and deposit into Pell."
 msgstr "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and deposit into Pell."
 
 #: src/app/[lang]/(bridge)/utils/stakeData.tsx:124
 #~ msgid "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and lend it out on Segment."
 #~ msgstr "Stake BTC into Babylon via Solv Protocol, get solvBTC.BBN liquid staking token, and lend it out on Segment."
 
-#: src/app/[lang]/(bridge)/utils/stakeData.tsx:136
+#: src/app/[lang]/(bridge)/utils/stakeData.tsx:134
 msgid "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and lend it out on Segment."
 msgstr "Stake BTC into Babylon via Solv Protocol, get SolvBTC.BBN liquid staking token, and lend it out on Segment."
 
@@ -1779,7 +1791,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."
 
@@ -1979,7 +1991,7 @@ msgstr "Using the official bridge usually takes 7 days. For faster withdrawals w
 #~ msgid "View a summary of your wallet on the BOB network. DeFi positions may not be tracked."
 #~ msgstr "View a summary of your wallet on the BOB network. DeFi positions may not be tracked."
 
-#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:132
+#: src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx:140
 msgid "View All Transactions"
 msgstr "View All Transactions"
 
@@ -2139,7 +2151,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"