show eth balance in balance tab

package.json

@@ -163,7 +163,7 @@
     "truffle-solidity-loader": "0.1.12",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "webpack": "^4.1.1",
-    "webpack-bundle-analyzer": "3.3.0",
+    "webpack-bundle-analyzer": "3.3.2",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "3.3.1",
     "webpack-manifest-plugin": "^2.0.0-rc.2"

src/logic/tokens/utils/tokenHelpers.js

@@ -1,26 +1,23 @@
 // @flow
 import { List } from 'immutable'
 import logo from '~/assets/icons/icon_etherTokens.svg'
-import { getBalanceInEtherOf } from '~/logic/wallets/getWeb3'
 import { makeToken, type Token } from '~/logic/tokens/store/model/token'
 
 export const ETH_ADDRESS = '0x000'
 export const isEther = (symbol: string) => symbol === 'ETH'
 
-// export const getEthAsToken = async (safeAddress: string) => {
-//   const balance = await getBalanceInEtherOf(safeAddress)
+export const getEthAsToken = (balance: string) => {
+  const eth = makeToken({
+    address: ETH_ADDRESS,
+    name: 'Ether',
+    symbol: 'ETH',
+    decimals: 18,
+    logoUri: logo,
+    balance,
+  })
 
-//   const ethBalance = makeToken({
-//     address: ETH_ADDRESS,
-//     name: 'Ether',
-//     symbol: 'ETH',
-//     decimals: 18,
-//     logoUri: logo,
-//     funds: balance,
-//   })
-
-//   return ethBalance
-// }
+  return eth
+}
 
 export const calculateActiveErc20TokensFrom = (tokens: List<Token>) => {
   const activeTokens = List().withMutations(list => tokens.forEach((token: Token) => {

src/routes/safe/component/Layout.jsx

@@ -94,8 +94,8 @@ class Layout extends React.Component<Props, State> {
     if (!safe) {
       return <NoSafe provider={provider} text="Safe not found" />
     }
-    // <GnoSafe safe={safe} tokens={activeTokens} userAddress={userAddress} />
-    const address = safe.get('address')
+
+    const { address, ethBalance } = safe
 
     return (
       <React.Fragment>
@@ -129,7 +129,13 @@ class Layout extends React.Component<Props, State> {
         </Row>
         <Hairline color="#c8ced4" />
         {tabIndex === 0 && (
-          <Balances tokens={tokens} activeTokens={activeTokens} granted={granted} safeAddress={address} />
+          <Balances
+            ethBalance={ethBalance}
+            tokens={tokens}
+            activeTokens={activeTokens}
+            granted={granted}
+            safeAddress={address}
+          />
         )}
       </React.Fragment>
     )

src/routes/safe/container/selector.js

@@ -15,6 +15,7 @@ import { sameAddress } from '~/logic/wallets/ethAddresses'
 import { orderedTokenListSelector, tokensSelector } from '~/logic/tokens/store/selectors'
 import { type Token } from '~/logic/tokens/store/model/token'
 import { safeParamAddressSelector } from '../store/selectors'
+import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
 
 export type SelectorProps = {
   safe: SafeSelectorProps,
@@ -52,10 +53,22 @@ type UserToken = {
   balance: string,
 }
 
+const safeEthAsTokenSelector: Selector<GlobalState, RouterProps, ?Token> = createSelector(
+  safeSelector,
+  (safe: Safe) => {
+    if (!safe) {
+      return undefined
+    }
+
+    return getEthAsToken(safe.ethBalance)
+  },
+)
+
 const extendedSafeTokensSelector: Selector<GlobalState, RouterProps, List<Token>> = createSelector(
   safeTokensSelector,
   tokensSelector,
-  (safeTokens: List<UserToken>, tokensList: Map<string, Token>) => {
+  safeEthAsTokenSelector,
+  (safeTokens: List<UserToken>, tokensList: Map<string, Token>, ethAsToken: Token) => {
     const extendedTokens = Map().withMutations((map) => {
       safeTokens.forEach((token: { address: string, balance: string }) => {
         const baseToken = tokensList.get(token.address)
@@ -64,6 +77,10 @@ const extendedSafeTokensSelector: Selector<GlobalState, RouterProps, List<Token>
           map.set(token.address, baseToken.set(token.balance))
         }
       })
+
+      if (ethAsToken) {
+        map.set(ethAsToken.address, ethAsToken)
+      }
     })
 
     return extendedTokens.toList()

yarn.lock

@@ -17370,10 +17370,10 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-bundle-analyzer@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.0.tgz#2c18aca01fa03f11dccb3f627fb40b9f38bd7225"
-  integrity sha512-xNz1oC5pFiVLyDHDz2qZs3ydAuIWv96zokdBZAz+xdhD8BX3mytCmbWkzLzNRDjuWEovhQtycuvpfd368XvLBA==
+webpack-bundle-analyzer@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz#3da733a900f515914e729fcebcd4c40dde71fc6f"
+  integrity sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==
   dependencies:
     acorn "^6.0.7"
     acorn-walk "^6.1.1"