Merge branch 'main' into issue-#1450

e2e/utils/strategy/CreateStrategyDriver.ts

@@ -49,7 +49,8 @@ export class CreateStrategyDriver {
       max: () => form.getByTestId('input-max'),
       spread: () => form.getByTestId('spread-input'),
       anchorRequired: () => form.getByTestId('require-anchor'),
-      anchor: (anchor: 'buy' | 'sell') => form.getByTestId(`anchor-${anchor}`),
+      anchor: (anchor: 'buy' | 'sell') =>
+        form.getByTestId(`anchor-${anchor}-label`),
       budget: () => form.getByTestId('input-budget'),
     };
   }

e2e/utils/strategy/EditStrategyDriver.ts

@@ -31,6 +31,13 @@ export class EditStrategyDriver {
     return loading.waitFor({ state: 'detached' });
   }
 
+  async waitForLoading() {
+    const loadings = await this.page.locator('.loading-message').all();
+    return Promise.all(
+      loadings.map((loading) => loading.waitFor({ state: 'detached' }))
+    );
+  }
+
   getPriceSection(direction: Direction) {
     const form = this.page.getByTestId(`${direction}-section`);
     return {
@@ -62,7 +69,8 @@ export class EditStrategyDriver {
       max: () => form.getByTestId('input-max'),
       spread: () => form.getByTestId('spread-input'),
       anchorRequired: () => form.getByTestId('require-anchor'),
-      anchor: (anchor: 'buy' | 'sell') => form.getByTestId(`anchor-${anchor}`),
+      anchor: (anchor: 'buy' | 'sell') =>
+        form.getByTestId(`anchor-${anchor}-label`),
       budgetSummary: () => form.getByTestId(`budget-summary`),
       action: (action: 'deposit' | 'withdraw') =>
         form.getByTestId(`action-${action}`),
@@ -84,6 +92,7 @@ export class EditStrategyDriver {
     }
 
     try {
+      await this.waitForLoading();
       await waitFor(this.page, 'approve-warnings', 2_000);
       if (await this.page.isVisible('[data-testid=approve-warnings]')) {
         await this.page.getByTestId('approve-warnings').click();

package.json

@@ -83,7 +83,7 @@
     "typescript": "^5.3.3",
     "valibot": "^0.34.0",
     "viem": "2.x",
-    "vite": "5.3.2",
+    "vite": "5.3.6",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^1.6.0",

src/components/activity/ActivityCountDown.tsx

@@ -9,7 +9,7 @@ const finishRemainingAnimations = (element: HTMLElement | null) => {
   const animations = element?.getAnimations() ?? [];
   const operations = animations.map(async (a) => {
     await a.finished;
-    if (element?.offsetParent === null) return; // cannot commit style to not rendered element
+    if (element?.offsetParent == null) return; // cannot commit style to not rendered element, check null and undefined
     a.commitStyles();
     a.cancel();
   });
@@ -101,6 +101,8 @@ export const ActivityCountDown: FC<Props> = ({ time }) => {
         options
       );
     }
+
+    return () => {};
   }, [fetchStatus, time, id]);
 
   return (

src/components/common/TokenInputField/TokenInputField.tsx

@@ -126,7 +126,12 @@ export const TokenInputField: FC<Props> = (props) => {
           {slippage && value && <Slippage slippage={slippage} />}
         </p>
         {user && !withoutWallet && isBalanceLoading && (
-          <button disabled type="button" data-testid="wallet-loading">
+          <button
+            disabled
+            type="button"
+            className="loading-message"
+            data-testid="wallet-loading"
+          >
             Wallet: loading
           </button>
         )}

src/components/strategies/common/BudgetDistribution.tsx

@@ -13,7 +13,7 @@ interface Props {
   initialBudget: string;
   withdraw: string;
   deposit: string;
-  balance: string;
+  balance?: string;
   isSimulator?: boolean;
 }
 
@@ -70,7 +70,7 @@ export const BudgetDistribution: FC<Props> = (props) => {
     Number(initialBudget),
     Number(withdraw),
     Number(deposit),
-    Number(balance),
+    Number(balance ?? '0'),
     isSimulator
   );
   const color = buy ? 'bg-buy' : 'bg-sell';
@@ -81,16 +81,20 @@ export const BudgetDistribution: FC<Props> = (props) => {
       <div className="text-12 flex justify-between text-white/60">
         <label htmlFor={allocatedId}>
           Allocated:&nbsp;
-          <span className="text-white">
-            {tokenAmount(allocated || '0', token)}
-          </span>
+          {allocated ? (
+            <span className="text-white">{tokenAmount(allocated, token)}</span>
+          ) : (
+            <span className="loading-message text-white">Loading</span>
+          )}
         </label>
         {!isSimulator && (
           <label htmlFor={walletId}>
             Wallet:&nbsp;
-            <span className="text-white">
-              {tokenAmount(balance || '0', token)}
-            </span>
+            {balance ? (
+              <span className="text-white">{tokenAmount(balance, token)}</span>
+            ) : (
+              <span className="loading-message text-white">Loading</span>
+            )}
           </label>
         )}
       </div>
@@ -144,7 +148,7 @@ export const BudgetDescription: FC<DescriptionProps> = (props) => {
     const balance = Number(props.balance);
     if (deposit > balance) {
       return (
-        <Warning className="text-12" isError>
+        <Warning className="text-12" isError data-testid="insufficient-balance">
           You should&nbsp;
           <b className="font-weight-500">
             deposit {tokenAmount(deposit, token)}
@@ -162,7 +166,10 @@ export const BudgetDescription: FC<DescriptionProps> = (props) => {
         </span>
         <span>
           You will&nbsp;
-          <b className="font-weight-500">
+          <b
+            className="font-weight-500"
+            data-testid={`deposit-${token.symbol}`}
+          >
             deposit {tokenAmount(deposit, token)}
           </b>
           {depositFiat && <b>&nbsp;({depositFiat})</b>}
@@ -175,7 +182,7 @@ export const BudgetDescription: FC<DescriptionProps> = (props) => {
     const initialBudget = Number(props.initialBudget);
     if (withdraw > initialBudget) {
       return (
-        <Warning className="text-12" isError>
+        <Warning className="text-12" isError data-testid="insufficient-funds">
           You should&nbsp;
           <b className="font-weight-500">
             withdraw {tokenAmount(withdraw, token)}
@@ -193,7 +200,10 @@ export const BudgetDescription: FC<DescriptionProps> = (props) => {
         </span>
         <span>
           You will&nbsp;
-          <b className="font-weight-500">
+          <b
+            className="font-weight-500"
+            data-testid={`withdraw-${token.symbol}`}
+          >
             withdraw {tokenAmount(withdraw, token)}
           </b>
           {withdrawFiat && <b>&nbsp;({withdrawFiat})</b>}

src/components/strategies/common/InputRange.tsx

@@ -162,6 +162,7 @@ export const InputRange: FC<InputRangeProps> = ({
                 className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
                 type="button"
                 onClick={setMinMarket}
+                data-testid="market-price-min"
               >
                 Use Market
               </button>
@@ -214,6 +215,7 @@ export const InputRange: FC<InputRangeProps> = ({
                 className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
                 type="button"
                 onClick={setMaxMarket}
+                data-testid="market-price-max"
               >
                 Use Market
               </button>

src/components/strategies/common/StrategyChartHistory.tsx

@@ -18,6 +18,7 @@ import { TradingviewChart } from 'components/tradingviewChart';
 import { Token } from 'libs/tokens';
 import { Activity } from 'libs/queries/extApi/activity';
 import config from 'config';
+import { SafeDecimal } from 'libs/safedecimal';
 
 const chartSettings: D3ChartSettingsProps = {
   width: 0,
@@ -116,10 +117,20 @@ export const StrategyChartHistory: FC<Props> = (props) => {
   );
 
   const updatePrices: OnPriceUpdates = ({ buy, sell }) => {
-    setPrices({ buy, sell });
+    const newPrices = {
+      buy: {
+        min: SafeDecimal.max(buy.min, 0).toString(),
+        max: SafeDecimal.max(buy.max, 0).toString(),
+      },
+      sell: {
+        min: SafeDecimal.max(sell.min, 0).toString(),
+        max: SafeDecimal.max(sell.max, 0).toString(),
+      },
+    };
+    setPrices(newPrices);
     if (timeout.current) clearTimeout(timeout.current);
     timeout.current = setTimeout(() => {
-      props.onPriceUpdates?.({ buy, sell });
+      props.onPriceUpdates?.(newPrices);
     }, 200);
   };
 

src/components/strategies/create/BuySellBlock/InputRange.tsx

@@ -112,6 +112,7 @@ export const InputRange: FC<InputRangeProps> = ({
                 className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
                 type="button"
                 onClick={() => setMin(formatNumber(marketPrice.toString()))}
+                data-testid="market-price-min"
               >
                 Use Market
               </button>
@@ -162,6 +163,7 @@ export const InputRange: FC<InputRangeProps> = ({
                 className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
                 type="button"
                 onClick={() => setMax(formatNumber(marketPrice.toString()))}
+                data-testid="market-price-max"
               >
                 Use Market
               </button>

src/components/strategies/create/CreateOverlappingBudget.tsx

@@ -103,7 +103,7 @@ export const CreateOverlappingBudget: FC<Props> = (props) => {
           initialBudget="0"
           withdraw="0"
           deposit={budgetError ? '0' : order1.budget}
-          balance={baseBalance || '0'}
+          balance={baseBalance}
           isSimulator={!user}
         />
         {!!user && (
@@ -121,7 +121,7 @@ export const CreateOverlappingBudget: FC<Props> = (props) => {
           initialBudget="0"
           withdraw="0"
           deposit={budgetError ? '0' : order0.budget}
-          balance={quoteBalance || '0'}
+          balance={quoteBalance}
           isSimulator={!user}
           buy
         />

src/components/strategies/edit/EditBudgetFields.tsx

@@ -9,7 +9,7 @@ import {
 } from './EditStrategyAllocatedBudget';
 import { useEditStrategyCtx } from './EditStrategyContext';
 import { InputBudget } from '../common/InputBudget';
-import { useGetTokenBalance } from 'libs/queries';
+import { Order, useGetTokenBalance } from 'libs/queries';
 import { SafeDecimal } from 'libs/safedecimal';
 import { isZero } from '../common/utils';
 
@@ -18,7 +18,7 @@ interface Props {
   order: BaseOrder;
   editType: 'withdraw' | 'deposit';
   buy?: boolean;
-  initialBudget: string;
+  initialOrder: Order;
   setOrder: (order: Partial<OrderBlock>) => void;
   error?: string;
   warning?: string;
@@ -28,7 +28,7 @@ export const EditStrategyBudgetField: FC<Props> = ({
   budget,
   order,
   editType,
-  initialBudget,
+  initialOrder,
   setOrder,
   buy = false,
   error,
@@ -39,6 +39,7 @@ export const EditStrategyBudgetField: FC<Props> = ({
   const titleId = useId();
   const token = buy ? quote : base;
   const balance = useGetTokenBalance(token);
+  const initialBudget = initialOrder.balance;
 
   const max = editType === 'deposit' ? balance.data || '0' : initialBudget;
   const maxIsLoading = editType === 'deposit' && balance.isPending;
@@ -51,6 +52,17 @@ export const EditStrategyBudgetField: FC<Props> = ({
   const setMarginalPrice = (marginalPrice: string) =>
     setOrder({ marginalPrice });
 
+  const showDistribution = () => {
+    if (order.min === order.max) return false;
+    if (isZero(budget)) return false;
+    if (isZero(initialBudget)) return false;
+    if (new SafeDecimal(order.budget).lte(0)) return false;
+    if (!balance.data || new SafeDecimal(budget).gt(balance.data)) return false;
+    if (buy && initialOrder.marginalRate === order.max) return false;
+    if (!buy && initialOrder.marginalRate === order.min) return false;
+    return true;
+  };
+
   return (
     <article
       aria-labelledby={titleId}
@@ -86,8 +98,11 @@ export const EditStrategyBudgetField: FC<Props> = ({
       />
       <EditStrategyAllocatedBudget token={token} initialBudget={initialBudget}>
         <EditBudgetTokenPrice order={order} buy={buy} />
-        {order.min !== order.max && !isZero(budget) && (
-          <EditBudgetDistribution order={order} onChange={setMarginalPrice} />
+        {showDistribution() && (
+          <EditBudgetDistribution
+            marginalPrice={order.marginalPrice}
+            onChange={setMarginalPrice}
+          />
         )}
       </EditStrategyAllocatedBudget>
       <FullOutcome

src/components/strategies/edit/EditOverlappingBudget.tsx

@@ -246,7 +246,7 @@ export const EditOverlappingBudget: FC<Props> = (props) => {
             initialBudget={initialSellBudget}
             withdraw={budgetError ? '0' : withdrawSellBudget}
             deposit={budgetError ? '0' : depositSellBudget}
-            balance={baseBalance ?? '0'}
+            balance={baseBalance}
           />
           <BudgetDescription
             token={base}
@@ -261,7 +261,7 @@ export const EditOverlappingBudget: FC<Props> = (props) => {
             initialBudget={initialBuyBudget}
             withdraw={budgetError ? '0' : withdrawBuyBudget}
             deposit={budgetError ? '0' : depositBuyBudget}
-            balance={quoteBalance ?? '0'}
+            balance={quoteBalance}
             buy
           />
           <BudgetDescription

src/components/strategies/edit/EditOverlappingPrice.tsx

@@ -347,7 +347,7 @@ export const EditOverlappingPrice: FC<Props> = (props) => {
             initialBudget={initialSellBudget}
             withdraw={budgetError ? '0' : withdrawSellBudget}
             deposit={budgetError ? '0' : depositSellBudget}
-            balance={baseBalance ?? '0'}
+            balance={baseBalance}
           />
           <BudgetDescription
             token={base}
@@ -362,7 +362,7 @@ export const EditOverlappingPrice: FC<Props> = (props) => {
             initialBudget={initialBuyBudget}
             withdraw={budgetError ? '0' : withdrawBuyBudget}
             deposit={budgetError ? '0' : depositBuyBudget}
-            balance={quoteBalance ?? '0'}
+            balance={quoteBalance}
             buy
           />
           <BudgetDescription