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

bancorprotocol · Dec 17, 2024 · c57197d · c57197d
2 parents a108c24 + a164bf1
commit c57197d
Show file tree

Hide file tree

Showing 155 changed files with 1,242 additions and 1,003 deletions.
diff --git a/e2e/pages/simulator.spec.ts b/e2e/pages/simulator.spec.ts
@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import { mockApi } from '../utils/mock-api';
 import {
   DebugDriver,

diff --git a/...shots/simulator/recurring/Recurring_limit_limit/simulator-results-animation.png b/...shots/simulator/recurring/Recurring_limit_limit/simulator-results-animation.png
diff --git a/...enshots/simulator/recurring/Recurring_limit_limit/simulator-results-summary.png b/...enshots/simulator/recurring/Recurring_limit_limit/simulator-results-summary.png
diff --git a/...shots/simulator/recurring/Recurring_limit_range/simulator-results-animation.png b/...shots/simulator/recurring/Recurring_limit_range/simulator-results-animation.png
diff --git a/...enshots/simulator/recurring/Recurring_limit_range/simulator-results-summary.png b/...enshots/simulator/recurring/Recurring_limit_range/simulator-results-summary.png
diff --git a/e2e/screenshots/simulator/recurring/Recurring_range_limit/form.png b/e2e/screenshots/simulator/recurring/Recurring_range_limit/form.png
diff --git a/...screenshots/simulator/recurring/Recurring_range_limit/simulator-input-price.png b/...screenshots/simulator/recurring/Recurring_range_limit/simulator-input-price.png
diff --git a/...shots/simulator/recurring/Recurring_range_limit/simulator-results-animation.png b/...shots/simulator/recurring/Recurring_range_limit/simulator-results-animation.png
diff --git a/...enshots/simulator/recurring/Recurring_range_limit/simulator-results-summary.png b/...enshots/simulator/recurring/Recurring_range_limit/simulator-results-summary.png
diff --git a/e2e/screenshots/simulator/recurring/Recurring_range_range/form.png b/e2e/screenshots/simulator/recurring/Recurring_range_range/form.png
diff --git a/...enshots/simulator/recurring/Recurring_range_range/simulator-results-summary.png b/...enshots/simulator/recurring/Recurring_range_range/simulator-results-summary.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/create/my-strategy.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/deposit/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/deposit/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/duplicate/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/duplicate/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/editPrices/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/editPrices/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/undercut/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/undercut/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_limit/withdraw/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/withdraw/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_range/create/my-strategy.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_range/editPrices/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/editPrices/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_range/undercut/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/undercut/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_range/withdraw/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/withdraw/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/create/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/create/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/create/my-strategy.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/deposit/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/deposit/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/duplicate/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/duplicate/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/editPrices/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/editPrices/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/undercut/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/undercut/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_limit/withdraw/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_limit/withdraw/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/create/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/create/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/create/my-strategy.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/deposit/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/deposit/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/duplicate/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/duplicate/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/editPrices/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/editPrices/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/undercut/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/undercut/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_sell_range/withdraw/form.png b/e2e/screenshots/strategy/disposable/Disposable_sell_range/withdraw/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/create/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/create/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.png b/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/deposit/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/deposit/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/duplicate/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/duplicate/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/editPrices/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/editPrices/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/undercut/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/undercut/form.png
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/withdraw/form.png b/e2e/screenshots/strategy/overlapping/Overlapping/withdraw/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/create/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/create/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/create/my-strategy.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/duplicate/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/duplicate/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/editPrices/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/editPrices/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/renew/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/renew/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/undercut/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/undercut/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_limit/withdraw/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/withdraw/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/create/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/create/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/create/my-strategy.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/duplicate/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/duplicate/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/editPrices/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/editPrices/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/renew/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/renew/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/undercut/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/undercut/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_limit_range/withdraw/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/withdraw/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_limit/create/my-strategy.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_limit/duplicate/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/duplicate/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_limit/editPrices/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/editPrices/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_limit/renew/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/renew/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_limit/withdraw/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/withdraw/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/create/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/create/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/create/my-strategy.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/create/my-strategy.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/deposit/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/deposit/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/duplicate/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/duplicate/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/editPrices/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/editPrices/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/renew/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/renew/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/undercut/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/undercut/form.png
diff --git a/e2e/screenshots/strategy/recurring/Recurring_range_range/withdraw/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_range/withdraw/form.png
diff --git a/index.html b/index.html
@@ -18,6 +18,10 @@
   <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>

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-0",
-    "@bancor/carbon-sdk": "0.0.99-DEV",
+    "@bancor/carbon-sdk": "0.0.103-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
     "@ethersproject/abi": "^5.0.0",
     "@ethersproject/bytes": "^5.0.0",
@@ -29,11 +29,11 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash": "4.14.191",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.12",
     "body-scroll-lock": "^4.0.0-beta.0",
@@ -58,9 +58,8 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "ethers": "^5.1.3",
-    "framer-motion": "7.6.7",
+    "framer-motion": "11.13.5",
     "fuse.js": "^6.6.2",
-    "graphemer": "^1.4.0",
     "highcharts": "^11.1.0",
     "highcharts-react-official": "^3.2.0",
     "husky": "^8.0.3",
@@ -72,10 +71,9 @@
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "react": "^18.2.0",
-    "react-day-picker": "^8.10.0",
-    "react-dom": "^18.2.0",
-    "source-map-explorer": "^2.5.3",
+    "react": "19.0.0",
+    "react-day-picker": "9.4.2",
+    "react-dom": "19.0.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.3",
     "typechain": "^8.1.0",
@@ -92,7 +90,6 @@
   "scripts": {
     "compile-abis": "typechain --target ethers-v5 --out-dir \"src/abis/types\" \"src/abis/**/*.json\"",
     "prepare": "yarn husky install",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
     "start:ethereum": "cross-env VITE_NETWORK=ethereum vite",
     "start:sei": "cross-env VITE_NETWORK=sei vite",
@@ -109,7 +106,8 @@
     "lint": "eslint --ext .tsx,.ts .",
     "pre-commit": "yarn lint-staged",
     "e2e:report": "npx playwright show-report e2e/playwright-report",
-    "update-browserslist": "npx update-browserslist-db@latest"
+    "update-browserslist": "npx update-browserslist-db@latest",
+    "analyze": "npx analyze -c vite.config.ts"
   },
   "browserslist": {
     "production": [
@@ -129,7 +127,8 @@
     ]
   },
   "devDependencies": {
-    "@types/d3": "^7.4.3"
+    "@types/d3": "^7.4.3",
+    "vite-bundle-analyzer": "^0.15.2"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,7 +50,7 @@ export const App = () => {
     <>
       <NotificationAlerts />
       <MainMenu />
-      <main className="mb-16 mt-80 grid flex-grow">
+      <main className="mb-16 grid flex-grow">
         <MainContent />
       </main>
       <Footer />

diff --git a/src/components/activity/useActivityQuery.tsx b/src/components/activity/useActivityQuery.tsx
@@ -82,7 +82,7 @@ export const useActivityQuery = (
   params: QueryActivityParams = {},
   config: ActivityQueryConfig = {}
 ) => {
-  const { tokensMap, isPending, importToken } = useTokens();
+  const { tokensMap, isPending, importTokens } = useTokens();
   const { Token } = useContract();
   const validParams = isValidParams(params);
 
@@ -100,7 +100,7 @@ export const useActivityQuery = (
       return fetchTokenData(Token, address);
     });
     const tokens = await Promise.all(getTokens);
-    tokens.forEach((data) => importToken(data));
+    importTokens(tokens);
   };
 
   return useQuery({

diff --git a/src/components/common/Checkbox/Checkbox.tsx b/src/components/common/Checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import { ReactComponent as IconCheck } from 'assets/icons/check.svg';
 import { cn } from 'utils/helpers';
 
-type Props = JSX.IntrinsicElements['button'] & {
+type Props = HTMLAttributes<HTMLButtonElement> & {
   isChecked: boolean;
   setIsChecked: (isChecked: boolean) => void;
 };

diff --git a/src/components/common/PairLogoName.tsx b/src/components/common/PairLogoName.tsx
@@ -1,18 +1,36 @@
 import { TokensOverlap } from 'components/common/tokensOverlap';
 import { WarningWithTooltip } from 'components/common/WarningWithTooltip/WarningWithTooltip';
 import { TradePair } from 'libs/modals/modals/ModalTradeTokenList';
-import { FC } from 'react';
+import { Token } from 'libs/tokens';
+import { FC, memo } from 'react';
+import { TokenLogo } from './imager/Imager';
 
 const suspiciousTokenTooltipMsg =
   'This token is not part of any known token list. Always conduct your own research before trading.';
 
-interface Props {
+interface TokenProps {
+  token: Token;
+}
+export const _TokenLogoName: FC<TokenProps> = ({ token }) => {
+  return (
+    <>
+      <TokenLogo token={token} size={30} />
+      {token.symbol}
+      {token.isSuspicious && (
+        <WarningWithTooltip tooltipContent={suspiciousTokenTooltipMsg} />
+      )}
+    </>
+  );
+};
+export const TokenLogoName = memo(_TokenLogoName, (a, b) => {
+  return a.token.address === b.token.address;
+});
+
+interface PairProps {
   pair: TradePair;
 }
 
-export const PairLogoName: FC<Props> = ({
-  pair: { baseToken, quoteToken },
-}) => {
+const _PairLogoName: FC<PairProps> = ({ pair: { baseToken, quoteToken } }) => {
   return (
     <>
       <TokensOverlap tokens={[baseToken, quoteToken]} size={30} />
@@ -30,3 +48,9 @@ export const PairLogoName: FC<Props> = ({
     </>
   );
 };
+export const PairLogoName = memo(_PairLogoName, (a, b) => {
+  return (
+    a.pair.baseToken.address === b.pair.baseToken.address &&
+    a.pair.quoteToken.address === b.pair.quoteToken.address
+  );
+});
diff --git a/src/components/common/Toaster/Toaster.tsx b/src/components/common/Toaster/Toaster.tsx
@@ -8,7 +8,7 @@ export const Toaster: FC = () => {
   return (
     <ul
       id="toaster"
-      className="fixed bottom-16 right-16 z-10 flex min-w-[250px] flex-col gap-8"
+      className="fixed bottom-16 right-24 z-10 flex min-w-[250px] flex-col gap-8"
     >
       {toaster.toasts.map((toast) => (
         <ToastItem key={toast.id} {...toast} />

diff --git a/src/components/common/calendar/index.css b/src/components/common/calendar/index.css
@@ -0,0 +1,82 @@
+.rdp-root {
+  @apply text-14;
+}
+.rdp-months {
+  display: flex;
+  gap: 30px;
+  position: relative;
+}
+.rdp-nav {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rdp-nav button {
+  color: rgba(255 255 255 / 0.6);
+}
+.rdp-nav button:hover {
+  color: white;
+}
+.rdp-month {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.rdp-month_caption {
+  text-align: center;
+}
+.rdp-weekday {
+  @apply text-12;
+  font-weight: 400;
+  color: rgba(255 255 255 / 0.2);
+}
+
+.rdp-day {
+  color: rgba(255 255 255 / 0.6);
+  padding-inline: 0;
+}
+.rdp-disabled {
+  opacity: 0.5;
+}
+.rdp-outside {
+  opacity: 0.2;
+}
+.rdp-day_button {
+  width: 36px;
+  height: 32px;
+  border-radius: 8px;
+}
+.rdp-range_middle .rdp-day_button {
+  @apply bg-primary/20;
+  color: white;
+  border-radius: 0;
+}
+.rdp-day_button:hover {
+  @apply bg-black;
+  color: white;
+}
+.rdp-range_start .rdp-day_button {
+  @apply bg-primary;
+  color: black;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rdp-range_end .rdp-day_button {
+  @apply bg-primary;
+  color: black;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rdp-range_start.rdp-range_end .rdp-day_button {
+  border-radius: 8px;
+}
+
+.rdp-today .rdp-day_button {
+  border: solid 1px white;
+}
+.rdp-hidden {
+  visibility: hidden;
+}
diff --git a/src/components/common/calendar/index.tsx b/src/components/common/calendar/index.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { ReactComponent as Chevron } from 'assets/icons/chevron.svg';
-import { cn } from 'utils/helpers';
+import './index.css';
 
 export type CalendarProps = ComponentProps<typeof DayPicker>;
 
@@ -16,52 +16,18 @@ export const Calendar = ({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={className}
-      classNames={{
-        months: 'flex flex-col sm:flex-row gap-30',
-        month: 'flex flex-col gap-20',
-        caption: 'flex items-center',
-        caption_start: 'flex-row ',
-        caption_label: 'flex-1 text-center text-14 order-1',
-        nav: 'contents gap-10',
-        nav_button: 'size-16 bg-transparent opacity-50 hover:opacity-100',
-        nav_button_previous: 'order-0',
-        nav_button_next: 'order-2',
-        table: 'border-collapse',
-        head_row: 'flex m-b-1',
-        head_cell: 'text-white/20 rounded-8 w-36 text-12 font-weight-400',
-        row: 'flex w-full mt-4',
-        cell: 'p-0 text-14',
-        day: cn(
-          'text-white/60 h-32 w-36 p-0 rounded-8 border-box',
-          'focus-visible:border focus-visible:border-white/50 focus-visible:outline-none',
-          'hover:!bg-background-900 hover:text-white'
-        ),
-        day_selected:
-          'focus-visible:bg-primary/80 font-weight-500 !text-white bg-primary/20 !rounded-0 [&:not(.outside)]:opacity-100',
-        day_range_start:
-          '!rounded-l-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
-        day_range_end:
-          '!rounded-r-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
-        day_today: 'border border-white/80',
-        day_outside: 'outside !opacity-20',
-        day_disabled: 'hover:!text-white !text-white/20 opacity-50',
-        day_range_middle: 'aria-selected:bg-primary/20',
-        day_hidden: 'invisible',
-        ...classNames,
-      }}
+      classNames={classNames}
       components={{
-        IconLeft: () => (
-          <Chevron
-            className="size-16 rotate-90"
-            data-testid="date-picker-left-arrow"
-          />
-        ),
-        IconRight: () => (
-          <Chevron
-            className="size-16 -rotate-90"
-            data-testid="date-picker-right-arrow"
-          />
-        ),
+        Chevron: ({ orientation }) => {
+          const rotate = orientation === 'left' ? 90 : -90;
+          return (
+            <Chevron
+              style={{ transform: `rotate(${rotate}deg)` }}
+              className="size-16 rotate-90"
+              data-testid={`date-picker-${orientation}-arrow`}
+            />
+          );
+        },
       }}
       weekStartsOn={weekStartsOn}
       {...props}

diff --git a/src/components/common/imager/Imager.tsx b/src/components/common/imager/Imager.tsx
@@ -65,7 +65,6 @@ export const Imager = ({
   ...props
 }: ImageProps) => {
   const { source } = useImager(src, fallbackSrc);
-
   return (
     <img
       {...props}
@@ -90,7 +89,7 @@ export const TokenLogo = ({ token, size, className }: TokenLogoProps) => {
       src={token.logoURI}
       alt={token.name ?? token.symbol}
       title={token.symbol}
-      className={className}
+      className={cn(className, 'border border-black bg-black')}
     />
   );
 };

diff --git a/src/components/common/page/index.tsx b/src/components/common/page/index.tsx
@@ -4,7 +4,7 @@ import { cn } from 'utils/helpers';
 export const Page: FC<{
   children: ReactNode;
   title?: string;
-  widget?: JSX.Element;
+  widget?: ReactNode;
   hideTitle?: boolean;
   className?: string;
 }> = ({ children, title, widget, hideTitle, className }) => {

diff --git a/src/components/common/searchInput/index.tsx b/src/components/common/searchInput/index.tsx
@@ -1,9 +1,9 @@
-import { KeyboardEventHandler } from 'react';
+import { HTMLAttributes, KeyboardEventHandler } from 'react';
 import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
 import { ReactComponent as IconClose } from 'assets/icons/times.svg';
 import { cn } from 'utils/helpers';
 
-type InputProps = JSX.IntrinsicElements['input'];
+type InputProps = HTMLAttributes<HTMLInputElement>;
 interface Props extends InputProps {
   value: string;
   setValue: (value: string) => void;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ module.exports = { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    }