diff --git a/docs/base-chain/network-information/transaction-finality.mdx b/docs/base-chain/network-information/transaction-finality.mdx index 01ae09508..a2a3957a0 100644 --- a/docs/base-chain/network-information/transaction-finality.mdx +++ b/docs/base-chain/network-information/transaction-finality.mdx @@ -20,7 +20,7 @@ This describes finality for transactions on Base except withdrawal transactions For transactions on Base, finality is not a single time to wait for. Instead, there are 4 stages in time that each provide increasing security guarantees. -![Diagram of transaction finality stages on Base](/images/transaction-finality/base-tx-finality.jpg) +![Diagram illustrating the four stages of transaction finality on Base: Flashblock Inclusion (200ms), L2 Block Inclusion (2s), L1 Batch Inclusion (2m), and L1 Batch Finality (20m)](/images/transaction-finality/base-tx-finality.jpg) diff --git a/docs/base-chain/tools/tokens-in-wallet.mdx b/docs/base-chain/tools/tokens-in-wallet.mdx index bf84406ef..5bee09733 100644 --- a/docs/base-chain/tools/tokens-in-wallet.mdx +++ b/docs/base-chain/tools/tokens-in-wallet.mdx @@ -81,9 +81,9 @@ By sharing a unique link to your token’s asset page, your community can easily **Step 2:** Click the share button -![][image1] +![Screenshot of Coinbase Wallet showing the share button on an asset page][image1] -![][image2] +![Screenshot of the share options menu in Coinbase Wallet showing the 'Copy link' option][image2] **Step 4:** Share it with your community – either by posting it as an official link on your social accounts or as a CTA on your website. @@ -105,13 +105,13 @@ Recipients will be prompted to make a Coinbase Wallet to claim the crypto. Wheth **Step 2:** Enter the amount you want to send -![][image3] +![Screenshot of the 'Send via text' option in the Coinbase Wallet send flow][image3] **Step 3:** Click “Send via text” in the upper right hand corner **Step 4:** Enter the amount and type of crypto you wish to send, and click “Create”Copy the link -![][image4] +![Screenshot showing the link created confirmation screen for sending crypto via text][image4] **Step 5:** Copy the link and Share it on any platform. diff --git a/docs/iframe-theme.js b/docs/iframe-theme.js index 35287274c..4501a8db7 100644 --- a/docs/iframe-theme.js +++ b/docs/iframe-theme.js @@ -53,7 +53,7 @@ document.addEventListener("DOMContentLoaded", updateIframesForDarkMode); } else { setTimeout(updateIframesForDarkMode, 100); - // TODO: add Storybook with Darkmode enabled + // Storybook darkmode implementation pending let themeChangeCount = 0; const themeChangeInterval = setInterval(() => { if (themeChangeCount < 2) { diff --git a/docs/learn/arrays/filtering-an-array-sbs.mdx b/docs/learn/arrays/filtering-an-array-sbs.mdx index 608f24782..813f286d5 100644 --- a/docs/learn/arrays/filtering-an-array-sbs.mdx +++ b/docs/learn/arrays/filtering-an-array-sbs.mdx @@ -28,7 +28,8 @@ contract ArrayDemo { uint[] public numbers = [1,2,3,4,5,6,7,8,9,10]; function getEvenNumbers() external view returns(uint[] memory) { - // TODO + // TODO: Filter and return only the even numbers from the numbers array + // Hint: You'll need to count them first to allocate memory } } ``` diff --git a/docs/learn/deployment-to-testnet/test-networks.mdx b/docs/learn/deployment-to-testnet/test-networks.mdx index 6b21c62af..a16deb240 100644 --- a/docs/learn/deployment-to-testnet/test-networks.mdx +++ b/docs/learn/deployment-to-testnet/test-networks.mdx @@ -67,21 +67,31 @@ Several well-known testnets have emerged over the years, each with its own set o ![Comparison of Test Networks](/images/learn/deployment-to-testnet/testnet-comparison.png) -### L1 Testnets +### Active Testnets (Recommended) -- **Ropsten:** Ropsten played a significant role in Ethereum's history but was effectively deprecated by late 2022 when the Merge took place. The Merge marked the transition from proof-of-work to proof-of-stake consensus for the Ethereum mainnet. Ropsten's vulnerability to spam attacks and network instability made it unreliable for testing purposes. +#### Base Sepolia (L2) +Base Sepolia is the recommended testnet for all Base development. It settles on the Ethereum Sepolia L1 testnet and provides an environment for testing L2-specific features and smart contracts. -- **Rinkeby:** Rinkeby offered better security than Ropsten and used a proof-of-authority consensus mechanism. However, it lacked decentralization and client diversity, which ultimately led to its decline in popularity. After the Merge, Rinkeby is no longer a recommended test network. +#### Sepolia (L1) +Sepolia is the primary stable testnet for Ethereum development. It is designed for developers seeking a lighter weight chain for faster synchronization and interaction. It is the preferred testnet for L1 development. -- **Goerli:** Launched in early 2019, Goerli initially utilized a multi-client proof-of-authority consensus model to improve stability and security. Following the Merge, it transitioned to a proof-of-stake consensus mechanism, maintaining its cross-client compatibility and making it an ideal choice for developers. As of January 2024, Goerli is being sunset in favor of Sepolia. +#### Optimism Sepolia (L2) +Optimism Sepolia is built on the Ethereum Sepolia L1 testnet and offers a testing environment for Optimism's Layer-2 features. -- **Sepolia:** As one of the two original primary testnets alongside Goerli, Sepolia is designed for developers seeking a lighter weight chain for faster synchronization and interaction. As of January 2024, it is now the preferred testnet and developers should migrate to using it. +--- + +### Deprecated Testnets + +The following networks are deprecated and should not be used for new development: -### L2 Testnets +#### Goerli (L1) +Launched in early 2019, Goerli was a popular multi-client testnet. As of January 2024, Goerli has been sunset in favor of Sepolia. -- **Base Sepolia:** As new Layer-2 networks emerged that settled on Ethereum's Layer-1, the need for testnets dedicated to these L2 networks also arose. For instance, the L2 network Base has its own testnet, known as Base Sepolia. This testnet settles on the Ethereum Sepolia L1 testnet, providing an environment for testing L2-specific features and smart contracts. +#### Ropsten (L1) +Ropsten was deprecated in late 2022 after the Merge. It is no longer supported. -- **Optimism Sepolia:** Optimism, an Ethereum Layer-2 scaling solution utilizing Optimistic Rollups, has its own testnet called Optimism Sepolia. This testnet is also built on the Ethereum Sepolia L1 testnet and offers a testing environment for developers to experiment with Optimism's Layer-2 features, smart contracts, and apps. +#### Rinkeby (L1) +Rinkeby was deprecated after the Merge and is no longer supported. --- diff --git a/docs/learn/onchain-app-development/account-abstraction/account-abstraction-on-base-using-privy-and-the-base-paymaster.mdx b/docs/learn/onchain-app-development/account-abstraction/account-abstraction-on-base-using-privy-and-the-base-paymaster.mdx index 5f86a1aa9..2bc0844a8 100644 --- a/docs/learn/onchain-app-development/account-abstraction/account-abstraction-on-base-using-privy-and-the-base-paymaster.mdx +++ b/docs/learn/onchain-app-development/account-abstraction/account-abstraction-on-base-using-privy-and-the-base-paymaster.mdx @@ -508,7 +508,8 @@ Simply grab the first wallet in the list (you'll want to do something more elega const { wallets } = useWallets(); // Grab the first wallet on the list -// TODO: Implement the option to allow the user to choose another wallet +// Note: For this demo, we simply default to the first wallet. In a production app, +// you should add a UI to allow the user to select which wallet to use. const wallet = wallets[0]; ``` diff --git a/docs/learn/onchain-app-development/frontend-setup/introduction-to-providers.mdx b/docs/learn/onchain-app-development/frontend-setup/introduction-to-providers.mdx index 80ef241c9..cde989dcd 100644 --- a/docs/learn/onchain-app-development/frontend-setup/introduction-to-providers.mdx +++ b/docs/learn/onchain-app-development/frontend-setup/introduction-to-providers.mdx @@ -226,7 +226,7 @@ const config = createConfig({ ssr: true, transports: { [base.id]: http('YOUR PROJECT URL'), - [mainnet.id]: http('TODO'), + // [mainnet.id]: http('https://mainnet.base.org'), }, }); ``` diff --git a/docs/learn/onchain-app-development/reading-and-displaying-data/useReadContract.mdx b/docs/learn/onchain-app-development/reading-and-displaying-data/useReadContract.mdx index 52e36ed11..9b465274d 100644 --- a/docs/learn/onchain-app-development/reading-and-displaying-data/useReadContract.mdx +++ b/docs/learn/onchain-app-development/reading-and-displaying-data/useReadContract.mdx @@ -98,7 +98,7 @@ export function IssueList() { return (

All Issues

-
{/* TODO: List each issue */}
+
{/* TODO: Map over issues array and render IssueItem components for each issue */}
); } diff --git a/docs/learn/onchain-app-development/writing-to-contracts/useSimulateContract.mdx b/docs/learn/onchain-app-development/writing-to-contracts/useSimulateContract.mdx index e16b217f8..d8a18cd9a 100644 --- a/docs/learn/onchain-app-development/writing-to-contracts/useSimulateContract.mdx +++ b/docs/learn/onchain-app-development/writing-to-contracts/useSimulateContract.mdx @@ -40,7 +40,7 @@ const { useEffect(() => { if (claimIsError) { - alert('Unable to claim'); // TODO: Better error handling + alert('Unable to claim: ' + (claimIsError ? 'Transaction simulation failed' : '')); } }, [claimIsError]); diff --git a/docs/learn/token-development/erc-721-token/erc-721-sbs.mdx b/docs/learn/token-development/erc-721-token/erc-721-sbs.mdx index 4261f5988..e109d9cb9 100644 --- a/docs/learn/token-development/erc-721-token/erc-721-sbs.mdx +++ b/docs/learn/token-development/erc-721-token/erc-721-sbs.mdx @@ -186,7 +186,8 @@ function _baseURI() internal override view returns(string memory) { } function switchURI() public { - // TODO: Limit to contract owner + // Requirements: use OpenZeppelin Ownable.sol and add onlyOwner modifier + // function switchURI() public onlyOwner { nftMetadata = nftMetadata == NFTMetadata.BAYC ? NFTMetadata.DOODLES : NFTMetadata.BAYC; } ``` diff --git a/docs/learn/token-development/nft-guides/complex-onchain-nfts.mdx b/docs/learn/token-development/nft-guides/complex-onchain-nfts.mdx index 6b3d9bbf9..f2e44c331 100644 --- a/docs/learn/token-development/nft-guides/complex-onchain-nfts.mdx +++ b/docs/learn/token-development/nft-guides/complex-onchain-nfts.mdx @@ -315,11 +315,11 @@ function render(uint _tokenId) public view returns (string memory) { return string( abi.encodePacked( "", - // TODO: Add the clouds, - // TODO: Add the sun, - // TODO: Add the land, + // TODO: Add the clouds SVG string + // TODO: Add the sun SVG string + // TODO: Add the land SVG string seaRenderer.render(), - // TODO: Add the background, + // TODO: Add the background SVG string "" ) ); diff --git a/docs/learn/token-development/nft-guides/signature-mint.mdx b/docs/learn/token-development/nft-guides/signature-mint.mdx index 5e59dc165..42050788f 100644 --- a/docs/learn/token-development/nft-guides/signature-mint.mdx +++ b/docs/learn/token-development/nft-guides/signature-mint.mdx @@ -274,7 +274,12 @@ describe('Test', function () { const ownerAddress = await owner.account.address; const signer1Address = await signer1.account.address; - // TODO... + // create a signed message + const message = keccak256(encodePacked(['address'], [signer1Address])); + const messageBytes = toBytes(message); + const signature = await owner.signMessage({ + message: { raw: messageBytes }, + }); // Signer 1 calls the mintTo function with the signature expect(await soulboundSignatureMint.write.mintTo([signer1Address, signature])).to.be.ok; diff --git a/docs/learn/token-development/nft-guides/simple-onchain-nfts.mdx b/docs/learn/token-development/nft-guides/simple-onchain-nfts.mdx index 0b91ad887..988b437f6 100644 --- a/docs/learn/token-development/nft-guides/simple-onchain-nfts.mdx +++ b/docs/learn/token-development/nft-guides/simple-onchain-nfts.mdx @@ -89,7 +89,9 @@ function tokenURI(uint _tokenId) public view override returns (string memory) { ' #: ', Strings.toString(_tokenId), '","description": "Random colors are pretty or boring!", "image": "data:image/svg+xml;base64,', - // TODO..., + // Create the SVG string with the random color + // + Base64.encode(bytes(render(_tokenId))), '"}' ) ) diff --git a/docs/learn/token-development/nft-guides/thirdweb-unreal-nft-items.mdx b/docs/learn/token-development/nft-guides/thirdweb-unreal-nft-items.mdx index 5a2841112..891a5d581 100644 --- a/docs/learn/token-development/nft-guides/thirdweb-unreal-nft-items.mdx +++ b/docs/learn/token-development/nft-guides/thirdweb-unreal-nft-items.mdx @@ -391,9 +391,11 @@ export const getNFTColors = async (req: Request, res: Response) => { const response = await axiosInstance.get(url, { headers: headers }); - // TODO: Extract the color from the image + // TODO: Extract the color from the image using helper function + // const color = getColorFromSVG(image); - // TODO: Replace response + // TODO: Replace response with just the color data + // res.json({ color }); res.json(response.data); } catch (error) { console.error(error); diff --git a/docs/mini-apps/quality-and-publishing/overview.mdx b/docs/mini-apps/quality-and-publishing/overview.mdx index d33574a67..f2f1437f2 100644 --- a/docs/mini-apps/quality-and-publishing/overview.mdx +++ b/docs/mini-apps/quality-and-publishing/overview.mdx @@ -3,6 +3,20 @@ title: Overview description: How to meet the bar and submit your Mini App for featuring --- -TODO: Write end‑to‑end guidance for becoming Featured: prerequisites, examples, review process, and timelines. Link to Quality Bar and Submission Guidelines. +## The Path to Featuring + +Getting your Mini App featured on the Base ecosystem page is a great way to drive growth and visibility. The process is designed to ensure high-quality, secure, and usable experiences for all users. + +### Process at a Glance + +1. **Build**: Develop your Mini App following our [Design Guidelines](/mini-apps/featured-guidelines/design-guidelines) and [Technical Guidelines](/mini-apps/featured-guidelines/technical-guidelines). +2. **Self-Review**: Test your app against the [Quality Bar](/mini-apps/quality-and-publishing/quality-bar) to ensure it meets performance and UX standards. +3. **Submit**: Prepare your assets and submit via the [Submission Form](https://docs.base.org/form-link-placeholder). +4. **Review**: The Base team reviews submissions on a rolling basis. +5. **Launch**: If approved, your app will be featured in the "Explore" section. + +### Timelines + +Review times vary but typically take **1-2 weeks**. You will be notified via email about the status of your submission. diff --git a/docs/mini-apps/quality-and-publishing/quality-bar.mdx b/docs/mini-apps/quality-and-publishing/quality-bar.mdx index 264aeab54..fcfb8e58f 100644 --- a/docs/mini-apps/quality-and-publishing/quality-bar.mdx +++ b/docs/mini-apps/quality-and-publishing/quality-bar.mdx @@ -3,6 +3,22 @@ title: Quality Bar description: The standards your Mini App should meet before being featured --- -TODO: Draft the full Quality Bar article with performance, stability, UX, and instrumentation requirements. Link concrete acceptance criteria and example checks. +Apps featured in the Base ecosystem must meet high standards for performance, security, and user experience. + +## Performance & Stability +* **Load Time**: Must load interactive content within 3 seconds on LTE/4G. +* **Responsiveness**: No jank or frame drops during scroll or animations. +* **Stability**: Crash-free sessions > 99%. + +## UX & Design +* **Mobile First**: Layout must be optimized for mobile screens (responsive). +* **Navigation**: Users must be able to navigate back and close the app easily. +* **No Dead Ends**: Every screen must have a clear path forward or backward. +* **Visuals**: Use high-quality assets; no pixelated icons or unreadable text. + +## Security +* **Permissions**: Only request permissions (e.g., wallet address, location) when necessary. +* **Data Handling**: User data must be encrypted in transit and at rest. +* **Scams/Spam**: Apps promoting scams, rug pulls, or excessive spam will be banned immediately. diff --git a/docs/mini-apps/quality-and-publishing/submission-guidelines.mdx b/docs/mini-apps/quality-and-publishing/submission-guidelines.mdx index cc9cd5ea6..29a383b70 100644 --- a/docs/mini-apps/quality-and-publishing/submission-guidelines.mdx +++ b/docs/mini-apps/quality-and-publishing/submission-guidelines.mdx @@ -3,6 +3,36 @@ title: Submission Guidelines description: Assets and information required to submit your Mini App for featuring --- -TODO: Define required assets (icons, hero, screenshots), URLs, manifest checks, and contact path for submission. +## Required Information + +Before submitting your Mini App, ensure you have the following ready. + +### 1. Metadata +* **App Name**: Clear, concise name (max 30 chars). +* **Short Description**: One-line value proposition (max 80 chars). +* **Full Description**: Detailed overview of features and benefits (Markdown supported). +* **Category**: Select the primary category (e.g., DeFi, Social, Gaming, Tooling). + +### 2. Assets +* **App Icon**: High-res square image (1024x1024px, PNG/JPG). Must be legible at small sizes. +* **Splash Screen**: + * **Logo**: Transparent background PNG (512x512px). + * **Background Color**: Hex code (e.g., `#0052FF`). +* **Screenshots**: at least 3 mobile screenshots (1080x1920px) demonstrating core flows. + +### 3. Links +* **App URL**: The direct link to your Mini App (must support deep linking). +* **Terms of Service**: Publicly accessible URL. +* **Privacy Policy**: Publicly accessible URL. + +### 4. Support +* **Support Email**: Public contact for user issues. +* **Support & Community URL**: Discord, Telegram, or Help Center link. + +## Submission Checklist +- [ ] App loads within 3 seconds on 4G networks. +- [ ] Wallet connection works seamlessly (Coinbase Wallet, MetaMask, etc.). +- [ ] No broken links or "Coming Soon" placeholders in core flows. +- [ ] Dark mode support is implemented (optional but recommended). diff --git a/docs/mini-apps/troubleshooting/error-handling.mdx b/docs/mini-apps/troubleshooting/error-handling.mdx index afe0e4503..101cb0af9 100644 --- a/docs/mini-apps/troubleshooting/error-handling.mdx +++ b/docs/mini-apps/troubleshooting/error-handling.mdx @@ -3,6 +3,28 @@ title: Error Handling description: Patterns for surfacing and resolving common runtime errors in Mini Apps --- -TODO: Provide guidance on handling errors from hooks, network issues, and manifest/metadata failures. +Handling errors gracefully is crucial for retaining users. Here are best practices for common scenarios. + +## Common Scenarios + +### 1. Network & API Failures +Mobile networks are unreliable. Always assume API calls might fail. +* **Do**: Show a non-blocking toast or snackbar notification ("Network error, retrying..."). +* **Don't**: Crash the app or show a blank white screen. +* **Retry Logic**: Implement exponential backoff for critical data fetches. + +### 2. Wallet Interactions +Users may reject transaction requests or signature prompts. +* **User Rejection**: Detect code `4001` (User Rejected Request) and handle it silently or with a gentle prompt ("Transaction cancelled"). +* **Insufficient Funds**: Check balances *before* promoting a transaction to warn users early. + +### 3. Image & Media Loading +* **Fallbacks**: Always provide a placeholder image while media loads. +* **Broken URLs**: Use the `onerror` event to replace broken images with a default asset. + +## Metadata & Manifest Errors +If your Mini App fails to load in the Farcaster client, check your **Frame Manifest** or **Meta Tags**. +* Use the [Warpcast Frame Validator](https://warpcast.com/~/developers/frames) to check your metatags. +* Ensure your `fc:frame:image` is less than 10MB and has a valid aspect ratio (1.91:1 or 1:1).