From db35a4932e1034e28c2f54c97d88b5c7bdccffd0 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Wed, 18 Oct 2023 10:12:38 +0200 Subject: [PATCH] fix: code spanning past viewport width --- src/app/components/fees-row/fees-row.tsx | 54 +++++++++++-------- .../contract-deploy-details.tsx | 10 ++-- ...e-title.ts => use-stacks-tx-page-title.ts} | 2 +- .../stacks-transaction-request/page-top.tsx | 4 +- .../stacks-transaction-signer.tsx | 3 -- .../submit-action.tsx | 20 +++---- .../query/stacks/contract/contract.query.ts | 2 +- 7 files changed, 48 insertions(+), 47 deletions(-) rename src/app/features/stacks-transaction-request/hooks/{use-page-title.ts => use-stacks-tx-page-title.ts} (94%) diff --git a/src/app/components/fees-row/fees-row.tsx b/src/app/components/fees-row/fees-row.tsx index 808e7c9be9f..ac600510b0c 100644 --- a/src/app/components/fees-row/fees-row.tsx +++ b/src/app/components/fees-row/fees-row.tsx @@ -26,8 +26,16 @@ interface FeeRowProps extends StackProps { defaultFeeValue?: number; disableFeeSelection?: boolean; } -export function FeesRow(props: FeeRowProps): React.JSX.Element { - const { fees, isSponsored, allowCustom = true, ...rest } = props; +export function FeesRow(props: FeeRowProps) { + const { + fees, + isSponsored, + allowCustom = true, + defaultFeeValue, + disableFeeSelection, + ...rest + } = props; + const [feeField, _, feeHelper] = useField('fee'); const [feeCurrencyField] = useField('feeCurrency'); const [feeTypeField, __, feeTypeHelper] = useField('feeType'); @@ -49,27 +57,26 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element { }, [convertCryptoCurrencyToUsd, feeCurrencySymbol, feeField.value]); useEffect(() => { - if (props.defaultFeeValue) { - feeHelper.setValue( - convertAmountToBaseUnit( - new BigNumber(Number(props.defaultFeeValue)), - STX_DECIMALS - ).toString() + if (defaultFeeValue) { + void feeHelper.setValue( + convertAmountToBaseUnit(new BigNumber(Number(defaultFeeValue)), STX_DECIMALS).toString() ); - feeTypeHelper.setValue(FeeTypes[FeeTypes.Custom]); + void feeTypeHelper.setValue(FeeTypes[FeeTypes.Custom]); } - }, [feeHelper, props.defaultFeeValue, feeTypeHelper]); + }, [feeHelper, defaultFeeValue, feeTypeHelper]); useEffect(() => { - if (!props.defaultFeeValue && hasFeeEstimates && !feeField.value && !isCustom) { - feeHelper.setValue(convertAmountToBaseUnit(fees.estimates[FeeTypes.Middle].fee).toString()); - feeTypeHelper.setValue(FeeTypes[FeeTypes.Middle]); + if (!defaultFeeValue && hasFeeEstimates && !feeField.value && !isCustom) { + void feeHelper.setValue( + convertAmountToBaseUnit(fees.estimates[FeeTypes.Middle].fee).toString() + ); + void feeTypeHelper.setValue(FeeTypes[FeeTypes.Middle]); } if (isSponsored) { - feeHelper.setValue(0); + void feeHelper.setValue(0); } }, [ - props.defaultFeeValue, + defaultFeeValue, feeField.value, feeHelper, feeTypeHelper, @@ -81,19 +88,20 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element { const handleSelectFeeEstimateOrCustomField = useCallback( (index: number) => { - feeTypeHelper.setValue(FeeTypes[index]); + void feeTypeHelper.setValue(FeeTypes[index]); if (index === FeeTypes.Custom) - feeHelper.setValue( - props.defaultFeeValue - ? convertAmountToBaseUnit(new BigNumber(Number(props.defaultFeeValue)), STX_DECIMALS) + void feeHelper.setValue( + defaultFeeValue + ? convertAmountToBaseUnit(new BigNumber(Number(defaultFeeValue)), STX_DECIMALS) : '' ); else - fees && feeHelper.setValue(convertAmountToBaseUnit(fees.estimates[index].fee).toString()); + fees && + void feeHelper.setValue(convertAmountToBaseUnit(fees.estimates[index].fee).toString()); setFieldWarning(''); setIsSelectVisible(false); }, - [feeTypeHelper, feeHelper, fees, props.defaultFeeValue] + [feeTypeHelper, feeHelper, fees, defaultFeeValue] ); if (!hasFeeEstimates) return ; @@ -104,7 +112,7 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element { feeField={ isCustom ? ( setFieldWarning(value)} @@ -123,7 +131,7 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element { isSponsored={isSponsored} selectInput={ @@ -47,7 +47,7 @@ interface TabButtonProps extends BoxProps { isActive: boolean; } -function TabButton(props: TabButtonProps): React.JSX.Element { +function TabButton(props: TabButtonProps) { const { isActive, ...rest } = props; return ( @@ -64,7 +64,7 @@ function TabButton(props: TabButtonProps): React.JSX.Element { ); } -export function ContractDeployDetails(): React.JSX.Element | null { +export function ContractDeployDetails() { const transactionRequest = useTransactionRequestState(); const currentAccount = useCurrentStacksAccount(); const currentAccountStxAddress = useCurrentAccountStxAddressState(); diff --git a/src/app/features/stacks-transaction-request/hooks/use-page-title.ts b/src/app/features/stacks-transaction-request/hooks/use-stacks-tx-page-title.ts similarity index 94% rename from src/app/features/stacks-transaction-request/hooks/use-page-title.ts rename to src/app/features/stacks-transaction-request/hooks/use-stacks-tx-page-title.ts index 9477b8ba182..48baac02649 100644 --- a/src/app/features/stacks-transaction-request/hooks/use-page-title.ts +++ b/src/app/features/stacks-transaction-request/hooks/use-stacks-tx-page-title.ts @@ -4,7 +4,7 @@ import { TransactionTypes } from '@stacks/connect'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; -export function usePageTitle(): string { +export function useStacksTxPageTitle() { const transactionRequest = useTransactionRequestState(); const txType = transactionRequest?.txType; return useMemo(() => { diff --git a/src/app/features/stacks-transaction-request/page-top.tsx b/src/app/features/stacks-transaction-request/page-top.tsx index d98d45258bf..047a7095336 100644 --- a/src/app/features/stacks-transaction-request/page-top.tsx +++ b/src/app/features/stacks-transaction-request/page-top.tsx @@ -8,14 +8,14 @@ import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-s import { addPortSuffix, getUrlHostname } from '@app/common/utils'; import { Favicon } from '@app/components/favicon'; import { Flag } from '@app/components/layout/flag'; -import { usePageTitle } from '@app/features/stacks-transaction-request/hooks/use-page-title'; +import { useStacksTxPageTitle } from '@app/features/stacks-transaction-request/hooks/use-stacks-tx-page-title'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; function PageTopBase() { const transactionRequest = useTransactionRequestState(); const { origin } = useDefaultRequestParams(); - const pageTitle = usePageTitle(); + const pageTitle = useStacksTxPageTitle(); const { isTestnet, chain } = useCurrentNetworkState(); if (!transactionRequest) return null; diff --git a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx index 845a1199259..7df39261a88 100644 --- a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx +++ b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx @@ -42,12 +42,9 @@ interface StacksTransactionSignerProps { disableFeeSelection?: boolean; disableNonceSelection?: boolean; isMultisig: boolean; - onCancel(): void; - onSignStacksTransaction(fee: number, nonce: number): void; } - export function StacksTransactionSigner({ stacksTransaction, disableFeeSelection, diff --git a/src/app/features/stacks-transaction-request/submit-action.tsx b/src/app/features/stacks-transaction-request/submit-action.tsx index 0f4949a2a93..98040c53568 100644 --- a/src/app/features/stacks-transaction-request/submit-action.tsx +++ b/src/app/features/stacks-transaction-request/submit-action.tsx @@ -1,5 +1,3 @@ -import { Suspense } from 'react'; - import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors'; import { useFormikContext } from 'formik'; @@ -38,15 +36,13 @@ export function SubmitAction() { }; return ( - }> - - Confirm - - + + Confirm + ); } diff --git a/src/app/query/stacks/contract/contract.query.ts b/src/app/query/stacks/contract/contract.query.ts index 74956f79337..bdb0c4bbc5c 100644 --- a/src/app/query/stacks/contract/contract.query.ts +++ b/src/app/query/stacks/contract/contract.query.ts @@ -23,7 +23,7 @@ export function useGetContractInterface(transactionRequest: ContractCallPayload } return useQuery({ - enabled: !!transactionRequest, + enabled: transactionRequest?.txType === TransactionTypes.ContractCall && !!transactionRequest, queryKey: [ 'contract-interface', transactionRequest?.contractName,