frontend: changed return types & children types for FC

As a part of our refactoring effort in the FE to increase
our code's readability and consistency as well as following
the best practices and conventions, we'd like to change several
things mentioned below for our functional components (FC):

1. If a component optionally accepts children we keep using
`FunctionComponent` as we do already (or start to use one
when it isn't used yet).

2. If a component does not accept any children we remove
`FunctionComponent` and `PropsWithChildren`.

3. Remove return type `JSX.Element` or `JSX.Element | null.`

4. Children's type is mostly `ReactNode`. When component must
only have exactly 1 child, the type is `ReactChild`.

Author: shonsirsha

frontends/web/src/components/anchor/anchor.tsx

@@ -14,19 +14,20 @@
  * limitations under the License.
  */
 
-import { FunctionComponent, SyntheticEvent } from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 import { route } from '../../utils/route';
 import { hide } from '../guide/guide';
 import { debug } from '../../utils/env';
 import { apiPost } from '../../utils/request';
 import style from './anchor.module.css';
 
-interface Props {
+type TProps = {
     href: string;
+    children: ReactNode;
     [property: string]: any;
 }
 
-const A: FunctionComponent<Props> = ({ href, icon, children, ...props }) => {
+const A = ({ href, icon, children, ...props }: TProps) => {
   return (
     <span className={style.link} onClick={(e: SyntheticEvent) => {
       e.preventDefault();

frontends/web/src/components/aopp/aopp.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Component, PropsWithChildren } from 'react';
+import React, { Component, ReactNode } from 'react';
 import * as accountAPI from '../../api/account';
 import * as aoppAPI from '../../api/aopp';
 import { subscribe } from '../../decorators/subscribe';
@@ -30,7 +30,11 @@ import { VerifyAddress } from './verifyaddress';
 import { Vasp } from './vasp';
 import styles from './aopp.module.css';
 
-const Banner = ({ children }: PropsWithChildren<{}>) => (
+type TProps = {
+  children: ReactNode;
+}
+
+const Banner = ({ children }: TProps) => (
   <div className={styles.banner}>{children}</div>
 );
 

frontends/web/src/components/aopp/vasp.tsx

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
 import styles from './vasp.module.css';
 import AOPPGroupLogo from '../../assets/exchanges/logos/aoppgroup.svg';
 import BitcoinSuisseLogo from '../../assets/exchanges/logos/bitcoin_suisse.png';
 import BittrLogo from '../../assets/exchanges/logos/bittr.png';
 import BityLogo from '../../assets/exchanges/logos/bity.png';
 import PocketBitcoinLogo from '../../assets/exchanges/logos/pocketbitcoin.svg';
 
-interface VASPProps {
+type TVASPProps = {
     fallback?: JSX.Element;
     hostname: string;
     prominent?: boolean;
@@ -47,12 +46,12 @@ const VASPHostnameMap: TVASPMap = {
   'testing.aopp.group': 'AOPP.group',
 };
 
-export function Vasp({
+export const Vasp = ({
   fallback,
   hostname,
   prominent,
   withLogoText,
-}: PropsWithChildren<VASPProps>) {
+}: TVASPProps) => {
   const hasLogo = hostname in VASPLogoMap;
   if (!hasLogo) {
     return fallback || (<p className={styles.hostname}>{hostname}</p>);
@@ -67,4 +66,4 @@ export function Vasp({
       {withLogoText ? (<p>{withLogoText}</p>) : null}
     </div>
   );
-}
+};

frontends/web/src/components/appupgraderequired.tsx

@@ -15,13 +15,10 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
 import { translate, TranslateProps } from '../decorators/translate';
 import A from './anchor/anchor';
 
-type Props = TranslateProps;
-
-function AppUpgradeRequired({ t }: PropsWithChildren<Props>): JSX.Element {
+function AppUpgradeRequired({ t }: TranslateProps) {
   return (
     <div className="contentWithGuide">
       <div className="container">

frontends/web/src/components/badge/badge.tsx

@@ -1,12 +1,13 @@
-import { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
 import style from './badge.module.css';
 
-interface Props {
-    type: string;
-    className?: string;
+type TProps = {
+  type: string;
+  className?: string;
+  children: ReactNode;
 }
 
-export const Badge: FunctionComponent<Props> = ({ type, className, children }) => {
+export const Badge = ({ type, className, children }: TProps) => {
   return (
     <span className={[style.container, style[type], className].join(' ')}>
       {children}

frontends/web/src/components/balance/balance.tsx

@@ -15,22 +15,21 @@
  * limitations under the License.
  */
 
-import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IBalance } from '../../api/account';
 import { FiatConversion } from '../../components/rates/rates';
 import { bitcoinRemoveTrailingZeroes } from '../../utils/trailing-zeroes';
 import style from './balance.module.css';
 
-interface Props {
+type TProps = {
     balance?: IBalance;
     noRotateFiat?: boolean;
 }
 
-export const Balance: FunctionComponent<Props> = ({
+export const Balance = ({
   balance,
   noRotateFiat,
-}) => {
+}: TProps) => {
   const { t } = useTranslation();
   if (!balance) {
     return (

frontends/web/src/components/banner/banner.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
 import { subscribe } from '../../decorators/subscribe';
 import { translate, TranslateProps } from '../../decorators/translate';
 import A from '../anchor/anchor';
 import Status from '../status/status';
 
-interface BannerInfo {
+type TBannerInfo = {
     id: string;
     message: { [key: string]: string; };
     link?: {
@@ -29,18 +28,18 @@ interface BannerInfo {
     };
 }
 
-interface LoadedProps {
-    banner: BannerInfo | null;
+type TLoadedProps = {
+    banner: TBannerInfo | null;
 }
 
-interface BannerProps {
+type TBannerProps = {
     // eslint-disable-next-line react/no-unused-prop-types
     msgKey: 'bitbox01';
 }
 
-type Props = LoadedProps & BannerProps & TranslateProps;
+type TProps = TLoadedProps & TBannerProps & TranslateProps;
 
-function Banner({ banner, i18n, t }: PropsWithChildren<Props>): JSX.Element | null {
+function Banner({ banner, i18n, t }: TProps) {
   if (!i18n.options.fallbackLng) {
     return null;
   }
@@ -57,7 +56,7 @@ function Banner({ banner, i18n, t }: PropsWithChildren<Props>): JSX.Element | nu
 }
 
 const HOC = translate()(
-  subscribe<LoadedProps, BannerProps & TranslateProps>(
+  subscribe<TLoadedProps, TBannerProps & TranslateProps>(
     ({ msgKey }) => ({ banner: 'banners/' + msgKey }),
     true,
     false,

frontends/web/src/components/centeredcontent/centeredcontent.tsx

@@ -14,10 +14,14 @@
  * limitations under the License.
  */
 
-import { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
 import style from './style.module.css';
 
-export const CenteredContent: FunctionComponent = ({ children }) => {
+type TProps = {
+  children: ReactNode;
+}
+
+export const CenteredContent = ({ children }: TProps) => {
   return (
     <div className="contentWithGuide">
       <div className={style.container}>

frontends/web/src/components/confirm/Confirm.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { FunctionComponent, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SimpleMarkup } from '../../utils/markup';
 import { Dialog, DialogButtons } from '../dialog/dialog';
@@ -38,7 +38,7 @@ interface State {
  * Confirm alert that activates on confirmation module export call,
  * this should be mounted only once in the App
  */
-export const Confirm: FunctionComponent = () => {
+export const Confirm = () => {
   const [state, setState] = useState<State>({ active: false });
   const { t } = useTranslation();
   const callback = useRef<TCallback>(() => {});

frontends/web/src/components/devices/bitbox02bootloader/toggleshowfirmwarehash.tsx

@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, FunctionComponent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { load } from '../../../decorators/load';
 import { apiPost } from '../../../utils/request';
 import { Toggle } from '../../toggle/toggle';
 
-interface ToggleProps {
+type TToggleProps = {
     deviceID: string;
 }
 
-interface LoadedProps {
+type TLoadedProps = {
     enabled: boolean;
 }
 
-type Props = ToggleProps & LoadedProps;
+type TProps = TToggleProps & TLoadedProps;
 
-const ToggleFWHash: FunctionComponent<Props> = ({ enabled, deviceID }) => {
+const ToggleFWHash = ({ enabled, deviceID }: TProps) => {
   const { t } = useTranslation();
   const [enabledState, setEnabledState] = useState<boolean>(enabled);
 
@@ -57,5 +57,5 @@ const ToggleFWHash: FunctionComponent<Props> = ({ enabled, deviceID }) => {
   );
 };
 
-const HOC = load<LoadedProps, ToggleProps>(({ deviceID }) => ({ enabled: 'devices/bitbox02-bootloader/' + deviceID + '/show-firmware-hash-enabled' }))(ToggleFWHash);
+const HOC = load<TLoadedProps, TToggleProps>(({ deviceID }) => ({ enabled: 'devices/bitbox02-bootloader/' + deviceID + '/show-firmware-hash-enabled' }))(ToggleFWHash);
 export { HOC as ToggleShowFirmwareHash };