feat(oracle): migrate stats component

src/components/TypingText/TypingText.d.ts

@@ -0,0 +1,8 @@
+export interface TypingTextProps {
+  content: string;
+  delay?: number;
+}
+
+export const TypingText: React.FC<TypingTextProps>;
+
+export function formatNumber(value: number, decimals?: number): string; 

src/components/TypingText/TypingText.tsx

@@ -0,0 +1,24 @@
+import { FC, useEffect, useState } from 'react';
+
+export interface TypingTextProps {
+  content: string;
+  delay?: number;
+}
+
+export const TypingText: FC<TypingTextProps> = ({ content, delay = 40 }) => {
+  const [displayedContent, setDisplayedContent] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (currentIndex < content.length) {
+      const timer = setTimeout(() => {
+        setDisplayedContent(prev => prev + content[currentIndex]);
+        setCurrentIndex(prev => prev + 1);
+      }, delay);
+
+      return () => clearTimeout(timer);
+    }
+  }, [content, currentIndex, delay]);
+
+  return <span>{displayedContent}</span>;
+}; 

src/components/TypingText/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TypingText';
+export type { TypingTextProps } from './TypingText'; 

src/components/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TypingText';
+export type { TypingTextProps } from './TypingText'; 

src/pages/oracle/landing/Stats/Stats.module.scss.d.ts

@@ -0,0 +1 @@
+

src/pages/oracle/landing/Stats/Stats.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { Stats, isValidStatsProps } from './Stats';
+
+describe('Stats', () => {
+  const defaultProps = {
+    type: 'test',
+    value: 1000,
+    text: 'users',
+  };
+
+  it('renders correctly with minimum props', () => {
+    render(<Stats {...defaultProps} />);
+    expect(screen.getByText('users')).toBeInTheDocument();
+    expect(screen.getByText('1 000')).toBeInTheDocument();
+  });
+
+  it('renders change information when provided', () => {
+    render({
+      ...defaultProps,
+      change: 100,
+      time: '24h'
+    });
+    expect(screen.getByText('+100')).toBeInTheDocument();
+    expect(screen.getByText('in 24h')).toBeInTheDocument();
+  });
+
+  it('returns null when value is not provided', () => {
+    const { container } = render(<Stats type="test" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('handles invalid number inputs', () => {
+    const { container } = render(<Stats type="test" value={NaN} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('formats large numbers correctly', () => {
+    render(<Stats type="test" value={1000000} text="users" />);
+    expect(screen.getByText('1 000 000')).toBeInTheDocument();
+  });
+
+  it('handles loading state', () => {
+    render(<Stats type="test" isLoading />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});
+
+describe('isValidStatsProps', () => {
+  it('validates correct props', () => {
+    expect(isValidStatsProps(defaultProps)).toBe(true);
+  });
+
+  it('invalidates incorrect props', () => {
+    expect(isValidStatsProps({ type: 123 })).toBe(false);
+  });
+}); 

src/pages/oracle/landing/Stats/Stats.tsx

@@ -1,84 +1,54 @@
-import {
-  useGetGraphStats,
-  useGetNegentropy,
-} from 'src/containers/temple/hooks';
-import { TypingText } from 'src/containers/temple/pages/play/PlayBanerContent';
+import { FC } from 'react';
 import cx from 'classnames';
-import { routes } from 'src/routes';
-import { Link } from 'react-router-dom';
-import { formatNumber, timeSince } from 'src/utils/utils';
+import { TypingText } from 'src/components/TypingText/TypingText';
+import { formatNumber } from 'src/utils/utils';
 import styles from './Stats.module.scss';
-import { TitleType } from '../type';
 
-type Props = {
-  type: TitleType;
-};
-
-const REFETCH_INTERVAL = 1000 * 7;
-
-function Stats({ type }: Props) {
-  const dataGetGraphStats = useGetGraphStats(REFETCH_INTERVAL);
-  const negentropy = useGetNegentropy(REFETCH_INTERVAL);
-  let value: number | undefined;
-  let text: string | JSX.Element;
-  let change: number | undefined;
-  let time = timeSince(dataGetGraphStats.changeTimeAmount.time);
-
-  switch (type) {
-    case TitleType.search:
-      value = dataGetGraphStats.data?.particles;
-      text = <Link to={routes.oracle.ask.getLink('particle')}>particles</Link>;
-      if (dataGetGraphStats.changeTimeAmount.particles) {
-        change = dataGetGraphStats.changeTimeAmount.particles;
-      }
-      break;
-
-    case TitleType.learning:
-      value = dataGetGraphStats.data?.cyberlinks;
-      text = (
-        <Link to={routes.oracle.ask.getLink('cyberlink')}>cyberlinks</Link>
-      );
-      if (dataGetGraphStats.changeTimeAmount.cyberlinks) {
-        change = dataGetGraphStats.changeTimeAmount.cyberlinks;
-      }
-      break;
-
-    case TitleType.ai:
-      value = negentropy.data?.negentropy;
-      text = (
-        <Link to={routes.oracle.ask.getLink('negentropy')}>syntropy bits</Link>
-      );
-      if (negentropy.changeTimeAmount.amount) {
-        change = negentropy.changeTimeAmount.amount;
-        time = timeSince(negentropy.changeTimeAmount.time);
-      }
-      break;
+interface StatsProps {
+  /** The type of statistic being displayed */
+  type: string;
+  /** The numerical value to display */
+  value?: number;
+  /** The descriptive text for the value */
+  text?: string;
+  /** The amount of change to display */
+  change?: number;
+  /** The time period for the change */
+  time?: string;
+}
 
-    default:
+export const Stats: FC<StatsProps> = ({ 
+  type,
+  value,
+  text = '',
+  change,
+  time
+}) => {
+  if (!value) {
+    return null;
   }
 
+  const formattedValue = value.toLocaleString().replaceAll(',', ' ');
+  const formattedChange = change ? formatNumber(change) : null;
+
   return (
     <div className={cx(styles.wrapper)}>
-      {value && (
+      <TypingText
+        content={formattedValue}
+        delay={40}
+      />{' '}
+      <strong>{text}</strong>{' '}
+      {change ? (
+        <p className={styles.change}>
+          | <strong>+{formattedChange}</strong> in {time}
+        </p>
+      ) : (
         <>
-          <TypingText
-            content={`${Number(value).toLocaleString().replaceAll(',', ' ')}`}
-            delay={40}
-          />{' '}
-          <strong>{text}</strong>{' '}
-          {change ? (
-            <p className={styles.change}>
-              | <strong>+{formatNumber(change)}</strong> in {time}
-            </p>
-          ) : (
-            <>
-              and <strong>growing</strong>
-            </>
-          )}
+          and <strong>growing</strong>
         </>
       )}
     </div>
   );
-}
+};
 
 export default Stats;

src/pages/oracle/landing/Stats/index.ts

@@ -0,0 +1 @@
+