Skip to content

Commit

Permalink
Tweak docs based on Jacinta's setup experience (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
AshtonStephens authored Oct 21, 2023
1 parent 830f5ea commit cb97a5a
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 11 deletions.
8 changes: 4 additions & 4 deletions src/local-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 11 additions & 7 deletions src/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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 = {
Expand All @@ -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";
Expand Down

0 comments on commit cb97a5a

Please sign in to comment.