Merge branch 'master' into dms/telugu

.github/ISSUE_TEMPLATE/docs_request.yml

@@ -30,4 +30,4 @@ body:
     id: other
     attributes:
       label: Additional context
-      description: Add any other context or screenshots about the concern can be added here.
+      description: Add any additional context or screenshots about the concern here.

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
    {
@@ -100,11 +100,11 @@ If you're a builder who wants to add or update your project on the [Base Ecosyst
    - imageUrl: Path to your project's logo image
    - category: Your project's category, _one_ of: `consumer`, `defi`, `infra`, `onramp`, `wallet`
    - subcategory: Your project's subcategory, with the following options associated with each category
-      - `consumer`: _One_ of `creator`, `crypto taxes`, `dao`, `gaming`, `messaging`, `music`, `nft`, `payments`, `real world`, `social`
-      - `defi`: _One_ of `dex`, `dex aggregator`, `insurance`, `lending/borrowing`, `liquidity management`, `portfolio`, `stablecoin`, `yield vault`
-      - `infra`: _One_ of `ai`, `bridge`, `data`, `depin`, `developer tool`, `identity`, `node provider`, `raas`, `security`
-      - `onramp`: _One_ of `centralized exchange`, `fiat on-ramp`
-      - `wallet`: _One_ of `account abstraction`, `multisig`, `self-custody`
+     - `consumer`: _One_ of `creator`, `crypto taxes`, `dao`, `gaming`, `messaging`, `music`, `nft`, `payments`, `real world`, `social`
+     - `defi`: _One_ of `dex`, `dex aggregator`, `insurance`, `lending/borrowing`, `liquidity management`, `portfolio`, `stablecoin`, `yield vault`
+     - `infra`: _One_ of `ai`, `bridge`, `data`, `depin`, `developer tool`, `identity`, `node provider`, `raas`, `security`
+     - `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.
 
@@ -114,12 +114,14 @@ By opening a PR to add your project, you authorize and license Coinbase on a non
 
 **Note:** Submissions do not guarantee inclusion and all submissions are subject to review. Your project must be live on Base to potentially be included. Ensure all information is accurate and up-to-date.
 
-#### Tips for a successful submission
+#### Submission requirements
 
+- App content adheres to the [Base Editorial Style Guide](https://github.com/base-org/brand-kit/blob/main/guides/editorial-style-guide.md)
 - 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/docs/tools/block-explorers.md

@@ -84,7 +84,7 @@ A testnet explorer for [Base Sepolia](https://sepolia.basescan.org/) is also ava
 
 ## Routescan
 
-[Routescan](https://superscan.network/) superchain explorer allows you to search for transactions, addresses, tokens, prices and other activities taking place across all Superchain blockchains, including Base.
+[Routescan](https://routescan.io) superchain explorer allows you to search for transactions, addresses, tokens, prices and other activities taking place across all Superchain blockchains, including Base.
 
 ---
 

apps/base-docs/docs/tools/data-indexers.md

@@ -98,7 +98,7 @@ To get started, visit the [documentation](https://docs.envio.dev/docs/overview)
 
 ## GhostGraph
 
-[GhostGraph](https://GhostGraph.xyz/) makes it easy to build blazingly fast indexers (subgraphs) for smart contracts.
+[GhostGraph](https://ghostgraph.xyz/) makes it easy to build blazingly fast indexers (subgraphs) for smart contracts.
 
 GhostGraph is the first indexing solution that lets you write your index transformations in **Solidity**. Base dApps can query data with GraphQL using our hosted endpoints.
 

apps/base-docs/docs/tools/network-faucets.md

@@ -27,11 +27,11 @@ hide_table_of_contents: true
 
 ## Coinbase Developer Platform
 
-The [Coinbase Developer Platform Faucet](https://portal.cdp.coinbase.com/products/faucet) provides free testnet ETH on Base Sepolia - one claim per 24 hours.
+The [Coinbase Developer Platform Faucet](https://portal.cdp.coinbase.com/products/faucet) provides free testnet ETH on Base Sepolia - one claim every 7 days.
 
 :::info
 
-Requests to Coinbase Developer Platform's Faucet are limited to one claim per 24 hours.
+Requests to Coinbase Developer Platform's Faucet are limited to one every 7 days.
 
 :::
 

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/1_1_coinbase-smart-wallet.md

@@ -433,7 +433,7 @@ In this tutorial, you've learned how to connect users to your onchain app with t
 [Testnet Opensea]: https://testnets.opensea.io/
 [deploy]: https://docs.base.org/tutorials?tag=smart%20contracts
 [Sepolia Basescan]: https://sepolia.basescan.org/
-[BOAT]: https://www.smartwallet.dev/guides/create-app/using-boat
+[BOAT]: https://www.smartwallet.dev/guides/create-app/using-onchain-app-template
 [wagmi template]: https://www.smartwallet.dev/guides/create-app/using-wagmi
 [Coinbase Developer Platform (CDP)]: https://portal.cdp.coinbase.com/
 [Base Gasless Campaign]: https://www.smartwallet.dev/base-gasless-campaign

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

@@ -39,7 +39,7 @@ You'll need to set up an account (free) with the [Coinbase Developer Platform (C
 
 ### Smart Wallet
 
-Smart Wallets enables users to create an account in seconds with no app or extension required through the use of Passskey signing. This tutorial uses the [Base Wallet] (FKA Coinbase Smart Wallet) to sign and mint transactions.
+Smart Wallets enables users to create an account in seconds with no app or extension required through the use of Passkey signing. This tutorial uses the [Base Wallet] (FKA Coinbase Smart Wallet) to sign and mint transactions.
 
 ---
 
@@ -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:
 
@@ -206,7 +206,7 @@ The full `src/app/mint/page.tsx` file should look something like this:
 
 :::tip Smart Wallet Only
 
-To enable [Base Wallet] functionality add the `smartWalletOnly` prefence to the [wagmi connector]
+To enable [Base Wallet] functionality add the `smartWalletOnly` preference to the [wagmi connector]
 
 ```jsx
 <button

apps/base-docs/tutorials/docs/5_cross-chain-with-layerzero.md

@@ -354,7 +354,7 @@ contract ExampleContract is OApp {
 
 :::info
 
-Overriding the `_lzReceive` function allows you to provide any custom logic you wish when receiving messages, including making a call back to the source chain by invoking `_lzSend`. Visit the LayerZero [Message Design Patterns](https://docs.layerzero.network/contracts/message-design-patterns) for common messaging flows.
+Overriding the `_lzReceive` function allows you to provide any custom logic you wish when receiving messages, including making a call back to the source chain by invoking `_lzSend`. Visit the LayerZero [Message Design Patterns](https://docs.layerzero.network/v2/developers/evm/oapp/message-design-patterns) for common messaging flows.
 
 :::
 

apps/base-docs/tutorials/docs/5_deploy-with-fleek.md

@@ -42,7 +42,7 @@ The tutorial assumes you're comfortable with the basics of deploying an app and
 
 You can skip this section if you've already built an app based off the template, such as our tutorial for [How to Mint on Zora with an App].
 
-Open [Onchain App Template], click the green `Use  this template` button, and create a new repository from the template. Clone your repo and open it in an editor.
+Open [Onchain App Template], click the green `Use this template` button, and create a new repository from the template. Clone your repo and open it in an editor.
 
 Install _bun_ if you need to, and install dependencies.
 
@@ -113,7 +113,7 @@ Then, **in the root of your project** run:
 fleek login
 ```
 
-Click the link in your terminal, then click `Confirm` in the web page that opens up. Once your are connected, click the `Visit Dashboard` button. The site automatically creates a project called `First Project`. If you'd like, you can rename it, or add a new one.
+Click the link in your terminal, then click `Confirm` in the web page that opens up. Once you are connected, click the `Visit Dashboard` button. The site automatically creates a project called `First Project`. If you'd like, you can rename it, or add a new one.
 
 Each project can include more than one site.
 

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>
+    </>
   );
 }