Merge pull request tahowallet#1123 from tallycash/reload-blasphemy

🔁 Add balance reload button - temporary solution

background/main.ts

@@ -1196,6 +1196,10 @@ export default class Main extends BaseService<never> {
         )
       }
     )
+
+    uiSliceEmitter.on("refreshBackgroundPage", async () => {
+      window.location.reload()
+    })
   }
 
   connectTelemetryService(): void {

background/redux-slices/ui.ts

@@ -27,6 +27,7 @@ export type UIState = {
 export type Events = {
   snackbarMessage: string
   newDefaultWalletValue: boolean
+  refreshBackgroundPage: null
   newSelectedAccount: AddressOnNetwork
 }
 
@@ -136,6 +137,13 @@ export const setNewSelectedAccount = createBackgroundAsyncThunk(
   }
 )
 
+export const refreshBackgroundPage = createBackgroundAsyncThunk(
+  "ui/refreshBackgroundPage",
+  async () => {
+    await emitter.emit("refreshBackgroundPage", null)
+  }
+)
+
 export const selectUI = createSelector(
   (state: { ui: UIState }): UIState => state.ui,
   (uiState) => uiState

ui/components/Wallet/WalletAccountBalanceControl.tsx

@@ -1,8 +1,10 @@
 import React, { ReactElement, useCallback, useState } from "react"
 import classNames from "classnames"
+import { useDispatch } from "react-redux"
+import { refreshBackgroundPage } from "@tallyho/tally-background/redux-slices/ui"
 import { selectCurrentAccountSigningMethod } from "@tallyho/tally-background/redux-slices/selectors"
 import { HIDE_SEND_BUTTON } from "@tallyho/tally-background/features/features"
-import { useBackgroundSelector } from "../../hooks"
+import { useBackgroundSelector, useLocalStorage } from "../../hooks"
 import SharedButton from "../Shared/SharedButton"
 import SharedSlideUpMenu from "../Shared/SharedSlideUpMenu"
 import Receive from "../../pages/Receive"
@@ -37,6 +39,75 @@ function ReadOnlyNotice(): ReactElement {
   )
 }
 
+function BalanceReloader(): ReactElement {
+  const dispatch = useDispatch()
+
+  const [isSpinning, setIsSpinning] = useState(false)
+
+  // 0 = never
+  const [timeWhenLastReloaded, setTimeWhenLastReloaded] = useLocalStorage(
+    "timeWhenLastReloaded",
+    "0"
+  )
+
+  const loadingTimeMs = 15000
+  const timeGapBetweenRunningReloadMs = 60000 * 2
+
+  return (
+    <button
+      type="button"
+      disabled={isSpinning}
+      className={classNames("reload", { spinning: isSpinning })}
+      onClick={() => {
+        const currentTime = new Date().getTime()
+        setIsSpinning(true)
+
+        // Appear to spin regardless if too recent. Only refresh
+        // background page if timeGapBetweenRunningReloadMs is met.
+        if (
+          Number(timeWhenLastReloaded) + timeGapBetweenRunningReloadMs <
+          currentTime
+        ) {
+          setTimeWhenLastReloaded(`${currentTime}`)
+          dispatch(refreshBackgroundPage())
+        }
+        setTimeout(() => {
+          setIsSpinning(false)
+          window.location.reload()
+        }, loadingTimeMs)
+      }}
+    >
+      <style jsx>{`
+        .reload {
+          mask-image: url("./images/[email protected]");
+          mask-size: cover;
+          background-color: #fff;
+          width: 17px;
+          height: 17px;
+          margin-left: 10px;
+        }
+        .reload:hover {
+          background-color: var(--trophy-gold);
+        }
+        .reload:disabled {
+          pointer-events: none;
+        }
+        .spinning {
+          animation: spin 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+        }
+        .spinning:hover {
+          background-color: #fff;
+        }
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `}</style>
+    </button>
+  )
+}
+
 interface Props {
   balance?: string
   initializationLoadingTimeExpired: boolean
@@ -83,6 +154,7 @@ export default function WalletAccountBalanceControl(
           >
             <span className="dollar_sign">$</span>
             {balance ?? 0}
+            {!shouldIndicateLoading && <BalanceReloader />}
           </span>
         </span>
         {currentAccountSigningMethod && !HIDE_SEND_BUTTON ? (

ui/hooks.ts

@@ -160,3 +160,18 @@ export function useDelayContentChange<T>(
 
   return delayedContent
 }
+
+export function useLocalStorage(
+  key: string,
+  initialValue: string
+): [string, React.Dispatch<React.SetStateAction<string>>] {
+  const [value, setValue] = useState(() => {
+    return localStorage.getItem(key) || initialValue
+  })
+
+  useEffect(() => {
+    localStorage.setItem(key, value)
+  }, [key, value])
+
+  return [value, setValue]
+}