Skip to content

Commit b8899a1

Browse files
shonsirshashonsirsha
committed
frontend: created GlobalBanners and use it in several pages
created the new component `GlobalBanners`, extracting it out from `app.tsx`. We use this component in `account.tsx`, `accountsummary.tsx`, and all of the settings pages. The reason for this is because we'd like to move them out of `app.tsx` so they're in the document flow of the page instead of living separately in `app.tsx` (visually placed above the page view).
1 parent 1fbc9ae commit b8899a1

File tree

16 files changed

+129
-77
lines changed

16 files changed

+129
-77
lines changed

‎frontends/web/src/api/banners.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { apiGet } from '@/utils/request';
1818
import { subscribeEndpoint, TUnsubscribe } from './subscribe';
19-
import { TMessageTypes } from '@/utils/types';
19+
import type { TMessageTypes } from '@/utils/types';
2020

2121
export type TBannerInfo = {
2222
id: string;

‎frontends/web/src/app.module.css

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
1-
.parentContainer {
1+
.appContent {
2+
display: flex;
3+
flex: 1;
4+
flex-direction: column;
5+
height: 100vh;
26
min-width: 0;
3-
overflow: auto;
7+
/* mobile viewport bug fix */
8+
max-height: -webkit-fill-available;
9+
}
10+
11+
@media (max-width: 900px) {
12+
.appContent {
13+
position: absolute;
14+
width: 100%;
15+
}
416
}

‎frontends/web/src/app.tsx

Lines changed: 27 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,14 @@ import { notifyUser } from './api/system';
3232
import { ConnectedApp } from './connected';
3333
import { Alert } from './components/alert/Alert';
3434
import { Aopp } from './components/aopp/aopp';
35-
import { Banner } from './components/banner/banner';
3635
import { Confirm } from './components/confirm/Confirm';
3736
import { KeystoreConnectPrompt } from './components/keystoreconnectprompt';
38-
import { MobileDataWarning } from './components/mobiledatawarning';
3937
import { Sidebar } from './components/sidebar/sidebar';
40-
import { Update } from './components/update/update';
4138
import { RouterWatcher } from './utils/route';
4239
import { Darkmode } from './components/darkmode/darkmode';
4340
import { AuthRequired } from './components/auth/authrequired';
4441
import { WCSigningRequest } from './components/wallet-connect/incoming-signing-request';
4542
import { Providers } from './contexts/providers';
46-
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
4743
import styles from './app.module.css';
4844

4945
export const App = () => {
@@ -156,47 +152,38 @@ export const App = () => {
156152
<Providers>
157153
<Darkmode />
158154
<div className="app">
159-
<AuthRequired />
155+
<AuthRequired/>
160156
<Sidebar
161157
accounts={activeAccounts}
162158
deviceIDs={deviceIDs}
163159
devices={devices}
164160
/>
165-
<div className={`appContent flex flex-column flex-1 ${styles.parentContainer}`}>
166-
<div className="flex flex-column">
167-
<ContentWrapper className={`flex flex-column ${styles.banners}`}>
168-
<Update />
169-
<MobileDataWarning />
170-
<Banner msgKey="bitbox01" />
171-
<Banner msgKey="bitbox02" />
172-
</ContentWrapper>
173-
<WCSigningRequest />
174-
<Aopp />
175-
<KeystoreConnectPrompt />
176-
{
177-
Object.entries(devices).map(([deviceID, productName]) => {
178-
if (productName === 'bitbox02') {
179-
return (
180-
<Fragment key={deviceID}>
181-
<BitBox02Wizard
182-
deviceID={deviceID}
183-
/>
184-
</Fragment>
185-
);
186-
}
187-
return null;
188-
})
189-
}
190-
<AppRouter
191-
accounts={accounts}
192-
activeAccounts={activeAccounts}
193-
deviceIDs={deviceIDs}
194-
devices={devices}
195-
devicesKey={devicesKey}
196-
/>
197-
<RouterWatcher />
198-
</div>
199-
161+
<div className={styles.appContent}>
162+
<WCSigningRequest />
163+
<Aopp />
164+
<KeystoreConnectPrompt />
165+
{
166+
Object.entries(devices).map(([deviceID, productName]) => {
167+
if (productName === 'bitbox02') {
168+
return (
169+
<Fragment key={deviceID}>
170+
<BitBox02Wizard
171+
deviceID={deviceID}
172+
/>
173+
</Fragment>
174+
);
175+
}
176+
return null;
177+
})
178+
}
179+
<AppRouter
180+
accounts={accounts}
181+
activeAccounts={activeAccounts}
182+
deviceIDs={deviceIDs}
183+
devices={devices}
184+
devicesKey={devicesKey}
185+
/>
186+
<RouterWatcher />
200187
</div>
201188
<Alert />
202189
<Confirm />

‎frontends/web/src/components/contentwrapper/contentwrapper.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
// Copyright 2024 Shift Crypto AG
2-
//
3-
// Licensed under the Apache License, Version 2.0 (the "License");
4-
// you may not use this file except in compliance with the License.
5-
// You may obtain a copy of the License at
6-
//
7-
// http://www.apache.org/licenses/LICENSE-2.0
8-
//
9-
// Unless required by applicable law or agreed to in writing, software
10-
// distributed under the License is distributed on an "AS IS" BASIS,
11-
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12-
// See the License for the specific language governing permissions and
13-
// limitations under the License.
1+
/**
2+
* Copyright 2023 Shift Crypto AG
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
1416

1517
import { ReactNode } from 'react';
1618
import style from './contentwrapper.module.css';
@@ -20,8 +22,8 @@ type TProps = {
2022
children: ReactNode
2123
}
2224

23-
export const ContentWrapper = ({ className = '', children }: TProps) => {
25+
export const ContentWrapper = (({ className = '', children }: TProps) => {
2426
return (
2527
<div className={`${className} ${style.contentWrapper}`}>{children}</div>
2628
);
27-
};
29+
});

‎frontends/web/src/components/globalbanners/globalbanners.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Copyright 2024 Shift Crypto AG
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
18+
import { Banner } from '@/components/banner/banner';
19+
import { MobileDataWarning } from '@/components/mobiledatawarning';
20+
import { Update } from '@/components/update/update';
21+
22+
export const GlobalBanners = () => {
23+
return (
24+
<>
25+
<Update />
26+
<Banner msgKey="bitbox01" />
27+
<Banner msgKey="bitbox02" />
28+
<MobileDataWarning />
29+
</>
30+
31+
);
32+
};

‎frontends/web/src/components/message/message.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717

1818
import { ReactNode } from 'react';
1919
import { StatusInfo, StatusSuccess, StatusWarning, StatusError } from '@/components/icon';
20-
import styles from './message.module.css';
2120
import { TMessageTypes } from '@/utils/types';
21+
import styles from './message.module.css';
2222

2323
type TMessageIconProps = { type: TMessageTypes };
2424

‎frontends/web/src/components/status/status.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const Status = ({
7575
}
7676

7777
return (
78-
<div className={`${style.messageWrapper} ${className}`}>
78+
<div className={className}>
7979
<Message noIcon={noIcon} type={type}>
8080
<div className={style.container}>
8181
<div className={style.content}>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import { A } from '@/components/anchor/anchor';
4747
import { getConfig, setConfig } from '@/utils/config';
4848
import { i18n } from '@/i18n/i18n';
4949
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
50+
import { GlobalBanners } from '@/components/globalbanners/globalbanners';
5051
import style from './account.module.css';
5152

5253
type Props = {
@@ -278,6 +279,7 @@ export const Account = ({
278279
<div className="contentWithGuide">
279280
<div className="container">
280281
<ContentWrapper>
282+
<GlobalBanners />
281283
<Status hidden={!hasCard} type="warning">
282284
{t('warning.sdcard')}
283285
</Status>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { AppContext } from '@/contexts/AppContext';
3737
import { getAccountsByKeystore, isAmbiguiousName } from '@/routes/account/utils';
3838
import { RatesContext } from '@/contexts/RatesContext';
3939
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
40+
import { GlobalBanners } from '@/components/globalbanners/globalbanners';
4041

4142
type TProps = {
4243
accounts: accountApi.IAccount[];
@@ -194,17 +195,17 @@ export const AccountsSummary = ({
194195
getAccountsBalance();
195196
getCoinsTotalBalance();
196197
}, [onStatusChanged, getAccountsBalance, getCoinsTotalBalance, accounts]);
198+
197199
return (
198200
<GuideWrapper>
199201
<GuidedContent>
200202
<Main>
201203
<ContentWrapper>
204+
<GlobalBanners />
202205
<Status hidden={!hasCard} type="warning">
203206
{t('warning.sdcard')}
204207
</Status>
205208
</ContentWrapper>
206-
207-
208209
<Header title={<h2>{t('accountSummary.title')}</h2>}>
209210
<HideAmountsButton />
210211
</Header>

‎frontends/web/src/routes/settings/about.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,18 @@ import { MobileHeader } from './components/mobile-header';
2323
import { Guide } from '@/components/guide/guide';
2424
import { Entry } from '@/components/guide/entry';
2525
import { TPagePropsWithSettingsTabs } from './types';
26+
import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
27+
import { GlobalBanners } from '@/components/globalbanners/globalbanners';
2628

2729
export const About = ({ deviceIDs, hasAccounts }: TPagePropsWithSettingsTabs) => {
2830
const { t } = useTranslation();
2931
return (
3032
<GuideWrapper>
3133
<GuidedContent>
3234
<Main>
35+
<ContentWrapper>
36+
<GlobalBanners />
37+
</ContentWrapper>
3338
<Header
3439
hideSidebarToggler
3540
title={

0 commit comments

Comments
 (0)