🧇 Unlock revenue share

packages/atlas/package.json

@@ -39,7 +39,7 @@
     "@hookform/resolvers": "^2.9.10",
     "@joystream/js": "^1.4.0",
     "@joystream/metadata-protobuf": "2.8.1",
-    "@joystream/types": "2.1.0",
+    "@joystream/types": "4.0.0",
     "@livesession/sdk": "^1.1.4",
     "@loadable/component": "^5.15.2",
     "@lottiefiles/react-lottie-player": "^3.5.0",

packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { ReactElement, useCallback } from 'react'
 
 import { SvgActionCalendar, SvgJoyTokenMonochrome16 } from '@/assets/icons'
 import { Avatar } from '@/components/Avatar'
@@ -8,35 +8,61 @@ import { NumberFormat } from '@/components/NumberFormat'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
 import { InfoBox, Wrapper } from '@/components/_crt/RevenueShareWidget/RevenueShareWidget.styles'
+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 { formatDateTime } from '@/utils/time'
 
 export type RevenueShareWidgetProps = {
+  tokenId: string
   tokenName: string
   userShare: number
   userTokens: number
   shareEndDate: Date
-  onAction?: () => void
+  onClaimShare?: () => void
   status: 'active' | 'upcoming' | 'locked' | 'unlocked'
 }
 export const RevenueShareWidget = ({
   userShare,
   userTokens,
   tokenName,
-  onAction,
+  onClaimShare,
   shareEndDate,
   status,
+  tokenId,
 }: RevenueShareWidgetProps) => {
+  const { joystream, proxyCallback } = useJoystream()
+  const handleTransaction = useTransaction()
+  const { memberId } = useUser()
+  const { displaySnackbar } = useSnackbar()
+  const unlockStake = useCallback(async () => {
+    if (!joystream || !memberId) {
+      return
+    }
+    handleTransaction({
+      txFactory: async (updateStatus) =>
+        (await joystream.extrinsics).exitRevenueSplit(tokenId, memberId, proxyCallback(updateStatus)),
+      onTxSync: async (data) => {
+        displaySnackbar({
+          title: `${data.amount} $${tokenName} unlocked`,
+          iconType: 'success',
+        })
+      },
+    })
+  }, [joystream, memberId, handleTransaction, tokenId, proxyCallback, displaySnackbar, tokenName])
+
   const actionNode = () => {
     switch (status) {
       case 'active':
         return (
-          <Button fullWidth onClick={onAction}>
+          <Button fullWidth onClick={onClaimShare}>
             Claim your share
           </Button>
         )
       case 'unlocked':
         return (
-          <Button fullWidth onClick={onAction}>
+          <Button fullWidth onClick={unlockStake}>
             Unlock tokens
           </Button>
         )

packages/atlas/src/joystream-lib/extrinsics.ts

@@ -39,6 +39,7 @@ import {
   ChannelInputBuckets,
   ChannelInputMetadata,
   CommentReaction,
+  ExitRevenueSplitResult,
   ExtrinsicResult,
   ExtrinsicStatus,
   ExtrinsicStatusCallbackFn,
@@ -1011,14 +1012,15 @@ export class JoystreamLibExtrinsics {
     return this.api.tx.projectToken.exitRevenueSplit(parseInt(tokenId), parseInt(memberId))
   }
 
-  exitRevenueSplit: PublicExtrinsic<typeof this.exitRevenueSplitTx, ExtrinsicResult> = async (
+  exitRevenueSplit: PublicExtrinsic<typeof this.exitRevenueSplitTx, ExitRevenueSplitResult> = async (
     tokenId,
     memberId,
     cb
   ) => {
     const tx = await this.exitRevenueSplitTx(tokenId, memberId)
-    const { block } = await this.sendExtrinsic(tx, cb)
-    return { block }
+    const { block, getEventData } = await this.sendExtrinsic(tx, cb)
+    const amount = getEventData('projectToken', 'RevenueSplitLeft')[2]
+    return { block, amount: amount.toString() }
   }
 
   participateInSplitTx = async (tokenId: TokenId, memberId: MemberId, amount: StringifiedNumber) => {

packages/atlas/src/joystream-lib/types.ts

@@ -153,6 +153,9 @@ export type VideoExtrinsicResult = ExtrinsicResult<{
 export type MemberExtrinsicResult = ExtrinsicResult<{ memberId: MemberId }>
 export type NftExtrinsicResult = ExtrinsicResult
 export type MetaprotcolExtrinsicResult = ExtrinsicResult<{ metaprotocol: true; transactionHash: string }>
+export type ExitRevenueSplitResult = {
+  amount: string
+} & ExtrinsicResult
 
 type TxMethodsFromClass<T> = T extends `${infer _}Tx` ? T : never
 

yarn.lock

@@ -4217,7 +4217,7 @@ __metadata:
     "@joystream/js": ^1.4.0
     "@joystream/metadata-protobuf": 2.8.1
     "@joystream/prettier-config": ^1.0.0
-    "@joystream/types": 2.1.0
+    "@joystream/types": 4.0.0
     "@livesession/sdk": ^1.1.4
     "@loadable/component": ^5.15.2
     "@lottiefiles/react-lottie-player": ^3.5.0
@@ -4367,7 +4367,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@joystream/types@npm:2.1.0, @joystream/types@npm:^2.0.0":
+"@joystream/types@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@joystream/types@npm:4.0.0"
+  dependencies:
+    "@polkadot/api": 8.9.1
+    "@polkadot/keyring": 9.5.1
+    "@polkadot/types": 8.9.1
+    "@types/lodash": ^4.14.157
+    "@types/vfile": ^4.0.0
+    lodash: ^4.17.15
+    moment: ^2.24.0
+  checksum: 8af69c43fe9c54a0dc3327c9006bd21cb130c6aceb41410e674db79821dcdf68440634ac28c3d3eb678b679830d8929ad36ea9340ce0d0e5f914668db4ce853c
+  languageName: node
+  linkType: hard
+
+"@joystream/types@npm:^2.0.0":
   version: 2.1.0
   resolution: "@joystream/types@npm:2.1.0"
   dependencies: