WIP - Accounts tab design

app/frontend/components/pages/accounts/accounts.tsx

@@ -1,30 +1,113 @@
-import {h} from 'preact'
+import {Fragment, h} from 'preact'
 import {connect} from '../../../helpers/connect'
 import actions from '../../../actions'
 import range from '../../../../frontend/wallet/helpers/range'
+import printAda from '../../../helpers/printAda'
+import {Lovelace} from '../../../state'
+import {AdaIcon} from '../../common/svg'
+import {UNKNOWN_POOL_NAME} from '../../../../frontend/wallet/constants'
 
-const Accounts = ({setAccount}) => (
-  <div className="card" style={'width: 100%;'}>
-    <h2 className="card-title small-margin" />
-    <div className="account-dropdown">
-      {range(0, 5).map((i) => (
-        <a
-          key={i}
+const Account = ({i, account, setAccount, selectedAccount, toggleDisplayStakingPage}) => {
+  return (
+    <div key={i} className="card account" style={'width: 75%;'}>
+      <div className="card-column" style="align-self: center;">
+        <button
+          className="button primary"
+          disabled={false} //{selectedAccount === i}
           onClick={() => {
             setAccount(i)
+            toggleDisplayStakingPage('Sending')
+            window.scrollTo({top: 0, behavior: 'smooth'})
           }}
         >
           Account {i}
-        </a>
-      ))}
+        </button>
+      </div>
+      <div className="card-column">
+        <h2 className="card-title small-margin">Available balance</h2>
+        <div className="balance-amount small">
+          {printAda(
+            account
+              ? account.shelleyBalances.stakingBalance + account.shelleyBalances.nonStakingBalance
+              : 0
+          )}
+          <AdaIcon />
+        </div>
+      </div>
+      <div className="card-column">
+        <h2 className="card-title small-margin">Rewards balance</h2>
+        <div className="balance-amount small">
+          {printAda(account ? account.shelleyBalances.rewardsAccountBalance : 0)}
+          <AdaIcon />
+        </div>
+      </div>
+      <div className="card-column">
+        <h2 className="card-title small-margin">Delegation</h2>
+        <div>
+          {account
+            ? account.shelleyAccountInfo.delegation.name || UNKNOWN_POOL_NAME
+            : 'Not delegated'}
+        </div>
+      </div>
     </div>
-  </div>
-)
+  )
+}
+
+const Accounts = ({accounts, setAccount, selectedAccount, toggleDisplayStakingPage}) => {
+  const accountInfos = Object.values(accounts)
+  const totalBalance = accountInfos.reduce(
+    (a, {shelleyBalances}) =>
+      shelleyBalances.stakingBalance + shelleyBalances.nonStakingBalance + a,
+    0
+  )
+  const totalRewardBalance = accountInfos.reduce(
+    (a, {shelleyBalances}) => shelleyBalances.rewardsAccountBalance + a,
+    0
+  )
+  return (
+    <Fragment>
+      <div className="dashboard-column account">
+        <div className="card account" style={'width: 100%;'}>
+          <div>
+            <h2 className="card-title small-margin">Total balance</h2>
+            <div className="balance-amount">
+              {printAda(totalBalance as Lovelace)}
+              <AdaIcon />
+            </div>
+          </div>
+          <div>
+            <h2 className="card-title small-margin">Total rewards balance</h2>
+            <div className="balance-amount">
+              {printAda(totalRewardBalance as Lovelace)}
+              <AdaIcon />
+            </div>
+          </div>
+        </div>
+        <div className="dashboard-column account wide">
+          <div>
+            {range(0, Object.keys(accounts).length + 1).map((i) => (
+              <Account
+                key={i}
+                i={i}
+                account={accounts[i]}
+                setAccount={setAccount}
+                selectedAccount={selectedAccount}
+                toggleDisplayStakingPage={toggleDisplayStakingPage}
+              />
+            ))}
+          </div>
+          <div className="dashboard-column account narrow"> </div>
+        </div>
+      </div>
+    </Fragment>
+  )
+}
 
 export default connect(
   (state) => ({
     isDemoWallet: state.isDemoWallet,
-    router: state.router,
+    accounts: state.accounts,
+    selectedAccount: state.selectedAccount,
   }),
   actions
 )(Accounts)

app/frontend/components/pages/dashboard/dashboardPage.tsx

@@ -70,11 +70,7 @@ const AdvancedPage = () => {
 }
 
 const AccountsPage = () => {
-  return (
-    <Fragment>
-      <Accounts />
-    </Fragment>
-  )
+  return <Accounts />
 }
 
 class DashboardPage extends Component<Props> {
@@ -132,7 +128,7 @@ class DashboardPage extends Component<Props> {
               <MainTab
                 key={i}
                 name={name}
-                selectedTab={selectedMainTab}
+                selectedTab={displayStakingPage}
                 selectTab={this.selectMainTab}
               />
             ))}

app/public/css/styles.css

@@ -1262,6 +1262,14 @@ button[data-balloon] {
   display: none;
 }
 
+.dashboard-column.wide {
+  flex: 1 1 75%;
+}
+
+.dashboard-column.narrow {
+  flex: 1 1 25%;
+}
+
 .dashboard-column {
   flex: 1 1 50%;
 }
@@ -1274,6 +1282,11 @@ button[data-balloon] {
   padding-left: 28px;
 }
 
+.dashboard-column.account {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .dashboard-column .card:not(:last-child) {
   margin-bottom: 56px;
 }
@@ -1407,6 +1420,12 @@ li.main-tab input + label.selected:after {
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
 }
 
+.card-column {
+  padding-left: 8px;
+  flex-grow: 1;
+  flex-basis: 25%;
+}
+
 .card-title {
   margin-bottom: 24px;
   font-size: 16px;
@@ -1426,6 +1445,10 @@ li.main-tab input + label.selected:after {
   margin-bottom: 12px;
 }
 
+.card.account {
+  display: flex;
+}
+
 /* AUTHENTICATION */
 
 .authentication {
@@ -2175,11 +2198,21 @@ li.main-tab input + label.selected:after {
   position: relative;
 }
 
+.balance-amount.small {
+  font-size: 24px;
+}
+
 .balance-amount svg {
   margin-left: 12px;
   width: 18px;
+}
+
+.balance-amount.small svg {
+  margin-left: 12px;
+  width: 14px;
 } 
 
+
 .balance-amount svg path {
   fill: var(--color-brand);
 }