export activity limit

bancorprotocol · Dec 17, 2024 · 4b8a5f4 · 4b8a5f4
1 parent c6633d4
commit 4b8a5f4
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 12 deletions.
diff --git a/src/components/activity/ActivityExport.tsx b/src/components/activity/ActivityExport.tsx
@@ -6,7 +6,7 @@ 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';
 
 export const getActivityCSV = (activities: Activity[]) => {
   const header = [
@@ -66,14 +66,27 @@ 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();
+    setLoading(false);
+  };
+
   const download = async () => {
     setLoading(true);
-    const data = await carbonApi.getActivity(queryParams);
+    if (size && size > limit) ref.current?.showModal();
+    const data = await carbonApi.getActivity({
+      ...queryParams,
+      offset: 0,
+      limit,
+    });
     const activities = toActivities(data, tokensMap);
     const anchor = document.createElement('a');
     anchor.href = getActivityCSV(activities);
@@ -82,14 +95,31 @@ export const ActivityExport = () => {
     setLoading(false);
   };
   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={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>
+      {!!size && size > limit && (
+        <dialog className="modal" ref={ref} onClick={close}>
+          <form method="dialog" className="grid gap-16">
+            <p>
+              The Export is limited to 10.000 transactions.
+              <br />
+              Consider changing the filters
+            </p>
+            <hr className="border-1 border-t-white/60" />
+            <button type="submit" value="">
+              Ok
+            </button>
+          </form>
+        </dialog>
+      )}
+    </>
   );
 };
diff --git a/src/index.css b/src/index.css
@@ -16,6 +16,12 @@
 
   --main-menu-height: 80px;
   --mobile-menu-height: 80px;
+
+  --ease-in: cubic-bezier(.55, 0, 1, .45);
+  --ease-out: cubic-bezier(0, .55, .45, 1);
+  --ease-in-out: cubic-bezier(.85, 0, .15, 1);
+  --ease-back-in-out: cubic-bezier(.68, -.6, .32, 1.6);
+  --ease-back-out: cubic-bezier(.34, 1.56, .64, 1);
 }
 
 
@@ -268,3 +274,36 @@
 input[type='search']::-webkit-search-cancel-button {
   display: none;
 }
+
+dialog.modal, dialog.modal::backdrop {
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, opacity, transform;
+  transition-duration: 0.5s;
+  transition-timing-function: var(--ease-back-in-out);
+}
+@starting-style {
+  dialog.modal[open] {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  dialog.modal[open]::backdrop {
+    opacity: 0;
+  }
+}
+dialog.modal:not([open]) {
+  opacity: 0;
+  transform: scale(0.8);
+}
+dialog.modal:not([open])::backdrop {
+  opacity: 0;
+}
+dialog.modal form {
+  @apply bg-background-900;
+  border-radius: 8px;
+  padding: 16px;
+  transition: transform 0.3s var(--ease-out);
+}
+dialog.modal::backdrop {
+  @apply bg-black/40;
+  backdrop-filter: blur(8px);
+}