chore: Update import path for Logo component in theme.config.tsx and …

…components/index.ts

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,71 +1,68 @@
+// 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 = {
-        http: ["https://evm-rpc.sei-apis.com"],
-        webSocket: ["wss://evm-ws.sei-apis.com"],
-    };
-    const seiDevnet: Chain = {
-        id: 513,
-        name: "Sei Network",
-        network: "Sei",
-        nativeCurrency: {
-            decimals: 18,
-            name: "Sei",
-            symbol: "SEI",
-        },
-        rpcUrls: {
-            public: rpcUrl,
-            default: rpcUrl,
-        },
-        testnet: true,
-        blockExplorers: {
-            default: { name: "Seitrace", url: "https://seitrace.com" },
-        },
-    };
+const rpcUrl: ChainRpcUrls = {
+    http: ["https://evm-rpc.sei-apis.com"],
+    webSocket: ["wss://evm-ws.sei-apis.com"],
+};
+const seiDevnet: Chain = {
+    id: 513,
+    name: "Sei Network",
+    network: "Sei",
+    nativeCurrency: {
+    decimals: 18,
+    name: "Sei",
+    symbol: "SEI",
+    },
+    rpcUrls: {
+    public: rpcUrl,
+    default: rpcUrl,
+    },
+    testnet: true,
+    blockExplorers: {
+    default: { name: "Seitrace", url: "https://seitrace.com" },
+    },
+};
 
-    const { chains, publicClient } = configureChains(
-        [seiDevnet],
-        [publicProvider()]
-    );
+const { chains, publicClient } = configureChains(
+    [seiDevnet],
+    [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";