Chart works with values below 1wei

e2e/pages/strategy.spec.ts

@@ -520,7 +520,7 @@ const testCases: CreateStrategyTestCase[] = [
       create: {
         buy: {
           min: '0.3',
-          max: '0.545454',
+          max: '0.545455',
           budget: '12.501572',
         },
         sell: {
@@ -536,7 +536,7 @@ const testCases: CreateStrategyTestCase[] = [
         totalFiat: '$25.11',
         buy: {
           min: '0.30 USDC',
-          max: '0.545454 USDC',
+          max: '0.545455 USDC',
           budget: '12.50 USDC',
           fiat: '$12.50',
         },

e2e/utils/DebugDriver.ts

@@ -76,23 +76,13 @@ export class DebugDriver {
   async createStrategy(testCase: CreateStrategyTestCase) {
     const { base, quote } = testCase;
     const { buy, sell, spread } = toDebugStrategy(testCase);
-    // TODO: use textarea shortcut instead of filling each field.
-    // Currently this revert with Dai/insufficient-allowance for some reason
-    // await this.page.getByTestId('strategy-json-shortcut').fill(JSON.stringify(template));
     for (const token of [base, quote]) {
       await waitFor(this.page, `balance-${token}`, 30_000);
     }
-
-    await this.page.getByTestId('spread').fill(spread ?? '');
-    await this.page.getByTestId(`token-${base}`).click();
-    await this.page.getByTestId(`token-${quote}`).click();
-    await this.page.getByTestId('buyMin').fill(buy.min);
-    await this.page.getByTestId('buyMax').fill(buy.max);
-    await this.page.getByTestId('buyBudget').fill(buy.budget);
-    await this.page.getByTestId('sellMin').fill(sell.min);
-    await this.page.getByTestId('sellMax').fill(sell.max);
-    await this.page.getByTestId('sellBudget').fill(sell.budget);
-    await this.page.getByTestId('strategy-amount').fill('1');
+    const template = { base, quote, buy, sell, spread };
+    await this.page
+      .getByTestId('strategy-json-shortcut')
+      .fill(JSON.stringify(template));
     await this.page.getByTestId('create-strategies').click();
     await checkApproval(this.page, [base, quote]);
     await this.page.getByTestId('creating-strategies').waitFor({

e2e/utils/modal.ts

@@ -24,4 +24,5 @@ export const checkApproval = async (page: Page, tokens: string[]) => {
     }
   }
   await modal.getByTestId('approve-submit').click();
+  return modal.waitFor({ state: 'detached' });
 };

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-0",
-    "@bancor/carbon-sdk": "^0.0.94-DEV",
+    "@bancor/carbon-sdk": "0.0.95-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
     "@coinbase/wallet-sdk": "^3.6.3",
     "@ethersproject/abi": "^5.0.0",

src/App.tsx

@@ -1,5 +1,5 @@
 import { CreateStrategyCTAMobile } from 'components/strategies/create/CreateStrategyCTA';
-import { lazy, useEffect } from 'react';
+import { useEffect } from 'react';
 import { NotificationAlerts } from 'libs/notifications';
 import { ModalProvider } from 'libs/modals';
 import { useCarbonInit } from 'hooks/useCarbonInit';
@@ -8,18 +8,6 @@ import { MainContent } from 'components/core/MainContent';
 import { useStore } from 'store';
 import { Toaster } from 'components/common/Toaster/Toaster';
 
-const TanStackRouterDevtools =
-  process.env.NODE_ENV === 'production'
-    ? () => null // Render nothing in production
-    : lazy(() =>
-        // Lazy load in development
-        import('@tanstack/router-devtools').then((res) => ({
-          default: res.TanStackRouterDevtools,
-          // For Embedded Mode
-          // default: res.TanStackRouterDevtoolsPanel
-        }))
-      );
-
 let didInit = false;
 
 export const App = () => {
@@ -48,7 +36,6 @@ export const App = () => {
       <MainMenu />
       <main className="my-80 flex w-full flex-grow flex-col">
         <MainContent />
-        <TanStackRouterDevtools position="bottom-right" />
       </main>
       <MobileMenu />
       <ModalProvider />

src/components/debug/DebugCreateStrategy.tsx

@@ -12,13 +12,12 @@ import { wait } from 'utils/helpers';
 import { useMemo, useRef, useState } from 'react';
 import { useWeb3 } from 'libs/web3';
 import { useQueryClient } from '@tanstack/react-query';
-import { useApproval } from 'hooks/useApproval';
 import { useModal } from 'hooks/useModal';
 import { Input, Label } from 'components/common/inputField';
 import { Checkbox } from 'components/common/Checkbox/Checkbox';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
-import { carbonSDK } from 'libs/sdk';
 import { getMarketPrice } from 'hooks/useMarketPrice';
+import { calculateOverlappingPrices } from '@bancor/carbon-sdk/strategy-management';
 
 const TOKENS = FAUCET_TOKENS.map((tkn) => ({
   address: tkn.tokenContract,
@@ -127,8 +126,7 @@ export const DebugCreateStrategy = () => {
     };
     if (spread) {
       const price = await getMarketPrice(base, quote, selectedFiatCurrency);
-      const params = await carbonSDK.calculateOverlappingStrategyPrices(
-        quote.address,
+      const params = calculateOverlappingPrices(
         buyMin,
         sellMax,
         price.toString(),

src/components/strategies/create/overlapping/CreateOverlappingRange.tsx

@@ -25,8 +25,8 @@ const getPriceWarnings = (isOutOfMarket: boolean): string[] => {
 
 export const CreateOverlappingRange: FC<Props> = (props) => {
   const { base, quote, order0, order1, marketPricePercentage } = props;
-  const minAboveMarket = isMinAboveMarket(order0, quote);
-  const maxBelowMarket = isMaxBelowMarket(order1, quote);
+  const minAboveMarket = isMinAboveMarket(order0);
+  const maxBelowMarket = isMaxBelowMarket(order1);
 
   const priceWarnings = getPriceWarnings(minAboveMarket || maxBelowMarket);