Dex aggregator

.env.sample

@@ -20,4 +20,4 @@ CI=false
 VITE_TENDERLY_ACCESS_KEY=
 
 # Open Ocean
-OPENOCEAN_APIKEY=
+DEX_AGGREGATOR_APIKEY=

README.md

@@ -395,27 +395,6 @@ fontFamily: {
 
 You can also remove the unused `@font-face` from the [`src/fonts.css`](src/fonts.css) file.
 
-# Openocean
-
-_Contact Bancor team before setting openocean so we can assist with the required changes._
-
-In order to setup openocean you need to set the config: `ui.useOpenocean` to `true`.
-By default Carbon tries calling cloudflare function to call openocean.
-If you're not using cloudflare function, check the section [Without Cloudflare functions](#without-cloudflare-functions).
-
-## With cloudflare functions
-
-Under [`functions/api/openocean/index.ts`](/functions/api/openocean/index.ts)
-
-- Update the variable `referrers` & `referrerFee` with your own values.
-- Add `OPENOCEAN_APIKEY` in your environment variables in cloudflare.
-
-## Without cloudflare functions
-
-Under [`src/services/openocean.ts`](/src/services/openocean.ts) update the `getUrl` function to send to your own implementation.
-
-Alternatively you can update the `referrer`, `referrerFee` and `apiKey` in the same file in order to do a client call. **But the apiKey would be public** !
-
 # License
 
 The license used is the MIT License. You can find it [here](LICENSE).

e2e/pages/trade.spec.ts

@@ -145,7 +145,10 @@ test.describe('Trade', () => {
         await waitForTenderlyRpc(page);
 
         // Token approval
-        await tokenApproval.checkApproval([source], isLimitedApproval);
+        await tokenApproval.checkApproval(
+          [{ symbol: source, amount: sourceValue }],
+          isLimitedApproval,
+        );
 
         // Verify form empty
         await driver.awaitSuccess();

e2e/tests/strategy/disposable/create.ts

@@ -42,9 +42,13 @@ export const create = (testCase: CreateStrategyTestCase) => {
 
     const tokenApproval = new TokenApprovalDriver(page);
     if (direction === 'buy') {
-      await tokenApproval.checkApproval([quote]);
+      await tokenApproval.checkApproval([
+        { symbol: quote, amount: testCase.input.create.budget },
+      ]);
     } else {
-      await tokenApproval.checkApproval([base]);
+      await tokenApproval.checkApproval([
+        { symbol: base, amount: testCase.input.create.budget },
+      ]);
     }
 
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });

e2e/tests/strategy/overlapping/create.ts

@@ -45,7 +45,10 @@ export const create = (testCase: CreateStrategyTestCase) => {
 
     const tokenApproval = new TokenApprovalDriver(page);
     await createForm.submit('create');
-    await tokenApproval.checkApproval([base, quote]);
+    await tokenApproval.checkApproval([
+      { symbol: base, amount: sell.budget },
+      { symbol: quote, amount: buy.budget },
+    ]);
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });
     await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);

e2e/tests/strategy/overlapping/deposit.ts

@@ -27,7 +27,13 @@ export const deposit = (testCase: CreateStrategyTestCase) => {
     await form.budget().fill(input.budget);
     await edit.submit('deposit');
 
-    await tokenApproval.checkApproval([base, quote]);
+    const getAmount = (anchor: 'sell' | 'buy') => {
+      return input.anchor === anchor ? input.budget : '0';
+    };
+    await tokenApproval.checkApproval([
+      { symbol: base, amount: getAmount('sell') },
+      { symbol: quote, amount: getAmount('buy') },
+    ]);
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });
     await page.mouse.move(0, 0); // Prevent mouse to open tooltip
 

e2e/tests/strategy/overlapping/edit.ts

@@ -34,7 +34,15 @@ export const editPrice = (testCase: CreateStrategyTestCase) => {
     await form.budget().fill(input.budget);
     await edit.submit('editPrices');
 
-    await tokenApproval.checkApproval([base, quote]);
+    const getAmount = (anchor: 'sell' | 'buy') => {
+      if (input.action !== 'withdraw') return '0';
+      if (input.anchor !== anchor) return '0';
+      return input.budget;
+    };
+    await tokenApproval.checkApproval([
+      { symbol: base, amount: getAmount('sell') },
+      { symbol: quote, amount: getAmount('buy') },
+    ]);
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });
     await page.mouse.move(0, 0); // Prevent mouse to open tooltip
 

e2e/tests/strategy/overlapping/withdraw.ts

@@ -32,7 +32,10 @@ export const withdraw = (testCase: CreateStrategyTestCase) => {
     await form.budget().fill(input.budget);
     await edit.submit('withdraw');
 
-    await tokenApproval.checkApproval([base, quote]);
+    await tokenApproval.checkApproval([
+      { symbol: base, amount: '0' },
+      { symbol: quote, amount: '0' },
+    ]);
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });
     await page.mouse.move(0, 0); // Prevent mouse to open tooltip
 

e2e/tests/strategy/recurring/create.ts

