Skip to content

Commit

Permalink
Fix activity list
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChewingGlass
ChewingGlass committed Aug 3, 2023
1 parent ffef292 commit e73e07a
Show file tree
Hide file tree
Showing 9 changed files with 183 additions and 373 deletions.
12 changes: 10 additions & 2 deletions src/features/account/AccountTokenScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,10 @@ const AccountTokenScreen = () => {
showTxnDetail({
item,
accountAddress: currentAccount?.address || '',
mint,
})
},
[currentAccount, showTxnDetail],
[currentAccount, showTxnDetail, mint],
)

const hasAirdrop = useMemo(() => {
Expand Down Expand Up @@ -250,6 +251,7 @@ const AccountTokenScreen = () => {
}}
>
<TxnListItem
mint={mint}
onPress={showTransactionDetail}
item={item}
now={now}
Expand All @@ -259,7 +261,13 @@ const AccountTokenScreen = () => {
</FadeInOut>
)
},
[activityData, bottomScreenHeaderHeight, now, showTransactionDetail],
[
activityData?.length,
bottomScreenHeaderHeight,
mint,
now,
showTransactionDetail,
],
)

const renderFooter = useCallback(() => {
Expand Down
164 changes: 11 additions & 153 deletions src/features/account/TransactionDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ import {
BottomSheetScrollView,
} from '@gorhom/bottom-sheet'
import useBackHandler from '@hooks/useBackHandler'
import animalName from 'angry-purple-tiger'
import { groupBy } from 'lodash'
import { PublicKey } from '@solana/web3.js'
import React, {
createContext,
FC,
ReactNode,
createContext,
useCallback,
useContext,
useMemo,
Expand All @@ -26,15 +25,14 @@ import { LayoutChangeEvent } from 'react-native'
import { Edge } from 'react-native-safe-area-context'
import { useCreateExplorerUrl } from '../../constants/urls'
import { Activity } from '../../types/activity'
import { ellipsizeAddress } from '../../utils/accountUtils'
import TransactionLineItem from './TransactionLineItem'
import { useTxnDetails } from './useTxn'

const initialState = {
show: () => undefined,
}

type DetailData = { item: Activity; accountAddress: string }
type DetailData = { item: Activity; accountAddress: string; mint: PublicKey }
type TransactionDetailSelectorActions = {
show: (data: DetailData) => void
}
Expand All @@ -49,22 +47,20 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
const [contentHeight, setContentHeight] = useState(0)
const { handleDismiss, setIsShowing } = useBackHandler(bottomSheetModalRef)

const { item: txn } = detailData || {}
const { item: txn, mint } = detailData || {}

const {
amount,
amountTitle,
color,
fee,
feePayer,
hotspotName,
icon,
paymentsReceived,
paymentsSent,
time,
title,
validatorName,
} = useTxnDetails(txn)
} = useTxnDetails(mint, txn)
const createExplorerUrl = useCreateExplorerUrl()

const snapPoints = useMemo(() => {
Expand Down Expand Up @@ -115,35 +111,6 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {

const handleComponent = useCallback(() => <HandleBasic />, [])

const rewards = useMemo(() => {
if (!txn?.rewards?.length || txn.type === 'subnetwork_rewards_v1') {
return null
}

const grouped = groupBy(txn.rewards, (reward) => {
if (reward.type === 'securities') return reward.type

return `${reward.gateway}.${reward.type}`
})

return Object.keys(grouped).map((key) => {
const group = grouped[key]
const totalAmount = group.reduce((sum, { amount: amt }) => sum + amt, 0)
const typeName = t(`transactions.rewardTypes.${group[0].type}`)
let name = ''
if (group[0].gateway) {
name = animalName(group[0].gateway)
} else {
name = typeName
}
return {
name,
amount: totalAmount,
type: typeName,
}
})
}, [t, txn])

const handleContentLayout = useCallback((e: LayoutChangeEvent) => {
setContentHeight(e.nativeEvent.layout.height)
}, [])
Expand Down Expand Up @@ -172,62 +139,14 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
icon={icon}
/>

{!!hotspotName && (
<TransactionLineItem
title={t('transactions.hotspot')}
bodyText={hotspotName}
navTo={createExplorerUrl('hotspot', txn?.gateway)}
/>
)}
{!!validatorName && (
<TransactionLineItem
title={t('transactions.validator')}
bodyText={validatorName}
navTo={createExplorerUrl('validator', txn?.gateway)}
/>
)}

{!!txn?.buyer && (
<TransactionLineItem
title={t('transactions.buyer')}
bodyText={ellipsizeAddress(txn.buyer)}
navTo={createExplorerUrl('account', txn.buyer)}
/>
)}

{!!txn?.seller && (
<TransactionLineItem
title={t('transactions.seller')}
bodyText={ellipsizeAddress(txn.seller)}
navTo={createExplorerUrl('account', txn.seller)}
/>
)}

{!!txn?.payee && (
<TransactionLineItem
title={t('transactions.payee', { index: '' })}
bodyText={txn.payee}
isAddress
navTo={createExplorerUrl('account', txn.payee)}
/>
)}

{paymentsSent.map(({ amount: amt, payee }, index) => (
{paymentsSent.map(({ amount: amt }, index) => (
<React.Fragment key={`${index}.amountToPayee`}>
<TransactionLineItem
title={t('transactions.amountToPayee', {
index: index + 1,
})}
bodyText={amt}
bodyColor={color}
/>
<TransactionLineItem
title={t('transactions.payee', {
index: index + 1,
})}
bodyText={payee}
isAddress
navTo={createExplorerUrl('account', payee)}
bodyColor="blueBright500"
/>
</React.Fragment>
))}
Expand All @@ -237,33 +156,11 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
<TransactionLineItem
title={t('transactions.amount')}
bodyText={amt}
bodyColor={color}
/>
<TransactionLineItem
title={t('transactions.from')}
bodyText={txn?.payer || ''}
isAddress
navTo={
txn?.payer
? createExplorerUrl('account', txn.payer)
: undefined
}
bodyColor="greenBright500"
/>
</React.Fragment>
))}

{rewards?.map((reward, index) => {
return (
<TransactionLineItem
key={`rewards.${index}`}
title={reward.name}
bodyTextEnd={reward.amount?.toString() || ''}
bodyEndColor={color}
bodyText={reward.type}
/>
)
})}

{!!amountTitle && (
<TransactionLineItem
title={amountTitle}
Expand All @@ -283,46 +180,6 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
/>
)}

{!!txn?.owner && (
<TransactionLineItem
title={t('transactions.owner')}
bodyText={txn.owner}
navTo={createExplorerUrl('account', txn.owner)}
/>
)}

{!!txn?.oldOwner && (
<TransactionLineItem
title={t('transactions.oldOwner')}
bodyText={txn.oldOwner}
navTo={createExplorerUrl('account', txn.oldOwner)}
/>
)}

{!!txn?.oldAddress && (
<TransactionLineItem
title={t('transactions.oldAddress')}
bodyText={txn.oldAddress}
navTo={createExplorerUrl('account', txn.oldAddress)}
/>
)}

{!!txn?.newOwner && (
<TransactionLineItem
title={t('transactions.newOwner')}
bodyText={txn.newOwner}
navTo={createExplorerUrl('account', txn.newOwner)}
/>
)}

{!!txn?.newAddress && (
<TransactionLineItem
title={t('transactions.newAddress')}
bodyText={txn.newAddress}
navTo={createExplorerUrl('account', txn.newAddress)}
/>
)}

<TransactionLineItem
title={t('transactions.date')}
bodyText={time}
Expand Down Expand Up @@ -353,9 +210,10 @@ const TransactionDetailSelector = ({ children }: { children: ReactNode }) => {
export const useTransactionDetail = () =>
useContext(TransactionDetailSelectorContext)

export const withTransactionDetail = (Component: FC) => () =>
(
export const withTransactionDetail = (Component: FC) => () => {
return (
<TransactionDetailSelector>
<Component />
</TransactionDetailSelector>
)
}
8 changes: 6 additions & 2 deletions src/features/account/TxnListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ import Pending from '@assets/images/pending.svg'
import Box from '@components/Box'
import Text from '@components/Text'
import TouchableOpacityBox from '@components/TouchableOpacityBox'
import { PublicKey } from '@solana/web3.js'
import React, { memo, useCallback, useMemo } from 'react'
import { Activity } from '../../types/activity'
import useTxn from './useTxn'

type Props = {
mint: PublicKey
item: Activity
now: Date
isLast: boolean
onPress: (item: Activity) => void
}
const TxnListItem = ({ item, now, isLast, onPress }: Props) => {
const { listIcon, title, color, time, getAmount } = useTxn(item, { now })
const TxnListItem = ({ mint, item, now, isLast, onPress }: Props) => {
const { listIcon, title, color, time, getAmount } = useTxn(mint, item, {
now,
})
const amt = useMemo(() => getAmount(), [getAmount])

const handlePress = useCallback(() => {
Expand Down
21 changes: 11 additions & 10 deletions src/features/account/useSolanaActivityList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,20 +94,21 @@ export default ({

if (filter !== 'in' && filter !== 'out' && filter !== 'all') return []
if (filter === 'in' || filter === 'out') {
const payments = solanaActivity.data[account.solanaAddress]?.payment[
mintStr
]?.filter((txn) => txn.mint === mintStr)
const payments =
solanaActivity.data[account.solanaAddress]?.payment[mintStr]
return payments?.filter((txn) =>
filter === 'out'
? txn.payee === account.solanaAddress
: txn.payee !== account.solanaAddress,
txn.payments?.some((payment) =>
payment.mint === mintStr &&
payment.owner === account?.solanaAddress &&
filter === 'out'
? payment.amount < 0
: payment.amount > 0,
),
)
}

return solanaActivity.data[account.solanaAddress][filter][mintStr]?.filter(
(txn) => txn.mint === mintStr,
)
}, [account, filter, solanaActivity.data, mintStr])
return solanaActivity.data[account.solanaAddress][filter][mintStr]
}, [account?.solanaAddress, solanaActivity.data, mintStr, filter])

const loading = useMemo(() => {
return solanaActivity.loading
Expand Down
Loading

0 comments on commit e73e07a

Please sign in to comment.