From 887b7805b2929c657bba8e16b371948182206062 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 14 Jun 2024 19:38:48 +0700
Subject: [PATCH] Use superlike weight for superlike toast

---
 .../{subscription.tsx => subscription.ts}     | 83 ++++---------------
 .../datahub/content-staking/utils.tsx         | 64 ++++++++++++++
 src/services/datahub/generated-query.ts       |  7 ++
 3 files changed, 85 insertions(+), 69 deletions(-)
 rename src/services/datahub/content-staking/{subscription.tsx => subscription.ts} (53%)
 create mode 100644 src/services/datahub/content-staking/utils.tsx

diff --git a/src/services/datahub/content-staking/subscription.tsx b/src/services/datahub/content-staking/subscription.ts
similarity index 53%
rename from src/services/datahub/content-staking/subscription.tsx
rename to src/services/datahub/content-staking/subscription.ts
index 53bebc168..bab1c5515 100644
--- a/src/services/datahub/content-staking/subscription.tsx
+++ b/src/services/datahub/content-staking/subscription.ts
@@ -1,19 +1,14 @@
-import Toast from '@/components/Toast'
 import { useMyMainAddress } from '@/stores/my-account'
 import { useSubscriptionState } from '@/stores/subscription'
-import { cx } from '@/utils/class-names'
-import { DataHubSubscriptionEventEnum } from '@subsocial/data-hub-sdk'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
-import { ReactNode, useEffect, useRef } from 'react'
-import { toast } from 'sonner'
-import { datahubSubscription, isDatahubAvailable } from '../utils'
+import { useEffect, useRef } from 'react'
 import {
-  getAddressLikeCountToPostQuery,
-  getSuperLikeCountQuery,
-  getTodaySuperLikeCountQuery,
-  getTokenomicsMetadataQuery,
-} from './query'
+  DataHubSubscriptionEventEnum,
+  SubscribeSuperLikeSubscription,
+} from '../generated-query'
+import { datahubSubscription, isDatahubAvailable } from '../utils'
+import { toastSuperLikeNotification } from './utils'
 
 export function useDatahubContentStakingSubscriber() {
   const queryClient = useQueryClient()
@@ -58,6 +53,9 @@ const SUBSCRIBE_SUPER_LIKE = gql`
   subscription SubscribeSuperLike {
     activeStakingSuperLike {
       event
+      meta {
+        stakerDistributedRewardPoints
+      }
       entity {
         staker {
           id
@@ -79,7 +77,7 @@ export function subscription(
   isSubscribed = true
 
   const client = datahubSubscription()
-  let unsub = client.subscribe(
+  let unsub = client.subscribe<SubscribeSuperLikeSubscription>(
     {
       query: SUBSCRIBE_SUPER_LIKE,
     },
@@ -105,69 +103,16 @@ export function subscription(
 
 async function processSubscriptionEvent(
   queryClient: QueryClient,
-  eventData: {
-    event: DataHubSubscriptionEventEnum
-    entity: { staker: { id: string }; post: { persistentId: string } }
-  },
+  eventData: SubscribeSuperLikeSubscription['activeStakingSuperLike'],
   myAddress: string | undefined
 ) {
   if (
     eventData.event !==
-      DataHubSubscriptionEventEnum.ACTIVE_STAKING_SUPER_LIKE_CREATED &&
+      DataHubSubscriptionEventEnum.ActiveStakingSuperLikeCreated &&
     eventData.event !==
-      DataHubSubscriptionEventEnum.ACTIVE_STAKING_SUPER_LIKE_STATE_UPDATED
+      DataHubSubscriptionEventEnum.ActiveStakingSuperLikeStateUpdated
   )
     return
 
-  const { post, staker } = eventData.entity
-
-  getSuperLikeCountQuery.invalidate(queryClient, post.persistentId)
-  if (staker.id === myAddress) {
-    getAddressLikeCountToPostQuery.invalidate(queryClient, {
-      address: myAddress,
-      postId: post.persistentId,
-    })
-    const todayLike = getTodaySuperLikeCountQuery.getQueryData(
-      queryClient,
-      myAddress
-    )
-    const remaining = 10 - todayLike.count
-    let desc: ReactNode =
-      'Great progress today! You used all the available likes. Come back tomorrow 😉'
-    let icon: ((className: string) => ReactNode) | undefined = (className) => (
-      <span
-        className={cx(className, 'relative top-px mr-1.5 self-start text-base')}
-      >
-        ✅
-      </span>
-    )
-    if (remaining > 0) {
-      const tokenomics = await getTokenomicsMetadataQuery.fetchQuery(
-        queryClient,
-        null
-      )
-      desc = (
-        <div>
-          <p>
-            You earned 💎 {tokenomics.superLikeWeightPoints} Points for liking
-            the meme.
-          </p>
-          <p className='text-text-muted'>
-            {remaining} more likes left for today
-          </p>
-        </div>
-      )
-      icon = (className) => (
-        <span
-          className={cx(
-            className,
-            'relative top-px mr-1.5 self-start text-base'
-          )}
-        >
-          ℹ️
-        </span>
-      )
-    }
-    toast.custom((t) => <Toast t={t} title={desc} icon={icon} />)
-  }
+  toastSuperLikeNotification(queryClient, eventData, myAddress)
 }
diff --git a/src/services/datahub/content-staking/utils.tsx b/src/services/datahub/content-staking/utils.tsx
new file mode 100644
index 000000000..6316aea07
--- /dev/null
+++ b/src/services/datahub/content-staking/utils.tsx
@@ -0,0 +1,64 @@
+import Toast from '@/components/Toast'
+import { cx } from '@/utils/class-names'
+import { QueryClient } from '@tanstack/react-query'
+import { ReactNode } from 'react'
+import { toast } from 'sonner'
+import { SubscribeSuperLikeSubscription } from '../generated-query'
+import {
+  getAddressLikeCountToPostQuery,
+  getSuperLikeCountQuery,
+  getTodaySuperLikeCountQuery,
+} from './query'
+
+export function toastSuperLikeNotification(
+  queryClient: QueryClient,
+  eventData: SubscribeSuperLikeSubscription['activeStakingSuperLike'],
+  myAddress: string | undefined
+) {
+  const { post, staker } = eventData.entity
+  getSuperLikeCountQuery.invalidate(queryClient, post.persistentId)
+  if (staker.id === myAddress && post.persistentId) {
+    getAddressLikeCountToPostQuery.invalidate(queryClient, {
+      address: myAddress,
+      postId: post.persistentId,
+    })
+    const todayLike = getTodaySuperLikeCountQuery.getQueryData(
+      queryClient,
+      myAddress
+    )
+    const remaining = 10 - todayLike.count
+    let desc: ReactNode =
+      'Great progress today! You used all the available likes. Come back tomorrow 😉'
+    let icon: ((className: string) => ReactNode) | undefined = (className) => (
+      <span
+        className={cx(className, 'relative top-px mr-1.5 self-start text-base')}
+      >
+        ✅
+      </span>
+    )
+    if (remaining > 0) {
+      desc = (
+        <div>
+          <p>
+            You earned 💎 {eventData.meta.stakerDistributedRewardPoints} Points
+            for liking the meme.
+          </p>
+          <p className='text-text-muted'>
+            {remaining} more likes left for today
+          </p>
+        </div>
+      )
+      icon = (className) => (
+        <span
+          className={cx(
+            className,
+            'relative top-px mr-1.5 self-start text-base'
+          )}
+        >
+          ℹ️
+        </span>
+      )
+    }
+    toast.custom((t) => <Toast t={t} title={desc} icon={icon} />)
+  }
+}
diff --git a/src/services/datahub/generated-query.ts b/src/services/datahub/generated-query.ts
index 3069ee6d1..391735425 100644
--- a/src/services/datahub/generated-query.ts
+++ b/src/services/datahub/generated-query.ts
@@ -2113,6 +2113,10 @@ export type SubscribeSuperLikeSubscription = {
   activeStakingSuperLike: {
     __typename?: 'SuperLikeSubscriptionPayload'
     event: DataHubSubscriptionEventEnum
+    meta: {
+      __typename?: 'SubscriptionPayloadMeta'
+      stakerDistributedRewardPoints: string
+    }
     entity: {
       __typename?: 'ActiveStakingSuperLike'
       staker: { __typename?: 'Account'; id: string }
@@ -3350,6 +3354,9 @@ export const SubscribeSuperLike = gql`
   subscription SubscribeSuperLike {
     activeStakingSuperLike {
       event
+      meta {
+        stakerDistributedRewardPoints
+      }
       entity {
         staker {
           id