🚀 Petra release 3.7.0 (#4857)

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.7.0 (Petra)][3.7.0] - 2024-06-17
+
+### Added
+- Update Argo bridge constraints proposal.
+
 ## [3.6.0] - 2024-05-28
 
 ### Added
@@ -397,7 +402,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.6.0...HEAD
+[unreleased]: https://github.com/Joystream/pioneer/compare/v3.7.0...HEAD
+[3.7.0]: https://github.com/Joystream/pioneer/compare/v3.6.0...v3.7.0
 [3.6.0]: https://github.com/Joystream/pioneer/compare/v3.5.2...v3.6.0
 [3.5.2]: https://github.com/Joystream/pioneer/compare/v3.5.1...v3.5.2
 [3.5.1]: https://github.com/Joystream/pioneer/compare/v3.5.0...v3.5.1

package.json

@@ -34,7 +34,7 @@
     "@babel/parser": "~7.21.0",
     "@babel/traverse": "~7.21.0",
     "@babel/types": "~7.21.0",
-    "@joystream/types": "4.5.0",
+    "@joystream/types": "4.6.0",
     "@polkadot/api": "10.7.1",
     "@polkadot/api-contract": "10.7.1",
     "@polkadot/api-derive": "10.7.1",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joystream/pioneer",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "GPL-3.0-only",
   "scripts": {
     "build": "node --max_old_space_size=4096 ./build.js",

packages/ui/src/accounts/components/AccountInfo.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react'
+
+import { AccountInfo } from './AccountInfo'
+
+export default {
+  title: 'Accounts/AccountInfo',
+  component: AccountInfo,
+  args: {
+    account: {
+      name: 'Alice',
+      address: 'j4VdDQVdwFYfQ2MvEdLT2EYZx4ALPQQ6yMyZopKoZEQmXcJrT',
+    },
+    lockType: 'Invitation',
+  },
+} as Meta
+
+export const Default = {
+  name: 'AccountInfo',
+}

packages/ui/src/accounts/components/AnonymousAccount.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react'
+import BN from 'bn.js'
+import React from 'react'
+
+import { Row } from '@/common/components/storybookParts/previewStyles'
+import { joy } from '@/mocks/helpers'
+
+import { AnonymousAccount } from './AnonymousAccount'
+
+type Args = {
+  address: string
+  amount?: number
+}
+
+export default {
+  title: 'Accounts/AnonymousAccount',
+  component: AnonymousAccount,
+  args: {
+    address: 'j4VdDQVdwFYfQ2MvEdLT2EYZx4ALPQQ6yMyZopKoZEQmXcJrT',
+    amount: 10,
+  },
+} as Meta<Args>
+
+export const Default: StoryObj<Args> = {
+  name: 'AnonymousAccount',
+  render: ({ address, amount }) => (
+    <Row>
+      <AnonymousAccount address={address} amount={amount ? new BN(joy(amount)) : undefined} />
+      <AnonymousAccount address={address} />
+    </Row>
+  ),
+}

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

@@ -0,0 +1,59 @@
+import { Identicon } from '@polkadot/react-identicon'
+import BN from 'bn.js'
+import React from 'react'
+import styled from 'styled-components'
+
+import { CopyComponent } from '@/common/components/CopyComponent'
+import { AccountRow, InfoTitle, InfoValue } from '@/common/components/Modal'
+import { TokenValue } from '@/common/components/typography'
+import { Colors } from '@/common/constants'
+import { shortenAddress } from '@/common/model/formatters'
+
+type Props = {
+  address: string
+  amount?: BN
+  addressLength?: number
+}
+
+export const AnonymousAccount = ({ address, amount, addressLength }: Props) => {
+  return (
+    <StyledAccountRow>
+      <Identicon size={40} theme={'beachball'} value={address} />
+      <Info>
+        <AccountCopyAddress altText={shortenAddress(address, addressLength)} copyText={address} />
+        {amount && (
+          <BalanceInfo>
+            <InfoTitle>Total Balance: </InfoTitle>
+            <InfoValue>
+              <TokenValue value={amount} size="xs" />
+            </InfoValue>
+          </BalanceInfo>
+        )}
+      </Info>
+    </StyledAccountRow>
+  )
+}
+
+const StyledAccountRow = styled(AccountRow)`
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  gap: 12px;
+  align-items: center;
+`
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
+
+const AccountCopyAddress = styled(CopyComponent)`
+  font-size: 16px;
+  color: ${Colors.Black[900]};
+`
+
+const BalanceInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`

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

@@ -9,7 +9,6 @@ import { isValidAddress } from '@/accounts/model/isValidAddress'
 import { RecoveryConditions } from '@/accounts/model/lockTypes'
 import { Account, AccountOption, LockType } from '@/accounts/types'
 import { Select, SelectedOption, SelectProps } from '@/common/components/selects'
-import { useKeyring } from '@/common/hooks/useKeyring'
 import { Address } from '@/common/types'
 
 import { filterByText } from './helpers'
@@ -41,17 +40,22 @@ interface BaseSelectAccountProps extends SelectAccountProps {
 
 const BaseSelectAccount = React.memo(
   ({ id, onChange, accounts, filter, selected, disabled, onBlur, isForStaking, variant }: BaseSelectAccountProps) => {
-    const options = accounts.filter(filter || (() => true))
+    const options = !filter
+      ? accounts
+      : accounts.filter(
+          (account) =>
+            account.address === selected?.address || // Always keep the selected account (otherwise the select behavior is strange)
+            filter(account)
+        )
 
     const [search, setSearch] = useState('')
 
     const filteredOptions = useMemo(() => filterByText(options, search), [search, options])
-    const keyring = useKeyring()
 
     const notSelected = !selected || selected.address !== search
 
     useEffect(() => {
-      if (filteredOptions.length === 0 && isValidAddress(search, keyring) && notSelected) {
+      if (filteredOptions.length === 0 && isValidAddress(search) && notSelected) {
         onChange?.(accountOrNamed(accounts, search, 'Unsaved account'))
       }
     }, [filteredOptions, search, notSelected])

packages/ui/src/accounts/modals/ClaimVestingModal/components/SelectVestingAccount.tsx

@@ -14,7 +14,6 @@ import { BalanceInfoInRow, InfoValue } from '@/common/components/Modal'
 import { ColumnGapBlock } from '@/common/components/page/PageContent'
 import { Option, OptionsListComponent, Select, SelectedOption } from '@/common/components/selects'
 import { TextMedium, TokenValue } from '@/common/components/typography'
-import { useKeyring } from '@/common/hooks/useKeyring'
 
 interface SelectVestingAccountProps {
   selected?: Account
@@ -29,12 +28,11 @@ export const SelectVestingAccount = ({ selected, onChange, id, disabled }: Selec
   const [search, setSearch] = useState('')
 
   const filteredOptions = useMemo(() => filterByText(options, search), [search, options])
-  const keyring = useKeyring()
 
   const notSelected = !selected || selected?.address !== search
 
   useEffect(() => {
-    if (filteredOptions.length === 0 && isValidAddress(search, keyring) && notSelected) {
+    if (filteredOptions.length === 0 && isValidAddress(search) && notSelected) {
       onChange?.(accountOrNamed(options, search, 'Unsaved account'))
     }
   }, [filteredOptions, search, notSelected])

packages/ui/src/accounts/model/isValidAddress.ts

@@ -1,11 +1,10 @@
-import { KeyringInstance } from '@polkadot/keyring/types'
-import { KeyringStruct } from '@polkadot/ui-keyring/types'
+import { encodeAddress, decodeAddress } from '@polkadot/util-crypto'
 
 import { Address } from '../../common/types'
 
-export function isValidAddress(address: Address, keyring: KeyringInstance | KeyringStruct) {
+export function isValidAddress(address: Address) {
   try {
-    keyring.encodeAddress(keyring.decodeAddress(address))
+    encodeAddress(decodeAddress(address))
   } catch (e) {
     return false
   }

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

@@ -2,6 +2,7 @@ import { BN_ZERO } from '@polkadot/util'
 import React, { useMemo, useState } from 'react'
 import styled from 'styled-components'
 
+import { AnonymousAccount } from '@/accounts/components/AnonymousAccount'
 import { useBalances } from '@/accounts/hooks/useBalance'
 import { useVotingOptOutAccounts } from '@/accounts/hooks/useVotingOptOutAccounts'
 import { PageHeaderRow, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
@@ -16,8 +17,6 @@ import { Warning } from '@/common/components/Warning'
 
 import { ElectionTabs } from '../components/ElectionTabs'
 
-import { BlacklistedAccount } from './BlacklistedAccount'
-
 export const BlacklistedAccounts = () => {
   const ACCOUNTS_PER_PAGE = 18
   const [page, setPage] = useState(1)
@@ -75,7 +74,7 @@ export const BlacklistedAccounts = () => {
               <h6>Accounts ({votingOptOutAccounts?.length})</h6>
               <BlacklistedAccountsList>
                 {paginatedAccounts.map((account, i) => (
-                  <BlacklistedAccount key={i} account={account} />
+                  <AnonymousAccount key={i} address={account.address} amount={account.balance} />
                 ))}
               </BlacklistedAccountsList>
               <Pagination