Merge branch 'master' into cbj/renewbasename

Author: cryptobeijing

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,10 +5,16 @@
 **How has it been tested?**
 
 Have you tested the following pages?
+
+BaseWeb
 - [] base.org
-- [] base.org/ecosystem
-- [] base.org/resources
-- [] base.org/build
 - [] base.org/names
+- [] base.org/builders
+- [] base.org/ecosystem
 - [] base.org/name/jesse
 - [] base.org/manage-names
+- [] base.org/resources
+
+BaseDocs
+- [] docs.base.org
+- [] docs sub-pages

README.md

@@ -2,7 +2,7 @@
 
 # Base Web
 
-Base is a secure, low-cost, developer-friendly Ethereum L2 built to bring the next billion users onchain. It's built on Optimism’s open-source [OP Stack](https://stack.optimism.io/).
+Base is a secure, low-cost, developer-friendly Ethereum L2 built to bring the next billion users onchain. It's built on Optimism's open-source [OP Stack](https://stack.optimism.io/).
 
 <!-- Badge row 1 - status -->
 
@@ -81,16 +81,24 @@ If you're a builder who wants to add or update your project on the [Base Ecosyst
 
 2. Create a new branch for your changes.
 
-3. Update the `web/apps/web/src/data/ecosystem.json` with your project information. All fields are required. Each entry should follow the format below:
+3. Create a directory for your project under `apps/web/src/data/ecosystem/` using a URL-safe version of your project name:
+
+   ```bash
+   mkdir apps/web/src/data/ecosystem/your-project-name
+   ```
+
+Project names must be unique. If a project with your name already exists, please reach out to us on Discord.
+
+4. Create a metadata.json file in your project directory:
 
    ```json
    {
      "name": "Your Project Name",
-     "description": "A brief description of your project (less than 200 characters)",
-     "url": "https://your-project-url.com",
-     "imageUrl": "/images/partners/your-project-logo.png",
-     "category": "Your Project Category",
-     "subcategory": "Your Project Subcategory"
+     "description": "A brief description (less than 200 characters)",
+     "url": "https://your-project.com",
+     "imageUrl": "/images/partners/your-logo.png",
+     "category": "one of: ai, consumer, defi, infra, onramp, wallet",
+     "subcategory": "see categories below"
    }
    ```
 
@@ -107,9 +115,10 @@ If you're a builder who wants to add or update your project on the [Base Ecosyst
      - `onramp`: _One_ of `centralized exchange`, `fiat on-ramp`
      - `wallet`: _One_ of `account abstraction`, `multisig`, `self-custody`
 
-4. When adding and/or updating a logo, place a 192x192 pixel PNG file in the `web/apps/web/public/images/partners/`. The file should be named appropriately (e.g., your-project-name.png). The logo should be an App Store or Play Store iconographic version, not a full wordmark.
-
-5. Create a pull request with your changes.
+5. Add your project's logo:
+   - Place a 192x192 pixel PNG/WebP file in `apps/web/public/images/partners/`
+   - Name should match what you specified in imageUrl
+   - Use an App/Play Store style icon (not a full wordmark)
 
 By opening a PR to add your project, you authorize and license Coinbase on a non-exclusive, worldwide, irrevocable, sublicensable, and royalty-free basis to reproduce, distribute, transmit, make available, perform, display, or otherwise use the submitted Multimedia Assets for any purpose, including any marketing or promotional activities related to Base or Coinbase. Any goodwill associated with use of trademarks submitted in your Multimedia Assets will inure to your benefit. You further acknowledge and represent that you have all IP rights in the Multimedia Assets, that the Multimedia Assets do not infringe the rights of any third party, and that you have the right to grant this license to Coinbase.
 

apps/base-docs/docs/components/App.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import '@coinbase/onchainkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -8,6 +9,7 @@ import { base, baseSepolia } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
 import { useTheme } from '../contexts/Theme.tsx';
 import { defineChain } from 'viem';
+
 const queryClient = new QueryClient();
 
 export const SANDBOX_CHAIN = defineChain({
@@ -65,9 +67,7 @@ export default function App({ children }: { children: ReactNode }) {
             },
           }}
         >
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            {children}
-          </div>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
         </OnchainKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

apps/base-docs/docs/components/BrowseCard.tsx

@@ -1,27 +1,25 @@
-interface BrowseCardProps {
+type BrowseCardProps = {
   title: string;
   description: string;
   icon: React.ReactNode;
   href?: string;
-}
+};
 
 export function BrowseCard({ title, description, icon, href }: BrowseCardProps) {
   const CardWrapper = href ? 'a' : 'div';
-  
+
   return (
-    <CardWrapper 
+    <CardWrapper
       href={href}
-      className="block h-full p-6 rounded-lg bg-zinc-100 dark:bg-zinc-900 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors"
+      className="block h-full rounded-lg bg-zinc-100 p-6 transition-colors hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
     >
       <div className="flex flex-col gap-4">
-        <div className="h-12 w-12 text-blue-500">
-          {icon}
-        </div>
+        <div className="h-12 w-12 text-blue-500">{icon}</div>
         <div>
-          <h3 className="text-lg font-semibold text-white mb-1 my-4">{title}</h3>
+          <h3 className="my-4 mb-1 text-lg font-semibold text-white">{title}</h3>
           <p className="text-zinc-400">{description}</p>
         </div>
       </div>
     </CardWrapper>
   );
-} 
+}

