Merge branch 'frontend-refactor-FC-children-and-types'

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