Merge commit 'refs/pull/3470/head' of https://github.com/BitBoxSwiss/bitbox-wallet-app into release-v4.48.1

Author: benma

frontends/web/src/app.module.css

@@ -12,19 +12,6 @@
     padding-right: env(safe-area-inset-right, 0);
 }
 
-.contentContainer {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.appRouter {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
 @media (max-width: 900px) {
     .appContent {
         position: absolute;

frontends/web/src/app.tsx

@@ -43,7 +43,6 @@ import { AuthRequired } from './components/auth/authrequired';
 import { WCSigningRequest } from './components/wallet-connect/incoming-signing-request';
 import { Providers } from './contexts/providers';
 import { BottomNavigation } from './components/bottom-navigation/bottom-navigation';
-import { GlobalBanners } from '@/components/banners';
 import styles from './app.module.css';
 
 export const App = () => {
@@ -203,16 +202,13 @@ export const App = () => {
                 return null;
               })
             }
-            <div id="content-container" className={styles.contentContainer}>
-              <GlobalBanners />
-              <AppRouter
-                accounts={accounts}
-                activeAccounts={activeAccounts}
-                deviceIDs={deviceIDs}
-                devices={devices}
-                devicesKey={devicesKey}
-              />
-            </div>
+            <AppRouter
+              accounts={accounts}
+              activeAccounts={activeAccounts}
+              deviceIDs={deviceIDs}
+              devices={devices}
+              devicesKey={devicesKey}
+            />
             <RouterWatcher />
           </div>
           {showBottomNavigation && (

frontends/web/src/components/banners/banner.module.css

@@ -5,25 +5,3 @@
 .link:focus {
   outline-color: inherit;
 }
-
-.container > div {
-  flex-shrink: 0;
-  margin: 0 auto;
-  margin-top: var(--spacing-default);
-  max-width: var(--content-width);
-  padding: var(--space-default);
-  padding-bottom: 0;
-  padding-top: 0;
-  width: 100%;
-}
-
-@media (max-width: 768px) {
-  .container > div {
-      padding: 0 var(--space-half);
-  }
-
-  .container > div:last-child > div {
-    margin-bottom: 0;
-  }
-}
-

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

@@ -19,18 +19,17 @@ import { Update } from './update';
 import { Banner } from './banner';
 import { MobileDataWarning } from './mobiledatawarning';
 import { Offline } from './offline';
-import styles from './banner.module.css';
 
 export const GlobalBanners = () => {
   return (
-    <div className={styles.container}>
+    <>
       <Testing />
       <Update />
       <Banner msgKey="bitbox01" />
       <Banner msgKey="bitbox02" />
       <Banner msgKey="bitbox02nova" />
       <MobileDataWarning />
       <Offline />
-    </div>
+    </>
   );
 };

frontends/web/src/components/terms/terms.module.css

@@ -8,7 +8,7 @@
   justify-content: center;
   margin: 0 auto;
   overflow: auto;
-  padding: 0 var(--space-half) var(--header-height) var(--space-half);
+  padding: 0 var(--space-half) 0 var(--space-half);
   width: 100%;
 }
 
@@ -24,7 +24,7 @@
   font-family: var(--font-family);
   flex-grow: 0;
   flex-shrink: 1;
-  margin: var(--space-default) 0;
+  margin: 0 0 var(--space-default) 0;
   max-width: 660px;
   overflow: auto;
   padding: var(--space-quarter) 1em 1em 1em;

frontends/web/src/hooks/scrolltotop.ts

@@ -45,6 +45,7 @@ import { A } from '@/components/anchor/anchor';
 import { getConfig, setConfig } from '@/utils/config';
 import { i18n } from '@/i18n/i18n';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
+import { GlobalBanners } from '@/components/banners';
 import { View, ViewContent, ViewHeader } from '@/components/view/view';
 import { Transaction } from '@/components/transactions/transaction';
 import { TransactionDetails } from '@/components/transactions/details';
@@ -253,6 +254,7 @@ const RemountAccount = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
+            <GlobalBanners />
             <Status hidden={!hasCard} type="warning">
               {t('warning.sdcard')}
             </Status>

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

@@ -38,6 +38,7 @@ import { AppContext } from '@/contexts/AppContext';
 import { getAccountsByKeystore, isAmbiguousName } from '@/routes/account/utils';
 import { RatesContext } from '@/contexts/RatesContext';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
+import { GlobalBanners } from '@/components/banners';
 
 type TProps = {
   accounts: accountApi.IAccount[];
@@ -174,6 +175,7 @@ export const AccountsSummary = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
+            <GlobalBanners />
             <Status hidden={!hasCard} type="warning">
               {t('warning.sdcard')}
             </Status>

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -30,7 +30,6 @@ import { alertUser } from '@/components/alert/Alert';
 import { BitsuranceGuide } from './guide';
 import { getBitsuranceURL } from '@/api/bitsurance';
 import { convertScriptType } from '@/utils/request-addess';
-import { useScrollToTop } from '@/hooks/scrolltotop';
 import style from './widget.module.css';
 
 type TProps = {
@@ -40,7 +39,6 @@ type TProps = {
 export const BitsuranceWidget = ({ code }: TProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const scrollToTop = useScrollToTop();
 
   const [height, setHeight] = useState(0);
   const [iframeLoaded, setIframeLoaded] = useState(false);
@@ -185,10 +183,7 @@ export const BitsuranceWidget = ({ code }: TProps) => {
         <div ref={ref} className={style.container}>
           { !agreedTerms ? (
             <BitsuranceTerms
-              onAgreedTerms={() => {
-                setAgreedTerms(true);
-                scrollToTop();
-              }}
+              onAgreedTerms={() => setAgreedTerms(true)}
             />
           ) : (
             <div style={{ height }}>

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

@@ -18,7 +18,9 @@ import { useTranslation } from 'react-i18next';
 import type { TPagePropsWithSettingsTabs } from '../settings/types';
 import { Bluetooth } from '@/components/bluetooth/bluetooth';
 import { GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
+import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { ViewContent, View } from '@/components/view/view';
+import { GlobalBanners } from '@/components/banners';
 import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { WithSettingsTabs } from '@/routes/settings/components/tabs';
 import { ManageDeviceGuide } from './bitbox02/settings-guide';
@@ -34,6 +36,9 @@ export const NoDeviceConnected = ({
     <Main>
       <GuideWrapper>
         <GuidedContent>
+          <ContentWrapper>
+            <GlobalBanners />
+          </ContentWrapper>
           <Header
             hideSidebarToggler
             title={