fix: brc-20 pending transactions, closes #4990

src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx

@@ -36,7 +36,7 @@ function useBrc20SendFormConfirmationState() {
     serviceFee: get(location.state, 'serviceFee') as number,
     serviceFeeRecipient: get(location.state, 'serviceFeeRecipient') as string,
     recipient: get(location.state, 'recipient') as string,
-    tick: get(location.state, 'tick') as string,
+    ticker: get(location.state, 'ticker') as string,
     amount: get(location.state, 'amount') as string,
     tx: get(location.state, 'tx') as string,
     holderAddress: get(location.state, 'holderAddress') as string,
@@ -47,7 +47,7 @@ export function Brc20SendFormConfirmation() {
   const navigate = useNavigate();
   const analytics = useAnalytics();
 
-  const { amount, recipient, fee, tick, serviceFee, tx, orderId, feeRowValue, holderAddress } =
+  const { amount, recipient, fee, ticker, serviceFee, tx, orderId, feeRowValue, holderAddress } =
     useBrc20SendFormConfirmationState();
 
   const summaryFeeMoney = createMoney(Number(fee), 'BTC');
@@ -58,7 +58,7 @@ export function Brc20SendFormConfirmation() {
   const totalFee = sumMoney([summaryFeeMoney, serviceFeeMoney]);
   const totalFeeFormatted = formatMoney(totalFee);
 
-  const amountFormatted = formatMoney(createMoney(Number(amount), tick, 0));
+  const amountFormatted = formatMoney(createMoney(Number(amount), ticker, 0));
   const { broadcastTx, isBroadcasting } = useBitcoinBroadcastTransaction();
   const { refetch } = useCurrentNativeSegwitUtxos();
 
@@ -71,23 +71,23 @@ export function Brc20SendFormConfirmation() {
     await broadcastTx({
       tx,
       async onSuccess(txId: string) {
-        inscriptionPaymentTransactionComplete(orderId, Number(amount), recipient, tick);
+        inscriptionPaymentTransactionComplete(orderId, Number(amount), recipient, ticker);
 
         void analytics.track('broadcast_transaction', {
-          symbol: tick,
+          symbol: ticker,
           type: 'brc-20',
           amount,
           fee,
           inputs: psbt.inputs.length,
           outputs: psbt.inputs.length,
         });
         await refetch();
-        navigate(RouteUrls.SentBrc20Summary.replace(':ticker', tick), {
+        navigate(RouteUrls.SentBrc20Summary.replace(':ticker', ticker), {
           state: {
             serviceFee: serviceFeeFormatted,
             totalFee: totalFeeFormatted,
             recipient,
-            tick,
+            ticker,
             amount,
             txId,
             feeRowValue,
@@ -114,7 +114,7 @@ export function Brc20SendFormConfirmation() {
         mb="space.06"
         mt="space.05"
         px="space.05"
-        symbol={tick}
+        symbol={ticker}
         value={Number(amount)}
       />
 

src/app/pages/send/sent-summary/brc20-sent-summary.tsx

@@ -30,7 +30,7 @@ function useBrc20SentSummaryState() {
     serviceFee: get(location.state, 'serviceFee') as string,
     totalFee: get(location.state, 'totalFee') as string,
     recipient: get(location.state, 'recipient') as string,
-    tick: get(location.state, 'tick') as string,
+    ticker: get(location.state, 'ticker') as string,
     amount: get(location.state, 'amount') as string,
     txId: get(location.state, 'txId') as string,
     txLink: get(location.state, 'txLink') as HandleOpenStacksTxLinkArgs,
@@ -39,8 +39,8 @@ function useBrc20SentSummaryState() {
 }
 
 export function Brc20SentSummary() {
-  const { tick, amount, serviceFee, totalFee, feeRowValue } = useBrc20SentSummaryState();
-  const amountFormatted = formatMoney(createMoney(Number(amount), tick, 0));
+  const { ticker, amount, serviceFee, totalFee, feeRowValue } = useBrc20SentSummaryState();
+  const amountFormatted = formatMoney(createMoney(Number(amount), ticker, 0));
   const navigate = useNavigate();
 
   function onClickLink() {
@@ -53,22 +53,25 @@ export function Brc20SentSummary() {
     <InfoCard>
       <TxDone />
 
-      <InfoCardAssetValue px="space.05" symbol={tick} value={Number(amount)} />
+      <InfoCardAssetValue px="space.05" symbol={ticker} value={Number(amount)} />
 
       <Stack px="space.06" pb="space.06" width="100%">
         <Callout variant="info" title="One more step is required to send tokens" mb="space.05">
-          <styled.span mb="space.02">
-            You'll need to send the transfer inscription to your recipient of choice from the home
-            screen once its status changes to "Ready to send"
-          </styled.span>
-          <Link
-            textStyle="body.02"
-            onClick={() => {
-              openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens');
-            }}
-          >
-            Learn more
-          </Link>
+          <Stack>
+            <styled.span mb="space.02">
+              You'll need to send the transfer inscription to your recipient of choice from the home
+              screen once its status changes to "Ready to send"
+            </styled.span>
+            <Link
+              width="fit-content"
+              textStyle="body.02"
+              onClick={() => {
+                openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens');
+              }}
+            >
+              Learn more
+            </Link>
+          </Stack>
         </Callout>
         <InfoCardSeparator />
 

src/app/query/bitcoin/ordinals/brc20/use-check-order-status.ts

@@ -2,6 +2,7 @@ import { useQueries } from '@tanstack/react-query';
 
 import { useAppDispatch } from '@app/store';
 import {
+  brc20OrderNotFound,
   brc20TransferAwaitingIndexer,
   brc20TransferPaid,
   brc20TransferReady,
@@ -22,6 +23,13 @@ export function useCheckOrderStatuses(ids: string[]) {
       queryKey: ['check-order-status', id],
       queryFn: async () => ordinalsbotClient.orderStatus(id),
       async onSuccess({ data }: Awaited<ReturnType<typeof ordinalsbotClient.orderStatus>>) {
+        if (data.status === 'error') {
+          if (data.error.includes('no such order')) {
+            dispatch(brc20OrderNotFound({ id }));
+          }
+          return;
+        }
+
         const entry = transferMap[data.charge.id];
 
         if (!entry) return;

src/app/query/bitcoin/ordinalsbot-client.ts

@@ -65,7 +65,7 @@ interface InscriptionOrderArgs {
 }
 
 interface OrderStatusSuccessResponse {
-  status: string;
+  status: 'success';
   paid: boolean;
   underpaid: boolean;
   expired: boolean;
@@ -115,6 +115,11 @@ interface OrderStatusSuccessResponse {
   sent: string;
 }
 
+interface OrderStatusErrorResponse {
+  status: 'error';
+  error: string;
+}
+
 class OrdinalsbotClient {
   constructor(readonly baseUrl: string) {}
 
@@ -132,9 +137,12 @@ class OrdinalsbotClient {
   }
 
   async orderStatus(id: string) {
-    return axios.get<OrderStatusSuccessResponse>(urlJoin(this.baseUrl, 'order'), {
-      params: { id },
-    });
+    return axios.get<OrderStatusSuccessResponse | OrderStatusErrorResponse>(
+      urlJoin(this.baseUrl, 'order'),
+      {
+        params: { id },
+      }
+    );
   }
 }
 

src/app/store/ordinals/ordinals.slice.ts

@@ -54,6 +54,14 @@ export const ordinalsSlice = createSlice({
       transfer.status = 'ready';
       transfer.inscriptionId = action.payload.inscriptionId;
     },
+    brc20OrderNotFound(state, action: PayloadAction<{ id: string }>) {
+      const transferMatch = ordinalsAdapter
+        .getSelectors()
+        .selectAll(state)
+        .find(transfer => transfer.id === action.payload.id);
+      if (!transferMatch) return;
+      ordinalsAdapter.removeOne(state, transferMatch.id);
+    },
     inscriptionSent(state, action: PayloadAction<{ inscriptionId: string }>) {
       const transferMatch = ordinalsAdapter
         .getSelectors()
@@ -71,6 +79,7 @@ export const {
   brc20TransferPaid,
   brc20TransferAwaitingIndexer,
   brc20TransferReady,
+  brc20OrderNotFound,
   inscriptionSent,
 } = ordinalsSlice.actions;