Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1630 from oasisprotocol/lw/to-support-settings
Redesign towards settings page
- Loading branch information
Showing
18 changed files
with
463 additions
and
413 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { AmountFormatter } from 'app/components/AmountFormatter' | ||
| import { PrettyAddress } from 'app/components/PrettyAddress' | ||
| import { ShortAddress } from 'app/components/ShortAddress' | ||
| import { Box } from 'grommet/es6/components/Box' | ||
| import { CheckBox } from 'grommet/es6/components/CheckBox' | ||
| import { Spinner } from 'grommet/es6/components/Spinner' | ||
| import { Text } from 'grommet/es6/components/Text' | ||
| import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext' | ||
| import { memo, useContext } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { BalanceDetails } from '../../../../state/account/types' | ||
| import { Button } from 'grommet/es6/components/Button' | ||
| import { DerivationFormatter, DerivationFormatterProps } from './DerivationFormatter' | ||
|
|
||
| interface AccountProps { | ||
| address: string | ||
| balance: BalanceDetails | undefined | ||
| onClick: (address: string) => void | ||
| path?: number[] | ||
| isActive: boolean | ||
| displayCheckbox?: boolean | ||
| displayAccountNumber?: boolean | ||
| displayDerivation?: DerivationFormatterProps | ||
| displayManageButton?: { | ||
| onClickManage: (address: string) => void | ||
| } | ||
| } | ||
|
|
||
| export const Account = memo((props: AccountProps) => { | ||
| const { t } = useTranslation() | ||
| const size = useContext(ResponsiveContext) | ||
|
|
||
| const address = | ||
| size === 'small' ? <ShortAddress address={props.address} /> : <PrettyAddress address={props.address} /> | ||
|
|
||
| const accountNumber = props.path ? props.path.at(-1) : '?' | ||
|
|
||
| return ( | ||
| <Box | ||
| data-testid="account-choice" | ||
| round="5px" | ||
| background={props.isActive ? 'neutral-2' : undefined} | ||
| border={{ color: props.isActive ? 'neutral-2' : 'brand' }} | ||
| pad="small" | ||
| flex="grow" | ||
| fill="horizontal" | ||
| role="checkbox" | ||
| aria-checked={props.isActive} | ||
| onClick={() => { | ||
| props.onClick(props.address) | ||
| }} | ||
| hoverIndicator={{ background: 'brand' }} | ||
| direction="row" | ||
| > | ||
| {props.displayCheckbox && ( | ||
| <Box alignSelf="center" pad={{ left: 'small', right: 'medium' }}> | ||
| <CheckBox checked={props.isActive} hidden /> | ||
| </Box> | ||
| )} | ||
| {props.displayAccountNumber && ( | ||
| <Box alignSelf="center" pad={{ left: 'small', right: 'small' }} style={{ minWidth: '2.5em' }}> | ||
| <Text weight="bold" style={{ width: '2em' }}> | ||
| {accountNumber} | ||
| </Text> | ||
| </Box> | ||
| )} | ||
| <Box flex="grow" gap={size === 'small' ? undefined : 'xsmall'}> | ||
| <Box> | ||
| <Text weight="bold">{address}</Text> | ||
| </Box> | ||
| <Box direction="row-responsive"> | ||
| <Box flex="grow"> | ||
| {props.displayDerivation && <DerivationFormatter {...props.displayDerivation} />} | ||
| {props.displayManageButton && ( | ||
| <Box direction="row"> | ||
| <Button | ||
| label={t('toolbar.settings.manageAccount', 'Manage')} | ||
| onClick={e => { | ||
| props.displayManageButton?.onClickManage(props.address) | ||
| e.stopPropagation() | ||
| }} | ||
| /> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| <Box height={'24px'}> | ||
| {props.balance ? <AmountFormatter amount={props.balance.total} /> : <Spinner />} | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| }) |
23 changes: 23 additions & 0 deletions
23
src/app/components/Toolbar/Features/Account/DerivationFormatter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { WalletType } from 'app/state/wallet/types' | ||
| import { Box } from 'grommet/es6/components/Box' | ||
| import { Text } from 'grommet/es6/components/Text' | ||
| import { useTranslation } from 'react-i18next' | ||
|
|
||
| export interface DerivationFormatterProps { | ||
| type: WalletType | ||
| pathDisplay: string | undefined | ||
| } | ||
|
|
||
| export const DerivationFormatter = (props: DerivationFormatterProps) => { | ||
| const { t } = useTranslation() | ||
| const walletTypes: { [type in WalletType]: string } = { | ||
| [WalletType.Ledger]: t('toolbar.wallets.type.ledger', 'Ledger'), | ||
| [WalletType.Mnemonic]: t('toolbar.wallets.type.mnemonic', 'Mnemonic'), | ||
| [WalletType.PrivateKey]: t('toolbar.wallets.type.privateKey', 'Private key'), | ||
| } | ||
| return ( | ||
| <Box align="start" direction="row"> | ||
| {walletTypes[props.type]} {props.pathDisplay && <Text size="80%">({props.pathDisplay})</Text>} | ||
| </Box> | ||
| ) | ||
| } |
26 changes: 26 additions & 0 deletions
26
src/app/components/Toolbar/Features/Account/ImportableAccount.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Account } from './Account' | ||
| import { ImportAccountsListAccount } from '../../../../state/importaccounts/types' | ||
|
|
||
| export const ImportableAccount = ({ | ||
| account, | ||
| onClick, | ||
| }: { | ||
| account: ImportAccountsListAccount | ||
| onClick: (address: string) => void | ||
| }) => { | ||
| return ( | ||
| <Account | ||
| address={account.address} | ||
| balance={account.balance} | ||
| onClick={onClick} | ||
| isActive={account.selected} | ||
| displayCheckbox={true} | ||
| displayAccountNumber={true} | ||
| displayDerivation={{ | ||
| type: account.type, | ||
| pathDisplay: account.pathDisplay, | ||
| }} | ||
| path={account.path} | ||
| /> | ||
| ) | ||
| } |
83 changes: 83 additions & 0 deletions
83
src/app/components/Toolbar/Features/Account/ManageableAccount.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { Box } from 'grommet/es6/components/Box' | ||
| import { Button } from 'grommet/es6/components/Button' | ||
| import { Tab } from 'grommet/es6/components/Tab' | ||
| import { Text } from 'grommet/es6/components/Text' | ||
| import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext' | ||
| import { useContext, useState } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { Account } from './Account' | ||
| import { Wallet } from '../../../../state/wallet/types' | ||
| import { ResponsiveLayer } from '../../../ResponsiveLayer' | ||
| import { Tabs } from 'grommet/es6/components/Tabs' | ||
| import { DerivationFormatter } from './DerivationFormatter' | ||
| import { uintToBase64, hex2uint } from '../../../../lib/helpers' | ||
| import { AddressBox } from '../../../AddressBox' | ||
|
|
||
| export const ManageableAccount = ({ | ||
| wallet, | ||
| isActive, | ||
| onClick, | ||
| }: { | ||
| wallet: Wallet | ||
| isActive: boolean | ||
| onClick: (address: string) => void | ||
| }) => { | ||
| const { t } = useTranslation() | ||
| const [layerVisibility, setLayerVisibility] = useState(false) | ||
| const isMobile = useContext(ResponsiveContext) === 'small' | ||
| return ( | ||
| <> | ||
| <Account | ||
| address={wallet.address} | ||
| balance={wallet.balance} | ||
| onClick={onClick} | ||
| isActive={isActive} | ||
| path={wallet.path} | ||
| displayManageButton={{ | ||
| onClickManage: () => setLayerVisibility(true), | ||
| }} | ||
| /> | ||
| {layerVisibility && ( | ||
| <ResponsiveLayer | ||
| onClickOutside={() => setLayerVisibility(false)} | ||
| onEsc={() => setLayerVisibility(false)} | ||
| animation="none" | ||
| background="background-front" | ||
| modal | ||
| position="top" | ||
| margin={isMobile ? 'none' : 'xlarge'} | ||
| > | ||
| <Box margin="medium" width={isMobile ? 'auto' : '700px'}> | ||
| <Tabs alignControls="start"> | ||
| <Tab title={t('toolbar.settings.myAccountsTab', 'My Accounts')}> | ||
| <Box margin={{ vertical: 'medium' }}> | ||
| <AddressBox address={wallet.address} border /> | ||
| <Text size="small" margin={'small'}> | ||
| <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} /> | ||
| </Text> | ||
| </Box> | ||
| <Button | ||
| label={t('toolbar.settings.exportPrivateKey', 'Export Private Key')} | ||
| disabled={!wallet.privateKey} | ||
| onClick={() => { | ||
| prompt( | ||
| t('toolbar.settings.exportPrivateKey', 'Export Private Key'), | ||
| uintToBase64(hex2uint(wallet.privateKey!)), | ||
| ) | ||
| }} | ||
| /> | ||
| <Box direction="row" justify="between" pad={{ top: 'large' }}> | ||
| <Button | ||
| secondary | ||
| label={t('toolbar.settings.cancel', 'Cancel')} | ||
| onClick={() => setLayerVisibility(false)} | ||
| /> | ||
| </Box> | ||
| </Tab> | ||
| </Tabs> | ||
| </Box> | ||
| </ResponsiveLayer> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.