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 (
-
- ${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}
/>