Fix linting issues in wallet and payment components

merge-requests/3333/head
danidfra 2025-04-01 22:59:52 -03:00
rodzic d8665fa7a5
commit 1ea2ceb048
4 zmienionych plików z 81 dodań i 63 usunięć

Wyświetl plik

@ -47,7 +47,7 @@ const PocketWallet = () => {
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
{!expanded && <> {!expanded && <>
{ eyeClosed ? <Text className='text-sm !text-gray-500'></Text> : <Text> { eyeClosed ? <Text className='text-sm !text-gray-500'>{intl.formatMessage({ id: 'wallet.hidden.balance', defaultMessage: '••••••' })}</Text> : <Text>
{intl.formatMessage(messages.balance, { amount: wallet?.balance })} {intl.formatMessage(messages.balance, { amount: wallet?.balance })}
</Text>} </Text>}

Wyświetl plik

@ -93,22 +93,30 @@ const WalletMints = () => {
return ( return (
<Column label={intl.formatMessage(messages.title)} > <Column label={intl.formatMessage(messages.title)} >
{isLoading ? ( {(() => {
<Stack space={2} className="flex h-32 items-center justify-center"> if (isLoading) {
return (
<Stack space={2} className='flex h-32 items-center justify-center'>
<Spinner /> <Spinner />
</Stack> </Stack>
) : hasError ? ( );
<Stack space={2} className="flex h-32 items-center justify-center text-center"> } else if (hasError) {
<Text theme="danger">{intl.formatMessage(messages.loadingError)}</Text> return (
<Stack space={2} className='flex h-32 items-center justify-center text-center'>
<Text theme='danger'>{intl.formatMessage(messages.loadingError)}</Text>
</Stack> </Stack>
) : ( );
} else {
return (
<Stack space={2}> <Stack space={2}>
<MintEditor items={mints} setItems={setMints} /> <MintEditor items={mints} setItems={setMints} />
<Button className='w-full' theme='primary' onClick={handleClick}> <Button className='w-full' theme='primary' onClick={handleClick}>
{intl.formatMessage(messages.send)} {intl.formatMessage(messages.send)}
</Button> </Button>
</Stack> </Stack>
)} );
}
})()}
</Column> </Column>
); );
}; };

Wyświetl plik

@ -90,22 +90,30 @@ const WalletRelays = () => {
return ( return (
<Column label={intl.formatMessage(messages.title)} > <Column label={intl.formatMessage(messages.title)} >
{isLoading ? ( {(() => {
<Stack space={2} className="flex h-32 items-center justify-center"> if (isLoading) {
return (
<Stack space={2} className='flex h-32 items-center justify-center'>
<Spinner /> <Spinner />
</Stack> </Stack>
) : hasError ? ( );
<Stack space={2} className="flex h-32 items-center justify-center text-center"> } else if (hasError) {
<Text theme="danger">{intl.formatMessage(messages.loadingError)}</Text> return (
<Stack space={2} className='flex h-32 items-center justify-center text-center'>
<Text theme='danger'>{intl.formatMessage(messages.loadingError)}</Text>
</Stack> </Stack>
) : ( );
} else {
return (
<Stack space={2}> <Stack space={2}>
<RelayEditor items={relays} setItems={setRelays} /> <RelayEditor items={relays} setItems={setRelays} />
<Button className='w-full' theme='primary' onClick={handleClick}> <Button className='w-full' theme='primary' onClick={handleClick}>
{intl.formatMessage(messages.send)} {intl.formatMessage(messages.send)}
</Button> </Button>
</Stack> </Stack>
)} );
}
})()}
</Column> </Column>
); );
}; };

Wyświetl plik

@ -16,6 +16,7 @@ import pileCoin from 'soapbox/assets/icons/pile-coin.png';
import DisplayNameInline from 'soapbox/components/display-name-inline.tsx'; import DisplayNameInline from 'soapbox/components/display-name-inline.tsx';
import Avatar from 'soapbox/components/ui/avatar.tsx'; import Avatar from 'soapbox/components/ui/avatar.tsx';
import Button from 'soapbox/components/ui/button.tsx'; import Button from 'soapbox/components/ui/button.tsx';
import HStack from 'soapbox/components/ui/hstack.tsx';
import IconButton from 'soapbox/components/ui/icon-button.tsx'; import IconButton from 'soapbox/components/ui/icon-button.tsx';
import Input from 'soapbox/components/ui/input.tsx'; import Input from 'soapbox/components/ui/input.tsx';
import Stack from 'soapbox/components/ui/stack.tsx'; import Stack from 'soapbox/components/ui/stack.tsx';
@ -29,7 +30,6 @@ import { emojifyText } from 'soapbox/utils/emojify.tsx';
import PaymentButton from './zap-button/payment-button.tsx'; import PaymentButton from './zap-button/payment-button.tsx';
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities.ts'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
import HStack from 'soapbox/components/ui/hstack.tsx';
const ZAP_PRESETS = [ const ZAP_PRESETS = [
{ buttonAmount: 50, icon: coinIcon }, { buttonAmount: 50, icon: coinIcon },
@ -118,31 +118,31 @@ const PayRequestForm = ({ account, status, onClose }: IPayRequestForm) => {
return ( return (
<Stack space={4} element='form' onSubmit={handleSubmit} justifyContent='center' alignItems='center' className='relative'> <Stack space={4} element='form' onSubmit={handleSubmit} justifyContent='center' alignItems='center' className='relative'>
<Stack space={2} justifyContent='center' alignItems='center'> <Stack space={2} justifyContent='center' alignItems='center'>
<HStack className='absolute w-full right-[-1%] top-[-2%]'> <HStack className='absolute right-[-1%] top-[-2%] w-full'>
<div className="absolute left-[-1%] top-[-2%] flex items-center gap-2"> <div className='absolute left-[-1%] top-[-2%] flex items-center gap-2'>
<button <button
type="button" type='button'
className={`flex h-8 w-8 items-center justify-center rounded-full transition ${ className={`flex size-8 items-center justify-center rounded-full transition ${
paymentMethod === 'lightning' paymentMethod === 'lightning'
? 'bg-primary-600 text-white' ? 'bg-primary-600 text-white'
: 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800' : 'text-gray-400 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800'
}`} }`}
onClick={() => changeMethod('lightning')} onClick={() => changeMethod('lightning')}
title="Lightning" title={intl.formatMessage({ id: 'payment_method.lightning', defaultMessage: 'Lightning' })}
> >
<span className="text-lg"></span> <span role="img" aria-label={intl.formatMessage({ id: 'emoji.lightning', defaultMessage: 'Lightning' })} className='text-lg'></span>
</button> </button>
<button <button
type="button" type='button'
className={`flex h-8 w-8 items-center justify-center rounded-full transition ${ className={`flex size-8 items-center justify-center rounded-full transition ${
paymentMethod === 'cashu' paymentMethod === 'cashu'
? 'bg-primary-600 text-white' ? 'bg-primary-600 text-white'
: 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800' : 'text-gray-400 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800'
}`} }`}
onClick={() => changeMethod('cashu')} onClick={() => changeMethod('cashu')}
title="Cashu" title={intl.formatMessage({ id: 'payment_method.cashu', defaultMessage: 'Cashu' })}
> >
<span className="text-lg">💰</span> <span role="img" aria-label={intl.formatMessage({ id: 'emoji.cashu', defaultMessage: 'Cashu' })} className='text-lg'>💰</span>
</button> </button>
</div> </div>
@ -159,12 +159,12 @@ const PayRequestForm = ({ account, status, onClose }: IPayRequestForm) => {
defaultMessage='Send sats via {method} to {target}' defaultMessage='Send sats via {method} to {target}'
values={{ values={{
target: emojifyText(account.display_name, account.emojis), target: emojifyText(account.display_name, account.emojis),
method: paymentMethod method: paymentMethod,
}} }}
/> />
</Text> </Text>
{zapArrays.length > 0 && isCashu && ( {zapArrays.length > 0 && isCashu && (
<Text size="xs" theme="muted" className="text-center"> <Text size='xs' theme='muted' className='text-center'>
<FormattedMessage <FormattedMessage
id='payment_method.cashu.split_disabled' id='payment_method.cashu.split_disabled'
defaultMessage='Switch to ⚡ for splits' defaultMessage='Switch to ⚡ for splits'
@ -194,7 +194,9 @@ const PayRequestForm = ({ account, status, onClose }: IPayRequestForm) => {
className='max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold shadow-none !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl' className='max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold shadow-none !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
/> />
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>sats</p>} {hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>
{intl.formatMessage({ id: 'payment_method.unit', defaultMessage: 'sats' })}
</p>}
</div> </div>
{hasZapSplit && ( {hasZapSplit && (
@ -215,7 +217,7 @@ const PayRequestForm = ({ account, status, onClose }: IPayRequestForm) => {
{hasZapSplit ? <Stack space={2}> {hasZapSplit ? <Stack space={2}>
<Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={'Zap sats'} disabled={amount < 1 ? true : false} /> <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={intl.formatMessage({ id: 'payment_method.button.zap_sats', defaultMessage: 'Zap sats' })} disabled={amount < 1 ? true : false} />
<div className='flex items-center justify-center gap-2 sm:gap-4'> <div className='flex items-center justify-center gap-2 sm:gap-4'>
<span className='text-[10px] sm:text-xs'> <span className='text-[10px] sm:text-xs'>