code splitting and cleanup

src/@types/MetaData.d.ts

@@ -1,7 +1,9 @@
-import { Metadata } from '@oceanprotocol/lib'
+import {
-import { AdditionalInformation } from '@oceanprotocol/lib/dist/node/ddo/interfaces/AdditionalInformation'
+  Metadata,
-import { File } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
+  File,
-import { ServiceMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Service'
+  AdditionalInformation,
+  ServiceMetadata
+} from '@oceanprotocol/lib'
 
 export declare type AccessType = 'Download' | 'Compute'
 

src/components/Layout.module.css

@@ -1,7 +1,7 @@
 .app {
   height: 100%;
   background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
-    no-repeat center 10rem;
+    no-repeat center 11rem;
 
   /* sticky footer technique */
   display: flex;

src/components/molecules/Menu.tsx

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import { useLocation } from '@reach/router'
+import loadable from '@loadable/component'
 import styles from './Menu.module.css'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
-import Wallet from './Wallet'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Container from '../atoms/Container'
 
+const Wallet = loadable(() => import('./Wallet'))
+
 declare type MenuItem = {
   name: string
   link: string

src/components/molecules/Wallet/index.tsx

@@ -3,7 +3,6 @@ import loadable from '@loadable/component'
 import { useSpring, animated } from 'react-spring'
 import Account from './Account'
 import Details from './Details'
-import styles from './index.module.css'
 import { useOcean } from '@oceanprotocol/react'
 
 const Tippy = loadable(() => import('@tippyjs/react/headless'))

src/components/organisms/AssetActions/Consume.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import Web3 from 'web3'
+import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Button from '../../atoms/Button'
 import File from '../../atoms/File'
@@ -23,8 +23,7 @@ export default function Consume({
   const file = metadata.main.files[0]
   const isFree = price === '0'
   const isBalanceSufficient =
-    isFree ||
+    isFree || compareAsBN(balanceInOcean, fromWei(price), Comparisson.gte)
-    compareAsBN(balanceInOcean, Web3.utils.fromWei(price), Comparisson.gte)
   const isDisabled = !ocean || !isBalanceSufficient || isLoading
 
   const PurchaseButton = () => {

src/components/pages/Publish/validation.ts

@@ -1,5 +1,5 @@
 import { MetadataPublishForm } from '../../../@types/Metadata'
-import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
+import { File as FileMetadata } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 
 export const validationSchema = Yup.object().shape<MetadataPublishForm>({

src/utils/wallet.ts

@@ -1,5 +1,4 @@
 import { OceanProviderValue } from '@oceanprotocol/react'
-import atlas from '@ethereum-navigator/atlas'
 import { networks, infuraProjectId } from '../../app.config'
 
 const web3ModalTheme = {
@@ -17,12 +16,13 @@ export async function connectWallet(
     '@walletconnect/web3-provider'
   )
 
+  // Provider Options
+  // https://github.com/Web3Modal/web3modal#provider-options
   const providerOptions = {
-    /* See Provider Options Section */
     walletconnect: {
-      package: WalletConnectProvider, // required
+      package: WalletConnectProvider,
       options: {
-        infuraId: infuraProjectId // required
+        infuraId: infuraProjectId
       }
     }
   }