Completes brand kit page + styling elements

components/BrandKitGallery/BrandImage.tsx

@@ -0,0 +1,59 @@
+// components/BrandKitGallery/BrandImage.tsx
+import NextImage from 'next/image';
+import styles from '../../styles/custom.module.css';
+import { useState, useEffect } from 'react';
+
+interface BrandImageProps {
+  url: string;
+  alt: string;
+  name: string;
+}
+
+const BrandImage = ({ url, alt, name }: BrandImageProps) => {
+  const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const img = new window.Image();
+    img.src = url;
+    img.onload = () => {
+      setImageDimensions({ width: img.width, height: img.height });
+    };
+  }, [url]);
+
+  const handleImageClick = () => {
+    setShowModal(true);
+    document.body.style.overflow = 'hidden';
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    document.body.style.overflow = 'auto';
+  };
+
+  return (
+    <>
+      <div className={styles.imageWrapper}>
+        <div className={styles.imageContainer}>
+          <NextImage
+            src={url}
+            alt={alt}
+            width={imageDimensions.width}
+            height={imageDimensions.height}
+            className={styles.image}
+            onClick={handleImageClick}
+          />
+        </div>
+      </div>
+      {showModal && (
+        <div className={styles.modal} onClick={closeModal}>
+          <div className={styles.modalContent}>
+            <NextImage src={url} alt={alt} layout="fill" objectFit="contain" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BrandImage;

components/BrandKitGallery/DownloadButton.tsx

@@ -0,0 +1,22 @@
+// components/BrandKitGallery/DownloadButton.tsx
+import React from 'react';
+import styles from '../../styles/custom.module.css';
+
+const DownloadButton = ({ url, fileName, children }) => {
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', fileName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <button className={styles.downloadButton} onClick={handleDownload}>
+      {children}
+    </button>
+  );
+};
+
+export default DownloadButton;

components/BrandKitGallery/index.ts

@@ -0,0 +1,2 @@
+export { default as BrandImage } from './BrandImage';
+export { default as DownloadButton } from './DownloadButton';

components/EcosystemApps/EcosystemApps.tsx

@@ -17,7 +17,7 @@ const EcosystemApps = () => {
   const filteredApps = useMemo(() => (
     appData.filter(app =>
       app.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      app.tags.some(tag => 
+      app.tags.some(tag =>
         tagPrettyNames[tag]?.some(prettyName => prettyName.toLowerCase().includes(searchTerm.toLowerCase()))
       )
     )
@@ -27,13 +27,13 @@ const EcosystemApps = () => {
     <div>
       <input
         type="text"
-        placeholder="Search apps by name or tag..."
+        placeholder="Search apps by name or category..."
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
         className="w-full p-2 text-sm border rounded shadow-sm placeholder-gray-400"
       />
       <div className="mt-2 mb-4 text-sm text-gray-600">
-        <strong>Filter by Tags:</strong> {allTags.join(', ')}
+      {allTags.join(', ')}
       </div>
       <EcosystemCards>
         {filteredApps.length > 0 ? (

components/EvmWalletConnect/CustomConnectButton.tsx

@@ -0,0 +1,73 @@
+// components/EvmWalletConnect/CustomConnectButton.tsx
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import styled from 'styled-components';
+
+const CustomButton = styled.button`
+background: #001B2A; /* Dark color */
+border: none;
+color: #ECDEDE; /* Light color */
+padding: 0.5rem 1rem;
+font-size: 1rem;
+cursor: pointer;
+transition: color 0.3s, background 0.3s;
+display: inline-block;
+margin-top: 1rem;
+margin-right: 0.5rem;
+border-radius: 25px; /* Rounded corners */
+text-align: center;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+font-family: 'Inter', sans-serif;
+
+&:hover {
+color: #001B2A; /* Dark color */
+background: #ECDEDE; /* Light color */
+}
+`;
+
+const CustomConnectButton = (props) => (
+<ConnectButton.Custom>
+{({ account, chain, openAccountModal, openConnectModal, openChainModal, mounted }) => {
+    const ready = mounted;
+    const connected = ready && account && chain;
+
+    return (
+    <div
+        {...(!ready && {
+        'aria-hidden': true,
+        'style': {
+            opacity: 0,
+            pointerEvents: 'none',
+            userSelect: 'none'
+        },
+        })}
+    >
+        {(() => {
+        if (!connected) {
+            return (
+            <CustomButton onClick={openConnectModal} type="button">
+                Connect Wallet
+            </CustomButton>
+            );
+        }
+
+        if (chain.unsupported) {
+            return (
+            <CustomButton onClick={openChainModal} type="button">
+                Wrong network
+            </CustomButton>
+            );
+        }
+
+        return (
+            <CustomButton onClick={openAccountModal} type="button">
+            {account.displayName}
+            </CustomButton>
+        );
+        })()}
+    </div>
+    );
+}}
+</ConnectButton.Custom>
+);
+
+export default CustomConnectButton;

components/EvmWalletConnect/EvmWalletConnect.tsx

@@ -1,13 +1,14 @@
+// components/EvmWalletConnect/EvmWalletConnect.tsx
 import {
-    ConnectButton,
-    connectorsForWallets,
-    RainbowKitProvider,
+connectorsForWallets,
+RainbowKitProvider,
 } from "@rainbow-me/rainbowkit";
 import { injectedWallet, metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
 import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi";
 import { publicProvider } from "wagmi/providers/public";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ChainRpcUrls } from "viem/_types/types/chain";
+import CustomConnectButton from './CustomConnectButton';
 
 export default function EvmWalletConnect() {
     const rpcUrl: ChainRpcUrls = {
@@ -38,34 +39,30 @@ export default function EvmWalletConnect() {
         [publicProvider()]
     );
 
-    const projectId = "385413c214cb74213e0679bc30dd4e4c";
-    const connectors = connectorsForWallets([
-        {
-            groupName: "Recommended",
-            wallets: [
-                injectedWallet({ chains }),
-                metaMaskWallet({ projectId, chains }),
-            ],
-        },
-    ]);
+const projectId = "385413c214cb74213e0679bc30dd4e4c";
+const connectors = connectorsForWallets([
+    {
+    groupName: "Recommended",
+    wallets: [
+        injectedWallet({ chains }),
+        metaMaskWallet({ projectId, chains }),
+    ],
+    },
+]);
 
-    const wagmiConfig = createConfig({
-        autoConnect: false,
-        connectors,
-        publicClient,
-    });
+const wagmiConfig = createConfig({
+    autoConnect: false,
+    connectors,
+    publicClient,
+});
 
-    return (
-        <div className="my-4 flex justify-center">
-            <WagmiConfig config={wagmiConfig}>
-                <RainbowKitProvider chains={chains}>
-                    <ConnectButton
-                        accountStatus="address"
-                        chainStatus="icon"
-                        showBalance={false}
-                    />
-                </RainbowKitProvider>
-            </WagmiConfig>
-        </div>
-    );
+return (
+    <div className="my-4 flex justify-center">
+    <WagmiConfig config={wagmiConfig}>
+        <RainbowKitProvider chains={chains}>
+        <CustomConnectButton />
+        </RainbowKitProvider>
+    </WagmiConfig>
+    </div>
+);
 }

components/index.ts

@@ -2,6 +2,8 @@ export * from "./EcosystemApps";
 export * from "./EcosystemCard";
 export * from "./EvmWalletConnect";
 export * from "./HelpCallout";
+export * from "./BrandKitGallery";
 export * from "./ImageWithCaption";
 export * from "./Logo";
 export * from "./Nfts";
+export * from "./VersionFetcher";

next.config.js

@@ -1,6 +1,16 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
-})
+});
 
-module.exports = withNextra()
+module.exports = withNextra({
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.sei.io',
+        pathname: '**',
+      }
+    ],
+  },
+});

package.json

@@ -10,14 +10,19 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@next/mdx": "^14.2.3",
     "@rainbow-me/rainbowkit": "^1.3.3",
+    "@types/styled-components": "^5.1.34",
     "lucide-react": "^0.314.0",
-    "next": "^14.0.3",
+    "next": "^14.2.3",
+    "next-compose-plugins": "^2.2.1",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sharp": "^0.33.2",
+    "styled-components": "^6.1.11",
     "tailwind-merge": "^2.2.1",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13"

pages/_app.mdx

@@ -1,9 +1,12 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
+import '../styles/custom.css';
+import '@rainbow-me/rainbowkit/styles.css';
+import { ThemeProvider } from 'next-themes';
 
 export default function Nextra({ Component, pageProps }) {
-    return (
-        <>
-            <Component {...pageProps} />
-        </>
-    )
-}
+  return (
+    <ThemeProvider attribute="class">
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}