From eec3267281806af6ea5802ef8a78f4af6dd0d326 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 15 Jul 2020 21:05:30 +0200
Subject: [PATCH] get ocean balance

---
 package-lock.json                           | 13 ++++---------
 package.json                                |  3 +--
 src/components/molecules/Wallet/Details.tsx | 19 +++++++++++++++----
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cad3348d..db11d66ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3971,13 +3971,13 @@
       "integrity": "sha512-wu5Ub5F50vCAON0GKyv4anPPLm+oWfHViksiAewVS/xvbbnSCt4gHws2Uc1ct25tiO/2AHAyJkqEiC0ep8SHeQ=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.2.tgz",
-      "integrity": "sha512-v4Y0u7WnhhA33uIMuGKlWqGdlZLen7xRcwCBMvTlLp13Z3K+lOcg7UTByVxnKy2Tg2//wMYUWfuhSsk4nDA/DA==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.3.tgz",
+      "integrity": "sha512-rJqPoVoSh71YI3jZRXmJ5LS7tzeAKqMLb6cKL5NC4IfBQ6p9KWIeXIITnFtgT7+H/aZO/SL9REL+TJbPdIBrNw==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
+        "@oceanprotocol/contracts": "^0.2.2",
         "bignumber.js": "^9.0.0",
-        "deprecated-decorator": "^0.1.6",
         "fs": "0.0.1-security",
         "node-fetch": "^2.6.0",
         "save-file": "^2.3.1",
@@ -11507,11 +11507,6 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
-    "deprecated-decorator": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz",
-      "integrity": "sha1-AJZjF7ehL+kvPMgx91g68ym4bDc="
-    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
diff --git a/package.json b/package.json
index 2521d40b8..43ae267b4 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,7 @@
     "@loadable/component": "^5.13.1",
     "@now/node": "^1.7.2",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/contracts": "^0.2.2",
-    "@oceanprotocol/lib": "^0.1.2",
+    "@oceanprotocol/lib": "^0.1.3",
     "@oceanprotocol/react": "^0.0.12",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index 8e7185f61..3a49dd320 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import Button from '../../atoms/Button'
 import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
@@ -8,14 +8,25 @@ import { connectWallet } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { balance, connect, logout, web3Provider } = useOcean()
-  const oceanBalance = 'Hello Test'
+  const { ocean, balance, connect, logout } = useOcean()
+  const [balanceOcean, setBalanceOcean] = useState('0')
+
+  useEffect(() => {
+    async function init() {
+      if (!ocean) return
+
+      const accounts = await ocean.accounts.list()
+      const newBalanceOcean = await ocean.accounts.getOceanBalance(accounts[0])
+      newBalanceOcean && setBalanceOcean(newBalanceOcean)
+    }
+    init()
+  }, [ocean])
 
   return (
     <div className={styles.details} {...attrs}>
       <ul>
         <li className={styles.balance}>
-          <span>OCEAN</span> {oceanBalance}
+          <span>OCEAN</span> {balanceOcean}
         </li>
         <li className={styles.balance}>
           <span>ETH</span> {formatNumber(Number(balance))}