[FRE-1084, FRE-1171, FRE-1170] (#391)

skip-mev · Oct 29, 2024 · 05f4b19 · 05f4b19
1 parent b83912a
commit 05f4b19
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 71 deletions.
diff --git a/packages/widget-v2/src/hooks/useGetAssetDetails.tsx b/packages/widget-v2/src/hooks/useGetAssetDetails.tsx
@@ -16,6 +16,7 @@ export type AssetDetailsProps = {
   chainImage?: string;
   amount?: string;
   tokenAmount?: string;
+  decimals?: number;
 };
 
 /**
@@ -72,6 +73,7 @@ export const useGetAssetDetails = ({
   });
   const chainName = chain?.prettyName ?? chain?.chainName;
   const chainImage = chain?.logoURI;
+  const decimals = asset?.decimals;
 
   if (!chainId) {
     return {
@@ -95,5 +97,6 @@ export const useGetAssetDetails = ({
     symbol,
     amount,
     tokenAmount,
+    decimals
   };
 };
diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx
@@ -16,6 +16,9 @@ import { useGetAccount } from "@/hooks/useGetAccount";
 import { getTruncatedAddress } from "@/utils/crypto";
 import { formatUSD } from "@/utils/intl";
 import { copyToClipboard } from "@/utils/misc";
+import {
+  limitDecimalsDisplayed,
+} from "@/utils/number";
 
 export type SwapExecutionPageRouteSimpleRowProps = {
   denom: ClientOperation["denomIn"] | ClientOperation["denomOut"];
@@ -92,7 +95,7 @@ export const SwapExecutionPageRouteSimpleRow = ({
       )}
       <Column gap={5}>
         <Text fontSize={24}>
-          {assetDetails.amount} {assetDetails?.symbol}
+          {limitDecimalsDisplayed(assetDetails.amount)} {assetDetails?.symbol}
         </Text>
         {usdValue && (
           <SmallText>

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -35,6 +35,7 @@ import { useGetAccount } from "@/hooks/useGetAccount";
 import { ConnectedWalletModal } from "@/modals/ConnectedWalletModal/ConnectedWalletModal";
 import { useAccount } from "wagmi";
 import { calculatePercentageChange } from "@/utils/number";
+import { transactionHistoryAtom } from "@/state/history";
 
 export const SwapPage = () => {
   const [container, setContainer] = useState<HTMLDivElement>();
@@ -68,6 +69,7 @@ export const SwapPage = () => {
   useFetchAllBalances();
   const getAccount = useGetAccount();
   const sourceAccount = getAccount(sourceAsset?.chainID);
+  const txHistory = useAtomValue(transactionHistoryAtom);
 
   const { chainId: evmChainId, connector } = useAccount();
   const evmAddress = evmChainId ? getAccount(String(evmChainId))?.address : undefined;
@@ -293,7 +295,8 @@ export const SwapPage = () => {
         }}
       >
         <SwapPageHeader
-          leftButton={{
+          leftButton={txHistory.length === 0 ? undefined :
+          {
             label: "History",
             icon: ICONS.history,
             onClick: () => setCurrentPage(Routes.TransactionHistoryPage),

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx
@@ -40,10 +40,8 @@ export const SwapPageAssetChainInput = ({
   isWaitingToUpdateInputValue,
   badPriceWarning,
 }: AssetChainInputProps) => {
-
   const theme = useTheme();
-  const [_showPriceChangePercentage, setShowPriceChangePercentage] =
-    useState(false);
+  const [_showPriceChangePercentage, setShowPriceChangePercentage] = useState(false);
 
   const showPriceChangePercentage = _showPriceChangePercentage || badPriceWarning;
   const assetDetails = useGetAssetDetails({
@@ -62,8 +60,7 @@ export const SwapPageAssetChainInput = ({
     latest = latest.replace(/[.]{2,}/g, "."); // Remove multiple decimals
     latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas
 
-
-    onChangeValue?.(limitDecimalsDisplayed(formatNumberWithoutCommas(latest)));
+    onChangeValue?.(limitDecimalsDisplayed(formatNumberWithoutCommas(latest), assetDetails?.decimals))
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -73,19 +70,14 @@ export const SwapPageAssetChainInput = ({
 
     switch (event.key) {
       case "Escape":
-        if (
-          event.currentTarget.selectionStart ===
-          event.currentTarget.selectionEnd
-        ) {
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd) {
           event.currentTarget.select();
         }
         return;
 
       case "ArrowUp":
         event.preventDefault();
-        value = new BigNumber(
-          formatNumberWithoutCommas(event.currentTarget.value) || "0"
-        );
+        value = new BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0");
 
         if (event.shiftKey) {
           value = value.plus(10);
@@ -104,9 +96,7 @@ export const SwapPageAssetChainInput = ({
 
       case "ArrowDown":
         event.preventDefault();
-        value = new BigNumber(
-          formatNumberWithoutCommas(event.currentTarget.value) || "0"
-        );
+        value = new BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0");
 
         if (event.shiftKey) {
           value = value.minus(10);
@@ -143,21 +133,20 @@ export const SwapPageAssetChainInput = ({
     theme.success.text,
   ]);
 
+  const displayedValue = formatNumberWithCommas(value || "");
+
   return (
-    <StyledAssetChainInputWrapper
-      justify="space-between"
-      padding={20}
-      borderRadius={25}
-    >
+    <StyledAssetChainInputWrapper justify="space-between" padding={20} borderRadius={25}>
       <Row justify="space-between">
         <StyledInput
           type="text"
-          value={formatNumberWithCommas(value || "")}
+          value={displayedValue}
           placeholder="0"
           inputMode="numeric"
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
           isWaitingToUpdateInputValue={isWaitingToUpdateInputValue}
+          valueLength={displayedValue.length}
         />
         <Button onClick={handleChangeAsset} gap={5}>
           {assetDetails?.assetImage && assetDetails.symbol ? (
@@ -185,29 +174,22 @@ export const SwapPageAssetChainInput = ({
               onMouseEnter={() => setShowPriceChangePercentage(true)}
               onMouseLeave={() => setShowPriceChangePercentage(false)}
             >
-              {(usdValue && formatUSD(usdValue))}
+              {usdValue && formatUSD(usdValue)}
             </SmallTextButton>
             <TinyTriangleIcon
               color={priceChangeColor}
               direction={(priceChangePercentage ?? 0) > 0 ? "up" : "down"}
               style={{ scale: showPriceChangePercentage ? "1" : "0.7" }}
             />
-            {(showPriceChangePercentage) && (
-              <SmallText color={priceChangeColor}>
-                {priceChangePercentage}%
-              </SmallText>
+            {showPriceChangePercentage && (
+              <SmallText color={priceChangeColor}>{priceChangePercentage}%</SmallText>
             )}
           </Row>
         ) : (
-          <SmallText>{(usdValue && formatUSD(usdValue))}</SmallText>
+          <SmallText>{usdValue && formatUSD(usdValue)}</SmallText>
         )}
         {assetDetails?.chainName ? (
-          <GhostButton
-            onClick={handleChangeChain}
-            align="center"
-            secondary
-            gap={4}
-          >
+          <GhostButton onClick={handleChangeChain} align="center" secondary gap={4}>
             <SmallText>on {assetDetails?.chainName}</SmallText>
             <CogIcon color={theme.primary.text.normal} />
           </GhostButton>
@@ -225,9 +207,15 @@ const StyledAssetChainInputWrapper = styled(Column)`
   background-color: ${(props) => props.theme.primary.background.normal};
 `;
 
-const StyledInput = styled.input<{ isWaitingToUpdateInputValue?: boolean }>`
+const StyledInput = styled.input<{
+  isWaitingToUpdateInputValue?: boolean;
+  valueLength: number;
+}>`
   all: unset;
-  font-size: 38px;
+  font-size: ${({ valueLength }) => {
+    let fontSize = valueLength > 15 ? 28 : valueLength > 10 ? 32 : 38;
+    return `${fontSize}px`;
+  }};
   font-weight: 300;
   width: 100%;
   color: ${(props) => props.theme.primary.text.normal};

diff --git a/packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx
@@ -20,10 +20,9 @@ export const TransactionHistoryPage = () => {
   >();
   const txHistory = useAtomValue(transactionHistoryAtom);
   const historyList = useMemo(() => {
-    return txHistory.sort((a, b) => {
-      return b.timestamp - a.timestamp;
-    });
+    return txHistory.sort((a, b) => b.timestamp - a.timestamp);
   }, [txHistory]);
+
   return (
     <Column gap={5}>
       <SwapPageHeader

diff --git a/packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPageHistoryItem.tsx b/packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPageHistoryItem.tsx
@@ -43,6 +43,7 @@ export const TransactionHistoryPageHistoryItem = ({
   });
 
   const removeTransactionHistoryItem = useSetAtom(removeTransactionHistoryItemAtom);
+
   const {
     route: {
       amountIn,
@@ -146,6 +147,29 @@ export const TransactionHistoryPageHistoryItem = ({
   );
 };
 
+
+const RenderAssetAmount = ({
+  amount,
+  asset,
+  assetImage,
+}: {
+  amount?: string;
+  asset?: ClientAsset;
+  assetImage: string;
+}) => {
+  return (
+    <>
+      <img height={20} width={20} src={assetImage} />
+      <StyledAssetAmount normalTextColor title={amount}>
+        {amount}
+      </StyledAssetAmount>
+      <SmallText normalTextColor>
+        {asset?.recommendedSymbol ?? asset?.symbol}
+      </SmallText>
+    </>
+  );
+};
+
 const StyledHistoryContainer = styled(Column) <{ showDetails?: boolean }>`
   background-color: ${({ theme, showDetails }) =>
     showDetails && theme.secondary.background.normal};
@@ -170,36 +194,14 @@ const StyledGreenDot = styled.div`
   border-radius: 50%;
 `;
 
-const RenderAssetAmount = ({
-  amount,
-  asset,
-  assetImage,
-}: {
-  amount?: string;
-  asset?: ClientAsset;
-  assetImage: string;
-}) => {
-  return (
-    <>
-      <img height={20} width={20} src={assetImage} />
-      <StyledAssetAmount normalTextColor title={amount}>
-        {amount}
-      </StyledAssetAmount>
-      <SmallText normalTextColor>
-        {asset?.recommendedSymbol ?? asset?.symbol}
-      </SmallText>
-    </>
-  );
-};
-
 const StyledAssetAmount = styled(SmallText)`
   max-width: 40px;
   text-overflow: ellipsis;
   overflow: hidden;
 `;
 
 const StyledChainName = styled(SmallText)`
-  max-width: 95px;
+  max-width: 85px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

diff --git a/packages/widget-v2/src/state/history.ts b/packages/widget-v2/src/state/history.ts
@@ -40,12 +40,12 @@ export const removeTransactionHistoryItemAtom = atom(
     if (index < 0) return;
     if (index >= history.length) return;
 
-    const newHistory = history;
-    newHistory.splice(index, 1);
+    // Create a new array without mutating the original
+    const newHistory = history.filter((_, i) => i !== index);
 
     set(transactionHistoryAtom, newHistory);
   }
-);
+)
 
 export const skipFetchPendingTransactionHistoryStatus = atomWithQuery((get) => {
   const skip = get(skipClient);

diff --git a/packages/widget-v2/src/utils/number.ts b/packages/widget-v2/src/utils/number.ts
@@ -11,22 +11,22 @@ export function formatNumberWithoutCommas(str: string | number) {
   return str.toString().replace(/,/g, "");
 }
 
-export function limitDecimalsDisplayed(input: string | number) {
-  const DECIMAL_PLACES_TO_DISPLAY = 6;
+export function limitDecimalsDisplayed(input: string | number | undefined, decimalPlaces = 6) {
+  if (input === undefined) return "";
 
   if (typeof input === "string") {
     const [integer, decimal] = input.split(".");
 
-    if (decimal === undefined || decimal.length <= DECIMAL_PLACES_TO_DISPLAY) {
+    if (decimal === undefined || decimal.length <= decimalPlaces) {
       return input;
     }
 
-    return integer + "." + decimal.slice(0, DECIMAL_PLACES_TO_DISPLAY);
+    return integer + "." + decimal.slice(0, decimalPlaces);
   }
 
   if (isNaN(input)) return "";
 
-  const decimalScalingFactor = Math.pow(10, DECIMAL_PLACES_TO_DISPLAY);
+  const decimalScalingFactor = Math.pow(10, decimalPlaces);
 
   const flooredAndLimitedDecimalPlacesNumber =
     Math.floor((input) * decimalScalingFactor) / decimalScalingFactor;