Show action button for revenue share correctly

WRadoslaw · Oct 13, 2023 · 1c5137b · 1c5137b
1 parent 7e3446e
commit 1c5137b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 31 deletions.
diff --git a/packages/atlas/src/components/_crt/CloseRevenueShareButton/CloseRevenueShareButton.tsx 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 <Button onClick={finalizeRevenueShare}>Close revenue share</Button>
+}
diff --git a/packages/atlas/src/components/_crt/CloseRevenueShareButton/index.ts 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
@@ -38,6 +38,7 @@ export type AuctionDatePickerProps = {
   onChange: (value: AuctionDatePickerValue) => void
 } & Omit<SelectProps<AuctionDatePickerValue>, 'onChange'>
 
+// TODO shake animation on date picker is very glitchy, for now just disable it
 export const AuctionDatePicker: FC<AuctionDatePickerProps> = ({
   items,
   value,

diff --git 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<number>(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 (
     <LimitedWidthContainer>
       <StartRevenueShare show={openRevenueShareModal} tokenId="1" onClose={() => setOpenRevenueShareModal(false)} />
@@ -83,10 +62,13 @@ export const CrtDashboard = () => {
           )}
           {currentTab === 2 && (
             <>
-              <Button onClick={() => setOpenRevenueShareModal(true)} icon={<SvgActionRevenueShare />}>
-                Start revenue share
-              </Button>
-              <Button onClick={finalizeRevenueShare}>Close revenue share</Button>
+              {!activeRevenueShare ? (
+                <Button onClick={() => setOpenRevenueShareModal(true)} icon={<SvgActionRevenueShare />}>
+                  Start revenue share
+                </Button>
+              ) : (
+                <CloseRevenueShareButton revenueShare={activeRevenueShare} />
+              )}
             </>
           )}
         </TabsContainer>

diff --git 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 (
     <LayoutGrid>
@@ -84,10 +85,10 @@ export const CrtRevenueTab = ({ token }: CrtRevenueTabProps) => {
         </GridItem>
       ) : null}
 
-      {token.revenueShares.length ? (
+      {finalizedRevenueShares.length ? (
         <GridItem colSpan={{ base: 12 }}>
           <RevenueShareHistoryTable
-            data={token.revenueShares.map((revenueShare) => ({
+            data={finalizedRevenueShares.map((revenueShare) => ({
               claimed: +(revenueShare.claimed ?? 0),
               stakers: revenueShare.stakers,
               totalParticipants: revenueShare.participantsNum,