Add Quickstart Guide to docs.base.org/docs (#998)

* Create quickstart guide * Complete first draft of quick start guide * Edit tutorial doc details * Fix typos and ensure consistent styles * Update the Why Base? tool tip * fix emoji encoding (#996) * Basename: Fix analytics events (#997) * remove page events in favor of pageview * fix invalid logging * fixed env var references (#1003) * updated bg and image for gs hero (#1001) * Update Irys Dyanmic NFT example to use the latest version of Irys's tooling (#1000) * Fix typos and demo code in docs (#995) * Fix demo code in useWriteContract docs * Fix typos * Fix demo code * Fix import path * Correction of typos (#992) * error-triage.md Correction * hardhat-verify-sbs.md Correction * data.json Correction * 5_cross-chain-with-layerzero.md Correction * feat: embedded farcaster frames (#762) * initial draft of frame render * render frames from text records * fix build, https instead of * csp * undo changes to base-docs * no-verify repeat * add xmtp signer * fix build issue and add frame prompt element * Extract TryNowHero component * add second add-frame button * Frame previews in modal * Frame previews in modal * Rough out copy and text hierachy * More blocking * fix property access on profile context * add responsive layout * Setup suggestion cards * clean up pr * clean up pr * Update card icons * Make AddFrameModal components modular * fully functional farcaster frames * get previews working * polish * Target arm64 architecture for web (#967) * theme update * try openframes first * wip towards frame management page * Revert "wip towards frame management page" This reverts commit 4d0fceb493db72bc7d84884425d521f4ecc999b8. * Revert "Revert "wip towards frame management page"" This reverts commit a692a9df1cd7e13cc019335b58f9c7087795593f. * make page render * get desktop frame builder ui working * frame manager page w/ loading and some styles * add back button * better theme and add multi-add * fix loading experience * add mobile ux * incorporate d furlong's suggestion re: frameImage fix * dogfooding input from Rhea * improved validation and copy * improved loading state * improve button and input styling * add farcaster logout ux * clean up sign-in ux * clean up qr modal * add swap frame * clean up frame image sizing * add a nice smooth transition in/out of loading states * BAPP-579 * BAPP-585, BAPP-586 * BAPP-583 * BAPP-583 * move error handling up a level * analytics * improve mobile builder ux * fix farcaster signer modal close issue--poll for text record changes on owned profiles * center sign in with warpcast text * yarn * pr review from Leo * lint * add back nomination frame * stick buttons to the bottom and center the loader * revert csp changes * add more logging and remove dead code * be less spooky about the missing env vars * add more info to error/analytics calls * optimistic addition/removal of frames; improved warpcast sign-in * remove columns experimentation * fix masonry layout * update icons for shelley * rm unnecessary classnames call * frame border radius nit * style nits * add dropped icon * bunday review --------- Co-authored-by: Matthew Bunday <[email protected]> Co-authored-by: David Roth <[email protected]> * Basenames frames tutorial (#1005) * add basenames frames tutorial without images * add images to asset folder * add images to tutorial * add image of profile completion * make basenames singular * update slug to lowercase b in basename * add reference links * add basenames faq question * reword what are frames paragraph * add open spec link * remove profile mentions * fix: errors shouldn't mess with open frame support flag (#1008) * Frames tutorial updates (#1010) * update Claim Basename call to action * update grammar on intro and second paragraph * change example basename * remove UL and turn into sentences * Add owner registry componentId to cbgpt request (#1011) * Remove the get an onchain summer pass (#1012) * Fix typos * Rebuild with correct checksum in tutorials data.json * Fix artifacts in yarn.lock --------- Co-authored-by: Léo Galley <[email protected]> Co-authored-by: Brendan from DeFi <[email protected]> Co-authored-by: Luke Cassady-Dorion <[email protected]> Co-authored-by: Luigi <[email protected]> Co-authored-by: Cypher Pepe <[email protected]> Co-authored-by: Jordan Frankfurt <[email protected]> Co-authored-by: Matthew Bunday <[email protected]> Co-authored-by: David Roth <[email protected]> Co-authored-by: Pat <[email protected]> Co-authored-by: moggr <[email protected]>
base-org · Sep 27, 2024 · 79a60c1 · 79a60c1
1 parent 6fcecc4
commit 79a60c1
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 10 deletions.
diff --git a/apps/base-docs/base-learn/docs/learning-objectives.md b/apps/base-docs/base-learn/docs/learning-objectives.md
@@ -48,7 +48,7 @@ Use the script to regenerate this file.
 
 - Verify a deployed smart contract on Etherscan
 - Connect a wallet to a contract in Etherscan
-- Use etherscan to interact with your own deployed contact
+- Use etherscan to interact with your own deployed contract
 
 ### [Hardhat Forking](./hardhat-forking/hardhat-forking.md)
 

diff --git a/apps/base-docs/docs/building-with-base/quickstart.md b/apps/base-docs/docs/building-with-base/quickstart.md
@@ -0,0 +1,161 @@
+---
+title: 'Quickstart: Deploy on Base'
+slug: /quickstart
+description: A guide to help you get started with deploying your smart contracts on Base.
+keywords:
+  [
+    Base,
+    Base network,
+    contracts,
+    Base contracts,
+    Base quickstart,
+    smart contracts,
+    Base smart contracts,
+    Base Mainnet,
+    Base Testnet,
+  ]
+hide_table_of_contents: false
+---
+
+# Quick Start: Deploy on Base
+
+Welcome to the Base deployment quickstart guide! This comprehensive walkthrough will help you set up your environment and deploy smart contracts on Base. Whether you're a seasoned developer or just starting out, this guide has got you covered.
+
+## What You'll Achieve
+
+By the end of this quickstart, you'll be able to:
+
+- Set up your development environment to deploy on Base
+- Deploy your smart contracts to Base
+- Connect your frontend to your smart contracts
+
+:::tip Why Base?
+
+Base is a fast, low-cost, builder-friendly Ethereum L2 built to bring the next billion users onchain. By following this guide, you'll join a vibrant ecosystem of developers, creators, and innovators who are building a global onchain economy.
+
+:::
+
+## Set Up Your Development Environment
+
+1. Create a new project directory
+
+```bash
+mkdir my-base-project && cd my-base-project
+```
+
+2. Install Foundry, a powerful framework for smart contract development
+
+```bash
+curl -L https://foundry.paradigm.xyz | bash
+foundryup
+```
+
+This installs Foundry and updates it to the latest version.
+
+3. Initialize a new Solidity project
+
+```bash
+forge init
+```
+
+Your Foundry project is now ready. You'll find an example contract in the `src` directory, which you can replace with your own contracts. For the purposes of this guide, we'll use the Counter contract provided in `/src/Counter.sol`
+
+:::tip
+Foundry provides a suite of tools for Ethereum application development, including Forge (for testing), Cast (for interacting with the chain), and Anvil (for setting up a local node). You can learn more about Foundry [here](https://book.getfoundry.sh/).
+:::
+
+## Configure Foundry with Base
+
+To deploy your smart contracts to Base, you need two key components:
+
+1. A node connection to interact with the Base network
+2. A funded private key to deploy the contract
+
+Lets set up both of these:
+
+### 1. Set up your node connection
+
+1. Create a `.env` file in your project's root directory
+2. Add the Base network RPC URL to your `.env` file
+
+```bash
+BASE_RPC_URL="https://mainnet.base.org"
+BASE_SEPOLIA_RPC_URL="https://sepolia.base.org"
+```
+
+3. Load your environment variables
+
+```bash
+source .env
+```
+
+:::tip
+Base Sepolia is the test network for Base, which we will use for the rest of this guide. You can obtain free Base Sepolia ETH from one of the [faucets listed here](/docs/tools/network-faucets).
+:::
+
+### 2. Secure your private key
+
+1. Store your private key in Foundry's secure keystore
+
+```bash
+cast wallet import deployer --interactive
+```
+
+2. When prompted enter your private key and a password.
+
+Your private key is stored in `~/.foundry/keystores` which is not tracked by git.
+
+:::warning
+Never share or commit your private key. Always keep it secure and handle with care.
+:::
+
+## Deploy Your Contracts
+
+Now that your environment is set up, let's deploy your contracts to Base Sepolia.
+
+1. Use the following command to compile and deploy your contract
+
+```bash
+forge create ./src/Counter.sol:Counter --rpc-url $BASE_SEPOLIA_RPC_URL --account deployer
+```
+
+Note the format of the contract being deployed is `<contract-path>:<contract-name>`.
+
+2. After successful deployment, the transaction hash will be printed to the console output
+
+3. Copy the deployed contract address and add it to your `.env` file
+
+```bash
+COUNTER_CONTRACT_ADDRESS="0x..."
+```
+
+4. Load the new environment variable
+
+```bash
+source .env
+```
+
+### Verify Your Deployment
+
+To ensure your contract was deployed successfully:
+
+1. Check the transaction on [Sepolia Basescan](https://sepolia.basescan.org/).
+2. Use the `cast` command to interact with your deployed contract from the command line
+
+```bash
+cast call $COUNTER_CONTRACT_ADDRESS "number()(uint256)" --rpc-url $BASE_SEPOLIA_RPC_URL
+```
+
+This will return the initial value of the Counter contract's `number` storage variable, which will be `0`.
+
+**Congratulations! You've deployed your smart contracts to Base Sepolia!**
+
+## Next Steps
+
+- Use [Onchainkit](https://onchainkit.com) to connect your frontend to your contracts! Onchainkit is a library of ready-to-use React components and Typescript utilities.
+- Learn more about interacting with your contracts in the command line using Foundry from our [Foundry tutorial](/tutorials/deploy-with-foundry).
+
+<br/>
+<br/>
+<br/>
+<br/>
diff --git a/apps/base-docs/sidebars.js b/apps/base-docs/sidebars.js
@@ -15,6 +15,7 @@ module.exports = {
       collapsible: false,
       collapsed: false,
       items: [
+        'building-with-base/quickstart',
         'building-with-base/network-information',
         'building-with-base/base-contracts',
         'building-with-base/fees',

diff --git a/apps/base-docs/tutorials/data.json b/apps/base-docs/tutorials/data.json
@@ -724,9 +724,9 @@
         "difficulty": "intermediate",
         "hide_table_of_contents": false,
         "displayed_sidebar": null,
-        "last_updated": "Sep 13, 2024",
+        "last_updated": "Sep 26, 2024",
         "duration": "14 min read",
-        "checksum": "50ab75b2f4db041666bd7bf24bea0a3079389213810517bd8087807c3528fb0c"
+        "checksum": "28f843ebc47bc9d69b6bf040a6ec3d1b92237e78a462121d74ff70ab64d66018"
     },
     "2_email-campaign-with-resend": {
         "title": "Create Email Marketing Campaigns Onchain using Coinbase Smart Wallet + Resend",
@@ -1002,9 +1002,9 @@
         "difficulty": "beginner",
         "hide_table_of_contents": false,
         "displayed_sidebar": null,
-        "last_updated": "Jul 11, 2024",
+        "last_updated": "Sep 26, 2024",
         "duration": "6 min read",
-        "checksum": "0b50de1197db8c50cbf02405a904f99ec7e32159f86ae884993aa6cc36b10fcb"
+        "checksum": "9cd3979515e3c4b2ccc8a59c6ac08c9e3d2b69e108c8ddc58ef010f0f77670fa"
     },
     "4_intro-to-foundry-testing": {
         "title": "Foundry: Testing smart contracts",
@@ -1030,6 +1030,35 @@
         "duration": "9 min read",
         "checksum": "2ced64394c425e5749001cb21cca5a3b0043fe6ab013be45e98299e16f337d23"
     },
+    "5_basename-frames": {
+        "title": "Add Frames to A Basename",
+        "slug": "/add-frames-to-basename",
+        "description": "Learn how to customize your Basename by adding Frames, showcasing dynamic content with ease on Base.",
+        "author": "hughescoin",
+        "keywords": [
+            "Sponsored Transactions",
+            "Onchain",
+            "Coinbase",
+            "Base",
+            "Crypto",
+            "Cloud Platform",
+            "Basenames",
+            "Frames",
+            "Profile Customization",
+            "Open Graph",
+            "ENS"
+        ],
+        "tags": [
+            "account abstraction",
+            "Paymaster"
+        ],
+        "difficulty": "easy",
+        "hide_table_of_contents": false,
+        "displayed_sidebar": null,
+        "last_updated": "Sep 26, 2024",
+        "duration": "5 min read",
+        "checksum": "17b2137efd031251de2beb3683b5c75006b8723bff189e59d655d86f5abc296d"
+    },
     "5_cross-chain-with-ccip": {
         "title": "Sending messages and tokens from Base to other chains using Chainlink CCIP",
         "slug": "/cross-chain-with-ccip",
@@ -1076,9 +1105,9 @@
         ],
         "difficulty": "intermediate",
         "displayed_sidebar": null,
-        "last_updated": "Aug 14, 2024",
+        "last_updated": "Sep 26, 2024",
         "duration": "34 min read",
-        "checksum": "5b2ccc63f23434488c8404f76547707a8b83601215bdbac8e729ca05444bc955"
+        "checksum": "0f984180e209b250b61c437f6cb53af4695e73e5c08297d09bd64f25a2b20122"
     },
     "5_deploy-with-fleek": {
         "title": "Deploy an Onchain App with Fleek",
@@ -1128,9 +1157,9 @@
         ],
         "difficulty": "intermediate",
         "displayed_sidebar": null,
-        "last_updated": "Aug 14, 2024",
+        "last_updated": "Sep 26, 2024",
         "duration": "11 min read",
-        "checksum": "3a230905924424d5d065346fc2ea6a3e253836f31852fe6b2b4301995d107016"
+        "checksum": "0abeee6a45dc60ad4e4c5945dc7ba2e9094c731c7353914365ef268edc10f789"
     },
     "5_oracles-pyth-price-feeds": {
         "title": "Accessing real-time asset data using Pyth Price Feeds",
@@ -1230,4 +1259,4 @@
         "duration": "8 min read",
         "checksum": "59d04f2a46bc95b68a0f50c83f78a0b0d2f2549ecf0e8c7e592aaa4eae6bf6d1"
     }
-}
+}