Remove toast

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

@@ -10,6 +10,7 @@ const messages = defineMessages({
   title: { id: 'wallet.transactions', defaultMessage: 'Transactions' },
   more: { id: 'wallet.transactions.show_more', defaultMessage: 'Show More' },
   loading: { id: 'wallet.loading', defaultMessage: 'Loading…' },
+  noMoreTransactions: { id: 'wallet.transactions.no_more', defaultMessage: 'You reached the end of transactions' },
 });
 
 const WalletTransactions = () => {
@@ -17,13 +18,15 @@ const WalletTransactions = () => {
   const { isLoading, expandTransactions } = useTransactions();
   const observerRef = useRef<HTMLDivElement | null>(null);
   const [showSpinner, setShowSpinner] = useState(false);
+  const [hasMoreTransactions, setHasMoreTransactions] = useState(true);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      ([entry]) => {
+      async ([entry]) => {
-        if (entry.isIntersecting) {
+        if (entry.isIntersecting && !isLoading && hasMoreTransactions) {
           setShowSpinner(true);
-          if (!isLoading) expandTransactions();
+          const hasMore = await expandTransactions();
+          setHasMoreTransactions(hasMore);
         }
       },
       { rootMargin: '100px' },
@@ -34,13 +37,18 @@ const WalletTransactions = () => {
     }
 
     return () => observer.disconnect();
-  }, [expandTransactions, isLoading]);
+  }, [expandTransactions, isLoading, hasMoreTransactions]);
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <Transactions />
       <div className='flex w-full justify-center' ref={observerRef}>
         {showSpinner && isLoading && <Spinner />}
+        {!hasMoreTransactions && (
+          <div className='py-4 text-center text-gray-600'>
+            {intl.formatMessage(messages.noMoreTransactions)}
+          </div>
+        )}
       </div>
     </Column>
   );

src/features/wallet/index.tsx

