diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx new file mode 100644 index 0000000000..146f059e68 --- /dev/null +++ b/packages/page-accounts/src/Sidebar/Balances.tsx @@ -0,0 +1,57 @@ +// Copyright 2017-2020 @polkadot/app-accounts authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React from 'react'; +import styled from 'styled-components'; +import { AddressInfo, Icon } from '@polkadot/react-components'; + +import { useTranslation } from '../translate'; + +interface Props { + address: string; + className?: string; +} + +const WITH_BALANCE = { available: true, bonded: true, free: true, locked: true, reserved: true, total: true }; + +function Balances ({ address, className }: Props): React.ReactElement | null { + const { t } = useTranslation(); + + return ( +
+
+
+ +   + {t('balance')} +
+
+ +
+ ); +} + +export default React.memo(styled(Balances)` + .balanceExpander { + .column.column--expander { + width: auto; + + label { + color: inherit; + font-size: 0.93rem; + font-weight: bold; + } + + .ui--Expander-content .ui--FormatBalance-value { + font-size: 0.93rem; + } + } + } +`); diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index 25ec6a930e..ac93665910 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -12,6 +12,7 @@ import { AccountName, Button, Icon, IdentityIcon, Input, LinkExternal, Tags } fr import Transfer from '../Accounts/modals/Transfer'; import { useTranslation } from '../translate'; +import Balances from './Balances'; import Flags from './Flags'; import Identity from './Identity'; import Multisig from './Multisig'; @@ -167,6 +168,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re address={address} identity={identity} /> +