Long loading toast

src/index.tsx

@@ -9,6 +9,7 @@ import { useRecoilValue } from "recoil";
 import settingsState from "module/settings/state/SettingsState";
 import { Platform, UIManager, LogBox } from "react-native";
 import useCachedResources from "./module/common/hook/useCachedResources";
+import { useLongSyncToast } from "./module/wallet/hook/useLongSyncToast";
 import "module/api/OpenApiConfig";
 
 if (Platform.OS === "android") {
@@ -26,6 +27,8 @@ const App = (): JSX.Element => {
     const cachedResourcesLoaded = useCachedResources();
     const { loading: loadingSettings = false } = useRecoilValue(settingsState);
 
+    useLongSyncToast();
+
     return (
         <>
             <Suspense fallback={<LogoPage />} isLoading={loading || loadingSettings || !cachedResourcesLoaded}>

src/locale/locales/el/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "Η αγορά ολοκληρώθηκε!",
     "orderCompletedText": "Θυμηθείτε ότι θα χρειαστούν λίγα λεπτά για να αντικατοπτρίσει ο λογαριασμός σας το νέο ποσό.",
     "selectAddressOfDomain": "{{count}} διευθύνσεις CKB εντοπίστηκαν κάτω από τη διεύθυνση {{domain}}:",
-    "sendAllBalance": "Αποστολή όλου του υπολοίπου"
+    "sendAllBalance": "Αποστολή όλου του υπολοίπου",
+    "longLoadingText": "Φαίνεται ότι ο λογαριασμός σας έχει πολλά δεδομένα. Η φόρτωση όλων μπορεί να πάρει λίγο χρόνο."
 }

src/locale/locales/en/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "Purchase completed!",
     "orderCompletedText": "Remember that it will take a few minutes for your account balance to reflect the new amount.",
     "selectAddressOfDomain": "{{count}} CKB addresses detected under {{domain}} address:",
-    "sendAllBalance": "Send all balance"
+    "sendAllBalance": "Send all balance",
+    "longLoadingText": "Looks like your account has a lot of data. Loading everything may take a while."
 }

src/locale/locales/es/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "Compra completada!",
     "orderCompletedText": "Recuerda que tomará unos minutos para que el saldo de tu cuenta refleje tu nuevo balance.",
     "selectAddressOfDomain": "{{count}} direcciones CKB detectadas bajo la dirección {{domain}}:",
-    "sendAllBalance": "Enviar todo el saldo"
+    "sendAllBalance": "Enviar todo el saldo",
+    "longLoadingText": "Parece que tu cuenta tiene muchos datos. Cargar todo puede llevar un tiempo."
 }

src/locale/locales/fr/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "Achat terminé!",
     "orderCompletedText": "Rappelez-vous qu'il faudra quelques minutes pour que le solde de votre compte reflète le nouveau montant.",
     "selectAddressOfDomain": "{{count}} adresses CKB détectées sous l'adresse {{domain}}:",
-    "sendAllBalance": "Envoyer tout le solde"
+    "sendAllBalance": "Envoyer tout le solde",
+    "longLoadingText": "Votre compte a beaucoup de données. Le chargement de tout peut prendre un certain temps."
 }

src/locale/locales/pt/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "Compra concluída!",
     "orderCompletedText": "Lembre-se de que levará alguns minutos para que o saldo da sua conta reflita o novo valor.",
     "selectAddressOfDomain": "{{count}} endereços CKB detectados sob o endereço {{domain}}:",
-    "sendAllBalance": "Enviar todo o saldo"
+    "sendAllBalance": "Enviar todo o saldo",
+    "longLoadingText": "Parece que sua conta tem muitos dados. Carregar tudo pode levar um tempo."
 }

src/locale/locales/zh/common.json

@@ -227,5 +227,6 @@
     "purchaseCompleted": "购买完成!",
     "orderCompletedText": "请记住，您的账户余额将需要几分钟才能反映出新的金额。",
     "selectAddressOfDomain": "在{{domain}}地址下检测到{{count}}个CKB地址：",
-    "sendAllBalance": "发送所有余额"
+    "sendAllBalance": "发送所有余额",
+    "longLoadingText": "您的账户数据较多，加载可能需要一些时间。"
 }

src/module/wallet/hook/useLongSyncToast.tsx

@@ -0,0 +1,52 @@
+import { Col, Row, Typography, useToast } from "@peersyst/react-native-components";
+import useCkbSync from "./useCkbSync";
+import { useEffect, useRef } from "react";
+import { useTranslate } from "module/common/hook/useTranslate";
+import { TextStyle } from "react-native";
+import { useRecoilValue } from "recoil";
+import walletState from "module/wallet/state/WalletState";
+
+function LongLoadingToastContent({ style }: { style?: TextStyle }): JSX.Element {
+    const translate = useTranslate();
+    const { hideToast } = useToast();
+
+    return (
+        <Col gap={6}>
+            <Typography variant="body3Regular" style={style}>
+                {translate("longLoadingText")}
+            </Typography>
+            <Row justifyContent="flex-end">
+                <Typography variant="body3Strong" style={style} onPress={hideToast}>
+                    {translate("dismiss")}
+                </Typography>
+            </Row>
+        </Col>
+    );
+}
+
+export function useLongSyncToast(): void {
+    const { isAuthenticated } = useRecoilValue(walletState);
+    const { synchronizing } = useCkbSync();
+    const { showToast, hideToast } = useToast();
+
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        if (isAuthenticated && synchronizing && !timeoutRef.current) {
+            timeoutRef.current = setTimeout(() => {
+                if (synchronizing) {
+                    showToast(<LongLoadingToastContent />, {
+                        type: "warning",
+                        duration: Infinity,
+                    });
+                }
+            }, 10000);
+        }
+
+        if (!synchronizing && timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+            hideToast();
+        }
+    }, [synchronizing, isAuthenticated]);
+}