From a5b7c66331fff629f62a97cb56acf7aa24bbb8b7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 2 Nov 2020 11:58:05 +0100
Subject: [PATCH] re-fetch pool numbers every 10 sec. (#191)

* re-fetch pool numbers every 10 sec.

* visual indicator

* refresh values on remove screen

* show indicator only when ocean connected

* put back await
---
 .../organisms/AssetActions/Pool/Remove.tsx    | 11 +++++-
 .../AssetActions/Pool/TokenList.module.css    |  1 +
 .../AssetActions/Pool/index.module.css        | 36 +++++++++++++++++++
 .../organisms/AssetActions/Pool/index.tsx     | 15 +++++++-
 .../organisms/AssetActions/index.tsx          |  5 ++-
 5 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Remove.tsx b/src/components/organisms/AssetActions/Pool/Remove.tsx
index 0b21c1310..f48622873 100644
--- a/src/components/organisms/AssetActions/Pool/Remove.tsx
+++ b/src/components/organisms/AssetActions/Pool/Remove.tsx
@@ -49,12 +49,14 @@ export default function Remove({
   refreshInfo,
   poolAddress,
   poolTokens,
+  totalPoolTokens,
   dtSymbol
 }: {
   setShowRemove: (show: boolean) => void
   refreshInfo: () => void
   poolAddress: string
   poolTokens: string
+  totalPoolTokens: string
   dtSymbol: string
 }): ReactElement {
   const data = useStaticQuery(contentQuery)
@@ -157,7 +159,14 @@ export default function Remove({
       }
     }, 300)
     getValues()
-  }, [amountPercent, isAdvanced, ocean, poolTokens, poolAddress])
+  }, [
+    amountPercent,
+    isAdvanced,
+    ocean,
+    poolTokens,
+    poolAddress,
+    totalPoolTokens
+  ])
 
   return (
     <div className={styles.remove}>
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css
index 2b87baa0f..893aea24b 100644
--- a/src/components/organisms/AssetActions/Pool/TokenList.module.css
+++ b/src/components/organisms/AssetActions/Pool/TokenList.module.css
@@ -4,6 +4,7 @@
   padding: calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
     calc(var(--spacer) / 2) calc(var(--spacer) / 1.5);
   border-top: 1px solid var(--border-color);
+  position: relative;
 }
 
 @media (min-width: 40rem) {
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 157257686..8227ac9a4 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -6,6 +6,7 @@
   padding-left: calc(var(--spacer) / 1.5);
   padding-right: calc(var(--spacer) / 1.5);
   text-align: center;
+  position: relative;
 }
 
 .dataTokenLinks {
@@ -19,3 +20,38 @@
   margin-left: calc(var(--spacer) / 3);
   margin-right: calc(var(--spacer) / 3);
 }
+
+.update {
+  font-size: var(--font-size-mini);
+  color: var(--color-secondary);
+  text-align: center;
+  border-top: 1px solid var(--border-color);
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-top: calc(var(--spacer) / 4);
+}
+
+.update:before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  border: 1px solid var(--brand-alert-green);
+  margin-right: 0.2rem;
+  margin-top: -0.1rem;
+  vertical-align: middle;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: var(--brand-alert-green);
+  }
+  100% {
+    background: transparent;
+  }
+}
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 56f6c2fb0..916af83b3 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -37,6 +37,8 @@ const contentQuery = graphql`
   }
 `
 
+const refreshInterval = 10000 // 10 sec.
+
 export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const data = useStaticQuery(contentQuery)
   const content = data.content.edges[0].node.childContentJson.pool
@@ -170,7 +172,11 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       }
     }
     init()
-  }, [ocean, accountId, price, ddo.dataToken, refreshPool, ddo.publicKey])
+
+    // Re-fetch price periodically, triggering re-calculation of everything
+    const interval = setInterval(() => refreshPrice(), refreshInterval)
+    return () => clearInterval(interval)
+  }, [ocean, accountId, price, ddo, refreshPool])
 
   const refreshInfo = async () => {
     setRefreshPool(!refreshPool)
@@ -196,6 +202,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           refreshInfo={refreshInfo}
           poolAddress={price.address}
           poolTokens={poolTokens}
+          totalPoolTokens={totalPoolTokens}
           dtSymbol={dtSymbol}
         />
       ) : (
@@ -259,6 +266,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             <Token symbol="% swap fee" balance={swapFee} noIcon />
           </TokenList>
 
+          {ocean && (
+            <div className={styles.update}>
+              Fetching every {refreshInterval / 1000} sec.
+            </div>
+          )}
+
           <div className={stylesActions.actions}>
             <Button
               style="primary"
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index 23a5c6c5c..900cf3dfb 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -37,8 +37,7 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
 
   // Check user balance against price
   useEffect(() => {
-    if (!price || !price.value || !balance || !balance.ocean || !dtBalance)
-      return
+    if (!price?.value || !accountId || !balance?.ocean || !dtBalance) return
 
     setIsBalanceSufficient(
       compareAsBN(balance.ocean, `${price.value}`) || Number(dtBalance) >= 1
@@ -47,7 +46,7 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
     return () => {
       setIsBalanceSufficient(false)
     }
-  }, [balance, price, dtBalance])
+  }, [balance, accountId, price, dtBalance])
 
   const UseContent = isCompute ? (
     <Compute