📱 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')