Merge branch 'master' into frame-render

.codeflow.yml

@@ -14,11 +14,13 @@ build:
     - BaldurECR:
         name: docs
         path: ./apps/base-docs/Dockerfile
+        architecture: amd64
     - BaldurECR:
         name: bridge
         path: ./apps/bridge/Dockerfile
+        architecture: amd64
   multi_arch: true
 
 operate:
   slack_channels:
-    - "#base-codeflow-notifications"
+    - '#base-codeflow-notifications'

apps/base-docs/base-learn/docs/frontend-setup/building-an-onchain-app.md

@@ -51,11 +51,9 @@ The [quick start] guide for RainbowKit also contains step-by-step instructions f
 
 Start by installing the dependencies:
 
-:::bash
-
+```bash
 npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query
-
-:::
+```
 
 :::info
 Onchain libraries and packages tend to require very current versions of Node. If you're not already using it, you may want to install [nvm].
@@ -65,19 +63,19 @@ Onchain libraries and packages tend to require very current versions of Node. If
 
 In Next.js with the app router, the root of your app is found in `app/layout.tsx`, if you followed the recommended setup options. As you want the blockchain provider context to be available for the entire app, you'll add it here.
 
-You'll need to set up your providers in a second file, so that you can add `"use client":` to the top. Doing so forces this code to be run client side, which is necessary since your server won't have access to your users' wallet information.
+You'll need to set up your providers in a second file, so that you can add `'use client';` to the top. Doing so forces this code to be run client side, which is necessary since your server won't have access to your users' wallet information.
 
 :::caution
 
-You must configure these wrappers in a separate file. It will not work if you try to add them and `"use client":` directly in `layout.tsx`!
+You must configure these wrappers in a separate file. It will not work if you try to add them and `'use client';` directly in `layout.tsx`!
 
 :::
 
 Add a new file in the `app` folder called `providers.tsx`.
 
 ### Imports
 
-As discussed above, add `"use client":` to the top of the file.
+As discussed above, add `'use client';` to the top of the file.
 
 Continue with the imports:
 

apps/base-docs/base-learn/docs/frontend-setup/wallet-connectors.md

@@ -63,7 +63,7 @@ The [Building an Onchain App] tutorial will show you how to do this!
 
 ### Coinbase Smart Wallet
 
-If you have the Coinbase Wallet extension, you might be wondering were the smart wallet can be found. By default, the smart wallet will only be invoked if you click the `Coinbase Wallet` button to log in **and** you **don't** have the browser extension. To test, open a private window with extensions disabled and try to log in.
+If you have the Coinbase Wallet extension, you might be wondering where the smart wallet can be found. By default, the smart wallet will only be invoked if you click the `Coinbase Wallet` button to log in **and** you **don't** have the browser extension. To test, open a private window with extensions disabled and try to log in.
 
 Selecting `Rainbow`, `MetaMask`, or `WalletConnect` will display a QR code so that the user can log in with their phone. Picking `Coinbase Wallet` will instead invoke the smart wallet login.
 

apps/base-docs/docs/tokens/token-list.md

@@ -14,13 +14,14 @@ keywords:
     Optimism Superchain,
     token deployment,
     add token to Base,
+    Superchain,
   ]
 hide_table_of_contents: true
 ---
 
 # The Base Token List
 
