Merge pull request #1256 from bancorprotocol/issue-#1241

Replace "overlapping" with "concentrated liquidity"

README.md

@@ -104,7 +104,7 @@ The '/debug' route is available to debug the app (ex: localhost:3000/debug). It
 }
 ```
 
-where `spread` is in percentage, and `value` is the number of strategies to create.
+where `spread` (fee tier in the UI) is in percentage, and `value` is the number of strategies to create.
 
 # Customization
 

e2e/README.md

@@ -81,7 +81,7 @@ await expect(first.getTestId('strategy-pair')).toHaveText('ETH/DAI');
 As the same network was used for all tests, mutating a strategy in one test might impact another test. For now, it is suggested to try to use different token pairs for each test to avoid unwanted side effect, for example:
 
 - `ETH/DAI`: Create recurring strategy
-- `ETH/BNT`: Create overlapping strategy
+- `ETH/BNT`: Create concentrated liquidity strategy (overlapping in the code)
 - `ETH/USDC`: Trade Buy
 - `USDC/USDT`: Trade Sell
 

src/components/debug/DebugCreateStrategy.tsx

@@ -247,7 +247,7 @@ export const DebugCreateStrategy = () => {
       </fieldset>
 
       <fieldset className="flex flex-col gap-8 rounded border border-white/60 p-16">
-        <legend>Overlapping Spread</legend>
+        <legend>Concentrated Liquidity Fee Tier</legend>
         <Label label="Spread">
           <Input
             type="text"
@@ -259,7 +259,7 @@ export const DebugCreateStrategy = () => {
           />
         </Label>
         <p id="strategy-spread-description" className="text-12 text-white/60">
-          Spread will create an overlapping strategy. You still need to set the
+          Spread will create a concentrated liquidity. You still need to set the
           correct budget.
         </p>
       </fieldset>

src/components/simulator/input/SimInputStrategyType.tsx

@@ -7,6 +7,7 @@ import { SimulatorType } from 'libs/routing/routes/sim';
 import { Link } from 'libs/routing';
 
 interface ItemProps {
+  title: string;
   label: SimulatorType;
   svg: JSX.Element;
   tooltipText: string;
@@ -20,16 +21,18 @@ interface Props {
 export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
   const items: ItemProps[] = [
     {
+      title: 'Recurring',
       label: 'recurring',
       svg: <IconTwoRanges className="w-37 h-16" />,
       tooltipText:
         'Create buy and sell orders (limit or range) that are linked together. Newly acquired funds automatically rotate between them, creating an endless trading cycle without need for manual intervention.',
     },
     {
+      title: 'Concentrated',
       label: 'overlapping',
       svg: <IconOverlappingStrategy className="w-37 h-16" />,
       tooltipText:
-        'A concentrated position where you buy and sell in a custom price range, used to create a bid-ask spread that moves as the market does.',
+        'A concentrated position where you buy and sell in a custom price range, used to create a bid-ask fee tier that moves as the market does.',
     },
   ];
 
@@ -42,7 +45,7 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
         <h2 className="text-18 font-weight-500 m-0">Strategy Type</h2>
       </header>
       <article role="tablist" className="grid grid-cols-2 gap-8">
-        {items.map(({ label, svg, tooltipText }) => (
+        {items.map(({ title, label, svg, tooltipText }) => (
           <Link
             role="tab"
             id={'tab-' + label}
@@ -70,7 +73,7 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
                       isActive ? 'text-white' : 'text-white/40'
                     }`}
                   >
-                    {label}
+                    {title}
                   </span>
                   <Tooltip
                     element={<div>{tooltipText}</div>}

src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx

@@ -332,7 +332,7 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
       </article>
       <article className="rounded-10 bg-background-900 flex w-full flex-col gap-10 p-20">
         <header className="mb-10 flex items-center gap-8 ">
-          <h3 className="text-18 font-weight-500 flex-1">Set Spread</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Set Fee Tier</h3>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
             iconClassName="h-14 w-14 text-white/60"

src/components/simulator/result/SimResultSummaryTokens.tsx

@@ -7,6 +7,11 @@ interface Props {
   strategyType: 'recurring' | 'overlapping';
 }
 
