Merge pull request #268 from yours-org/feat/refresh-spends

Feat/refresh spends

package.json

@@ -40,7 +40,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "^5.0.1",
     "replace-module-webpack-plugin": "^1.0.0",
-    "spv-store": "^0.1.63",
+    "spv-store": "^0.1.69",
     "stream-browserify": "^3.0.0",
     "styled-components": "^6.0.8",
     "ts-loader": "^9.5.1",

src/App.tsx

@@ -4,8 +4,7 @@ import { MemoryRouter as Router, Route, Routes } from 'react-router-dom';
 import styled from 'styled-components';
 import { Show } from './components/Show';
 import { UnlockWallet } from './components/UnlockWallet';
-import { BottomMenuContext, BottomMenuProvider } from './contexts/BottomMenuContext';
-import { SnackbarProvider } from './contexts/SnackbarContext';
+import { BottomMenuContext } from './contexts/BottomMenuContext';
 import { useActivityDetector } from './hooks/useActivityDetector';
 import { useTheme } from './hooks/useTheme';
 import { useViewport } from './hooks/useViewport';
@@ -32,12 +31,14 @@ import { WhitelistedApp } from './inject';
 import { PageLoader } from './components/PageLoader';
 import { useServiceContext } from './hooks/useServiceContext';
 import { useWeb3RequestContext } from './hooks/useWeb3RequestContext';
-import { QueueProvider } from './contexts/QueueContext';
 import { QueueBanner } from './components/QueueBanner';
-import { BlockHeightProvider } from './contexts/BlockHeightContext';
 import { SyncingBlocks } from './components/SyncingBlocks';
 import { MasterRestore } from './pages/onboarding/MasterRestore';
 import { Bsv20SendRequest } from './pages/requests/Bsv20SendRequest';
