Merge branch 'dev' into fix/reply-3967

Joystream · Dec 12, 2022 · 4f84c6f · 4f84c6f
2 parents 2ae6a8d + 3272196
commit 4f84c6f
Show file tree

Hide file tree

Showing 19 changed files with 132 additions and 110 deletions.
diff --git a/packages/ui/src/accounts/modals/ClaimVestingModal/ClaimVestingModal.tsx b/packages/ui/src/accounts/modals/ClaimVestingModal/ClaimVestingModal.tsx
@@ -82,7 +82,7 @@ export const ClaimVestingModal = () => {
               <InputComponent
                 inputSize="l"
                 validation={canAfford ? undefined : 'invalid'}
-                message={canAfford ? '' : 'Insufficient balance to cover fee.'}
+                message={isReady ? (canAfford ? '' : 'Insufficient balance to cover fee.') : ''}
               >
                 <SelectVestingAccount selected={selectedAccount} onChange={setSelectedAccount} />
               </InputComponent>

diff --git a/packages/ui/src/app/pages/Forum/ForumCategory.tsx b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
@@ -11,7 +11,7 @@ import { Loading } from '@/common/components/Loading'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { PreviousPage } from '@/common/components/page/PreviousPage'
-import { Label } from '@/common/components/typography'
+import { Label, TextMedium } from '@/common/components/typography'
 import { useModal } from '@/common/hooks/useModal'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { useSort } from '@/common/hooks/useSort'
@@ -73,6 +73,11 @@ export const ForumCategory = () => {
               <PageTitle>{category.title}</PageTitle>
             </PreviousPage>
           }
+          description={
+            <TextMedium className="category-description" normalWeight inter lighter truncateLines={2}>
+              {category.description}
+            </TextMedium>
+          }
           buttons={
             <TransactionButton
               style="primary"

diff --git a/packages/ui/src/council/components/election/CandidateVote/CandidateVote.stories.tsx b/packages/ui/src/council/components/election/CandidateVote/CandidateVote.stories.tsx
@@ -33,9 +33,9 @@ const args: CandidateVoteProps = {
   candidateId: '1',
   sumOfAllStakes: new BN(5000000),
   totalStake: new BN(500000),
-  ownStake: new BN(32000),
   votes: 20,
   index: 1,
+  myStake: new BN(32000),
   myVotes: [],
 }
 Default.args = args
diff --git a/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx b/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx
@@ -25,20 +25,26 @@ export interface CandidateVoteProps {
   member: Member
   sumOfAllStakes: BN
   totalStake: BN
-  ownStake?: BN
   votes: number
   index: number
   myVotes: MyCastVote[]
+  myStake?: BN
 }
 
+const AllRevealedButton = (
+  <ButtonPrimary size="medium" disabled>
+    Revealed
+  </ButtonPrimary>
+)
+
 export const CandidateVote = ({
   candidateId,
   member,
   sumOfAllStakes,
   totalStake,
-  ownStake,
   votes,
   index,
+  myStake,
   myVotes,
 }: CandidateVoteProps) => {
   const { showModal } = useModal()
@@ -50,9 +56,11 @@ export const CandidateVote = ({
   }, [showModal])
 
   const roundedPercentage = totalStake.gt(BN_ZERO) ? sumOfAllStakes.muln(100).divRound(totalStake).toNumber() : 0
-  const hasOwnStake = ownStake && ownStake.gt(BN_ZERO)
-  const hasMyVotes = myVotes.length > 0
+  const userVoted = myVotes.length > 0
   const allVotesRevealed = myVotes.every((vote) => vote.voteFor)
+
+  const RevealButton = <RevealVoteButton myVotes={myVotes} voteForHandle={member.handle} />
+
   return (
     <CandidateVoteWrapper onClick={showCandidate}>
       <VoteIndex lighter inter>
@@ -74,11 +82,11 @@ export const CandidateVote = ({
             </StatsValue>
           </StakeAndVotesRow>
           <StakeAndVotesRow>
-            {hasOwnStake && (
+            {myStake?.gt(BN_ZERO) && (
               <>
                 <Subscription>My Stake</Subscription>
                 <StatsValue>
-                  <TokenValue value={ownStake} />
+                  <TokenValue value={myStake} />
                 </StatsValue>
               </>
             )}
@@ -91,16 +99,7 @@ export const CandidateVote = ({
           </StakeAndVotesRow>
         </StakeAndVotesGroup>
       </VoteIndicatorWrapper>
-      <ButtonsGroup>
-        {hasMyVotes &&
-          (allVotesRevealed ? (
-            <ButtonPrimary size="medium" disabled>
-              Revealed
-            </ButtonPrimary>
-          ) : (
-            <RevealVoteButton myVotes={myVotes} voteForHandle={member.handle} />
-          ))}
-      </ButtonsGroup>
+      <ButtonsGroup>{userVoted && (allVotesRevealed ? AllRevealedButton : RevealButton)}</ButtonsGroup>
       <CandidateCardArrow>
         <Arrow direction="right" />
       </CandidateCardArrow>

diff --git a/packages/ui/src/council/components/election/CandidateVote/RevealingStageVotes.tsx b/packages/ui/src/council/components/election/CandidateVote/RevealingStageVotes.tsx
@@ -39,7 +39,7 @@ export const RevealingStageVotes = ({ candidateWithVotes, totalStake, onlyMyVote
         sumOfAllStakes: candidate.totalStake,
         totalStake: totalStake ?? BN_ZERO,
         votes: candidate.votesNumber,
-        ownStake: candidate.ownStake,
+        myStake: candidate.myStake,
         myVotes: candidate.myVotes,
       }))}
     />

diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionTabs.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionTabs.tsx
@@ -58,11 +58,11 @@ export const PastElectionTabs = ({ election }: PastElectionTabsProps) => {
             revealed: !!myVote,
             member: votingResult.candidate.member,
             sumOfAllStakes: votingResult.totalStake,
-            ownStake: myVote ? myVote.stake : undefined,
             totalStake: election.totalStake,
             votes: votingResult.votes.length,
             index: index + 1,
             myVotes: [],
+            myStake: myVote?.stake,
           }
         })}
       />

diff --git a/packages/ui/src/council/components/election/revealing/RevealingStage.tsx b/packages/ui/src/council/components/election/revealing/RevealingStage.tsx
@@ -32,7 +32,7 @@ export const RevealingStage = ({ election, isLoading }: Props) => {
         return {
           ...candidate,
           myVotes: myVotesForCandidate,
-          ownStake: myVotesForCandidate.reduce((prev, next) => prev.add(next.stake), BN_ZERO),
+          myStake: myVotesForCandidate.reduce((prev, next) => prev.add(next.stake), BN_ZERO),
         }
       })
       .sort(electionVotingResultComparator)

diff --git a/packages/ui/src/council/hooks/useMyCastVotes.ts b/packages/ui/src/council/hooks/useMyCastVotes.ts
@@ -14,7 +14,7 @@ export interface MyCastVote extends Vote {
 }
 
 export interface CandidateWithMyVotes extends ElectionCandidate {
-  ownStake: BN
+  myStake: BN
   myVotes: MyCastVote[]
 }
 

diff --git a/packages/ui/src/forum/components/ForumPageHeader.tsx b/packages/ui/src/forum/components/ForumPageHeader.tsx
@@ -3,14 +3,16 @@ import React, { useState } from 'react'
 import { PageHeaderRow, PageHeaderWrapper } from '@/app/components/PageLayout'
 import { ButtonsGroup } from '@/common/components/buttons'
 import { SearchBox } from '@/common/components/forms/FilterBox/FilterSearchBox'
+import { TextMedium } from '@/common/components/typography'
 import { useModal } from '@/common/hooks/useModal'
 
 interface ForumPageHeaderProps {
   title: React.ReactNode
   children?: React.ReactNode
   buttons?: React.ReactNode
+  description?: React.ReactNode
 }
-export const ForumPageHeader = ({ title, children, buttons }: ForumPageHeaderProps) => {
+export const ForumPageHeader = ({ title, children, buttons, description }: ForumPageHeaderProps) => {
   const [search, setSearch] = useState('')
 
   const { showModal } = useModal()
@@ -28,6 +30,7 @@ export const ForumPageHeader = ({ title, children, buttons }: ForumPageHeaderPro
           {buttons}
         </ButtonsGroup>
       </PageHeaderRow>
+      {description && <PageHeaderRow>{description}</PageHeaderRow>}
       {children}
     </PageHeaderWrapper>
   )

diff --git a/packages/ui/src/forum/components/Thread/WatchlistButton.tsx b/packages/ui/src/forum/components/Thread/WatchlistButton.tsx
@@ -14,14 +14,14 @@ export const WatchlistButton = ({ threadId }: Props) => {
   const addToWatchlist = useCallback(
     (e) => {
       e.stopPropagation()
-      setWatchlist(watchlist ? [...watchlist, threadId] : [threadId])
+      setWatchlist((watchlist = []) => [...watchlist, threadId])
     },
     [watchlist]
   )
   const removeFromWatchlist = useCallback(
     (e) => {
       e.preventDefault()
-      setWatchlist(watchlist?.filter((id) => id !== threadId) ?? [])
+      setWatchlist((watchlist = []) => watchlist.filter((id) => id !== threadId))
     },
     [watchlist]
   )

diff --git a/packages/ui/src/forum/components/category/LatestPost.tsx b/packages/ui/src/forum/components/category/LatestPost.tsx
@@ -16,8 +16,6 @@ import { CategoryItemFieldProps } from './CategoryListItem'
 export const LatestPost = memo(({ categoryId }: CategoryItemFieldProps) => {
   const { post, thread, isLoading } = useCategoryLatestPost(categoryId)
 
-  if (isLoading) return <Loading />
-
   if (!post) return <TextMedium>-</TextMedium>
 
   return (

diff --git a/packages/ui/src/forum/components/category/PopularThread.tsx b/packages/ui/src/forum/components/category/PopularThread.tsx
@@ -16,8 +16,7 @@ import { CategoryItemFieldProps } from './CategoryListItem'
 export const PopularThread = memo(({ categoryId }: CategoryItemFieldProps) => {
   const { isLoading, threads } = useForumPopularThreads({ categoryId })
 
-  if (isLoading) return <Loading />
-  else if (!threads?.[0]) return <TextMedium>-</TextMedium>
+  if (!threads?.[0]) return <TextMedium>-</TextMedium>
 
   const thread = threads[0]
 

diff --git a/packages/ui/src/proposals/components/ProposalDiscussions.tsx b/packages/ui/src/proposals/components/ProposalDiscussions.tsx
@@ -25,17 +25,21 @@ interface Props {
   proposalId: string
 }
 
+const hints = {
+  open: 'This is an open discussion, everyone can comment.',
+  closed: 'This discussion is closed. Only selected members and the council can comment.',
+}
+
 export const ProposalDiscussions = ({ thread, proposalId }: Props) => {
   const query = useRouteQuery()
   const { api } = useApi()
   const { active, members } = useMyMemberships()
 
   const initialPost = query.get('post')
-  const isAbleToPost =
-    thread.mode === 'open' ||
-    (thread.mode === 'closed' && active && (thread.whitelistIds?.includes(active.id) || active.isCouncilMember))
-  const isInWhitelist = thread.mode === 'closed' && members.find((member) => thread.whitelistIds?.includes(member.id))
-  const hasCouncilMembership = thread.mode === 'closed' && members.find((member) => member.isCouncilMember)
+  const isClosed = thread.mode === 'closed'
+  const isAbleToPost = !isClosed || (active && (thread.whitelistIds?.includes(active.id) || active.isCouncilMember))
+  const whitelistedMember = isClosed ? members.find((member) => thread.whitelistIds?.includes(member.id)) : null
+  const hasCouncilMembership = isClosed && members.find((member) => member.isCouncilMember)
 
   const newPostRef = useRef<HTMLDivElement>(null)
   const postsRefs: AnyKeys = {}
@@ -66,14 +70,15 @@ export const ProposalDiscussions = ({ thread, proposalId }: Props) => {
       return <TextBig>Please select your council membership to post in this thread.</TextBig>
     }
 
-    if (isInWhitelist) {
-      return <TextBig>Please select a whitelisted membership to post in this thread.</TextBig>
+    if (whitelistedMember) {
+      return <TextBig>Please select your other membership to post in this thread: {whitelistedMember.handle}</TextBig>
     }
 
     return (
-      <TextBig>
-        The discussion of this proposal is closed; only members whitelisted by the proposer can comment on it.
-      </TextBig>
+      <>
+        <TextBig>The discussion is limited to following whitelisted members:</TextBig>
+        {thread.whitelistIds?.join(' ') ?? ''}
+      </>
     )
   }
 
@@ -83,7 +88,7 @@ export const ProposalDiscussions = ({ thread, proposalId }: Props) => {
         <h4>Discussion</h4>
         <Badge>
           {`${thread.mode} `}
-          <Tooltip tooltipText="Open discussion is open for every member to comment on, while closed would only be available for council members, white-listed members and creator of the proposal.">
+          <Tooltip tooltipText={hints[thread.mode]}>
             <TooltipDefault />
           </Tooltip>
         </Badge>

diff --git a/.../working-groups/components/Activities/ActivitiesModals/StakeChanged/StakeChangedModal.tsx b/.../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>

diff --git a/packages/ui/src/working-groups/components/Activities/StakeSlashedContent.tsx b/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}
+        />
+      )}
     </>
   )
 }