partial tests fix,hook implementation fix

src/components/molecules/Web3Feedback/index.tsx

@@ -2,7 +2,12 @@ import React from 'react'
 import Status from '../../atoms/Status'
 import Wallet from './Wallet'
 import styles from './index.module.css'
-import { useWeb3, useOcean, InjectedProviderStatus, OceanConnectionStatus } from '@oceanprotocol/react'
+import {
+  useWeb3,
+  useOcean,
+  InjectedProviderStatus,
+  OceanConnectionStatus
+} from '@oceanprotocol/react'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -21,8 +26,7 @@ export default function Web3Feedback({
     ethProviderStatus === InjectedProviderStatus.NOT_AVAILABLE
   const isEthProviderDisconnected =
     ethProviderStatus === InjectedProviderStatus.NOT_CONNECTED
-  const isOceanDisconnected =
+  const isOceanDisconnected = status === OceanConnectionStatus.NOT_CONNECTED
-  status === OceanConnectionStatus.NOT_CONNECTED
   const isOceanConnectionError =
     status === OceanConnectionStatus.OCEAN_CONNECTION_ERROR
   const hasSuccess =

src/components/organisms/Consume.tsx

@@ -12,20 +12,19 @@ import styles from './Consume.module.css'
 import Loader from '../atoms/Loader'
 import { useWeb3, useOcean, useConsume } from '@oceanprotocol/react'
 
-
-
 export default function Consume({ ddo }: { ddo: DDO | undefined }) {
   if (!ddo) return null
 
   const { web3 } = useWeb3()
   const { ocean, balanceInOcean } = useOcean()
-  const { consume,consumeStepText,isLoading } = useConsume()
+  const { consume, consumeStepText, isLoading } = useConsume()
   const { attributes } = findServiceByType(ddo, 'metadata')
   const { price } = attributes.main
   const file = (attributes as MetaDataDexFreight).main.files[0]
   const isFree = price === '0'
   const isBalanceSufficient =
-    isFree || compareAsBN(balanceInOcean, Web3.utils.fromWei(price), Comparisson.gte)
+    isFree ||
+    compareAsBN(balanceInOcean, Web3.utils.fromWei(price), Comparisson.gte)
   const isDisabled = !ocean || !isBalanceSufficient || isLoading
 
   const PurchaseButton = () => {
@@ -36,11 +35,7 @@ export default function Consume({ ddo }: { ddo: DDO | undefined }) {
     return isLoading ? (
       <Loader message={consumeStepText} isHorizontal />
     ) : (
-      <Button
+      <Button primary onClick={() => consume(ddo.id)} disabled={isDisabled}>
-        primary
-        onClick={() => consume(ddo.id)}
-        disabled={isDisabled}
-      >
         {isFree ? 'Download' : 'Buy'}
       </Button>
     )

src/components/templates/AssetDetails/RatingAction.tsx

@@ -20,7 +20,7 @@ export default function RatingAction({
 
   useEffect(() => {
     async function getOwnRating() {
-      if(!account) return
+      if (!account) return
       const currentRating = await getAssetRating(did, account)
       currentRating && setRating(currentRating.vote)
     }

src/components/templates/AssetDetails/index.tsx

@@ -42,7 +42,7 @@ const AssetDetailsPageMeta = ({
   } = attributes.additionalInformation
   const { curation } = attributes
 
-  const {getCuration} = useMetadata()
+  const { getCuration } = useMetadata()
   const [rating, setRating] = useState<number>(curation ? curation.rating : 0)
   const [numVotes, setNumVotes] = useState<number>(
     curation ? curation.numVotes : 0

src/pages/_app.tsx

@@ -38,7 +38,8 @@ export default function dexfreightApp({ Component, pageProps }: AppProps) {
       process.env.SECRET_STORE_URI || 'https://secret-store.oceanprotocol.com',
     faucetUri: process.env.FAUCET_URI || 'https://faucet.oceanprotocol.com',
     ratingUri:
-      process.env.RATING_URI || 'https://rating.pacific.dexfreight.dev-ocean.com',
+      process.env.RATING_URI ||
+      'https://rating.pacific.dexfreight.dev-ocean.com',
     verbose: 3
   }
 
@@ -70,8 +71,7 @@ export default function dexfreightApp({ Component, pageProps }: AppProps) {
       />
       <NProgress />
       <Web3Provider>
-
+        <OceanProvider config={config}>
-        <OceanProvider config={config} >
           <Component {...pageProps} />
         </OceanProvider>
       </Web3Provider>

tests/unit/__mocks__/web3provider.ts

@@ -1,9 +1,22 @@
 import web3Mock from './web3'
+import React from 'react'
+import { Web3ProviderValue } from '@oceanprotocol/react'
 
+export const context = React.createContext<Web3ProviderValue | undefined>({
+  web3: web3Mock,
+  ethProviderStatus: -1,
+  account: '0x0000',
+  balance: '',
+  chainId: 1,
+  web3Connect: {} as any,
+  enable: () => null as any
+})
 export default {
   web3: web3Mock,
   ethProviderStatus: -1,
   account: '0x0000',
   balance: '',
-  web3Connect: {} as any
+  chainId: 1,
+  web3Connect: {} as any,
+  enable: () => null as any
 }

tests/unit/context/Web3Provider.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Web3Provider from '../../../src/context/Web3Provider'
+import { Web3Provider } from '@oceanprotocol/react'
 
 describe('Web3Provider', () => {
   it('renders without crashing', () => {

tests/unit/pages/[did].test.tsx

@@ -3,9 +3,10 @@ import { render } from '@testing-library/react'
 import AssetDetails, { getMetadata } from '../../../src/pages/asset/[did]'
 import ddo from '../__fixtures__/ddo'
 import { findServiceByType } from '../../../src/utils'
-import { context } from '../../../src/context/Web3Context'
+import web3ProviderMock, { context } from '../__mocks__/web3provider'
-import web3ProviderMock from '../__mocks__/web3provider'
 import { MetaDataDexFreight } from '../../../src/@types/MetaData'
+import { OceanProvider, Config } from '@oceanprotocol/react'
+import { config } from '../../../src/config/ocean'
 
 const { attributes } = findServiceByType(ddo, 'metadata')
 
@@ -15,11 +16,13 @@ describe('AssetDetails', () => {
   it('renders without crashing', () => {
     const { container } = render(
       <context.Provider value={web3ProviderMock}>
+        <OceanProvider config={config as Config}>
           <AssetDetails
             ddo={JSON.stringify(ddo) as any}
             attributes={attributes as MetaDataDexFreight}
             title="Hello"
           />
+        </OceanProvider>
       </context.Provider>
     )
     expect(container.firstChild).toBeInTheDocument()

tests/unit/pages/publish.test.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Publish from '../../../src/pages/publish'
-import web3ProviderMock from '../__mocks__/web3provider'
+import web3ProviderMock, { context } from '../__mocks__/web3provider'
-import { context } from '../../../src/context/Web3Context'
+import { OceanProvider, Config } from '@oceanprotocol/react'
+import { config } from '../../../src/config/ocean'
 
 describe('Home', () => {
   it('renders without crashing', () => {
     const { container } = render(
       <context.Provider value={web3ProviderMock}>
+        <OceanProvider config={config as Config}>
           <Publish />
+        </OceanProvider>
       </context.Provider>
     )
     expect(container.firstChild).toBeInTheDocument()