Skip to content

Commit e1886c7

Browse files
youngkidwarrioryoungkidwarrior
committed
Update ui send slash data representation
1 parent ec9635d commit e1886c7

File tree

2 files changed

+74
-40
lines changed

2 files changed

+74
-40
lines changed

‎packages/app/features/account/rewards/activity/screen.tsx

+63-38
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import formatAmount from 'app/utils/formatAmount'
2727
import { zeroAddress } from 'viem'
2828
import { type PropsWithChildren, useRef, useId, useState } from 'react'
2929
import { DistributionClaimButton } from '../components/DistributionClaimButton'
30+
import { useSendAccount } from 'app/utils/send-accounts'
3031

3132
//@todo get this from the db
3233
const verificationTypesAndTitles = {
@@ -226,7 +227,10 @@ export function ActivityRewardsScreen() {
226227
<DistributionRequirementsCard distribution={distributions[selectedDistributionIndex]} />
227228
<SendPerksCards distribution={distributions[selectedDistributionIndex]} />
228229
<MultiplierCards distribution={distributions[selectedDistributionIndex]} />
229-
<RewardsProgressCard distribution={distributions[selectedDistributionIndex]} />
230+
<RewardsProgressCard
231+
distribution={distributions[selectedDistributionIndex]}
232+
previousDistribution={distributions[selectedDistributionIndex - 1]}
233+
/>
230234
<ClaimableRewardsCard distribution={distributions[selectedDistributionIndex]} />
231235
</YStack>
232236
)}
@@ -318,19 +322,29 @@ const Header = () => (
318322

319323
const DistributionRequirementsCard = ({
320324
distribution,
321-
}: { distribution: UseDistributionsResultData[number] }) => {
325+
previousDistribution,
326+
}: {
327+
distribution: UseDistributionsResultData[number]
328+
previousDistribution?: UseDistributionsResultData[number]
329+
}) => {
330+
const hasSent = Boolean(
331+
distribution.distribution_verifications_summary
332+
.at(0)
333+
?.verification_values?.find(({ type }) => type === 'send_ten')
334+
)
335+
const { data: sendAccount } = useSendAccount()
322336
const {
323337
data: snapshotBalance,
324338
isLoading: isLoadingSnapshotBalance,
325339
error: snapshotBalanceError,
326340
} = useReadSendTokenBalanceOf({
327341
chainId: distribution.chain_id as keyof typeof sendTokenAddress,
328-
args: [distribution.distribution_shares.at(0)?.address ?? zeroAddress],
342+
args: [sendAccount?.address ?? zeroAddress],
329343
blockNumber: distribution.snapshot_block_num
330344
? BigInt(distribution.snapshot_block_num)
331345
: undefined,
332346
query: {
333-
enabled: !!distribution.distribution_shares.at(0)?.address,
347+
enabled: hasSent && Boolean(sendAccount?.address),
334348
},
335349
})
336350

@@ -340,13 +354,36 @@ const DistributionRequirementsCard = ({
340354
.at(0)
341355
?.verification_values?.find(({ type }) => type === 'tag_registration')?.weight
342356

357+
const sendCeiling = distribution.distribution_verifications_summary[0]?.verification_values?.find(
358+
({ type }) => type === 'send_ceiling'
359+
)
360+
361+
const previousReward =
362+
previousDistribution?.distribution_shares?.[0]?.amount_after_slash ??
363+
distribution.hodler_min_balance
364+
365+
let percent = 0
366+
let balanceAfterSlash = 0n
367+
368+
if (sendCeiling?.weight && distribution.send_slash?.scaling_divisor) {
369+
const scaledPreviousReward = previousReward / distribution.send_slash.scaling_divisor
370+
// Multiply by 10000 to get 4 decimal places of precision
371+
percent = Math.min((sendCeiling.weight / scaledPreviousReward) * 10000, 10000)
372+
balanceAfterSlash = snapshotBalance
373+
? percent === 10000
374+
? snapshotBalance
375+
: (BigInt(snapshotBalance) * BigInt(Math.round(percent))) / BigInt(10000)
376+
: 0n
377+
}
378+
343379
return (
344380
<Card br={12} $gtMd={{ gap: '$4', p: '$7' }} p="$5">
345381
<Stack ai="center" jc="space-between" gap="$5" $gtXs={{ flexDirection: 'row' }}>
346382
<YStack gap="$2">
347383
<Label fontSize={'$5'} col={'$color10'}>
348-
Your SEND Balance
384+
Your Qualifying Balance
349385
</Label>
386+
350387
{isLoadingSnapshotBalance ? (
351388
<Spinner size="small" color={'$color11'} />
352389
) : (
@@ -359,7 +396,7 @@ const DistributionRequirementsCard = ({
359396
fontSize={'$9'}
360397
$gtXl={{ fontSize: '$10' }}
361398
>
362-
{`${formatAmount(snapshotBalance?.toString() ?? 0, 9, 0)} SEND`}
399+
{`${formatAmount(balanceAfterSlash?.toString() ?? 0, 9, 0)} SEND`}
363400
</Paragraph>
364401
</Theme>
365402
)}
@@ -591,25 +628,33 @@ const MultiplierCard = ({ children }: PropsWithChildren<CardProps>) => {
591628

592629
const RewardsProgressCard = ({
593630
distribution,
631+
previousDistribution,
594632
}: {
595633
distribution: UseDistributionsResultData[number]
634+
previousDistribution?: UseDistributionsResultData[number]
596635
}) => {
597-
const shareAmount = distribution.distribution_shares?.[0]?.amount
598-
const slashedAmount = distribution.distribution_shares?.[0]?.amount_after_slash
636+
const sendCeiling = distribution.distribution_verifications_summary[0]?.verification_values?.find(
637+
({ type }) => type === 'send_ceiling'
638+
)
639+
640+
if (!sendCeiling || !distribution.send_slash) return null
641+
642+
const previousReward =
643+
previousDistribution?.distribution_shares?.[0]?.amount_after_slash ??
644+
distribution.hodler_min_balance
599645

600-
if (!shareAmount || !slashedAmount) return null
646+
const scaledPreviousReward = previousReward / distribution.send_slash.scaling_divisor
601647

602-
const percentage = Math.floor((Number(slashedAmount) / Number(shareAmount)) * 100)
648+
const progress = Math.min(Math.floor((sendCeiling.weight / scaledPreviousReward) * 100), 100)
603649

604650
return (
605651
<YStack f={1} w={'100%'} gap="$5">
606652
<H3 fontWeight={'600'} color={'$color12'}>
607-
Progress
653+
Send Progress
608654
</H3>
609-
<Card br={'$6'} p="$7" w={'100%'}>
655+
<Card br={'$6'} p="$7" $xs={{ p: '$5' }} w={'100%'} maw={500}>
610656
<YStack gap="$4" w="100%">
611-
<XStack jc="space-between" ai="center">
612-
<Paragraph color="$color11">Current Rewards</Paragraph>
657+
<XStack jc="flex-end">
613658
<Paragraph
614659
ff={'$mono'}
615660
py={'$size.0.5'}
@@ -619,13 +664,12 @@ const RewardsProgressCard = ({
619664
$theme-light={{ borderColor: '$color12' }}
620665
borderRadius={'$4'}
621666
>
622-
{percentage}%
667+
{progress}%
623668
</Paragraph>
624669
</XStack>
625-
626-
<Stack w="100%" h="$1" br="$10" bc="$color3" overflow="hidden">
670+
<Stack w="100%" h="$1" br="$10" bc="$color3">
627671
<Stack
628-
w={`${percentage}%`}
672+
w={`${progress}%`}
629673
h="100%"
630674
br="$10"
631675
animation="quick"
@@ -637,25 +681,6 @@ const RewardsProgressCard = ({
637681
}}
638682
/>
639683
</Stack>
640-
641-
<XStack jc="space-between" ai="center">
642-
<YStack>
643-
<Paragraph color="$color10" size="$3">
644-
Current
645-
</Paragraph>
646-
<Paragraph fontFamily="$mono" color="$color12">
647-
{formatAmount(slashedAmount, 9, 0)} SEND
648-
</Paragraph>
649-
</YStack>
650-
<YStack ai="flex-end">
651-
<Paragraph color="$color10" size="$3">
652-
Estimated Maximum
653-
</Paragraph>
654-
<Paragraph fontFamily="$mono" color="$color12">
655-
{formatAmount(shareAmount, 9, 0)} SEND
656-
</Paragraph>
657-
</YStack>
658-
</XStack>
659684
</YStack>
660685
</Card>
661686
</YStack>
@@ -680,7 +705,7 @@ const ClaimableRewardsCard = ({
680705
return (
681706
<YStack f={1} w={'100%'} gap="$5" $sm={{ display: 'none' }}>
682707
<H3 fontWeight={'600'} color={'$color12'}>
683-
{isQualificationOver ? `Total ${distributionMonth}` : `Estimated ${distributionMonth}`}
708+
{isQualificationOver ? `Total ${distributionMonth}` : ` ${distributionMonth} Rewards`}
684709
</H3>
685710
<Card br={'$6'} p="$7" ai={'center'} w={'100%'}>
686711
<Stack ai="center" jc="space-between" fd="row" w="100%">

‎packages/app/utils/distributions.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type UseDistributionsResultData = (UseDistributionResultDistribution & {
4343
claim_end: Date
4444
distribution_shares: Tables<'distribution_shares'>[]
4545
distribution_verifications_summary: Views<'distribution_verifications_summary'>[]
46+
send_slash: Tables<'send_slash'> | null
4647
})[]
4748

4849
export const useDistributions = (): UseQueryResult<UseDistributionsResultData, PostgrestError> => {
@@ -77,15 +78,23 @@ export const useDistributions = (): UseQueryResult<UseDistributionsResultData, P
7778
After distribution 6 we switched to monthly distributions
7879
This function cuts out the first 6 distributions
7980
*/
80-
export const useMonthlyDistributions = () => {
81+
export const useMonthlyDistributions = (): UseQueryResult<
82+
UseDistributionsResultData,
83+
PostgrestError
84+
> => {
8185
const supabase = useSupabase()
8286
const { data: sendAccount } = useSendAccount()
8387
return useQuery({
8488
queryKey: ['monthly_distributions', sendAccount?.created_at],
8589
queryFn: async () => {
8690
const { data, error } = await supabase
8791
.from('distributions')
88-
.select('*, distribution_shares(*), distribution_verifications_summary(*)')
92+
.select(`
93+
*,
94+
distribution_shares(*),
95+
distribution_verifications_summary(*),
96+
send_slash(*)
97+
`)
8998
.gt('number', 6)
9099
.gt('qualification_end', sendAccount?.created_at)
91100
.order('number', { ascending: false })

0 commit comments

Comments
 (0)