Merge pull request #56 from sei-protocol/devrel

Merges current and ongoing work from devrel team

Author: codebycarson

README.md

@@ -1,4 +1,7 @@
+# Contributing to the Docs
+
 ## Quick Start
+
 Ensure you have `yarn` installed (macOS users can Run `brew install yarn`)
 
 1. Use `yarn` to install dependencies
@@ -12,25 +15,28 @@ You should always run `yarn build` before pushing any changes to validate that t
 This documentation is created using [Nextra](https://nextra.site).
 
 ### Structure
+
 Each page is generated from a single `.mdx` file under the `./pages` directory.
 
 Each directory represents a page grouping. Each directory contains a `_meta.json` file, which dictates the order and name of the items in the navbar.
 
 For more information on how the docs are structured, please refer to the [Nextra docs](https://nextra.site/docs/guide).
 
 ### Changing Content
-All content submitted will be reviewed by a maintainer
 
-To standardize the documentation, please follow the [style guide]() for instructions on how to format changes to the docs.
+All content submitted will be reviewed by a maintainer
 
+To standardize the documentation, please follow the [style guide](https://github.com/sei-protocol/sei-docs/blob/devrel/STYLE_GUIDE.mdx) for instructions on how to format changes to the docs.
 
 ## Open Source Contributors
 
 As an open source and decentralized protocol, we **greatly appreciate** any contributions!
 If you feel like the docs can be better in some way, please feel free to fork this repo and make a pull request or open an issue in this Repository.
 
 ### Make changes yourself
-While the contents of this repository are not technical in nature, contributing requires a basic understanding of 
+
+While the contents of this repository are not technical in nature, contributing requires a basic understanding of:
+
 - [Git](https://git-scm.com/downloads)
 - Github
 
@@ -42,7 +48,10 @@ To propose changes directly, you can open a Pull Request against this repository
 4. Commit and push your changes to your forked repository.
 5. Once your changes have been pushed to your forked repository, [make a Pull Request](https://git-scm.com/downloads) against this repository. Ensure that your Pull Request follows the template so we can understand and review your changes clearly.
 
-### Open an Issue.
+### Open an Issue
+
 Alternatively, if you have more general suggestions on how we can improve or correct these docs, you can [open an issue](https://github.com/sei-protocol/sei-docs/issues).
 
+### Addding to the Ecosystem Apps list
 
+We welcome contributions to our ecosystem apps section. Please follow the process detailed in [eco-apps](https://github.com/sei-protocol/sei-docs/tree/main/pages/eco-apps.mdx) to add your own apps.

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

@@ -1,36 +1,39 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { EcosystemCard, EcosystemCards } from '../EcosystemCard';
-import appData from '../../data/appData';  // Ensure this import is correct
+import appData, { Tag, tagPrettyNames } from '../../data/appData';
 
 const EcosystemApps = () => {
   const [searchTerm, setSearchTerm] = useState('');
-  const [allTags, setAllTags] = useState([]);
+  const [allTags, setAllTags] = useState<string[]>([]);
 
   // Extract unique tags from appData
   useEffect(() => {
-    const tags = new Set();
+    const tags = new Set<string>();
     appData.forEach(app => app.tags.forEach(tag => tags.add(tag)));
     setAllTags(Array.from(tags));
   }, []);
-  // Filter by "title" and "tag" fields from appData.ts // Filter by "title" and "tag" fields from appData.ts
+
+  // Filter by "title" and "tag" fields from appData.ts
   const filteredApps = useMemo(() => (
     appData.filter(app =>
       app.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      app.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+      app.tags.some(tag =>
+        tagPrettyNames[tag]?.some(prettyName => prettyName.toLowerCase().includes(searchTerm.toLowerCase()))
+      )
     )
   ), [searchTerm]);
 
   return (
     <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/EcosystemCard/EcosystemCard.tsx

@@ -19,7 +19,7 @@ function EcosystemCard({ image, title, description, href }: EcosystemCardProps)
       target="_blank"
       rel="noopener noreferrer"
     >
-      <div className="relative w-full"> {/* Adjust height as needed to match your design */}
+      <div className="relative w-full">
         <Image src={image} alt={title} width={700} height={475} priority />
       </div>
       <div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800">

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-arctic-1.sei-apis.com"],
-    webSocket: ["wss://evm-ws-arctic-1.sei-apis.com"],
-  };
-  const seiDevnet: Chain = {
-    id: 713715,
-    name: "Sei EVM Devnet",
-    network: "sei",
-    nativeCurrency: {
-      decimals: 18,
-      name: "Sei",
-      symbol: "SEI",
-    },
-    rpcUrls: {
-      public: rpcUrl,
-      default: rpcUrl,
-    },
-    testnet: true,
-    blockExplorers: {
-      default: { name: "Seistream", url: "https://seistream.app/" },
-    },
-  };
+    const rpcUrl: ChainRpcUrls = {
+        http: ["https://evm-rpc.sei-apis.com"],
+        webSocket: ["wss://evm-ws.sei-apis.com"],
+    };
+    const sei: Chain = {
+        id: 531,
+        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(
+        [sei],
+        [publicProvider()]
+    );
 
-  const projectId = "385413c214cb74213e0679bc30dd4e4c";
-  const connectors = connectorsForWallets([
+const projectId = "385413c214cb74213e0679bc30dd4e4c";
+const connectors = connectorsForWallets([
     {
-      groupName: "Recommended",
-      wallets: [
+    groupName: "Recommended",
+    wallets: [
         injectedWallet({ chains }),
         metaMaskWallet({ projectId, chains }),
-      ],
+    ],
     },
-  ]);
+]);
 
-  const wagmiConfig = createConfig({
+const wagmiConfig = createConfig({
     autoConnect: false,
     connectors,
     publicClient,
-  });
+});
 
-  return (
+return (
     <div className="my-4 flex justify-center">
-      <WagmiConfig config={wagmiConfig}>
+    <WagmiConfig config={wagmiConfig}>
         <RainbowKitProvider chains={chains}>
-          <ConnectButton
-            accountStatus="address"
-            chainStatus="icon"
-            showBalance={false}
-          />
+        <CustomConnectButton />
         </RainbowKitProvider>
-      </WagmiConfig>
+    </WagmiConfig>
     </div>
-  );
+);
 }