🚀 Release 1.3.0 (#4176)

CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.0] - 2023-02-17
+
+### Added
+- Member handles when hovering candidacies.
+- Allow full UTF-8 proposal titles.
+- `decode` helper command for development.
+
+### Changed
+- Open markdown links in a new tab.
+- WG openings list items and selector options.
+- Description of the update WG budget proposal.
+- Rename proposal "Constants" to "Parameters".
+
+### Removed
+- The virtual member role.
+
+### Fixed
+- Invite member modal.
+- New posts preview modal.
+- Status of rejected and canceled application.
+- Block explorer icon look.
+- Do not truncate forum category descriptions.
+- Latest threads reply count.
+- Typos.
+
 ## [1.2.0] - 2023-02-09
 
 ### Added
@@ -51,7 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Blockheight info labels (in the settings).
 - Replaced/Removed some more lorem ipsum.
 - Better prevent localstorage overwrites from the forum tread watchlist.
-- The hire limit on single postion openings.
+- The hire limit on single position openings.
 - The temporary "Insufficient balance to cover fee" message on the vesting claim modal.
 
 ## [1.0.1] - 2023-01-05
@@ -63,7 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Mainnet network in the setting.
-- Documentation link to the [Joystrem Handbook](https://joystream.gitbook.io/testnet-workspace) for each working group.
+- Documentation link to the [Joystream Handbook](https://joystream.gitbook.io/testnet-workspace) for each working group.
 - Refresh auto-conf network button.
 - RPC blockheight and latest processed block in settings.
 
@@ -81,9 +106,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Testnet banner.
 
 ### Fixed
-- Large election relealing stage (long term fix).
+- Large election revealing stage (long term fix).
 - Recovering the stake locked when applying to an opening.
-- Some broken [Joystrem Handbook](https://joystream.gitbook.io/testnet-workspace) links.
+- Some broken [Joystream Handbook](https://joystream.gitbook.io/testnet-workspace) links.
 - Replace placeholder text on vesting tooltips.
 - Broken text on the insufficient funds modal.
 - Proposal discussion order.
@@ -92,7 +117,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.1.1] - 2022-12-02
 
-[unreleased]: https://github.com/Joystream/pioneer/compare/v1.2.0...HEAD
+[unreleased]: https://github.com/Joystream/pioneer/compare/v1.3.0...HEAD
+[1.3.0]: https://github.com/Joystream/pioneer/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/Joystream/pioneer/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/Joystream/pioneer/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/Joystream/pioneer/compare/v1.0.1...v1.1.0

docs/mocks.md

@@ -55,6 +55,41 @@ Another way to influence the on-chain state for testing purpose, is to provide a
       <path to the runtime> --tmp --alice --validator --unsafe-ws-external --unsafe-rpc-external --rpc-cors=all --chain packages/ui/dev/chain-spec/data/chain-spec.json --log runtime
       ```
 ### Other helper commands
+
+#### Decoding data from the chain:
+
+```shell
+> yarn workspace @joystream/pioneer run helpers decode -t [TYPE] -v [VALUE]
+```
+
+This command requires two arguments:
+- `-t`, `--type`: The expected type of the value to decode. It can be `text`, or the name or alias of a [metadata class](https://github.com/Joystream/joystream/blob/master/metadata-protobuf/doc/index.md).
+- `-v`, `--value`: The hash or the string representation of the `Uint8Array` to decode.
+
+With `-t text` this command will simply decode encoded plaint text values. E.g:
+```shell
+> yarn workspace @joystream/pioneer run helpers decode -t text -v 0x4c6f72656d20697370756d
+Lorem ispum
+```
+
+Otherwhise the type options should refer to a [metadata class](https://github.com/Joystream/joystream/blob/master/metadata-protobuf/doc/index.md). It can be the name of the class:
+```shell
+> yarn workspace @joystream/pioneer run helpers decode -t CouncilCandidacyNoteMetadata -v 0x0a0a616...
+CouncilCandidacyNoteMetadata {
+  ...
+}
+```
+
+Or it can be an alias:
+```shell
+> yarn workspace @joystream/pioneer run helpers decode -t candidacy -v 0x0a0a616...
+CouncilCandidacyNoteMetadata {
+  ...
+}
+```
+The available aliases are: `post`, `opening`, `thread`, `bounty`, `candidacy`, `candidate`, `application`, `member`, and `membership`.
+
+#### Others
 - `yarn workspace @joystream/pioneer run helpers commitment -s <salt> [-a <accountId>] [-o <optionId>] [-c <cycleId>]` - Calculate a commitment
 - `yarn workspace @joystream/pioneer run helpers nextCouncilStage` - Wait until the next council stage start
 

packages/ui/dev/helpers/decode.ts

@@ -0,0 +1,47 @@
+import * as MetaClasses from '@joystream/metadata-protobuf'
+import { AnyMetadataClass } from '@joystream/metadata-protobuf/types'
+import { createType } from '@joystream/types'
+import chalk from 'chalk'
+import yargs from 'yargs'
+
+import { metadataFromBytes } from '../../src/common/model/JoystreamNode'
+
+const MetaClassAliases = {
+  post: 'ForumPostMetadata',
+  opening: 'OpeningMetadata',
+  thread: 'ForumThreadMetadata',
+  bounty: 'BountyMetadata',
+  candidacy: 'CouncilCandidacyNoteMetadata',
+  candidate: 'CouncilCandidacyNoteMetadata',
+  application: 'ApplicationMetadata',
+  member: 'MembershipMetadata',
+  membership: 'MembershipMetadata',
+} as Record<string, keyof typeof MetaClasses>
+
+const options = {
+  type: { type: 'string', alias: 't', example: ['text', 'post', 'ForumPostMetadata'], default: 'text' },
+  value: { type: 'string', alias: 'v', demand: true },
+} as const
+
+type CommandOptions = yargs.InferredOptionTypes<typeof options>
+type Args = yargs.Arguments<CommandOptions>
+
+const decode = (type: string, value: string): string => {
+  if (type === 'text') {
+    return createType('Text', value).toHuman()
+  } else {
+    const metaType = (MetaClassAliases[type as any] ?? type) as keyof typeof MetaClasses
+    const metadata = metadataFromBytes(MetaClasses[metaType] as AnyMetadataClass<any>, value)
+    return `${metaType} ${JSON.stringify(metadata, null, 2)}`
+  }
+}
+const handler = ({ type, value }: Args) => {
+  process.stdout.write(chalk.green(decode(type, value)) + '\n')
+}
+
+export const decodeModule = {
+  command: 'decode',
+  describe: 'Decode chain data',
+  handler,
+  builder: (argv: yargs.Argv<unknown>) => argv.options(options),
+}

packages/ui/dev/helpers/index.ts

@@ -3,6 +3,7 @@ import yargs from 'yargs'
 import { apiBenchmarking } from './apiBenchmarking'
 import { setChainSpecModule } from './chain-spec'
 import { commitmentModule } from './commitment'
+import { decodeModule } from './decode'
 import { nextCouncilStageModule } from './nextCouncilStage'
 
 yargs(process.argv.slice(2))
@@ -11,5 +12,6 @@ yargs(process.argv.slice(2))
   .command(apiBenchmarking)
   .command(setChainSpecModule)
   .command(commitmentModule)
+  .command(decodeModule)
   .command(nextCouncilStageModule)
   .demandCommand().argv

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

@@ -49,8 +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.\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"
+            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."
+            tooltipLinkURL="https://handbook.joystream.org/system/council"
           >
             <SelectStakingAccount
               id="account-select"

packages/ui/src/app/GlobalModals.tsx

@@ -54,6 +54,8 @@ import { MemberModalCall, MemberProfile } from '@/memberships/components/MemberP
 import { useMyMemberships } from '@/memberships/hooks/useMyMemberships'
 import { BuyMembershipModal, BuyMembershipModalCall } from '@/memberships/modals/BuyMembershipModal'
 import { DisconnectWalletModal, DisconnectWalletModalCall } from '@/memberships/modals/DisconnectWalletModal'
+import { InviteMemberModal } from '@/memberships/modals/InviteMemberModal'
+import { InviteMemberModalCall } from '@/memberships/modals/InviteMemberModal/types'
 import { SignOutModal } from '@/memberships/modals/SignOutModal/SignOutModal'
 import { SignOutModalCall } from '@/memberships/modals/SignOutModal/types'
 import { SwitchMemberModal, SwitchMemberModalCall } from '@/memberships/modals/SwitchMemberModal'
@@ -119,6 +121,7 @@ export type ModalNames =
   | ModalName<UpdateMembershipModalCall>
   | ModalName<ReportContentModalCall>
   | ModalName<PostReplyModalCall>
+  | ModalName<InviteMemberModalCall>
 
 const modals: Record<ModalNames, ReactElement> = {
   Member: <MemberProfile />,
@@ -149,6 +152,7 @@ const modals: Record<ModalNames, ReactElement> = {
   RevealVote: <RevealVoteModal />,
   RecoverBalance: <RecoverBalanceModal />,
   IncreaseWorkerStake: <IncreaseWorkerStakeModal />,
+  InviteMemberModal: <InviteMemberModal />,
   OnBoardingModal: <OnBoardingModal />,
   RestoreVotes: <RestoreVotesModal />,
   // AddBounty: <AddBountyModal />,

packages/ui/src/app/components/SideBar.tsx

@@ -106,7 +106,7 @@ export const SideBar = () => {
                 to={`https://polkadot.js.org/apps/?rpc=${endpoints.nodeRpcEndpoint}#/explorer`}
               >
                 Explorer
-                <LinkSymbol color={Colors.Black[500]} />
+                <LinkSymbol color={Colors.Black[500]} className="sidebarLinkSymbol" />
               </NavigationLink>
             </NavigationLinksItem>
             <NavigationLinksItem>
@@ -197,4 +197,7 @@ const NavigationLinksItem = styled.li`
   display: flex;
   height: fit-content;
   width: 100%;
+  .sidebarLinkSymbol {
+    grid-column: 6 !important;
+  }
 `

packages/ui/src/app/pages/Forum/ForumCategory.tsx

@@ -74,7 +74,7 @@ export const ForumCategory = () => {
             </PreviousPage>
           }
           description={
-            <TextMedium className="category-description" normalWeight inter lighter truncateLines={2}>
+            <TextMedium className="category-description" normalWeight inter lighter>
               {category.description}
             </TextMedium>
           }

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

@@ -59,7 +59,7 @@ export const MarkdownPreview = ({ markdown, append, ...styleProps }: MarkdownPre
             {children}
           </Mention>
         ) : (
-          <a style={{ overflowWrap: 'break-word' }} href={href}>
+          <a style={{ overflowWrap: 'break-word' }} href={href} rel="noopener noreferrer" target="_blank">
             {children}
           </a>
         )

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

@@ -281,6 +281,7 @@ export const ScrolledModal = styled(Modal)`
   &${ModalWrap} {
     max-height: calc(100% - 128px);
     grid-template-rows: auto 1fr auto;
+    position: fixed;
   }
 `
 

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

@@ -8,22 +8,34 @@ import { SymbolProps } from './common'
 export function LinkSymbol({ className, color }: SymbolProps) {
   return (
     <LinkSymbolStyle
-      viewBox="0 0 24 24"
+      viewBox={className == 'sidebarLinkSymbol' ? '0 0 16 16' : '0 0 24 24'}
       preserveAspectRatio="xMidYMid meet"
       fill="none"
       color="currentColor"
       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]}
-      />
+      {className == 'sidebarLinkSymbol' ? (
+        <path
+          className="primaryPart"
+          d="M9 1H8V3H9H11.5858L5.29289 9.29289L4.58579 10L6 11.4142L6.70711 10.7071L13 4.41421V7V8H15V7V2L14 1H9ZM2 3L1 4V14L2 15H12L13 14V11V10H11V11V13H3V5H5H6V3H5H2Z"
+          fill={color ?? Colors.Blue[500]}
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      ) : (
+        <>
+          <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]}
+          />
+        </>
+      )}
     </LinkSymbolStyle>
   )
 }

