frontend: prefer named exports

Refactored TypeScript files to use named exports instead of default
exports to improve code readability and facilitate better
auto-completion in IDEs. This change also enhances the consistency
and maintainability of the codebase by explicitly defining
exported members.

frontends/web/src/components/forms/checkbox.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Checkbox from './checkbox';
+import { Checkbox } from './checkbox';
 
 describe('components/forms/checkbox', () => {
   it('renders checkbox with proper attributes', () => {

frontends/web/src/components/forms/checkbox.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2021 Shift Crypto AG
+ * Copyright 2021-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,7 +24,7 @@ type CheckboxProps = JSX.IntrinsicElements['input'] & {
     checkboxStyle?: 'default' | 'info' | 'warning' | 'success';
 }
 
-const Checkbox: FunctionComponent<CheckboxProps> = ({
+export const Checkbox: FunctionComponent<CheckboxProps> = ({
   disabled = false,
   label,
   id,
@@ -45,5 +45,3 @@ const Checkbox: FunctionComponent<CheckboxProps> = ({
     </span>
   );
 };
-
-export default Checkbox;

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

@@ -16,7 +16,7 @@
  */
 
 export { Button, ButtonLink } from './button';
-export { default as Checkbox } from './checkbox';
+export { Checkbox } from './checkbox';
 export { Radio } from './radio';
 export { Field } from './field';
 export { Input } from './input';

frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx

@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Select, { components, SingleValueProps, OptionProps, SingleValue, DropdownIndicatorProps, GroupProps, GroupHeadingProps as ReactSelectGroupHeadingProps } from 'react-select';
 import { AccountCode, IAccount } from '../../api/account';
 import { Button } from '../forms';
-import Logo from '../icon/logo';
+import { Logo } from '../icon/logo';
 import { AppContext } from '../../contexts/AppContext';
 import { USBSuccess } from '../icon';
 import { Badge } from '../badge/badge';

frontends/web/src/components/headerssync/headerssync.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018  Shift Devices AG
- * Copyright 2021 Shift Crypto AG
+ * Copyright 2021-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import { useMountedRef } from '../../hooks/mount';
 import { CoinCode } from '../../api/account';
 import { subscribeCoinHeaders } from '../../api/coins';
 import { useSubscribe } from '../../hooks/api';
-import Spinner from '../spinner/ascii';
+import { AsciiSpinner } from '../spinner/ascii';
 import style from './headerssync.module.css';
 
 export type TProps = {
@@ -57,7 +57,7 @@ export const HeadersSync = ({ coinCode }: TProps) => {
           {' '}
           { !loaded && `(${Math.ceil(value)}%)` }
         </div>
-        { !loaded ? (<Spinner />) : null }
+        { !loaded ? (<AsciiSpinner />) : null }
       </div>
       <div data-testid="progress-bar" className={style.progressBar}>
         <div className={style.progressValue} style={{ width: `${value}%` }}></div>

frontends/web/src/components/icon/logo.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2021 Shift Crypto AG
+ * Copyright 2021-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -104,7 +104,12 @@ interface Props {
     stacked?: boolean;
 }
 
-function Logo({ coinCode, active, stacked, ...rest }: Props) {
+export const Logo = ({
+  coinCode,
+  active,
+  stacked,
+  ...rest
+}: Props) => {
   if (!logoMap[coinCode]) {
     console.error('logo undefined for ', coinCode);
     return null;
@@ -123,6 +128,4 @@ function Logo({ coinCode, active, stacked, ...rest }: Props) {
         </div>}
     </div>
   );
-}
-
-export default Logo;
+};

frontends/web/src/components/inlineMessage/InlineMessage.jsx

@@ -17,7 +17,7 @@
 import { Component } from 'react';
 import style from './InlineMessage.module.css';
 
-export default class InlineMessage extends Component {
+export class InlineMessage extends Component {
   deactivate = () => {
     this.props.onEnd();
   };

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

@@ -30,7 +30,7 @@ import settings from '../../assets/icons/settings-alt.svg';
 import settingsGrey from '../../assets/icons/settings-alt_disabled.svg';
 import deviceSettings from '../../assets/icons/wallet-light.svg';
 import { debug } from '../../utils/env';
-import Logo, { AppLogoInverted } from '../icon/logo';
+import { AppLogoInverted, Logo } from '../icon/logo';
 import { CloseXWhite, USBSuccess } from '../icon';
 import { getAccountsByKeystore, isAmbiguiousName, isBitcoinOnly } from '../../routes/account/utils';
 import { SkipForTesting } from '../../routes/device/components/skipfortesting';

frontends/web/src/components/spinner/ascii.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020 Shift Crypto AG
+ * Copyright 2020-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,10 +16,10 @@
 
 import style from './ascii.module.css';
 
-export default function AsciiSpinner() {
+export const AsciiSpinner = () => {
   return (
     <div className={style.spinnerContainer}>
       <div className={style.spinner}></div>
     </div>
   );
-}
+};

frontends/web/src/components/toast/Toast.jsx

@@ -17,7 +17,7 @@
 import { Component } from 'react';
 import style from './Toast.module.css';
 
-export default class Toast extends Component {
+export class Toast extends Component {
   state = {
     active: false,
   };

frontends/web/src/contexts/DarkmodeContext.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Shift Crypto AG
+ * Copyright 2023-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,4 @@ type DarkModeContextProps = {
   toggleDarkmode: (darkmode: boolean) => void;
 }
 
-const DarkModeContext = createContext<DarkModeContextProps>({} as DarkModeContextProps);
-
-export default DarkModeContext;
+export const DarkModeContext = createContext<DarkModeContextProps>({} as DarkModeContextProps);

frontends/web/src/contexts/DarkmodeProvider.tsx

@@ -19,7 +19,7 @@ import { getConfig, setConfig } from '../utils/config';
 import { setDarkTheme, detectDarkTheme } from '../api/darktheme';
 import { runningInAndroid } from '../utils/env';
 import { useMediaQuery } from '../hooks/mediaquery';
-import DarkModeContext from './DarkmodeContext';
+import { DarkModeContext } from './DarkmodeContext';
 
 type TProps = {
   children: ReactNode;

frontends/web/src/hooks/darkmode.ts

@@ -15,7 +15,7 @@
  */
 
 import { useContext } from 'react';
-import DarkModeContext from '../contexts/DarkmodeContext';
+import { DarkModeContext } from '../contexts/DarkmodeContext';
 
 /**
 Hook that manages the app's dark mode state.

frontends/web/src/routes/account/send/components/inputs/receiver-address-input.tsx

@@ -18,7 +18,7 @@ import { ChangeEvent, useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { debug } from '../../../../../utils/env';
 import { getReceiveAddressList } from '../../../../../api/account';
-import DarkModeContext from '../../../../../contexts/DarkmodeContext';
+import { DarkModeContext } from '../../../../../contexts/DarkmodeContext';
 import { Input } from '../../../../../components/forms';
 import { QRCodeLight, QRCodeDark } from '../../../../../components/icon';
 import { ScanQRDialog } from '../dialogs/scan-qr-dialog';

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

@@ -19,9 +19,9 @@ import { AccountCode, CoinCode, IBalance } from '../../../api/account';
 import { syncAddressesCount } from '../../../api/accountsync';
 import { useSubscribe } from '../../../hooks/api';
 import { route } from '../../../utils/route';
-import Logo from '../../../components/icon/logo';
+import { Logo } from '../../../components/icon/logo';
 import { Amount } from '../../../components/amount/amount';
-import Spinner from '../../../components/spinner/ascii';
+import { AsciiSpinner } from '../../../components/spinner/ascii';
 import { FiatConversion } from '../../../components/rates/rates';
 import style from './accountssummary.module.css';
 
@@ -73,7 +73,7 @@ export function BalanceRow (
           count: syncStatus?.toString(),
           defaultValue: 0,
         } as any) }
-        <Spinner />
+        <AsciiSpinner />
       </td>
     </tr>
   );

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

@@ -21,7 +21,7 @@ import { translate, TranslateProps } from '../../../decorators/translate';
 import { Skeleton } from '../../../components/skeleton/skeleton';
 import { Amount } from '../../../components/amount/amount';
 import { PercentageDiff } from './percentage-diff';
-import Filters from './filters';
+import { Filters } from './filters';
 import { getDarkmode } from '../../../components/darkmode/darkmode';
 import { TChartDisplay, TChartFiltersProps } from './types';
 import { DefaultCurrencyRotator } from '../../../components/rates/rates';

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

@@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Shift Crypto AG
+ * Copyright 2022-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { TChartFiltersProps } from './types';
 import styles from './chart.module.css';
 
-const Filters = ({
+export const Filters = ({
   display,
   disableFilters,
   disableWeeklyFilters,
@@ -57,5 +57,3 @@ const Filters = ({
     </div>
   );
 };
-
-export default Filters;

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

@@ -16,7 +16,7 @@
 
 import { useTranslation } from 'react-i18next';
 import * as accountApi from '../../../api/account';
-import Logo from '../../../components/icon/logo';
+import { Logo } from '../../../components/icon/logo';
 import { Amount } from '../../../components/amount/amount';
 import { FiatConversion } from '../../../components/rates/rates';
 import style from './accountssummary.module.css';

frontends/web/src/routes/buy/exchange.tsx

@@ -21,7 +21,7 @@ import { Button } from '../../components/forms';
 import * as exchangesAPI from '../../api/exchanges';
 import { AccountCode, IAccount } from '../../api/account';
 import { Header } from '../../components/layout';
-import Guide from './guide';
+import { BuyGuide } from './guide';
 import { findAccount, getCryptoName } from '../account/utils';
 import { route } from '../../utils/route';
 import { useLoad } from '../../hooks/api';
@@ -241,7 +241,7 @@ export const Exchange = ({ code, accounts }: TProps) => {
           </div>
         </div>
       </div>
-      <Guide name={name} />
+      <BuyGuide name={name} />
     </div>
   );
 };

frontends/web/src/routes/buy/guide.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Shift Crypto AG
+ * Copyright 2022-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@ interface BuyGuideProps {
   exchange?: 'pocket' | 'moonpay';
 }
 
-export default function BuyGuide({ name, exchange }: BuyGuideProps) {
+export const BuyGuide = ({ name, exchange }: BuyGuideProps) => {
   const { t } = useTranslation();
 
   const pocketLink = {
@@ -55,4 +55,4 @@ export default function BuyGuide({ name, exchange }: BuyGuideProps) {
       }} />
     </Guide>
   );
-}
+};

frontends/web/src/routes/buy/info.tsx

@@ -25,7 +25,7 @@ import { isBitcoinOnly } from '../account/utils';
 import { View, ViewContent } from '../../components/view/view';
 import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
 import { GroupedAccountSelector } from '../../components/groupedaccountselector/groupedaccountselector';
-import Guide from './guide';
+import { BuyGuide } from './guide';
 
 type TProps = {
     accounts: accountApi.IAccount[];
@@ -112,7 +112,7 @@ export const BuyInfo = ({ code, accounts }: TProps) => {
             </ViewContent>
           </View>
         </GuidedContent>
-        <Guide name={name} />
+        <BuyGuide name={name} />
       </GuideWrapper>
     </Main>
   );

frontends/web/src/routes/buy/moonpay.tsx

@@ -22,7 +22,7 @@ import { useDarkmode } from '../../hooks/darkmode';
 import { AccountCode, IAccount } from '../../api/account';
 import { getConfig } from '../../utils/config';
 import { getMoonpayBuyInfo } from '../../api/exchanges';
-import Guide from './guide';
+import { BuyGuide } from './guide';
 import { Header } from '../../components/layout';
 import { Spinner } from '../../components/spinner/Spinner';
 import { findAccount, getCryptoName } from '../account/utils';
@@ -114,7 +114,7 @@ export const Moonpay = ({ accounts, code }: TProps) => {
           </div>
         </div>
       </div>
-      <Guide name={name} exchange={'moonpay'}/>
+      <BuyGuide name={name} exchange={'moonpay'}/>
     </div>
   );
 };

frontends/web/src/routes/buy/pocket.tsx

@@ -27,9 +27,9 @@ import { Spinner } from '../../components/spinner/Spinner';
 import { PocketTerms } from '../../components/terms/pocket-terms';
 import { useLoad } from '../../hooks/api';
 import { alertUser } from '../../components/alert/Alert';
-import Guide from './guide';
-import style from './iframe.module.css';
+import { BuyGuide } from './guide';
 import { convertScriptType } from '../../utils/request-addess';
+import style from './iframe.module.css';
 
 interface TProps {
     code: AccountCode;
@@ -249,7 +249,7 @@ export const Pocket = ({ code }: TProps) => {
           </Dialog>
         </div>
       </div>
-      <Guide name={name} exchange={'pocket'}/>
+      <BuyGuide name={name} exchange={'pocket'}/>
     </div>
   );
 };

frontends/web/src/routes/device/bitbox02/backups.tsx

@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { useSync } from '../../../hooks/api';
 import { restoreBackup } from '../../../api/bitbox02';
 import { getBackupList, subscribeBackupList } from '../../../api/backup';
-import Toast from '../../../components/toast/Toast';
+import { Toast } from '../../../components/toast/Toast';
 import { BackupsListItem } from '../components/backup';
 import { Backup } from '../../../api/backup';
 import { Button } from '../../../components/forms';

frontends/web/src/routes/settings/components/advanced-settings/enable-tor-proxy-setting.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { SettingsItem } from '../settingsItem/settingsItem';
 import { ChevronRightDark } from '../../../../components/icon';
 import { TorProxyDialog } from './tor-proxy-dialog';
-import InlineMessage from '../../../../components/inlineMessage/InlineMessage';
+import { InlineMessage } from '../../../../components/inlineMessage/InlineMessage';
 import { TProxyConfig } from '../../advanced-settings';
 import styles from './enable-tor-proxy-setting.module.css';
 

frontends/web/src/routes/settings/manage-accounts.tsx

@@ -21,7 +21,7 @@ import * as accountAPI from '../../api/account';
 import * as backendAPI from '../../api/backend';
 import { alertUser } from '../../components/alert/Alert';
 import { Button, Input, Label } from '../../components/forms';
-import Logo from '../../components/icon/logo';
+import { Logo } from '../../components/icon/logo';
 import { EditActive, EyeOpenedDark, USBSuccess } from '../../components/icon';
 import { Column, Grid, GuideWrapper, GuidedContent, Header, Main } from '../../components/layout';
 import { Toggle } from '../../components/toggle/toggle';