🪢 Merge main into dev (Joystream#3914)

packages/ui/src/accounts/components/StakeStep.tsx

@@ -8,10 +8,8 @@ import { Account, LockType } from '@/accounts/types'
 import { CurrencyName } from '@/app/constants/currency'
 import { InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { formatTokenValue } from '@/common/model/formatters'
 import { VoteForCouncilEvent, VoteForCouncilMachineState } from '@/council/modals/VoteForCouncil/machine'
@@ -51,21 +49,8 @@ export const StakeStep = ({
             label="Select account for Staking"
             required
             inputSize="l"
-            tooltipText={
-              <>
-                If someone voted for a candidate in an election, they will and can recover their stake at a later time.
-                Importantly, a vote which was devoted to a losing candidate can be freed the moment the election cycle
-                is over, while a vote which was devoted to a winner can only be freed after the announcing period of the
-                next election begins. The idea behind this asymmetry is to more closely expose the winners to the
-                consequences of their decision.
-                <TooltipExternalLink
-                  href="https://joystream.gitbook.io/testnet-workspace/system/council"
-                  target="_blank"
-                >
-                  <TextMedium>More details</TextMedium> <LinkSymbol />
-                </TooltipExternalLink>
-              </>
-            }
+            tooltipText="If someone voted for a candidate in an election, they will and can recover their stake at a later time.\n\nImportantly, a vote which was devoted to a losing candidate can be freed the moment the election cycle is over, while a vote which was devoted to a winner can only be freed after the announcing period of the next election begins. The idea behind this asymmetry is to more closely expose the winners to the consequences of their decision."
+            tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council"
           >
             <SelectStakingAccount
               id="account-select"

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

@@ -4,12 +4,11 @@ import { useHistory } from 'react-router-dom'
 import { PageHeaderRow, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 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 { TextHuge, TextMedium } from '@/common/components/typography'
+import { TextHuge } from '@/common/components/typography'
 import { camelCaseToText } from '@/common/helpers'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
@@ -92,15 +91,15 @@ export const Election = () => {
         <StatisticItem
           title="Stage"
           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"
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
         >
           <TextHuge bold>{camelCaseToText(electionStage)} Period</TextHuge>
         </StatisticItem>
         <BlockDurationStatistics
           title="Period remaining length"
           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"
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
         />
         <StatisticItem
           title="Election round"

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

@@ -40,7 +40,7 @@ export const MyAccounts = () => {
               <TokenValueStat
                 title="Total locked balance"
                 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"
+                tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/accounts-and-staking#locks"
                 value={locked}
               />
               <TokenValueStat

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

@@ -2,11 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { CountBadge } from '@/common/components/CountBadge'
-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 { Label, TextMedium } from '@/common/components/typography'
+import { Label } from '@/common/components/typography'
 import { LoadingOpenings } from '@/working-groups/components/OpeningsList'
 import { WorkersList } from '@/working-groups/components/WorkersList'
 import { useGroupDebt } from '@/working-groups/hooks/useGroupDebt'
@@ -30,19 +29,20 @@ export const OpeningsTab = ({ workingGroup }: Props) => {
         <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."
-          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups?q=lock#concepts"
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#concepts"
           value={workingGroup.budget}
         />
         <TokenValueStat
           title="Working Group Debt"
-          tooltipText="If funds are insufficient over payout periods, the working group can incur a debt, which is owed to workers. "
+          tooltipText="If funds are insufficient over payout periods, the working group can incur a debt, which is owed to workers."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#concepts"
           value={debt}
         />
         <TokenValueStat
           title="Avg stake"
           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#staking"
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#concepts"
         />
       </Statistics>
 

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

@@ -176,7 +176,6 @@ export const WorkingGroupOpening = () => {
             myApplication={myApplication}
             hired={hiringApplication}
             hiringComplete={opening.status !== OpeningStatuses.OPEN}
-            leadId={opening.leadId}
           />
           {opening.status === OpeningStatuses.OPEN && !activeApplications?.length && <ApplicationStatus />}
         </SidePanel>

packages/ui/src/bounty/modals/AddBountyModal/components/FundingDetailsStep.tsx

@@ -49,20 +49,8 @@ export const FundingDetailsStep = ({ minCherryLimit, errorMessageGetter, errorCh
           tight
           units={CurrencyName.integerValue}
           required
-          tooltipText={
-            <>
-              Bounty creator has to put up an initial bounty, called a cherry, which is split among all contributors
-              pro-rata in case bounty fails. This cherry generates an incentive for contributors, as even when the
-              funding fails, they get a benefit. In case bounty succeeds, cherry is returned to the creator in full at
-              the time, when Oracle submits judgement.{' '}
-              <TooltipExternalLink
-                href="https://joystream.gitbook.io/testnet-workspace/system/bounties#assurance-contracts-and-dominant-assurance-contracts"
-                target="_blank"
-              >
-                <TextMedium>Learn more</TextMedium> <LinkSymbol />
-              </TooltipExternalLink>
-            </>
-          }
+          tooltipText="Bounty creator has to put up an initial bounty, called a cherry, which is split among all contributors pro-rata in case bounty fails. This cherry generates an incentive for contributors, as even when the funding fails, they get a benefit. In case bounty succeeds, cherry is returned to the creator in full at the time, when Oracle submits judgement."
+          tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/bounties#assurance-contracts-and-dominant-assurance-contracts"
           message={
             errorChecker('cherry')
               ? errorMessageGetter('cherry')

packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx

@@ -20,7 +20,6 @@ import { SuccessTransactionModal } from '@/bounty/modals/SuccessTransactionModal
 import { isFundingLimited } from '@/bounty/types/Bounty'
 import { Input, InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import {
   AmountButton,
   AmountButtons,
@@ -32,9 +31,7 @@ import {
   ScrolledModalContainer,
   TransactionAmount,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TransactionInfo } from '@/common/components/TransactionInfo'
-import { TextMedium } from '@/common/components/typography'
 import { BN_ZERO, Fonts } from '@/common/constants'
 import { useMachine } from '@/common/hooks/useMachine'
 import { useModal } from '@/common/hooks/useModal'
@@ -207,18 +204,9 @@ export const ContributeFundsModal = () => {
                 units={CurrencyName.integerValue}
                 validation={hasError('amount', errors) ? 'invalid' : undefined}
                 message={hasError('amount', errors) ? getErrorMessage('amount', errors) : ' '}
-                tooltipText={
-                  <>
-                    If a contribution is made that brings the cumulative funding equal to or above the upper bound, then
-                    the difference is returned, and the bounty proceeds to the Working Period stage.
-                    <TooltipExternalLink
-                      href="https://joystream.gitbook.io/testnet-workspace/system/bounties#stage"
-                      target="_blank"
-                    >
-                      <TextMedium>Learn more</TextMedium> <LinkSymbol />
-                    </TooltipExternalLink>
-                  </>
-                }
+                tooltipText="If a contribution is made that brings the cumulative funding equal to or above the upper bound, then the difference is returned, and the bounty proceeds to the Working Period stage."
+                tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/bounties#stage"
+                tooltipLinkText="Learn more"
               >
                 <TokenInput
                   id="amount-input"

packages/ui/src/bounty/modals/SubmitJudgementModal/components/WinnersSelection.tsx

@@ -57,7 +57,6 @@ export const WinnersSelection = ({
   )
 
   const handleEqualDistribution = useCallback(() => {
-    const rewardMod = bountyFunding.modn(winners.length)
     const reward = bountyFunding.divn(winners.length)
 
     winners.forEach((winner, index) => {

packages/ui/src/common/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,8 @@ import { usePopper } from 'react-popper'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { TextMedium } from '@/common/components/typography'
+
 import { BorderRad, Colors, Fonts, Transitions, ZIndex } from '../../constants'
 import { LinkSymbol, LinkSymbolStyle } from '../icons/symbols'
 
@@ -149,19 +151,21 @@ export const Tooltip = ({
                 forBig={forBig}
               >
                 {tooltipTitle && <TooltipPopupTitle>{tooltipTitle}</TooltipPopupTitle>}
-                <TooltipText>{tooltipText}</TooltipText>
-                {tooltipLinkURL &&
-                  (isExternalLink() ? (
-                    <TooltipExternalLink href={tooltipLinkURL} target="_blank">
-                      {tooltipLinkText ?? 'Link'}
-                      <LinkSymbol />
-                    </TooltipExternalLink>
-                  ) : (
-                    <TooltipLink to={tooltipLinkURL} target="_blank">
-                      {tooltipLinkText ?? 'Link'}
-                      <LinkSymbol />
-                    </TooltipLink>
-                  ))}
+                <TooltipText>
+                  {tooltipText}
+                  {tooltipLinkURL &&
+                    (isExternalLink() ? (
+                      <TooltipExternalLink href={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipExternalLink>
+                    ) : (
+                      <TooltipLink to={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipLink>
+                    ))}
+                </TooltipText>
               </TooltipPopupContainer>,
               document.body
             ))}

packages/ui/src/common/components/forms/InputComponent.tsx

@@ -28,7 +28,7 @@ export type InputComponentProps = InputProps &
     message?: React.ReactElement | string
     tooltipText?: React.ReactElement | string
     tooltipTitle?: string
-    tooltipLinkText?: React.ReactElement
+    tooltipLinkText?: React.ReactElement | string
     tooltipLinkURL?: string
     className?: string
     children: React.ReactNode

packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx

@@ -15,10 +15,12 @@ export function LinkSymbol({ className, color }: SymbolProps) {
       className={className}
     >
       <path
+        className="blackPart"
         d="M1.1001 3.99998L2.0001 3.09998H12.8001V4.89998H2.9001V21.1H19.1001V11.2H20.9001V22L20.0001 22.9H2.0001L1.1001 22V3.99998Z"
         fill={color ?? Colors.Black[900]}
       />
       <path
+        className="primaryPart"
         d="M15.4999 1.09998H21.9999L22.8999 1.99998V8.49998H21.0999V4.17277L10.6363 14.6364L9.36353 13.3636L19.8271 2.89998H15.4999V1.09998Z"
         fill={color ?? Colors.Blue[500]}
       />

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

@@ -26,7 +26,7 @@ export const PastCouncilStats = ({
       title="Total missed rewards"
       value={totalMissedRewards}
       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"
+      tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#budget"
     />
     <TokenValueStat
       title="Total paid rewards"

packages/ui/src/forum/components/threads/ThreadListItem.tsx

@@ -6,7 +6,7 @@ import { BlockTime } from '@/common/components/BlockTime'
 import { PinIcon } from '@/common/components/icons/PinIcon'
 import { TableListItem, TableListItemAsLinkHover } from '@/common/components/List'
 import { GhostRouterLink } from '@/common/components/RouterLink'
-import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
+import { Tooltip } from '@/common/components/Tooltip'
 import { TextBig, TextMedium } from '@/common/components/typography'
 import { Colors, Overflow } from '@/common/constants'
 import { ForumRoutes, ThreadsColLayout } from '@/forum/constant'

packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx

@@ -21,7 +21,6 @@ import {
   ToggleCheckbox,
 } from '@/common/components/forms'
 import { Arrow } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -33,8 +32,7 @@ import {
   ScrolledModalContainer,
   TransactionInfoContainer,
 } from '@/common/components/Modal'
-import { TooltipExternalLink, Tooltip } from '@/common/components/Tooltip'
-import { TooltipDefault } from '@/common/components/Tooltip/TooltipDefault'
+import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { TransactionInfo } from '@/common/components/TransactionInfo'
 import { TextMedium } from '@/common/components/typography'
 import { definedValues } from '@/common/utils'
@@ -280,18 +278,9 @@ export const BuyMembershipForm = ({
               <TransactionInfo
                 title="Creation fee:"
                 value={membershipPrice?.toBn()}
-                tooltipText={
-                  <>
-                    Creation fee is the price of membership, it is managed by council through the proposal system. It is
-                    inclusive of transaction fee.
-                    <TooltipExternalLink
-                      href="https://joystream.gitbook.io/joystream-handbook/governance/proposals"
-                      target="_blank"
-                    >
-                      <TextMedium>Link</TextMedium> <LinkSymbol />
-                    </TooltipExternalLink>
-                  </>
-                }
+                tooltipText="Creation fee is the price of membership, it is managed by council through the proposal system. It is inclusive of transaction fee."
+                tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/governance/proposals"
+                tooltipLinkText="Learn more"
               />
             </TransactionInfoContainer>
           )}

packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipSignModal.tsx

@@ -113,7 +113,7 @@ export const BuyMembershipSignModal = ({
         <TransactionInfo
           title="Creation fee:"
           value={membershipPrice?.toBn()}
-          tooltipText={'The price to create a membership.'}
+          tooltipText="The price to create a membership."
         />
       </ModalTransactionFooter>
     </TransactionModal>

packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx

@@ -4,7 +4,6 @@ import * as Yup from 'yup'
 
 import { ButtonPrimary } from '@/common/components/buttons'
 import { InputComponent, InputText, InputTextarea } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -14,7 +13,6 @@ import {
   ScrolledModalContainer,
   Row,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium } from '@/common/components/typography'
 import { useKeyring } from '@/common/hooks/useKeyring'
 import { useYupValidationResolver } from '@/common/utils/validation'
@@ -156,18 +154,9 @@ export const InviteMemberFormModal = ({ onClose, onSubmit }: InviteProps) => {
                 id="member-handle"
                 label="Membership handle"
                 required
-                tooltipText={
-                  <>
-                    Membership handle is the primary way of how members are displayed throughout all interfaces of the
-                    platform. Membership handle can be updated any time by the account holder.
-                    <TooltipExternalLink
-                      target="_blank"
-                      href="https://joystream.gitbook.io/testnet-workspace/system/memberships#membership"
-                    >
-                      Learn more <LinkSymbol />
-                    </TooltipExternalLink>
-                  </>
-                }
+                tooltipText="Membership handle is the primary way of how members are displayed throughout all interfaces of the platform. Membership handle can be updated any time by the account holder."
+                tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/memberships#membership"
+                tooltipLinkText="Learn more"
                 name="handle"
               >
                 <InputText id="member-handle" placeholder="Type" name="handle" />