improve backup transfer dialog.

CHANGELOG.md

@@ -20,6 +20,7 @@
   - Prefer to encrypt if E2eeEnabled even if peers have EncryptPreference::NoPreference.
   - Allow empty `To` field for self-sent messages.
   - displayname may not be empty anymore #4471
+- Improve backup transfer dialog (different message for connection step, timed message to tell user to check out troubleshooting, button to link to trouble shooting) #4476
 
 ## Fixed
 - fix chat "scrolls up" right after switching (rev 2) #4431

_locales/_untranslated_en.json

@@ -80,5 +80,8 @@
   },
   "contact_is_blocked": {
     "message": "This contact is blocked"
+  },
+  "multidevice_connection_takes_too_long": {
+    "message": "This takes longer than expected 🐌 make sure both devices are on the same Wi-Fi or network and check troubleshooting"
   }
 }

packages/frontend/src/components/dialogs/SetupMultiDevice/ReceiveBackupProgressDialog.tsx

@@ -16,19 +16,24 @@ import {
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 
 import type { DialogProps } from '../../../contexts/DialogContext'
+import { runtime } from '@deltachat-desktop/runtime-interface'
 
 const log = getLogger('renderer/receive_backup')
 
 type Props = {
   QrWithToken: string
 }
 
+// time it takes on progress === 0 to show the trouble shooting button in ms
+const TROUBLESHOOTING_TIMEOUT = 4000
+
 export function ReceiveBackupProgressDialog({
   onClose,
   QrWithToken,
 }: Props & DialogProps) {
   const [importProgress, setImportProgress] = useState(0.0)
   const [error, setError] = useState<string | null>(null)
+  const [troubleTimerFired, setTroubleTimerFired] = useState(false)
   const tx = useTranslationFunction()
 
   const onImexProgress = ({ progress }: DcEventType<'ImexProgress'>) => {
@@ -56,6 +61,8 @@ export function ReceiveBackupProgressDialog({
       window.__selectAccount(accountId)
     })()
 
+    setTimeout(() => setTroubleTimerFired(true), TROUBLESHOOTING_TIMEOUT)
+
     const emitter = BackendRemote.getContextEvents(accountId)
     emitter.on('ImexProgress', onImexProgress)
     return () => {
@@ -76,13 +83,26 @@ export function ReceiveBackupProgressDialog({
               {tx('error')}: {error}
             </p>
           )}
+          <p>
+            {importProgress === 0
+              ? tx('connectivity_connecting')
+              : tx('transferring')}
+          </p>
           <DeltaProgressBar
             progress={importProgress}
             intent={error ? 'danger' : 'success'}
           />
+          {troubleTimerFired && importProgress === 0 && (
+            <p>{tx('multidevice_connection_takes_too_long')}</p>
+          )}
         </DialogContent>
         <DialogFooter>
-          <FooterActions align='end'>
+          <FooterActions align='spaceBetween'>
+            <FooterActionButton
+              onClick={() => runtime.openHelpWindow('multiclient')}
+            >
+              {tx('troubleshooting')}
+            </FooterActionButton>
             <FooterActionButton onClick={cancel}>
               {tx('cancel')}
             </FooterActionButton>