diff --git a/package-lock.json b/package-lock.json
index b0f3d0a29..32197c7fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3741,9 +3741,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.21.tgz",
-      "integrity": "sha512-y5KSrNqfVUXyrkvh97A0WIhPNtQ8t1oLVVtQi1fE1bSb2H/N5VMxQIfdoBIZO0VltoMq+9emDUoS3a5VH155JA==",
+      "version": "0.0.23",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.23.tgz",
+      "integrity": "sha512-DnCoBtz5Z+3JGChDgLI3n9NhexdNHhO1sQD5mIr6uxEGq5D8E7QDNJAnrLn33MsHWZdATmUNi+KUe81qTVrAyA==",
       "requires": {
         "@oceanprotocol/contracts": "^0.2.3",
         "@oceanprotocol/lib": "^0.1.6",
diff --git a/package.json b/package.json
index 0ca875cae..ca9114f7f 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/react": "^0.0.21",
+    "@oceanprotocol/react": "^0.0.23",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index 587c55b7a..22d74513a 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -5,6 +5,7 @@ import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
 import { connectWallet, getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
+import Conversion from '../../atoms/Price/Conversion'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
   const { balance, connect, logout, chainId } = useOcean()
@@ -12,12 +13,12 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
   return (
     <div className={styles.details} {...attrs}>
       <ul>
-        {balance &&
-          Object.entries(balance).map(([key, value]) => (
-            <li className={styles.balance} key={key}>
-              <span>{key.toUpperCase()}</span> {value}
-            </li>
-          ))}
+        {Object.entries(balance).map(([key, value]) => (
+          <li className={styles.balance} key={key}>
+            <span>{key.toUpperCase()}</span> {value}
+            {key === 'ocean' && <Conversion price={value} />}
+          </li>
+        ))}
 
         <li className={styles.actions}>
           <span title="Connected provider">