Merge branch 'main' into add-binance-wallet

bancorprotocol · Dec 19, 2024 · f57cb6e · f57cb6e
2 parents a57d736 + 02ab4eb
commit f57cb6e
Show file tree

Hide file tree

Showing 188 changed files with 1,859 additions and 1,125 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/...shots/simulator/recurring/Recurring_range_range/simulator-results-animation.png b/...shots/simulator/recurring/Recurring_range_range/simulator-results-animation.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/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_limit/create/form.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/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/create/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/deposit/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/deposit/form.png
diff --git a/e2e/screenshots/strategy/disposable/Disposable_buy_range/duplicate/form.png b/e2e/screenshots/strategy/disposable/Disposable_buy_range/duplicate/form.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/deposit/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_limit/deposit/form.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/deposit/form.png b/e2e/screenshots/strategy/recurring/Recurring_limit_range/deposit/form.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/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/create/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/deposit/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/deposit/form.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/undercut/form.png b/e2e/screenshots/strategy/recurring/Recurring_range_limit/undercut/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,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0-0",
-    "@bancor/carbon-sdk": "0.0.99-DEV",
     "@binance/w3w-wagmi-connector-v2": "^1.2.4-alpha.0",
+    "@bancor/carbon-sdk": "0.0.103-DEV",
     "@cloudflare/workers-types": "^4.20230717.0",
     "@ethersproject/abi": "^5.0.0",
     "@ethersproject/bytes": "^5.0.0",
