Stake changed Activities (#3458) (#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
 }