frontend: move insurance into marketplace

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Move insurance to Marketplace
 
 ## v4.51.0
 - Bundle BitBox02 and BitBox02 Nova firmware version v9.26.1

frontends/web/src/app.tsx

@@ -116,11 +116,6 @@ export const App = () => {
       navigate('/');
       return;
     }
-    // if on the /bitsurance/ view and there are no accounts view route to /
-    if (accounts.length === 0 && currentURL.startsWith('/bitsurance/')) {
-      navigate('/');
-      return;
-    }
     // if in no-accounts settings and has account go to manage-accounts
     if (accounts.length && currentURL === '/settings/no-accounts') {
       navigate('/settings/manage-accounts');

frontends/web/src/components/bottom-navigation/bottom-navigation.tsx

@@ -78,7 +78,7 @@ export const BottomNavigation = ({
       <Link
         className={`
           ${styles.link || ''}
-          ${pathname.startsWith('/settings') || pathname.startsWith('/bitsurance/') ? (styles.active || '') : ''}
+          ${pathname.startsWith('/settings') ? (styles.active || '') : ''}
         `}
         to="/settings/more"
       >

frontends/web/src/components/bottom-navigation/utils.ts

@@ -14,7 +14,7 @@ export const getBottomNavKey = (pathname: string): string => {
   if (pathname.startsWith('/market/')) {
     return 'market';
   }
-  if (pathname.startsWith('/settings') || pathname.startsWith('/bitsurance/')) {
+  if (pathname.startsWith('/settings')) {
     return 'more';
   }
   return 'other';

frontends/web/src/components/sidebar/sidebar.tsx

@@ -10,7 +10,7 @@ import { deregisterTest } from '@/api/keystores';
 import { getVersion } from '@/api/bitbox02';
 import { debug } from '@/utils/env';
 import { AppLogoInverted, Logo } from '@/components/icon/logo';
-import { CloseXWhite, CogLight, Coins, Device, Eject, Linechart, RedDot, ShieldLight } from '@/components/icon';
+import { CloseXWhite, CogLight, Coins, Device, Eject, Linechart, RedDot } from '@/components/icon';
 import { getAccountsByKeystore } from '@/routes/account/utils';
 import { SkipForTesting } from '@/routes/device/components/skipfortesting';
 import { AppContext } from '@/contexts/AppContext';
@@ -92,7 +92,7 @@ const Sidebar = ({
   };
 
   const accountsByKeystore = getAccountsByKeystore(accounts);
-  const userInSpecificAccountMarketPage = (pathname.startsWith('/market'));
+  const inMarketSection = pathname.startsWith('/market');
 
   return (
     <div className={style.sidebarContainer}>
@@ -150,7 +150,7 @@ const Sidebar = ({
           <>
             <div key="market" className={style.sidebarItem}>
               <NavLink
-                className={({ isActive }) => isActive || userInSpecificAccountMarketPage ? style.sidebarActive : ''}
+                className={({ isActive }) => isActive || inMarketSection ? style.sidebarActive : ''}
                 to="/market/select">
                 <div className={style.single}>
                   <Coins />
@@ -167,17 +167,6 @@ const Sidebar = ({
                 </span>
               </NavLink>
             </div>
-            <div key="insurance" className={style.sidebarItem}>
-              <NavLink
-                className={({ isActive }) => isActive ? style.sidebarActive : ''}
-                to="/bitsurance/bitsurance"
-              >
-                <div className={style.single}>
-                  <ShieldLight alt={t('sidebar.insurance')} />
-                </div>
-                <span className={style.sidebarLabel}>{t('sidebar.insurance')}</span>
-              </NavLink>
-            </div>
           </>
         ) : null }
 

frontends/web/src/contexts/BackNavigationContext.tsx

@@ -35,8 +35,7 @@ const getTabId = (pathname: string): TabId => {
   }
   if (pathname.startsWith('/manage-backups/')
     || pathname.startsWith('/settings')
-    || pathname.startsWith('/add-account')
-    || pathname.startsWith('/bitsurance/')) {
+    || pathname.startsWith('/add-account')) {
     return 'settings';
   }
   return 'unknown';
@@ -71,8 +70,20 @@ const implicitBackRules: ImplicitBackRule[] = [
     previousPattern: '/account/:code',
   })),
   {
-    currentPattern: '/bitsurance/bitsurance',
-    previousPattern: '/settings/more',
+    currentPattern: '/market/bitsurance',
+    previousPattern: '/market/select',
+  },
+  {
+    currentPattern: '/market/bitsurance',
+    previousPattern: '/market/select/:code',
+  },
+  {
+    currentPattern: '/market/bitsurance/dashboard',
+    previousPattern: '/market/select',
+  },
+  {
+    currentPattern: '/market/bitsurance/dashboard',
+    previousPattern: '/market/select/:code',
   },
 ];
 

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

@@ -409,8 +409,7 @@
   "bitsuranceAccount": {
     "errorNoXpub": "Error: Was not able to get xpub from account.",
     "noAccount": "There are no accounts that can be insured.",
-    "select": "Select account",
-    "title": "Insurance"
+    "select": "Select account"
   },
   "blink": {
     "button": "Blink"
@@ -1022,6 +1021,7 @@
     "enable": "Enable",
     "enabled_false": "Disabled",
     "enabled_true": "Enabled",
+    "insure": "Insure",
     "max": "Max",
     "new": "New",
     "noOptionOnIos": "Not available on iOS",
@@ -1996,7 +1996,6 @@
   "setup": "Setup device",
   "sidebar": {
     "device": "Manage device",
-    "insurance": "Insurance",
     "leave": "Leave",
     "settings": "Settings"
   },

frontends/web/src/routes/account/components/insuredtag.tsx

@@ -8,7 +8,7 @@ import style from './insuredtag.module.css';
 export const Insured = () => {
   const { t } = useTranslation();
   return (
-    <Link className={style.insured} to="/bitsurance/dashboard">
+    <Link className={style.insured} to="/market/bitsurance/dashboard">
       <div>
         <Shield/>
         <span>{t('account.insured')}</span>

frontends/web/src/routes/bitsurance/account.tsx

@@ -4,9 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { TAccount } from '@/api/account';
-import { BitsuranceGuide } from './guide';
 import { GroupedAccountSelector } from '@/components/groupedaccountselector/groupedaccountselector';
-import { GuidedContent, GuideWrapper, Header, Main } from '@/components/layout';
 import { Spinner } from '@/components/spinner/Spinner';
 import { View, ViewContent } from '@/components/view/view';
 import { bitsuranceLookup } from '@/api/bitsurance';
@@ -63,7 +61,7 @@ export const BitsuranceAccount = ({ code, accounts }: TProps) => {
           return;
         }
         // replace current history item when redirecting so that the user can go back
-        navigate(`/bitsurance/widget/${account.code}`, { replace: true });
+        navigate(`/market/bitsurance/widget/${account.code}`, { replace: true });
       });
     }
   }, [btcAccounts, navigate]);
@@ -82,37 +80,34 @@ export const BitsuranceAccount = ({ code, accounts }: TProps) => {
     } finally {
       setDisabled(false);
     }
-    navigate(`/bitsurance/widget/${selected}`);
+    navigate(`/market/bitsurance/widget/${selected}`);
   };
 
   if (btcAccounts === undefined) {
     return <Spinner text={t('loading')} />;
   }
 
   return (
-    <Main>
-      <GuideWrapper>
-        <GuidedContent>
-          <Header title={<h2>{t('bitsuranceAccount.title')}</h2>} />
-          <View width="550px" verticallyCentered fullscreen={false}>
-            <ViewContent>
-              { btcAccounts.length === 0 ? (
-                <div>{t('bitsuranceAccount.noAccount')}</div>
-              ) : (
-                <GroupedAccountSelector
-                  title={t('bitsuranceAccount.select')}
-                  disabled={disabled}
-                  accounts={btcAccounts}
-                  selected={selected}
-                  onChange={handleChangeAccount}
-                  onProceed={handleProceed}
-                />
-              )}
-            </ViewContent>
-          </View>
-        </GuidedContent>
-        <BitsuranceGuide/>
-      </GuideWrapper>
-    </Main>
+    <View
+      fullscreen={false}
+      minHeight="600px"
+      verticallyCentered
+      width="550px"
+    >
+      <ViewContent>
+        { btcAccounts.length === 0 ? (
+          <div>{t('bitsuranceAccount.noAccount')}</div>
+        ) : (
+          <GroupedAccountSelector
+            title={t('bitsuranceAccount.select')}
+            disabled={disabled}
+            accounts={btcAccounts}
+            selected={selected}
+            onChange={handleChangeAccount}
+            onProceed={handleProceed}
+          />
+        )}
+      </ViewContent>
+    </View>
   );
 };