🚀 Release 3.4.0

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.4.0] - 2024-03-19
+
+### Fixed
+- Validator APR not showing.
+
+### Added
+- Github member links.
+
+### Changed
+- JOY token banner copy.
+
 ## [3.3.1] - 2024-03-14
 
 ### Added
@@ -152,7 +163,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.9.0] - 2023-11-03
 
 ### Added
-- Linkedin to membership social profile
+- Linkedin to membership social profile.
 
 ### Fixed
 - Proposal history blocks styles.
@@ -357,7 +368,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/v3.3.0...HEAD
+[unreleased]: https://github.com/Joystream/pioneer/compare/v3.4.0...HEAD
+[3.4.0]: https://github.com/Joystream/pioneer/compare/v3.3.1...v3.4.0
 [3.3.1]: https://github.com/Joystream/pioneer/compare/v3.3.0...v3.3.1
 [3.3.0]: https://github.com/Joystream/pioneer/compare/v3.2.0...v3.3.0
 [3.2.0]: https://github.com/Joystream/pioneer/compare/v3.1.0...v3.2.0

package.json

@@ -34,20 +34,20 @@
     "@babel/parser": "~7.21.0",
     "@babel/traverse": "~7.21.0",
     "@babel/types": "~7.21.0",
-    "@polkadot/api": "8.9.1",
-    "@polkadot/api-contract": "8.9.1",
-    "@polkadot/api-derive": "8.9.1",
-    "@polkadot/hw-ledger": "9.5.1",
-    "@polkadot/keyring": "9.5.1",
-    "@polkadot/networks": "9.5.1",
-    "@polkadot/rpc-core": "8.9.1",
-    "@polkadot/rpc-provider": "8.9.1",
-    "@polkadot/types": "8.9.1",
-    "@polkadot/types-known": "8.9.1",
-    "@polkadot/util": "9.5.1",
-    "@polkadot/util-crypto": "9.5.1",
-    "bn.js": "^4.11.9",
-    "@joystream/js@1.2.0": "patch:@joystream/js@npm%3A1.2.0#./.yarn/patches/@joystream-js-npm-1.2.0-a8795e7496.patch"
+    "@joystream/types": "4.3.0",
+    "@polkadot/api": "10.1.4",
+    "@polkadot/api-contract": "10.1.4",
+    "@polkadot/api-derive": "10.1.4",
+    "@polkadot/hw-ledger": "11.1.1",
+    "@polkadot/keyring": "11.1.1",
+    "@polkadot/networks": "11.1.1",
+    "@polkadot/rpc-core": "10.1.4",
+    "@polkadot/rpc-provider": "10.1.4",
+    "@polkadot/types": "10.1.4",
+    "@polkadot/types-known": "10.1.4",
+    "@polkadot/util": "11.1.1",
+    "@polkadot/util-crypto": "11.1.1",
+    "bn.js": "^4.11.9"
   },
   "engines": {
     "node": ">=18",

packages/ui/.storybook/preview.tsx

@@ -7,6 +7,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { GlobalModals } from '../src/app/GlobalModals'
 import { GlobalStyle } from '../src/app/providers/GlobalStyle'
+import { ResponsiveProvider } from '../src/common/providers/responsive/provider'
 import { OnBoardingProvider } from '../src/common/providers/onboarding/provider'
 import { NotificationsHolder } from '../src/common/components/page/SideNotification'
 import { TransactionStatus } from '../src/common/components/TransactionStatus/TransactionStatus'
@@ -53,16 +54,18 @@ const RHFDecorator: Decorator = (Story) => {
   )
 }
 
