diff --git a/src/components/organisms/AssetActions/Compute.stories.tsx b/src/components/organisms/AssetActions/Compute.stories.tsx
index 2c4b13dd5..bf6af6361 100644
--- a/src/components/organisms/AssetActions/Compute.stories.tsx
+++ b/src/components/organisms/AssetActions/Compute.stories.tsx
@@ -1,9 +1,7 @@
 import React, { ReactElement } from 'react'
 import Compute from './Compute'
 import ddo from '../../../../tests/unit/__fixtures__/ddo'
-import web3Mock from '../../../../tests/unit/__mocks__/web3'
-import squidMock from '../../../../tests/unit/__mocks__/@oceanprotocol/lib'
-import { context } from '../../../../tests/unit/__mocks__/web3provider'
+import { DDO } from '@oceanprotocol/lib'
 
 export default {
   title: 'Organisms/Compute',
@@ -15,12 +13,5 @@ export default {
 }
 
 export const Default = (): ReactElement => (
-  <context.Provider value={web3Mock}>
-    <Compute
-      did={ddo.id}
-      ocean={squidMock.ocean as any}
-      metadata={ddo.findServiceByType('metadata').attributes as any}
-      balance="1000000"
-    />
-  </context.Provider>
+  <Compute ddo={ddo as DDO} isBalanceSufficient />
 )
diff --git a/src/components/organisms/AssetActions/Consume.stories.tsx b/src/components/organisms/AssetActions/Consume.stories.tsx
index e75f8bea3..1034f097e 100644
--- a/src/components/organisms/AssetActions/Consume.stories.tsx
+++ b/src/components/organisms/AssetActions/Consume.stories.tsx
@@ -1,8 +1,7 @@
 import React, { ReactElement } from 'react'
 import Consume from './Consume'
 import ddo from '../../../../tests/unit/__fixtures__/ddo'
-import web3Mock from '../../../../tests/unit/__mocks__/web3'
-import { context } from '../../../../tests/unit/__mocks__/web3provider'
+import { DDO } from '@oceanprotocol/lib'
 
 export default {
   title: 'Organisms/Consume',
@@ -14,10 +13,9 @@ export default {
 }
 
 export const PricedAsset = (): ReactElement => (
-  <context.Provider value={web3Mock}>
-    <Consume
-      did={ddo.id}
-      metadata={ddo.findServiceByType('metadata').attributes as any}
-    />
-  </context.Provider>
+  <Consume
+    ddo={ddo as DDO}
+    isBalanceSufficient
+    file={new DDO(ddo).findServiceByType('metadata').attributes.main.files[0]}
+  />
 )
diff --git a/src/components/templates/AssetDetails.tsx b/src/components/templates/AssetDetails.tsx
index f3deda1ab..e4b6563cb 100644
--- a/src/components/templates/AssetDetails.tsx
+++ b/src/components/templates/AssetDetails.tsx
@@ -44,7 +44,7 @@ export default function PageTemplateAssetDetails({
       }
     }
     init()
-  }, [did])
+  }, [did, config.metadataStoreUri])
 
   return did && metadata ? (
     <Layout title={title} uri={uri}>
diff --git a/tests/unit/__mocks__/@oceanprotocol/lib.ts b/tests/unit/__mocks__/@oceanprotocol/lib.ts
index 6c7c5ef1b..9f7131596 100644
--- a/tests/unit/__mocks__/@oceanprotocol/lib.ts
+++ b/tests/unit/__mocks__/@oceanprotocol/lib.ts
@@ -11,7 +11,7 @@ const metadataStore = {
   }
 }
 
-const squidMock = {
+const libMock = {
   MetadataStore: () => metadataStore,
   DDO: () => ddo,
   ocean: {
@@ -42,26 +42,6 @@ const squidMock = {
       consume: () => null as any,
       getFreeWhiteList: () => Promise.resolve([])
     },
-    keeper: {
-      conditions: {
-        accessSecretStoreCondition: {
-          getGrantedDidByConsumer: () => {
-            return {
-              find: Promise.resolve(
-                'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
-              )
-            }
-          }
-        }
-      },
-      agreementStoreManager: {
-        getAgreement: (agreementId: string) =>
-          Promise.resolve({
-            did:
-              'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
-          })
-      }
-    },
     versions: {
       get: () =>
         Promise.resolve({
@@ -92,4 +72,4 @@ const squidMock = {
   }
 }
 
-export default squidMock
+export default libMock
diff --git a/tests/unit/__mocks__/@oceanprotocol/react.tsx b/tests/unit/__mocks__/@oceanprotocol/react.tsx
index 6a676442c..60bd01590 100644
--- a/tests/unit/__mocks__/@oceanprotocol/react.tsx
+++ b/tests/unit/__mocks__/@oceanprotocol/react.tsx
@@ -1,15 +1,7 @@
 import React, { ReactElement } from 'react'
 import libMock from './lib'
-import web3ProviderMock from '../web3provider'
 
 const reactMock = {
-  Web3Provider: function Component({
-    children
-  }: {
-    children: ReactElement
-  }): ReactElement {
-    return <div>{children}</div>
-  },
   OceanProvider: function Component({
     children
   }: {
@@ -19,14 +11,13 @@ const reactMock = {
   },
   useOcean: () => {
     return {
-      ocean: libMock.ocean
-    }
-  },
-  useWeb3: () => {
-    return {
-      ...web3ProviderMock,
-      account: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
-      ethProviderStatus: 1
+      ocean: libMock.ocean,
+      config: {},
+      web3: null,
+      web3Modal: null,
+      web3Provider: null,
+      accountId: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
+      balance: '0.12'
     }
   },
   useConsume: () => {
diff --git a/tests/unit/setupTests.ts b/tests/unit/setupTests.ts
index 6915a267f..5e1b06846 100644
--- a/tests/unit/setupTests.ts
+++ b/tests/unit/setupTests.ts
@@ -19,6 +19,7 @@ export const globalMock = {
 
 beforeAll(() => {
   jest.mock('web3')
+  jest.mock('@oceanprotocol/lib')
   jest.mock('@oceanprotocol/react')
 
   // useOcean.mockImplementation(() => mockReact.useOcean())