Image zoom in feature

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

@@ -6,6 +6,8 @@ sme: TABASCOatw
 sidebar_label: 'Particle Network'
 ---
 
+import { ImageZoom } from '@site/src/components/ImageZoom';
+
 :::info Community member contribution
 
 Shoutout to [@TABASCOatw](https://github.com/TABASCOatw) for contributing the following [third-party document](/for-devs/third-party-docs/contribute)!
@@ -37,7 +39,7 @@ Given its modular architecture, developers have the liberty to choose which of t
 
 The user flow with Particle Network begins with social logins (using either a custom authentication or preset login methods provided by Particle Network), which leads to the generation of an EOA through MPC-TSS. This EOA is then used as a Signer for a smart account implementation that best fits the needs of the application in question (natively, this means a choice between SimpleAccount, Biconomy V1/V2, Light Account, and Cyber Account). A visualization of this process can be found below:
 
-![](https://i.imgur.com/qfEpjgz.png)
+<ImageZoom src="https://i.imgur.com/qfEpjgz.png" alt="Particle Network User Flow" />
 
 ---
 
@@ -126,7 +128,7 @@ export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
 };
 ```
 
-This code sets up Particle Connect with a configuration for wallet authentication and blockchain interactions on Arbitrum Sepolia. It includes social logins and traditional Web3 options through WalletConnect and enables Account Abstraction (AA) with a `SimpleAccount` instance version 2.0.0. The configured `ConnectKitProvider` component then wraps the app’s content, making this configuration available.
+This code sets up Particle Connect with a configuration for wallet authentication and blockchain interactions on Arbitrum Sepolia. It includes social logins and traditional Web3 options through WalletConnect and enables Account Abstraction (AA) with a `SimpleAccount` instance version 2.0.0. The configured `ConnectKitProvider` component then wraps the app's content, making this configuration available.
 
 ## Integrate Particle Connect in Your App
 
@@ -164,7 +166,7 @@ export default function RootLayout({
 
 With your project set up, dependencies installed, and Particle Connect configured, you can start building in the `page.tsx` file.
 
-In `page.tsx`, you’ll define the core features: login flow, data visualization, transaction handling, and the UI.
+In `page.tsx`, you'll define the core features: login flow, data visualization, transaction handling, and the UI.
 
 ### Connecting the Wallet
 

website/package.json

@@ -32,6 +32,9 @@
     "@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",
     "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "docusaurus-lunr-search": "^3.3.2",
@@ -44,6 +47,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.66.1",
+    "styled-components": "^6.1.15",
     "tippy.js": "^6.3.7",
     "trim": "0.0.3"
   },

website/src/components/ImageZoom/index.tsx

@@ -0,0 +1,188 @@
+/**
+ * ImageZoom Component
+ *
+ * A React component that adds a click-to-zoom feature to images with smooth animations.
+ *
+ * Features:
+ * - Smooth fade and scale animations
+ * - Responsive sizing (max 90% of viewport)
+ * - Dark overlay background
+ * - Close on overlay click, escape key, or close button
+ * - Mobile-friendly
+ *
+ * Usage in MDX files:
+ * ```mdx
+ * import { ImageZoom } from '@site/src/components/ImageZoom';
+ *
+ * <ImageZoom
+ *   src="path/to/your/image.png"
+ *   alt="Description of the image"
+ *   className="optional-custom-class"
+ * />
+ * ```
+ *
+ * Usage in React components:
+ * ```tsx
+ * import { ImageZoom } from '@site/src/components/ImageZoom';
+ *
+ * function YourComponent() {
+ *   return (
+ *     <ImageZoom
+ *       src="/images/example.png"
+ *       alt="Example image"
+ *       className="optional-styling"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * Props:
+ * @param {string} src - The source URL of the image
+ * @param {string} [alt] - Optional alt text for the image
+ * @param {string} [className] - Optional CSS class name for additional styling
+ *
+ * Dependencies:
+ * - @react-spring/web (for animations)
+ * - styled-components (for styling)
+ * - @radix-ui/react-dialog (for modal functionality)
+ */
+
+import React, { useState } from 'react';
+import { useTransition, animated } from '@react-spring/web';
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+import { createPortal } from 'react-dom';
+
+interface ImageZoomProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export function ImageZoom({ src, alt, className }: ImageZoomProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  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 },
+  });
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt || ''}
+        className={`cursor-zoom-in ${className || ''}`}
+        onClick={() => setIsOpen(true)}
+      />
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+            <Dialog.Portal>
+              {overlayTransitions(
+                (styles, item) =>
+                  item && <OverlayBackground style={styles} onClick={() => setIsOpen(false)} />,
+              )}
+              {transitions(
+                (styles, item) =>
+                  item && (
+                    <div
+                      style={{
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: '20px',
+                        zIndex: 10000,
+                        pointerEvents: 'none',
+                      }}
+                    >
+                      <Content
+                        style={{
+                          ...styles,
+                          pointerEvents: 'auto',
+                        }}
+                      >
+                        <CloseButton onClick={() => setIsOpen(false)}>
+                          <CloseIcon />
+                        </CloseButton>
+                        <ZoomedImage
+                          src={src}
+                          alt={alt || ''}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </Content>
+                    </div>
+                  ),
+              )}
+            </Dialog.Portal>
+          </Dialog.Root>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+const OverlayBackground = styled(animated(Dialog.Overlay))`
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  cursor: zoom-out;
+`;
+
+const Content = styled(animated.div)`
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ZoomedImage = styled.img`
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: -40px;
+  right: 0;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 8px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const CloseIcon = () => (
+  <svg width="24" height="24" 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/theme/MDXComponents/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import { ImageZoom } from '@site/src/components/ImageZoom';
+
+export default {
+  ...MDXComponents,
+  ImageZoom: ImageZoom,
+};