Update handbook links and tooltips (#2847)

packages/ui/src/app/pages/Election/Election.tsx

@@ -9,7 +9,6 @@ import { Loading } from '@/common/components/Loading'
 import { MainPanel } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { BlockDurationStatistics, StatisticItem, Statistics } from '@/common/components/statistics'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextHuge, TextMedium } from '@/common/components/typography'
 import { camelCaseToText } from '@/common/helpers'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
@@ -92,35 +91,16 @@ export const Election = () => {
       <Statistics>
         <StatisticItem
           title="Stage"
-          tooltipText={
-            <>
-              Elections occur periodically, and each one has a sequence of stages referred to as the election cycle.
-              Stages are: announcing period, voting period and revealing period.{' '}
-              <TooltipExternalLink
-                href="https://joystream.gitbook.io/joystream-handbook/governance/council#election"
-                target="_blank"
-              >
-                <TextMedium>More details</TextMedium> <LinkSymbol />
-              </TooltipExternalLink>
-            </>
-          }
+          tooltipText="Elections occur periodically. Each has a sequence of stages referred to as the election cycle. Stages are: announcing period, voting period and revealing period."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council?q=lock#election"
         >
           <TextHuge bold>{camelCaseToText(electionStage)} Period</TextHuge>
         </StatisticItem>
         <BlockDurationStatistics
           title="Period remaining length"
-          tooltipText={
-            <>
-              Remaining length of current period before the next one starts.{' '}
-              <TooltipExternalLink
-                href="https://joystream.gitbook.io/joystream-handbook/governance/council#election"
-                target="_blank"
-              >
-                <TextMedium>Link</TextMedium> <LinkSymbol />
-              </TooltipExternalLink>
-            </>
-          }
           value={remainingPeriod}
+          tooltipText="Remaining length of current period before the next one starts."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council?q=lock#election"
         />
         <StatisticItem
           title="Election round"

packages/ui/src/app/pages/Profile/MyAccounts.tsx

@@ -42,22 +42,15 @@ export const MyAccounts = () => {
               />
               <TokenValueStat
                 title="Total locked balance"
-                tooltipText={
-                  <>
-                    <TooltipText>
-                      Staking, or bonding, is the act of locking up funds under some terms so that they are not
-                      transferable and otherwise not entirely usable as they otherwise would be. The terms, referred to
-                      as unstaking terms describe the circumstances under which the funds may begin to cease being
-                      staked. The way staking is implemented is with the use of account{' '}
-                      <StyledLink href="https://joystream.gitbook.io/joystream-handbook/key-concepts/staking#locks">
-                        locks
-                      </StyledLink>
-                    </TooltipText>{' '}
-                  </>
-                }
+                tooltipText="Staking, or bonding, is the act of locking up funds under some terms so that they are not transferable and otherwise not entirely usable as they otherwise would be. The terms, referred to as unstaking terms describe the circumstances under which the funds may begin to cease being staked. The way staking is implemented is with the use of account."
+                tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/key-concepts/staking#locks"
                 value={locked}
               />
-              <TokenValueStat title="Total recoverable" tooltipText="Lorem ipsum..." value={recoverable} />
+              <TokenValueStat
+                title="Total recoverable"
+                tooltipText="Recoverable balance encapsulates all tokens that can be recovered, following the termination of the process where they were previously staked. Example: Vote has been casted for a candidate in council elections. That candidate lost the election and now the stake that was put behind the voting power for such candidate can be recovered, meaning locked balance will be reduced by such amount, while transferable balance will increase for the amount of staking lock."
+                value={recoverable}
+              />
               {vestingTotal.gtn(0) && (
                 <TokenValueStat title="Total initial vesting" tooltipText="Lorem ipsum..." value={vestingTotal} />
               )}
@@ -67,7 +60,7 @@ export const MyAccounts = () => {
               {vestingTotal.gtn(0) && (
                 <TokenValueStat
                   title="Total Vested Claimable"
-                  tooltipText="Lorem ipsum..."
+                  tooltipText="Vested tokens are locked for a period of time. This is the amount that has been unlocked already."
                   value={vestedClaimable}
                   inline
                 >

packages/ui/src/app/pages/WorkingGroups/UpcomingOpening.tsx

@@ -45,7 +45,7 @@ export const UpcomingOpening = () => {
       <OpeningIcon />
       <RowGapBlock gap={16}>
         <h4>The opening hasn't started yet</h4>
-        <TextSmall>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</TextSmall>
+        <TextSmall>This opening becomes available for applications when at the set block.</TextSmall>
       </RowGapBlock>
     </ApplicationStatusWrapper>
   ))

packages/ui/src/app/pages/WorkingGroups/WorkingGroup/AboutTab.tsx

@@ -27,7 +27,7 @@ export const AboutTab = ({ workingGroup }: Props) => {
         {statistics.spending ? (
           <TokenValueStat
             title="Spending"
-            tooltipText="Total spending of the working group in"
+            tooltipText="Total spending of the working group during the council term."
             value={statistics.spending}
           />
         ) : (

packages/ui/src/app/pages/WorkingGroups/WorkingGroup/OpeningsTab.tsx

@@ -6,7 +6,6 @@ import { LinkSymbol } from '@/common/components/icons/symbols'
 import { MainPanel } from '@/common/components/page/PageContent'
 import { SidePanel } from '@/common/components/page/SidePanel'
 import { Statistics, TokenValueStat } from '@/common/components/statistics'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { Label, TextMedium } from '@/common/components/typography'
 import { LoadingOpenings } from '@/working-groups/components/OpeningsList'
 import { WorkersList } from '@/working-groups/components/WorkersList'
@@ -30,18 +29,8 @@ export const OpeningsTab = ({ workingGroup }: Props) => {
       <Statistics>
         <TokenValueStat
           title="Current budget"
-          tooltipText={
-            <>
-              The budget is the root resource pool for all token minting in the working group, and the size of the pool
-              is denoted by budget.
-              <TooltipExternalLink
-                href="https://joystream.gitbook.io/joystream-handbook/governance/working-groups#budget"
-                target="_blank"
-              >
-                <TextMedium>Link</TextMedium> <LinkSymbol />
-              </TooltipExternalLink>
-            </>
-          }
+          tooltipText="The budget is the root resource pool for all token minting in the working group, and the size of the pool is denoted by budget."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups?q=lock#concepts"
           value={workingGroup.budget}
         />
         <TokenValueStat
@@ -51,18 +40,9 @@ export const OpeningsTab = ({ workingGroup }: Props) => {
         />
         <TokenValueStat
           title="Avg stake"
-          tooltipText={
-            <>
-              Average stake size by members undertaking the roles of workers and the lead in this group.{' '}
-              <TooltipExternalLink
-                href="https://joystream.gitbook.io/testnet-workspace/system/working-groups?q=lock#staking"
-                target="_blank"
-              >
-                <TextMedium>Link</TextMedium> <LinkSymbol />
-              </TooltipExternalLink>
-            </>
-          }
           value={workingGroup.averageStake}
+          tooltipText="Average stake size by members undertaking the roles of workers and the lead in this group."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups?q=lock#concepts"
         />
       </Statistics>
 

packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx

@@ -153,7 +153,11 @@ export const WorkingGroupOpening = () => {
                 title={`Reward per ${rewardPeriod?.toString()} blocks`}
                 value={rewardPeriod?.mul(opening.rewardPerBlock)}
               />
-              <TokenValueStat title="Minimal stake" tooltipText="Lorem ipsum..." value={opening.stake} />
+              <TokenValueStat
+                title="Minimal stake"
+                tooltipText="Minimal amount of tokens required to be staked for any applicant to such role."
+                value={opening.stake}
+              />
               <ApplicationStats applicants={opening.applicants} hiring={opening.hiring} status={opening.status} />
             </Statistics>
           </RowGapBlock>

packages/ui/src/council/components/pastCouncil/PastCouncilStats.tsx

@@ -1,10 +1,7 @@
 import BN from 'bn.js'
 import React from 'react'
 
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Statistics, TokenValueStat } from '@/common/components/statistics'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
-import { TextMedium } from '@/common/components/typography'
 
 interface PastCouncilStatsProps {
   totalSpent: BN
@@ -28,7 +25,8 @@ export const PastCouncilStats = ({
     <TokenValueStat
       title="Total missed rewards"
       value={totalMissedRewards}
-      tooltipText="Total rewards missed. Missed rewards happen due to .. "
+      tooltipText="Total rewards missed. Missed rewards are unallocated rewards from the council budget."
+      tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council?q=lock#budget"
     />
     <TokenValueStat
       title="Total paid rewards"
@@ -38,18 +36,8 @@ export const PastCouncilStats = ({
     <TokenValueStat
       title="Total spent on proposals"
       value={totalSpentOnProposals}
-      tooltipText={
-        <>
-          Total council budget spent on proposals, including funding proposals. More details on proposals spending can
-          be found in the Overview module{' '}
-          <TooltipExternalLink
-            href="https://joystream.gitbook.io/joystream-handbook/governance/council#council"
-            target="_blank"
-          >
-            <TextMedium>Link</TextMedium> <LinkSymbol />
-          </TooltipExternalLink>
-        </>
-      }
+      tooltipText="Total council budget spent on proposals, including funding proposals. More details on proposals spending can be found in the Overview module."
+      tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/governance/council#council"
     />
   </Statistics>
 )

packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx

@@ -5,11 +5,12 @@ import styled from 'styled-components'
 import { BadgeStatus } from '@/common/components/BadgeStatus'
 import { CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
+import { LinkSymbol } from '@/common/components/icons/symbols'
 import { TableListItem } from '@/common/components/List'
 import { GhostRouterLink } from '@/common/components/RouterLink'
 import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { Subscription } from '@/common/components/typography/Subscription'
-import { TextSmall } from '@/common/components/typography/Text'
+import { TextSmall, TextMedium } from '@/common/components/typography/Text'
 import { Colors, Overflow } from '@/common/constants'
 import { camelCaseToText } from '@/common/helpers'
 import { toDDMMYY } from '@/common/utils/dates'
@@ -44,6 +45,8 @@ export const ProposalListItem = ({ proposal, isPast, memberId, isCouncilMember }
         return 'Proposal was approved by current council, but requires further approvals to satisfy constitutionality requirement, which is a minimum number of consecutive council votes. Transitions to deciding stage when next council is elected.'
       case 'gracing':
         return 'Proposal was approved by current council, but requires further approvals to satisfy constitutionality requirement, which is a minimum number of consecutive council votes. Transitions to deciding stage when next council is elected.'
+      case 'expired':
+        return 'This proposal expired, meaning it was not executed due to council not voting on it during its term.'
       case 'vetoed':
         return 'Was halted by SUDO, nothing further can happen. This will be removed at mainnet.'
       case 'slashed':
@@ -74,7 +77,10 @@ export const ProposalListItem = ({ proposal, isPast, memberId, isCouncilMember }
       </ToggleableItemInfo>
       <StageField>
         <TextSmall bold>{camelCaseToText(proposal.status)}</TextSmall>
-        <Tooltip tooltipText={checkStatus()}>
+        <Tooltip
+          tooltipText={checkStatus()}
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/proposal-system?q=lock#proposal"
+        >
           <TooltipDefault />
         </Tooltip>
       </StageField>