Merge pull request #137 from oceanprotocol/feature/pool-data

refactor pool data flow

src/components/atoms/EtherscanLink.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from 'react'
 import { getNetworkName } from '../../utils/wallet'
 import { ReactComponent as External } from '../../images/external.svg'
 import styles from './EtherscanLink.module.css'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function EtherscanLink({
   networkId,
@@ -12,10 +13,15 @@ export default function EtherscanLink({
   path: string
   children: ReactNode
 }): ReactElement {
+  const { appConfig } = useSiteMetadata()
   const url =
     networkId === 1
       ? `https://etherscan.io`
-      : `https://${getNetworkName(networkId).toLowerCase()}.etherscan.io`
+      : `https://${
+          networkId
+            ? getNetworkName(networkId).toLowerCase()
+            : appConfig.network
+        }.etherscan.io`
 
   return (
     <a

src/components/organisms/AssetActions/Pool/Actions.tsx

@@ -19,7 +19,7 @@ export default function Actions({
   actionName: string
   action: () => void
 }): ReactElement {
-  const { networkId } = useOcean()
+  const { networkId, ocean } = useOcean()
 
   return (
     <>
@@ -27,7 +27,12 @@ export default function Actions({
         {isLoading ? (
           <Loader message={loaderMessage} />
         ) : (
-          <Button style="primary" size="small" onClick={() => action()}>
+          <Button
+            style="primary"
+            size="small"
+            onClick={() => action()}
+            disabled={!ocean}
+          >
             {actionName}
           </Button>
         )}

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -207,6 +207,7 @@ export default function Add({
                         !touched?.amount && setTouched({ amount: true })
                         handleChange(e)
                       }}
+                      disabled={!ocean}
                     />
                   )}
                 </Field>

src/components/organisms/AssetActions/Pool/index.tsx

@@ -54,7 +54,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   const [showAdd, setShowAdd] = useState(false)
   const [showRemove, setShowRemove] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
 
   // TODO: put all these variables behind some useEffect
   // to prevent unneccessary updating on every render
@@ -76,8 +75,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
     if (!ocean || !accountId || !price || !price.value) return
 
     async function init() {
-      setIsLoading(true)
-
       try {
         //
         // Get everything which is in the pool
@@ -116,8 +113,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         setSwapFee(`${Number(swapFee) * 100}`)
       } catch (error) {
         Logger.error(error.message)
-      } finally {
-        setIsLoading(false)
       }
     }
     init()
@@ -125,9 +120,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <>
-      {isLoading && !userLiquidity ? (
+      {showAdd ? (
-        <Loader message="Retrieving pools..." />
-      ) : showAdd ? (
         <Add
           setShowAdd={setShowAdd}
           poolAddress={price.address}
@@ -148,13 +141,13 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         <>
           <div className={styles.dataToken}>
             <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
-            <PriceUnit price={`${price.value}`} />
+            <PriceUnit price={`${price?.value}`} />
-            <Conversion price={`${price.value}`} />
+            <Conversion price={`${price?.value}`} />
             <Tooltip content={content.tooltips.price} />
             <div className={styles.dataTokenLinks}>
               <EtherscanLink
                 networkId={networkId}
-                path={`address/${price.address}`}
+                path={`address/${price?.address}`}
               >
                 Pool
               </EtherscanLink>
@@ -174,8 +167,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                 <Tooltip content={content.tooltips.liquidity} />
               </>
             }
-            ocean={`${userLiquidity.ocean}`}
+            ocean={`${userLiquidity?.ocean}`}
-            dt={`${userLiquidity.datatoken}`}
+            dt={`${userLiquidity?.datatoken}`}
             dtSymbol={dtSymbol}
             poolShares={poolTokens}
             conversion={totalUserLiquidityInOcean}
@@ -186,8 +179,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
           <TokenList
             title="Pool Statistics"
-            ocean={`${price.ocean}`}
+            ocean={`${price?.ocean}`}
-            dt={`${price.datatoken}`}
+            dt={`${price?.datatoken}`}
             dtSymbol={dtSymbol}
             poolShares={totalPoolTokens}
             conversion={totalLiquidityInOcean}

src/utils/checkPreviousOrder.ts

@@ -6,6 +6,8 @@ export default async function checkPreviousOrder(
   ddo: DDO,
   serviceType: ServiceType
 ) {
+  if (!ocean) return
+
   const service = ddo.findServiceByType(serviceType)
   // apparenlty cost and timeout are not found, even though they are there...
   const previousOrder = await ocean.datatokens.getPreviousValidOrders(