Fetch Tokens for Balance component #72

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

@@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react'
+import { List } from 'immutable'
 import classNames from 'classnames/bind'
+import { type Token } from '~/routes/tokens/store/model/token'
 import CallMade from '@material-ui/icons/CallMade'
 import CallReceived from '@material-ui/icons/CallReceived'
 import Button from '@material-ui/core/Button'
@@ -79,6 +81,7 @@ const styles = theme => ({
 type Props = {
   classes: Object,
   granted: boolean,
+  tokens: List<Token>,
 }
 
 type Action = 'Token' | 'Send' | 'Receive'
@@ -109,7 +112,7 @@ class Balances extends React.Component<Props, State> {
     const {
       hideZero, showToken, showReceive, showSend,
     } = this.state
-    const { classes, granted } = this.props
+    const { classes, granted, tokens } = this.props
 
     const columns = generateColumns()
     const autoColumns = columns.filter(c => !c.custom)
@@ -142,7 +145,7 @@ class Balances extends React.Component<Props, State> {
               handleClose={this.onHide('Token')}
               open={showToken}
             >
-              <Tokens onClose={this.onHide('Token')} />
+              <Tokens tokens={tokens} onClose={this.onHide('Token')} />
             </Modal>
           </Col>
         </Row>

src/routes/safe/component/Layout.jsx

@@ -76,7 +76,7 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes, granted,
+      safe, provider, network, classes, granted, tokens, activeTokens,
     } = this.props
     const { value } = this.state
 
@@ -122,7 +122,7 @@ class Layout extends React.Component<Props, State> {
           </Tabs>
         </Row>
         <Hairline color="#c8ced4" />
-        {value === 0 && <Balances granted={granted} />}
+        {value === 0 && <Balances tokens={tokens} activeTokens={activeTokens} granted={granted} />}
       </React.Fragment>
     )
   }

src/routes/safe/container/index.jsx

@@ -15,6 +15,7 @@ const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 15000
 class SafeView extends React.PureComponent<Props> {
   componentDidMount() {
     this.props.fetchSafe(this.props.safeUrl)
+    this.props.fetchTokens(this.props.safeUrl)
     this.intervalId = setInterval(() => {
       const { safeUrl, fetchTokens, fetchSafe } = this.props
       fetchTokens(safeUrl)
@@ -41,13 +42,14 @@ class SafeView extends React.PureComponent<Props> {
 
   render() {
     const {
-      safe, provider, activeTokens, granted, userAddress, network,
+      safe, provider, activeTokens, granted, userAddress, network, tokens,
     } = this.props
 
     return (
       <Page>
         <Layout
           activeTokens={activeTokens}
+          tokens={tokens}
           provider={provider}
           safe={safe}
           userAddress={userAddress}

src/routes/safe/container/selector.js

@@ -7,13 +7,14 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 import { type Owner } from '~/routes/safe/store/model/owner'
 import { type GlobalState } from '~/store'
 import { sameAddress } from '~/logic/wallets/ethAddresses'
-import { activeTokensSelector } from '~/routes/tokens/store/selectors'
+import { activeTokensSelector, tokenListSelector } from '~/routes/tokens/store/selectors'
 import { type Token } from '~/routes/tokens/store/model/token'
 import { safeParamAddressSelector } from '../store/selectors'
 
 export type SelectorProps = {
   safe: SafeSelectorProps,
   provider: string,
+  tokens: List<Token>,
   activeTokens: List<Token>,
   userAddress: string,
   network: string,
@@ -44,6 +45,7 @@ export const grantedSelector: Selector<GlobalState, RouterProps, boolean> = crea
 export default createStructuredSelector({
   safe: safeSelector,
   provider: providerNameSelector,
+  tokens: tokenListSelector,
   activeTokens: activeTokensSelector,
   granted: grantedSelector,
   userAddress: userAccountSelector,