@@ -44,85 +44,78 @@ const Wallet = () => {
 
   return (
     <>
-      {isLoading ?
+      {isLoading ? (
         <Stack className='h-screen items-center justify-center'>
-          <div className='rounded-lg border border-gray-200 p-10 dark:border-gray-700'>
+          <Spinner size={50} withText={false} />
-            <Spinner size={50} withText={false} />
-          </div>
         </Stack>
-        :
+      ) : (
-        (
+        <Column label={intl.formatMessage(messages.wallet)} transparent withHeader={false} slim>
-          <Column label={intl.formatMessage(messages.wallet)} transparent withHeader={false} slim>
+          <Card className='space-y-4 overflow-hidden'>
-            <Card className='space-y-4 overflow-hidden'>
+            <CardHeader>
-              <CardHeader>
+              <CardTitle title={intl.formatMessage(messages.wallet)} />
-                <CardTitle title={intl.formatMessage(messages.wallet)} />
+            </CardHeader>
-              </CardHeader>
 
-              {walletData ? (
+            {walletData ? (
-                <>
+              <>
-                  <CardBody>
+                <CardBody>
-                    <Stack
+                  <Stack
-                      className='rounded-lg border border-gray-200 p-8 dark:border-gray-700'
+                    className='rounded-lg border border-gray-200 p-8 dark:border-gray-700'
-                      alignItems='center'
+                    alignItems='center'
-                      space={4}
+                    space={4}
+                  >
+                    <Balance />
+                  </Stack>
+                </CardBody>
+
+                <CardHeader>
+                  <CardTitle title={intl.formatMessage(messages.transactions)} />
+                </CardHeader>
+
+                <CardBody>
+                  <Transactions limit={4} />
+                  {hasTransactions && <div className='mt-4 flex w-full justify-center'>
+                    <Button
+                      icon={moreIcon}
+                      theme='primary'
+                      to='/wallet/transactions'
+                      className='px-6 font-medium'
                     >
-                      <Balance />
+                      {intl.formatMessage(messages.more)}
-                    </Stack>
+                    </Button>
-                  </CardBody>
+                  </div>}
+                </CardBody>
 
-                  <CardHeader>
+                <CardHeader>
-                    <CardTitle title={intl.formatMessage(messages.transactions)} />
+                  <CardTitle title={intl.formatMessage(messages.management)} />
-                  </CardHeader>
+                </CardHeader>
 
-                  <CardBody>
+                <CardBody>
-                    <Transactions limit={4} />
+                  <List>
-                    {hasTransactions && <div className='mt-4 flex w-full justify-center'>
+                    <ListItem label={intl.formatMessage(messages.mints)} to='/wallet/mints' />
-                      <Button
+                    <ListItem label={intl.formatMessage(messages.relays)} to='/wallet/relays' />
-                        icon={moreIcon}
+                    <ListItem label={intl.formatMessage(messages.payment)} >
-                        theme='primary'
+                      <SelectDropdown
-                        to='/wallet/transactions'
+                        className='max-w-[200px]'
-                        className='px-6 font-medium'
+                        items={paymentMethods}
-                      >
+                        defaultValue={method}
-                        {intl.formatMessage(messages.more)}
+                        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-                      </Button>
+                          changeMethod((event.target.value as 'cashu' | 'lightning'));
-                    </div>}
+                        }}
-                  </CardBody>
+                      />
-
+                    </ListItem>
-                  <CardHeader>
+                  </List>
-                    <CardTitle title={intl.formatMessage(messages.management)} />
+                </CardBody>
-                  </CardHeader>
+              </>
-
+            ) : (
-                  <CardBody>
+              <>
-                    <List>
+                <CardBody>
-                      <ListItem label={intl.formatMessage(messages.mints)} to='/wallet/mints' />
+                  <CreateWallet />
-                      <ListItem label={intl.formatMessage(messages.relays)} to='/wallet/relays' />
+                </CardBody>
-                      <ListItem label={intl.formatMessage(messages.payment)} >
+              </>
-                        <SelectDropdown
+            )}
-                          className='max-w-[200px]'
+          </Card>
-                          items={paymentMethods}
+        </Column>
-                          defaultValue={method}
+      )}
-                          onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-                            changeMethod((event.target.value as 'cashu' | 'lightning'));
-                          }}
-                        />
-                      </ListItem>
-                    </List>
-                  </CardBody>
-
-                </>
-              )
-                :
-                <>
-                  <CardBody>
-                    <CreateWallet />
-                  </CardBody>
-
-                </>
-              }
-            </Card>
-          </Column>
-        )
-      }
     </>
   );
 };

src/features/zap/hooks/useHooks.ts

@@ -73,7 +73,7 @@ const useWalletStore = create<WalletState>((set) => ({
 const useWallet = () => {
   const api = useApi();
   const { wallet, setWallet, setAcceptsZapsCashu, hasFetchedWallet, setHasFetchedWallet } = useWalletStore();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(!hasFetchedWallet);
   const [error, setError] = useState<string | null>(null);
 
   const createWallet = async (walletInfo: IWalletInfo) => {
@@ -118,7 +118,6 @@ const useWallet = () => {
 
   useEffect(() => {
     if (!hasFetchedWallet) {
-      setHasFetchedWallet(true);
       getWallet(false);
     }
   }, []);
@@ -153,8 +152,7 @@ const useTransactions = () => {
 
   const expandTransactions = async () => {
     if (!nextTransaction || !transactions) {
-      toast.info('You reached the end of transactions');
+      return false;
-      return;
     }
     try {
       setIsLoading(true);
@@ -166,10 +164,12 @@ const useTransactions = () => {
       const newTransactions = [...(transactions ?? []), ...normalizedData ];
 
       setTransactions(newTransactions, prev, next);
+      return true; // Return true to indicate successful expansion
     } catch (err) {
       const messageError = err instanceof Error ? err.message : 'Error expanding transactions';
       toast.error(messageError);
       setError(messageError);
+      return false;
     } finally {
       setIsLoading(false);
     }

src/locales/en.json

@@ -1740,6 +1740,7 @@
   "wallet.title": "Wallet",
   "wallet.transactions": "Transactions",
   "wallet.transactions.more": "More",
+  "wallet.transactions.no_more": "You reached the end of transactions",
   "wallet.transactions.no_transactions": "You don't have transactions yet.",
   "wallet.transactions.show_more": "Show More",
   "who_to_follow.title": "People To Follow",