refactor: components from jsx to tsx (#509)

* refactor: App.jsx to App.tsx

* refactor(test): setupTests.js to setupTests.ts

* refactor(test): App.test.jsx to App.test.tsx

* refactor(ts): ActivityIndicators.jsx to .tsx

* refactor(ts): Alert.jsx to .tsx

* refactor: remove unneeded global declaration

* refactor(ts): JarSelectorModal.jsx to .tsx

* fix: prefer direct usage of classnames instead of bind

src/components/ActivityIndicators.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import Sprite from './Sprite'
+
+interface ActivityIndicatorProps {
+  isOn: boolean
+}
+
+function ActivityIndicator({ isOn, children }: PropsWithChildren<ActivityIndicatorProps>) {
+  return (
+    <span className={`activity-indicator ${isOn ? 'activity-indicator-on' : 'activity-indicator-off'}`}>
+      {children}
+    </span>
+  )
+}
+
+interface JoiningIndicatorProps {
+  isOn: boolean
+  size: number
+  className?: string
+}
+
+export function JoiningIndicator({ isOn, size = 30, className = '', ...props }: JoiningIndicatorProps) {
+  return (
+    <span className="joining-indicator">
+      <ActivityIndicator isOn={isOn}>
+        {isOn && <Sprite symbol="joining" width={size} height={size} className={`p-1 ${className}`} {...props} />}
+      </ActivityIndicator>
+    </span>
+  )
+}
+
+interface TabActivityIndicatorProps {
+  isOn: boolean
+  className?: string
+}
+
+export function TabActivityIndicator({ isOn, className }: TabActivityIndicatorProps) {
+  return (
+    <span className={classNames('earn-indicator', className)}>
+      <ActivityIndicator isOn={isOn} />
+    </span>
+  )
+}

src/components/Alert.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { Alert as BsAlert, AlertProps as BsAlertProps } from 'react-bootstrap'
+
+export type SimpleMessageAlertProps = BsAlertProps & { message: string }
+
+export default function Alert({ message, onClose, ...props }: SimpleMessageAlertProps) {
+  const [show, setShow] = useState(true)
+
+  return (
+    <BsAlert
+      className="my-3"
+      onClose={(a: any, b: any) => {
+        setShow(false)
+        onClose && onClose(a, b)
+      }}
+      show={show}
+      {...props}
+    >
+      {message}
+    </BsAlert>
+  )
+}

src/components/App.test.jsx → src/components/App.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, screen } from '../testUtils'
 import { act } from 'react-dom/test-utils'
 import user from '@testing-library/user-event'
