Merge branch 'main' into issue-#1552

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>

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

@@ -87,7 +87,10 @@ 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} />
+          <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

src/components/strategies/edit/EditPriceFields.tsx

@@ -9,16 +9,20 @@ import { EditOrderBlock } from 'components/strategies/common/types';
 import { useEditStrategyCtx } from './EditStrategyContext';
 import { BudgetDistribution } from '../common/BudgetDistribution';
 import { getDeposit, getWithdraw } from './utils';
-import { useGetTokenBalance } from 'libs/queries';
+import { Order, useGetTokenBalance } from 'libs/queries';
 import { StrategySettings } from 'libs/routing';
 import { OverlappingAction } from '../overlapping/OverlappingAction';
+import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
+import { isZero } from '../common/utils';
+import { SafeDecimal } from 'libs/safedecimal';
 
 interface Props {
   order: EditOrderBlock;
   buy?: boolean;
-  initialBudget: string;
+  initialOrder: Order;
   budget: string;
   action?: 'deposit' | 'withdraw';
+  hasPriceChanged: boolean;
   setOrder: (order: Partial<EditOrderBlock>) => void;
   settings?: ReactNode;
   warnings?: (string | undefined)[];
@@ -27,8 +31,9 @@ interface Props {
 
 export const EditStrategyPriceField: FC<Props> = ({
   order,
-  initialBudget,
+  initialOrder,
   budget,
+  hasPriceChanged,
   setOrder,
   buy = false,
   settings,
@@ -39,7 +44,7 @@ export const EditStrategyPriceField: FC<Props> = ({
   const { base, quote } = strategy;
   const token = buy ? quote : base;
   const balance = useGetTokenBalance(token);
-
+  const initialBudget = initialOrder.balance;
   const titleId = useId();
   const tooltipText = `This section will define the order details in which you are willing to ${
     buy ? 'buy' : 'sell'
@@ -68,20 +73,36 @@ export const EditStrategyPriceField: FC<Props> = ({
     </>
   );
   const setPrice = (price: string) => setOrder({ min: price, max: price });
-  const setMin = (min: string) => setOrder({ min });
-  const setMax = (max: string) => setOrder({ max });
+  const setMin = (min: string) => setOrder({ min, marginalPrice: undefined });
+  const setMax = (max: string) => setOrder({ max, marginalPrice: undefined });
   const setBudget = (budget: string) => setOrder({ budget });
+  const setMarginalPrice = (marginalPrice: string) => {
+    setOrder({ marginalPrice });
+  };
   const setAction = (action: 'deposit' | 'withdraw') => {
-    setOrder({ action, budget: undefined });
+    setOrder({ action, budget: undefined, marginalPrice: undefined });
   };
   const setSettings = (settings: StrategySettings) => {
     setOrder({
       settings,
       min: undefined,
       max: undefined,
+      marginalPrice: undefined,
     });
   };
 
+  const showDistribution = (() => {
+    if (hasPriceChanged) return false;
+    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;
+  })();
+
   const headerProps = { titleId, order, base, buy, setSettings };
 
   return (
@@ -144,13 +165,25 @@ export const EditStrategyPriceField: FC<Props> = ({
         setBudget={setBudget}
         buyBudget={strategy.order0.balance}
         sellBudget={strategy.order1.balance}
-      />
+      >
+        {showDistribution && (
+          <div
+            role="table"
+            className="rounded-8 p-15 text-12 font-weight-500 mt-8 flex flex-col gap-10 border-2 border-white/10 text-left"
+          >
+            <EditBudgetDistribution
+              marginalPrice={order.marginalPrice}
+              onChange={setMarginalPrice}
+            />
+          </div>
+        )}
+      </OverlappingAction>
       <BudgetDistribution
         token={token}
         initialBudget={initialBudget}
         withdraw={getWithdraw(initialBudget, order.budget)}
         deposit={getDeposit(initialBudget, order.budget)}
-        balance={balance.data ?? '0'}
+        balance={balance.data}
         buy={buy}
       />
       <FullOutcome

src/components/strategies/edit/EditPriceNav.tsx

@@ -1,7 +1,4 @@
 import { Link, useParams } from '@tanstack/react-router';
-import { ReactComponent as IconDisposable } from 'assets/icons/disposable.svg';
-import { ReactComponent as IconRecurring } from 'assets/icons/recurring.svg';
-import { ReactComponent as IconOverlapping } from 'assets/icons/overlapping.svg';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { useEditStrategyCtx } from 'components/strategies/edit/EditStrategyContext';
 import {
@@ -14,21 +11,18 @@ import {
 const links = [
   {
     label: 'Limit / Range',
-    svg: <IconDisposable className="hidden size-14 md:inline" />,
     to: '/strategies/edit/$strategyId/prices/disposable',
     text: 'Buy or sell at a specific price, or gradually scale in or out of a position.',
     id: 'disposable',
   },
   {
     label: 'Recurring',
-    svg: <IconRecurring className="hidden size-14 md:inline" />,
     to: '/strategies/edit/$strategyId/prices/recurring',
     text: 'Create an automated trading cycle of buy low/sell high with two separate orders.',
     id: 'recurring',
   },
   {
     label: 'Concentrated',
-    svg: <IconOverlapping className="hidden size-14 md:inline" />,
     to: '/strategies/edit/$strategyId/prices/overlapping',
     text: 'Buy and sell within custom parameters with custom fee tier and auto-compounding fees.',
     id: 'overlapping',
@@ -54,7 +48,7 @@ export const EditPriceNav = ({ editType }: { editType: EditTypes }) => {
       </h2>
       <nav
         aria-labelledby="edit-strategy-nav"
-        className="text-14 grid grid-cols-1 gap-8 md:grid-cols-2"
+        className="text-14 grid grid-cols-1 gap-8 md:grid-cols-3"
         aria-label="Switch between type of strategy"
       >
         {links.map((link) => (
@@ -68,7 +62,6 @@ export const EditPriceNav = ({ editType }: { editType: EditTypes }) => {
             data-testid={`edit-${link.id}`}
             className="rounded-8 hover:border-background-400 flex items-center justify-center gap-8 border border-transparent bg-black p-8 text-white/60 aria-[current=page]:border-white aria-[current=page]:text-white"
           >
-            {link.svg}
             {link.label}
             <Tooltip element={link.text} iconClassName="size-14" />
           </Link>

src/components/strategies/edit/EditStrategyAllocatedBudget.tsx

@@ -70,13 +70,13 @@ export const EditBudgetTokenPrice: FC<BudgetTokenPriceProps> = (props) => {
 };
 
 interface BudgetDistributionProps {
-  order: BaseOrder;
+  marginalPrice?: string;
   onChange: (marginalPrice: MarginalPriceOptions) => void;
 }
 export const EditBudgetDistribution: FC<BudgetDistributionProps> = (props) => {
   const id = useId();
-  const { order, onChange } = props;
-  const checked = order.marginalPrice !== MarginalPriceOptions.maintain;
+  const { marginalPrice, onChange } = props;
+  const checked = marginalPrice !== MarginalPriceOptions.maintain;
   return (
     <div role="row" className="flex justify-between">
       <p role="columnheader" className="flex items-center">

src/components/strategies/overlapping/OverlappingAction.tsx

@@ -1,4 +1,4 @@
-import { FC, SyntheticEvent, useId, useRef } from 'react';
+import { FC, ReactNode, SyntheticEvent, useId, useRef } from 'react';
 import { Token } from 'libs/tokens';
 import { ReactComponent as IconDeposit } from 'assets/icons/deposit.svg';
 import { ReactComponent as IconWithdraw } from 'assets/icons/withdraw.svg';
@@ -20,6 +20,7 @@ interface Props {
   action?: BudgetAction;
   setAction: (action: BudgetAction) => void;
   warning?: string;
+  children?: ReactNode;
 }
 
 export const OverlappingAction: FC<Props> = (props) => {
@@ -34,6 +35,7 @@ export const OverlappingAction: FC<Props> = (props) => {
     budget,
     setBudget,
     warning,
+    children,
   } = props;
   const actionName = useId();
   const depositId = useId();
@@ -127,6 +129,7 @@ export const OverlappingAction: FC<Props> = (props) => {
           data-testid="input-budget"
         />
       </div>
+      {children}
     </details>
   );
 };

src/libs/routing/routes/trade.ts

@@ -14,6 +14,7 @@ import { TradeOverlapping } from 'pages/trade/overlapping';
 import { defaultEnd, defaultStart } from 'components/strategies/common/utils';
 import { OverlappingSearch } from 'components/strategies/common/types';
 import * as v from 'valibot';
+import { MarginalPriceOptions } from '@bancor/carbon-sdk/strategy-management';
 
 // TRADE TYPE
 export type StrategyType = 'recurring' | 'disposable' | 'overlapping';
@@ -98,6 +99,7 @@ const disposablePage = createRoute({
     min: v.optional(validInputNumber),
     max: v.optional(validInputNumber),
     budget: v.optional(validInputNumber),
+    marginalPrice: v.optional(v.enum(MarginalPriceOptions)),
   }),
 });
 
@@ -110,10 +112,12 @@ const recurringPage = createRoute({
     buyMax: v.optional(validInputNumber),
     buyBudget: v.optional(validInputNumber),
     buySettings: v.optional(v.picklist(['limit', 'range'])),
+    buyMarginalPrice: v.optional(v.enum(MarginalPriceOptions)),
     sellMin: v.optional(validInputNumber),
     sellMax: v.optional(validInputNumber),
     sellBudget: v.optional(validInputNumber),
     sellSettings: v.optional(v.picklist(['limit', 'range'])),
+    sellMarginalPrice: v.optional(v.enum(MarginalPriceOptions)),
   }),
 });