frontend: prefer arrow functions

Refactored to use arrow functions to provide a more concise syntax
and ensure a consistent style across the codebase. Arrow functions
are preferred in this context as they do not bind their own this,
making them a better fit for functional components and callbacks.

Traditional function expressions were retained where necessary,
such as for methods requiring their own this context, constructor
functions, or where hoisting is necessary.

TypeScript's type system helps identify issues related to this
binding and potential hoisting problems.

Author: thisconnect

frontends/web/src/api/subscribe.ts

@@ -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.
@@ -26,10 +26,10 @@ export type TSubscriptionCallback<T> = (eventObject: T) => void;
  * can push data through. This should be mostly used within api.
  * Note there is a subscibe-legacy.ts module that supports older events.
  */
-export function subscribeEndpoint<T>(
+export const subscribeEndpoint = <T>(
   endpoint: string,
   cb: TSubscriptionCallback<T>,
-): TUnsubscribe {
+): TUnsubscribe => {
   return apiSubscribe(endpoint, (event: TEvent) => {
     switch (event.action) {
     case 'replace':
@@ -45,7 +45,7 @@ export function subscribeEndpoint<T>(
       throw new Error(`Event: ${event} not supported`);
     }
   });
-}
+};
 
 /**
  * Subscribes the given function to the backend/connected event.

frontends/web/src/components/dialog/dialog-legacy.tsx

@@ -212,10 +212,10 @@ interface DialogButtonsProps {
     children: React.ReactNode;
 }
 
-function DialogButtons({ children }: DialogButtonsProps) {
+const DialogButtons = ({ children }: DialogButtonsProps) => {
   return (
     <div className={style.dialogButtons}>{children}</div>
   );
-}
+};
 
 export { DialogLegacy, DialogButtons };

frontends/web/src/components/dialog/dialog.tsx

@@ -278,10 +278,10 @@ interface DialogButtonsProps {
     children: React.ReactNode;
 }
 
-function DialogButtons({ children }: DialogButtonsProps) {
+const DialogButtons = ({ children }: DialogButtonsProps) => {
   return (
     <div className={style.dialogButtons}>{children}</div>
   );
-}
+};
 
 export { Dialog, DialogButtons };

frontends/web/src/components/forms/field.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.
@@ -17,12 +17,12 @@
 
 import style from './field.module.css';
 
-export function Field({
+export const Field = ({
   children, ...props
-}: JSX.IntrinsicElements['div']) {
+}: JSX.IntrinsicElements['div']) => {
   return (
     <div className={style.field} {...props}>
       {children}
     </div>
   );
-}
+};

frontends/web/src/components/forms/label.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.
@@ -17,16 +17,16 @@
 
 import style from './label.module.css';
 
-export function Label({
+export const Label = ({
   className,
   children,
   id, // TODO: change to htmlFor when mirgated away from preact@8.x
   ...props
-}: JSX.IntrinsicElements['label']) {
+}: JSX.IntrinsicElements['label']) => {
   const classes = [style.label, className].join(' ');
   return (
     <label htmlFor={id} className={classes} {...props}>
       {children}
     </label>
   );
-}
+};

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

@@ -23,13 +23,13 @@ interface IRadioProps {
 
 type TRadioProps = IRadioProps & JSX.IntrinsicElements['input']
 
-export function Radio({
+export const Radio = ({
   disabled = false,
   label,
   id,
   children,
   ...props
-}: TRadioProps) {
+}: TRadioProps) => {
   return (
     <span className={style.radio}>
       <input
@@ -44,4 +44,4 @@ export function Radio({
       </label>
     </span>
   );
-}
+};

frontends/web/src/components/keystoreconnectprompt.tsx

@@ -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.
@@ -25,7 +25,7 @@ import { useDarkmode } from '../hooks/darkmode';
 import { SkipForTesting } from '../routes/device/components/skipfortesting';
 import styles from './keystoreconnectprompt.module.css';
 
-export function KeystoreConnectPrompt() {
+export const KeystoreConnectPrompt = () => {
   const { t } = useTranslation();
   const { isDarkMode } = useDarkmode();
 
@@ -105,4 +105,4 @@ export function KeystoreConnectPrompt() {
   default:
     return null;
   }
-}
+};

frontends/web/src/components/layout/footer.tsx

@@ -23,7 +23,7 @@ type TProps = {
   children: ReactNode;
 }
 
-export function Footer({ children }: TProps) {
+export const Footer = ({ children }: TProps) => {
   return (
     <footer className={[style.footer, 'flex flex-row flex-items-center flex-end'].join(' ')}>
       {children}
@@ -33,4 +33,4 @@ export function Footer({ children }: TProps) {
       <LanguageSwitch />
     </footer>
   );
-}
+};

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

@@ -24,12 +24,12 @@ export interface Props {
     children: ReactNode;
 }
 
-export function Message({
+export const Message = ({
   hidden,
   small,
   type = 'message',
   children,
-}: Props) {
+}: Props) => {
   if (hidden) {
     return null;
   }
@@ -38,4 +38,4 @@ export function Message({
       {children}
     </div>
   );
-}
+};

frontends/web/src/components/password.jsx

@@ -20,15 +20,15 @@ import { alertUser } from './alert/Alert';
 import style from './password.module.css';
 import { withTranslation } from 'react-i18next';
 
-export function PasswordInput (props) {
+export const PasswordInput = (props) => {
   const { seePlaintext, ...rest } = props;
   return (
     <Input
       type={seePlaintext ? 'text' : 'password'}
       {...rest}
     />
   );
-}
+};
 
 class PasswordSingleInputClass extends Component {
   state = {
@@ -304,19 +304,19 @@ class PasswordRepeatInputClass extends Component {
 
 export const PasswordRepeatInput = withTranslation(null, { withRef: true })(PasswordRepeatInputClass);
 
-function MatchesPattern({ regex, value = '', text }) {
+const MatchesPattern = ({ regex, value = '', text }) => {
   if (!regex || !value.length || regex.test(value)) {
     return null;
   }
 
   return (
     <p style={{ color: 'var(--color-error)' }}>{text}</p>
   );
-}
+};
 
 const excludeKeys = /^(Shift|Alt|Backspace|CapsLock|Tab)$/i;
 
-function hasCaps({ key }) {
+const hasCaps = ({ key }) => {
   // will return null, when we cannot clearly detect if capsLock is active or not
   if (key.length > 1 || key.toUpperCase() === key.toLowerCase() || excludeKeys.test(key)) {
     return null;
@@ -325,4 +325,4 @@ function hasCaps({ key }) {
   // @ts-ignore (event can be undefined and shiftKey exists only on MouseEvent but not Event)
   // eslint-disable-next-line no-restricted-globals
   return key.toUpperCase() === key && key.toLowerCase() !== key && !event.shiftKey;
-}
+};