@@ -30,11 +30,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",
@@ -59,9 +59,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",
@@ -73,10 +72,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",
@@ -93,7 +91,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",
@@ -110,7 +107,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": [
@@ -130,7 +128,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/assets/icons/grid.svg b/src/assets/icons/grid.svg
diff --git a/src/assets/icons/table.svg b/src/assets/icons/table.svg
diff --git a/src/components/activity/ActivityExport.module.css b/src/components/activity/ActivityExport.module.css
@@ -0,0 +1,63 @@
+.export-button {
+  @apply border-background-800 text-12 gap-8 rounded-full border-2 px-12 py-8;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  grid-template-areas: "icon text loading";
+  align-items: center;
+  overflow-y: clip;
+}
+.export-button:hover {
+  @apply border-background-700 bg-background-800;
+}
+.export-button:disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.export-button > * {
+  grid-row: 1/1;
+  transition: transform 0.3s var(--ease-back-in-out);
+}
+.export {
+  grid-column: text / loading;
+}
+.exporting {
+  grid-column: text;
+}
+.loading {
+  grid-column: loading;
+}
+
+.export-button:not(:disabled) .export {
+  transition-delay: 200ms;
+}
+.export-button:not(:disabled) .exporting {
+  transform: translateY(40px);
+  transition-delay: 100ms;
+}
+.export-button:not(:disabled) .loading {
+  transform: translateY(40px);
+  transition-delay: 0ms;
+}
+.export-button:disabled .export {
+  transform: translateY(-40px);
+  transition-delay: 0ms;
+}
+.export-button:disabled .exporting {
+  transition-delay: 100ms;
+}
+.export-button:disabled .loading {
+  transition-delay: 200ms;
+}
+.export-button:disabled .loading path {
+  transform-origin: center;
+  animation: rotate 0.6s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: 0;
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/activity/ActivityExport.tsx b/src/components/activity/ActivityExport.tsx
@@ -6,7 +6,9 @@ import { useActivity } from './ActivityProvider';
 import { carbonApi } from 'utils/carbonApi';
 import { useTokens } from 'hooks/useTokens';
 import { toActivities } from './useActivityQuery';
-import { useState } from 'react';
+import { MouseEvent, useRef, useState } from 'react';
+import { Button } from 'components/common/button';
+import styles from './ActivityExport.module.css';
 
 export const getActivityCSV = (activities: Activity[]) => {
   const header = [
@@ -66,30 +68,78 @@ export const getActivityCSV = (activities: Activity[]) => {
   return encodeURI(csvContent);
 };
 
+const limit = 10_000;
 export const ActivityExport = () => {
+  const ref = useRef<HTMLDialogElement>(null);
   const [loading, setLoading] = useState(false);
-  const { queryParams } = useActivity();
+  const { queryParams, size } = useActivity();
   const { tokensMap } = useTokens();
 
+  const close = (e: MouseEvent<HTMLDialogElement>) => {
+    if (e.target !== e.currentTarget) return;
+    e.currentTarget.close();
+  };
+
   const download = async () => {
     setLoading(true);
-    const data = await carbonApi.getActivity(queryParams);
+    const data = await carbonApi.getActivity({
+      ...queryParams,
+      offset: 0,
+      limit,
+    });
     const activities = toActivities(data, tokensMap);
     const anchor = document.createElement('a');
     anchor.href = getActivityCSV(activities);
     anchor.download = 'activities.csv';
     anchor.click();
     setLoading(false);
   };
+
+  const shouldDownload = () => {
+    if (size && size > limit) ref.current?.showModal();
+    else download();
+  };
+
   return (
-    <button
-      type="button"
-      onClick={download}
-      disabled={loading}
-      className="border-background-800 text-12 hover:border-background-700 hover:bg-background-800 flex items-center gap-8 rounded-full border-2 px-12 py-8 disabled:pointer-events-none disabled:opacity-60"
-    >
-      <IconDownloadFile className="text-primary size-14" />
-      <span>{loading ? 'Exporting' : 'Export'}</span>
-    </button>
+    <>
+      <button
+        type="button"
+        onClick={shouldDownload}
+        disabled={loading}
+        className={styles.exportButton}
+      >
+        <IconDownloadFile className="text-primary size-14" />
+        <span className={styles.export}>Export Activities</span>
+        <span className={styles.exporting}>Exporting</span>
+        <svg
+          className={styles.loading}
+          width="18"
+          height="18"
+          viewBox="0 0 50 50"
+        >
+          <path
+            fill="currentColor"
+            d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+          />
+        </svg>
+      </button>
+      {!!size && size > limit && (
+        <dialog className="modal" ref={ref} onClick={close}>
+          <form method="dialog" className="text-14 grid gap-16">
+            <p>
+              The export limit is 10,000 rows.&nbsp;
+              <b>Only the most recent 10,000 records will be exported.</b>
+            </p>
+            <p>To include older data, adjust the date range and try again.</p>
+            <footer className="flex gap-16">
+              <Button variant="success" onClick={download}>
+                Proceed
+              </Button>
+              <Button variant="secondary">Cancel</Button>
+            </footer>
+          </form>
+        </dialog>
+      )}
+    </>
   );
 };
diff --git a/src/components/activity/ActivityTable.tsx b/src/components/activity/ActivityTable.tsx
@@ -181,7 +181,7 @@ export const ActivityId: FC<ActivityIdProps> = ({ activity, size }) => {
 };
 
 interface ActivityIconProps {
-  activity: Activity;
+  activity: { action: ActivityAction };
   size: number;
   className?: string;
 }
@@ -317,15 +317,15 @@ interface ActionIconProps {
   action: ActivityAction;
   size: string | number;
 }
-const iconColor = (action: ActivityAction) => {
+export const iconColor = (action: ActivityAction) => {
   if (action === 'buy') return `bg-buy/10 text-buy`;
   if (action === 'sell') return `bg-sell/10 text-sell`;
   if (action === 'create') return `bg-success/10 text-success`;
   if (action === 'delete') return `bg-error/10 text-error`;
   return `bg-white/10 text-white`;
 };
 
-const ActionIcon: FC<ActionIconProps> = ({ action, size }) => {
+export const ActionIcon: FC<ActionIconProps> = ({ action, size }) => {
   const className = `size-${size}`;
   if (action === 'create') return <IconCheck className={className} />;
   if (action === 'transfer') return <IconTransfer className={className} />;

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/FiatPrice.tsx b/src/components/common/FiatPrice.tsx
@@ -0,0 +1,23 @@
+import { useFiatCurrency } from 'hooks/useFiatCurrency';
+import { useGetTokenPrice } from 'libs/queries';
+import { SafeDecimal } from 'libs/safedecimal';
+import { Token } from 'libs/tokens';
+import { FC } from 'react';
+import { cn, getFiatDisplayValue } from 'utils/helpers';
+
+interface Props {
+  token?: Token;
+  amount: SafeDecimal | string | number;
+  className?: string;
+}
+export const FiatPrice: FC<Props> = ({ token, amount, className }) => {
+  const query = useGetTokenPrice(token?.address);
+  const { selectedFiatCurrency: currentCurrency } = useFiatCurrency();
+  const loading = !token || query.isPending;
+  const value = new SafeDecimal(query.data?.[currentCurrency] || 0).mul(amount);
+  return (
+    <span className={cn(className, { invisible: loading })}>
+      {getFiatDisplayValue(value, currentCurrency)}
+    </span>
+  );
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ module.exports = { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    }