From d6d8c900db2ef8dcd5eee548929bb507233d047e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Sun, 25 Aug 2024 14:41:34 +0200 Subject: [PATCH 1/3] fix: loading state --- pages/Transactions.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx index 13784ec..4cc0554 100644 --- a/pages/Transactions.tsx +++ b/pages/Transactions.tsx @@ -1,11 +1,8 @@ import { Nip47Transaction } from "@getalby/sdk/dist/NWCClient"; import dayjs from "dayjs"; import { - Link, router, - Stack, - useFocusEffect, - useLocalSearchParams, + Stack } from "expo-router"; import React from "react"; import { @@ -18,7 +15,6 @@ import { import { MoveDownLeft, MoveUpRight, X } from "~/components/Icons"; import { Skeleton } from "~/components/ui/skeleton"; import { Text } from "~/components/ui/text"; -import { useBalance } from "~/hooks/useBalance"; import { useGetFiatAmount } from "~/hooks/useGetFiatAmount"; import { useTransactions } from "~/hooks/useTransactions"; import { TRANSACTIONS_PAGE_SIZE } from "~/lib/constants"; @@ -29,6 +25,7 @@ export function Transactions() { const { data: transactions, mutate: reloadTransactions } = useTransactions(page); const [loadingNextPage, setLoadingNextPage] = React.useState(false); + const [transactionsLoaded, setTransactionsLoaded] = React.useState(false); const [allTransactions, setAllTransactions] = React.useState< Nip47Transaction[] >([]); @@ -48,6 +45,7 @@ export function Transactions() { ) { setAllTransactions([...allTransactions, ...transactions.transactions]); setLoadingNextPage(false); + setTransactionsLoaded(true); } }, [allTransactions, transactions, refreshingTransactions]); @@ -99,7 +97,7 @@ export function Transactions() { ) : undefined } data={allTransactions} - onEndReachedThreshold={0.9} + onEndReachedThreshold={0.8} onEndReached={() => { if ( !refreshingTransactions && @@ -165,7 +163,7 @@ export function Transactions() { )} /> - ) : !allTransactions ? ( + ) : !transactionsLoaded ? ( {[...Array(20)].map((e, i) => ( Date: Sun, 25 Aug 2024 16:23:20 +0200 Subject: [PATCH 2/3] fix: empty state --- pages/Transactions.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx index 4cc0554..12c368b 100644 --- a/pages/Transactions.tsx +++ b/pages/Transactions.tsx @@ -1,6 +1,7 @@ import { Nip47Transaction } from "@getalby/sdk/dist/NWCClient"; import dayjs from "dayjs"; import { + Link, router, Stack } from "expo-router"; @@ -13,6 +14,7 @@ import { View, } from "react-native"; import { MoveDownLeft, MoveUpRight, X } from "~/components/Icons"; +import { Button } from "~/components/ui/button"; import { Skeleton } from "~/components/ui/skeleton"; import { Text } from "~/components/ui/text"; import { useGetFiatAmount } from "~/hooks/useGetFiatAmount"; @@ -45,8 +47,9 @@ export function Transactions() { ) { setAllTransactions([...allTransactions, ...transactions.transactions]); setLoadingNextPage(false); - setTransactionsLoaded(true); } + + setTransactionsLoaded(true); }, [allTransactions, transactions, refreshingTransactions]); const onRefresh = React.useCallback(() => { @@ -182,8 +185,16 @@ export function Transactions() { ))} ) : - - No transactions yet. + + + No transactions yet + Top up your wallet to get started + + + + } From a2a200872e753e3a492014f7c0ccd7d12004044b Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Mon, 26 Aug 2024 16:12:40 +0700 Subject: [PATCH 3/3] fix: transaction list loading and use wallet ID in cache keys --- hooks/useBalance.ts | 6 +++++- hooks/useTransactions.ts | 13 +++++++------ pages/Transactions.tsx | 18 +++++++++--------- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/hooks/useBalance.ts b/hooks/useBalance.ts index 87a9ae2..b643f4b 100644 --- a/hooks/useBalance.ts +++ b/hooks/useBalance.ts @@ -12,5 +12,9 @@ const fetcher = (...args: FetchArgs) => { export function useBalance() { const nwcClient = useAppStore((store) => store.nwcClient); - return useSWR(nwcClient && "getBalance", fetcher); + const selectedWalletId = useAppStore((store) => store.selectedWalletId); + return useSWR( + nwcClient && `getBalance?selectedWalletId=${selectedWalletId}`, + fetcher, + ); } diff --git a/hooks/useTransactions.ts b/hooks/useTransactions.ts index b4fe238..574b15f 100644 --- a/hooks/useTransactions.ts +++ b/hooks/useTransactions.ts @@ -1,9 +1,5 @@ -import { - Nip47GetBalanceResponse, - Nip47ListTransactionsResponse, -} from "@getalby/sdk/dist/NWCClient"; import { useAppStore } from "lib/state/appStore"; -import useSWR, { BareFetcher } from "swr"; +import useSWR from "swr"; import { TRANSACTIONS_PAGE_SIZE } from "~/lib/constants"; type FetchArgs = Parameters; @@ -25,5 +21,10 @@ const fetcher = (...args: FetchArgs) => { export function useTransactions(page = 1) { const nwcClient = useAppStore((store) => store.nwcClient); - return useSWR(nwcClient && `listTransactions?page=${page}`, fetcher); + const selectedWalletId = useAppStore((store) => store.selectedWalletId); + return useSWR( + nwcClient && + `listTransactions?page=${page}&selectedWalletId=${selectedWalletId}`, + fetcher, + ); } diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx index 12c368b..5761013 100644 --- a/pages/Transactions.tsx +++ b/pages/Transactions.tsx @@ -1,10 +1,6 @@ import { Nip47Transaction } from "@getalby/sdk/dist/NWCClient"; import dayjs from "dayjs"; -import { - Link, - router, - Stack -} from "expo-router"; +import { Link, router, Stack } from "expo-router"; import React from "react"; import { FlatList, @@ -49,7 +45,9 @@ export function Transactions() { setLoadingNextPage(false); } - setTransactionsLoaded(true); + if (transactions) { + setTransactionsLoaded(true); + } }, [allTransactions, transactions, refreshingTransactions]); const onRefresh = React.useCallback(() => { @@ -184,11 +182,13 @@ export function Transactions() { ))} - ) : + ) : ( No transactions yet - Top up your wallet to get started + + Top up your wallet to get started + - } + )} ); }