diff --git a/packages/atlas/src/components/_crt/CloseRevenueShareButton/CloseRevenueShareButton.tsx b/packages/atlas/src/components/_crt/CloseRevenueShareButton/CloseRevenueShareButton.tsx new file mode 100644 index 0000000000..7fc8c43bad --- /dev/null +++ b/packages/atlas/src/components/_crt/CloseRevenueShareButton/CloseRevenueShareButton.tsx @@ -0,0 +1,45 @@ +import { useCallback } from 'react' + +import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' +import { Button } from '@/components/_buttons/Button' +import { atlasConfig } from '@/config' +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' + +type CloseRevenueShareButtonProps = { + revenueShare: FullCreatorTokenFragment['revenueShares'][number] +} + +export const CloseRevenueShareButton = ({ revenueShare }: CloseRevenueShareButtonProps) => { + const { joystream, proxyCallback } = useJoystream() + const { channelId, memberId } = useUser() + const handleTransaction = useTransaction() + const { displaySnackbar } = useSnackbar() + const { currentBlock } = useJoystreamStore() + + const finalizeRevenueShare = useCallback(() => { + if (!joystream || !memberId || !channelId) { + return + } + handleTransaction({ + txFactory: async (updateStatus) => + (await joystream.extrinsics).finalizeRevenueSplit(memberId, channelId, proxyCallback(updateStatus)), + onTxSync: async (data) => { + displaySnackbar({ + title: 'Revenue share is closed', + description: `Remaining unclaimed ${data.amount} ${atlasConfig.joystream.tokenTicker} was transfered back to your channel balance`, + iconType: 'info', + }) + }, + }) + }, [channelId, displaySnackbar, handleTransaction, joystream, memberId, proxyCallback]) + + if (currentBlock < revenueShare.endsAt) { + return null + } + + return +} diff --git a/packages/atlas/src/components/_crt/CloseRevenueShareButton/index.ts b/packages/atlas/src/components/_crt/CloseRevenueShareButton/index.ts new file mode 100644 index 0000000000..2ff21a0703 --- /dev/null +++ b/packages/atlas/src/components/_crt/CloseRevenueShareButton/index.ts @@ -0,0 +1 @@ +export * from './CloseRevenueShareButton' diff --git a/packages/atlas/src/components/_inputs/AuctionDatePicker/AuctionDatePicker.tsx b/packages/atlas/src/components/_inputs/AuctionDatePicker/AuctionDatePicker.tsx index c3c5e3175c..f806a4e757 100644 --- a/packages/atlas/src/components/_inputs/AuctionDatePicker/AuctionDatePicker.tsx +++ b/packages/atlas/src/components/_inputs/AuctionDatePicker/AuctionDatePicker.tsx @@ -38,6 +38,7 @@ export type AuctionDatePickerProps = { onChange: (value: AuctionDatePickerValue) => void } & Omit, 'onChange'> +// TODO shake animation on date picker is very glitchy, for now just disable it export const AuctionDatePicker: FC = ({ items, value, diff --git a/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx b/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx index 1a145cbc54..dade1d15d6 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx @@ -6,11 +6,8 @@ import { LimitedWidthContainer } from '@/components/LimitedWidthContainer' import { Tabs } from '@/components/Tabs' import { Text } from '@/components/Text' import { Button } from '@/components/_buttons/Button' +import { CloseRevenueShareButton } from '@/components/_crt/CloseRevenueShareButton' import { StartRevenueShare } from '@/components/_crt/StartRevenueShareModal/StartRevenueShareModal' -import { atlasConfig } from '@/config' -import { useJoystream } from '@/providers/joystream' -import { useSnackbar } from '@/providers/snackbars' -import { useTransaction } from '@/providers/transactions/transactions.hooks' import { useUser } from '@/providers/user/user.hooks' import { HeaderContainer, MainContainer, TabsContainer } from '@/views/studio/CrtDashboard/CrtDashboard.styles' import { CrtDashboardMainTab } from '@/views/studio/CrtDashboard/tabs/CrtDashboardMainTab' @@ -22,42 +19,24 @@ const TABS = ['Dashboard', 'Holders', 'Revenue share', 'Settings'] as const export const CrtDashboard = () => { const [currentTab, setCurrentTab] = useState(0) const [openRevenueShareModal, setOpenRevenueShareModal] = useState(false) - const { joystream, proxyCallback } = useJoystream() - const { channelId, memberId, activeChannel } = useUser() + const { activeChannel } = useUser() const { data } = useGetFullCreatorTokenQuery({ variables: { id: activeChannel?.creatorToken?.token.id ?? '', }, }) - const { displaySnackbar } = useSnackbar() - const handleTransaction = useTransaction() const handleChangeTab = useCallback((idx: number) => { setCurrentTab(idx) }, []) const mappedTabs = TABS.map((tab) => ({ name: tab })) - const finalizeRevenueShare = useCallback(() => { - if (!joystream || !memberId || !channelId) { - return - } - handleTransaction({ - txFactory: async (updateStatus) => - (await joystream.extrinsics).finalizeRevenueSplit(memberId, channelId, proxyCallback(updateStatus)), - onTxSync: async (data) => { - displaySnackbar({ - title: 'Revenue share is closed', - description: `Remaining unclaimed ${data.amount} ${atlasConfig.joystream.tokenTicker} was transfered back to your channel balance`, - iconType: 'info', - }) - }, - }) - }, [channelId, displaySnackbar, handleTransaction, joystream, memberId, proxyCallback]) - if (!data?.creatorTokenById) { return null } + const activeRevenueShare = data.creatorTokenById.revenueShares.find((revenueShare) => !revenueShare.finalized) + return ( setOpenRevenueShareModal(false)} /> @@ -83,10 +62,13 @@ export const CrtDashboard = () => { )} {currentTab === 2 && ( <> - - + {!activeRevenueShare ? ( + + ) : ( + + )} )} diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx index 139ea82137..1ea1e2dbff 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx @@ -28,6 +28,7 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { }) const memberTokenAccount = data?.tokenAccounts[0] const activeRevenueShare = token.revenueShares.find((revenueShare) => !revenueShare.finalized) + const finalizedRevenueShares = token.revenueShares.filter((revenueShare) => revenueShare.finalized) return ( @@ -84,10 +85,10 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => { ) : null} - {token.revenueShares.length ? ( + {finalizedRevenueShares.length ? ( ({ + data={finalizedRevenueShares.map((revenueShare) => ({ claimed: +(revenueShare.claimed ?? 0), stakers: revenueShare.stakers, totalParticipants: revenueShare.participantsNum,