From dc46640bcf77b0c3384477010188900f510d4557 Mon Sep 17 00:00:00 2001
From: vetalcore <vetalcore@gmail.com>
Date: Fri, 29 Nov 2024 14:03:58 +0200
Subject: [PATCH] fix: [lw-11802]: fix e2e

---
 .../src/utils/format-number.ts                |  4 ++--
 .../Form/CoinInput/useSelectedCoins.tsx       |  2 +-
 .../ui/components/AssetInput/AssetInput.tsx   | 24 +++++++------------
 .../components/AssetInput/AssetInputRow.tsx   |  4 ++--
 .../components/Transaction/CopiableHash.tsx   |  2 +-
 .../src/ui/components/Transaction/TxHash.tsx  |  5 ++--
 .../StakingInfoCard/StakingInfoCard.tsx       |  4 ++--
 7 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/apps/browser-extension-wallet/src/utils/format-number.ts b/apps/browser-extension-wallet/src/utils/format-number.ts
index 1c23f4d327..7acec2dadd 100644
--- a/apps/browser-extension-wallet/src/utils/format-number.ts
+++ b/apps/browser-extension-wallet/src/utils/format-number.ts
@@ -54,7 +54,7 @@ export const formatLocaleNumber = (value: string, decimalPlaces: number = DEFAUL
  * @param maxDecimals The maximum number of decimal places to include. Default is 0.
  * @returns The formatted number string.
  */
-export const formatNumberForDisplay = (value: string, maxDecimals = 0): string => {
+export const formatNumberForDisplay = (value?: string, maxDecimals = 0): string => {
   if (!value) return '0';
   // Remove any character that is not a dot or a number
   const parsedStringValue = value.replace(/[^\d.]/g, '');
@@ -137,7 +137,7 @@ export const handleFormattedValueChange = (
  * @param decimals The desired decimal places (default = 2)
  * @returns The formatted value with the desired decimals and the unit as a string
  */
-export const compactNumberWithUnit = (value: number | string, decimals = DEFAULT_DECIMALS): string => {
+export const compactNumberWithUnit = (value?: number | string, decimals = DEFAULT_DECIMALS): string => {
   const bigNumberValue = value ? new BigNumber(value) : new BigNumber(0);
 
   if (bigNumberValue.isNaN()) return formatLocaleNumber('0', decimals);
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
index 501aa3f817..b3dc692864 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
@@ -27,7 +27,7 @@ import { MAX_NFT_TICKER_LENGTH, MAX_TOKEN_TICKER_LENGTH } from '../../../constan
 
 interface InputFieldActionParams {
   id: string;
-  value: string;
+  value?: string;
   maxDecimals?: number;
 }
 
diff --git a/packages/core/src/ui/components/AssetInput/AssetInput.tsx b/packages/core/src/ui/components/AssetInput/AssetInput.tsx
index b34e38f216..41863fb514 100644
--- a/packages/core/src/ui/components/AssetInput/AssetInput.tsx
+++ b/packages/core/src/ui/components/AssetInput/AssetInput.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import cn from 'classnames';
 import { CoreTranslationKey } from '@lace/translation';
 
-const isSameNumberFormat = (num1: string, num2: string) => {
+const isSameNumberFormat = (num1?: string, num2?: string) => {
   if (!num1 || !num2) return false;
   const strippedNum = Number(num2?.replace(/,/g, ''));
   return Number(num1) === strippedNum;
@@ -24,8 +24,8 @@ export interface AssetInputProps {
   inputId: string;
   coin: { id: string; balance: string; src?: string; ticker?: string; shortTicker?: string };
   onChange: (args: { value: string; prevValue?: string; id: string; element?: any; maxDecimals?: number }) => void;
-  onBlur?: (args: { value: string; id: string; maxDecimals?: number }) => void;
-  onFocus?: (args: { value: string; id: string; maxDecimals?: number }) => void;
+  onBlur?: (args: { value?: string; id: string; maxDecimals?: number }) => void;
+  onFocus?: (args: { value?: string; id: string; maxDecimals?: number }) => void;
   fiatValue: string;
   formattedFiatValue?: string;
   value?: string;
@@ -81,7 +81,7 @@ export const AssetInput = ({
   const [isInvalid, setIsInvalid] = useState(invalid);
   const [isTouched, setIsTouched] = useState(false);
 
-  const adjustInputWidth = useCallback((text: string) => {
+  const adjustInputWidth = useCallback((text?: string) => {
     if (!inputRef?.current?.input) return;
     const textWidth = !text || text === '0' ? defaultInputWidth : getTextWidth(text, inputRef.current.input);
     const numberOneQuantity = text?.match(/1/g)?.length ?? 0;
@@ -115,14 +115,14 @@ export const AssetInput = ({
   }, [invalid]);
 
   useLayoutEffect(() => {
-    adjustInputWidth(focused ? displayValue ?? '' : compactValue ?? '');
+    adjustInputWidth(focused ? displayValue : compactValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [adjustInputWidth]);
 
   // eslint-disable-next-line complexity
   const setValue = (newValue: string, element?: any) => {
     const sanitizedValue = sanitizeNumber(newValue);
-    const tokenMaxDecimalsOverflow = maxDecimals ?? 0;
+    const tokenMaxDecimalsOverflow = maxDecimals;
     const isValidNumericValue = validateNumericValue(sanitizedValue, {
       isFloat: allowFloat,
       maxDecimals: tokenMaxDecimalsOverflow?.toString()
@@ -154,7 +154,7 @@ export const AssetInput = ({
 
   const handleOnBlur = () => {
     setIsTouched(true);
-    const currentValue = value && !Number.parseFloat(value) ? placeholderValue : value ?? '0';
+    const currentValue = value && !Number.parseFloat(value) ? placeholderValue : value;
     onBlur?.({
       value: currentValue,
       id: coin.id,
@@ -167,7 +167,7 @@ export const AssetInput = ({
   const handleOnFocus = () => {
     setFocusInput?.(inputId);
     onFocus?.({
-      value: value ?? placeholderValue,
+      value,
       id: coin.id,
       maxDecimals
     });
@@ -207,13 +207,7 @@ export const AssetInput = ({
             </div>
           )}
 
-          <Tooltip
-            title={
-              !isSameNumberFormat(value ?? placeholderValue, compactValue ?? placeholderValue) &&
-              !focused &&
-              displayValue
-            }
-          >
+          <Tooltip title={!isSameNumberFormat(value, compactValue) && !focused && displayValue}>
             <Input
               onMouseDown={onClick}
               ref={inputRef}
diff --git a/packages/core/src/ui/components/AssetInput/AssetInputRow.tsx b/packages/core/src/ui/components/AssetInput/AssetInputRow.tsx
index 7d64a1f636..d4cfdea7cd 100644
--- a/packages/core/src/ui/components/AssetInput/AssetInputRow.tsx
+++ b/packages/core/src/ui/components/AssetInput/AssetInputRow.tsx
@@ -32,7 +32,7 @@ export const AssetInputRow = ({
       if (!isInFocusableArea)
         // do not apply compact notation in case we are still in the focusable area
         onBlur?.({
-          value: value ?? '0',
+          value,
           id: coin.id,
           maxDecimals
         });
@@ -54,7 +54,7 @@ export const AssetInputRow = ({
     () => {
       setIsFocused(false);
       onBlur?.({
-        value: value ?? '0',
+        value,
         id: coin.id,
         maxDecimals
       });
diff --git a/packages/core/src/ui/components/Transaction/CopiableHash.tsx b/packages/core/src/ui/components/Transaction/CopiableHash.tsx
index eac783d615..b0ea98382c 100644
--- a/packages/core/src/ui/components/Transaction/CopiableHash.tsx
+++ b/packages/core/src/ui/components/Transaction/CopiableHash.tsx
@@ -4,7 +4,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 const TOAST_DEFAULT_DURATION = 3;
 
-export const CopiableHash = ({ hash, copiedText }: { hash: string; copiedText: string }): React.ReactElement => (
+export const CopiableHash = ({ hash = '', copiedText }: { hash?: string; copiedText: string }): React.ReactElement => (
   <CopyToClipboard text={hash}>
     <div
       onClick={() =>
diff --git a/packages/core/src/ui/components/Transaction/TxHash.tsx b/packages/core/src/ui/components/Transaction/TxHash.tsx
index 314f062be5..3732317892 100644
--- a/packages/core/src/ui/components/Transaction/TxHash.tsx
+++ b/packages/core/src/ui/components/Transaction/TxHash.tsx
@@ -14,8 +14,7 @@ type TxHashProps = {
 export const TxHash = ({ hash, success, sending, openLink }: TxHashProps): React.ReactElement => {
   const { t } = useTranslation();
   const hashComponent = useMemo(
-    () =>
-      sending && hash ? <CopiableHash hash={hash} copiedText={t('core.activityDetails.copiedToClipboard')} /> : hash,
+    () => (sending ? <CopiableHash hash={hash} copiedText={t('core.activityDetails.copiedToClipboard')} /> : hash),
     [hash, sending, t]
   );
 
@@ -34,7 +33,7 @@ export const TxHash = ({ hash, success, sending, openLink }: TxHashProps): React
         })}
         onClick={openLink}
       >
-        {hashComponent && <div>{hashComponent}</div>}
+        <div>{hashComponent}</div>
       </div>
     </div>
   );
diff --git a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
index d9f308f765..51a5e6f2ba 100644
--- a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
+++ b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
@@ -26,7 +26,7 @@ export const formatLocaleNumber = (value: string | number, decimalPlaces: number
 const formatNumericValue = (
   val: number | string,
   suffix: number | string,
-  decimalPlaces: number = DEFAULT_DECIMALS
+  decimalPlaces: number = DEFAULT_DECIMALS,
 ): React.ReactElement => (
   <>
     {val ? formatLocaleNumber(String(val), decimalPlaces) : '-'}
@@ -77,7 +77,7 @@ export const StakingInfoCard = ({
   id,
   logo,
   margin,
-  name = '',
+  name,
   totalRewards,
   lastReward,
   ros,