Merge pull request #18 from gnosis/feature/WA-230-show-balance-in-ui

WA-230 - Show balance in UI

src/components/layout/Paragraph/index.scss

@@ -4,15 +4,15 @@
 }
 
 .soft {
-    color: #888888;
+  color: #888888;
 }
 
 .medium {
-    color: #686868;
+  color: #686868;
 }
 
 .dark {
-    color: black;
+  color: black;
 }
 
 .primary {

src/routes/safe/component/Layout.jsx

@@ -6,10 +6,10 @@ import GnoSafe from './Safe'
 
 type Props = SelectorProps
 
-const Layout = ({ safe, provider }: Props) => (
+const Layout = ({ safe, balance, provider }: Props) => (
   <React.Fragment>
     { safe
-      ? <GnoSafe safe={safe} />
+      ? <GnoSafe safe={safe} balance={balance} />
       : <NoSafe provider={provider} text="Not found safe" />
     }
   </React.Fragment>

src/routes/safe/component/Layout.stories.js

@@ -14,12 +14,31 @@ const FrameDecorator = story => (
 
 storiesOf('Routes /safe:address', module)
   .addDecorator(FrameDecorator)
-  .add('Safe undefined being connected', () => <Component safe={undefined} provider="METAMASK" />)
+  .add('Safe undefined being connected', () => (
-  .add('Safe undefined NOT connected', () => <Component safe={undefined} provider="" />)
+    <Component
+      safe={undefined}
+      provider="METAMASK"
+      balance="0"
+      fetchBalance={() => {}}
+    />
+  ))
+  .add('Safe undefined NOT connected', () => (
+    <Component
+      safe={undefined}
+      provider=""
+      balance="0"
+      fetchBalance={() => {}}
+    />
+  ))
   .add('Safe with 2 owners', () => {
     const safe = SafeFactory.twoOwnersSafe
 
     return (
-      <Component safe={safe} provider="METAMASK" />
+      <Component
+        safe={safe}
+        provider="METAMASK"
+        balance="2"
+        fetchBalance={() => {}}
+      />
     )
   })

src/routes/safe/component/Safe.jsx

@@ -10,9 +10,10 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 
 type SafeProps = {
   safe: Safe,
+  balance: string,
 }
 
-const GnoSafe = ({ safe }: SafeProps) => (
+const GnoSafe = ({ safe, balance }: SafeProps) => (
   <React.Fragment>
     <Row>
       <Col xs={12}>
@@ -21,6 +22,18 @@ const GnoSafe = ({ safe }: SafeProps) => (
         </Paragraph>
       </Col>
     </Row>
+    <Row>
+      <Paragraph size="lg">
+        <Bold>Balance</Bold>
+      </Paragraph>
+    </Row>
+    <Row>
+      <Block>
+        <Paragraph>
+          {balance} - ETH
+        </Paragraph>
+      </Block>
+    </Row>
     <Row>
       <Paragraph size="lg">
         <Bold>Address</Bold>

src/routes/safe/container/actions.js

@@ -0,0 +1,10 @@
+// @flow
+import fetchBalance from '~/routes/safe/store/actions/fetchBalance'
+
+export type Actions = {
+  fetchBalance: typeof fetchBalance,
+}
+
+export default {
+  fetchBalance,
+}

src/routes/safe/container/index.jsx

@@ -4,19 +4,30 @@ import { connect } from 'react-redux'
 import Page from '~/components/layout/Page'
 import Layout from '~/routes/safe/component/Layout'
 import selector, { type SelectorProps } from './selector'
+import actions, { type Actions } from './actions'
 
-type Props = SelectorProps
+class SafeView extends React.PureComponent<Actions & SelectorProps> {
+  componentDidMount() {
+    const { safe, fetchBalance } = this.props
+    if (!safe) { return }
+
+    const safeAddress: string = safe.get('address')
+    fetchBalance(safeAddress)
+  }
 
-class SafeView extends React.PureComponent<Props> {
   render() {
-    const { safe, provider } = this.props
+    const { safe, provider, balance } = this.props
 
     return (
       <Page>
-        <Layout provider={provider} safe={safe} />
+        <Layout
+          balance={balance}
+          provider={provider}
+          safe={safe}
+        />
       </Page>
     )
   }
 }
 
-export default connect(selector)(SafeView)
+export default connect(selector, actions)(SafeView)

src/routes/safe/container/selector.js

@@ -1,14 +1,16 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
-import { safeSelector, type SafeSelectorProps } from '~/routes/safe/store/selectors'
+import { balanceSelector, safeSelector, type SafeSelectorProps } from '~/routes/safe/store/selectors'
 import { providerNameSelector } from '~/wallets/store/selectors/index'
 
 export type SelectorProps = {
   safe: SafeSelectorProps,
   provider: string,
+  balance: string,
 }
 
 export default createStructuredSelector({
   safe: safeSelector,
   provider: providerNameSelector,
+  balance: balanceSelector,
 })

src/routes/safe/store/test/balance.reducer.js

@@ -6,10 +6,10 @@ import { getWeb3 } from '~/wallets/getWeb3'
 import { promisify } from '~/utils/promisify'
 import { aDeployedSafe } from './builder/deployedSafe.builder'
 
-const addOneEtherTo = async (address: string) => {
+const addEtherTo = async (address: string, eth: string) => {
   const web3 = getWeb3()
   const accounts = await promisify(cb => web3.eth.getAccounts(cb))
-  const txData = { from: accounts[0], to: address, value: web3.toWei('1', 'ether') }
+  const txData = { from: accounts[0], to: address, value: web3.toWei(eth, 'ether') }
   return promisify(cb => web3.eth.sendTransaction(txData, cb))
 }
 
@@ -34,19 +34,19 @@ const balanceReducerTests = () => {
       expect(balances.get(address)).toBe('0')
     })
 
-    it('reducer should return 1 ETH as funds to safe with 1 ETH', async () => {
+    it('reducer should return 1.3456 ETH as funds to safe with 1 ETH', async () => {
       // GIVEN
       const safeTx = await aDeployedSafe(store)
       const address = safeTx.contractAddress
 
       // WHEN
-      await addOneEtherTo(address)
+      await addEtherTo(address, '1.3456')
       await store.dispatch(fetchBalance(address))
 
       // THEN
       const balances = store.getState()[BALANCE_REDUCER_ID]
       expect(balances).not.toBe(undefined)
-      expect(balances.get(address)).toBe('1')
+      expect(balances.get(address)).toBe('1.3456')
     })
   })
 }

src/routes/safe/store/test/balance.selector.js

@@ -49,11 +49,11 @@ const balanceSelectorTests = () => {
       const store = aNewStore()
 
       // WHEN
-      await store.dispatch(addBalance(safeAddress, '1'))
+      await store.dispatch(addBalance(safeAddress, '1.3456'))
       const balance = balanceSelector(store.getState(), { match })
 
       // THEN
-      expect(balance).toBe('1')
+      expect(balance).toBe('1.3456')
     })
   })
 }