Merge branch 'frontend-sdcardwarning-with-link'

Author: thisconnect

frontends/web/src/components/banners/sdcard.tsx

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import type { AccountCode } from '@/api/account';
 import type { TDevices } from '@/api/devices';
+import type { KeysOf } from '@/utils/types';
 import { useSDCard } from '@/hooks/sdcard';
 import { Message } from '@/components/message/message';
 
@@ -32,9 +34,19 @@ export const SDCardWarning = ({
   const { t } = useTranslation();
   const hasCard = useSDCard(devices, code ? [code] : undefined);
 
+  const deviceList: KeysOf<TDevices> = Object.keys(devices);
+  const firstDevice = deviceList[0];
+  if (!firstDevice) {
+    return null;
+  }
+
   return (
     <Message hidden={!hasCard} type="warning">
       {t('warning.sdcard')}
+      <br />
+      <Link to={`/manage-backups/${firstDevice}`}>
+        {t('backup.link')}
+      </Link>
     </Message>
   );
 };

frontends/web/src/locales/en/app.json

@@ -135,6 +135,7 @@
     "description": "Select <strong>wallet backup file</strong>",
     "insert": "Please insert the microSD card to manage backups.",
     "insertButton": "I have inserted the microSD card",
+    "link": "Go to manage backups",
     "list": "Your microSD card backups",
     "noBackups": "There are no backups on this microSD card.",
     "restore": {