interactive diagram timeboost gentle intro

README.md

@@ -63,9 +63,3 @@ yarn serve
 ```shell
 git submodule update --remote arbitrum-sdk
 ```
-
-### Format content
-Sometimes, your pull request may need to be re-formatted to pass the checks. To be safe, make sure you run the following command (from the `website` directory) before you push your commit:
-```shell
-yarn && yarn format
-```

arbitrum-docs/for-devs/third-party-docs/Particle/particle.mdx

@@ -6,7 +6,7 @@ sme: TABASCOatw
 sidebar_label: 'Particle Network'
 ---
 
-import ImageZoomComponent from '@site/src/components/ImageZoom';
+import ImageZoom from '@site/src/components/ImageZoom';
 
 :::info Community member contribution
 

website/package.json

@@ -28,13 +28,17 @@
   "dependencies": {
     "@arbitrum/sdk": "^3.0.0",
     "@cmfcmf/docusaurus-search-local": "^0.11.0",
+    "@mdx-js/react": "^3.0.0",
     "@docusaurus/core": "^3.6.3",
     "@docusaurus/preset-classic": "^3.6.3",
     "@docusaurus/theme-live-codeblock": "^3.6.3",
     "@docusaurus/theme-mermaid": "^3.6.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@react-spring/web": "^9.7.5",
-    "@types/styled-components": "^5.1.34",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@react-spring/web": "^9.7.3",
+    "@types/mdx": "^2.0.11",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^18.2.55",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "docusaurus-lunr-search": "^3.3.2",
@@ -45,22 +49,26 @@
     "posthog-docusaurus": "^2.0.0",
     "posthog-js": "^1.219.6",
     "prism-react-renderer": "^1.3.5",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.66.1",
-    "styled-components": "^6.1.15",
     "tippy.js": "^6.3.7",
     "trim": "0.0.3"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.3.2",
     "@offchainlabs/prettier-config": "0.2.1",
+    "@stitches/react": "^1.2.8",
     "@tsconfig/docusaurus": "^2.0.3",
     "@types/node": "^22.10.10",
+    "@types/react": "^19.0.10",
     "docusaurus-plugin-typedoc": "^1.0.1",
     "husky": "^9.1.7",
     "markdown-link-extractor": "^3.1.0",
     "prettier": "^2.8.3",
+    "styled-components": "^6.1.15",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.13",
     "typedoc-plugin-frontmatter": "^1.0.0",

website/src/components/InteractiveDiagrams/Timeboost/CentralizedAuction/ButtonComponent.jsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+const ButtonComponent = ({ x, y, width, height }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x={x - width * 0.25}
+      y={y - height * 0.25}
+      width={width * 1.5}
+      height={height * 1.5}
+      viewBox="0 0 512 512"
+      style={{
+        cursor: 'pointer',
+        transition: 'transform 0.2s',
+        transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <title>Interactive Button</title>
+      <path
+        d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z"
+        style={{
+          fill: 'none',
+          stroke: '#ffffff',
+          strokeMiterlimit: 10,
+          strokeWidth: '32px',
+          filter: 'drop-shadow(0px 0px 4px rgba(255,255,255,0.5))',
+        }}
+      />
+      <circle
+        cx="256"
+        cy="256"
+        r="144"
+        style={{
+          fill: '#ff7f2a',
+          filter: isHovered ? 'brightness(1.2)' : 'none',
+          transition: 'filter 0.2s',
+          animation: 'blink 2s ease-in-out infinite',
+        }}
+      />
+    </svg>
+  );
+};
+
+export default ButtonComponent;

website/src/components/InteractiveDiagrams/Timeboost/CentralizedAuction/Modal.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import { useTransition, animated } from '@react-spring/web';
+import * as Dialog from '@radix-ui/react-dialog';
+import step1Content from './modal-centralized-auction-step-1.mdx';
+import step2Content from './modal-centralized-auction-step-2.mdx';
+import step3Content from './modal-centralized-auction-step-3.mdx';
+import step4Content from './modal-centralized-auction-step-4.mdx';
+import step5Content from './modal-centralized-auction-step-5.mdx';
+import { createPortal } from 'react-dom';
+import { NumberComponent } from './NumberComponent';
+import { MDXProvider } from '@mdx-js/react';
+import type { MDXComponents } from '@mdx-js/react/lib';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
+import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
+import { useColorMode } from '@docusaurus/theme-common';
+
+// Define the CodeBlock interface
+interface CodeBlock {
+  language: string;
+  code: string;
+}
+
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('solidity', solidity);
+
+const components = {
+  h1: ({ children }) => <h1 className="modal__title">{children}</h1>,
+  p: ({ children }) => <p>{children}</p>,
+  ol: ({ children }) => <ul>{children}</ul>,
+  li: ({ children }) => <li>{children}</li>,
+  pre: ({ children }) => children,
+  code: ({ children, className }) => {
+    const language = className?.replace('language-', '') || 'text';
+    return (
+      <SyntaxHighlighter
+        language={language}
+        style={useColorMode().isDarkTheme ? oneDark : oneLight}
+        customStyle={{
+          margin: 0,
+          padding: '16px',
+          borderRadius: '4px',
+          backgroundColor: useColorMode().isDarkTheme ? 'rgb(41, 45, 62)' : 'rgb(246, 248, 250)',
+        }}
+      >
+        {children}
+      </SyntaxHighlighter>
+    );
+  },
+};
+
+export function Modal({ number }: { number: number }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { isDarkTheme } = useColorMode();
+  const stepContent = {
+    1: step1Content,
+    2: step2Content,
+    3: step3Content,
+    4: step4Content,
+    5: step5Content,
+  };
+  const StepContent = stepContent[number];
+
+  const transitions = useTransition(isOpen, {
+    from: { opacity: 0, transform: 'scale(0.95)' },
+    enter: { opacity: 1, transform: 'scale(1)' },
+    leave: { opacity: 0, transform: 'scale(0.95)' },
+    config: { tension: 300, friction: 20 },
+  });
+
+  const overlayTransitions = useTransition(isOpen, {
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    config: { duration: 200 },
+  });
+
+  const renderCodeBlock = (block: CodeBlock, index: number) => (
+    <div key={index} style={{ position: 'relative' }}>
+      <SyntaxHighlighter
+        language={block.language}
+        style={isDarkTheme ? oneDark : oneLight}
+        customStyle={{
+          margin: 0,
+          padding: '16px',
+          borderRadius: '4px',
+          backgroundColor: isDarkTheme ? 'rgb(41, 45, 62)' : 'rgb(246, 248, 250)',
+        }}
+      >
+        {block.code.trim()}
+      </SyntaxHighlighter>
+    </div>
+  );
+
+  return (
+    <>
+      <g
+        onClick={() => setIsOpen(true)}
+        style={{
+          cursor: 'pointer',
+          pointerEvents: 'all',
+        }}
+      >
+        <NumberComponent number={number} />
+      </g>
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+            <Dialog.Portal>
+              {overlayTransitions(
+                (styles, item) =>
+                  item && <Dialog.Overlay className="modal__overlay" style={styles} />,
+              )}
+              {transitions(
+                (styles, item) =>
+                  item && (
+                    <div className="modal__container">
+                      <Dialog.Content
+                        className="modal__content"
+                        forceMount
+                        style={{
+                          ...styles,
+                          pointerEvents: 'auto',
+                        }}
+                      >
+                        <header className="modal__header">
+                          <Dialog.Close
+                            className="modal__close-button"
+                            onClick={() => setIsOpen(false)}
+                          >
+                            <CloseIcon />
+                          </Dialog.Close>
+                        </header>
+                        <MDXProvider components={components}>
+                          <StepContent />
+                        </MDXProvider>
+                      </Dialog.Content>
+                    </div>
+                  ),
+              )}
+            </Dialog.Portal>
+          </Dialog.Root>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+const CloseIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M15.9574 14.1689L8.59651 6.75098L6.73232 8.59598L14.1313 16.071L6.71338 23.4129L8.5964 25.2769L15.9574 17.8779L23.3943 25.2769L25.2392 23.4129L17.8213 16.071L25.2202 8.59598L23.3752 6.75098L15.9574 14.1689Z"
+      fill="currentColor"
+    />
+  </svg>
+);

website/src/components/InteractiveDiagrams/Timeboost/CentralizedAuction/NumberComponent.jsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useColorMode } from '@docusaurus/theme-common';
+import '@site/src/css/custom.css';
+import ButtonComponent from './ButtonComponent';
+import { CIRCLE_RADIUS, numberPaths, coordinates } from './constants';
+import { NumberComponentProps } from './types';
+
+export const NumberComponent = ({ number }) => {
+  const { isDarkTheme } = useColorMode();
+
+  const animationProps =
+    number === 1 || number === 5
+      ? { opacity: 1 }
+      : useSpring({
+          from: { opacity: 0, fill: '#ff7f2a' },
+          to: [
+            { opacity: 1, fill: '#ff7f2a' },
+            { opacity: 1, fill: '#3578e5' },
+            { opacity: 0, fill: '#3578e5' }
+          ],
+          config: { tension: 20000, friction: 10 },
+          loop: true,
+          reset: true,
+          immediate: false,
+        });
+
+  const coords = coordinates[number];
+  const pathData = numberPaths[number];
+
+  if (!coords || !pathData) {
+    return null;
+  }
+
+  const offsetX = coords.circle.x - coords.path.x + (coords.offset?.x || 0);
+  const offsetY = coords.circle.y - coords.path.y + (coords.offset?.y || 0);
+
+  const circleClassName = isDarkTheme ? 'cls-5' : 'cls-5-light';
+  const pathClassName = isDarkTheme ? 'cls-10' : 'cls-10-light';
+
+  return (
+    <g id={`number${number}`}>
+      {(number === 2 || number === 3 || number === 4) && (
+        <ButtonComponent
+          x={coords.circle.x - CIRCLE_RADIUS}
+          y={coords.circle.y - CIRCLE_RADIUS}
+          width={CIRCLE_RADIUS * 2}
+          height={CIRCLE_RADIUS * 2}
+        />
+      )}
+      <animated.circle
+        id={`circle${number}`}
+        cx={coords.circle.x}
+        cy={coords.circle.y}
+        r={CIRCLE_RADIUS}
+        className={circleClassName}
+        style={{ ...animationProps }}
+      />
+      <path
+        id={`path${number}`}
+        d={pathData}
+        className={pathClassName}
+        transform={`translate(${offsetX}, ${offsetY})`}
+      />
+    </g>
+  );
+};

website/src/components/InteractiveDiagrams/Timeboost/CentralizedAuction/constants.ts

@@ -0,0 +1,17 @@
+export const CIRCLE_RADIUS = 20.95;
+
+export const numberPaths = {
+  1: 'M412.16 410.7v-3.06c2.5 0 3.66-.47 4.05-2.65h3.99v14.72h-4.35v-9.01h-3.68Z',
+  2: 'M583.04 633.46c.8-1.14 1.46-1.64 3.86-2.91 2.09-1.12 2.61-1.64 2.61-2.61 0-.84-.54-1.36-1.38-1.36-1.06 0-1.57.67-1.64 2.11h-4.42c0-3.25 2.35-5.21 6.25-5.21 3.36 0 5.62 1.68 5.62 4.18 0 2.11-.99 3.55-3.34 4.78l-.78.41c-2.05 1.08-2.67 1.55-2.84 2.48.73-.06 1.42-.11 2.2-.11h5.17v3.3h-12.52c0-2.46.37-3.86 1.21-5.06Z',
+  3: 'M586.28 781.21c1.06 0 1.72-.62 1.72-1.53 0-1.03-.67-1.59-2.15-1.59h-.6v-3.21h.47c1.49 0 2.05-.52 2.05-1.57 0-.82-.67-1.42-1.62-1.42-1.12 0-1.75.78-1.77 2.05h-4.29c.09-3.19 2.31-5.11 6.14-5.11s5.88 1.57 5.88 4.07c0 1.7-.91 2.93-2.76 3.34v.11c2 .39 3.02 1.64 3.02 3.51 0 2.71-2.28 4.42-6.23 4.42-3.51 0-6.23-1.42-6.23-5.3h4.35c.06 1.42.78 2.24 2 2.24Z',
+  4: 'M1048.97 602.13v-3.3l5.49-8.55h5.54v8.66h2.13v3.19H1060V605h-4.24v-2.87h-6.79Zm3.53-3.19h3.45c0-1.7 0-3.38.22-5.52l-.19-.06-3.47 5.58Z',
+  5: 'M1003.53 257.43c1.01 0 1.7-.97 1.7-2.18s-.67-2.05-1.75-2.05c-.82 0-1.36.52-1.7 1.31l-4.27-.3.86-8.73h10.43v3.3h-4.42c-.78 0-1.75-.02-2.52-.11-.09.8-.15 1.96-.45 2.76h.17c.69-.78 1.77-1.16 3.12-1.16 2.93 0 5.08 2.11 5.08 4.96 0 3.21-2.46 5.34-6.23 5.34s-6.18-1.92-6.31-4.8h4.52c.06 1.01.73 1.66 1.75 1.66Z',
+};
+
+export const coordinates = {
+  1: { circle: { x: 416.59, y: 412.69 }, path: { x: 412.16, y: 410.7 }, offset: { x: -4, y: -2 } },
+  2: { circle: { x: 588.13, y: 631.51 }, path: { x: 583.04, y: 633.46 }, offset: { x: -4, y: 1 } },
+  3: { circle: { x: 586.23, y: 776.88 }, path: { x: 586.28, y: 781.21 }, offset: { x: 1, y: 4 } },
+  4: { circle: { x: 1055.6, y: 597.98 }, path: { x: 1048.97, y: 602.13 }, offset: { x: -6, y: 3 } },
+  5: { circle: { x: 1003.53, y: 257.43 }, path: { x: 1003.53, y: 257.43 }, offset: { x: 1, y: 4 } },
+};