From 764438b248d87f5f30b246067c30356a617bf7d2 Mon Sep 17 00:00:00 2001
From: finned-palmer <finned-palmer@togten.com>
Date: Sat, 10 Jul 2021 14:17:52 -0500
Subject: [PATCH] Show wallet scan progress

---
 .../src/js/components/lib/balance.js          | 25 ++++++++++++++++---
 .../src/js/components/lib/walletModal.js      | 24 ++++++++++--------
 pkg/btc-wallet/src/js/components/root.js      | 11 ++++----
 pkg/btc-wallet/src/js/hooks/useSettings.js    | 12 +++++++++
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/pkg/btc-wallet/src/js/components/lib/balance.js b/pkg/btc-wallet/src/js/components/lib/balance.js
index a963a3dac2..55a88adfac 100644
--- a/pkg/btc-wallet/src/js/components/lib/balance.js
+++ b/pkg/btc-wallet/src/js/components/lib/balance.js
@@ -16,10 +16,12 @@ const Balance = () => {
     setPsbt,
     setFee,
     setError,
+    scanProgress,
   } = useSettings();
   const [sending, setSending] = useState(false);
   const [copiedButton, setCopiedButton] = useState(false);
   const [copiedString, setCopiedString] = useState(false);
+  const scanning = scanProgress?.main !== null || scanProgress?.change !== null;
 
   const copyAddress = (arg) => {
     navigator.clipboard.writeText(address);
@@ -93,10 +95,25 @@ const Balance = () => {
             >
               {value}
             </Text>
-            <Text
-              fontSize={1}
-              color="orange"
-            >{`${sats}${unconfirmedString} sats`}</Text>
+            {scanning ? (
+              <Col alignItems="center">
+                <Row>
+                  <Text fontSize={1} color="orange">
+                    Balance will be updated shortly:
+                  </Text>
+                </Row>
+                <Row>
+                  <Text fontSize={1} color="orange">
+                    {scanProgress.main}/24 addresses scanned
+                  </Text>
+                </Row>
+              </Col>
+            ) : (
+              <Text
+                fontSize={1}
+                color="orange"
+              >{`${sats}${unconfirmedString} sats`}</Text>
+            )}
           </Col>
           <Row flexDirection="row-reverse">
             <Button
diff --git a/pkg/btc-wallet/src/js/components/lib/walletModal.js b/pkg/btc-wallet/src/js/components/lib/walletModal.js
index be0bc6ef07..deede02467 100644
--- a/pkg/btc-wallet/src/js/components/lib/walletModal.js
+++ b/pkg/btc-wallet/src/js/components/lib/walletModal.js
@@ -205,16 +205,20 @@ const WalletModal = () => {
             Extended Public Key (XPub)
           </Text>
         </Box>
-        <StatelessTextInput
-          value={xpub}
-          disabled={inputDisabled}
-          fontSize="14px"
-          type="password"
-          name="xpub"
-          autoCapitalize="none"
-          autoCorrect="off"
-          onChange={(e) => checkXPub(e)}
-        />
+        <Row alignItems="center">
+          <StatelessTextInput
+            value={xpub}
+            disabled={inputDisabled}
+            fontSize="14px"
+            type="password"
+            name="xpub"
+            autoCapitalize="none"
+            autoCorrect="off"
+            onChange={(e) => checkXPub(e)}
+            mr={1}
+          />
+          {!inputDisabled ? null : <LoadingSpinner />}
+        </Row>
         <Box mt={3} mb={3}>
           <Text
             fontSize="14px"
diff --git a/pkg/btc-wallet/src/js/components/root.js b/pkg/btc-wallet/src/js/components/root.js
index e3b6288cf0..4a6db22ba5 100644
--- a/pkg/btc-wallet/src/js/components/root.js
+++ b/pkg/btc-wallet/src/js/components/root.js
@@ -8,14 +8,15 @@ import Body from './lib/body.js';
 import { useSettings } from '../hooks/useSettings.js';
 
 const Root = () => {
-  const { loaded, wallet, provider } = useSettings();
-  const blur = !loaded ? false : !(wallet && provider);
+  const { loaded, wallet, provider, scanProgress } = useSettings();
+  const scanning = scanProgress?.main !== null || scanProgress?.change !== null;
+  const blur = !loaded || scanning ? false : !(wallet && provider);
 
   return (
     <BrowserRouter>
       <ThemeProvider theme={light}>
         <Reset />
-        {loaded ? <StartupModal /> : null}
+        {loaded && !scanning ? <StartupModal /> : null}
         <Box
           display="flex"
           flexDirection="column"
@@ -23,8 +24,8 @@ const Root = () => {
           alignItems="center"
           backgroundColor="lightOrange"
           width="100%"
-          minHeight={loaded ? '100%' : 'none'}
-          height={loaded ? 'none' : '100%'}
+          minHeight={loaded && !scanning ? '100%' : 'none'}
+          height={loaded && !scanning ? 'none' : '100%'}
           style={{ filter: blur ? 'blur(8px)' : 'none' }}
           px={[0, 4]}
           pb={[0, 4]}
diff --git a/pkg/btc-wallet/src/js/hooks/useSettings.js b/pkg/btc-wallet/src/js/hooks/useSettings.js
index 55e7038e48..e86e29c875 100644
--- a/pkg/btc-wallet/src/js/hooks/useSettings.js
+++ b/pkg/btc-wallet/src/js/hooks/useSettings.js
@@ -43,6 +43,8 @@ export const SettingsContext = createContext({
   setError: () => {},
   broadcastSuccess: false,
   setBroadcastSuccess: () => {},
+  scanProgress: { main: null, change: null },
+  setScanProgress: () => {},
 });
 
 export const SettingsProvider = ({ channel, children }) => {
@@ -69,6 +71,10 @@ export const SettingsProvider = ({ channel, children }) => {
   const [showWarning, setShowWarning] = useState(false);
   const [error, setError] = useState('');
   const [broadcastSuccess, setBroadcastSuccess] = useState(false);
+  const [scanProgress, setScanProgress] = useState({
+    main: null,
+    change: null,
+  });
 
   const { Provider } = SettingsContext;
 
@@ -184,6 +190,7 @@ export const SettingsProvider = ({ channel, children }) => {
     const errorData = channelData?.data?.error;
     const broadcastSuccessData = channelData?.data?.['broadcast-success'];
     const broadcastFailData = channelData?.data?.['broadcast-fail'];
+    const scanProgressData = channelData?.data?.['scan-progress'];
     if (initialData) {
       setProvider(initialData.provider);
       setWallet(initialData.wallet);
@@ -253,6 +260,9 @@ export const SettingsProvider = ({ channel, children }) => {
     if (broadcastFailData) {
       setBroadcastSuccess(false);
     }
+    if (scanProgressData) {
+      setScanProgress(scanProgressData);
+    }
   }, [channelData]);
 
   useEffect(() => {
@@ -305,6 +315,8 @@ export const SettingsProvider = ({ channel, children }) => {
         setError,
         broadcastSuccess,
         setBroadcastSuccess,
+        scanProgress,
+        setScanProgress,
       }}
     >
       {children}