WT-1988 - fix bridge failure state (#1276)

Co-authored-by: Zach Couchman <[email protected]>
immutable · Dec 12, 2023 · 8fab83a · 8fab83a
1 parent 173e8a9
commit 8fab83a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/packages/checkout/widgets-lib/src/context/view-context/XBridgeViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/XBridgeViewContextTypes.ts
@@ -42,10 +42,6 @@ interface XBridgeFailure extends ViewType {
 
 interface XBridgeApproveTransaction extends ViewType {
   type: XBridgeWidgetViews.APPROVE_TRANSACTION,
-  data: ApproveTransactionData
-}
-
-export interface ApproveTransactionData {
   approveTransaction: ApproveBridgeResponse;
   transaction: BridgeTxResponse;
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/x-bridge/XBridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/x-bridge/XBridgeWidget.tsx
@@ -170,18 +170,29 @@ export function XBridgeWidget({
               transactionHash={viewState.view.transactionHash}
             />
           )}
-          {viewState.view.type === XBridgeWidgetViews.BRIDGE_FAILURE && (
-            <StatusView
-              testId="bridge-fail"
-              statusText={bridgeFailureText.statusText}
-              actionText={bridgeFailureText.actionText}
-              onActionClick={goBackToReview}
-              statusType={StatusType.FAILURE}
-              onRenderEvent={() => sendBridgeFailedEvent(eventTarget, viewState.view.data.reason)}
-            />
-          )}
+          {viewState.view.type === XBridgeWidgetViews.BRIDGE_FAILURE
+            && (
+              <StatusView
+                testId="bridge-fail"
+                statusText={bridgeFailureText.statusText}
+                actionText={bridgeFailureText.actionText}
+                onActionClick={goBackToReview}
+                statusType={StatusType.FAILURE}
+                onRenderEvent={() => {
+                  let reason = '';
+                  if (viewState.view.type === XBridgeWidgetViews.BRIDGE_FAILURE) {
+                    reason = viewState.view.reason;
+                  }
+                  sendBridgeFailedEvent(eventTarget, reason);
+                }}
+              />
+            )}
+
           {viewState.view.type === XBridgeWidgetViews.APPROVE_TRANSACTION && (
-            <ApproveTransaction data={viewReducerValues.viewState.view.data} />
+            <ApproveTransaction
+              approveTransaction={viewState.view.approveTransaction}
+              transaction={viewState.view.transaction}
+            />
           )}
           {viewState.view.type === SharedViews.ERROR_VIEW && (
             <ErrorView

diff --git a/packages/checkout/widgets-lib/src/widgets/x-bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/x-bridge/components/BridgeReviewSummary.tsx
@@ -176,10 +176,8 @@ export function BridgeReviewSummary() {
         type: ViewActions.UPDATE_VIEW,
         view: {
           type: XBridgeWidgetViews.APPROVE_TRANSACTION,
-          data: {
-            approveTransaction,
-            transaction,
-          },
+          approveTransaction,
+          transaction,
         },
       },
     });

diff --git a/packages/checkout/widgets-lib/src/widgets/x-bridge/views/ApproveTransaction.tsx b/packages/checkout/widgets-lib/src/widgets/x-bridge/views/ApproveTransaction.tsx
@@ -5,6 +5,7 @@ import {
   useState,
 } from 'react';
 import { CheckoutErrorType } from '@imtbl/checkout-sdk';
+import { ApproveBridgeResponse, BridgeTxResponse } from '@imtbl/bridge-sdk';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { sendBridgeWidgetCloseEvent } from '../BridgeWidgetEvents';
@@ -16,14 +17,15 @@ import { LoadingView } from '../../../views/loading/LoadingView';
 import { XBridgeContext } from '../context/XBridgeContext';
 import { WalletApproveHero } from '../../../components/Hero/WalletApproveHero';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
-import { ApproveTransactionData, XBridgeWidgetViews } from '../../../context/view-context/XBridgeViewContextTypes';
+import { XBridgeWidgetViews } from '../../../context/view-context/XBridgeViewContextTypes';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
 
 export interface ApproveTransactionProps {
-  data: ApproveTransactionData;
+  approveTransaction: ApproveBridgeResponse;
+  transaction: BridgeTxResponse;
 }
 
-export function ApproveTransaction({ data }: ApproveTransactionProps) {
+export function ApproveTransaction({ approveTransaction, transaction }: ApproveTransactionProps) {
   const { bridgeState } = useContext(XBridgeContext);
   const {
     checkout,
@@ -104,20 +106,20 @@ export function ApproveTransaction({ data }: ApproveTransactionProps) {
 
   const handleApproveBridgeClick = useCallback(async () => {
     let bridgeRejected = false;
-    if (!checkout || !from?.web3Provider || !data.transaction) {
+    if (!checkout || !from?.web3Provider || !transaction) {
       showErrorView();
       return;
     }
     if (actionDisabled) return;
     setActionDisabled(true);
 
     // Approvals as required
-    if (data.approveTransaction.unsignedTx) {
+    if (approveTransaction.unsignedTx) {
       try {
         setTxProcessing(true);
         const approveSpendingResult = await checkout.sendTransaction({
           provider: from.web3Provider,
-          transaction: data.approveTransaction.unsignedTx,
+          transaction: approveTransaction.unsignedTx,
         });
         const approvalReceipt = await approveSpendingResult.transactionResponse.wait();
         if (approvalReceipt.status !== 1) {
@@ -150,7 +152,7 @@ export function ApproveTransaction({ data }: ApproveTransactionProps) {
       setTxProcessing(true);
       const sendResult = await checkout.sendTransaction({
         provider: from.web3Provider,
-        transaction: data.transaction.unsignedTx,
+        transaction: transaction.unsignedTx,
       });
 
       setLoading(true);
@@ -194,8 +196,8 @@ export function ApproveTransaction({ data }: ApproveTransactionProps) {
     from,
     showErrorView,
     viewDispatch,
-    data.transaction,
-    data.approveTransaction,
+    transaction,
+    approveTransaction,
     actionDisabled,
   ]);