From 540216227dca264eeff0a30a849fa8f0988d66c5 Mon Sep 17 00:00:00 2001 From: WRadoslaw Date: Wed, 8 Nov 2023 16:28:37 +0100 Subject: [PATCH] Fix revenue share participation modal --- .../_crt/ClaimShareModal/ClaimShareModal.tsx | 1 + .../_crt/RevenueShareParticipationWidget.tsx | 59 +++++++++++++++---- .../RevenueShareStakersTable.tsx | 3 +- .../CrtDashboard/tabs/CrtRevenueTab.tsx | 13 ++-- 4 files changed, 61 insertions(+), 15 deletions(-) diff --git a/packages/atlas/src/components/_crt/ClaimShareModal/ClaimShareModal.tsx b/packages/atlas/src/components/_crt/ClaimShareModal/ClaimShareModal.tsx index 4d736cfec4..2af10e5ed6 100644 --- a/packages/atlas/src/components/_crt/ClaimShareModal/ClaimShareModal.tsx +++ b/packages/atlas/src/components/_crt/ClaimShareModal/ClaimShareModal.tsx @@ -82,6 +82,7 @@ export const ClaimShareModal = ({ onClose, token, show }: ClaimShareModalProps) }} secondaryButton={{ text: 'Cancel', + onClick: onClose, }} > diff --git a/packages/atlas/src/components/_crt/RevenueShareParticipationWidget.tsx b/packages/atlas/src/components/_crt/RevenueShareParticipationWidget.tsx index da2d385040..82f9bbcd2a 100644 --- a/packages/atlas/src/components/_crt/RevenueShareParticipationWidget.tsx +++ b/packages/atlas/src/components/_crt/RevenueShareParticipationWidget.tsx @@ -1,4 +1,6 @@ import styled from '@emotion/styled' +import BN from 'bn.js' +import { useNavigate } from 'react-router' import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' import { SvgActionCheck, SvgJoyTokenMonochrome16 } from '@/assets/icons' @@ -7,19 +9,50 @@ import { Pill } from '@/components/Pill' import { Text } from '@/components/Text' import { WidgetTile } from '@/components/WidgetTile' import { Button } from '@/components/_buttons/Button' +import { absoluteRoutes } from '@/config/routes' +import { hapiBnToTokenNumber } from '@/joystream-lib/utils' +import { useJoystream } from '@/providers/joystream' import { useJoystreamStore } from '@/providers/joystream/joystream.store' +import { useSnackbar } from '@/providers/snackbars' +import { useTransaction } from '@/providers/transactions/transactions.hooks' import { useUser } from '@/providers/user/user.hooks' import { cVar } from '@/styles' export type RevenueShareParticipationWidgetProps = { revenueShare: FullCreatorTokenFragment['revenueShares'][number] + token: FullCreatorTokenFragment + onClaimShare: () => void } -// todo: correct aggregated values -export const RevenueShareParticipationWidget = ({ revenueShare }: RevenueShareParticipationWidgetProps) => { +export const RevenueShareParticipationWidget = ({ + revenueShare, + onClaimShare, + token, +}: RevenueShareParticipationWidgetProps) => { const { memberId } = useUser() const { currentBlock } = useJoystreamStore() + const tokenPrice = useJoystream().tokenPrice ?? 0 const hasEnded = revenueShare.endsAt < currentBlock + const { joystream, proxyCallback } = useJoystream() + const { displaySnackbar } = useSnackbar() + const handleTransaction = useTransaction() + const navigate = useNavigate() + + const handleExitRevenueShare = async () => { + if (!joystream || !token || !memberId) return + handleTransaction({ + txFactory: async (updateStatus) => + (await joystream.extrinsics).exitRevenueSplit(token.id, memberId, proxyCallback(updateStatus)), + onTxSync: async (data) => { + displaySnackbar({ + title: `${data.amount} $${token.symbol} unlocked`, + iconType: 'success', + actionText: 'Go to my portfolio', + onActionClick: () => navigate(absoluteRoutes.viewer.portfolio()), + }) + }, + }) + } const actionNode = () => { const hasStaked = revenueShare.stakers.some((staker) => staker.account.member.id === memberId) @@ -28,7 +61,7 @@ export const RevenueShareParticipationWidget = ({ revenueShare }: RevenueSharePa return } size="large" label="Staked your tokens" /> } else { return ( - ) @@ -41,9 +74,13 @@ export const RevenueShareParticipationWidget = ({ revenueShare }: RevenueSharePa return } size="large" label="Tokens claimed" /> } - // todo: not sure what transaction should be used to claim staked tokens - maybe exitRevenue split - return + return ( + + ) } + return ( - {revenueShare.claimed}/{revenueShare.claimed} + {hapiBnToTokenNumber(new BN(revenueShare.claimed))}/ + {hapiBnToTokenNumber(new BN(revenueShare.allocation))} - ${revenueShare.claimed}/{revenueShare.claimed} + ${(hapiBnToTokenNumber(new BN(revenueShare.claimed)) * tokenPrice).toFixed(2)}/ + {(hapiBnToTokenNumber(new BN(revenueShare.allocation)) * tokenPrice).toFixed(2)} @@ -73,17 +112,17 @@ export const RevenueShareParticipationWidget = ({ revenueShare }: RevenueSharePa ENDED ON - {revenueShare.stakers.length}/69420 + {revenueShare.stakers.length}/{token.accountsNum} - {Math.round((revenueShare.stakers.length / 69420) * 100)}% holders + {Math.round((revenueShare.stakers.length / token.accountsNum) * 100)}% holders } diff --git a/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx b/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx index 9cbd60d150..e538cde328 100644 --- a/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx +++ b/packages/atlas/src/components/_crt/RevenueShareStakersTable/RevenueShareStakersTable.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled' +import BN from 'bn.js' import { useMemo } from 'react' import { NumberFormat } from '@/components/NumberFormat' @@ -17,7 +18,7 @@ export type RevenueShareStakersTableProps = { stakedAtBlock: number memberId: string staked: number - earnings: number + earnings: BN }[] tokenSymbol?: string | null } diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx index 3de2c12158..f4001436f8 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx @@ -1,5 +1,5 @@ import { BN } from 'bn.js' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' import { SvgJoyTokenMonochrome24 } from '@/assets/icons' @@ -22,6 +22,7 @@ type CrtRevenueTabProps = { export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { const { activeChannel } = useUser() + const [openClaimShareModal, setOpenClaimShareModal] = useState(false) const memoizedChannelStateBloatBond = useMemo(() => { return new BN(activeChannel?.channelStateBloatBond || 0) }, [activeChannel?.channelStateBloatBond]) @@ -33,7 +34,7 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { return ( <> - undefined} show={true} token={token} /> + setOpenClaimShareModal(false)} show={openClaimShareModal} token={token} /> @@ -70,7 +71,11 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { {activeRevenueShare && ( - + setOpenClaimShareModal(true)} + /> )} @@ -81,7 +86,7 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { memberId: staker.account.member.id, stakedAtBlock: staker.createdIn, staked: +(staker.stakedAmount ?? 0), - earnings: +(staker.earnings ?? 0), + earnings: new BN(staker.earnings ?? 0), }))} tokenSymbol={token.symbol} />