📱 Improve mobile UI

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

@@ -1,21 +1,22 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { AccountInfo } from '@/accounts/components/AccountInfo'
-import { AccountLocks, AccountLocksWrapper } from '@/accounts/components/AccountLocks'
+import { AccountLocks } from '@/accounts/components/AccountLocks'
 import { useBalance } from '@/accounts/hooks/useBalance'
 import { AccountOption } from '@/accounts/types'
 import { BalanceInfoNarrow, InfoTitle, InfoValue } from '@/common/components/Modal'
 import { TokenValue } from '@/common/components/typography'
-import { Colors } from '@/common/constants'
+import { BreakPoints, Colors } from '@/common/constants'
 
 interface Props {
  option: AccountOption
  isForStaking?: boolean
  variant?: 's' | 'm' | 'l'
+ isSelected?: boolean
 }
 
-export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
+export const OptionAccount = ({ option, isForStaking, variant, isSelected }: Props) => {
  const balances = useBalance(option.address)
  const balance = isForStaking ? balances?.total : balances?.transferable
  const balanceType = isForStaking ? 'Total' : 'Transferable'
@@ -25,23 +26,34 @@ export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
  return (
  <>
  <AccountInfo account={option} locked={isLocked} variant={variant} />
- <BalanceInfoNarrow>
+ <BalanceContainer isSelected={isSelected}>
  <InfoTitle>{balanceType} balance</InfoTitle>
- <InfoValueWithLocks>
+ <InfoValue>
  <Value value={balance} locked={isLocked} />
  <AccountLocks locks={balances?.locks} />
- </InfoValueWithLocks>
- </BalanceInfoNarrow>
+ </InfoValue>
+ </BalanceContainer>
  </>
  )
 }
 