-This page is intended for token issuers who already have an ERC-20 contract deployed on Ethereum and would like to submit their token for bridging between Ethereum and Base. Base uses the [Optimism Superchain token list](https://github.com/ethereum-optimism/ethereum-optimism.github.io) as a reference for tokens that have been deployed on Base.
+This page is intended for token issuers who already have an ERC-20 contract deployed on Ethereum and would like to submit their token for bridging between Ethereum and Base. Base uses the [Superchain token list](https://github.com/ethereum-optimism/ethereum-optimism.github.io) as a reference for tokens that have been deployed on Base.
 
 **_Disclaimer: Base does not endorse any of the tokens that are listed in the Github repository and has conducted only preliminary checks, which include automated checks listed_** [**_here_**](https://github.com/ethereum-optimism/ethereum-optimism.github.io)**_._**
 
@@ -36,7 +37,7 @@ Select your preferred bridging framework and use it to deploy an ERC-20 for your
 
 ### Step 2: Submit details for your token
 
-Follow the instructions in the [GitHub repository](https://github.com/ethereum-optimism/ethereum-optimism.github.io) and submit a PR containing the required details for your token. You must specify in your token's data.json file a section for ‘base-sepolia' and/or ‘base’. The change you need to submit is particularly simple if your token has already been added to the Optimism token list. For example, [this PR](https://github.com/ethereum-optimism/ethereum-optimism.github.io/commit/27ab9b2d3388f7feba3a152e0a0748c73d732a68) shows the change required for cbETH, which was already on Optimism's token list and relies on the Base standard bridge.
+Follow the instructions in the [GitHub repository](https://github.com/ethereum-optimism/ethereum-optimism.github.io) and submit a PR containing the required details for your token. You must specify in your token's data.json file a section for ‘base-sepolia' and/or ‘base’. The change you need to submit is particularly simple if your token has already been added to the Superchain token list. For example, [this PR](https://github.com/ethereum-optimism/ethereum-optimism.github.io/commit/27ab9b2d3388f7feba3a152e0a0748c73d732a68) shows the change required for cbETH, which was already on Optimism's token list and relies on the Base standard bridge.
 
 ### Step 3: Await final approval
 

apps/base-docs/docs/tools/basenames-faq.md

@@ -11,7 +11,7 @@ displayed_sidebar: null
 
 ### 1. What are Basenames?
 
-Basenames are a core onchain building block that enable builders to establish their identity on Base by registering human-readable names for their wallet address(es). They are fully onchain, built on the same technology powering ENS names and deployed on Base. These human-readable names can be used when connecting to onchain apps, and sending and receiving on Base and any other EVM chain.
+[Basenames](https://base.org/names) are a core onchain building block that enable builders to establish their identity on Base by registering human-readable names for their wallet address(es). They are fully onchain, built on the same technology powering ENS names and deployed on Base. These human-readable names can be used when connecting to onchain apps, and sending and receiving on Base and any other EVM chain. Get your Basename at [base.org/names](https://base.org/names).
 
 ### 2. What are the Basename registration fees?
 

apps/base-docs/src/css/navbar.css

@@ -40,15 +40,17 @@
 }
 
 .navbar__item,
-.navbar__link {
+.navbar__link,
+.dropdown__link {
   padding: 0;
   font-family: CoinbaseMono;
   font-size: var(--title3-font-size);
   line-height: var(--title3-line-height);
   font-weight: var(--title3-font-weight);
 }
 
-.navbar__link:hover {
+.navbar__link:hover,
+.dropdown__link:hover {
   color: inherit;
   text-decoration: underline;
 }
@@ -76,14 +78,10 @@
   background-color: rgb(var(--gray100));
 }
 
-
 .dropdown__link {
   color: rgb(var(--gray0)) !important;
-  font-size: var(--title3-font-size);
-  line-height: var(--title3-line-height);
-  font-weight: var(--title3-font-weight);
-  border-radius: 0px;
 }
+
 .dropdown__link:hover {
   text-decoration: underline;
 }
@@ -113,3 +111,15 @@
 .navbar__link svg {
   display: none;
 }
+
+@media (max-width: 996px) {
+  .navbar-sidebar__items .navbar__item,
+  .navbar-sidebar__items .dropdown__link {
+    display: block !important;
+    color: var(--foreground-muted);
+    margin-top: 0.25rem;
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
+    font-weight: var(--body-font-weight);
+  }
+}

apps/base-docs/src/theme/Navbar/ColorModeToggle/index.js

@@ -1,22 +1,42 @@
-import React from 'react';
-import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
+import React, { useCallback } from 'react';
+import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import styles from './styles.module.css';
-export default function NavbarColorModeToggle({className}) {
+import logEvent, {
+  ActionType,
+  ComponentType,
+  AnalyticsEventImportance,
+} from 'base-ui/utils/logEvent';
+
+export default function NavbarColorModeToggle({ className }) {
   const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
-  const {colorMode, setColorMode} = useColorMode();
+  const { colorMode, setColorMode } = useColorMode();
+
+  const toggleSwitch = useCallback(() => {
+    const newColorMode = colorMode === 'dark' ? 'light' : 'dark';
+
+    logEvent(
+      `colormode_toggle_from_${colorMode}_to_${newColorMode}`,
+      {
+        action: ActionType.click,
+        componentType: ComponentType.icon,
+        context: 'base_docs_navbar',
+      },
+      AnalyticsEventImportance.low,
+    );
+    setColorMode(newColorMode);
+  }, [colorMode, setColorMode]);
+
   if (disabled) {
     return null;
   }
   return (
     <ColorModeToggle
       className={className}
-      buttonClassName={
-        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
-      }
+      buttonClassName={navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined}
       value={colorMode}
-      onChange={setColorMode}
+      onChange={toggleSwitch}
     />
   );
 }

apps/base-docs/src/theme/Navbar/index.js

@@ -2,19 +2,11 @@ import React from 'react';
 
 import NavbarLayout from '@theme/Navbar/Layout';
 import NavbarContent from '@theme/Navbar/Content';
-import Banner from '../../components/Banner/Banner';
 
 export default function Navbar() {
   return (
-    <>
-      <Banner
-        bannerName="basenamesLaunchDocsBanner"
-        href="https://base.org/names?utm_source=docs&utm_medium=banner"
-        text="Claim Your Basename Today!"
-      />
-      <NavbarLayout>
-        <NavbarContent />
-      </NavbarLayout>
-    </>
+    <NavbarLayout>
+      <NavbarContent />
+    </NavbarLayout>
   );
 }

apps/base-docs/tutorials/docs/0_intro-to-providers.md

@@ -335,7 +335,7 @@ In this tutorial, you've learned how Providers supply blockchain connection as a
 [Subgraph]: https://thegraph.com/docs/en/developing/creating-a-subgraph/
 [data for Base Sepolia here]: https://github.com/wagmi-dev/viem/blob/main/src/chains/definitions/baseSepolia.ts
 [Base]: https://docs.base.org/network-information
-[Optimism]: https://community.optimism.io/docs/useful-tools/networks/
+[Optimism]: https://docs.optimism.io/chain/networks
 [EIP-1193]: https://eips.ethereum.org/EIPS/eip-1193
 [QuickNode]: https://www.quicknode.com/
 [Alchemy Costs]: https://docs.alchemy.com/reference/compute-unit-costs