From 108604eaceeaf45ff6411d28d36db70d109c8c28 Mon Sep 17 00:00:00 2001
From: 2712 <2712@trustless.computer>
Date: Thu, 5 Sep 2024 10:22:51 +0700
Subject: [PATCH] update heartbeat

---
 .../MarkdownComponent/index.tsx               | 34 +++++++++++++++++++
 .../MarkdownComponent/styles.module.scss      | 15 ++++++++
 src/modules/l2-rollup-detail/index.tsx        |  8 ++---
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/l2-rollup-detail/MarkdownComponent/index.tsx
 create mode 100644 src/modules/l2-rollup-detail/MarkdownComponent/styles.module.scss

diff --git a/src/modules/l2-rollup-detail/MarkdownComponent/index.tsx b/src/modules/l2-rollup-detail/MarkdownComponent/index.tsx
new file mode 100644
index 000000000..f2cdb1951
--- /dev/null
+++ b/src/modules/l2-rollup-detail/MarkdownComponent/index.tsx
@@ -0,0 +1,34 @@
+import 'katex/dist/katex.min.css';
+import { useEffect, useState } from 'react';
+import Markdown from 'react-markdown';
+import s from './styles.module.scss';
+
+const MarkdownComponent = ({
+  text,
+  delay = 10,
+}: {
+  text: string;
+  delay?: number;
+}) => {
+  const [currentText, setCurrentText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (currentIndex < text.length) {
+      const timeout = setTimeout(() => {
+        setCurrentText((prevText) => prevText + text[currentIndex]);
+        setCurrentIndex((prevIndex) => prevIndex + 1);
+      }, delay);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [currentIndex, delay, text]);
+
+  return (
+    <div className={s.markdown}>
+      <Markdown>{currentText}</Markdown>
+    </div>
+  );
+};
+
+export default MarkdownComponent;
diff --git a/src/modules/l2-rollup-detail/MarkdownComponent/styles.module.scss b/src/modules/l2-rollup-detail/MarkdownComponent/styles.module.scss
new file mode 100644
index 000000000..76c406d0e
--- /dev/null
+++ b/src/modules/l2-rollup-detail/MarkdownComponent/styles.module.scss
@@ -0,0 +1,15 @@
+.markdown {
+  max-width: inherit;
+
+  * {
+    &::-webkit-scrollbar {
+      width: 2px;
+      height: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: gray;
+      border-radius: 10px;
+    }
+  }
+}
diff --git a/src/modules/l2-rollup-detail/index.tsx b/src/modules/l2-rollup-detail/index.tsx
index 2dd6f92ec..2ff462d18 100644
--- a/src/modules/l2-rollup-detail/index.tsx
+++ b/src/modules/l2-rollup-detail/index.tsx
@@ -36,9 +36,9 @@ import TokenTransferTab from './TokenTransferTab';
 import TokenTransferTabBitcoin from './TokenTransferTabBitcoin';
 import TransactionsTab from './TransactionsTab';
 import TransactionsTabBitcoin from './TransactionsTabBitcoin';
-import Markdown from 'react-markdown';
 import WatchListAddresses from './Watchlist';
 import { formatAiSummary } from './utils';
+import MarkdownComponent from './MarkdownComponent';
 
 const L2RollupDetail = () => {
   const {
@@ -110,7 +110,7 @@ const L2RollupDetail = () => {
             w={{ base: '0px', md: '140px' }}
             src={'/heartbeat/ic-wallet.svg'}
           />
-          <Flex gap="6px" direction={'column'}>
+          <Flex gap="6px" direction={'column'} w={'100%'}>
             <Flex direction={'row'} alignItems={'center'} gap={'8px'}>
               <Text fontWeight={'400'} fontSize={'16px'}>
                 {isMobile ? shortCryptoAddress(address) : address}
@@ -180,12 +180,12 @@ const L2RollupDetail = () => {
                 {isLoadingAI ? (
                   <Flex direction={'row'} alignItems={'center'} gap={'4px'}>
                     <Text>Analyzing...</Text>
-                    <Skeleton w={'140px'} h={'20px'} speed={1.2} />
+                    <Skeleton w={'120px'} h={'20px'} speed={1.2} />
                   </Flex>
                 ) : (
                   <>
                     {aiSummary && (
-                      <Markdown>{formatAiSummary(aiSummary)}</Markdown>
+                      <MarkdownComponent text={formatAiSummary(aiSummary)} />
                     )}
                   </>
                 )}