-const Value = styled(TokenValue)<{ locked?: boolean }>`
- color: ${({ locked }) => (locked ? Colors.Black[500] : 'default')};
-`
+const BalanceContainer = styled(BalanceInfoNarrow)<Pick<Props, 'isSelected'>>`
+ gap: 12px;
 
-export const InfoValueWithLocks = styled(InfoValue)`
- ${AccountLocksWrapper} {
- right: 0;
+ @media (max-width: ${BreakPoints.sm - 1}px) {
+ ${({ isSelected }) =>
+ isSelected
+ ? css`
+ display: none;
+ `
+ : css`
+ ${InfoValue} {
+ display: contents;
+ }
+ `};
  }
 `
+
+const Value = styled(TokenValue)<{ locked?: boolean }>`
+ color: ${({ locked }) => (locked ? Colors.Black[500] : 'default')};
+`

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

@@ -0,0 +1,53 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components'
+
+import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { member } from '@/mocks/data/members'
+import { MocksParameters } from '@/mocks/providers'
+import { AccountMock } from '@/mocks/providers/accounts'
+
+import { OptionListAccount } from './OptionListAccount'
+
+export const mockAccounts: AccountMock[] = [
+ { member: member('alice'), balances: { transferable: 0.00001, locks: ['Apps Worker'] } },
+ {
+ member: member('bob'),
+ balances: { transferable: 101_300_098.123, locks: ['Councilor', 'Voting', 'Council Candidate'] },
+ },
+ { member: member('charlie'), balances: 200 },
+ { member: member('dave'), balances: { transferable: 0, locks: ['Bound Staking Account'] } },
+ { member: member('eve'), balances: { transferable: 1000, locks: ['Staking'] } },
+ { member: member('ferdie'), balances: 500 },
+]
+
+export default {
+ title: 'Accounts/SelectAccount/OptionListAccount',
+ component: OptionListAccount,
+
+ parameters: {
+ mocks: {
+ accounts: { list: mockAccounts },
+ } satisfies MocksParameters,
+ },
+
+ excludeStories: ['mockAccounts'],
+} satisfies Meta
+
+export const Default: StoryFn = () => {
+ const { allAccounts } = useMyAccounts()
+
+ const free = allAccounts.slice(0, 3)
+
+ const optionLocks = [['insufficientFunds', 'boundMembership'], ['rivalrousLock', 'recoverableLock'], ['optOutLock']]
+ const locked = allAccounts.slice(3).map((account, i) => ({ ...account, optionLocks: optionLocks[i] }))
+
+ return <AccountsOptions options={[...free, ...locked]} />
+}
+
+const AccountsOptions = styled(OptionListAccount)`
+ position: static;
+ transform: none;
+ max-height: none;
+ max-width: 856px;
+`

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

@@ -9,7 +9,7 @@ import { OptionAccount } from './OptionAccount'
 
 interface Props {
  options: AccountOption[]
- onChange: (option: AccountOption) => void
+ onChange?: (option: AccountOption) => void
  className?: string
  isForStaking?: boolean
  variant?: 's' | 'm' | 'l'
@@ -21,13 +21,13 @@ export const OptionListAccount = React.memo(({ options, onChange, className, isF
  return (
  <OptionsListComponent className={className}>
  {freeAccounts.map((option) => (
- <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
+ <Option key={option.address} onClick={() => onChange && onChange(option)}>
  <OptionAccount option={option} isForStaking={isForStaking} variant={variant} />
  </Option>
  ))}
  {lockedAccounts.map((option) => (
  <AccountLockTooltip boundaryClassName={className} key={option.address} locks={option.optionLocks}>
- <Option key={option.address} onClick={() => onChange && onChange(option)} disabled variant={variant}>
+ <Option key={option.address} onClick={() => onChange && onChange(option)} disabled>
  <OptionAccount option={option} isForStaking={isForStaking} />
  </Option>
  </AccountLockTooltip>

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

@@ -1,60 +1,40 @@
-import { Meta, Story } from '@storybook/react'
-import React, { ReactNode, useState } from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+import styled from 'styled-components'
 
-import { AccountsContextProvider } from '@/accounts/providers/accounts/provider'
 import { Account } from '@/accounts/types'
 import { InputComponent } from '@/common/components/forms'
-import { Warning } from '@/common/components/Warning'
-import { KeyringContextProvider } from '@/common/providers/keyring/provider'
-import { MockApolloProvider } from '@/mocks/components/storybook/MockApolloProvider'
+import { MocksParameters } from '@/mocks/providers'
 
 import { SelectAccount } from '.'
+import { mockAccounts } from './OptionListAccount.stories'
 
 export default {
  title: 'Accounts/SelectAccount',
  component: SelectAccount,
-} as Meta
 
-const renderWarning = (accountSelect: ReactNode) => (
- <>
- <Warning
- isClosable={false}
- title="Warning: the Polkadot.js extension can't run in an iframe !"
- content={
- <>
- To render this component properly:{' '}
- <a href={window.location.href} target="_blank">
- Open the canvas in a new tab
- </a>
- </>
- }
- />
- <br />
- {accountSelect}
- </>
-)
+ parameters: {
+ mocks: {
+ accounts: { list: mockAccounts },
+ } satisfies MocksParameters,
+ },
+} satisfies Meta
 
-export const Default: Story = () => {
+export const Default: StoryFn = () => {
  const [selected, setSelected] = useState<Account>()
 
- const accountSelect = (
- <InputComponent
+ return (
+ <StyledInputComponent
  label="Account select"
  tooltipText="Lorem ipsum dolor sit amet consectetur, adipisicing elit."
  required
  inputSize="l"
  >
  <SelectAccount selected={selected} onChange={setSelected} />
- </InputComponent>
- )
-
- return window.self === window.top ? (
- <MockApolloProvider members>
- <KeyringContextProvider>
- <AccountsContextProvider>{accountSelect}</AccountsContextProvider>
- </KeyringContextProvider>
- </MockApolloProvider>
- ) : (
- renderWarning(accountSelect)
+ </StyledInputComponent>
  )
 }
+
+const StyledInputComponent = styled(InputComponent)`
+ max-width: 856px;
+`

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

@@ -39,7 +39,7 @@ interface BaseSelectAccountProps extends SelectAccountProps {
  isForStaking?: boolean
 }
 
-export const BaseSelectAccount = React.memo(
+const BaseSelectAccount = React.memo(
  ({ id, onChange, accounts, filter, selected, disabled, onBlur, isForStaking, variant }: BaseSelectAccountProps) => {
  const options = accounts.filter(filter || (() => true))
 
@@ -88,7 +88,7 @@ export const BaseSelectAccount = React.memo(
 const renderSelected = (isForStaking?: boolean, variant?: 's' | 'm' | 'l') => (option: AccountOption) =>
  (
  <SelectedOption variant={variant}>
- <OptionAccount option={option} isForStaking={isForStaking} />
+ <OptionAccount option={option} isForStaking={isForStaking} isSelected />
  </SelectedOption>
  )
 

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

@@ -4,14 +4,13 @@ import styled from 'styled-components'
 
 import { AccountInfo } from '@/accounts/components/AccountInfo'
 import { filterByText } from '@/accounts/components/SelectAccount/helpers'
-import { InfoValueWithLocks } from '@/accounts/components/SelectAccount/OptionAccount'
 import { useBalance } from '@/accounts/hooks/useBalance'
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { accountOrNamed } from '@/accounts/model/accountOrNamed'
 import { isValidAddress } from '@/accounts/model/isValidAddress'
 import { Account, AccountOption } from '@/accounts/types'
 import { VestingLockIcon } from '@/common/components/icons/locks/VestingLockIcon'
-import { BalanceInfoInRow } from '@/common/components/Modal'
+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'
@@ -91,9 +90,9 @@ export const VestingListItem = ({ option, vestingClaimable }: { option: AccountO
  <VestingLockIcon />
  <TextMedium bold>Vesting</TextMedium>
  </ColumnGapBlock>
- <InfoValueWithLocks>
+ <InfoValue>
  <TokenValue value={vestingClaimable} />
- </InfoValueWithLocks>
+ </InfoValue>
  </VestingInfoRow>
  </>
 )

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

@@ -85,7 +85,7 @@ export class WalletConnect extends BaseDotsamaWallet {
  polkadot: {
  methods: ['polkadot_signTransaction', 'polkadot_signMessage'],
  chains: [chainCAIP],
- events: ['chainChanged", "accountsChanged'],
+ events: ['chainChanged', 'accountsChanged'],
  },
  }
 

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

@@ -355,7 +355,7 @@ export const NoAccount: Story = {
  const modal = withinModal(canvasElement)
  expectActiveStepToBe(modal, 'Connect account')
  expect(modal.getByText('Connect account', { selector: '[class^=ModalBody] *' }))
- expect(getButtonByText(modal, 'Return to wallet selection')).toBeEnabled()
+ expect(getButtonByText(modal, 'Change wallet')).toBeEnabled()
  expect(getButtonByText(modal, 'Connect Account')).toBeDisabled()
  expect(modal.queryByText('alice')).toBeNull()
  },
@@ -376,7 +376,7 @@ export const FaucetMembership: Story = {
  expectActiveStepToBe(modal, 'Connect account')
  expect(modal.getByText('Connect account', { selector: '[class^=ModalBody] *' }))
 
- expect(getButtonByText(modal, 'Return to wallet selection')).toBeEnabled()
+ expect(getButtonByText(modal, 'Change wallet')).toBeEnabled()
 
  const connectAccountButton = getButtonByText(modal, 'Connect Account')
  expect(connectAccountButton).toBeDisabled()
@@ -426,6 +426,7 @@ export const BuyMembershipHappy: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -539,6 +540,7 @@ export const BuyMembershipNotEnoughFund: Story = {
  const modal = withinModal(canvasElement)
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await fillMembershipForm(modal)
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -559,6 +561,7 @@ export const BuyMembershipTxFailure: Story = {
  const modal = withinModal(canvasElement)
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await fillMembershipForm(modal)
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -598,6 +601,7 @@ export const BuyMembershipHappyBindOneValidatorHappy: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -679,6 +683,7 @@ export const BuyMembershipHappyAddTwoValidatorHappy: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -773,6 +778,8 @@ export const InvalidValidatorAccountInput: Story = {
  const modal = withinModal(canvasElement)
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
+
  await fillMembershipForm(modal)
  const validatorCheckButton = modal.getAllByText('Yes')[1]
  await userEvent.click(validatorCheckButton)
@@ -798,6 +805,7 @@ export const BuyMembershipWithValidatorAccountNotEnoughFunds: Story = {
  const modal = withinModal(canvasElement)
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await fillMembershipFormValidatorAccounts(modal, ['charlie'])
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -818,6 +826,7 @@ export const BuyMembershipWithValidatorAccountFailure: Story = {
  const modal = withinModal(canvasElement)
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await fillMembershipFormValidatorAccounts(modal, ['charlie'])
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -842,6 +851,7 @@ export const BuyMembershipHappyAddOneValidatorFailure: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -888,6 +898,7 @@ export const BuyMembershipAddValidatorAccHappyConfirmTxFailure: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')
@@ -944,6 +955,7 @@ export const BuyMembershipAddTwoValidatorAccHappyConfirmTxFailure: Story = {
  expect(screen.queryByText('Become a member')).toBeNull()
 
  await userEvent.click(getButtonByText(screen, 'Join Now'))
+ await userEvent.click(await modal.findByText('New Member'))
 
  await step('Form', async () => {
  const createButton = getButtonByText(modal, 'Create a Membership')