From cb97a5a7cbba3696db917430941d900da8f93ecb Mon Sep 17 00:00:00 2001 From: Ashton Date: Sat, 21 Oct 2023 08:05:27 -0400 Subject: [PATCH] Tweak docs based on Jacinta's setup experience (#108) --- src/local-setup.md | 8 ++++---- src/tutorial.md | 18 +++++++++++------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/local-setup.md b/src/local-setup.md index bbf7160..f673060 100644 --- a/src/local-setup.md +++ b/src/local-setup.md @@ -74,24 +74,24 @@ Before running these, make sure the Stacks devnet is running by visiting the exp If you get an error, wait a few minutes and refresh. Once that page loads correctly you should be good to go. -First, let's mine some BTC with `./utils/mine_btc.sh 200`. This will mine 200 BTC blocks and ensure our address (Account 1 and Account 2) is funded. - If you are using the Leather wallet, make sure to use the same secret key as used in devnet (deployer wallet). If you are using a different secret key you'll want to run this again and make sure that this is mining to the same wallet you are going to use in your sBTC app. To do that, view the Bitcoin address displayed in Leather (make sure you are on Devnet) and add it to the `mine_btc.sh` script at the end like this: ```bash btc_address='bcrt1q3tj2fr9scwmcw3rq5m6jslva65f2rqjxfrjz47' ``` +First, let's mine some BTC with `./utils/mine_btc.sh 200`. This will mine 200 BTC blocks and ensure our address (Account 1 and Account 2) is funded. + Next we can initiate a deposit, which will deposit a random amount of satoshis from our Bitcoin wallet (Account 2) into the sBTC threshold wallet, minting sBTC in the process. We can do that with `./utils/deposit.sh`. -And finally, we can do the reverse, convert our sBTC back to BTC, with `./utils/withdraw.sh`. +And finally, we can do the reverse, convert our sBTC back to BTC, with `./utils/withdraw.sh`, which will print the txid of the withdrawal transaction on completion. Check the results on Stacks at our address: [http://localhost:3020/address/ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM?chain=testnet&api=http://localhost:3999](http://localhost:3020/address/ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM?chain=testnet&api=http://localhost:3999) -Check the results on Bitcoin at the txs printed by the utility functions, eg. [https://127.0.0.1:8083/tx/38089273be6ed7521261c3a3a7d1bd36bc67d97123c27263e880350fc519899d](https://127.0.0.1:8083/tx/38089273be6ed7521261c3a3a7d1bd36bc67d97123c27263e880350fc519899d), replacing the txid parameter with the given tx id. +Check the results on Bitcoin at the txs printed by the utility functions, eg. [http://127.0.0.1:8083/tx/38089273be6ed7521261c3a3a7d1bd36bc67d97123c27263e880350fc519899d](http://127.0.0.1:8083/tx/38089273be6ed7521261c3a3a7d1bd36bc67d97123c27263e880350fc519899d), replacing the txid parameter with the given tx id. ## Next Steps diff --git a/src/tutorial.md b/src/tutorial.md index 7269ed0..fdc88cc 100644 --- a/src/tutorial.md +++ b/src/tutorial.md @@ -2,7 +2,7 @@ ## Build a Basic DeFi Application using Next, Stacks.js, Clarity, and the sBTC Developer Release -If you are looking to start building full-stack applications with the sBTC Developer Release, this is the place to start. We'll walk through the entire process of building a full-stack application utilizing sBTC from start to finish. +If you are looking to start building full-stack applications with the sBTC Developer Release (sBTC DR), this is the place to start. We'll walk through the entire process of building a full-stack application utilizing sBTC from start to finish. If you prefer a quicker introduction, check out the [Quickstart](./quickstart.md), which will get you up to speed on the essentials of building with sBTC. @@ -84,9 +84,13 @@ Use the following values when answering the setup questions: Now let's get our frontend created. Since this isn't a React/Next tutorial, I'll gloss over the boilerplate code. -First, we need to install the `@stacks/connect` package with `npm install @stacks/connect`. This is what we'll use to connect our wallet. +First, we need to install the `@stacks/connect` package as this is what we'll use to connect our wallet. -First let's update our `layout.js` file to get a Navbar and Connect Wallet component created. +```bash +npm install @stacks/connect +``` + +Now, let's update our `layout.js` file in `frontend/src/app/layout.js` to get a Navbar and Connect Wallet component created. ```jsx "use client"; @@ -138,7 +142,7 @@ export default function RootLayout({ children }) { } ``` -Next up let's add our Navbar by creating a `Navbar.js` file inside the `src/components` directory. +Next up let's add our Navbar by creating a `Navbar.js` file inside the `src/app/components` directory. ```jsx "use client"; @@ -190,7 +194,7 @@ export default function Navbar({ userSession, userData, setUserData }) { } ``` -Next we need to create the `ConnectWallet.js` component. You can do that inside the `src/components` directory. +Next we need to create the `ConnectWallet.js` component. You can do that inside the `src/app/components` directory. Inside that file, we'll add the following. @@ -235,7 +239,7 @@ export default function ConnectWallet({ userSession, userData, setUserData }) { All we are doing here is providing a mechanism for the user to connect with a web wallet. Walking through how each piece of the authentication works is outside the scope of this sBTC tutorial. Refer to the Stacks Quickstart linked above if you are unsure of what is happening here. -Then, update your `src/page.js` file to look like this. +Then, update your `src/app/page.js` file to look like this. ```jsx export const metadata = { @@ -257,7 +261,7 @@ export default function Home() { Now we're going to add each page and component to create a basic UI. -`borrow/page.js` +`src/app/borrow/page.js` ```jsx import BorrowForm from "../components/BorrowForm";