Update transactions

src/features/wallet/components/transactions.tsx

@@ -9,7 +9,7 @@ import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useTransactions } from 'soapbox/features/wallet/hooks/useHooks.ts';
+import { useWalletStore } from 'soapbox/features/wallet/hooks/useHooks.ts';
 import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 const themes = {
@@ -91,7 +91,7 @@ interface ITransactions {
 
 const Transactions = ({ limit }: ITransactions) => {
   const { account } = useOwnAccount();
-  const { transactions } = useTransactions();
+  const { transactions } = useWalletStore();
 
   if (!account) {
     return null;

src/features/wallet/components/wallet-transactions.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Transactions from 'soapbox/features/wallet/components/transactions.tsx';
-import { useTransactions } from 'soapbox/features/wallet/hooks/useHooks.ts';
+import { useTransactions, useWalletStore } from 'soapbox/features/wallet/hooks/useHooks.ts';
 
 const messages = defineMessages({
   title: { id: 'wallet.transactions', defaultMessage: 'Transactions' },
@@ -16,18 +16,16 @@ const messages = defineMessages({
 
 const WalletTransactions = () => {
   const intl = useIntl();
-  const { isLoading, expandTransactions } = useTransactions();
+  const { isLoading, isExpanding, expandTransactions } = useTransactions();
   const observerRef = useRef<HTMLDivElement | null>(null);
-  const [showSpinner, setShowSpinner] = useState(false);
+  const { nextTransaction } = useWalletStore();
-  const [hasMoreTransactions, setHasMoreTransactions] = useState(true);
+  const hasMore = !!nextTransaction;
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       async ([entry]) => {
-        if (entry.isIntersecting && !isLoading && hasMoreTransactions) {
+        if (entry.isIntersecting && !isLoading && hasMore) {
-          setShowSpinner(true);
+          await expandTransactions();
-          const hasMore = await expandTransactions();
-          setHasMoreTransactions(hasMore);
         }
       },
       { rootMargin: '100px' },
@@ -38,14 +36,14 @@ const WalletTransactions = () => {
     }
 
     return () => observer.disconnect();
-  }, [expandTransactions, isLoading, hasMoreTransactions]);
+  }, [expandTransactions, isLoading, hasMore]);
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <Transactions />
       <div className='flex w-full justify-center' ref={observerRef}>
-        {showSpinner && isLoading && <Spinner />}
+        {isLoading || isExpanding && <Spinner />}
-        {!hasMoreTransactions && (
+        {!hasMore && (
           <div className='py-4 text-center text-gray-600'>
             {intl.formatMessage(messages.noMoreTransactions)}
           </div>

src/features/wallet/hooks/useHooks.ts

@@ -154,7 +154,7 @@ const useTransactions = () => {
   const expandTransactions = useMutation({
     mutationFn: async () => {
       if (!nextTransaction || !transactions) {
-        return false;
+        return;
       }
 
       const response = await api.get(nextTransaction);
@@ -165,7 +165,6 @@ const useTransactions = () => {
       const newTransactions = [...transactions, ...normalizedData];
 
       setTransactions(newTransactions, prev, next);
-      return true;
     },
     onError: (error: any) => {
       toast.error(error?.message || 'Error expanding transactions');