Implement infinite scrolls (no lazy loading) for wallet view

ui/app/components/wallet-view.js

@@ -41,14 +41,24 @@ const noop = () => {}
 WalletView.prototype.render = function () {
   const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
 
+  // temporary logs + fake extra wallets
   console.log(selectedAccount)
 
+  const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
+      h('div.wallet-balance', {}, [
+        h(BalanceComponent, {
+          balanceValue: selectedAccount.balance,
+          style: {},
+        }),
+      ]),
+  ])
+
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},
   }, [
 
     // TODO: Separate component: wallet account details
-    h('div.flex-column', {
+    h('div.flex-column.wallet-view-account-details', {
       style: {}
     }, [
 
@@ -123,9 +133,7 @@ WalletView.prototype.render = function () {
     ]),
 
     //Wallet Balances
-    h('div.flex-column.wallet-balance-wrapper-active', {}, [
-
-      h('div', {}, [
+    h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [
 
         h('div.wallet-balance', {}, [
 
@@ -136,13 +144,9 @@ WalletView.prototype.render = function () {
 
         ]),
 
-      ])
-
     ]),
 
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
+    h('div.flex-column.wallet-balance-wrapper', {}, [
 
         h('div.wallet-balance', {}, [
 
@@ -153,145 +157,17 @@ WalletView.prototype.render = function () {
 
         ]),
 
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
-    ]),
-
-    h('div.flex-column', {}, [
-
-      h('div', {}, [
-
-        h('div.wallet-balance', {}, [
-
-          h(BalanceComponent, {
-            balanceValue: selectedAccount.balance,
-            style: {},
-          }),
-
-        ]),
-
-      ])
-
     ]),
 
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
+    extraWallet,
   ])
 }

ui/app/css/itcss/components/newui-sections.scss

@@ -24,19 +24,25 @@ $wallet-view-bg: $wild-sand;
   background: $tx-view-bg;
 }
 
-// wallet view
+// wallet view and sidebar
 
 .wallet-view {
+  display: flex;
+  flex-direction: column;
   flex: 33.5 0 33.5%;
   background: $wallet-view-bg;
 
   @media screen and (min-width: 576px) {
     overflow-y: scroll;
   }
+
+  .wallet-view-account-details {
+    flex: 0 0 150px;
+  }
 }
 
 .wallet-view-title-wrapper {
-  height: 25px;
+  flex: 0 0 25px;
 }
 
 .wallet-view-title {
@@ -49,12 +55,6 @@ $wallet-view-bg: $wild-sand;
   }
 }
 
-.account-options-menu {
-  align-items: center;
-  justify-content: flex-start;
-  margin: 5% 7%;
-}
-
 .wallet-view.sidebar {
   flex: 1 0 230px;
   background: rgb(250, 250, 250);
@@ -85,6 +85,8 @@ $wallet-view-bg: $wild-sand;
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+// main-container media queries
+
 @media screen and (min-width: 576px) {
   .lap-visible {
     display: flex;
@@ -154,3 +156,10 @@ $wallet-view-bg: $wild-sand;
     text-align: center;
   }
 }
+
+// account options dropdown
+.account-options-menu {
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5% 7%;
+}

ui/app/css/itcss/components/wallet-balance.scss

@@ -3,6 +3,10 @@ $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range:
   "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
 
+.wallet-balance-wrapper {
+  flex: 0 0 80px
+}
+
 .wallet-balance {
   background: inherit;
   display: flex;