output new balance object from react hooks

package-lock.json

@@ -3741,9 +3741,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.20.tgz",
-      "integrity": "sha512-ZvRP9JAhDlLhxWLNzezzTaWgNS8QmmamXJ3pYKX4pEwr6dVJ0GDTLRgfw1thqDOIlbbZbxJAgwMROeeSp1LUnw==",
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.21.tgz",
+      "integrity": "sha512-y5KSrNqfVUXyrkvh97A0WIhPNtQ8t1oLVVtQi1fE1bSb2H/N5VMxQIfdoBIZO0VltoMq+9emDUoS3a5VH155JA==",
       "requires": {
         "@oceanprotocol/contracts": "^0.2.3",
         "@oceanprotocol/lib": "^0.1.6",
@@ -6869,12 +6869,6 @@
       "integrity": "sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==",
       "dev": true
     },
-    "@types/numeral": {
-      "version": "0.0.28",
-      "resolved": "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.28.tgz",
-      "integrity": "sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==",
-      "dev": true
-    },
     "@types/overlayscrollbars": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz",
@@ -25961,11 +25955,6 @@
         }
       }
     },
-    "numeral": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
-      "integrity": "sha1-StCAk21EPCVhrtnyGX7//iX05QY="
-    },
     "nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/react": "^0.0.20",
+    "@oceanprotocol/react": "^0.0.21",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",
@@ -51,7 +51,6 @@
     "gatsby-transformer-sharp": "^2.5.11",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
-    "numeral": "^2.0.6",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-data-table-component": "^6.9.7",
@@ -83,7 +82,6 @@
     "@types/jest": "^26.0.4",
     "@types/loadable__component": "^5.13.0",
     "@types/node": "^14.0.23",
-    "@types/numeral": "^0.0.28",
     "@types/react": "^16.9.43",
     "@types/react-datepicker": "^3.0.2",
     "@types/react-helmet": "^6.0.0",

src/components/molecules/Wallet/Details.tsx

@@ -1,36 +1,24 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import Button from '../../atoms/Button'
 import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
-import { formatNumber } from '../../../utils'
 import { connectWallet, getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { ocean, balance, connect, logout, chainId } = useOcean()
-  const [balanceOcean, setBalanceOcean] = useState('0')
-
-  useEffect(() => {
-    async function init() {
-      if (!ocean) return
-
-      const accounts = await ocean.accounts.list()
-      const newBalanceOcean = await accounts[0].getOceanBalance()
-      newBalanceOcean && setBalanceOcean(newBalanceOcean)
-    }
-    init()
-  }, [ocean])
+  const { balance, connect, logout, chainId } = useOcean()
 
   return (
     <div className={styles.details} {...attrs}>
       <ul>
-        <li className={styles.balance}>
-          <span>OCEAN</span> {balanceOcean}
-        </li>
-        <li className={styles.balance}>
-          <span>ETH</span> {formatNumber(Number(balance))}
+        {balance &&
+          Object.entries(balance).map(([key, value]) => (
+            <li className={styles.balance} key={key}>
+              <span>{key.toUpperCase()}</span> {value}
             </li>
+          ))}
+
         <li className={styles.actions}>
           <span title="Connected provider">
             {getInjectedProviderName()}

src/utils/index.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosResponse } from 'axios'
 import { toast } from 'react-toastify'
-import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
-import numeral from 'numeral'
+import { File as FileMetadata } from '@oceanprotocol/lib'
 import web3Utils from 'web3-utils'
 
 export function updateQueryStringParameter(
@@ -40,13 +39,6 @@ export function prettySize(
 // Boolean value that will be true if we are inside a browser, false otherwise
 export const isBrowser = typeof window !== 'undefined'
 
-export function formatNumber(number: number, format?: string): string {
-  numeral.zeroFormat('0')
-  const defaultFormat = '0,0.000'
-
-  return numeral(number).format(format || defaultFormat)
-}
-
 export function toStringNoMS(date: Date): string {
   return date.toISOString().replace(/\.[0-9]{3}Z/, 'Z')
 }