feat: sync delegates in background (#2700)

.testcaferc.json

@@ -5,6 +5,6 @@
 		"takeOnFails": true,
 		"path": "./screenshots"
 	},
-	"selectorTimeout": 15000,
+	"selectorTimeout": 20000,
 	"assertionTimeout": 15000
 }

src/app/App.test.tsx

@@ -16,6 +16,10 @@ describe("App", () => {
 
 		await waitFor(() => expect(getByTestId("Splash__text")).toBeInTheDocument());
 
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 500));
+		});
+
 		expect(container).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
@@ -79,6 +83,31 @@ describe("App", () => {
 		await act(async () => {
 			await new Promise((resolve) => setTimeout(resolve, 2000));
 		});
+
+		await waitFor(() => {
+			expect(getByText(profileTranslations.PAGE_WELCOME.HAS_PROFILES)).toBeInTheDocument();
+
+			expect(container).toBeTruthy();
+
+			expect(getByText("John Doe")).toBeInTheDocument();
+			expect(getByText("Jane Doe")).toBeInTheDocument();
+
+			expect(asFragment()).toMatchSnapshot();
+		});
+	});
+
+	it("should render and schedule delegates sync", async () => {
+		process.env.REACT_APP_BUILD_MODE = "demo";
+
+		const { container, asFragment, getByText, getByTestId } = renderWithRouter(<App syncInterval={500} />, {
+			withProviders: false,
+		});
+		expect(getByTestId("Splash__text")).toBeInTheDocument();
+
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 2000));
+		});
+
 		await waitFor(() => {
 			expect(getByText(profileTranslations.PAGE_WELCOME.HAS_PROFILES)).toBeInTheDocument();
 

src/app/App.tsx

@@ -28,24 +28,48 @@ import { httpClient } from "./services";
 
 const __DEV__ = process.env.NODE_ENV !== "production";
 
-const Main = () => {
+type Props = {
+	syncInterval?: number;
+};
+
+const Main = ({ syncInterval }: Props) => {
 	const [showSplash, setShowSplash] = useState(true);
 
+	const { pathname } = useLocation();
 	const { env, persist } = useEnvironmentContext();
-
 	const isOnline = useNetworkStatus();
 
-	const { pathname } = useLocation();
-
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, [pathname]);
 
 	useLayoutEffect(() => {
+		const syncDelegates = () => {
+			console.log("Running delegates sync...");
+			const coinsData = env.usedCoinsWithNetworks();
+			const coinsInUse = Object.keys(coinsData);
+			const delegatesPromises: any = [];
+
+			for (const coin of coinsInUse) {
+				const coinNetworks = coinsData[coin];
+				for (const network of coinNetworks) {
+					delegatesPromises.push(Promise.resolve(env.coins().syncDelegates(coin, network)));
+				}
+			}
+
+			Promise.allSettled(delegatesPromises).then(() => {
+				setShowSplash(false);
+			});
+		};
+
 		const boot = async () => {
 			await env.verify(fixtureData);
+			syncDelegates();
+
+			console.info("Scheduling next delegates synchronization...");
+			setInterval(() => syncDelegates(), syncInterval);
+
 			await env.boot();
-			setShowSplash(false);
 			await persist();
 		};
 
@@ -54,7 +78,7 @@ const Main = () => {
 		} else {
 			setShowSplash(false);
 		}
-	}, [env, persist]);
+	}, [env, persist, syncInterval]);
 
 	if (showSplash) {
 		return <Splash />;
@@ -70,7 +94,11 @@ const Main = () => {
 	);
 };
 
-export const App = () => {
+Main.defaultProps = {
+	syncInterval: 300000,
+};
+
+export const App = ({ syncInterval }: Props) => {
 	/**
 	 * Ensure that the Environment object will not be recreated when the state changes,
 	 * as the data is stored in memory by the `DataRepository`.
@@ -101,12 +129,12 @@ export const App = () => {
 	);
 
 	return (
-		<I18nextProvider i18n={i18n}>
-			<EnvironmentProvider env={env}>
-				<ErrorBoundary FallbackComponent={ApplicationError}>
-					<Main />
-				</ErrorBoundary>
-			</EnvironmentProvider>
-		</I18nextProvider>
+		<ErrorBoundary FallbackComponent={ApplicationError}>
+			<I18nextProvider i18n={i18n}>
+				<EnvironmentProvider env={env}>
+					<Main syncInterval={syncInterval} />
+				</EnvironmentProvider>
+			</I18nextProvider>
+		</ErrorBoundary>
 	);
 };