Set Price Range
@@ -335,7 +335,7 @@ export const CreateOverlappingStrategy: FC = (props) => {
setRangeError={setRangeError}
/>
Set Fee Tier
Budget
+Budget
++ Please select a token to proceed. +
+- Please select a token to proceed. -
@@ -397,7 +399,7 @@ export const CreateOverlappingStrategy: FC = (props) => {
{anchor && (
diff --git a/src/components/strategies/common/InputBudget.tsx b/src/components/strategies/common/InputBudget.tsx
index da9d34425..a553aef63 100644
--- a/src/components/strategies/common/InputBudget.tsx
+++ b/src/components/strategies/common/InputBudget.tsx
@@ -136,7 +136,7 @@ export const InputBudget: FC = (props) => {
size={1}
placeholder={placeholder}
className={`
- text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
+ text-16 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
${error ? 'text-error' : ''}
${disabled ? 'text-white/40' : ''}
${disabled ? 'cursor-not-allowed' : ''}
diff --git a/src/components/strategies/common/InputLimit.tsx b/src/components/strategies/common/InputLimit.tsx
index 93be8bfc0..863abd79c 100644
--- a/src/components/strategies/common/InputLimit.tsx
+++ b/src/components/strategies/common/InputLimit.tsx
@@ -115,7 +115,7 @@ export const InputLimit: FC = (props) => {
aria-label="Enter Price"
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+ 'text-16 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
displayError && 'text-error'
)}
data-testid="input-price"
diff --git a/src/components/strategies/common/InputRange.tsx b/src/components/strategies/common/InputRange.tsx
index 330d79990..103d5bc9a 100644
--- a/src/components/strategies/common/InputRange.tsx
+++ b/src/components/strategies/common/InputRange.tsx
@@ -176,7 +176,7 @@ export const InputRange: FC = ({
value={localMin}
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+ 'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
hasMinError && 'text-error'
)}
onChange={(e) => onMinChange(e.target.value)}
diff --git a/src/components/strategies/common/TokenSelection.tsx b/src/components/strategies/common/TokenSelection.tsx
index 02a9b0e6b..f264ab422 100644
--- a/src/components/strategies/common/TokenSelection.tsx
+++ b/src/components/strategies/common/TokenSelection.tsx
@@ -8,28 +8,8 @@ import { useModal } from 'hooks/useModal';
import { ModalTokenListData } from 'libs/modals/modals/ModalTokenList';
import { useTradeCtx } from 'components/trade/TradeContext';
import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
-import { Tooltip } from 'components/common/tooltip/Tooltip';
import { SuspiciousToken } from 'components/common/DisplayPair';
-export const TokenSelectionTooltip = () => {
- return (
-
- Selecting the tokens you would like to create a strategy for.
-
- Buy or Sell token (also called Base token) is the token
- you would like to buy or sell in the strategy.
-
- With token (also called Quote token) is the token you
- would denominate the rates in.
-
- }
- />
- );
-};
-
export const TokenSelection = () => {
const { base, quote } = useTradeCtx();
const navigate = useNavigate({ from: '/trade' });
@@ -93,11 +73,7 @@ export const TokenSelection = () => {
};
return (
-
-
- Token Pair
-
-
+
= ({
aria-label="Enter Price"
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+ 'text-16 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
error && 'text-error'
)}
data-testid="input-price"
diff --git a/src/components/strategies/create/BuySellBlock/InputRange.tsx b/src/components/strategies/create/BuySellBlock/InputRange.tsx
index 736e0b419..b7b079a28 100644
--- a/src/components/strategies/create/BuySellBlock/InputRange.tsx
+++ b/src/components/strategies/create/BuySellBlock/InputRange.tsx
@@ -177,7 +177,7 @@ export const InputRange: FC = ({
value={max}
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+ 'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
error && 'text-error'
)}
onChange={handleChangeMax}
diff --git a/src/components/strategies/create/CreateForm.tsx b/src/components/strategies/create/CreateForm.tsx
index 3e1822a1b..2ec8b7157 100644
--- a/src/components/strategies/create/CreateForm.tsx
+++ b/src/components/strategies/create/CreateForm.tsx
@@ -101,71 +101,73 @@ export const CreateForm: FC = (props) => {
return (
);
};
diff --git a/src/components/strategies/create/CreateOrder.tsx b/src/components/strategies/create/CreateOrder.tsx
index 95ab07b9a..7e7424e65 100644
--- a/src/components/strategies/create/CreateOrder.tsx
+++ b/src/components/strategies/create/CreateOrder.tsx
@@ -14,6 +14,7 @@ import { cn } from 'utils/helpers';
import { LogoImager } from 'components/common/imager/Imager';
import { getDefaultOrder } from './utils';
import { useMarketPrice } from 'hooks/useMarketPrice';
+import style from 'components/strategies/common/order.module.css';
interface Props {
base: Token;
@@ -101,91 +102,93 @@ export const CreateOrder: FC = ({
};
const headerProps = { titleId, order, base, buy, setSettings };
- const border = buy
- ? 'border-buy/50 focus-within:border-buy'
- : 'border-sell/50 focus-within:border-sell';
+
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
);
};
diff --git a/src/components/strategies/create/CreateOverlappingBudget.tsx b/src/components/strategies/create/CreateOverlappingBudget.tsx
index 5e662cd17..cde7aec78 100644
--- a/src/components/strategies/create/CreateOverlappingBudget.tsx
+++ b/src/components/strategies/create/CreateOverlappingBudget.tsx
@@ -70,7 +70,7 @@ export const CreateOverlappingBudget: FC = (props) => {
return (
-
+
= (props) => {
diff --git a/src/components/strategies/create/CreateOverlappingPrice.tsx b/src/components/strategies/create/CreateOverlappingPrice.tsx
index f5cef41c0..19c43b78c 100644
--- a/src/components/strategies/create/CreateOverlappingPrice.tsx
+++ b/src/components/strategies/create/CreateOverlappingPrice.tsx
@@ -86,10 +86,7 @@ export const CreateOverlappingPrice: FC = (props) => {
return (
-
+
Set Price Range
@@ -116,7 +113,7 @@ export const CreateOverlappingPrice: FC = (props) => {
required
/>
-
+
Set Fee Tier
= (props) => {
setSpread={setSpread}
/>
-
+
Budget
diff --git a/src/components/strategies/edit/EditBudgetFields.tsx b/src/components/strategies/edit/EditBudgetFields.tsx
index 01111f503..c3e4afd28 100644
--- a/src/components/strategies/edit/EditBudgetFields.tsx
+++ b/src/components/strategies/edit/EditBudgetFields.tsx
@@ -12,6 +12,8 @@ import { InputBudget } from '../common/InputBudget';
import { Order, useGetTokenBalance } from 'libs/queries';
import { SafeDecimal } from 'libs/safedecimal';
import { isZero } from '../common/utils';
+import { cn } from 'utils/helpers';
+import style from 'components/strategies/common/order.module.css';
interface Props {
budget: string;
@@ -66,12 +68,9 @@ export const EditStrategyBudgetField: FC = ({
return (
diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx
index cf51361a6..9360821a1 100644
--- a/src/components/strategies/edit/EditOverlappingBudget.tsx
+++ b/src/components/strategies/edit/EditOverlappingBudget.tsx
@@ -169,7 +169,7 @@ export const EditOverlappingBudget: FC = (props) => {
return (
{hasNoBudget(strategy) && (
-
+
Market Price
{tokenAmount(marketPrice, quote)}
@@ -187,17 +187,19 @@ export const EditOverlappingBudget: FC = (props) => {
/>
)}
-
+
- Budget
+
+ Budget
+
+ Please select a token to proceed.
+
+
-
- Please select a token to proceed.
-
= (props) => {
/>
{anchor && editType && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx
index 701ce711a..53cc62130 100644
--- a/src/components/strategies/edit/EditOverlappingPrice.tsx
+++ b/src/components/strategies/edit/EditOverlappingPrice.tsx
@@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => {
{displayPrice && (
<>
-
+
Edit Price Range
@@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => {
required
/>
-
+
Edit Fee Tier
= (props) => {
>
)}
{!displayPrice && (
-
+
= (props) => {
/>
)}
-
+
Budget
= (props) => {
/>
{anchor && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx
index a6b200849..38b19ba01 100644
--- a/src/components/strategies/edit/EditPriceFields.tsx
+++ b/src/components/strategies/edit/EditPriceFields.tsx
@@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction';
import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
import { isZero } from '../common/utils';
import { SafeDecimal } from 'libs/safedecimal';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
interface Props {
order: EditOrderBlock;
@@ -108,92 +110,93 @@ export const EditStrategyPriceField: FC = ({
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
- {order.settings === 'range' ? (
-
- ) : (
-
- )}
-
-
- {showDistribution() && (
-
-
+
+
+ {buy ? 'Buy Low' : 'Sell High'}
+
+
+ {base.symbol}
+
+
+
+
+ {order.settings === 'range' ? (
+
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+
+ {showDistribution() && (
+
+
+
+ )}
+
+
+
+
);
};
diff --git a/src/components/strategies/edit/EditPriceNav.tsx b/src/components/strategies/edit/EditPriceNav.tsx
index a11b26b9e..4086280a9 100644
--- a/src/components/strategies/edit/EditPriceNav.tsx
+++ b/src/components/strategies/edit/EditPriceNav.tsx
@@ -42,8 +42,8 @@ export const EditPriceNav = ({ editType }: { editType: EditTypes }) => {
if (editType !== 'editPrices' && editType !== 'renew') return;
return (
-
-
+
+
Trading Strategy
diff --git a/src/components/strategies/common/InputBudget.tsx b/src/components/strategies/common/InputBudget.tsx
index da9d34425..a553aef63 100644
--- a/src/components/strategies/common/InputBudget.tsx
+++ b/src/components/strategies/common/InputBudget.tsx
@@ -136,7 +136,7 @@ export const InputBudget: FC = (props) => {
size={1}
placeholder={placeholder}
className={`
- text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
+ text-16 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
${error ? 'text-error' : ''}
${disabled ? 'text-white/40' : ''}
${disabled ? 'cursor-not-allowed' : ''}
diff --git a/src/components/strategies/common/InputLimit.tsx b/src/components/strategies/common/InputLimit.tsx
index 93be8bfc0..863abd79c 100644
--- a/src/components/strategies/common/InputLimit.tsx
+++ b/src/components/strategies/common/InputLimit.tsx
@@ -115,7 +115,7 @@ export const InputLimit: FC = (props) => {
aria-label="Enter Price"
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+ 'text-16 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
displayError && 'text-error'
)}
data-testid="input-price"
diff --git a/src/components/strategies/common/InputRange.tsx b/src/components/strategies/common/InputRange.tsx
index 330d79990..103d5bc9a 100644
--- a/src/components/strategies/common/InputRange.tsx
+++ b/src/components/strategies/common/InputRange.tsx
@@ -176,7 +176,7 @@ export const InputRange: FC = ({
value={localMin}
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+ 'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
hasMinError && 'text-error'
)}
onChange={(e) => onMinChange(e.target.value)}
diff --git a/src/components/strategies/common/TokenSelection.tsx b/src/components/strategies/common/TokenSelection.tsx
index 02a9b0e6b..f264ab422 100644
--- a/src/components/strategies/common/TokenSelection.tsx
+++ b/src/components/strategies/common/TokenSelection.tsx
@@ -8,28 +8,8 @@ import { useModal } from 'hooks/useModal';
import { ModalTokenListData } from 'libs/modals/modals/ModalTokenList';
import { useTradeCtx } from 'components/trade/TradeContext';
import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
-import { Tooltip } from 'components/common/tooltip/Tooltip';
import { SuspiciousToken } from 'components/common/DisplayPair';
-export const TokenSelectionTooltip = () => {
- return (
-
- Selecting the tokens you would like to create a strategy for.
-
- Buy or Sell token (also called Base token) is the token
- you would like to buy or sell in the strategy.
-
- With token (also called Quote token) is the token you
- would denominate the rates in.
-
- }
- />
- );
-};
-
export const TokenSelection = () => {
const { base, quote } = useTradeCtx();
const navigate = useNavigate({ from: '/trade' });
@@ -93,11 +73,7 @@ export const TokenSelection = () => {
};
return (
-
-
- Token Pair
-
-
+
= ({
aria-label="Enter Price"
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+ 'text-16 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
error && 'text-error'
)}
data-testid="input-price"
diff --git a/src/components/strategies/create/BuySellBlock/InputRange.tsx b/src/components/strategies/create/BuySellBlock/InputRange.tsx
index 736e0b419..b7b079a28 100644
--- a/src/components/strategies/create/BuySellBlock/InputRange.tsx
+++ b/src/components/strategies/create/BuySellBlock/InputRange.tsx
@@ -177,7 +177,7 @@ export const InputRange: FC = ({
value={max}
placeholder="Enter Price"
className={cn(
- 'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+ 'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
error && 'text-error'
)}
onChange={handleChangeMax}
diff --git a/src/components/strategies/create/CreateForm.tsx b/src/components/strategies/create/CreateForm.tsx
index 3e1822a1b..2ec8b7157 100644
--- a/src/components/strategies/create/CreateForm.tsx
+++ b/src/components/strategies/create/CreateForm.tsx
@@ -101,71 +101,73 @@ export const CreateForm: FC = (props) => {
return (
);
};
diff --git a/src/components/strategies/create/CreateOrder.tsx b/src/components/strategies/create/CreateOrder.tsx
index 95ab07b9a..7e7424e65 100644
--- a/src/components/strategies/create/CreateOrder.tsx
+++ b/src/components/strategies/create/CreateOrder.tsx
@@ -14,6 +14,7 @@ import { cn } from 'utils/helpers';
import { LogoImager } from 'components/common/imager/Imager';
import { getDefaultOrder } from './utils';
import { useMarketPrice } from 'hooks/useMarketPrice';
+import style from 'components/strategies/common/order.module.css';
interface Props {
base: Token;
@@ -101,91 +102,93 @@ export const CreateOrder: FC = ({
};
const headerProps = { titleId, order, base, buy, setSettings };
- const border = buy
- ? 'border-buy/50 focus-within:border-buy'
- : 'border-sell/50 focus-within:border-sell';
+
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
);
};
diff --git a/src/components/strategies/create/CreateOverlappingBudget.tsx b/src/components/strategies/create/CreateOverlappingBudget.tsx
index 5e662cd17..cde7aec78 100644
--- a/src/components/strategies/create/CreateOverlappingBudget.tsx
+++ b/src/components/strategies/create/CreateOverlappingBudget.tsx
@@ -70,7 +70,7 @@ export const CreateOverlappingBudget: FC = (props) => {
return (
-
+
= (props) => {
diff --git a/src/components/strategies/create/CreateOverlappingPrice.tsx b/src/components/strategies/create/CreateOverlappingPrice.tsx
index f5cef41c0..19c43b78c 100644
--- a/src/components/strategies/create/CreateOverlappingPrice.tsx
+++ b/src/components/strategies/create/CreateOverlappingPrice.tsx
@@ -86,10 +86,7 @@ export const CreateOverlappingPrice: FC = (props) => {
return (
-
+
Set Price Range
@@ -116,7 +113,7 @@ export const CreateOverlappingPrice: FC = (props) => {
required
/>
-
+
Set Fee Tier
= (props) => {
setSpread={setSpread}
/>
-
+
Budget
diff --git a/src/components/strategies/edit/EditBudgetFields.tsx b/src/components/strategies/edit/EditBudgetFields.tsx
index 01111f503..c3e4afd28 100644
--- a/src/components/strategies/edit/EditBudgetFields.tsx
+++ b/src/components/strategies/edit/EditBudgetFields.tsx
@@ -12,6 +12,8 @@ import { InputBudget } from '../common/InputBudget';
import { Order, useGetTokenBalance } from 'libs/queries';
import { SafeDecimal } from 'libs/safedecimal';
import { isZero } from '../common/utils';
+import { cn } from 'utils/helpers';
+import style from 'components/strategies/common/order.module.css';
interface Props {
budget: string;
@@ -66,12 +68,9 @@ export const EditStrategyBudgetField: FC = ({
return (
diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx
index cf51361a6..9360821a1 100644
--- a/src/components/strategies/edit/EditOverlappingBudget.tsx
+++ b/src/components/strategies/edit/EditOverlappingBudget.tsx
@@ -169,7 +169,7 @@ export const EditOverlappingBudget: FC = (props) => {
return (
{hasNoBudget(strategy) && (
-
+
Market Price
{tokenAmount(marketPrice, quote)}
@@ -187,17 +187,19 @@ export const EditOverlappingBudget: FC = (props) => {
/>
)}
-
+
- Budget
+
+ Budget
+
+ Please select a token to proceed.
+
+
-
- Please select a token to proceed.
-
= (props) => {
/>
{anchor && editType && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx
index 701ce711a..53cc62130 100644
--- a/src/components/strategies/edit/EditOverlappingPrice.tsx
+++ b/src/components/strategies/edit/EditOverlappingPrice.tsx
@@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => {
{displayPrice && (
<>
-
+
Edit Price Range
@@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => {
required
/>
-
+
Edit Fee Tier
= (props) => {
>
)}
{!displayPrice && (
-
+
= (props) => {
/>
)}
-
+
Budget
= (props) => {
/>
{anchor && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx
index a6b200849..38b19ba01 100644
--- a/src/components/strategies/edit/EditPriceFields.tsx
+++ b/src/components/strategies/edit/EditPriceFields.tsx
@@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction';
import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
import { isZero } from '../common/utils';
import { SafeDecimal } from 'libs/safedecimal';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
interface Props {
order: EditOrderBlock;
@@ -108,92 +110,93 @@ export const EditStrategyPriceField: FC = ({
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
- {order.settings === 'range' ? (
-
- ) : (
-
- )}
-
-
- {showDistribution() && (
-
-
+
+
+ {buy ? 'Buy Low' : 'Sell High'}
+
+
+ {base.symbol}
+
+
+
+
+ {order.settings === 'range' ? (
+
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+
+ {showDistribution() && (
+
+
+
+ )}
+
+
+
+
);
};
diff --git a/src/components/strategies/edit/EditPriceNav.tsx b/src/components/strategies/edit/EditPriceNav.tsx
index a11b26b9e..4086280a9 100644
--- a/src/components/strategies/edit/EditPriceNav.tsx
+++ b/src/components/strategies/edit/EditPriceNav.tsx
@@ -42,8 +42,8 @@ export const EditPriceNav = ({ editType }: { editType: EditTypes }) => {
if (editType !== 'editPrices' && editType !== 'renew') return;
return (
-
-
+
+
Trading Strategy
- Buy or Sell token (also called Base token) is the token - you would like to buy or sell in the strategy. -
- With token (also called Quote token) is the token you - would denominate the rates in. - - } - /> - ); -}; - export const TokenSelection = () => { const { base, quote } = useTradeCtx(); const navigate = useNavigate({ from: '/trade' }); @@ -93,11 +73,7 @@ export const TokenSelection = () => { }; return ( -
Token Pair
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
diff --git a/src/components/strategies/create/CreateOverlappingPrice.tsx b/src/components/strategies/create/CreateOverlappingPrice.tsx
index f5cef41c0..19c43b78c 100644
--- a/src/components/strategies/create/CreateOverlappingPrice.tsx
+++ b/src/components/strategies/create/CreateOverlappingPrice.tsx
@@ -86,10 +86,7 @@ export const CreateOverlappingPrice: FC = (props) => {
return (
-
+
Set Price Range
@@ -116,7 +113,7 @@ export const CreateOverlappingPrice: FC = (props) => {
required
/>
-
+
Set Fee Tier
= (props) => {
setSpread={setSpread}
/>
-
+
Budget
diff --git a/src/components/strategies/edit/EditBudgetFields.tsx b/src/components/strategies/edit/EditBudgetFields.tsx
index 01111f503..c3e4afd28 100644
--- a/src/components/strategies/edit/EditBudgetFields.tsx
+++ b/src/components/strategies/edit/EditBudgetFields.tsx
@@ -12,6 +12,8 @@ import { InputBudget } from '../common/InputBudget';
import { Order, useGetTokenBalance } from 'libs/queries';
import { SafeDecimal } from 'libs/safedecimal';
import { isZero } from '../common/utils';
+import { cn } from 'utils/helpers';
+import style from 'components/strategies/common/order.module.css';
interface Props {
budget: string;
@@ -66,12 +68,9 @@ export const EditStrategyBudgetField: FC = ({
return (
diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx
index cf51361a6..9360821a1 100644
--- a/src/components/strategies/edit/EditOverlappingBudget.tsx
+++ b/src/components/strategies/edit/EditOverlappingBudget.tsx
@@ -169,7 +169,7 @@ export const EditOverlappingBudget: FC = (props) => {
return (
{hasNoBudget(strategy) && (
-
+
Market Price
{tokenAmount(marketPrice, quote)}
@@ -187,17 +187,19 @@ export const EditOverlappingBudget: FC = (props) => {
/>
)}
-
+
- Budget
+
+ Budget
+
+ Please select a token to proceed.
+
+
-
- Please select a token to proceed.
-
= (props) => {
/>
{anchor && editType && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx
index 701ce711a..53cc62130 100644
--- a/src/components/strategies/edit/EditOverlappingPrice.tsx
+++ b/src/components/strategies/edit/EditOverlappingPrice.tsx
@@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => {
{displayPrice && (
<>
-
+
Edit Price Range
@@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => {
required
/>
-
+
Edit Fee Tier
= (props) => {
>
)}
{!displayPrice && (
-
+
= (props) => {
/>
)}
-
+
Budget
= (props) => {
/>
{anchor && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx
index a6b200849..38b19ba01 100644
--- a/src/components/strategies/edit/EditPriceFields.tsx
+++ b/src/components/strategies/edit/EditPriceFields.tsx
@@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction';
import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
import { isZero } from '../common/utils';
import { SafeDecimal } from 'libs/safedecimal';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
interface Props {
order: EditOrderBlock;
@@ -108,92 +110,93 @@ export const EditStrategyPriceField: FC = ({
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
- {order.settings === 'range' ? (
-
- ) : (
-
- )}
-
-
- {showDistribution() && (
-
-
+
+
+ {buy ? 'Buy Low' : 'Sell High'}
+
+
+ {base.symbol}
+
+
+
+
+ {order.settings === 'range' ? (
+
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+
+ {showDistribution() && (
+
+
+
+ )}
+
+
+
+
Set Price Range
@@ -116,7 +113,7 @@ export const CreateOverlappingPrice: FC = (props) => {
required
/>
Set Fee Tier
Budget
diff --git a/src/components/strategies/edit/EditBudgetFields.tsx b/src/components/strategies/edit/EditBudgetFields.tsx
index 01111f503..c3e4afd28 100644
--- a/src/components/strategies/edit/EditBudgetFields.tsx
+++ b/src/components/strategies/edit/EditBudgetFields.tsx
@@ -12,6 +12,8 @@ import { InputBudget } from '../common/InputBudget';
import { Order, useGetTokenBalance } from 'libs/queries';
import { SafeDecimal } from 'libs/safedecimal';
import { isZero } from '../common/utils';
+import { cn } from 'utils/helpers';
+import style from 'components/strategies/common/order.module.css';
interface Props {
budget: string;
@@ -66,12 +68,9 @@ export const EditStrategyBudgetField: FC = ({
return (
diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx
index cf51361a6..9360821a1 100644
--- a/src/components/strategies/edit/EditOverlappingBudget.tsx
+++ b/src/components/strategies/edit/EditOverlappingBudget.tsx
@@ -169,7 +169,7 @@ export const EditOverlappingBudget: FC = (props) => {
return (
{hasNoBudget(strategy) && (
-
+
Market Price
{tokenAmount(marketPrice, quote)}
@@ -187,17 +187,19 @@ export const EditOverlappingBudget: FC = (props) => {
/>
)}
-
+
- Budget
+
+ Budget
+
+ Please select a token to proceed.
+
+
-
- Please select a token to proceed.
-
= (props) => {
/>
{anchor && editType && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx
index 701ce711a..53cc62130 100644
--- a/src/components/strategies/edit/EditOverlappingPrice.tsx
+++ b/src/components/strategies/edit/EditOverlappingPrice.tsx
@@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => {
{displayPrice && (
<>
-
+
Edit Price Range
@@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => {
required
/>
-
+
Edit Fee Tier
= (props) => {
>
)}
{!displayPrice && (
-
+
= (props) => {
/>
)}
-
+
Budget
= (props) => {
/>
{anchor && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx
index a6b200849..38b19ba01 100644
--- a/src/components/strategies/edit/EditPriceFields.tsx
+++ b/src/components/strategies/edit/EditPriceFields.tsx
@@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction';
import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
import { isZero } from '../common/utils';
import { SafeDecimal } from 'libs/safedecimal';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
interface Props {
order: EditOrderBlock;
@@ -108,92 +110,93 @@ export const EditStrategyPriceField: FC = ({
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
- {order.settings === 'range' ? (
-
- ) : (
-
- )}
-
-
- {showDistribution() && (
-
-
+
+
+ {buy ? 'Buy Low' : 'Sell High'}
+
+
+ {base.symbol}
+
+
+
+
+ {order.settings === 'range' ? (
+
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+
+ {showDistribution() && (
+
+
+
+ )}
+
+
+
+
diff --git a/src/components/strategies/edit/EditOverlappingBudget.tsx b/src/components/strategies/edit/EditOverlappingBudget.tsx
index cf51361a6..9360821a1 100644
--- a/src/components/strategies/edit/EditOverlappingBudget.tsx
+++ b/src/components/strategies/edit/EditOverlappingBudget.tsx
@@ -169,7 +169,7 @@ export const EditOverlappingBudget: FC = (props) => {
return (
{hasNoBudget(strategy) && (
-
+
Market Price
{tokenAmount(marketPrice, quote)}
@@ -187,17 +187,19 @@ export const EditOverlappingBudget: FC = (props) => {
/>
)}
-
+
- Budget
+
+ Budget
+
+ Please select a token to proceed.
+
+
-
- Please select a token to proceed.
-
= (props) => {
/>
{anchor && editType && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditOverlappingPrice.tsx b/src/components/strategies/edit/EditOverlappingPrice.tsx
index 701ce711a..53cc62130 100644
--- a/src/components/strategies/edit/EditOverlappingPrice.tsx
+++ b/src/components/strategies/edit/EditOverlappingPrice.tsx
@@ -205,7 +205,7 @@ export const EditOverlappingPrice: FC = (props) => {
{displayPrice && (
<>
-
+
Edit Price Range
@@ -232,7 +232,7 @@ export const EditOverlappingPrice: FC = (props) => {
required
/>
-
+
Edit Fee Tier
= (props) => {
>
)}
{!displayPrice && (
-
+
= (props) => {
/>
)}
-
+
Budget
= (props) => {
/>
{anchor && (
-
+
= (props) => {
{anchor && (
diff --git a/src/components/strategies/edit/EditPriceFields.tsx b/src/components/strategies/edit/EditPriceFields.tsx
index a6b200849..38b19ba01 100644
--- a/src/components/strategies/edit/EditPriceFields.tsx
+++ b/src/components/strategies/edit/EditPriceFields.tsx
@@ -15,6 +15,8 @@ import { OverlappingAction } from '../overlapping/OverlappingAction';
import { EditBudgetDistribution } from './EditStrategyAllocatedBudget';
import { isZero } from '../common/utils';
import { SafeDecimal } from 'libs/safedecimal';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
interface Props {
order: EditOrderBlock;
@@ -108,92 +110,93 @@ export const EditStrategyPriceField: FC = ({
return (
{settings}
-
-
-
- {buy ? 'Buy Low' : 'Sell High'}
-
-
- {base.symbol}
-
-
-
-
- {order.settings === 'range' ? (
-
- ) : (
-
- )}
-
-
- {showDistribution() && (
-
-
+
+
+ {buy ? 'Buy Low' : 'Sell High'}
+
+
+ {base.symbol}
+
+
+
+
+ {order.settings === 'range' ? (
+
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+
+ {showDistribution() && (
+
+
+
+ )}
+
+
+
+
Market Price
{tokenAmount(marketPrice, quote)} @@ -187,17 +187,19 @@ export const EditOverlappingBudget: FCBudget
+ +Budget
++ Please select a token to proceed. +
+- Please select a token to proceed. -