packages/ui/src/common/components/page/Sidebar/NavigationLink.tsx

@@ -119,7 +119,21 @@ const NavigationItemLinkChildren = styled.div`
   ${Overflow.FullDots};
 
   svg {
-    width: 20px;
+    width: 16px;
+    height: 16px;
+
+    path {
+      fill: ${Colors.Black[400]}!important;
+      transition: ${Transitions.all};
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${Colors.White}!important;
+      }
+    }
   }
 `
 

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

@@ -22,11 +22,14 @@ interface Props {
   children: ReactNode
   onClick: () => void
   disabled?: boolean
+  className?: string
 }
 
-export const Option = ({ children, onClick, disabled }: Props) => (
+export const Option = ({ children, onClick, disabled, className }: Props) => (
   <OptionComponentContainer onClick={onClick} disabled={disabled}>
-    <OptionComponent disabled={disabled}>{children}</OptionComponent>
+    <OptionComponent disabled={disabled} className={className}>
+      {children}
+    </OptionComponent>
   </OptionComponentContainer>
 )
 

packages/ui/src/common/model/JoystreamNode/index.ts

@@ -1,5 +1,6 @@
 export * from './errorEvents'
 export * from './getDataFromEvent'
 export * from './isModuleEvent'
+export * from './metadataFromBytes'
 export * from './metadataToBytes'
 export * from './types'

packages/ui/src/common/model/JoystreamNode/metadataFromBytes.ts

@@ -1,9 +1,8 @@
 import { AnyMessage, AnyMetadataClass, DecodedMetadataObject } from '@joystream/metadata-protobuf/types'
+import { createType } from '@joystream/types'
 import { Bytes } from '@polkadot/types/primitive'
 import { isObject } from '@polkadot/util'
 
-import { createType } from '@/common/model/createType'
-
 function metaToObject<T>(metaClass: AnyMetadataClass<T>, value: AnyMessage<T>) {
   return metaClass.toObject(value, { arrays: false, longs: String }) as DecodedMetadataObject<T>
 }

packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx

@@ -56,7 +56,7 @@ export const CandidateCard = ({
       <CandidateCardImageWrapper>
         <CandidateCardImage imageUrl={info.bannerUri} />
       </CandidateCardImageWrapper>
-      <CandidateCardContentWrapper>
+      <CandidateCardContentWrapper title={member.handle}>
         <CandidateCardContent>
           <CandidateCardMemberInfoWrapper>
             <MemberInfo onlyTop member={member} skipModal={isPreview} />

packages/ui/src/forum/components/ThreadCard/ThreadCard.tsx

@@ -22,6 +22,7 @@ interface ThreadCardProps {
 }
 
 export const ThreadCard = ({ thread, className, watchlistButton }: ThreadCardProps) => {
+  const replies = thread.visiblePostsCount - 1
   return (
     <Box
       to={generatePath(ForumRoutes.thread, { id: thread.id })}
@@ -44,10 +45,12 @@ export const ThreadCard = ({ thread, className, watchlistButton }: ThreadCardPro
         {thread.initialPostText}
       </TextMedium>
       <ColumnGapBlock justify="space-between" align="center">
-        <ColumnGapBlock gap={8}>
-          <ReplyIcon />
-          <CountBadge count={thread.visiblePostsCount} />
-        </ColumnGapBlock>
+        {replies > 0 && (
+          <ColumnGapBlock gap={8}>
+            <ReplyIcon />
+            <CountBadge count={replies} />
+          </ColumnGapBlock>
+        )}
         {watchlistButton && <WatchlistButton threadId={thread.id} />}
       </ColumnGapBlock>
     </Box>