+import { BlockHeightProvider } from './contexts/providers/BlockHeightProvider';
+import { QueueProvider } from './contexts/providers/QueueProvider';
+import { BottomMenuProvider } from './contexts/providers/BottomMenuProvider';
+import { SnackbarProvider } from './contexts/providers/SnackbarProvider';
 
 const MainContainer = styled.div<WhiteLabelTheme & { $isMobile?: boolean }>`
   display: flex;

src/contexts/BlockHeightContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+type QueueContextType = {
+  percentCompleted: number;
+  showSyncPage: boolean;
+};
+
+export const BlockHeightContext = createContext<QueueContextType | null>(null);

src/contexts/BottomMenuContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+export type MenuItems = 'bsv' | 'ords' | 'tools' | 'settings';
+
+type BottomMenuContextType = {
+  selected: MenuItems | null;
+  query: string;
+  handleSelect: (item: MenuItems, query?: string) => void;
+  showMenu: () => void;
+  hideMenu: () => void;
+  isVisible: boolean;
+};
+
+export const BottomMenuContext = createContext<BottomMenuContextType | null>(null);

src/contexts/ColorThemeContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { Theme } from '../theme.types';
+
+export interface ThemeContextProps {
+  theme: Theme;
+}
+
+export const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);

src/contexts/QueueContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { Theme } from '../theme.types';
+
+type QueueContextType = {
+  queueLength: number;
+  showQueueBanner: boolean;
+  updateBalance: boolean;
+  theme: Theme;
+  isSyncing: boolean;
+};
+
+export const QueueContext = createContext<QueueContextType | null>(null);

src/contexts/ServiceContext.ts

@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+import { ChromeStorageService } from '../services/ChromeStorage.service';
+import { WhatsOnChainService } from '../services/WhatsOnChain.service';
+import { KeysService } from '../services/Keys.service';
+import { ContractService } from '../services/Contract.service';
+import { BsvService } from '../services/Bsv.service';
+import { OrdinalService } from '../services/Ordinal.service';
+import { SPVStore } from 'spv-store';
+import { GorillaPoolService } from '../services/GorillaPool.service';
+
+export interface ServiceContextProps {
+  chromeStorageService: ChromeStorageService;
+  keysService: KeysService;
+  bsvService: BsvService;
+  ordinalService: OrdinalService;
+  wocService: WhatsOnChainService;
+  gorillaPoolService: GorillaPoolService;
+  contractService: ContractService;
+  isLocked: boolean;
+  isReady: boolean;
+  setIsLocked: (isLocked: boolean) => void;
+  lockWallet: () => Promise<void>;
+  oneSatSPV: SPVStore;
+}
+
+export const ServiceContext = createContext<ServiceContextProps | undefined>(undefined);

src/contexts/SnackbarContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export type SnackbarType = 'error' | 'info' | 'success';
+
+type SnackbarContextType = {
+  message: string | null;
+  snackBarType: SnackbarType | null;
+  addSnackbar: (message: string, type: SnackbarType, duration?: number) => void;
+};
+
+export const SnackbarContext = createContext<SnackbarContextType | null>(null);

src/contexts/Web3RequestContext.ts

@@ -0,0 +1,34 @@
+import { createContext } from 'react';
+import {
+  Broadcast,
+  DecryptRequest,
+  EncryptRequest,
+  GetSignatures,
+  PurchaseOrdinal,
+  SendBsv,
+  SendBsv20,
+  SignMessage,
+  TaggedDerivationRequest,
+  TransferOrdinal,
+} from 'yours-wallet-provider';
+import { RequestParams } from '../inject';
+import { ChromeStorageService } from '../services/ChromeStorage.service';
+
+export type Web3RequestContextProps = {
+  connectRequest: RequestParams | undefined;
+  sendBsvRequest: SendBsv[] | undefined;
+  sendBsv20Request: SendBsv20 | undefined;
+  transferOrdinalRequest: TransferOrdinal | undefined;
+  purchaseOrdinalRequest: PurchaseOrdinal | undefined;
+  signMessageRequest: SignMessage | undefined;
+  broadcastRequest: Broadcast | undefined;
+  getSignaturesRequest: GetSignatures | undefined;
+  generateTaggedKeysRequest: TaggedDerivationRequest | undefined;
+  encryptRequest: EncryptRequest | undefined;
+  decryptRequest: DecryptRequest | undefined;
+  popupId: number | undefined;
+  getStorageAndSetRequestState: (chromeStorageService: ChromeStorageService) => void;
+  clearRequest: (type: keyof Omit<Web3RequestContextProps, 'clearRequest'>) => void;
+};
+
+export const Web3RequestContext = createContext<Web3RequestContextProps | undefined>(undefined);

src/contexts/BlockHeightContext.tsx → src/contexts/providers/BlockHeightProvider.tsx

@@ -1,12 +1,6 @@
-import { createContext, ReactNode } from 'react';
-import { useBlockHeightTracker } from '../hooks/useBlockHeightTracker';
-
-type QueueContextType = {
-  percentCompleted: number;
-  showSyncPage: boolean;
-};
-
-const BlockHeightContext = createContext<QueueContextType | null>(null);
+import { ReactNode } from 'react';
+import { useBlockHeightTracker } from '../../hooks/useBlockHeightTracker';
+import { BlockHeightContext } from '../BlockHeightContext';
 
 export const BlockHeightProvider = ({ children }: { children: ReactNode }) => {
   const { percentCompleted, showSyncPage } = useBlockHeightTracker();

src/contexts/BottomMenuContext.tsx → src/contexts/providers/BottomMenuProvider.tsx

@@ -1,20 +1,8 @@
-import { ReactNode, createContext, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { NetWork } from 'yours-wallet-provider';
-import { BottomMenu } from '../components/BottomMenu';
-import { useTheme } from '../hooks/useTheme';
-
-export type MenuItems = 'bsv' | 'ords' | 'tools' | 'settings';
-
-type BottomMenuContextType = {
-  selected: MenuItems | null;
-  query: string;
-  handleSelect: (item: MenuItems, query?: string) => void;
-  showMenu: () => void;
-  hideMenu: () => void;
-  isVisible: boolean;
-};
-
-export const BottomMenuContext = createContext<BottomMenuContextType | null>(null);
+import { BottomMenu } from '../../components/BottomMenu';
+import { useTheme } from '../../hooks/useTheme';
+import { BottomMenuContext, MenuItems } from '../BottomMenuContext';
 
 interface BottomMenuProviderProps {
   network: NetWork;

src/contexts/providers/QueueProvider.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { useQueueTracker } from '../../hooks/useQueueTracker';
+import { QueueContext } from '../QueueContext';
+
+export const QueueProvider = ({ children }: { children: ReactNode }) => {
+  const { queueLength, showQueueBanner, theme, updateBalance, isSyncing } = useQueueTracker();
+
+  return (
+    <QueueContext.Provider value={{ queueLength, showQueueBanner, theme, updateBalance, isSyncing }}>
+      {children}
+    </QueueContext.Provider>
+  );
+};

src/contexts/ServiceContext.tsx → src/contexts/providers/ServiceProvider.tsx

@@ -1,14 +1,14 @@
-import React, { createContext, ReactNode, useCallback, useEffect, useState } from 'react';
-import { ChromeStorageService } from '../services/ChromeStorage.service';
-import { WhatsOnChainService } from '../services/WhatsOnChain.service';
-import { KeysService } from '../services/Keys.service';
-import { ContractService } from '../services/Contract.service';
-import { BsvService } from '../services/Bsv.service';
-import { OrdinalService } from '../services/Ordinal.service';
-import { INACTIVITY_LIMIT } from '../utils/constants';
-import { SPVStore } from 'spv-store';
-import { oneSatSPVPromise } from '../background';
-import { GorillaPoolService } from '../services/GorillaPool.service';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { oneSatSPVPromise } from '../../background';
+import { BsvService } from '../../services/Bsv.service';
+import { ChromeStorageService } from '../../services/ChromeStorage.service';
+import { ContractService } from '../../services/Contract.service';
+import { GorillaPoolService } from '../../services/GorillaPool.service';
+import { KeysService } from '../../services/Keys.service';
+import { OrdinalService } from '../../services/Ordinal.service';
+import { WhatsOnChainService } from '../../services/WhatsOnChain.service';
+import { INACTIVITY_LIMIT } from '../../utils/constants';
+import { ServiceContext, ServiceContextProps } from '../ServiceContext';
 
 const initializeServices = async () => {
   const chromeStorageService = new ChromeStorageService();
@@ -41,28 +41,19 @@ const initializeServices = async () => {
   };
 };
 
-export interface ServiceContextProps {
-  chromeStorageService: ChromeStorageService;
-  keysService: KeysService;
-  bsvService: BsvService;
-  ordinalService: OrdinalService;
-  wocService: WhatsOnChainService;
-  gorillaPoolService: GorillaPoolService;
-  contractService: ContractService;
-  isLocked: boolean;
-  isReady: boolean;
-  setIsLocked: (isLocked: boolean) => void;
-  lockWallet: () => Promise<void>;
-  oneSatSPV: SPVStore;
-}
-
-export const ServiceContext = createContext<ServiceContextProps | undefined>(undefined);
-
 export const ServiceProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [services, setServices] = useState<Partial<ServiceContextProps>>({});
   const [isLocked, setIsLocked] = useState<boolean>(false);
   const [isReady, setIsReady] = useState<boolean>(false);
 
+  useEffect(() => {
+    if (services?.chromeStorageService) {
+      const timestamp = Date.now();
+      const twentyMinutesAgo = timestamp - 20 * 60 * 1000;
+      services.chromeStorageService.update({ lastActiveTime: isLocked ? twentyMinutesAgo : timestamp, isLocked });
+    }
+  }, [isLocked, services?.chromeStorageService]);
+
   useEffect(() => {
     const initServices = async () => {
       try {
@@ -92,10 +83,7 @@ export const ServiceProvider: React.FC<{ children: ReactNode }> = ({ children })
   const lockWallet = useCallback(async () => {
     if (!isReady) return;
     setIsLocked(true);
-    const timestamp = Date.now();
-    const twentyMinutesAgo = timestamp - 20 * 60 * 1000;
-    services?.chromeStorageService?.update({ lastActiveTime: twentyMinutesAgo });
-  }, [isReady, services]);
+  }, [isReady]);
 
   useEffect(() => {
     const checkLockState = async () => {

src/contexts/SnackbarContext.tsx → src/contexts/providers/SnackbarProvider.tsx

@@ -1,17 +1,8 @@
-import { ReactNode, createContext, useState } from 'react';
-import { Snackbar } from '../components/Snackbar';
-import { useTheme } from '../hooks/useTheme';
-import { SNACKBAR_TIMEOUT } from '../utils/constants';
-
-export type SnackbarType = 'error' | 'info' | 'success';
-
-type SnackbarContextType = {
-  message: string | null;
-  snackBarType: SnackbarType | null;
-  addSnackbar: (message: string, type: SnackbarType, duration?: number) => void;
-};
-
-export const SnackbarContext = createContext<SnackbarContextType | null>(null);
+import { ReactNode, useState } from 'react';
+import { Snackbar } from '../../components/Snackbar';
+import { useTheme } from '../../hooks/useTheme';
+import { SNACKBAR_TIMEOUT } from '../../utils/constants';
+import { SnackbarContext, SnackbarType } from '../SnackbarContext';
 
 interface SnackbarProviderProps {
   children: ReactNode;

src/contexts/providers/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ThemeContext } from '../ColorThemeContext';
+import { theme } from '../../theme';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+};