@@ -14,7 +13,7 @@ jest.mock('../libs/JmWalletApi', () => ({
 describe('<App />', () => {
   beforeEach(() => {
     const neverResolvingPromise = new Promise(() => {})
-    apiMock.getSession.mockResolvedValue(neverResolvingPromise)
+    ;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
   })
 
   it('should display Onboarding screen initially', () => {

src/components/App.jsx → src/components/App.tsx

@@ -1,24 +1,24 @@
-import React, { useCallback } from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
+import { useCallback } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import Wallets from './Wallets'
+import { Navigate, Route, Routes } from 'react-router-dom'
+import { routes } from '../constants/routes'
+import { useSessionConnectionError } from '../context/ServiceInfoContext'
+import { useSettings } from '../context/SettingsContext'
+import { useCurrentWallet, useSetCurrentWallet } from '../context/WalletContext'
+import { clearSession, setSession } from '../session'
 import CreateWallet from './CreateWallet'
-import Jam from './Jam'
-import Send from './Send'
 import Earn from './Earn'
-import Receive from './Receive'
-import MainWalletView from './MainWalletView'
-import Settings from './Settings'
+import Footer from './Footer'
+import Jam from './Jam'
 import Layout from './Layout'
+import MainWalletView from './MainWalletView'
 import Navbar from './Navbar'
-import Footer from './Footer'
 import Onboarding from './Onboarding'
-import { useSettings } from '../context/SettingsContext'
-import { useCurrentWallet, useSetCurrentWallet } from '../context/WalletContext'
-import { useSessionConnectionError } from '../context/ServiceInfoContext'
-import { setSession, clearSession } from '../session'
-import { routes } from '../constants/routes'
+import Receive from './Receive'
+import Send from './Send'
+import Settings from './Settings'
+import Wallets from './Wallets'
 
 export default function App() {
   const { t } = useTranslation()

src/components/JarSelectorModal.jsx → src/components/JarSelectorModal.tsx

@@ -1,22 +1,34 @@
-import React, { useState, useMemo } from 'react'
+import { useState, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import styles from './JarSelectorModal.module.css'
+import { JarIndex, calculateFillLevel, SelectableJar } from './jars/Jar'
+import { AccountBalances } from '../context/BalanceSummary'
+import { BalanceString } from '../context/WalletContext'
 import Sprite from './Sprite'
-import { calculateFillLevel, SelectableJar } from './jars/Jar'
+import styles from './JarSelectorModal.module.css'
+
+interface JarSelectorModalProps {
+  isShown: boolean
+  title: string
+  accountBalances: AccountBalances
+  totalBalance: BalanceString
+  disabledJar?: JarIndex
+  onCancel: () => void
+  onConfirm: (jarIndex: JarIndex) => void
+}
 
 export default function JarSelectorModal({
   isShown,
   title,
   accountBalances,
   totalBalance,
-  disabledJar = undefined,
+  disabledJar,
   onCancel,
   onConfirm,
-}) {
+}: JarSelectorModalProps) {
   const { t } = useTranslation()
 
-  const [selectedJar, setSelectedJar] = useState(null)
+  const [selectedJar, setSelectedJar] = useState<JarIndex | null>(null)
 
   const sortedAccountBalances = useMemo(() => {
     if (!accountBalances) return []
@@ -29,9 +41,10 @@ export default function JarSelectorModal({
   }
 
   const confirm = () => {
-    const jar = selectedJar
+    if (selectedJar === null) return
+
+    onConfirm(selectedJar)
     setSelectedJar(null)
-    onConfirm(jar)
   }
 
   return (

src/components/Layout.jsx → src/components/Layout.tsx

@@ -1,8 +1,14 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import * as rb from 'react-bootstrap'
 import { Outlet } from 'react-router-dom'
 
-const Col = ({ variant, children }) => {
+type LayoutVariant = 'wide' | ''
+
+interface ColProps {
+  variant?: LayoutVariant
+}
+
+const Col = ({ variant, children }: PropsWithChildren<ColProps>) => {
   if (variant === 'wide') {
     return <rb.Col>{children}</rb.Col>
   }
@@ -14,7 +20,11 @@ const Col = ({ variant, children }) => {
   )
 }
 
-const Layout = ({ variant }) => {
+interface LayoutProps {
+  variant?: LayoutVariant
+}
+
+const Layout = ({ variant }: LayoutProps) => {
   return (
     <rb.Row className="justify-content-center">
       <Col variant={variant}>

src/components/Send.jsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
-import classnames from 'classnames/bind'
+import classNames from 'classnames'
 import PageTitle from './PageTitle'
 import ToggleSwitch from './ToggleSwitch'
 import Sprite from './Sprite'
@@ -97,7 +97,7 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
               <rb.Button
                 key={number}
                 variant={settings.theme === 'light' ? 'white' : 'dark'}
-                className={classnames(
+                className={classNames(
                   styles['collaborators-selector-button'],
                   'p-2',
                   'border',
@@ -128,7 +128,7 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
             isInvalid={!isValidNumCollaborators(numCollaborators, minNumCollaborators)}
             placeholder={t('send.input_num_collaborators_placeholder')}
             defaultValue=""
-            className={classnames(
+            className={classNames(
               styles['collaborators-selector-input'],
               'p-2',
               'border',
@@ -796,7 +796,7 @@ export default function Send() {
                   <rb.Form.Control
                     name="destination"
                     placeholder={t('send.placeholder_recipient')}
-                    className={classnames('slashed-zeroes', styles['input'], {
+                    className={classNames('slashed-zeroes', styles['input'], {
                       [styles['jar-input']]: destinationJar !== null,
                     })}
                     value={destinationJar !== null ? `${jarName(destinationJar)} (${destination})` : destination || ''}

src/components/Wallets.jsx

@@ -1,13 +1,13 @@
-import React, { useMemo, useEffect, useCallback, useState } from 'react'
+import { useMemo, useEffect, useCallback, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
-import classnames from 'classnames/bind'
+import classNames from 'classnames'
 import Sprite from './Sprite'
 import Alert from './Alert'
 import Wallet from './Wallet'
 import PageTitle from './PageTitle'
 import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
-import { useTranslation } from 'react-i18next'
 import { walletDisplayName } from '../utils'
 import * as Api from '../libs/JmWalletApi'
 import { routes } from '../constants/routes'
@@ -233,7 +233,7 @@ export default function Wallets({ currentWallet, startWallet, stopWallet }) {
         <div className="d-flex justify-content-center">
           <Link
             to={routes.createWallet}
-            className={classnames('btn', 'mt-4', {
+            className={classNames('btn', 'mt-4', {
               'btn-lg': walletList?.length === 0,
               'btn-dark': walletList?.length === 0,
               'btn-outline-dark': !walletList || walletList.length > 0,

src/components/fb/CreateFidelityBond.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import * as Api from '../../libs/JmWalletApi'
 import { Trans, useTranslation } from 'react-i18next'
@@ -509,7 +509,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBal
 
   return (
     <div className={styles.container}>
-      {alert && <Alert {...alert} className="mt-0" onDismissed={() => setAlert(null)} />}
+      {alert && <Alert {...alert} className="mt-0" onClose={() => setAlert(null)} />}
       {lockDate && (
         <ConfirmModal
           isShown={showConfirmInputsModal}