refactor: Receive component from jsx to tsx

joinmarket-webui · Oct 5, 2023 · ebe9f9a · ebe9f9a
1 parent a4b7ac0
commit ebe9f9a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/src/components/BitcoinQR.tsx b/src/components/BitcoinQR.tsx
@@ -6,17 +6,17 @@ import { AmountSats, BitcoinAddress } from '../libs/JmWalletApi'
 
 interface BitcoinQRProps {
   address: BitcoinAddress
-  sats: AmountSats
-  errorCorrectionLevel: QRCode.QRCodeErrorCorrectionLevel
+  amount?: AmountSats
+  errorCorrectionLevel?: QRCode.QRCodeErrorCorrectionLevel
   width?: number
 }
 
-export const BitcoinQR = ({ address, sats, errorCorrectionLevel = 'H', width = 260 }: BitcoinQRProps) => {
+export const BitcoinQR = ({ address, amount, errorCorrectionLevel = 'H', width = 260 }: BitcoinQRProps) => {
   const [data, setData] = useState<string>()
   const [image, setImage] = useState<string>()
 
   useEffect(() => {
-    const btc = satsToBtc(String(sats)) || 0
+    const btc = amount ? satsToBtc(String(amount)) || 0 : 0
     const uri = `bitcoin:${address}${btc > 0 ? `?amount=${btc.toFixed(8)}` : ''}`
 
     QRCode.toDataURL(uri, {
@@ -31,7 +31,7 @@ export const BitcoinQR = ({ address, sats, errorCorrectionLevel = 'H', width = 2
         setImage(undefined)
         setData(uri)
       })
-  }, [address, sats, errorCorrectionLevel, width])
+  }, [address, amount, errorCorrectionLevel, width])
 
   return (
     <div>

diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
@@ -38,15 +38,25 @@ interface CopyableProps {
   onSuccess?: () => void
   onError?: (e: Error) => void
   className?: string
+  disabled?: boolean
 }
 
-function Copyable({ value, onSuccess, onError, className, children, ...props }: PropsWithChildren<CopyableProps>) {
+function Copyable({
+  value,
+  onSuccess,
+  onError,
+  className,
+  children,
+  disabled,
+  ...props
+}: PropsWithChildren<CopyableProps>) {
   const valueFallbackInputRef = useRef(null)
 
   return (
     <>
       <button
         {...props}
+        disabled={disabled}
         className={className}
         onClick={() => copyToClipboard(value, valueFallbackInputRef.current!).then(onSuccess, onError)}
       >
@@ -71,6 +81,7 @@ interface CopyButtonProps extends CopyableProps {
   text: ReactNode
   successText?: ReactNode
   successTextTimeout?: number
+  disabled?: boolean
 }
 
 export function CopyButton({
@@ -81,6 +92,7 @@ export function CopyButton({
   successText = text,
   successTextTimeout = 1_500,
   className,
+  disabled,
   ...props
 }: CopyButtonProps) {
   const [showValueCopiedConfirmation, setShowValueCopiedConfirmation] = useState(false)
@@ -100,6 +112,7 @@ export function CopyButton({
   return (
     <Copyable
       {...props}
+      disabled={disabled}
       className={`btn ${className || ''}`}
       value={value}
       onError={onError}

diff --git a/src/components/Receive.jsx → src/components/Receive.tsx b/src/components/Receive.jsx → src/components/Receive.tsx
@@ -1,10 +1,10 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, FormEvent } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import { useSettings } from '../context/SettingsContext'
 import { useServiceInfo } from '../context/ServiceInfoContext'
-import { useCurrentWalletInfo } from '../context/WalletContext'
+import { CurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
 import * as Api from '../libs/JmWalletApi'
 import { BitcoinQR } from './BitcoinQR'
 import PageTitle from './PageTitle'
@@ -15,20 +15,27 @@ import { SelectableJar, jarFillLevel } from './jars/Jar'
 import styles from './Receive.module.css'
 import Accordion from './Accordion'
 
-export default function Receive({ wallet }) {
+interface ReceiveProps {
+  wallet: CurrentWallet
+}
+
+export default function Receive({ wallet }: ReceiveProps) {
   const { t } = useTranslation()
   const location = useLocation()
   const settings = useSettings()
   const serviceInfo = useServiceInfo()
   const walletInfo = useCurrentWalletInfo()
-  const [validated, setValidated] = useState(false)
-  const [alert, setAlert] = useState()
+
+  const [alert, setAlert] = useState<SimpleAlert>()
   const [isLoading, setIsLoading] = useState(true)
+
   const [address, setAddress] = useState('')
   const [amount, setAmount] = useState('')
   const [selectedJarIndex, setSelectedJarIndex] = useState(parseInt(location.state?.account, 10) || 0)
+
   const [addressCount, setAddressCount] = useState(0)
-  const isFormEnabled = useMemo(() => serviceInfo && serviceInfo.rescanning !== true, [serviceInfo])
+  const isFormEnabled = useMemo(() => serviceInfo?.rescanning !== true, [serviceInfo])
+  const [validated, setValidated] = useState(false)
 
   const sortedAccountBalances = useMemo(() => {
     if (!walletInfo) return []
@@ -61,7 +68,7 @@ export default function Receive({ wallet }) {
     return () => abortCtrl.abort()
   }, [isFormEnabled, wallet, selectedJarIndex, addressCount, t])
 
-  const onSubmit = (e) => {
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     const form = e.currentTarget
@@ -81,7 +88,7 @@ export default function Receive({ wallet }) {
       <div className={`mb-4 ${styles.cardContainer}`}>
         <rb.Card className={`${settings.theme === 'light' ? 'pt-2' : 'pt-4'} pb-4`}>
           <div className={styles['qr-container']}>
-            {!isLoading && address && <BitcoinQR address={address} sats={amount} />}
+            {!isLoading && address && <BitcoinQR address={address} amount={parseInt(amount, 10) || 0} />}
             {(isLoading || !address) && (
               <rb.Placeholder as="div" animation="wave" className={styles['receive-placeholder-qr-container']}>
                 <rb.Placeholder className={styles['receive-placeholder-qr']} />
@@ -91,17 +98,18 @@ export default function Receive({ wallet }) {
           <rb.Card.Body
             className={`${settings.theme === 'light' ? 'pt-0' : 'pt-3'} pb-0 d-flex flex-column align-items-center`}
           >
-            {address && (
-              <rb.Card.Text className={`${styles['address']} text-center slashed-zeroes`}>{address}</rb.Card.Text>
-            )}
-            {!address && (
+            {!address ? (
               <rb.Placeholder as="p" animation="wave" className={styles['receive-placeholder-container']}>
                 <rb.Placeholder xs={12} sm={10} md={8} className={styles['receive-placeholder']} />
               </rb.Placeholder>
+            ) : (
+              <rb.Card.Text className={`${styles['address']} text-center slashed-zeroes`}>{address}</rb.Card.Text>
             )}
+
             <div className="d-flex justify-content-center gap-3 w-75">
               <CopyButton
                 className="btn btn-outline-dark flex-1"
+                disabled={!address || isLoading}
                 value={address}
                 text={
                   <>
@@ -115,7 +123,6 @@ export default function Receive({ wallet }) {
                     {t('receive.text_copy_address_confirmed')}
                   </>
                 }
-                disabled={!address || isLoading}
               />
               {checkIsWebShareAPISupported() && <ShareButton value={address} className="flex-1" />}
             </div>