+const title = {
+  recurring: 'Recurring',
+  overlapping: 'Concentrated Liquidity',
+};
+
 export const SimResultSummaryTokens = ({
   baseToken,
   quoteToken,
@@ -22,7 +27,7 @@ export const SimResultSummaryTokens = ({
           {quoteToken.symbol}
         </h2>
         <h3 className="text-12 flex items-center gap-8 capitalize text-white/60">
-          {strategyType}
+          {title[strategyType]}
         </h3>
       </div>
     </article>

src/components/strategies/create/CreateOverlapping.tsx

@@ -366,7 +366,7 @@ export const CreateOverlapping: FC<Props> = (props) => {
         className="rounded-10 bg-background-900 flex w-full flex-col gap-10 p-20"
       >
         <header className="mb-10 flex items-center gap-8 ">
-          <h3 className="text-18 font-weight-500 flex-1">Set Spread</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Set Fee Tier</h3>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
             iconClassName="h-14 w-14 text-white/60"

src/components/strategies/create/useCreateStrategyTypeMenu.tsx

@@ -123,9 +123,9 @@ export const getStrategyTypeItem = (
     id: 'two-ranges',
   },
   {
-    label: 'Overlapping Liquidity',
+    label: 'Concentrated Liquidity',
     description:
-      'A concentrated position where you buy and sell in a custom price range, used to create a bid-ask spread that moves as the market does',
+      'A concentrated position where you buy and sell in a custom price range, used to create a bid-ask fee tier that moves as the market does',
     benefits: [
       {
         summary: 'No trading or gas fees on filled orders',

src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx

@@ -472,7 +472,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
       </article>
       <article className="rounded-10 bg-background-900 flex w-full flex-col gap-10 p-20">
         <header className="mb-10 flex items-center gap-8 ">
-          <h2 className="text-18 font-weight-500 flex-1">Edit Spread</h2>
+          <h2 className="text-18 font-weight-500 flex-1">Edit Fee Tier</h2>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
             iconClassName="h-14 w-14 text-white/60"

src/components/strategies/overlapping/OverlappingAnchor.tsx

@@ -23,7 +23,7 @@ export const OverlappingAnchor: FC<Props> = (props) => {
         <h2 className="text-18">Budget</h2>
         <Tooltip
           iconClassName="size-14 text-white/60"
-          element="Indicate the token, action and amount for the strategy. Note that in order to maintain the overlapping behavior, the 2nd budget indication will be calculated using the prices, spread and budget values you use."
+          element="Indicate the token, action and amount for the strategy. Note that in order to maintain the concentrated liquidity behavior, the 2nd budget indication will be calculated using the prices, fee tier and budget values you use."
         />
       </header>
       <p className="text-14 text-white/80">Please select a token to proceed.</p>

src/components/strategies/overlapping/OverlappingMarketPrice.tsx

@@ -87,7 +87,7 @@ export const OverlappingInitMarketPriceField = (props: FieldProps) => {
       {!externalPrice && <SetPriceText base={base} />}
       <BudgetInput
         title={`Enter Market Price (${quote.symbol} per 1 ${base.symbol})`}
-        titleTooltip="Price used to calculate overlapping strategy params"
+        titleTooltip="Price used to calculate concentrated liquidity strategy params"
         placeholder="Enter Price"
         value={localPrice}
         onChange={changePrice}
@@ -121,7 +121,7 @@ export const OverlappingInitMarketPriceField = (props: FieldProps) => {
       )}
       <p className="text-12 text-white/60">
         By adjusting the market price, you alter the price range within which
-        your overlapping strategy initiates.
+        your concentrated liquidity strategy initiates.
         {!!externalPrice && <EditPriceText />}
       </p>
       {!error && showApproval && (

src/components/strategies/overlapping/OverlappingSpread.tsx

@@ -22,7 +22,7 @@ interface Props {
 }
 
 const getWarning = (maxSpread: number) => {
-  return `Given price range, max spread cannot exceed ${maxSpread}%`;
+  return `Given price range, max fee tier cannot exceed ${maxSpread}%`;
 };
 
 const round = (value: number) => Math.round(value * 100) / 100;
@@ -160,12 +160,12 @@ export const OverlappingSpread: FC<Props> = (props) => {
       )}
       {spread <= 0 && (
         <WarningMessageWithIcon htmlFor="spread-custom" isError>
-          The spread should be above 0%
+          The fee tier should be above 0%
         </WarningMessageWithIcon>
       )}
       {spread > 100 && (
         <WarningMessageWithIcon htmlFor="spread-custom" isError>
-          The spread should be equal or below 100%
+          The fee tier should be equal or below 100%
         </WarningMessageWithIcon>
       )}
     </>

src/components/strategies/overlapping/OverlappingStrategyGraph.tsx

@@ -547,7 +547,7 @@ export const OverlappingStrategyGraph: FC<Props> = (props) => {
           <span>Geometric mean price</span>
         )}
         <span role="separator">·</span>
-        <span>Spread {spread || 0}%</span>
+        <span>Fee Tier {spread || 0}%</span>
       </figcaption>
       <svg
         ref={svg}