Merge pull request #6037 from leather-io/release/sbtc-updates

Release/sbtc updates
leather-io · Dec 21, 2024 · 45aaa79 · 45aaa79
2 parents f098f39 + 3703202
commit 45aaa79
Show file tree

Hide file tree

Showing 22 changed files with 375 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -149,8 +149,8 @@
     "@leather.io/bitcoin": "0.17.0",
     "@leather.io/constants": "0.13.5",
     "@leather.io/crypto": "1.6.14",
-    "@leather.io/models": "0.22.0",
-    "@leather.io/query": "2.26.1",
+    "@leather.io/models": "0.24.0",
+    "@leather.io/query": "2.26.9",
     "@leather.io/stacks": "1.4.0",
     "@leather.io/tokens": "0.12.1",
     "@leather.io/ui": "1.44.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/components/sbtc-deposit-status-item/sbtc-deposit-status-item.tsx b/src/app/components/sbtc-deposit-status-item/sbtc-deposit-status-item.tsx
@@ -1,12 +1,14 @@
 import SbtcAvatarIconSrc from '@assets/avatars/sbtc-avatar-icon.png';
+import { HStack } from 'leather-styles/jsx';
 
-import { Avatar, Caption, Title } from '@leather.io/ui';
+import { Avatar, Caption, Link, Title } from '@leather.io/ui';
 import { truncateMiddle } from '@leather.io/utils';
 
 import { analytics } from '@shared/utils/analytics';
 
 import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
-import type { SbtcDepositInfo, SbtcStatus } from '@app/query/sbtc/sbtc-deposits.query';
+import { openInNewTab } from '@app/common/utils/open-in-new-tab';
+import { SbtcDeposit, SbtcStatus } from '@app/query/sbtc/sbtc-deposits.query';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
 
@@ -17,37 +19,61 @@ function getDepositStatus(status: SbtcStatus) {
       return 'Pending deposit';
     case 'accepted':
       return 'Pending mint';
-    case 'confirmed':
-      return 'Done';
     case 'failed':
       return 'Failed';
+    case 'confirmed':
     default:
       return '';
   }
 }
 
+function getDepositStatusTextColor(status: SbtcStatus) {
+  switch (status) {
+    case 'pending':
+    case 'reprocessing':
+    case 'accepted':
+      return 'yellow.action-primary-default';
+    case 'failed':
+      return 'red.action-primary-default';
+    case 'confirmed':
+    default:
+      return '';
+  }
+}
+
+const sbtcReclaimUrl = 'https://app.stacks.co/reclaim?depositTxId=';
+
 interface SbtcDepositTransactionItemProps {
-  deposit: SbtcDepositInfo;
+  deposit: SbtcDeposit;
 }
 export function SbtcDepositTransactionItem({ deposit }: SbtcDepositTransactionItemProps) {
   const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
+  const { bitcoinTxid, status } = deposit;
+  const depositFailed = status === 'failed';
 
-  const openTxLink = () => {
+  function openTxLink() {
     void analytics.track('view_bitcoin_transaction');
-    handleOpenTxLink({ txid: deposit.bitcoinTxid });
-  };
+    handleOpenTxLink({ txid: bitcoinTxid });
+  }
+
+  function openReclaimLink() {
+    return openInNewTab(`${sbtcReclaimUrl}${bitcoinTxid}`);
+  }
 
   return (
     <TransactionItemLayout
-      openTxLink={openTxLink}
-      txCaption={truncateMiddle(deposit.bitcoinTxid, 4)}
+      openTxLink={!depositFailed ? openTxLink : () => {}}
+      txCaption={truncateMiddle(bitcoinTxid, 4)}
       txIcon={
         <Avatar.Root>
           <Avatar.Image alt="ST" src={SbtcAvatarIconSrc} />
         </Avatar.Root>
       }
       txStatus={
-        <Caption color="yellow.action-primary-default">{getDepositStatus(deposit.status)}</Caption>
+        <HStack>
+          <Caption color={getDepositStatusTextColor(status)}>{getDepositStatus(status)}</Caption>
+          {depositFailed && <Link onClick={openReclaimLink}>Reclaim</Link>}
+        </HStack>
       }
       txTitle={<Title textStyle="label.02">BTC → sBTC</Title>}
       // Api is only returning 0 right now

diff --git a/src/app/features/activity-list/activity-list.tsx b/src/app/features/activity-list/activity-list.tsx
@@ -12,14 +12,22 @@ import {
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
-import { useSbtcPendingDeposits } from '@app/query/sbtc/sbtc-deposits.query';
+import {
+  useSbtcConfirmedDeposits,
+  useSbtcFailedDeposits,
+  useSbtcPendingDeposits,
+} from '@app/query/sbtc/sbtc-deposits.query';
 import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useUpdateSubmittedTransactions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
 import { useSubmittedTransactions } from '@app/store/submitted-transactions/submitted-transactions.selectors';
 
-import { convertBitcoinTxsToListType, convertStacksTxsToListType } from './activity-list.utils';
+import {
+  convertBitcoinTxsToListType,
+  convertSbtcDepositToListType,
+  convertStacksTxsToListType,
+} from './activity-list.utils';
 import { NoAccountActivity } from './components/no-account-activity';
 import { PendingTransactionList } from './components/pending-transaction-list/pending-transaction-list';
 import { SubmittedTransactionList } from './components/submitted-transaction-list/submitted-transaction-list';
@@ -64,8 +72,12 @@ export function ActivityList() {
     [nsPendingTxs, trPendingTxs]
   );
 
-  const { isLoading: isLoadingSbtcDeposits, pendingSbtcDeposits } =
+  const { isLoading: isLoadingSbtcPendingDeposits, pendingSbtcDeposits } =
     useSbtcPendingDeposits(stxAddress);
+  const { isLoading: isLoadingSbtcConfirmedDeposits, confirmedSbtcDeposits } =
+    useSbtcConfirmedDeposits(stxAddress);
+  const { isLoading: isLoadingSbtcFailedDeposits, failedSbtcDeposits } =
+    useSbtcFailedDeposits(stxAddress);
 
   const { isLoading: isLoadingStacksTransactions, data: stacksTransactionsWithTransfers } =
     useGetAccountTransactionsWithTransfersQuery(stxAddress);
@@ -85,7 +97,9 @@ export function ActivityList() {
     isLoadingTrBitcoinTransactions ||
     isLoadingStacksTransactions ||
     isLoadingStacksPendingTransactions ||
-    isLoadingSbtcDeposits;
+    isLoadingSbtcPendingDeposits ||
+    isLoadingSbtcConfirmedDeposits ||
+    isLoadingSbtcFailedDeposits;
 
   const transactionListBitcoinTxs = useMemo(() => {
     return convertBitcoinTxsToListType(
@@ -135,14 +149,18 @@ export function ActivityList() {
         {hasPendingTransactions && (
           <PendingTransactionList
             bitcoinTxs={isBitcoinEnabled ? bitcoinPendingTxs : []}
-            sBtcDeposits={pendingSbtcDeposits}
+            sbtcDeposits={pendingSbtcDeposits}
             stacksTxs={stacksPendingTransactions}
           />
         )}
         {hasTransactions && (
           <TransactionList
             bitcoinTxs={isBitcoinEnabled ? transactionListBitcoinTxs : []}
             stacksTxs={transactionListStacksTxs}
+            sbtcDeposits={convertSbtcDepositToListType([
+              ...confirmedSbtcDeposits,
+              ...failedSbtcDeposits,
+            ])}
             currentBitcoinAddress={nsBitcoinAddress}
           />
         )}