Merge branch 'frontend-prefer-arrow-functions'

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;
-}
+};