@@ -17,6 +17,7 @@ import { PortfolioDriver } from '../../../utils/strategy/PortfolioDriver';
 export const createRecurringStrategy = (testCase: CreateStrategyTestCase) => {
   assertRecurringTestCase(testCase);
   const { base, quote } = testCase;
+  const { buy, sell } = testCase.input.create;
   const output = testCase.output.create;
 
   return test(`Create`, async ({ page }) => {
@@ -42,7 +43,10 @@ export const createRecurringStrategy = (testCase: CreateStrategyTestCase) => {
 
     const tokenApproval = new TokenApprovalDriver(page);
     await createForm.submit('create');
-    await tokenApproval.checkApproval([base, quote]);
+    await tokenApproval.checkApproval([
+      { symbol: base, amount: sell.budget },
+      { symbol: quote, amount: buy.budget },
+    ]);
 
     await page.waitForURL('/portfolio/strategies', { timeout: 10_000 });
     await waitForTenderlyRpc(page);

e2e/utils/DebugDriver.ts

@@ -111,6 +111,9 @@ export class DebugDriver {
       .getByTestId('strategy-json-shortcut')
       .fill(JSON.stringify(template));
     await this.page.getByTestId('create-strategies').click();
-    await deps.tokenApproval.checkApproval([base, quote]);
+    await deps.tokenApproval.checkApproval([
+      { symbol: base, amount: sell.budget },
+      { symbol: quote, amount: buy.budget },
+    ]);
   }
 }

e2e/utils/TokenApprovalDriver.ts

@@ -2,24 +2,36 @@ import { Page, expect } from '@playwright/test';
 import { waitModalOpen } from './modal';
 import { waitFor } from './operators';
 
+interface Approval {
+  symbol: string;
+  amount: string;
+}
+
 export class TokenApprovalDriver {
   private approvedTokens = ['ETH'];
   constructor(private page: Page) {}
-  async checkApproval(tokens: string[], limitedApproval?: boolean) {
-    if (tokens.every((token) => this.approvedTokens.includes(token))) return;
+  async checkApproval(approvals: Approval[], limitedApproval?: boolean) {
+    const noApprovalNeeded = approvals.every(({ symbol, amount }) => {
+      if (!Number(amount)) return true;
+      return this.approvedTokens.includes(symbol);
+    });
+    if (noApprovalNeeded) return;
     const modal = await waitModalOpen(this.page);
-    for (const token of tokens) {
-      if (token === 'ETH') {
-        const msg = modal.getByTestId(`msg-${token}`);
+    for (const { symbol, amount } of approvals) {
+      if (this.approvedTokens.includes(symbol)) {
+        if (!Number(amount)) continue;
+        const msg = modal.getByTestId(`msg-${symbol}`);
         await expect(msg).toHaveText('Pre-Approved');
       } else {
-        if (limitedApproval)
-          await modal.getByTestId(`approve-limited-${token}`).click();
-        await modal.getByTestId(`approve-${token}`).click();
-        const msg = await waitFor(this.page, `msg-${token}`, 20000);
+        if (limitedApproval) {
+          await modal.getByTestId(`approve-limited-${symbol}`).click();
+        }
+        await modal.getByTestId(`approve-${symbol}`).click();
+        const msg = await waitFor(this.page, `msg-${symbol}`, 20000);
         await expect(msg).toHaveText('Approved');
       }
     }
+    const tokens = approvals.map((a) => a.symbol);
     if (!limitedApproval) this.approvedTokens.push(...tokens);
     await modal.getByTestId('approve-submit').click();
   }

index.html

@@ -18,10 +18,6 @@
   <meta name="twitter:title" content="Carbon DeFi - Automated trading strategies">
   <meta name="twitter:description" content="Carbon DeFi is an advanced onchain trading protocol enabling automated limit orders, efficiently adjustable w/ custom price ranges, grid trading like recurring orders, works like a DEX trading bot.">
   <meta name="twitter:image" content="https://framerusercontent.com/images/7YeuJPKg50bkh0m7b1yRwhCNIoE.png">
-
-  <!-- Preload fonts that are the most likely to be used quickly -->
-  <link rel="preload" href="assets/font/title/medium.woff2" as="font" type="font/woff2"/>
-  <link rel="preload" href="assets/font/text/medium.woff2" as="font" type="font/woff2"/>
 </head>
 
 <body>

src/App.tsx

@@ -7,8 +7,30 @@ import { Toaster } from 'components/common/Toaster/Toaster';
 import { Footer } from 'components/common/Footer/Footer';
 import { SVGCarbonLogo } from 'components/common/SVGCarbonLogo';
 import { SVGGradient } from 'components/common/SVGGradient';
+import { useWagmi } from 'libs/wagmi';
+import { useEffect } from 'react';
+import { lsService } from 'services/localeStorage';
+import config from 'config';
 
 export const App = () => {
+  // Keep track of connection
+  const { user, disconnect } = useWagmi();
+  useEffect(() => {
+    if (navigator.webdriver) return;
+    if (!config.policiesLastUpdated) return;
+    const last = lsService.getItem('lastConnection');
+    const lastPrivacy = new Date(config.policiesLastUpdated).getTime();
+    if (!last || last < lastPrivacy) {
+      // for some reason disconnect doesn't exist before 1s
+      setTimeout(() => disconnect(), 1000);
+    }
+  }, [disconnect]);
+  useEffect(() => {
+    if (user) {
+      lsService.setItem('lastConnection', Date.now());
+    }
+  }, [user]);
+
   return (
     <>
       <NotificationAlerts />

src/components/common/TokenInputField/Slippage.tsx

@@ -11,7 +11,7 @@ interface Props {
 const slippageColor = (slippage: SafeDecimal) => {
   if (slippage?.gt(0)) return 'text-primary';
   if (slippage?.isZero()) return 'text-warning';
-  if (slippage?.lt(-3)) return 'text-error';
+  if (slippage?.lt(-3)) return 'text-warning';
   return 'text-main-0/80';
 };