From 334bed7621196ef7deb315ad1f5e9516d59dbf96 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 20 Jun 2020 10:07:05 +0200
Subject: [PATCH] Display balance in sidebar (#2998)

* Display balance in sidebar

* Align expander formatting
---
 .../page-accounts/src/Sidebar/Balances.tsx    | 57 +++++++++++++++++++
 .../page-accounts/src/Sidebar/Sidebar.tsx     |  4 +-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/page-accounts/src/Sidebar/Balances.tsx

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<Props> | null {
+  const { t } = useTranslation();
+
+  return (
+    <section className={className}>
+      <div className='ui--AddressMenu-sectionHeader'>
+        <div>
+          <Icon name='sort amount down' />
+          &nbsp;
+          {t<string>('balance')}
+        </div>
+      </div>
+      <AddressInfo
+        address={address}
+        className='balanceExpander'
+        withBalance={WITH_BALANCE}
+        withBalanceToggle
+        withExtended={false}
+      />
+    </section>
+  );
+}
+
+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}
       />
+      <Balances address={address} />
       <Multisig
         isMultisig={flags.isMultisig}
         meta={meta}
@@ -255,7 +257,7 @@ export default React.memo(styled(Sidebar)`
 
   .ui--AddressMenu-identity {
     .ui--AddressMenu-identityTable {
-      font-size: 13px;
+      font-size: 0.93rem;
       margin-top: 0.3rem;
 
       .tr {