Integrate crt edit view with transaction

WRadoslaw · Oct 20, 2023 · affa064 · affa064
1 parent cb27b22
commit affa064
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 42 deletions.
diff --git a/packages/atlas/src/components/CrtPreviewLayout/CrtPreviewLayout.tsx b/packages/atlas/src/components/CrtPreviewLayout/CrtPreviewLayout.tsx
@@ -1,6 +1,6 @@
-import BN from 'bn.js'
 import { ReactElement, useMemo } from 'react'
 
+import { useGetCreatorTokenHoldersQuery } from '@/api/queries/__generated__/creatorTokens.generated'
 import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated'
 import { SvgActionChevronL, SvgActionNewTab } from '@/assets/icons'
 import { JoyTokenIcon } from '@/components/JoyTokenIcon'
@@ -10,9 +10,11 @@ import { Button } from '@/components/_buttons/Button'
 import { CrtBasicInfoWidget } from '@/components/_crt/CrtBasicInfoWidget'
 import { CrtStatusWidget } from '@/components/_crt/CrtStatusWidget'
 import { HoldersWidget } from '@/components/_crt/HoldersWidget'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { absoluteRoutes } from '@/config/routes'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { useUser } from '@/providers/user/user.hooks'
+import { permillToPercentage } from '@/utils/number'
 
 import {
   FirstColumn,
@@ -36,27 +38,40 @@ export const CrtPreviewLayout = ({
 }: CrtPreviewViewProps) => {
   const lgMatch = useMediaMatch('lg')
   const { memberId } = useUser()
+  const { data } = useGetCreatorTokenHoldersQuery({
+    variables: {
+      where: {
+        token: {
+          id_eq: token.id,
+        },
+        member: {
+          id_eq: memberId,
+        },
+      },
+    },
+  })
+
   const basicDetails = useMemo(() => {
     const details = []
     if (token.totalSupply)
       details.push({
         caption: 'TOTAL REV.',
-        content: token.totalSupply,
+        content: +token.totalSupply,
         icon: <JoyTokenIcon size={16} variant="silver" />,
         tooltipText: 'Lorem ipsum',
       })
 
-    if (token.annualCreatorReward)
+    if (token.revenueShareRatioPermill)
       details.push({
         caption: 'REV. SHARE',
-        content: `${token.annualCreatorReward}%`,
+        content: `${permillToPercentage(token.revenueShareRatioPermill)}%`,
         tooltipText: 'Lorem ipsum',
       })
 
-    if (token.annualCreatorReward)
+    if (token.annualCreatorRewardPermill)
       details.push({
         caption: 'AN. REWARD',
-        content: `${token.annualCreatorReward}%`,
+        content: `${permillToPercentage(token.annualCreatorRewardPermill)}%`,
         tooltipText: 'Lorem ipsum',
       })
     return details
@@ -85,13 +100,17 @@ export const CrtPreviewLayout = ({
         <CrtStatusWidget
           name={token.symbol ?? 'N/A'}
           creationDate={new Date(token.createdAt)}
-          supply={new BN(token.totalSupply) ?? 0}
-          marketCap={token.annualCreatorReward}
-          revenue={token.annualCreatorReward}
-          revenueShare={token.annualCreatorReward}
-          transactionVolume={token.annualCreatorReward}
+          supply={+(token.totalSupply ?? 0)}
+          marketCap={token.annualCreatorRewardPermill}
+          revenue={token.annualCreatorRewardPermill}
+          revenueShare={token.annualCreatorRewardPermill}
+          transactionVolume={token.annualCreatorRewardPermill}
         />
-        <HoldersWidget tokenId={token.id} ownerId={memberId ?? ''} />
+        {data ? (
+          <HoldersWidget totalSupply={+token.totalSupply} holders={data.tokenAccounts} ownerId={memberId ?? ''} />
+        ) : (
+          <SkeletonLoader width="100%" height={300} />
+        )}
       </SecondColumn>
     </Wrapper>
   )

diff --git a/packages/atlas/src/components/_crt/CrtHoldersTable/CrtHoldersTable.tsx b/packages/atlas/src/components/_crt/CrtHoldersTable/CrtHoldersTable.tsx
@@ -18,6 +18,7 @@ type CrtHolder = {
   memberId: string
   total: number | BN
   vested: number | BN
+  allocation: number
 }
 
 export type CrtHoldersTableProps = {
@@ -46,9 +47,9 @@ export const CrtHoldersTable = ({ isLoading, data, className, ownerId }: CrtHold
         total: (
           <RightAlignedCell>
             <FlexBox alignItems="center" gap={1}>
-              <NumberFormat format="short" value={row.vested} as="p" variant="t200-strong" />
+              <NumberFormat format="short" value={row.total} as="p" variant="t200-strong" />
               <Text variant="t200" as="p" color="colorText">
-                (20%)
+                ({row.allocation}%)
               </Text>
             </FlexBox>
           </RightAlignedCell>

diff --git a/packages/atlas/src/components/_crt/HoldersWidget/HoldersWidget.tsx b/packages/atlas/src/components/_crt/HoldersWidget/HoldersWidget.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled'
-import BN from 'bn.js'
 import { useState } from 'react'
 
-import { useGetCreatorTokenHoldersQuery } from '@/api/queries/__generated__/creatorTokens.generated'
+import { BasicCreatorTokenHolderFragment } from '@/api/queries/__generated__/fragments.generated'
 import { SvgActionChevronR } from '@/assets/icons'
 import { FlexBox } from '@/components/FlexBox'
 import { Text } from '@/components/Text'
@@ -12,33 +11,19 @@ import { DialogModal } from '@/components/_overlays/DialogModal'
 import { cVar, sizes } from '@/styles'
 
 export type HoldersWidgetProps = {
-  tokenId: string
   ownerId: string
+  holders: BasicCreatorTokenHolderFragment[]
+  totalSupply: number
 }
 
-export const HoldersWidget = ({ tokenId, ownerId }: HoldersWidgetProps) => {
+export const HoldersWidget = ({ holders: _holders, ownerId, totalSupply }: HoldersWidgetProps) => {
   const [showModal, setShowModal] = useState(false)
-  const { data } = useGetCreatorTokenHoldersQuery({
-    variables: {
-      where: {
-        token: {
-          id_eq: tokenId,
-        },
-        member: {
-          id_eq: ownerId,
-        },
-      },
-    },
-  })
 
-  if (!data) return null
-
-  const { tokenAccounts } = data
-
-  const holders = tokenAccounts.map((holder) => ({
+  const holders = _holders.map((holder) => ({
     memberId: ownerId,
-    total: new BN(holder.totalAmount),
-    vested: new BN(holder.vestingSchedules[0].totalVestingAmount),
+    total: +holder.totalAmount,
+    allocation: Math.round((+holder.totalAmount / totalSupply) * 100),
+    vested: +holder.vestingSchedules[0].totalVestingAmount,
   }))
 
   return (
@@ -54,7 +39,7 @@ export const HoldersWidget = ({ tokenId, ownerId }: HoldersWidgetProps) => {
         <Text variant="h500" as="span">
           Holders{' '}
           <Text variant="h500" as="span" color="colorText">
-            ({tokenAccounts.length})
+            ({holders.length})
           </Text>
         </Text>
         <TextButton icon={<SvgActionChevronR />} iconPlacement="right" onClick={() => setShowModal(true)}>

diff --git a/packages/atlas/src/components/_crt/TokenDetails/TokenDetails.tsx b/packages/atlas/src/components/_crt/TokenDetails/TokenDetails.tsx
@@ -45,7 +45,7 @@ export const TokenDetails = ({ about, videoId, benefits }: TokenDetailsProps) =>
           <PlayerSkeletonLoader />
         )}
       </VideoBox>
-      {benefits && (
+      {benefits?.length ? (
         <FlexBox gap={6} flow="column">
           <Text variant="h500" as="h5">
             Benefits
@@ -64,7 +64,7 @@ export const TokenDetails = ({ about, videoId, benefits }: TokenDetailsProps) =>
             </FlexBox>
           ))}
         </FlexBox>
-      )}
+      ) : null}
       {about && (
         <FlexBox gap={6} flow="column">
           <Text variant="h500" as="h5">

diff --git a/packages/atlas/src/views/studio/CrtTokenEditView/CrtTokenEditView.tsx b/packages/atlas/src/views/studio/CrtTokenEditView/CrtTokenEditView.tsx
@@ -1,4 +1,7 @@
+import { useApolloClient } from '@apollo/client'
 import styled from '@emotion/styled'
+import { createType } from '@joystream/types'
+import Long from 'long'
 import { useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -12,6 +15,9 @@ import { Benefit } from '@/components/_inputs/BenefitInput'
 import { BenefitsInput } from '@/components/_inputs/BenefitsInput'
 import { FormField } from '@/components/_inputs/FormField'
 import { MarkdownEditor } from '@/components/_inputs/MarkdownEditor/MarkdownEditor'
+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 { zIndex } from '@/styles'
 
@@ -22,12 +28,17 @@ type CrtPageForm = {
 }
 
 export const CrtTokenEditView = () => {
-  const { activeChannel } = useUser()
+  const { activeChannel, channelId, memberId } = useUser()
+  const { displaySnackbar } = useSnackbar()
+  const { joystream, proxyCallback } = useJoystream()
+  const handleTransaction = useTransaction()
+  const client = useApolloClient()
   const { data } = useGetFullCreatorTokenQuery({
     variables: {
       id: activeChannel?.creatorToken?.token.id ?? '',
     },
   })
+  console.log(data)
   const [mode, setMode] = useState<'edit' | 'preview'>('edit')
   const form = useForm<CrtPageForm>({
     defaultValues: {
@@ -37,6 +48,46 @@ export const CrtTokenEditView = () => {
     },
   })
 
+  const handleSubmit = form.handleSubmit((data) => {
+    if (!joystream || !memberId || !channelId) {
+      return
+    }
+
+    handleTransaction({
+      txFactory: async (updateStatus) =>
+        (await joystream.extrinsics).creatorTokenIssuerRemark(
+          memberId,
+          channelId,
+          {
+            updateTokenMetadata: {
+              newMetadata: {
+                ...(data.about ? { description: data.about } : {}),
+                ...(data.benefits
+                  ? { benefits: data.benefits.map((benefit, idx) => ({ ...benefit, displayOrder: idx })) }
+                  : {}),
+                ...(data.videoId ? { trailerVideoId: createType('Long', +data.videoId) as Long } : {}),
+              },
+            },
+          },
+          proxyCallback(updateStatus)
+        ),
+      onTxSync: async () => {
+        displaySnackbar({
+          title: 'Success',
+          iconType: 'success',
+        })
+        client.refetchQueries({ include: 'active' })
+        // onClose()
+      },
+      onError: () => {
+        displaySnackbar({
+          title: 'Something went wrong',
+        })
+        // onClose()
+      },
+    })
+  })
+
   if (!data?.creatorTokenById) return null
 
   return (
@@ -82,7 +133,7 @@ export const CrtTokenEditView = () => {
           text: mode === 'edit' ? 'Preview' : 'Edit',
           onClick: () => setMode((prev) => (prev === 'edit' ? 'preview' : 'edit')),
         }}
-        primaryButton={{ text: 'Publish', onClick: form.handleSubmit((data) => console.log(data)) }}
+        primaryButton={{ text: 'Publish', onClick: handleSubmit }}
         isNoneCrypto
       />
     </Wrapper>