Merge branch 'master' into master

README.md

@@ -27,7 +27,7 @@ Base is a secure, low-cost, developer-friendly Ethereum L2 built to bring the ne
 
 ## Setup
 
-1. Ensure `nvm` is [installed](https://github.com/nvm-sh/nvm#install--update-script).
+1. Ensure that `nvm` is [installed](https://github.com/nvm-sh/nvm#install--update-script).
 2. Clone the repository.
 3. If `nvm` doesn't auto-load the Node.js environment when changing to the repo directory, run `nvm use`.
 4. Enable Yarn by running `corepack enable`.
@@ -71,7 +71,7 @@ yarn workspace @app/bridge dev
 
 ## Contributing
 
-We welcome contributions to Base! To contribute, please see [CONTRIBUTING.md](CONTRIBUTING.md).
+We welcome contributions to Base! For guidelines on how to contribute please refer to [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ### Updating the Base Ecosystem Page
 
@@ -81,7 +81,7 @@ 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 this format:
+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:
 
    ```json
    {
@@ -120,7 +120,7 @@ By opening a PR to add your project, you authorize and license Coinbase on a non
 - App has been live on Base for at least 30 days
 - App has a Terms of Service and Privacy Policy
 - App supports HTTPS and 301 redirects HTTP requests
-- App is not a TGE, ICO, airdrop, claim, or similar
+- App is not a TGE (Token Generation Event), ICO (Initial Coin Offering), airdrop, claim, or similar
 - Landing page is a Base-specific page for users who will becoming from base.org
 - Active development and community engagement can be observed without issue
 

apps/base-docs/base-learn/docs/arrays/arrays-exercise.md

@@ -50,7 +50,7 @@ Write a function called `appendToNumbers` that takes a `uint[] calldata` array c
 
 At the contract level, add an `address` array called `senders` and a `uint` array called `timestamps`.
 
-Write a function called `saveTimestamp` that takes a `uint` called `_unixTimestamp` as an argument. When called, it should add the address of the caller to the end of `senders` and the `_unixTimeStamp` to `timestamps`.
+Write a function called `saveTimestamp` that takes a `uint` called `_unixTimestamp` as an argument. When called, it should add the address of the caller to the end of `senders` and the `_unixTimestamp` to `timestamps`.
 
 :::tip
 

apps/base-docs/base-learn/docs/imports/imports-sbs.md

@@ -31,7 +31,7 @@ Find the documentation for the `EnumerableSet` under _Utils_. This library will
 
 Create a new file to work in and add the `pragma` and license identifier.
 
-In Remix, you can import libraries directly from Github!
+In Remix, you can import libraries directly from GitHub!
 
 ```solidity
 import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/utils/structs/EnumerableSet.sol";

apps/base-docs/base-learn/docs/storage/simple-storage-sbs.md

@@ -149,7 +149,7 @@ Review the **Warning** in the [layout] section of the docs for more details!
 
 ### Add a Function to Update `age`
 
-It would also be good to be able to update the `age` value. This problem has slightly different considerations. Sadly, `age` will never go down. It should also probably only go up by one year for each update. The `++` operator works in Solidity, so we can use that to create a function that simple increments age when called.
+It would also be good to be able to update the `age` value. This problem has slightly different considerations. Sadly, `age` will never go down. It should also probably only go up by one year for each update. The `++` operator works in Solidity, so we can use that to create a function that simply increments age when called.
 
 <details>
 

apps/base-docs/tutorials/docs/0_deploy-with-hardhat.md

@@ -291,7 +291,7 @@ etherscan: {
 
 :::info
 
-When verifying a contract with Basescan on testnet (Sepolia), an API key is not required. You can leave the value as `PLACEHOLDER_STRING`. On mainnet, you can get your Basescan API key from [here](https://basescan.org/myapikey) after you sign up for an account.
+You can get your Basescan API key from [basescan.org](https://basescan.org/myapikey) when you sign up for an account.
 
 :::
 

apps/base-docs/tutorials/docs/0_deploy-with-tenderly.md

@@ -417,4 +417,4 @@ For more information on the Tenderly full-stack infrastructure, check out the fo
 
 - [Documentation](https://docs.tenderly.co/)
 - [Blog](https://blog.tenderly.co/)
-- [Twitter](https://twitter.com/TenderlyApp)
+- [Twitter](https://x.com/TenderlyApp)

apps/base-docs/tutorials/docs/2_email-campaign-with-resend.md

@@ -288,7 +288,7 @@ export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({ firstNam
 );
 ```
 
-In `src/app/page.tsx` add the following section to display wether the user is a member or not:
+In `src/app/page.tsx` add the following section to display whether the user is a member or not:
 
 ```html
 <section

apps/base-docs/tutorials/docs/2_paymaster-sponsor-using-wagi.md

@@ -136,7 +136,7 @@ In this step, we’ll create a new page in our project where users can mint an N
 
 In your project’s `src/app` folder, create a new file called `mint/page.tsx`. This file will contain the code to manage wallet connection, check for paymaster capabilities, and execute the minting action.
 
-:::info Experimenal Hooks and Capabilities
+:::info Experimental Hooks and Capabilities
 
 To ensure a smooth, gas-free NFT minting experience, it’s important to understand the purpose of two key hooks from Wagmi:
 

apps/web/next.config.js

@@ -118,6 +118,7 @@ const contentSecurityPolicy = {
     'https://sdk-api.neynar.com/', // Neymar API
     'https://unpkg.com/@lottiefiles/[email protected]/dist/dotlottie-player.wasm', // lottie player
     `https://${process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL}`,
+    'https://usdc-claim-git-master-coinbase-vercel.vercel.app',
   ],
   'frame-src': ['https://p.datadoghq.com'],
   'frame-ancestors': ["'self'", baseXYZDomains],

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

@@ -337,8 +337,7 @@ export default function RegistrationForm() {
           </div>
           {code && (
             <div className="relative z-10 -mt-8 rounded-2xl bg-gradient-to-r from-indigo-40 to-orange-30 px-4 py-4 pt-12 text-center text-lg text-white">
-              Claim your <strong>free creator basename</strong> &mdash; See you{' '}
-              <strong>Friday at Botanica</strong>
+              Claim your <strong>free basename</strong> &mdash; Thanks for joining us!
             </div>
           )}
 

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

@@ -33,7 +33,7 @@ function SuggestionEntry({
   }, [handleSelectName, suggestion]);
 
   return (
-    <button key={suggestion} className={buttonClasses} type="button" onClick={selectSuggestion}>
+    <button key={suggestion} className={buttonClasses} type="button" onMouseDown={selectSuggestion}>
       <span className="truncate">{formatBaseEthDomain(suggestion, basenameChain.id)}</span>
       <Icon name="chevronRight" width={iconSize} height={iconSize} />
     </button>
@@ -217,8 +217,8 @@ export default function RegistrationSearchInput({
 
   const handleSelectName = useCallback(
     (name: string) => {
-      setDropdownOpen(false);
       setSelectedName(name.trim());
+      setDropdownOpen(false);
     },
     [setSelectedName],
   );
@@ -298,7 +298,7 @@ export default function RegistrationSearchInput({
         ) : isNameAvailable === true ? (
           <>
             <p className={`${dropdownLabelClasses} hidden md:block`}>Available</p>
-            <button className={buttonClasses} type="button" onClick={selectName}>
+            <button className={buttonClasses} type="button" onMouseDown={selectName}>
               <span className="truncate">{formattedBaseEthDomain}</span>
               <ChevronRightIcon width={iconSize} height={iconSize} />
             </button>

apps/web/src/components/Basenames/RegistrationSuccessMessage/USDCClaimModal.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
+
+type USDCClaimModalProps = {
+  message: string;
+  onClose: () => void;
+};
+
+function handleButtonClick() {
+  window.open('https://www.coinbase.com/usdc', '_blank', 'noopener noreferrer');
+}
+
+function USDCClaimModal({ message, onClose }: USDCClaimModalProps) {
+  const popupClasses = classNames(
+    'fixed top-0 left-0 w-full h-full flex items-center justify-center',
+  );
+
+  return (
+    <div className={popupClasses}>
+      <div className="relative w-11/12 max-w-lg rounded-lg bg-white p-8 opacity-95 shadow-lg sm:w-3/4 md:w-2/3 lg:w-1/2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-gray-600 hover:text-gray-800 absolute right-2 top-0"
+        >
+          &times;
+        </button>
+        <p className="text-center text-lg font-bold">{message}</p>
+        <Button
+          variant={ButtonVariants.SecondaryDarkBounce}
+          rounded
+          className="mx-auto mt-4 block"
+          onClick={handleButtonClick}
+        >
+          Learn more
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default USDCClaimModal;

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

@@ -5,13 +5,40 @@ import {
 } from 'apps/web/src/components/Basenames/RegistrationContext';
 import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { useAccount } from 'wagmi';
+import USDCClaimModal from './USDCClaimModal';
 
 export default function RegistrationSuccessMessage() {
-  const { setRegistrationStep, redirectToProfile } = useRegistration();
+  const { setRegistrationStep, redirectToProfile, code } = useRegistration();
+
+  const { address } = useAccount();
 
   const { logEventWithContext } = useAnalytics();
 
+  const [popupMessage, setPopupMessage] = useState<string | null>(null);
+
+  const claimUSDC = useCallback(() => {
+    setPopupMessage('USDC is being sent to your wallet');
+    fetch(`${process.env.NEXT_PUBLIC_USDC_URL}?address=${address}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          const resp = (await response.json()) as { error: string };
+          throw new Error(resp.error);
+        }
+        setPopupMessage('USDC claimed successfully!');
+      })
+      .catch((error) => {
+        setPopupMessage(`${error.message}`);
+        console.error('Error:', error);
+      });
+  }, [address]);
+
+  const closePopup = useCallback(() => setPopupMessage(null), []);
+
   const customizeProfileOnClick = useCallback(() => {
     logEventWithContext('customize_profile', ActionType.click);
     setRegistrationStep(RegistrationSteps.Profile);
@@ -23,19 +50,28 @@ export default function RegistrationSuccessMessage() {
   }, [logEventWithContext, redirectToProfile]);
 
   return (
-    <div className="items-left mx-auto flex w-full max-w-[65rem] flex-col justify-between gap-6 rounded-3xl border border-[#266EFF] bg-blue-600 p-10 shadow-xl transition-all duration-500 md:flex-row md:items-center">
-      <h1 className="text-center text-3xl font-bold tracking-wider text-white md:text-left">
-        Congrats!
-        <br className="md:hidden" /> This name is yours!
-      </h1>
-      <div className="flex flex-col gap-4 md:flex-row">
-        <Button rounded fullWidth onClick={customizeProfileOnClick}>
-          Customize Profile
-        </Button>
-        <Button rounded fullWidth variant={ButtonVariants.Secondary} onClick={goToProfileOnClick}>
-          Go to Profile
-        </Button>
+    <>
+      {popupMessage && <USDCClaimModal message={popupMessage} onClose={closePopup} />}
+      <div className="items-left mx-auto flex w-full max-w-[65rem] flex-col justify-between gap-6 rounded-3xl border border-[#266EFF] bg-blue-600 p-10 shadow-xl transition-all duration-500 md:flex-row md:items-center">
+        <h1 className="text-center text-3xl font-bold tracking-wider text-white md:text-left">
+          Congrats!
+          <br className="md:hidden" /> This name is yours!
+        </h1>
+        <div className="flex flex-col gap-4 md:flex-row">
+          {code ? (
+            <Button rounded fullWidth onClick={claimUSDC}>
+              Claim USDC
+            </Button>
+          ) : (
+            <Button rounded fullWidth onClick={customizeProfileOnClick}>
+              Customize Profile
+            </Button>
+          )}
+          <Button rounded fullWidth variant={ButtonVariants.Secondary} onClick={goToProfileOnClick}>
+            Go to Profile
+          </Button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

apps/web/src/components/GetStarted/GetInvolved.tsx

@@ -21,21 +21,29 @@ export default async function GetInvolved() {
           topRight={<Icon name="diagonalUpArrow" width="16px" height="16px" />}
           classnames="bg-teal-80 border-teal-80"
         />
+        <ResourceCard
+          title="Base Community Leaders"
+          description="Follow and connect with key community members in the Base ecosystem"
+          href="https://x.com/i/lists/1869425408573075694"
+          topLeft={<span className="font-mono">04</span>}
+          topRight={<Icon name="diagonalUpArrow" width="16px" height="16px" />}
+          classnames="bg-teal-60 border-teal-60"
+        />
         <ResourceCard
           title="Host a Meetup"
           description="Sign up to host a meetup with other Based builders anywhere in the world"
           href="https://docs.google.com/forms/d/e/1FAIpQLSf5wnzD_czyYOyHFeOmFK_rjsJj7Utovo3jWwR40JizPqmDZg/viewform"
           topLeft={<span className="font-mono">02</span>}
           topRight={<Icon name="diagonalUpArrow" width="16px" height="16px" />}
-          classnames="bg-teal-60 border-teal-60"
+          classnames="bg-teal-80 border-teal-80"
         />
         <ResourceCard
           title="Use Apps on Base"
           description="Browse and use projects being built on the Base ecosystem"
           href="https://www.base.org/ecosystem?utm_source=dotorg&utm_medium=builderkit"
           topLeft={<span className="font-mono">03</span>}
           topRight={<Icon name="diagonalUpArrow" width="16px" height="16px" />}
-          classnames="bg-teal-80 border-teal-80"
+          classnames="bg-teal-60 border-teal-60"
         />
       </div>
     </div>

apps/web/src/components/base-org/root/SlidingTextSection/index.tsx

@@ -8,7 +8,7 @@ import { CSSProperties, useRef } from 'react';
 export default function SlidingTextSection() {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const text = ' Base is for everyone - بایس للجمیع - Base es para todos - 基地适合所有人 - La Base è per tutti - Base est pour tout le monde - Base ni ya kila mtu - Base yɛ ma obiara - Base nye amesiame tɔ - Base ji he ni mɔ fɛɛ mɔ yɔɔ - Base är för alla - Base สำหรับทุกคน - ';
+  const text = ' Base is for everyone - بایس للجمیع - Base es para todos - 基地适合所有人 - La Base è per tutti - Base est pour tout le monde - Base ni ya kila mtu - Base yɛ ma obiara - Base nye amesiame tɔ - Base ji he ni mɔ fɛɛ mɔ yɔɔ - Base är för alla - Base สำหรับทุกคน - Бейз для каждого - Бейз для кожного - ';
 
   const containerClasses = classNames(
     'relative w-full overflow-hidden rounded-2xl bg-blue p-8',

apps/web/src/data/ecosystem.json

@@ -1032,8 +1032,8 @@
   },
   {
     "name": "Alien Base",
-    "url": "https://app.alienbase.xyz/",
-    "description": "Alien Base is the Base-native decentralized exchange ecosystem. Use it to trade blue chip assets and derivatives, or check out Area 51 to play with experimental tokens, predictions and lotteries",
+    "url": "https://alienbase.xyz/",
+    "description": "Alien Base is building a Base trading hub for efficiently trading tokens and memecoins onchain. Offering aggregated liquidity, limit orders, yield farming and more, Alien technology helps you use Base.",
     "category": "defi",
     "subcategory": "dex",
     "imageUrl": "/images/partners/alienbase.webp"
@@ -3645,5 +3645,13 @@
     "description": "BlockAI combines blockchain and AI to offer decentralized access to innovative tools like Text and image generation, video summarization, games, etc.",
     "url": "https://base.blockai.dev",
     "imageUrl": "/images/partners/blockai.png"
+  },
+  {
+    "name": "Turnkey",
+    "category": "infra",
+    "subcategory": "developer tool",
+    "description": "Turnkey is an enterprise-grade operating system for wallets: powerful, modular, and built to adapt to any use case from embedded wallets to programmatic backend crypto automation.",
+    "url": "https://www.turnkey.com/",
+    "imageUrl": "/images/partners/turnkey.png"
   }
 ]

apps/web/src/hooks/useWriteContractsWithLogs.ts

@@ -150,7 +150,7 @@ export default function useWriteContractsWithLogs({
       return;
     }
 
-    // Onchain TransactionReceipt Successfull with logs
+    // Onchain TransactionReceipt Successful with logs
     if (transactionReceipt?.status === 'success' && sendCallsResult?.receipts?.length) {
       const logs = transactionReceipt.logs;
       const decodedUserOperationEventLog = logs