Refactor Balance component. Moving columns generator to helper class

src/routes/safe/component/Balances/Tokens.jsx

@@ -0,0 +1,10 @@
+// @flow
+import * as React from 'react'
+
+const Tokens = () => (
+  <React.Fragment>
+    Manage Tokens
+  </React.Fragment>
+)
+
+export default Tokens

src/routes/safe/component/Balances/dataFetcher.js

@@ -1,5 +1,7 @@
 // @flow
+import { List } from 'immutable'
 import { buildOrderFieldFrom } from '~/components/Table/sorting'
+import { type Column } from '~/components/Table/TableHead'
 
 export const BALANCE_TABLE_ASSET_ID = 'asset'
 export const BALANCE_TABLE_BALANCE_ID = 'balance'
@@ -42,5 +44,45 @@ export const getBalanceData = (): Array<BalanceRow> => [
   },
 ]
 
+export const generateColumns = () => {
+  const assetRow: Column = {
+    id: BALANCE_TABLE_ASSET_ID,
+    order: false,
+    numeric: false,
+    disablePadding: false,
+    label: 'Asset',
+    custom: false,
+  }
+
+  const balanceRow: Column = {
+    id: BALANCE_TABLE_BALANCE_ID,
+    order: true,
+    numeric: true,
+    disablePadding: false,
+    label: 'Balance',
+    custom: false,
+  }
+
+  const valueRow: Column = {
+    id: BALANCE_TABLE_VALUE_ID,
+    order: true,
+    numeric: true,
+    disablePadding: false,
+    label: 'Value',
+    custom: false,
+  }
+
+  const actions: Column = {
+    id: 'actions',
+    order: false,
+    numeric: false,
+    disablePadding: false,
+    label: '',
+    custom: true,
+  }
+
+  return List([assetRow, balanceRow, valueRow, actions])
+}
+
 export const filterByZero = (data: Array<BalanceRow>, hideZero: boolean): Array<BalanceRow> =>
   data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true))

src/routes/safe/component/Balances/index.jsx

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react'
-import { List } from 'immutable'
 import classNames from 'classnames/bind'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
@@ -16,47 +15,8 @@ import Modal from '~/components/Modal'
 import { type Column } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import { sm, xs } from '~/theme/variables'
-import { getBalanceData, BALANCE_TABLE_ASSET_ID, BALANCE_TABLE_BALANCE_ID, BALANCE_TABLE_VALUE_ID, type BalanceRow, filterByZero } from './dataFetcher'
-
-const generateColumns = () => {
-  const assetRow: Column = {
-    id: BALANCE_TABLE_ASSET_ID,
-    order: false,
-    numeric: false,
-    disablePadding: false,
-    label: 'Asset',
-    custom: false,
-  }
-
-  const balanceRow: Column = {
-    id: BALANCE_TABLE_BALANCE_ID,
-    order: true,
-    numeric: true,
-    disablePadding: false,
-    label: 'Balance',
-    custom: false,
-  }
-
-  const valueRow: Column = {
-    id: BALANCE_TABLE_VALUE_ID,
-    order: true,
-    numeric: true,
-    disablePadding: false,
-    label: 'Value',
-    custom: false,
-  }
-
-  const actions: Column = {
-    id: 'actions',
-    order: false,
-    numeric: false,
-    disablePadding: false,
-    label: '',
-    custom: true,
-  }
-
-  return List([assetRow, balanceRow, valueRow, actions])
-}
+import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero } from './dataFetcher'
+import Tokens from './Tokens'
 
 type State = {
   hideZero: boolean,
@@ -171,7 +131,7 @@ class Balances extends React.Component<Props, State> {
               handleClose={this.onHideToken}
               open={showToken}
             >
-              List of tokens will show here
+              <Tokens />
             </Modal>
           </Col>
         </Row>

src/theme/mui.js

@@ -175,6 +175,12 @@ export default createMuiTheme({
         fontWeight: 'normal',
       },
     },
+    MuiBackdrop: {
+      root: {
+        backdropFilter: 'blur(1px)',
+        backgroundColor: 'rgba(228, 232, 241, 0.75)',
+      },
+    },
   },
   palette,
 })