fix: code spanning past viewport width

leather-io · Oct 18, 2023 · db35a49 · db35a49
1 parent a28678d
commit db35a49
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 47 deletions.
diff --git 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 <LoadingRectangle height="32px" width="100%" {...rest} />;
@@ -104,7 +112,7 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element {
       feeField={
         isCustom ? (
           <CustomFeeField
-            disableFeeSelection={props.disableFeeSelection}
+            disableFeeSelection={disableFeeSelection}
             feeCurrencySymbol={feeCurrencySymbol}
             lowFeeEstimate={fees.estimates[FeeTypes.Low]}
             setFieldWarning={(value: string) => setFieldWarning(value)}
@@ -123,7 +131,7 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element {
       isSponsored={isSponsored}
       selectInput={
         <FeeEstimateSelect
-          disableFeeSelection={props.disableFeeSelection}
+          disableFeeSelection={disableFeeSelection}
           allowCustom={allowCustom}
           isVisible={isSelectVisible}
           estimate={fees.estimates}

diff --git a/...p/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx b/...p/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
@@ -14,7 +14,7 @@ import {
 } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useTransactionRequestState } from '@app/store/transactions/requests.hooks';
 
-function ContractCodeSection(): React.JSX.Element | null {
+function ContractCodeSection() {
   const transactionRequest = useTransactionRequestState();
 
   const currentAccount = useCurrentStacksAccount();
@@ -31,12 +31,12 @@ function ContractCodeSection(): React.JSX.Element | null {
 
   return (
     <CodeBlock
-      overflow="auto"
+      overflowX="scroll"
       border="4px solid"
       borderColor={color('border')}
       borderRadius="12px"
       backgroundColor="ink.1000"
-      width="100%"
+      maxWidth="100vw"
       code={transactionRequest.codeBody}
       Prism={Prism as any}
     />
@@ -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/...ansaction-request/hooks/use-page-title.ts → ...request/hooks/use-stacks-tx-page-title.ts b/...ansaction-request/hooks/use-page-title.ts → ...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
@@ -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
@@ -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
@@ -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 (
-    <Suspense fallback={<BaseConfirmButton aria-busy={isLoading} disabled={isDisabled} />}>
-      <BaseConfirmButton
-        aria-busy={isLoading}
-        data-testid={TransactionRequestSelectors.BtnConfirmTransaction}
-        disabled={isDisabled}
-        onClick={onConfirmTransaction}
-      >
-        Confirm
-      </BaseConfirmButton>
-    </Suspense>
+    <BaseConfirmButton
+      aria-busy={isLoading}
+      data-testid={TransactionRequestSelectors.BtnConfirmTransaction}
+      disabled={isDisabled}
+      onClick={onConfirmTransaction}
+    >
+      Confirm
+    </BaseConfirmButton>
   );
 }
diff --git 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,