frontend: refactor account-summary using view component

Author: thisconnect

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

@@ -24,7 +24,8 @@ import { unsubscribe } from '../../../utils/subscriptions';
 import { useMountedRef } from '../../../hooks/mount';
 import { useSDCard } from '../../../hooks/sdcard';
 import { Status } from '../../../components/status/status';
-import { Header } from '../../../components/layout';
+import { GuideWrapper, GuidedContent, Header, Main } from '../../../components/layout';
+import { View } from '../../../components/view/view';
 import { Chart } from './chart';
 import { SummaryBalance } from './summarybalance';
 import { AddBuyReceiveOnEmptyBalances } from '../info/buyReceiveCTA';
@@ -147,16 +148,16 @@ export function AccountsSummary({
   }, [onStatusChanged, getAccountsTotalBalance, accounts]);
 
   return (
-    <div className="contentWithGuide">
-      <div className="container">
-        <div className="innerContainer scrollableContainer">
+    <GuideWrapper>
+      <GuidedContent>
+        <Main>
           <Status hidden={!hasCard} type="warning">
             {t('warning.sdcard')}
           </Status>
           <Header title={<h2>{t('accountSummary.title')}</h2>}>
             <HideAmountsButton />
           </Header>
-          <div className="content padded">
+          <View>
             <Chart
               hideAmounts={hideAmounts}
               data={summaryData}
@@ -171,9 +172,9 @@ export function AccountsSummary({
               totalBalancePerCoin={totalBalancePerCoin}
               balances={balances}
             />
-          </div>
-        </div>
-      </div>
+          </View>
+        </Main>
+      </GuidedContent>
       <Guide>
         <Entry key="accountSummaryDescription" entry={t('guide.accountSummaryDescription')} />
         <Entry key="accountSummaryAmount" entry={{
@@ -186,6 +187,6 @@ export function AccountsSummary({
         }} />
         <Entry key="trackingModePortfolioChart" entry={t('guide.trackingModePortfolioChart')} />
       </Guide>
-    </div>
+    </GuideWrapper>
   );
 }