|
1 | | -import { Button, Card, Label, Paragraph, Spinner } from '@my/ui' |
| 1 | +import { Button, Card, Label, Paragraph, Spinner, YStack } from '@my/ui' |
2 | 2 | import type { CoinWithBalance } from 'app/data/coins' |
3 | | -import { hexToBytea } from 'app/utils/hexToBytea' |
4 | | -import { Fragment } from 'react' |
| 3 | +import { Fragment, useEffect, useState } from 'react' |
5 | 4 | import { useTokenActivityFeed } from './utils/useTokenActivityFeed' |
6 | | -import { AnimateEnter } from './TokenDetails' |
7 | | -import { TokenActivityRow } from './TokenActivityRow' |
| 5 | +import { RowLabel, AnimateEnter } from './TokenDetails' |
| 6 | +import { PendingTransferActivityRow, TokenActivityRow } from './TokenActivityRow' |
| 7 | +import { useSendAccount } from 'app/utils/send-accounts' |
| 8 | +import { zeroAddress } from 'viem' |
8 | 9 |
|
9 | 10 | export const TokenDetailsHistory = ({ coin }: { coin: CoinWithBalance }) => { |
10 | | - const result = useTokenActivityFeed({ |
| 11 | + const { data: sendAccount } = useSendAccount() |
| 12 | + const [hasPendingTransfers, setHasPendingTransfers] = useState<boolean | undefined>(true) |
| 13 | + const { pendingTransfers, activityFeed } = useTokenActivityFeed({ |
| 14 | + address: sendAccount?.address ?? zeroAddress, |
| 15 | + token: coin.token, |
11 | 16 | pageSize: 10, |
12 | | - address: coin.token === 'eth' ? undefined : hexToBytea(coin.token), |
| 17 | + refetchInterval: 1000, |
| 18 | + enabled: |
| 19 | + (hasPendingTransfers === undefined || hasPendingTransfers) && |
| 20 | + sendAccount?.address !== undefined, |
13 | 21 | }) |
| 22 | + |
| 23 | + const { data: pendingTransfersData, isError: pendingTransfersError } = pendingTransfers |
| 24 | + |
14 | 25 | const { |
15 | | - data, |
| 26 | + data: activityFeedData, |
16 | 27 | isLoading: isLoadingActivities, |
17 | 28 | error: activitiesError, |
18 | 29 | isFetching: isFetchingActivities, |
19 | 30 | isFetchingNextPage: isFetchingNextPageActivities, |
20 | 31 | fetchNextPage, |
21 | 32 | hasNextPage, |
22 | | - } = result |
23 | | - const { pages } = data ?? {} |
24 | | - if (isLoadingActivities) return <Spinner size="small" /> |
| 33 | + } = activityFeed |
| 34 | + |
| 35 | + const { pages } = activityFeedData ?? {} |
| 36 | + |
| 37 | + // Check if there are any pending transfers in the temporal db. If not set hasPendingTransfers to false to control refetches |
| 38 | + useEffect(() => { |
| 39 | + if (Array.isArray(pendingTransfersData)) { |
| 40 | + setHasPendingTransfers(pendingTransfersData?.length > 0) |
| 41 | + } else if (pendingTransfersError) { |
| 42 | + setHasPendingTransfers(false) |
| 43 | + } else { |
| 44 | + setHasPendingTransfers(undefined) |
| 45 | + } |
| 46 | + }, [pendingTransfersData, pendingTransfersError]) |
| 47 | + |
25 | 48 | return ( |
26 | 49 | <> |
27 | 50 | <Label fontSize={'$6'} fontWeight={'500'} color="$color12"> |
28 | 51 | {!pages || !pages[0]?.length ? 'No Activity' : 'Activity'} |
29 | 52 | </Label> |
30 | | - {(() => { |
31 | | - switch (true) { |
32 | | - case activitiesError !== null: |
33 | | - return ( |
34 | | - <Paragraph maxWidth={'600'} fontFamily={'$mono'} fontSize={'$5'} color={'$color12'}> |
35 | | - {activitiesError?.message.split('.').at(0) ?? `${activitiesError}`} |
36 | | - </Paragraph> |
37 | | - ) |
38 | | - case !pages || !pages[0]?.length: |
39 | | - return null |
40 | | - default: { |
41 | | - let lastDate: string | undefined |
42 | | - return ( |
43 | | - <Card gap="$5" testID="TokenDetailsHistory" p="$5"> |
44 | | - {pages?.map((activities) => { |
45 | | - return activities.map((activity) => { |
46 | | - const date = activity.created_at.toLocaleDateString() |
47 | | - const isNewDate = !lastDate || date !== lastDate |
48 | | - if (isNewDate) { |
49 | | - lastDate = date |
50 | | - } |
51 | | - return ( |
52 | | - <Fragment |
53 | | - key={`${activity.event_name}-${activity.created_at}-${activity?.from_user?.id}-${activity?.to_user?.id}`} |
54 | | - > |
55 | | - <AnimateEnter> |
56 | | - <TokenActivityRow activity={activity} /> |
57 | | - </AnimateEnter> |
58 | | - </Fragment> |
59 | | - ) |
60 | | - }) |
61 | | - })} |
62 | | - <AnimateEnter> |
63 | | - {!isLoadingActivities && (isFetchingNextPageActivities || hasNextPage) ? ( |
64 | | - <> |
65 | | - {isFetchingNextPageActivities && <Spinner size="small" color={'$color12'} />} |
66 | | - {hasNextPage && ( |
67 | | - <Button |
68 | | - onPress={() => { |
69 | | - fetchNextPage() |
70 | | - }} |
71 | | - disabled={isFetchingNextPageActivities || isFetchingActivities} |
72 | | - color="$color0" |
73 | | - width={200} |
74 | | - mx="auto" |
75 | | - mb="$6" |
76 | | - bc="$color10" |
| 53 | + |
| 54 | + <YStack gap="$5" testID="TokenDetailsHistory"> |
| 55 | + {hasPendingTransfers && ( |
| 56 | + <> |
| 57 | + <RowLabel>Pending Transfers</RowLabel> |
| 58 | + <AnimateEnter> |
| 59 | + {pendingTransfersData?.map((state) => ( |
| 60 | + <Fragment key={`${state.userOp.nonce}-pending`}> |
| 61 | + <AnimateEnter> |
| 62 | + <PendingTransferActivityRow coin={coin} state={state} /> |
| 63 | + </AnimateEnter> |
| 64 | + </Fragment> |
| 65 | + ))} |
| 66 | + </AnimateEnter> |
| 67 | + </> |
| 68 | + )} |
| 69 | + |
| 70 | + {(() => { |
| 71 | + switch (true) { |
| 72 | + case activitiesError !== null: |
| 73 | + return ( |
| 74 | + <Paragraph maxWidth={'600'} fontFamily={'$mono'} fontSize={'$5'} color={'$color12'}> |
| 75 | + {activitiesError?.message.split('.').at(0) ?? `${activitiesError}`} |
| 76 | + </Paragraph> |
| 77 | + ) |
| 78 | + case !pages || !pages[0]?.length: |
| 79 | + return null |
| 80 | + default: { |
| 81 | + let lastDate: string | undefined |
| 82 | + return ( |
| 83 | + <Card gap="$5" testID="TokenDetailsHistory" p="$5"> |
| 84 | + {pages?.map((activities) => { |
| 85 | + return activities.map((activity) => { |
| 86 | + const date = activity.created_at.toLocaleDateString() |
| 87 | + const isNewDate = !lastDate || date !== lastDate |
| 88 | + if (isNewDate) { |
| 89 | + lastDate = date |
| 90 | + } |
| 91 | + return ( |
| 92 | + <Fragment |
| 93 | + key={`${activity.event_name}-${activity.created_at}-${activity?.from_user?.id}-${activity?.to_user?.id}`} |
77 | 94 | > |
78 | | - Load More |
79 | | - </Button> |
80 | | - )} |
81 | | - </> |
82 | | - ) : null} |
83 | | - </AnimateEnter> |
84 | | - </Card> |
85 | | - ) |
| 95 | + <AnimateEnter> |
| 96 | + <TokenActivityRow activity={activity} /> |
| 97 | + </AnimateEnter> |
| 98 | + </Fragment> |
| 99 | + ) |
| 100 | + }) |
| 101 | + })} |
| 102 | + <AnimateEnter> |
| 103 | + {!isLoadingActivities && (isFetchingNextPageActivities || hasNextPage) ? ( |
| 104 | + <> |
| 105 | + {isFetchingNextPageActivities && ( |
| 106 | + <Spinner size="small" color={'$color12'} /> |
| 107 | + )} |
| 108 | + {hasNextPage && ( |
| 109 | + <Button |
| 110 | + onPress={() => { |
| 111 | + fetchNextPage() |
| 112 | + }} |
| 113 | + disabled={isFetchingNextPageActivities || isFetchingActivities} |
| 114 | + color="$color0" |
| 115 | + width={200} |
| 116 | + mx="auto" |
| 117 | + mb="$6" |
| 118 | + bc="$color10" |
| 119 | + > |
| 120 | + Load More |
| 121 | + </Button> |
| 122 | + )} |
| 123 | + </> |
| 124 | + ) : null} |
| 125 | + </AnimateEnter> |
| 126 | + </Card> |
| 127 | + ) |
| 128 | + } |
86 | 129 | } |
87 | | - } |
88 | | - })()} |
| 130 | + })()} |
| 131 | + </YStack> |
89 | 132 | </> |
90 | 133 | ) |
91 | 134 | } |
0 commit comments