fix: lint errors

* temporarily suppress some lint issues
* but these will need to be addressed in a future
* PR

Signed-off-by: Rakib Ansary <[email protected]>

Author: rakibansary

.editorconfig

@@ -10,3 +10,4 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+quote_type = single

src/apps/platform/src/platform.routes.tsx

@@ -13,7 +13,7 @@ import { walletRoutes } from '~/apps/wallet'
 
 const Home: LazyLoadedComponent = lazyLoad(
     () => import('./routes/home'),
-    'HomePage'
+    'HomePage',
 )
 
 const homeRoutes: ReadonlyArray<PlatformRoute> = [

src/apps/wallet/src/home/tabs/payments/PaymentsTab.tsx

@@ -66,7 +66,7 @@ const PaymentsTab: FC<PaymentsTabProps> = (props: PaymentsTabProps) => {
     const [userPaymentProvider, setUserPaymentProvider] = useState<PaymentProvider | undefined>(undefined)
     const [setupRequired, setSetupRequired] = useState(false)
     const [isLoading, setIsLoading] = useState(false)
-    const [error, setError] = useState<string | undefined>(undefined)
+    const [, setError] = useState<string | undefined>(undefined)
     const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<string | undefined>(undefined)
     const [providerToSet, setProviderToSet] = useState<string | undefined>(undefined)
     const [transactionId, setTransactionId] = useState<string | undefined>(undefined)
@@ -263,7 +263,6 @@ const PaymentsTab: FC<PaymentsTabProps> = (props: PaymentsTabProps) => {
                     onClose={() => {
                         setProviderToSet(undefined)
                     }}
-                    onResendClick={() => {}}
                     onOtpVerified={() => {
                         window.open(registrationLink, '_blank')
 

src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.tsx

@@ -23,9 +23,9 @@ function renderPayoneer(): JSX.Element {
                 transfer option (where available) and a wire transfer option. Certain fees may apply.
             </p>
             <p>
-                You will be directed to Payoneer's website in a new tab to complete your the connection. Please make
-                sure your account is fully verified to ensure withdrawal success.{' '}
-                <strong>You can return here after finishing up on Payoneer's site.</strong>
+                You will be directed to Payoneer&apos;s website in a new tab to complete your the connection. Please
+                make sure your account is fully verified to ensure withdrawal success.
+                <strong>You can return here after finishing up on Payoneer&apos;s site.</strong>
             </p>
         </>
     )
@@ -37,9 +37,9 @@ function renderPaypal(): JSX.Element {
             <PayPalLogo />
             <p>You can elect to receive payments deposited directly to your PayPal account. Certain fees may apply.</p>
             <p>
-                You will be directed to PayPal's website in a new tab to complete your the connection. Please make sure
-                your account is fully verified to ensure withdrawal success. You can return here after finishing up on
-                PayPal's site.
+                You will be directed to PayPal&apos;s website in a new tab to complete your the connection. Please make
+                sure your account is fully verified to ensure withdrawal success. You can return here after finishing up
+                on PayPal&apos;s site.
             </p>
         </>
     )
@@ -62,7 +62,8 @@ const PaymentInfoModal: FC<PaymentInfoModalProps> = (props: PaymentInfoModalProp
         open
         size='body'
         title='CONNECT PAYMENT PROVIDER ACCOUNT'
-        classNames={{ modal: styles.infoModal }}>
+        classNames={{ modal: styles.infoModal }}
+    >
         <div className={styles.modalContent}>
             {props.selectedPaymentProvider === 'Payoneer' ? renderPayoneer() : renderPaypal()}
         </div>

src/apps/wallet/src/home/tabs/tax-forms/TaxFormsTab.tsx

@@ -68,7 +68,7 @@ const PaymentsTab: FC<TaxFormsTabProps> = (props: TaxFormsTabProps) => {
     const [setupRequired, setSetupRequired] = useState<boolean | undefined>(undefined)
     const [taxForm, setTaxForm] = useState<TaxForm | undefined>(undefined)
     const [isLoading, setIsLoading] = useState(false)
-    const [taxFormToSetup, setTaxFormToSetup] = useState<string | undefined>(undefined)
+    const [, setTaxFormToSetup] = useState<string | undefined>(undefined)
     const [taxFormSetupData, setTaxFormSetupData] = useState<SetupTaxFormResponse | undefined>(undefined)
 
     const fetchUserTaxForms = async () => {
@@ -97,21 +97,21 @@ const PaymentsTab: FC<TaxFormsTabProps> = (props: TaxFormsTabProps) => {
     function renderAllTaxForms(): JSX.Element {
         return (
             <div className={styles.stacked}>
-                {TAX_FORM_DETAILS.map((taxForm) => (
+                {TAX_FORM_DETAILS.map(form => (
                     <TaxFormCard
-                        key={taxForm.id}
-                        formTitle={taxForm.formTitle}
-                        formDescription={taxForm.formDescription}
-                        reasonTitle={taxForm.reasonTitle}
-                        reasonDescription={taxForm.reasonDescription}
-                        completionLabel={taxForm.completionLabel}
-                        instructionsLabel={taxForm.instructionsLabel}
-                        instructionsLink={taxForm.instructionsLink}
-                        additionalInfo={taxForm.additionalInfo}
-                        icon={taxForm.icon}
+                        key={form.id}
+                        formTitle={form.formTitle}
+                        formDescription={form.formDescription}
+                        reasonTitle={form.reasonTitle}
+                        reasonDescription={form.reasonDescription}
+                        completionLabel={form.completionLabel}
+                        instructionsLabel={form.instructionsLabel}
+                        instructionsLink={form.instructionsLink}
+                        additionalInfo={form.additionalInfo}
+                        icon={form.icon}
                         onSetupClick={async () => {
                             try {
-                                const setupTaxFormResponse = await setupTaxForm(`${props.profile.userId}`, taxForm.id)
+                                const setupTaxFormResponse = await setupTaxForm(`${props.profile.userId}`, form.id)
                                 setTaxFormSetupData(setupTaxFormResponse)
 
                                 fetchUserTaxForms()

src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx

@@ -1,11 +1,13 @@
-import React, { FC, useEffect, useMemo } from 'react'
+/* eslint-disable react/jsx-no-bind */
+import React, { FC, useEffect } from 'react'
 
-import { LoadingCircles, Table, TableColumn } from '~/libs/ui'
+import { LoadingCircles } from '~/libs/ui'
 import { UserProfile } from '~/libs/core'
+
 import { getPayments, processPayments } from '../../../lib/services/wallet'
 import { Winning, WinningDetail } from '../../../lib/models/WinningDetail'
-
 import PaymentsTable from '../../../lib/components/payments-table/PaymentTable'
+
 import styles from './Winnings.module.scss'
 
 interface ListViewProps {
@@ -36,6 +38,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const [winnings, setWinnings] = React.useState<ReadonlyArray<Winning>>([])
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
 
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const fetchWinnings = async () => {
         setIsLoading(true)
         try {
@@ -54,7 +57,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
         const tempWinnings: Winning[] = []
 
         payments.forEach((payment: WinningDetail) => {
-            payment.details.forEach((detail) => {
+            payment.details.forEach(detail => {
                 const winning: Winning = {
                     createDate: formatIOSDateString(payment.createdAt),
                     datePaid: '',
@@ -83,7 +86,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                 {!isLoading && (
                     <PaymentsTable
                         payments={winnings}
-                        onPayMeClick={async (paymentIds) => {
+                        onPayMeClick={async paymentIds => {
                             const ids = Object.keys(paymentIds)
                             await processPayments(ids)
 

src/apps/wallet/src/lib/components/info-row/InfoRow.tsx

@@ -8,16 +8,14 @@ interface InfoRowProps {
     action?: React.ReactNode
 }
 
-const InfoRow: React.FC<InfoRowProps> = ({ title, value, action }) => {
-    return (
-        <div className={styles['info-row']}>
-            <div className={styles.title}>{title}</div>
-            <div className={styles['value-action-container']}>
-                <div className={styles.value}>{value}</div>
-                {action && <div className={styles.action}>{action}</div>}
-            </div>
+const InfoRow: React.FC<InfoRowProps> = (props: InfoRowProps) => (
+    <div className={styles['info-row']}>
+        <div className={styles.title}>{props.title}</div>
+        <div className={styles['value-action-container']}>
+            <div className={styles.value}>{props.value}</div>
+            {props.action && <div className={styles.action}>{props.action}</div>}
         </div>
-    )
-}
+    </div>
+)
 
 export default InfoRow

src/apps/wallet/src/lib/components/otp-modal/OtpModal.tsx

@@ -23,7 +23,7 @@ const OtpModal = ({
     key: string
     transactionId: string
     onClose: () => void
-    onResendClick: () => void
+    onResendClick?: () => void
     onOtpVerified: (key: string) => void
 }) => {
     const [otp, setOtp] = React.useState('')
@@ -60,7 +60,11 @@ const OtpModal = ({
             <div className={styles['otp-modal']}>
                 {error && <p className={styles.error}>{error}</p>}
                 <p>
-                    For added security we’ve sent a 6-digit code to your <strong>***@gmail.com</strong> email. The code
+                    For added security we’ve sent a 6-digit code to your
+                    {' '}
+                    <strong>***@gmail.com</strong>
+                    {' '}
+                    email. The code
                     expires shortly, so please enter it soon.
                 </p>
                 <OTPInput

src/apps/wallet/src/lib/components/payment-provider-card/PaymentProviderCard.tsx

@@ -58,7 +58,8 @@ const PaymentProviderCard: React.FC<PaymentProviderProps> = (props: PaymentProvi
 
             <div
                 className={`${styles.detailContainer} ${isVerified ? styles.singleRow : styles.stackedRows}`}
-                style={detailContainerStyle}>
+                style={detailContainerStyle}
+            >
                 {props.details.map((detail: Detail) => (
                     <div key={detail.label} className={styles.detail}>
                         <div className={styles.iconLabelContainer}>

src/apps/wallet/src/lib/components/payments-table/PaymentTable.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useState } from 'react'
 
 import { Button } from '~/libs/ui'
@@ -14,34 +16,33 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
     const [selectedPayments, setSelectedPayments] = useState<{ [paymentId: string]: boolean }>({})
 
     const togglePaymentSelection = (paymentId: string) => {
-        setSelectedPayments((prevSelected) => ({
+        setSelectedPayments(prevSelected => ({
             ...prevSelected,
             [paymentId]: !prevSelected[paymentId],
         }))
     }
 
-    const isAllSelected = props.payments.length > 0 && props.payments.every((payment) => selectedPayments[payment.id])
+    const isAllSelected = props.payments.length > 0 && props.payments.every(payment => selectedPayments[payment.id])
 
     const toggleAllPayments = () => {
         if (isAllSelected) {
             setSelectedPayments({})
         } else {
             const newSelections: { [paymentId: string]: boolean } = {}
-            props.payments.forEach((payment) => {
+            props.payments.forEach(payment => {
                 newSelections[payment.id] = true
             })
             setSelectedPayments(newSelections)
         }
     }
 
-    const calculateTotal = () =>
-        props.payments.reduce((acc: number, payment: Winning) => {
-            if (selectedPayments[payment.id]) {
-                return acc + parseFloat(payment.netPayment.replace(/[^0-9.-]+/g, ''))
-            }
+    const calculateTotal = () => props.payments.reduce((acc: number, payment: Winning) => {
+        if (selectedPayments[payment.id]) {
+            return acc + parseFloat(payment.netPayment.replace(/[^0-9.-]+/g, ''))
+        }
 
-            return acc
-        }, 0)
+        return acc
+    }, 0)
 
     const total = calculateTotal()
 
@@ -70,7 +71,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                         </tr>
                     </thead>
                     <tbody>
-                        {props.payments.map((payment) => (
+                        {props.payments.map(payment => (
                             <tr key={payment.id} className={selectedPayments[payment.id] ? 'selected' : ''}>
                                 <td className='body-main'>{payment.description}</td>
                                 <td className='body-main-bold'>{payment.type}</td>
@@ -95,12 +96,16 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                 </table>
             </div>
             <div className={styles.paymentFooter}>
-                <div className={styles.total}>Total: ${total.toFixed(2)}</div>
+                <div className={styles.total}>
+                    Total: $
+                    {total.toFixed(2)}
+                </div>
                 <Button
                     primary
                     onClick={() => {
                         props.onPayMeClick(selectedPayments)
-                    }}>
+                    }}
+                >
                     PAY ME
                 </Button>
             </div>

src/apps/wallet/src/lib/components/tax-form-card/TaxFormCard.tsx

@@ -70,6 +70,7 @@ const TaxFormCard: React.FC<TaxFormCardProps> = (props: TaxFormCardProps) => (
             <Button
                 secondary
                 label={props.instructionsLabel}
+                // eslint-disable-next-line react/jsx-no-bind
                 onClick={() => {
                     window.location.href = props.instructionsLink
                 }}

src/apps/wallet/src/wallet.routes.tsx

@@ -4,7 +4,7 @@ import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
 const WalletApp: LazyLoadedComponent = lazyLoad(() => import('./WalletApp'))
 const WalletHomePage: LazyLoadedComponent = lazyLoad(
     () => import('./home'),
-    'WalletHomePage'
+    'WalletHomePage',
 )
 
 // prettier-ignore