Merge remote-tracking branch 'origin/main' into issue-#1448

.eslintrc.json

@@ -9,14 +9,15 @@
     "sourceType": "module"
   },
   "ignorePatterns": ["**/debug/*", "**/pages/privacy/**", "**/pages/terms/**"],
-  "plugins": ["react", "react-hooks", "unused-imports"],
+  "plugins": ["react", "react-hooks", "unused-imports", "compat"],
   "extends": [
     "react-app",
     "prettier",
     "plugin:prettier/recommended",
     "plugin:jest-dom/recommended",
     "plugin:react/recommended",
-    "plugin:react/jsx-runtime"
+    "plugin:react/jsx-runtime",
+    "plugin:compat/recommended"
   ],
   "rules": {
    "react/prop-types": "off", // suppress prop-type errors

.github/workflows/lint.yaml

@@ -0,0 +1,34 @@
+name: Lint
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  build:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            **/node_modules
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn lint

.github/workflows/update_browserslist.yaml

@@ -0,0 +1,63 @@
+name: Update Browserslist DB
+on:
+  schedule:
+    - cron: '0 0 * * 0' # Runs every week at 00:00 on Sunday
+  workflow_dispatch: # Allows manual triggering of the workflow
+jobs:
+  update-browserslist-db:
+    name: 'Run Browserlist update'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Update Browserslist DB
+        id: update-browserslist-db
+        run: |
+          OUTPUT=$(yarn update-browserslist)
+          CLEAN_OUTPUT=$(echo "$OUTPUT" | sed 's/\x1b\[[0-9;]*m//g')
+          {
+          echo 'update_output<<EOF'
+          echo "$CLEAN_OUTPUT"
+          echo EOF
+          } >> "$GITHUB_OUTPUT"
+          LATEST_VERSION=$(yarn info caniuse-lite version | sed -n '2p' | sed 's/\x1b\[[0-9;]*m//g')
+          echo "latest_version=$LATEST_VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Import GPG key
+        id: import-gpg
+        uses: crazy-max/ghaction-import-gpg@v6
+        with:
+          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+          passphrase: ${{ secrets.GPG_PASSPHRASE }}
+          git_user_signingkey: true
+          git_commit_gpgsign: true
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v6
+        env:
+          HUSKY: '0'
+        with:
+          token: ${{ secrets.PR_OPEN_KEY }}
+          committer: ${{ steps.import-gpg.outputs.name }} <${{ steps.import-gpg.outputs.email }}>
+          author: ${{ steps.import-gpg.outputs.name }} <${{ steps.import-gpg.outputs.email }}>
+          commit-message: '[CI] Update browserslist DB to ${{ steps.update-browserslist-db.outputs.latest_version }}'
+          title: 'Bump browserslist DB to ${{ steps.update-browserslist-db.outputs.latest_version }}'
+          body: |
+            Bumps caniuse-lite to ${{ steps.update-browserslist-db.outputs.latest_version }}.
+            Update output: 
+            ${{ steps.update-browserslist-db.outputs.update_output }}
+          labels: 'dependencies'
+          branch: 'update-browserslist-db/${{ steps.update-browserslist-db.outputs.latest_version }}'
+          delete-branch: true
+          base: 'main'

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-0",
-    "@bancor/carbon-sdk": "^0.0.97-DEV",
+    "@bancor/carbon-sdk": "0.0.99-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
     "@ethersproject/abi": "^5.0.0",
     "@ethersproject/bytes": "^5.0.0",
@@ -51,6 +51,7 @@
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-compat": "^6.0.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
@@ -107,10 +108,16 @@
     "e2e": "playwright test",
     "lint": "eslint --ext .tsx,.ts .",
     "pre-commit": "yarn lint-staged",
-    "e2e:report": "npx playwright show-report e2e/playwright-report"
+    "e2e:report": "npx playwright show-report e2e/playwright-report",
+    "update-browserslist": "npx update-browserslist-db@latest"
   },
   "browserslist": {
     "production": [
+      "Safari > 15.4",
+      "iOS > 15.4",
+      "Chrome > 119",
+      "Android > 119",
+      "Firefox > 115",
       ">0.2%",
       "not dead",
       "not op_mini all"
@@ -124,4 +131,4 @@
   "devDependencies": {
     "@types/d3": "^7.4.3"
   }
-}
+}

src/components/strategies/edit/EditStrategyForm.tsx

@@ -5,7 +5,12 @@ import { EditStrategyOverlapTokens } from './EditStrategyOverlapTokens';
 import { Button } from 'components/common/button';
 import { useNavigate, useRouter } from '@tanstack/react-router';
 import { cn } from 'utils/helpers';
