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.

Author: thisconnect

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/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/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;