Merge branch 'main' into fix/publishFixes

.eslintrc

@@ -11,9 +11,14 @@
     "plugin:prettier/recommended",
     "prettier/react",
     "prettier/standard",
-    "prettier/@typescript-eslint"
+    "prettier/@typescript-eslint",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "error"
+  },
   "env": { "es6": true, "node": true },
   "settings": {
     "react": {

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.0.44](https://github.com/oceanprotocol/react/compare/v0.0.43...v0.0.44)
+
+> 16 September 2020
+
+- Bump eslint from 7.8.1 to 7.9.0 [`#113`](https://github.com/oceanprotocol/react/pull/113)
+- Bump @typescript-eslint/eslint-plugin from 4.0.1 to 4.1.0 [`#114`](https://github.com/oceanprotocol/react/pull/114)
+- package updates, linting fixes [`e22212b`](https://github.com/oceanprotocol/react/commit/e22212bd016c930283f6bb6966693b2ca23a8b63)
+- bump @oceanprotocol/lib [`dc48874`](https://github.com/oceanprotocol/react/commit/dc48874290a19adb1bb9dc620d7f1f6849a9a488)
+- prepare strict type checking, bunch of typing fixes [`75b1adb`](https://github.com/oceanprotocol/react/commit/75b1adb699dd6f25bf59b4311c077c6aba5ee61e)
+
 #### [v0.0.43](https://github.com/oceanprotocol/react/compare/v0.0.42...v0.0.43)
 
 > 10 September 2020

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanprotocol/react",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "React hooks & components on top of @oceanprotocol/lib",
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
@@ -25,26 +25,28 @@
     "dist/"
   ],
   "dependencies": {
-    "@oceanprotocol/lib": "^0.2.4",
+    "@oceanprotocol/lib": "^0.2.5",
     "axios": "^0.20.0",
     "decimal.js": "^10.2.0",
-    "web3": "^1.2.11",
+    "web3": "^1.3.0",
     "web3modal": "^1.9.0"
   },
   "devDependencies": {
     "@release-it/bumper": "^2.0.0",
+    "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.49",
-    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.0.1",
+    "@typescript-eslint/parser": "^4.1.1",
     "auto-changelog": "^2.2.0",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "microbundle": "^0.12.3",
-    "prettier": "^2.1.1",
+    "prettier": "^2.1.2",
-    "release-it": "^14.0.2",
+    "release-it": "^14.0.3",
     "serialize-javascript": "^5.0.1",
     "typescript": "^4.0.2"
   },

src/@types/globals.d.ts

@@ -1,4 +1,3 @@
-import Web3 from 'web3'
 import { HttpProvider } from 'web3-core'
 
 interface EthereumProvider extends HttpProvider {

src/hooks/useConsume/useConsume.ts

@@ -37,7 +37,7 @@ function useConsume(): UseConsume {
   }
 
   async function consume(
-    did: string,
+    did: DID | string,
     dataTokenAddress: string,
     serviceType: ServiceType = 'access'
   ): Promise<void> {
@@ -50,7 +50,11 @@ function useConsume(): UseConsume {
       await checkAndBuyDT(ocean, dataTokenAddress, account, config)
 
       setStep(1)
-      const order = await ocean.assets.order(did, serviceType, accountId)
+      const order = await ocean.assets.order(
+        did as string,
+        serviceType,
+        accountId
+      )
       Logger.log('order created', order)
       setStep(2)
       const res = JSON.parse(order)
@@ -65,7 +69,7 @@ function useConsume(): UseConsume {
       Logger.log('token transfered', tokenTransfer)
       setStep(3)
       await ocean.assets.download(
-        did,
+        did as string,
         (tokenTransfer as any).transactionHash,
         dataTokenAddress,
         account,

src/hooks/useMetadata/useMetadata.ts

@@ -25,20 +25,20 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
   const [isLoaded, setIsLoaded] = useState(false)
   const [price, setPrice] = useState<BestPrice | undefined>()
 
-  async function getDDO(did: DID | string): Promise<DDO> {
+  async function getDDO(did: DID | string): Promise<DDO | null> {
-    if (status === ProviderStatus.CONNECTED) {
+    if (status !== ProviderStatus.CONNECTED) return null
+
     const ddo = await ocean.metadatastore.retrieveDDO(did)
     return ddo
   }
-  }
 
   async function getPrice(dataTokenAddress?: string): Promise<BestPrice> {
     if (!dataTokenAddress) dataTokenAddress = internalDdo.dataToken
     return await getBestDataTokenPrice(ocean, dataTokenAddress, accountId)
   }
 
-  async function getMetadata(): Promise<Metadata> {
+  async function getMetadata(): Promise<Metadata | null> {
-    if (!internalDdo) return
+    if (!internalDdo) return null
     const metadata = internalDdo.findServiceByType('metadata')
     return metadata.attributes
   }

src/hooks/usePublish/PriceOptions.ts

@@ -1,5 +1,5 @@
 export interface PriceOptions {
-  price?: number
+  price: number
   tokensToMint: number
   type: 'fixed' | 'dynamic' | string
   weightOnDataToken: string

src/hooks/usePublish/usePublish.ts

@@ -17,7 +17,7 @@ interface UsePublish {
     priceOptions: PriceOptions,
     serviceConfigs: ServiceType,
     dataTokenOptions?: DataTokenOptions
-  ) => Promise<DDO>
+  ) => Promise<DDO | undefined | null>
   mint: (tokenAddress: string, tokensToMint: string) => void
   publishStep?: number
   publishStepText?: string
@@ -32,9 +32,52 @@ function usePublish(): UsePublish {
   const [publishStepText, setPublishStepText] = useState<string | undefined>()
   const [publishError, setPublishError] = useState<string | undefined>()
 
-  function setStep(index: number) {
+  function setStep(index?: number) {
     setPublishStep(index)
-    setPublishStepText(publishFeedback[index])
+    index && setPublishStepText(publishFeedback[index])
+  }
+
+  async function mint(tokenAddress: string, tokensToMint: string) {
+    Logger.log('mint function', tokenAddress, accountId)
+    await ocean.datatokens.mint(tokenAddress, accountId, tokensToMint)
+  }
+
+  async function createPricing(
+    priceOptions: PriceOptions,
+    dataTokenAddress: string,
+    mintedTokens: string
+  ): Promise<void | null> {
+    switch (priceOptions.type) {
+      case 'dynamic': {
+        const pool = await ocean.pool.createDTPool(
+          accountId,
+          dataTokenAddress,
+          priceOptions.tokensToMint.toString(),
+          priceOptions.weightOnDataToken,
+          priceOptions.liquidityProviderFee
+        )
+        break
+      }
+      case 'fixed': {
+        if (!config.fixedRateExchangeAddress) {
+          Logger.error(`'fixedRateExchangeAddress' not set in ccnfig.`)
+          return null
+        }
+
+        const fixedPriceExchange = await ocean.fixedRateExchange.create(
+          dataTokenAddress,
+          priceOptions.price.toString(),
+          accountId
+        )
+        await ocean.datatokens.approve(
+          dataTokenAddress,
+          config.fixedRateExchangeAddress,
+          mintedTokens,
+          accountId
+        )
+        break
+      }
+    }
   }
 
   /**
@@ -50,10 +93,12 @@ function usePublish(): UsePublish {
     priceOptions: PriceOptions,
     serviceType: ServiceType,
     dataTokenOptions?: DataTokenOptions
-  ): Promise<DDO> {
+  ): Promise<DDO | undefined | null> {
-    if (status !== ProviderStatus.CONNECTED || !ocean || !account) return
+    if (status !== ProviderStatus.CONNECTED || !ocean || !account) return null
+
     setIsLoading(true)
     setPublishError(undefined)
+
     try {
       const tokensToMint = priceOptions.tokensToMint.toString()
 
@@ -109,7 +154,7 @@ function usePublish(): UsePublish {
           const origComputePrivacy = {
             allowRawAlgorithm: true,
             allowNetworkAccess: false,
-            trustedAlgorithms: []
+            trustedAlgorithms: [] as any
           }
           const computeService = ocean.compute.createComputeService(
             account,
@@ -146,50 +191,12 @@ function usePublish(): UsePublish {
     } catch (error) {
       setPublishError(error.message)
       Logger.error(error)
-      setStep(undefined)
+      setStep()
     } finally {
       setIsLoading(false)
     }
   }
 
-  async function createPricing(
-    priceOptions: PriceOptions,
-    dataTokenAddress: string,
-    mintedTokens: string
-  ) {
-    switch (priceOptions.type) {
-      case 'dynamic': {
-        const pool = await ocean.pool.createDTPool(
-          accountId,
-          dataTokenAddress,
-          priceOptions.tokensToMint.toString(),
-          priceOptions.weightOnDataToken,
-          priceOptions.liquidityProviderFee
-        )
-        break
-      }
-      case 'fixed': {
-        const fixedPriceExchange = await ocean.fixedRateExchange.create(
-          dataTokenAddress,
-          priceOptions.price.toString(),
-          accountId
-        )
-        await ocean.datatokens.approve(
-          dataTokenAddress,
-          config.fixedRateExchangeAddress,
-          mintedTokens,
-          accountId
-        )
-        break
-      }
-    }
-  }
-
-  async function mint(tokenAddress: string, tokensToMint: string) {
-    Logger.log('mint function', tokenAddress, accountId)
-    await ocean.datatokens.mint(tokenAddress, accountId, tokensToMint)
-  }
-
   return {
     publish,
     mint,

src/providers/OceanProvider/OceanProvider.tsx

@@ -33,7 +33,7 @@ interface OceanProviderValue {
   refreshBalance: () => Promise<void>
 }
 
-const OceanContext = createContext(null)
+const OceanContext = createContext({} as OceanProviderValue)
 
 function OceanProvider({
   initialConfig,
@@ -47,7 +47,7 @@ function OceanProvider({
   const [web3, setWeb3] = useState<Web3 | undefined>()
   const [web3Provider, setWeb3Provider] = useState<any | undefined>()
   const [ocean, setOcean] = useState<Ocean | undefined>()
-  const [web3Modal, setWeb3Modal] = useState<Web3Modal>(null)
+  const [web3Modal, setWeb3Modal] = useState<Web3Modal>()
   const [chainId, setChainId] = useState<number | undefined>()
   const [account, setAccount] = useState<Account | undefined>()
   const [accountId, setAccountId] = useState<string | undefined>()
@@ -75,24 +75,13 @@ function OceanProvider({
     Logger.log('Web3Modal instance created.', web3ModalInstance)
   }
 
-  // On mount setup Web3Modal instance
-  useEffect(() => {
-    init()
-  }, [])
-
-  // Connect automatically to cached provider if present
-  useEffect(() => {
-    if (!web3Modal) return
-    web3Modal.cachedProvider && connect()
-  }, [web3Modal])
-
   async function connect(newConfig?: Config) {
     try {
       Logger.log('Connecting ...', newConfig)
 
       newConfig && setConfig(newConfig)
 
-      const provider = await web3Modal.connect()
+      const provider = await web3Modal?.connect()
       setWeb3Provider(provider)
 
       const web3 = new Web3(provider)
@@ -125,13 +114,25 @@ function OceanProvider({
       Logger.error(error)
     }
   }
+
+  // On mount setup Web3Modal instance
+  useEffect(() => {
+    init()
+  }, [])
+
+  // Connect automatically to cached provider if present
+  useEffect(() => {
+    if (!web3Modal) return
+    web3Modal.cachedProvider && connect()
+  }, [web3Modal])
+
   async function refreshBalance() {
-    const balance = await getBalance(account)
+    const balance = account && (await getBalance(account))
     setBalance(balance)
   }
   async function logout() {
     // TODO: #67 check how is the proper way to logout
-    web3Modal.clearCachedProvider()
+    web3Modal?.clearCachedProvider()
   }
 
   const handleAccountsChanged = async (accounts: string[]) => {

src/utils/dtUtils.ts

@@ -8,8 +8,8 @@ export async function getCheapestPool(
   ocean: Ocean,
   accountId: string,
   dataTokenAddress: string
-): Promise<Pool> {
+): Promise<Pool | null> {
-  if (!ocean || !accountId || !dataTokenAddress) return
+  if (!ocean || !accountId || !dataTokenAddress) return null
 
   const tokenPools = await ocean.pool.searchPoolforDT(
     accountId,
@@ -47,47 +47,16 @@ export async function getCheapestPool(
   }
 }
 
-export async function getBestDataTokenPrice(
-  ocean: Ocean,
-  dataTokenAddress: string,
-  accountId: string
-): Promise<BestPrice | undefined> {
-  const cheapestPool = await getCheapestPool(ocean, accountId, dataTokenAddress)
-  const cheapestExchange = await getCheapestExchange(ocean, dataTokenAddress)
-  Decimal.set({ precision: 5 })
-
-  const cheapestPoolPrice = new Decimal(
-    cheapestPool.price !== '' ? cheapestPool.price : 999999999999
-  )
-  const cheapestExchangePrice = new Decimal(
-    cheapestExchange.price !== '' ? cheapestExchange.price : 999999999999
-  )
-
-  if (cheapestPoolPrice < cheapestExchangePrice) {
-    return {
-      type: 'pool',
-      address: cheapestPool.address,
-      value: cheapestPool.price
-    } as BestPrice
-  } else {
-    return {
-      type: 'exchange',
-      address: cheapestExchange.address,
-      value: cheapestExchange.price
-    } as BestPrice
-  }
-}
 export async function getCheapestExchange(
   ocean: Ocean,
   dataTokenAddress: string
-) {
+): Promise<{ address?: string; price: string } | null> {
   if (!ocean || !dataTokenAddress) return
   try {
     const tokenExchanges = await ocean.fixedRateExchange.searchforDT(
       dataTokenAddress,
       '1'
     )
-
     if (tokenExchanges === undefined || tokenExchanges.length === 0) {
       return {
         address: '',
@@ -121,6 +90,41 @@ export async function getCheapestExchange(
   }
 }
 
+export async function getBestDataTokenPrice(
+  ocean: Ocean,
+  dataTokenAddress: string,
+  accountId: string
+): Promise<BestPrice | undefined> {
+  const cheapestPool = await getCheapestPool(ocean, accountId, dataTokenAddress)
+  const cheapestExchange = await getCheapestExchange(ocean, dataTokenAddress)
+  Decimal.set({ precision: 5 })
+
+  const cheapestPoolPrice = new Decimal(
+    cheapestPool && cheapestPool.price !== ''
+      ? cheapestPool.price
+      : 999999999999
+  )
+  const cheapestExchangePrice = new Decimal(
+    cheapestExchange && cheapestExchange?.price !== ''
+      ? cheapestExchange.price
+      : 999999999999
+  )
+
+  if (cheapestPoolPrice < cheapestExchangePrice) {
+    return {
+      type: 'pool',
+      address: cheapestPool?.address,
+      value: cheapestPool?.price
+    } as BestPrice
+  } else {
+    return {
+      type: 'exchange',
+      address: cheapestExchange?.address,
+      value: cheapestExchange?.price
+    } as BestPrice
+  }
+}
+
 export async function checkAndBuyDT(
   ocean: Ocean,
   dataTokenAddress: string,
@@ -139,7 +143,7 @@ export async function checkAndBuyDT(
       account.getId()
     )
 
-    switch (bestPrice.type) {
+    switch (bestPrice?.type) {
       case 'pool': {
         const price = new Decimal(bestPrice.value).times(1.05).toString()
         const maxPrice = new Decimal(bestPrice.value).times(2).toString()
@@ -155,6 +159,16 @@ export async function checkAndBuyDT(
         return buyResponse
       }
       case 'exchange': {
+        if (!config.oceanTokenAddress) {
+          Logger.error(`'oceanTokenAddress' not set in config`)
+          return null
+        }
+
+        if (!config.fixedRateExchangeAddress) {
+          Logger.error(`'fixedRateExchangeAddress' not set in config`)
+          return null
+        }
+
         Logger.log('Buying token from exchange', bestPrice, account.getId())
         await ocean.datatokens.approve(
           config.oceanTokenAddress,

src/utils/index.ts

@@ -14,7 +14,9 @@ export function readFileContent(file: File): Promise<string> {
   })
 }
 
-export function isDDO(toBeDetermined): toBeDetermined is DDO {
+export function isDDO(
+  toBeDetermined: DID | string | DDO
+): toBeDetermined is DDO {
   if ((toBeDetermined as DDO).id) {
     return true
   }

tsconfig.json

@@ -10,9 +10,12 @@
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": true,
-    "strictNullChecks": false,
+    "importHelpers": true,
-    "importHelpers": true
+
+    /* Strict Type-Checking */
+    // TODO: remove and adapt for `strictNullChecks`
+    "strict": true,
+    "strictNullChecks": false
   },
-  "include": ["./src/@types", "./src/index.ts"],
+  "include": ["./src/@types", "./src/index.ts"]
-  "exclude": ["node_modules", "dist", "example"]
 }