-import { QueryKey, useQueryClient, useUpdateStrategyQuery } from 'libs/queries';
+import {
+  QueryKey,
+  Strategy,
+  useQueryClient,
+  useUpdateStrategyQuery,
+} from 'libs/queries';
 import { getStatusTextByTxStatus } from '../utils';
 import { isZero } from '../common/utils';
 import { carbonEvents } from 'services/events';
@@ -27,6 +32,7 @@ import { useDeleteStrategy } from '../useDeleteStrategy';
 import style from 'components/strategies/common/form.module.css';
 import config from 'config';
 import { hasNoBudget } from '../overlapping/utils';
+import { StrategyUpdate } from '@bancor/carbon-sdk';
 
 interface EditOrders {
   buy: BaseOrder;
@@ -58,6 +64,19 @@ const submitText: Record<EditTypes, string> = {
 
 const spenderAddress = config.addresses.carbon.carbonController;
 
+const getFieldsToUpdate = (orders: EditOrders, strategy: Strategy) => {
+  const { buy, sell } = orders;
+  const { order0, order1 } = strategy;
+  const fieldsToUpdate: Partial<StrategyUpdate> = {};
+  if (buy.min !== order0.startRate) fieldsToUpdate.buyPriceLow = buy.min;
+  if (buy.max !== order0.endRate) fieldsToUpdate.buyPriceHigh = buy.max;
+  if (buy.budget !== order0.balance) fieldsToUpdate.buyBudget = buy.budget;
+  if (sell.min !== order1.startRate) fieldsToUpdate.sellPriceLow = sell.min;
+  if (sell.max !== order1.endRate) fieldsToUpdate.sellPriceHigh = sell.max;
+  if (sell.budget !== order1.balance) fieldsToUpdate.sellBudget = sell.budget;
+  return fieldsToUpdate as StrategyUpdate;
+};
+
 export const EditStrategyForm: FC<Props> = (props) => {
   const {
     orders,
@@ -127,14 +146,7 @@ export const EditStrategyForm: FC<Props> = (props) => {
       {
         id: strategy.id,
         encoded: strategy.encoded,
-        fieldsToUpdate: {
-          buyPriceLow: orders.buy.min,
-          buyPriceHigh: orders.buy.max,
-          buyBudget: orders.buy.budget,
-          sellPriceLow: orders.sell.min,
-          sellPriceHigh: orders.sell.max,
-          sellBudget: orders.sell.budget,
-        },
+        fieldsToUpdate: getFieldsToUpdate(orders, strategy),
         buyMarginalPrice: orders.buy.marginalPrice,
         sellMarginalPrice: orders.sell.marginalPrice,
       },

src/components/strategies/edit/utils.ts

@@ -1,6 +1,6 @@
 import { SafeDecimal } from 'libs/safedecimal';
 import { Strategy } from 'libs/queries';
-import { getStrategyType } from 'components/strategies/common/utils';
+import { getStrategyType, isZero } from 'components/strategies/common/utils';
 import {
   toDisposablePricesSearch,
   toOverlappingPricesSearch,
@@ -20,13 +20,14 @@ export const getWithdraw = (initialBudget?: string, newBudget?: string) => {
 
 export const getTotalBudget = (
   editType: 'deposit' | 'withdraw',
-  initialBudget?: string,
-  budget?: string
+  initialBudget: string = '0',
+  budget: string = '0'
 ) => {
+  if (isZero(budget)) return initialBudget;
   if (editType === 'deposit') {
-    return new SafeDecimal(initialBudget || '0').add(budget || '0').toString();
+    return new SafeDecimal(initialBudget).add(budget).toString();
   } else {
-    return new SafeDecimal(initialBudget || '0').sub(budget || '0').toString();
+    return new SafeDecimal(initialBudget).sub(budget).toString();
   }
 };
 

src/libs/safedecimal/index.ts

@@ -1,5 +1,12 @@
 import { Decimal } from 'decimal.js';
 
+Decimal.set({
+  precision: 100,
+  rounding: Decimal.ROUND_HALF_DOWN,
+  toExpNeg: -30,
+  toExpPos: 30,
+});
+
 /**
  * Sanitizes the input value for safe decimal creation.
  * If the value is a string, it checks if it's a valid
@@ -52,4 +59,4 @@ class SafeDecimal extends Decimal {
   }
 }
 
-export { SafeDecimal };
+export { SafeDecimal, Decimal };

src/libs/safedecimal/safedecimal.test.ts

@@ -21,7 +21,10 @@ describe('SafeDecimal', () => {
     it('should return a valid output if input is exponential number', () => {
       expect(new SafeDecimal('1E-5').toString()).toEqual('0.00001');
       expect(new SafeDecimal('10E0').toString()).toEqual('10');
-      expect(new SafeDecimal('10E20').toString()).toEqual('1e+21');
+      expect(new SafeDecimal('10E20').toString()).toEqual(
+        '1000000000000000000000'
+      );
+      expect(new SafeDecimal('10E101').toString()).toEqual('1e+102');
     });
     it('should return a valid output if input is a negative number', () => {
       expect(new SafeDecimal('-1E-5').toString()).toEqual('-0.00001');

src/libs/testing-library/drivers/EditStrategyDriver.tsx

@@ -0,0 +1,111 @@
+import {
+  Screen,
+  waitForElementToBeRemoved,
+  within,
+} from '@testing-library/dom';
+
+export class EditStrategyDriver {
+  constructor(private screen: Screen) {}
+
+  async findForm() {
+    return this.screen.findByTestId('edit-form');
+  }
+
+  async findDisposableForm() {
+    const form = await this.findForm();
+    return {
+      element: form,
+      min: () => within(form).getByTestId('input-min'),
+      max: () => within(form).getByTestId('input-max'),
+      price: () => within(form).getByTestId('input-price'),
+      tabSell: () => within(form).getByTestId('tab-sell'),
+      tabBuy: () => within(form).getByTestId('tab-buy'),
+      limit: () => within(form).getByTestId('tab-limit'),
+      range: () => within(form).getByTestId('tab-range'),
+      budget: () => within(form).getByTestId('input-budget'),
+      marketPriceIndicators: () =>
+        within(form).queryAllByTestId('market-price-indication'),
+      approveWarnings: () => within(form).queryByTestId('approve-warnings'),
+      submit: () => within(form).getByTestId('edit-submit'),
+    };
+  }
+
+  async findRecurringForm() {
+    const form = await this.findForm();
+    const buySection = within(form).getByTestId('buy-section');
+    const sellSection = within(form).getByTestId('sell-section');
+    return {
+      element: form,
+      buy: {
+        min: () => within(buySection).getByTestId('input-min'),
+        max: () => within(buySection).getByTestId('input-max'),
+        price: () => within(buySection).getByTestId('input-price'),
+        limit: () => within(buySection).getByTestId('tab-limit'),
+        range: () => within(buySection).getByTestId('tab-range'),
+        budget: () => within(buySection).getByTestId('input-budget'),
+        marketPriceIndicators: () =>
+          within(buySection).queryAllByTestId('market-price-indication'),
+      },
+      sell: {
+        min: () => within(sellSection).getByTestId('input-min'),
+        max: () => within(sellSection).getByTestId('input-max'),
+        price: () => within(sellSection).getByTestId('input-price'),
+        limit: () => within(sellSection).getByTestId('tab-limit'),
+        range: () => within(sellSection).getByTestId('tab-range'),
+        budget: () => within(sellSection).getByTestId('input-budget'),
+        marketPriceIndicators: () =>
+          within(sellSection).queryAllByTestId('market-price-indication'),
+      },
+      approveWarnings: () => within(form).queryByTestId('approve-warnings'),
+      submit: () => within(form).getByTestId('edit-submit'),
+    };
+  }
+
+  async findOverlappingForm() {
+    const form = await this.findForm();
+    return {
+      element: form,
+      min: () => within(form).getByTestId('input-min'),
+      max: () => within(form).getByTestId('input-max'),
+      spread: {
+        input: () => within(form).getByTestId('spread-input'),
+        default: () => within(form).getByTestId('spread-0.05'),
+        option: (value: string) => within(form).getByTestId(`spread-${value}`),
+      },
+      anchorRequired: () => within(form).queryByTestId('require-anchor'),
+      anchor: (anchor: 'buy' | 'sell') =>
+        within(form).getByTestId(`anchor-${anchor}`),
+      budget: () => within(form).getByTestId('input-budget'),
+      marketPriceIndicators: () =>
+        within(form).queryAllByTestId('market-price-indication'),
+      approveWarnings: () => within(form).queryByTestId('approve-warnings'),
+      submit: () => within(form).getByTestId('edit-submit'),
+    };
+  }
+
+  async findUserPriceForm() {
+    return this.screen.findByTestId('user-price-form');
+  }
+
+  async findEditMarketPrice() {
+    return this.screen.findByTestId('edit-market-price');
+  }
+
+  async findUserPriceInput() {
+    const priceForm = await this.findUserPriceForm();
+    return {
+      editPrice: () => within(priceForm).getByTestId('input-price'),
+      approveWarning: () =>
+        within(priceForm).getByTestId('approve-price-warnings'),
+      confirm: () => within(priceForm).getByTestId('set-overlapping-price'),
+    };
+  }
+
+  waitForLoading(parent: HTMLElement) {
+    const loadings = parent.querySelectorAll('.loading-message');
+    const waitForAll = Array.from(loadings).map((loading) => {
+      return waitForElementToBeRemoved(() => loading);
+    });
+    return Promise.all(waitForAll);
+  }
+}