Stake changed Activities (Joystream#3458) (Joystream#3826)

- Add 'Read more' on `StakeSlashedContent` to open `StakeChangedModal`
 - Rename 'Slashed with' to 'Amount'
 - Rename 'Status' with 'Action'
 - Hide Amount if empty
 - Hide Rationale if empty

Co-authored-by: Joystream Stats <dev@joystreamstats.live>

packages/ui/src/working-groups/components/Activities/ActivitiesModals/StakeChanged/StakeChangedModal.tsx

@@ -23,39 +23,46 @@ import { useEscape } from '@/common/hooks/useEscape'
 interface StakeChangedModalProps {
   onClose: () => void
   amount?: BN
-  eventType?: 'StakeIncreasedEvent' | 'StakeDecreasedEvent'
+  eventType?: 'StakeIncreasedEvent' | 'StakeDecreasedEvent' | 'StakeSlashedEvent'
   id?: string
 }
 
+const actions = {
+  StakeIncreasedEvent: { past: 'increased', badge: 'increase' },
+  StakeDecreasedEvent: { past: 'decreased', badge: 'decrease' },
+  StakeSlashedEvent: { past: 'slashed', badge: 'slash' },
+}
+
 export const StakeChangedModal = ({ onClose, amount, eventType, id }: StakeChangedModalProps) => {
   useEscape(() => onClose())
   const slashingRationaleInfo = '' // hidden until needed
+  const action = eventType ? actions[eventType] : { past: 'changes', badge: 'change' }
 
   return (
     <SidePaneGlass onClick={onClose}>
       <SidePane topSize="xs">
         <SidePaneHeader>
           <SidePanelTop>
-            <SidePaneTitle>
-              Stake has been {eventType === 'StakeDecreasedEvent' ? 'reduced' : 'increased'}
-            </SidePaneTitle>
+            <SidePaneTitle>Stake has been {action.past}</SidePaneTitle>
             <CloseButton onClick={onClose} />
           </SidePanelTop>
         </SidePaneHeader>
         <SidePaneBody>
-          {amount && eventType && id ? (
+          {eventType && id ? (
             <SidePaneTable>
               <SidePaneRow>
-                <SidePaneLabel text="status" />
-                <StatusBadge>{eventType === 'StakeDecreasedEvent' ? 'reduce' : 'increase'}</StatusBadge>
-              </SidePaneRow>
-              <SidePaneRow>
-                <SidePaneLabel text="slashed by" />
-                <SidePaneText>
-                  <TokenValue value={amount} />
-                </SidePaneText>
+                <SidePaneLabel text="action" />
+                <StatusBadge>{action.badge}</StatusBadge>
               </SidePaneRow>
-              {false && (
+              {amount && (
+                <SidePaneRow>
+                  <SidePaneLabel text="amount" />
+                  <SidePaneText>
+                    <TokenValue value={amount} />
+                  </SidePaneText>
+                </SidePaneRow>
+              )}
+              {slashingRationaleInfo.length > 0 && (
                 <SidePaneRow>
                   <SidePaneLabel text="rationale" />
                   <SidePaneText>{slashingRationaleInfo}</SidePaneText>

packages/ui/src/working-groups/components/Activities/StakeSlashedContent.tsx

@@ -1,24 +1,49 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { ActivityContentComponent } from '@/common/components/Activities/ActivityContent'
 import { ButtonLink } from '@/common/components/buttons/Buttons'
 import { MemberModalLink } from '@/memberships/components/MemberModalLink'
 import { StakeSlashedActivity } from '@/working-groups/types'
 
+import { StakeChangedModal } from './ActivitiesModals/StakeChanged/StakeChangedModal'
+
 export const StakeSlashedContent: ActivityContentComponent<StakeSlashedActivity> = ({ activity, isOwn }) => {
-  const { member, groupName } = activity
+  const { eventType, member, groupName, id } = activity
+  const [isStakeSlashedModalOpen, setStakeSlashedModalOpen] = useState(false)
 
   if (isOwn) {
-    return <>Your stake was reduced by the {groupName} Working Group Lead.</>
+    return (
+      <>
+        Your stake have been slashed by the {groupName} lead.{' '}
+        <ButtonLink size="small" inline onClick={() => setStakeSlashedModalOpen(!isStakeSlashedModalOpen)}>
+          Read more
+        </ButtonLink>
+        {isStakeSlashedModalOpen && (
+          <StakeChangedModal
+            onClose={() => setStakeSlashedModalOpen(!isStakeSlashedModalOpen)}
+            eventType={eventType}
+            id={id}
+          />
+        )}
+      </>
+    )
   }
 
   return (
     <>
-      <MemberModalLink call={{ modal: 'Member', data: { id: member.id } }}>{member.handle}</MemberModalLink> has been
-      reduced by the {groupName} Working Group Lead.{' '}
-      <ButtonLink size="small" inline>
+      The stake of{' '}
+      <MemberModalLink call={{ modal: 'Member', data: { id: member.id } }}>{member.handle}</MemberModalLink> was slashed
+      by the {groupName} lead.{' '}
+      <ButtonLink size="small" inline onClick={() => setStakeSlashedModalOpen(!isStakeSlashedModalOpen)}>
         Read more
       </ButtonLink>
+      {isStakeSlashedModalOpen && (
+        <StakeChangedModal
+          onClose={() => setStakeSlashedModalOpen(!isStakeSlashedModalOpen)}
+          eventType={eventType}
+          id={id}
+        />
+      )}
     </>
   )
 }

packages/ui/src/working-groups/types/WorkingGroupActivity/types.ts

@@ -79,7 +79,7 @@ export interface StakeSlashedActivity extends BaseActivity {
 }
 
 export interface StakeChangedActivity extends BaseActivity {
-  eventType: 'StakeIncreasedEvent' | 'StakeDecreasedEvent'
+  eventType: 'StakeIncreasedEvent' | 'StakeDecreasedEvent' | 'StakeSlashedEvent'
   member: MemberDisplayFields
   amount: BN
 }