From f1a2200c2bd7f2e3e403476901e344a49ee70152 Mon Sep 17 00:00:00 2001
From: bloodyowl <bloodyowl@icloud.com>
Date: Fri, 5 Apr 2024 17:43:19 +0200
Subject: [PATCH] Rebase

---
 .../banking/src/components/TransactionDetail.tsx   | 14 +++++++++-----
 .../banking/src/components/TransactionsArea.tsx    |  1 +
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/clients/banking/src/components/TransactionDetail.tsx b/clients/banking/src/components/TransactionDetail.tsx
index f6222f72c..74554adb4 100644
--- a/clients/banking/src/components/TransactionDetail.tsx
+++ b/clients/banking/src/components/TransactionDetail.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from "@swan-io/graphql-client";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { Icon, IconName } from "@swan-io/lake/src/components/Icon";
 import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
@@ -11,11 +12,11 @@ import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { ReadOnlyFieldList } from "@swan-io/lake/src/components/ReadOnlyFieldList";
 import { Separator } from "@swan-io/lake/src/components/Separator";
 import { Space } from "@swan-io/lake/src/components/Space";
+import { useIsSuspendable } from "@swan-io/lake/src/components/Suspendable";
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { Tile } from "@swan-io/lake/src/components/Tile";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { colors } from "@swan-io/lake/src/constants/design";
-import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import {
   isNotEmpty,
   isNotNullish,
@@ -112,12 +113,15 @@ export const TransactionDetail = ({
   canQueryCardOnTransaction,
   canViewAccount,
 }: Props) => {
-  const { data } = useUrqlQuery(
+  const suspense = useIsSuspendable();
+  const [data] = useQuery(
+    TransactionDocument,
     {
-      query: TransactionDocument,
-      variables: { id: transactionId, canViewAccount, canQueryCardOnTransaction },
+      id: transactionId,
+      canViewAccount,
+      canQueryCardOnTransaction,
     },
-    [transactionId],
+    { suspense },
   );
 
   if (data.isNotAsked() || data.isLoading()) {
diff --git a/clients/banking/src/components/TransactionsArea.tsx b/clients/banking/src/components/TransactionsArea.tsx
index f8099459d..215b94d15 100644
--- a/clients/banking/src/components/TransactionsArea.tsx
+++ b/clients/banking/src/components/TransactionsArea.tsx
@@ -472,6 +472,7 @@ export const TransactionsArea = ({
                   return (
                     <UpcomingTransactionListPage
                       accountId={accountId}
+                      accountMembershipId={accountMembershipId}
                       canQueryCardOnTransaction={canQueryCardOnTransaction}
                       onUpcomingTransactionCountUpdated={setUpdatedUpcommingTransactionCount}
                       canViewAccount={canViewAccount}