Merge branch 'master' into base-errors

apps/base-docs/docs/components/HomePage/ResourcesSection.tsx

@@ -16,7 +16,7 @@ const resources = [
   {
     icon: Users,
     title: 'Discord',
-    description: 'Join our global community,get help, and meet builders.',
+    description: 'Join our global community, get help, and meet builders.',
     link: 'https://discord.com/invite/buildonbase'
   },
 
@@ -54,4 +54,4 @@ export function ResourcesSection() {
       </div>
     </div>
   );
-}
+}

apps/base-docs/docs/pages/builderkits/onchainkit/paymaster/quickstart-headless.mdx

@@ -17,7 +17,7 @@ npm >= 6.0.0
 
 > **How to Get a Paymaster & Bundler endpoint on Base testnet (Sepolia) from CDP**
 
-1. [Create](https://coinbase.com/developer-platform) a new CDP account or [sign in](https://portal.cdp.coinbase.com) to your exsiting account.
+1. [Create](https://coinbase.com/developer-platform) a new CDP account or [sign in](https://portal.cdp.coinbase.com) to your existing account.
 2. Navigate to [Paymaster](https://portal.cdp.coinbase.com/products/bundler-and-paymaster).
 3. The address of the NFT contract we are calling is `0x66519FCAee1Ed65bc9e0aCc25cCD900668D3eD49`, add that to the contract allowlist and save the policy.
 4. Switch to Base testnet (Sepolia) in the top right of the configuration.

apps/base-docs/docs/pages/builderkits/onchainkit/paymaster/security.mdx

@@ -6,7 +6,7 @@ slug: security
 
 It is important to understand where you are using your Paymaster endpoint as anyone who has your key can send requests to sponsor transactions.
 
-We strongly reccomend setting up a contract allowlist on your paymaster configuration which will lock down your paymaster to only sponsor transactions on your wallet.
+We strongly recommend setting up a contract allowlist on your paymaster configuration which will lock down your paymaster to only sponsor transactions on your wallet.
 
 Further security measures such as setting up a paymaster Proxy so that your api key is not leaked is also recommended.
 

apps/base-docs/docs/pages/builderkits/onchainkit/paymaster/troubleshooting.mdx

@@ -8,7 +8,7 @@ This tutorial explains how to debug common issues you may face when sending User
 
 ## Execution reverted
 
-The UserOperation was able to make it onchain, but an error occured in one of the smart contracts it interacted with, and thus the entire operation had to be reverted. This can be due to
+The UserOperation was able to make it onchain, but an error occurred in one of the smart contracts it interacted with, and thus the entire operation had to be reverted. This can be due to
 
 - Not enough gas to pay for execution
   - Try increasing the `preVerificationGas` or `callGasLimit` padding

apps/base-docs/docs/pages/cookbook/client-side-development/introduction-to-providers.mdx

@@ -268,7 +268,7 @@ As before, you can confirm the Alchemy Provider is working by running the app an
 
 In this tutorial, you've learned how Providers supply blockchain connection as a service, eliminating the need for developers to run and maintain their own nodes. You also learned how to connect your app to the blockchain using several different providers, including the public provider(s).
 
-[Base Learn]: https://base.org/learn
+[Base Learn]: https://docs.base.org/learn/welcome
 [Next.js]: https://nextjs.org/
 [RainbowKit]: https://rainbowkit.com/
 [wagmi]: https://wagmi.sh/
@@ -284,7 +284,7 @@ In this tutorial, you've learned how Providers supply blockchain connection as a
 [smart contract development]: https://base.org/learn
 [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
+[Base]: https://docs.base.org/chain/network-information
 [Optimism]: https://docs.optimism.io/chain/networks
 [EIP-1193]: https://eips.ethereum.org/EIPS/eip-1193
 [QuickNode]: https://www.quicknode.com/

apps/base-docs/docs/pages/cookbook/token-gating/gate-irl-events-with-nouns.mdx

@@ -397,7 +397,7 @@ From here, you can add much better styling, or even pull the NFT art of the owne
 
 In this tutorial, you learned about [Nouns] and how the platform makes it easy to create avatar-based communities. You also learned how to use [BuilderDAO] to create your own DAO without writing any code. Finally, you learned how to create an app that can be used to allow or deny access to a private event based on ownership of an NFT in your DAO.
 
-[Base Learn]: https://base.org/learn
+[Base Learn]: https://docs.base.org/learn/welcome  
 [ERC-721 Tokens]: https://docs.base.org/base-learn/docs/erc-721-token/erc-721-standard-video
 [OpenZeppelin ERC-721]: https://docs.openzeppelin.com/contracts/2.x/api/token/erc721
 [OpenZeppelin]: https://www.openzeppelin.com/

apps/base-docs/docs/pages/cookbook/use-case-guides/commerce/build-an-ecommerce-app.mdx

@@ -1,15 +1,15 @@
 ---
-title: 'Build a eCommerce App using Coinbase Commerce and OnchainKit'
+title: 'Build an eCommerce App using Coinbase Commerce and OnchainKit'
 slug: /coinbase-commerce-payment-integration
 description: Learn how to integrate Coinbase Commerce payments into your application using OnchainKit.
 authors:
   - hughescoin
 ---
 
-# Build a eCommerce App using Coinbase Commerce and OnchainKit
+# Build an eCommerce App using Coinbase Commerce and OnchainKit
 
 Looking to sell items and receive crypto on Base? Well, look no further!
-This tutorial will guide you through the process of integrating Coinbase Commerce products into your application using OnchainKit. By the end of the tutorial you will be able to spin up a demo store that allows you to sell products for crypto. If you customers do not have crypto wallets, they can easily sign up with a few clicks using [Passkeys].
+This tutorial will guide you through the process of integrating Coinbase Commerce products into your application using OnchainKit. By the end of the tutorial you will be able to spin up a demo store that allows you to sell products for crypto. If your customers do not have crypto wallets, they can easily sign up with a few clicks using [Passkeys].
 
 ## Prerequisites
 

apps/base-docs/docs/pages/identity/mobile-wallet-protocol/spec-overview.mdx

@@ -16,5 +16,5 @@ It creates a direct channel between client and wallet apps, removing the need fo
 - Direct: The protocol uses deep links as its transport layer to let participating apps deliver messages directly to their peer without external entities such as a bridge server.
 - Secure: It provides an encrypted P2P communication channel between client and server (wallet host) to exchange discrete stateless messages.
 - Efficient: Reduces the number of hops between client applications and wallet via support for batch requests.
-- Decentralized and reliable: It defines a decentralized verification procedure to check authenticity of each other using well-known URI standard for univeral link without a centralized registry.
+- Decentralized and reliable: It defines a decentralized verification procedure to check authenticity of each other using well-known URI standard for universal link without a centralized registry.
 

apps/base-docs/docs/pages/use-cases/defi-your-app.mdx

@@ -101,7 +101,7 @@ The Swap component uses **Uniswap V3** as the default router, but you can also u
 
 
 ### Swap Settings
-The Swap component comes preconfigured but is highly cusotomizable. Just a couple of the settings you can customize:
+The Swap component comes preconfigured but is highly customizable. Just a couple of the settings you can customize:
 - Swap settings
 - bidirectional or unidiectional swaps
 - Gasless swaps with paymasters

apps/base-docs/docs/public/serve.json

@@ -17,6 +17,18 @@
     {
       "source": "/tutorials/deploy-with-foundry",
       "destination": "/cookbook/smart-contract-development/foundry/deploy-with-foundry"
+    },
+    {
+      "source": "/guides/run-a-base-node",
+      "destination": "/chain/run-a-base-node"
+    },
+    {
+      "source": "/network-information",
+      "destination": "/chain/network-information"
+    },
+    {
+      "source": "/tutorials/deploy-with-remix",
+      "destination": "/cookbook/smart-contract-development/remix/deploy-with-remix"
     }
   ]
 }

apps/bridge/src/utils/hooks/usePrepareERC20DepositTo.ts

@@ -1,4 +1,4 @@
-import L1StandartBridge from 'apps/bridge/src/contract-abis/L1StandardBridge';
+import L1StandardBridge from 'apps/bridge/src/contract-abis/L1StandardBridge';
 import { Asset } from 'apps/bridge/src/types/Asset';
 import getConfig from 'next/config';
 import { parseUnits } from 'viem';
@@ -28,7 +28,7 @@ export function usePrepareERC20DepositTo({
       isPermittedToBridge && depositAmount !== ''
         ? publicRuntimeConfig.l1BridgeProxyAddress
         : undefined,
-    abi: L1StandartBridge,
+    abi: L1StandardBridge,
     functionName: 'depositERC20To',
     chainId: parseInt(publicRuntimeConfig.l1ChainID),
     args: [
@@ -55,7 +55,7 @@ export async function prepareERC20DepositTo({
 }: UsePrepareERC20DepositToProps) {
   return prepareWriteContract({
     address: publicRuntimeConfig.l1BridgeProxyAddress,
-    abi: L1StandartBridge,
+    abi: L1StandardBridge,
     functionName: 'depositERC20To',
     chainId: parseInt(publicRuntimeConfig.l1ChainID),
     args: [

apps/web/middleware.ts

@@ -53,15 +53,15 @@ export function middleware(req: NextRequest) {
     url.pathname === '/learn'
   ) {
     url.host = 'docs.base.org';
-    url.pathname = '/base-learn/docs/welcome';
+    url.pathname = '/learn/welcome';
     url.port = '443';
 
     return NextResponse.redirect(url);
   }
 
   if (url.pathname === '/guides/run-a-base-goerli-node') {
     url.host = 'docs.base.org';
-    url.pathname = '/tutorials/run-a-base-node';
+    url.pathname = '/chain/run-a-base-node';
     url.port = '443';
 
     return NextResponse.redirect(url);
@@ -181,7 +181,7 @@ export function middleware(req: NextRequest) {
 
   if (url.pathname === '/tools/onboarding') {
     url.host = 'docs.base.org';
-    url.pathname = '/'; // TODO: add pathname
+    url.pathname = '/chain/onboarding';
     url.port = '443';
 
     return NextResponse.redirect(url);

apps/web/next.config.js

@@ -126,7 +126,7 @@ const contentSecurityPolicy = {
     'https://base-sepolia.easscan.org/graphql', // nft
     'https://*.google-analytics.com',
   ],
-  'frame-src': ['https://p.datadoghq.com'],
+  'frame-src': ['https://p.datadoghq.com', walletconnectDomains],
   'frame-ancestors': ["'self'", baseXYZDomains],
   'form-action': ["'self'", baseXYZDomains],
   'img-src': [

apps/web/src/components/Basenames/UsernameProfileCasts/index.tsx

@@ -2,7 +2,7 @@
 
 import { useUsernameProfile } from 'apps/web/src/components/Basenames/UsernameProfileContext';
 import UsernameProfileSectionTitle from 'apps/web/src/components/Basenames/UsernameProfileSectionTitle';
-import NeymarCast from 'apps/web/src/components/NeymarCast';
+import NeynarCast from 'apps/web/src/components/NeynarCast';
 import useReadBaseEnsTextRecords from 'apps/web/src/hooks/useReadBaseEnsTextRecords';
 
 export default function UsernameProfileCasts() {
@@ -21,7 +21,7 @@ export default function UsernameProfileCasts() {
       <ul className="mt-6 grid grid-cols-1 gap-8 md:grid-cols-2">
         {casts.map((cast) => (
           <li key={cast}>
-            <NeymarCast identifier={cast} type="url" />
+            <NeynarCast identifier={cast} type="url" />
           </li>
         ))}
       </ul>

apps/web/src/components/Builders/Landing/Hero/index.tsx

@@ -44,13 +44,27 @@ export function Hero() {
         >
           <GridHero hasBlue />
         </div>
-        <div className="z-10 px-6">
-          <Title className=" font-display text-[1.25rem] leading-[1.2em] tracking-tight md:text-[2rem] lg:text-[3rem]">
+
+        <div className="absolute top-20 z-20 flex w-full md:justify-center px-6">
+          <ButtonWithLinkAndEventLogging
+            variant={ButtonVariants.SecondaryOutline}
+            iconName="arrowRight"
+            buttonClassNames="!xs:max-w-[350px] !rounded-full text-xs md:text-sm font-medium tracking-wide bg-white/20 text-white backdrop-blur-sm border-none !px-2.5 !py-1"
+            href="https://flashblocks.base.org/"
+            eventName="flashblocks-announcement"
+            target="_blank"
+          >
+            Base is now 10x faster with 200ms block times
+          </ButtonWithLinkAndEventLogging>
+        </div>
+
+        <div className="z-10 flex w-full flex-col items-center px-6">
+          <Title className="font-display text-[1.25rem] leading-[1.2em] tracking-tight md:text-[2rem] lg:text-[3rem]">
             What do you want to build today?
           </Title>
 
-          <div className="mt-7 flex w-full flex-col items-center gap-4 md:w-[645px]">
-            <div className="z-10 flex w-full flex-col items-start justify-center gap-4 md:flex md:flex-row md:items-center">
+          <div className="mt-7 flex w-full flex-col items-center gap-4 md:w-full">
+            <div className="z-10 flex w-full flex-col items-start justify-center gap-4 md:flex md:flex-row md:items-center md:justify-center">
               <ButtonWithLinkAndEventLogging
                 variant={ButtonVariants.SecondaryOutline}
                 iconName="baseOrgDiagonalUpArrow"

apps/web/src/components/Builders/Shared/LiveDemo/index.tsx

@@ -265,6 +265,18 @@ function DesktopDemo({
             >
               Docs
             </Link>
+            <Link
+              href="https://onchainkit.xyz/playground"
+              target="_blank"
+              className={classNames(
+                'rounded-lg border px-3 py-1 transition-colors',
+                mode === 'dark'
+                  ? 'border-dark-palette-line/20 hover:bg-white/10'
+                  : 'border-dark-palette-line/20 text-dark-palette-backgroundAlternate hover:bg-white/10',
+              )}
+            >
+              Playground
+            </Link>
             <button
               type="button"
               onClick={handleCopy}

apps/web/src/components/NeymarCast/index.tsx → apps/web/src/components/NeynarCast/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import ImageWithLoading from 'apps/web/src/components/ImageWithLoading';
-import NeymarFrame from 'apps/web/src/components/NeymarFrame';
-import { fetchCast, NeymarCastData } from 'apps/web/src/utils/frames';
+import NeynarFrame from 'apps/web/src/components/NeynarFrame';
+import { fetchCast, NeynarCastData } from 'apps/web/src/utils/frames';
 import Link from 'next/link';
 import { MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Hls from 'hls.js';
@@ -102,14 +102,14 @@ function ParagraphWithLinks({ text }: { text: string }) {
   return textWithLinks;
 }
 
-export default function NeymarCast({
+export default function NeynarCast({
   identifier,
   type,
 }: {
   identifier: string;
   type: 'url' | 'hash';
 }) {
-  const [data, setData] = useState<NeymarCastData['cast']>();
+  const [data, setData] = useState<NeynarCastData['cast']>();
   const { logError } = useErrors();
   useEffect(() => {
     fetchCast({ type, identifier })
@@ -208,7 +208,7 @@ export default function NeymarCast({
         <ul className="flex flex-col gap-2">
           {frames.map((frame) => (
             <li key={frame.title}>
-              <NeymarFrame frame={frame} hash={hash} />
+              <NeynarFrame frame={frame} hash={hash} />
             </li>
           ))}
         </ul>

apps/web/src/components/NeymarFrame/index.tsx → apps/web/src/components/NeynarFrame/index.tsx

@@ -1,9 +1,9 @@
 import ImageWithLoading from 'apps/web/src/components/ImageWithLoading';
-import { NeynarFrame } from 'apps/web/src/utils/frames';
+import { NeynarFrame as NeynarFrameType } from 'apps/web/src/utils/frames';
 
 // Frame displayed from Neynar API data
 // No buttons or interactions for now, just a link to the frame source
-export default function NeymarFrame({ frame }: { hash: string; frame: NeynarFrame }) {
+export default function NeynarFrame({ frame }: { hash: string; frame: NeynarFrameType }) {
   return (
     <div className="overflow-hidden rounded-3xl border border-gray-40/20">
       {frame.frames_url && (

apps/web/src/components/ThreeHero/models.tsx

@@ -7,7 +7,7 @@ import { useMediaQuery } from 'usehooks-ts';
 import dynamic from 'next/dynamic';
 
 // Assets
-import controlerModel from './assets/controller.glb';
+import controllerModel from './assets/controller.glb';
 import ethModel from './assets/eth.glb';
 import globeModel from './assets/globe.glb';
 import phoneModel from './assets/phone.glb';
@@ -229,7 +229,7 @@ export function Lightning() {
 }
 
 export function Controller(props: MeshProps) {
-  const { nodes } = useGLTF(controlerModel);
+  const { nodes } = useGLTF(controllerModel);
   const model = nodes.Controller as Mesh;
   return (
     <PhysicsMesh>

apps/web/src/components/base-org/shared/TopNavigation/MenuMobile.tsx

@@ -130,7 +130,7 @@ export default function MenuMobile({ links }: MenuMobileProps) {
               type="button"
               onClick={toggleMenu}
               aria-label="Close Menu"
-              className="rounded.xl relative z-20 bg-black px-4 py-2 pr-1"
+              className="rounded-xl relative z-20 bg-black px-4 py-2 pr-1"
             >
               <Icon name="close" color="currentColor" height="1rem" width="1rem" />
             </button>

apps/web/src/utils/frames.ts

@@ -1,7 +1,7 @@
 import { encodeUrlQueryParams } from 'apps/web/src/utils/urls';
 
-// TODO: There's way more that neymar returns but we only need this for now
-export type NeymarButton = {
+// TODO: There's way more that neynar returns but we only need this for now
+export type NeynarButton = {
   action_type: string;
   index: number;
   post_url: string;
@@ -10,7 +10,7 @@ export type NeymarButton = {
 };
 
 export type NeynarFrame = {
-  buttons: NeymarButton[];
+  buttons: NeynarButton[];
   frames_url: string;
   image: string;
   image_aspect_ratio: string;
@@ -24,11 +24,11 @@ export type NeynarEmbed = {
   url: string;
 };
 
-export type NeymarEmbedCast = {
+export type NeynarEmbedCast = {
   cast_id: { fid: number; hash: string };
 };
 
-export type NeymarCastData = {
+export type NeynarCastData = {
   cast: {
     frames: NeynarFrame[];
     embeds: NeynarEmbed[];
@@ -60,7 +60,7 @@ export async function fetchCast({
   };
   try {
     const response = await fetch(url, options);
-    const data = (await response.json()) as NeymarCastData;
+    const data = (await response.json()) as NeynarCastData;
     return data.cast;
   } catch (error) {}
 }