apps/base-docs/docs/components/BrowseUseCaseCard.tsx

@@ -1,27 +1,22 @@
-interface BrowseUseCaseCardProps {
+type BrowseUseCaseCardProps = {
   title: string;
   description: string;
   icon: React.ReactNode;
   href?: string;
-}
+};
 
 export function BrowseUseCaseCard({ title, description, icon, href }: BrowseUseCaseCardProps) {
   const CardWrapper = href ? 'a' : 'div';
 
   return (
-    <CardWrapper
-      href={href}
-      className="block h-[420px]"
-    >
-      <div className="flex flex-col h-full">
-        <div className="h-[280px] w-full flex items-center dark:bg-zinc-900 justify-center mb-4 rounded-lg">
-          <div className="w-[60%] mx-auto flex items-center justify-center">
-            {icon}
-          </div>
+    <CardWrapper href={href} className="block h-[420px]">
+      <div className="flex h-full flex-col">
+        <div className="mb-4 flex h-[280px] w-full items-center justify-center rounded-lg dark:bg-zinc-900">
+          <div className="mx-auto flex w-[60%] items-center justify-center">{icon}</div>
         </div>
 
-        <div className="flex flex-col flex-1">
-          <h3 className="text-lg font-bold text-white mb-1">{title}</h3>
+        <div className="flex flex-1 flex-col">
+          <h3 className="mb-1 text-lg font-bold text-white">{title}</h3>
           <p className="text-zinc-400">{description}</p>
         </div>
       </div>

apps/base-docs/docs/components/Button/index.tsx

@@ -2,8 +2,8 @@
 
 import { ButtonHTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { ButtonVariants, ButtonSizes } from 'apps/web/src/components/base-org/Button/types';
-import { Icon, IconProps } from 'apps/web/src/components/Icon/Icon';
+import { Icon, IconProps } from '../base-org/Icon/Icon.tsx';
+import { ButtonVariants, ButtonSizes } from './types.ts';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   connectWallet?: boolean;
@@ -87,7 +87,9 @@ export default function Button({
   return (
     <button type="button" onClick={onClick} disabled={disabled} className={buttonClasses}>
       <span>{children}</span>
-      {iconName && <Icon name={iconName} width={iconSize} height={iconSize} color="currentColor" />}
+      {iconName && (
+        <Icon name={iconName as string} width={iconSize} height={iconSize} color="currentColor" />
+      )}
     </button>
   );
 }

apps/base-docs/docs/components/BuyWrapper.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import type { SwapError } from '@coinbase/onchainkit/swap';
 import type { Token } from '@coinbase/onchainkit/token';
 import { type ReactNode, useCallback } from 'react';

apps/base-docs/docs/components/CafeUnitTest/index.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable */
+
 import React from 'react';
 import { useEffect, useState, Suspense } from 'react';
-import { useAccount } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 import { useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
 import { WagmiProvider, createConfig, http } from 'wagmi';
 import { mainnet, base, baseSepolia, baseGoerli } from 'wagmi/chains';
@@ -139,6 +140,7 @@ const wagmiConfig = createConfig({
 
 export function CafeUnitTest({ nftNum }) {
   const { isConnecting, isDisconnected, address, chain } = useAccount();
+  const { switchChain } = useSwitchChain();
 
   const [messages, setMessages] = useState(['Submit your contract address.']);
   const [contractFormEntry, setContractFormEntry] = useState('');
@@ -409,6 +411,23 @@ export function CafeUnitTest({ nftNum }) {
     if (isConnecting) {
       return <div>Connecting...</div>;
     }
+    if (chain?.id !== baseSepolia.id) {
+      return (
+        <div>
+          <div>You are not connected to Base Sepolia</div>
+          <button
+            style={{
+              ...buttonStyle,
+              ...buttonEnabledColor,
+              marginTop: '10px',
+            }}
+            onClick={() => switchChain({ chainId: baseSepolia.id })}
+          >
+            Switch to Base Sepolia
+          </button>
+        </div>
+      );
+    }
     return (
       <div>
         <hr />