Show wallet scan progress

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>
+            {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

pkg/btc-wallet/src/js/components/lib/walletModal.js

@@ -201,6 +201,7 @@ const WalletModal = () => {
             Extended Public Key (XPub)
           </Text>
         </Box>
+        <Row alignItems="center">
           <StatelessTextInput
             value={xpub}
             disabled={inputDisabled}
@@ -210,7 +211,10 @@ const WalletModal = () => {
             autoCapitalize="none"
             autoCorrect="off"
             onChange={(e) => checkXPub(e)}
+            mr={1}
           />
+          {!inputDisabled ? null : <LoadingSpinner />}
+        </Row>
         <Box mt={3} mb={3}>
           <Text
             fontSize="14px"

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 { loaded, wallet, provider, scanProgress } = useSettings();
-  const blur = !loaded ? false : !(wallet && provider);
+  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'}
+          minHeight={loaded && !scanning ? '100%' : 'none'}
-          height={loaded ? 'none' : '100%'}
+          height={loaded && !scanning ? 'none' : '100%'}
           style={{ filter: blur ? 'blur(8px)' : 'none' }}
           px={[0, 4]}
           pb={[0, 4]}

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;
 
@@ -185,6 +191,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);
@@ -254,6 +261,9 @@ export const SettingsProvider = ({ channel, children }) => {
     if (broadcastFailData) {
       setBroadcastSuccess(false);
     }
+    if (scanProgressData) {
+      setScanProgress(scanProgressData);
+    }
   }, [channelData]);
 
   useEffect(() => {
@@ -306,6 +316,8 @@ export const SettingsProvider = ({ channel, children }) => {
         setError,
         broadcastSuccess,
         setBroadcastSuccess,
+        scanProgress,
+        setScanProgress,
       }}
     >
       {children}