-const ModalDecorator: Decorator = (Story) => (
+const Providers: Decorator = (Story) => (
   <TransactionStatusProvider>
     <ModalContextProvider>
       <OnBoardingProvider>
         <ValidatorContextProvider>
-          <Story />
-          <GlobalModals />
-          <NotificationsHolder>
-            <TransactionStatus />
-          </NotificationsHolder>
+          <ResponsiveProvider>
+            <Story />
+            <GlobalModals />
+            <NotificationsHolder>
+              <TransactionStatus />
+            </NotificationsHolder>
+          </ResponsiveProvider>
         </ValidatorContextProvider>
       </OnBoardingProvider>
     </ModalContextProvider>
@@ -85,7 +88,7 @@ const KeyringDecorator: Decorator = (Story) => {
 }
 
 export const decorators = [
-  ModalDecorator,
+  Providers,
   stylesWrapperDecorator,
   i18nextDecorator,
   RHFDecorator,

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joystream/pioneer",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "GPL-3.0-only",
   "scripts": {
     "build": "node --max_old_space_size=4096 ./build.js",
@@ -26,22 +26,22 @@
   "dependencies": {
     "@apollo/client": "3.5.7",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
-    "@joystream/js": "1.2.0",
+    "@joystream/js": "1.10.0",
     "@joystream/markdown-editor": "^0.1.0",
-    "@joystream/metadata-protobuf": "^2.10.0",
-    "@joystream/types": "4.2.0",
+    "@joystream/metadata-protobuf": "2.15.0",
+    "@joystream/types": "4.3.0",
     "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@noble/hashes": "^1.1.5",
     "@oneidentity/zstd-js": "^1.0.3",
-    "@polkadot/api": "8.9.1",
-    "@polkadot/extension-dapp": "0.44.2-4",
-    "@polkadot/keyring": "9.5.1",
-    "@polkadot/react-identicon": "2.5.1",
-    "@polkadot/types": "8.9.1",
-    "@polkadot/ui-keyring": "2.5.1",
-    "@polkadot/util": "9.5.1",
-    "@polkadot/util-crypto": "9.5.1",
+    "@polkadot/api": "10.1.4",
+    "@polkadot/extension-dapp": "0.45.3",
+    "@polkadot/keyring": "11.1.1",
+    "@polkadot/react-identicon": "3.1.1",
+    "@polkadot/types": "10.1.4",
+    "@polkadot/ui-keyring": "3.1.1",
+    "@polkadot/util": "11.1.1",
+    "@polkadot/util-crypto": "11.1.1",
     "@popperjs/core": "^2.10.2",
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.27",
@@ -84,7 +84,7 @@
     "react-router-dom": "^5.3.0",
     "react-transition-group": "^4.4.2",
     "remark-gfm": "^3.0.1",
-    "rxjs": "^7.5.5",
+    "rxjs": "7.8.1",
     "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.1",
     "subscriptions-transport-ws": "^0.11.0",
@@ -127,6 +127,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-import-graphql": "^2.8.1",
     "babel-plugin-styled-components": "^2.1.3",
+    "buffer": "^6.0.3",
     "chalk": "^4.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",

packages/ui/src/app/App.stories.tsx

@@ -123,8 +123,6 @@ export default {
           : {
               query: {
                 members: { membershipPrice: joy(20) },
-                council: { stage: { stage: { isIdle: true }, changedAt: 123 } },
-                referendum: { stage: {} },
                 staking: {
                   validators: {
                     entries: Object.entries(validators).map(([address, { commission }]) => [

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

@@ -23,9 +23,6 @@ export default {
         accounts: { list: allAccounts },
         chain: {
           query: {
-            council: {
-              stage: { stage: { isIdle: true }, changedAt: 123 },
-            },
             referendum: {
               accountsOptedOut: {
                 keys: Array.from({ length: 23 }).map(

packages/ui/src/app/pages/Profile/components/BannerSection.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import { CurrencyName } from '@/app/constants/currency'
 import { CloseButton } from '@/common/components/buttons'
-import { LinkButtonLinkStyles } from '@/common/components/buttons/LinkButtons'
 import { Arrow, QuestionIcon } from '@/common/components/icons'
+import { Link } from '@/common/components/Link'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { DefaultTooltip } from '@/common/components/Tooltip'
 import { TextInlineMedium, TextMedium } from '@/common/components/typography/Text'
@@ -21,26 +22,20 @@ export const BannerSection = ({ setShouldDismissBanner }: Props) => {
           <BannerTooltip>
             <QuestionIcon />
           </BannerTooltip>
-          <TextInlineMedium bold={true}>What is Joy Token?</TextInlineMedium>
+          <TextInlineMedium bold={true}>What is the {CurrencyName.integerValue} Token?</TextInlineMedium>
         </BannerTitle>
         <CloseButton onClick={() => setShouldDismissBanner(true)} />
       </BannerHeader>
       <TextMedium>
-        JOY token is a native crypto asset of Joystream blockchain. It is used for platform governance, purchasing NFTs,
-        trading creator tokens, and covering blockchain processing fees. They are listed on&nbsp;
-        <CustomLinkStyle
-          as={'a'}
-          to={''}
-          href="https://www.mexc.com/exchange/JOYSTREAM_USDT?_from=market"
-          target="_blank"
-          size={'medium'}
-        >
-          <TextInlineMedium>MEXC</TextInlineMedium>
-        </CustomLinkStyle>
-        &nbsp;exchange under "JOYSTREAM" ticker.
+        The {CurrencyName.integerValue} token is the native crypto asset of the Joystream blockchain. It is used for
+        platform governance, purchasing NFTs, trading creator tokens, and covering the&nbsp;blockchain processing fees.{' '}
+        <StyledLink dark href="https://www.joystream.org/token/#exchanges">
+          This token is listed on several exchanges.
+        </StyledLink>
       </TextMedium>
       <TextLink href="https://www.joystream.org/token#earn" target="_blank">
-        <TextInlineMedium bold={true}>Learn how to earn JOY's</TextInlineMedium> <Arrow size={'24'} direction="right" />
+        <TextInlineMedium bold={true}>Learn how to earn {CurrencyName.integerValue}s</TextInlineMedium>{' '}
+        <Arrow size={'24'} direction="right" />
       </TextLink>
     </Banner>
   )
@@ -71,8 +66,6 @@ const TextLink = styled.a`
 const BannerTooltip = styled(DefaultTooltip)`
   margin-top: 1px;
 `
-const CustomLinkStyle = styled(LinkButtonLinkStyles)`
-  display: inline-flex;
-  // margin-left: 2px;
-  // margin-right: 2px;
+const StyledLink = styled(Link)`
+  font-family: inherit;
 `

packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx

@@ -132,7 +132,6 @@ export default {
             council: {
               budget: joy(1000),
               councilorReward: joy(1),
-              stage: { stage: { isIdle: true }, changedAt: 123 },
             },
             referendum: { stage: {} },
           },

packages/ui/src/common/components/icons/socials/Github.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const GithubIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className={className}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  )
+}

packages/ui/src/common/components/icons/socials/index.ts

@@ -10,3 +10,4 @@ export * from './Youtube'
 export * from './Wechat'
 export * from './Whatsapp'
 export * from './Linkedin'
+export * from './Github'

packages/ui/src/council/hooks/useElectionStage.ts

@@ -26,19 +26,19 @@ export const useElectionStage = (): UseElectionStage => {
 export const electionStageObservable = (api: Api) => {
   const councilObservable = api.query.council.stage().pipe(
     concatMap(({ stage: councilStage, changedAt }): Observable<StageInfo> => {
-      if (councilStage.isIdle) {
+      if (councilStage.isIdle.valueOf()) {
         return of({ stage: 'inactive', changedAt })
-      } else if (councilStage.isAnnouncing) {
+      } else if (councilStage.isAnnouncing.valueOf()) {
         return of({ stage: 'announcing', changedAt })
       }
       return EMPTY
     })
   )
   const referendumObservable = api.query.referendum.stage().pipe(
     concatMap((referendumStage): Observable<StageInfo> => {
-      if (referendumStage.isVoting) {
+      if (referendumStage.isVoting.valueOf()) {
         return of({ stage: 'voting', changedAt: referendumStage.asVoting.started })
-      } else if (referendumStage.isRevealing) {
+      } else if (referendumStage.isRevealing.valueOf()) {
         return of({ stage: 'revealing', changedAt: referendumStage.asRevealing.started })
       }
       return EMPTY

packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx

@@ -102,6 +102,7 @@ const searchFilterOptions: MemberSearchFilter[] = [
   'Whatsapp',
   'Youtube',
   'Linkedin',
+  'Github',
 ]
 
 export interface MemberListFiltersProps {

packages/ui/src/memberships/components/SocialMediaSelector.tsx

@@ -9,8 +9,7 @@ import { MemberFormFields } from '@/memberships/modals/BuyMembershipModal/BuyMem
 
 import { SocialMediaInput, SocialMediaSelectorList } from './SocialMediaSelector/SocialMediaSelector'
 
-// TODO Partial after upgrading @joystream/metadata-protobuf
-const socialToPlaceholder: Partial<Record<Socials, string>> = {
+const socialToPlaceholder: Record<Socials, string> = {
   HYPERLINK: 'Enter URL',
   WECHAT: 'Enter Username',
   IRC: 'Enter Username',
@@ -23,6 +22,7 @@ const socialToPlaceholder: Partial<Record<Socials, string>> = {
   TWITTER: 'Enter Username',
   EMAIL: 'Enter Email',
   LINKEDIN: 'Enter Username',
+  GITHUB: 'Enter Username',
 }
 
 interface Props {

packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx

@@ -10,8 +10,7 @@ import { MemberFormFields } from '@/memberships/modals/BuyMembershipModal/BuyMem
 
 import { socialTitle } from '../SocialMediaTile/SocialMediaTile'
 
-// TODO Partial after upgrading @joystream/metadata-protobuf
-const socialToPlaceholder: Partial<Record<Socials, string>> = {
+const socialToPlaceholder: Record<Socials, string> = {
   HYPERLINK: 'Enter URL',
   WECHAT: 'Enter Username',
   IRC: 'Enter Username',
@@ -24,6 +23,7 @@ const socialToPlaceholder: Partial<Record<Socials, string>> = {
   TWITTER: 'Enter Username',
   EMAIL: 'Enter Email',
   LINKEDIN: 'Enter Username',
+  GITHUB: 'Enter Username',
 }
 
 interface Props {

packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx

@@ -15,16 +15,16 @@ import {
   YoutubeIcon,
   TelegramIcon,
   LinkedinIcon,
+  GithubIcon,
 } from '@/common/components/icons/socials'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium } from '@/common/components/typography'
 import { BorderRad, Colors } from '@/common/constants'
 import { capitalizeFirstLetter } from '@/common/helpers'
 
-// TODO remove 'GITHUB' and Partial after upgrading @joystream/metadata-protobuf
-export type Socials = keyof typeof MembershipMetadata.ExternalResource.ResourceType | 'GITHUB'
+export type Socials = keyof typeof MembershipMetadata.ExternalResource.ResourceType
 
-export const socialToIcon: Partial<Record<Socials, React.ReactElement>> = {
+export const socialToIcon: Record<Socials, React.ReactElement> = {
   EMAIL: <EmailIcon />,
   TWITTER: <TwitterIcon />,
   TELEGRAM: <TelegramIcon />,
@@ -37,6 +37,7 @@ export const socialToIcon: Partial<Record<Socials, React.ReactElement>> = {
   WHATSAPP: <WhatsappIcon />,
   HYPERLINK: <CustomLinkIcon />,
   LINKEDIN: <LinkedinIcon />,
+  GITHUB: <GithubIcon />,
 }
 
 export const socialMediaList = Object.keys(socialToIcon) as (keyof typeof socialToIcon)[]

packages/ui/src/mocks/data/proposals.ts

@@ -245,7 +245,6 @@ export const proposalsPagesChain = (
           budget: councilBudget,
           councilorReward,
           nextRewardPayments,
-          stage: { stage: { isIdle: true }, changedAt: 123 },
         },
         referendum: { stage: {} },
 

packages/ui/src/mocks/helpers/transactions.ts

@@ -27,7 +27,7 @@ export const fromTxMock = (
   const event = failure ? createErrorEvents(failure) : createSuccessEvents(eventData, moduleName, eventName)
   const txResult = stubTransactionResult(event)
 
-  const paymentInfo = () => of({ partialFee: createType('BalanceOf', joy(fee)) })
+  const paymentInfo = () => of({ partialFee: createType('BalanceOf', new BN(joy(fee))) })
 
   return (...args: any[]) => {
     onCall?.(...args)

packages/ui/src/mocks/providers/api.tsx

@@ -46,6 +46,8 @@ export const MockApiProvider: FC<MockApiProps> = ({ children, chain }) => {
     const defaultQuery = {
       session: { validators: [] },
       staking: { activeEra: {} },
+      council: { stage: { stage: { isIdle: true, isAnnouncing: false }, changedAt: 123 } },
+      referendum: { stage: { isVoting: false, isRevealing: false } },
     }
     const rpcChain = {
       getBlockHash: createType('BlockHash', BLOCK_HASH),