Build a decentralized exchange using Stacks, Clarity and Clarinet! 

<h3>Welcome 🎉</h3><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_xxEjlD3TB1Dljw8KfgsQm" uploadmode="upload"></image>This time we’re partnering with our friends at <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link notion-link-token notion-enable-hover" href="https://stacks.org/">Stacks</a> to bring you this tutorial on building a decentralized exchange on Stacks. We’re going to learn about Stacks, Clarity, and DeFi, and build something awesome! If you haven’t heard of any of those, it’s all good!Lots to learn and build, let’s get started!<h3>What we're building</h3>We’re going to build a decentralized exchange. Exchanges are just a way to swap one asset for another.We’re going to create a fungible token, which is just a fancy term for a token that can be traded on the Stacks blockchain. And then we’re going to create an exchange where any user can swap their STX (that’s the native token on Stacks, think BTC or Eth) for our token, and vice versa. The price of swaps will be automatically maintained by our contract, based on the relative amounts we have of our token and STX. Swaps are instant and there’s no order book, that’s what it means for our exchange to be decentralized. Don’t worry if this isn’t clear right now, the best way to learn is by building and you’ll pick up what you need as we go!<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_WQabK4EgGZ6DNZWnS8K18"></image><h3>Prerequisites</h3>We’re going to go pretty quickly through the frontend stuff, you’ll want some experience with frontend dev. We’re using React/NextJS.You don’t need to have used Stacks or Clarity before, we’ll go over all of that from scratch.You don’t need to have done any blockchain dev before, but it’d help to have a basic idea of the concepts. No need for anything Stacks specific though!<h3>What is Stacks?</h3>Stacks is a really interesting and unique blockchain! I’m going to describe it at quite a high level, if you want to dive into the nitty-gritty then I’d suggest reading this article: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link notion-link-token notion-enable-hover" href="https://stacks.org/stacks-blockchain">What kind of Blockchain is Stacks?</a>It uses a mining method called Proof of Transfer, or PoX. Miners can transfer any number of bitcoin (BTC) to 2 reward addresses. The miner who will receive the fees for a block (in Stacks’ native currency, STX) is chosen by probability, based on how much BTC they transferred. The more BTC, the more likely! The reward addresses are Bitcoin addresses nominated by STX ‘stackers’, and periodically 2 of them are chosen to receive all the BTC being sent by miners. This leads to a really interesting relationship: miners send BTC and receive STX fees, while STX holders lock their STX and receive BTC.<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_6lY4PJbv8PaD2Cq6aB56A"></image><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_mLqDrKdKJNESS2E49XFIo"></image>Additionally, Stacks blocks are settled on the Bitcoin blockchain. This means that when miners confirm and broadcast a block, they do so by publishing it in a Bitcoin transaction:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_RLjBJkTE9PDv2S5wSviyn"></image>This means that Stacks inherits the security of Bitcoin, to rewrite the Stacks blockchain you have to rewrite the Bitcoin one. That’s hard work! So Stacks is its own network with its own miners, but those miners are transferring BTC and transmitting blocks to the BTC blockchain.As developers we’re not going to be super exposed to these details, but it is good to have an idea of how this unique mechanism works. It’s a bit different to other chains you might be used to!<h3>What is Clarity?</h3>Clarity is the smart contract language used for development on Stacks. It’s specifically built to help developers write safe and predictable smart contracts. Its syntax is probably a bit different to what you’re used to (it’s kinda lisp-y), we’ll get to that shortly. For now, here are some of the features that make Clarity unique and IMO super compelling:<ul><li>It isn’t compiled. Every contract is send to the blockchain as-is, which means everything is open source. You can be certain about the code executed for every transaction on the network.</li><li>It’s decidable. That’s a fancy way to say there’s limits on the programs that can be written, and every program is guaranteed to terminate. There’s no such thing as an infinite loop.</li><li>It has token/NFT functions built in. If you’ve ever seen an implementation of Ethereum’s ERC-something-or-other you’ll know how much code this is saving you and how many potential bugs it’s avoiding. Things like <code class="inline-code">ft-transfer</code> are a language level function! We’ll make a lot of use of this!</li><li>We have post-conditions. I’m cheating a bit here because these aren’t in the smart contracts. But they’re part of the safety/predictability angle that I want to focus on here. When we send a transaction we can attach conditions like “I must send exactly 5 STX and receive at least 3.5 tokens”. If the conditions aren’t met, the transaction aborts and you keep all your assets. This means that good contracts don’t have to write as many checks, and bad contracts can’t cheat users. You’ll see a lot of these too - you can probably tell why this is an awesome feature for a marketplace to have!</li></ul>We’ll jump into Clarity right away in the first lesson!<h3>Community</h3><callout color="fuchsia">Join our DiscordIt’s the best place to get help with this tutorial and get involved with the community. 👇 join here → <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link link" href="https://discord.gg/pointer">https://discord.gg/pointer</a> You’ll find three channels created specifically for this tutorial#stacks-defi-general - use this space just to chat about the tutorial#stacks-defi-help - if you get stuck, this is the best place to ask for help!#stacks-defi-feedback - help us make this tutorial better with your feedback</callout>Also you might like to join the Stacks discord: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link link" href="https://discord.com/invite/5DJaBrf">https://discord.com/invite/5DJaBrf</a>The channels I’ve found most useful are #dev-general, #clarity and #clarinetAs always please be nice and remember to search first, someone might have already asked and the answer might already be available there :)<h3>Heads up: you're still early!</h3>Stacks, and the tooling that we’ll be using, is all pretty early and fast moving. There’s an active and passionate community, and things are moving quickly here. Not everything is going to be bug-free though, and we might need to work together a bit to get things figured out. There’s a lot going on. I’d definitely encourage you to join the Discord if you haven’t yet! It’s the best place to get help :)<h3>A lot of ground</h3>This tutorial covers a lot of ground. We’re going to build some pretty powerful DeFi stuff in a language you’ve probably never used before. It’s all good if you’re not familiar with DeFi, we’re going to introduce all the concepts you need as we go. We’re going to cover a lot of ground and I learned a lot writing it! Don’t worry if you need to go over things a few times or stop and look around the code to understand better what’s going on. This stuff isn’t easy, and there’s a lot that might be new.<h3>Hackathon</h3>We're super excited to be running our first ever hackathon with Stacks! Learn to build on Stacks with us in this tutorial, and then go and build whatever you think is cool on their chain. Check out the hackathon channels in our Discord to find a team (if you like!), and discuss ideas and progress! The hackathon will finish on 26th August 2022, one month after this tutorial is published. Judging by the Pointer team! We can't wait to see what you build :)<callout color="green">Prizes 🎉The best project will receive the grand prize of $10,000 worth of STX4 runners up will each receive $2,500 worth of STX</callout><h3>Rewards</h3>At the end of this tutorial you'll have deployed an exchange contract to Stacks and you'll be able to submit its address. Once we've verified your contract you'll automatically receive an NFT certificate of completion on Polygon.You can add wallets from <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link notion-link-token notion-enable-hover" href="http://pointer.gg/profile">your profile page</a>Polygon NFTs are sent to your Ethereum reward wallet, and you'll need to add your Stacks wallet to verify too. No worries if you don't have one yet, we'll create one during the tutorial and you'll be able to add it later!<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_Vb_gQ75jvgp4rstCdWxrw" uploadmode="upload"></image>

Overview

As I mentioned, Clarity is the smart contract development language for Stacks. We’re going to install a runtime called Clarinet, which will give us tools to run contracts locally, test them and deploy them. If you’ve used hardhat for Ethereum dev, it’s a pretty similar idea!You can find installation instructions for Clarinet in their Github readme: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link" href="https://github.com/hirosystems/clarinet#installation">https://github.com/hirosystems/clarinet#installation</a>To check you’ve got it installed correctly, you can run <code class="inline-code">clarinet --version</code>. It should print something like <code class="inline-code">clarinet 0.31.0</code>. Make sure it’s at least <code class="inline-code">0.31.0</code>, it’ll probably be a bit newer. All good!<h3>Grab the starter code</h3>Before we write any code, let’s grab the starter repo. Head to <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link link" href="https://github.com/pointer-gg/stacks-defi-tutorial">https://github.com/pointer-gg/stacks-defi-tutorial</a> , hit fork to make your own copy, and then clone it locally.<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials//tutorial_UZwtftxZuIrjNyg73oD3G"></image>The <code class="inline-code">frontend</code> directory is a NextJS app:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-shell">$ cd stacks-defi-tutorial/frontend
# install the dependencies
$ npm install
# run it locally
$ npm run dev</code></pre>By default it’ll run on <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link" href="http://localhost:3000">http://localhost:3000</a>. You should see something like:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_KHUlIcpaglBvChoHPjf9D"></image>All those pages in the navbar will be 404s for now. We’ll make all of them work through this tutorial! Don’t worry if they don’t make sense yet. Also we’re just going to leave this home page alone, but feel free to add whatever you like to it as you go!For now we’re going to leave this frontend directory alone for a bit and start writing some smart contracts with Clarity!<h3>A new Clarinet project</h3>Jump out of that frontend directory so you’re back at the top-level of the repo. This is where we’ll create our contracts directory.Now let’s use Clarinet to create a new project:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-shell">$ clarinet new defi-contracts 
Send usage data to Hiro.
Help Hiro improve its products and services by automatically sending diagnostics and usage data.
Only high level usage information, and no information identifying you or your project are collected.
Enable [Y/n]?
Y
Telemetry enabled. Thanks for helping to improve clarinet!
Created directory defi-contracts
Created directory defi-contracts/contracts
Created directory defi-contracts/settings
Created directory defi-contracts/tests
Created file defi-contracts/Clarinet.toml
Created file defi-contracts/settings/Mainnet.toml
Created file defi-contracts/settings/Testnet.toml
Created file defi-contracts/settings/Devnet.toml
Created directory defi-contracts/.vscode
Created file defi-contracts/.vscode/settings.json
Created file defi-contracts/.vscode/tasks.json
Created file defi-contracts/.gitignore

----------------------------
Hint: what's next?
Once you are ready to write TypeScript unit tests for your contract, run the following command:

 $ clarinet test
 Run all run tests in the ./tests folder.

Find more information on testing with Clarinet here: https://docs.hiro.so/smart-contracts/clarinet#testing-with-the-test-harness
Disable these hints with the env var CLARINET_DISABLE_HINTS=1
----------------------------</code></pre>Up to you whether you’d like to enable telemetry, it won’t make any difference for us. Clarinet brings a bunch of tools into one place: we’ll use it to run our contracts locally so that we can interact with them, to test code in a console, and to deploy our contracts to a local network and then eventually the Stacks public testnet. It’s kinda like a supercharged hardhat if you’ve written Eth contracts!<h3>Let's learn some Clarity</h3>Head into that clarinet project and open a console:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">$ cd defi-contracts
$ clarinet console 

clarity-repl v0.27.0
Enter "::help" for usage hints.
Connected to a transient in-memory database.
Initialized balances
+------------------------------------------------------+-----------------+
| Address | STX |
+------------------------------------------------------+-----------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM (deployer) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5 (wallet_1) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST2CY5V39NHDPWSXMW9QDT3HC3GD6Q6XX4CFRK9AG (wallet_2) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST2JHG361ZXG51QTKY2NQCVBPPRRE2KZB1HR05NNC (wallet_3) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST2NEB84ASENDXKYGJPQW86YXQCEFEX2ZQPG87ND (wallet_4) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST2REHHS5J3CERCRBEPMGH7921Q6PYKAADT7JP2VB (wallet_5) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST3AM1A56AK2C1XAFJ4115ZSV26EB49BVQ10MGCS0 (wallet_6) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST3NBRSFKX28FQ2ZJ1MAKX58HKHSDGNV5N7R21XCP (wallet_8) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST3PF13W7Z0RRM42A8VZRVFQ75SV1K26RXEP8YGKJ (wallet_7) | 100000000000000 |
+------------------------------------------------------+-----------------+
| STNHKEPYEPJ8ET55ZZ0M5A34J0R3N5FM2CMMMAZ6 (wallet_9) | 100000000000000 |
+------------------------------------------------------+-----------------+

&gt;&gt;</code></pre>This is very cool! You can type clarity code in here and see the result, it’s a bit like running <code class="inline-code">node</code> in your terminal for JS code. And Clarinet has helpfully seeded a bunch of wallets for us with a load of STX, so we can do transfers too!Let’s run some stuff to learn how clarity looks and works!<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">&gt;&gt; (print "hey clarity!")
Events emitted
{"type":"contract_event","contract_event":{"contract_identifier":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.contract-8","topic":"print","value":"\"hey clarity!\""}}
"hey clarity!"</code></pre>Always nice to start with hello world! In clarity print is a function which takes a string as an argument. Pretty straightforward! One interesting thing here is that it also emits an event. You can view the events from a transaction (ie a call to a contract function) in the Stacks Explorer, we’ll see a lot of this! One fun example is the very first Stacks transaction, which you can see here: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link link" href="https://explorer.stacks.co/txid/0xa57c1b5e787712d833a330647e3efee17f6bb24de48044ea44c10fdf4f82ef23?chain=mainnet">https://explorer.stacks.co/txid/0xa57c1b5e787712d833a330647e3efee17f6bb24de48044ea44c10fdf4f82ef23?chain=mainnet</a> See the print event?Okay, let’s do some maths:<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">&gt;&gt; (+ 2 5)
7
&gt;&gt; (+ u3 u10)
u13
&gt;&gt; (- u3 u5)
thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Runtime(ArithmeticUnderflow, Some([]))', /Users/brew/Library/Caches/Homebrew/cargo_cache/registry/src/github.com-1ecc6299db9ec823/clarity-repl-0.27.0/src/repl/interpreter.rs:516:89
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace</code></pre>Clarity doesn’t have operators, so we write <code class="inline-code">2 + 5</code> as <code class="inline-code">(+ 2 5)</code>. <code class="inline-code">+</code> is just another function, which takes 2 inputs. This can look a bit weird, but it does make the amount of syntax you need to learn very small.Clarity differentiates between signed integers (can be positive or negative) and unsigned ones. We’re going to use unsigned ones everywhere, because we won’t have negative balances on our markets. So you’ll see lots of numbers prefixed with a <code class="inline-code">u</code>, it just means unsigned, or positive. <code class="inline-code">u10</code> is just 10.On the last line we’re doing <code class="inline-code">u3 - u5</code>, which is -2. We can’t have -2 as an unsigned integer so this crashes the REPL. This might seem super aggressive, and it is - but it’s also a security feature. A very common cause of security issues in smart contracts (and code in general!) is when numbers overflow or underflow. We expect a number to get bigger but it gets much smaller, or we expect a number to be unsigned and it becomes negative. In Stacks this is impossible and the contract call is aborted if it happens. The upside of this is that the code we write can be much simpler because we’re not doing as many checks. Stacks has our back! This will be a common theme too.One last thing about numbers: they’re always integers, there are no decimals or floats. We’ll always be working with ‘unit’ values. For example there are 1,000,000 microstacks in 1 STX, so you’ll see us represent 0.5 STX as <code class="inline-code">u500000</code>.Those <code class="inline-code">STX</code> values in the table are <code class="inline-code">100000000000000</code>, which is in microstacks. So this is actually 100,000,000 STX. A lot!<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">&gt;&gt; (stx-transfer? u1000000 tx-sender 'ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5)
Events emitted
{"type":"stx_transfer_event","stx_transfer_event":{"sender":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM","recipient":"ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5","amount":"1000000"}}
(ok true)</code></pre>Clarity has a function for transferring STX, which is just the same as any other function. It takes three inputs: the amount (in microstacks), the sender, and the recipient. <code class="inline-code">tx-sender</code> is a special keyword, meaning the transaction sender. We can use it in a contract to reference whoever is calling the function. In this console it defaults to the first address in that table we saw, labeled “deployer”. For the recipient I’ve used the address labeled “wallet_1”, yours might be different. In Clarity we always prefix a principal with a <code class="inline-code">'</code> as in this function call.A principal can be either the address of a wallet (like this example), or it can be the address of a contract. We’ll see contract principals later, so don’t worry about that for now!Notice that there’s an event emitted here too, and again this will be visible in Explorer when we look at a transaction. This is a really nice pattern, lots of functions emit events that let us understand exactly what happened.<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">&gt;&gt; ::get_assets_maps
+------------------------------------------------------+-----------------+
| Address | STX |
+------------------------------------------------------+-----------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM (deployer) | 99999999000000 |
+------------------------------------------------------+-----------------+
| ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5 (wallet_1) | 100000001000000 |
+------------------------------------------------------+-----------------+
| ST2CY5V39NHDPWSXMW9QDT3HC3GD6Q6XX4CFRK9AG (wallet_2) | 100000000000000 |
...</code></pre>At any time in the console you can print the current balance of every wallet. This is super handy for testing, as we’ll see. That table will also show other tokens when we add those, so it’s really useful functionality to be aware of.To exit the console, you can use ctrl+c twice, or ctrl+d once.That’s probably enough for us to jump in and start writing a contract. I’ll explain everything as we go, but you know the syntax to expect now! If you’d prefer to learn more about Clarity before continuing then feel free to check out chapters 2-6 of the Clarity Book: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://book.clarity-lang.org/ch02-00-types.html">https://book.clarity-lang.org/ch02-00-types.html</a>It’s definitely a useful resource! But up to you, if you prefer to learn as you hack on things then that works great too!Another resource I recommend bookmarking is <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://docs.stacks.co/write-smart-contracts/language-functions">https://docs.stacks.co/write-smart-contracts/language-functions</a> which documents every function in the language. No need to read them all, but if you want a bit more detail on anything we use then you’ll find it there.In the next lesson we’ll write our first contract in Clarity!

Learn to write Clarity, the smart contract language for Stacks

Clarity

Fungible token is a weird term, but it just refers to tokens that we can have on a blockchain in addition to the native currency, that act basically the same way as currency. You’re probably familiar with non-fungible tokens, so this is the opposite of that! Basically if you have 3 ape pictures from the same NFT collection they’re all unique things you hold, they probably have different attributes etc, whereas if you have 3,000 magic beans and that’s a fungible token, then they’re all the same thing. BTW I’ll just use the word token most of the time because it’s easier and less weird, but I’m referring to the same thing.At a super high level, we’re going to be building a market place that lets users swap STX for fungible tokens, and vice versa. So basically.. we need a fungible token to play with!In Stacks a fungible token is just a Clarity contract, or part of one. What sort of functions does that contract need? Well, we need to be able to transfer tokens, we need to know how many people have, we need... basically there’s a bunch of standard stuff we need to do to make tokens useful. Stacks has functions that directly support fungible tokens, which is pretty cool! The amount of code we have to write is tiny, and we don’t have to track any state or anything like that. If you’ve ever seen a contract for a token in Eth, yea this is going to be a lot nicer!One quick thing: there’s a nice Clarity extension for VSCode. You should be prompted to install it when you open the repo, it’s called clarity-lsp. It’ll give you code highlighting, completions, error highlighting, etc!<h3>Our first contract</h3>We'll start by creating a contract, which will be for our token.<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-shell">$ clarinet contract new magic-beans

Created file contracts/magic-beans.clar
Created file tests/magic-beans_test.ts
Updated Clarinet.toml with contract magic-beans</code></pre>The contract name will be the name we use for the token. You can call yours whatever you like, I’m building my exchange to help my friend Jack grow a beanstalk :)If you check that <code class="inline-code">contracts/magic-beans.clar</code> file now you’ll see some default content:<pre filepath="magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">;; magic-beans
;; &lt;add a description here&gt;

;; constants
;;

;; data maps and vars
;;

;; private functions
;;

;; public functions
;;</code></pre>Each line is prepended by <code class="inline-code">;;</code> - they’re just Clarity comments. We can just delete all of this and start from scratch.First of all, we need to define the fungible token that this contract is for. Clarity has built-in functionality for this. Remove those comments and put this as the top of the contract:<pre filepath="contracts/magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>(define-fungible-token magic-beans)</code></pre>Nice! Make sure you use the same name as your contract is named.So the first thing we need to be able to do is to mint our token, since currently nobody has any of them. But we don’t want just anyone to be able to mint them, let’s allow the person who owns the contract to and nobody else.Let’s add 2 new lines:<pre filepath="magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[3,4]"><code>(define-fungible-token magic-beans)

(define-constant contract-owner tx-sender)
(define-constant err-owner-only (err u100))</code></pre>We’ve seen the <code class="inline-code">tx-sender</code> in that first line before, remember that it’s the person sending the transaction. So if we put that at the top-level of our contract like this, then it’s the person deploying the contract. We assign that to a constant at deploy time, so every function in our contract knows who deployed it.The second line is new. In Stacks we return an error if something goes wrong with a transaction, we don’t have our own exceptions for example. We define these errors as constants, with an <code class="inline-code">err</code> as the value. We typically use unsigned ints as error codes to return. Many Stacks built-in functions use this convention, so it’s much easier to compose our code with those if we do too.Okay, let’s add our mint function:<pre filepath="magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>;; Custom function to mint tokens, only available to the contract owner
(define-public (mint (amount uint) (who principal))
 (begin
 (asserts! (is-eq tx-sender contract-owner) err-owner-only)
 (ft-mint? magic-beans amount who)
 )
)</code></pre>We define a public function of our contract using the <code class="inline-code">define-public</code> Clarity function. It’s called <code class="inline-code">mint</code>, and takes 2 parameters: amount (uint) and who to mint the tokens to (a principal, or address).<callout color="green">A quick note on function syntaxThere’s a few layers of nesting here and it can be a bit confusing. The structure is basically:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>(define-public (function-name (param param-type) (param2 param2-type))
 function-body
)</code></pre> Don’t worry too much about it for now, we’ll keep using it and it’ll become more clear</callout> <code class="inline-code">asserts!</code> is used for input validation. We’re checking that <code class="inline-code">tx-sender</code> and <code class="inline-code">contract-owner</code> are equal. Remember that <code class="inline-code">contract-sender</code> is our constant, set to the address that deployed the contract. In our function, <code class="inline-code">tx-sender</code> is whoever is calling the function. This can get a little bit confusing but we’ll see it a lot and it’s a super useful pattern. It has a <code class="inline-code">!</code> suffix because it will fail the transaction immediately if the assert is false.<code class="inline-code">ft-mint?</code> is another Clarity function, which mints a fungible token. The first argument is the name of the token (the one in <code class="inline-code">define-fungible-token</code>), and then we pass the amount and who from our function inputs. It has a <code class="inline-code">?</code> suffix because it may return an error. We’ll see this on lots of the Clarity functions!A function can only have one statement. So we use <code class="inline-code">begin</code> to wrap the 2 lines in one function. It’s kinda like curly brackets in languages like JS, we can have as many statements as we like in <code class="inline-code">begin</code>. The result of the last statement is automatically returned, we don’t have to return it explicitly.If you’re using the VSCode extension, it’s probably being a bit grumpy right now:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_s-yYf5sjSpgNHGMGLwcCv"></image>You can also see these warnings if you run <code class="inline-code">clarinet check</code>Basically it’s complaining that we don’t have any checks on the <code class="inline-code">amount</code> or <code class="inline-code">who</code> arguments before we pass them to <code class="inline-code">ft-mint</code>. Stacks likes us to check everything that is passed in, and it tells us if we haven’t. It’s another security feature, you can’t trust data that’s passed to a public function. But in this case we don’t really have anything to check except what we already have! We can let the contract owner mint any number of tokens to whoever they like, that’s fine. We can tell the checker that this is OK:<pre filepath="magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>;; Custom function to mint tokens, only available to the contract owner
(define-public (mint (amount uint) (who principal))
 (begin
 (asserts! (is-eq tx-sender contract-owner) err-owner-only)
 ;; amount, who are unchecked, but we let the contract owner mint to whoever they like for convenience
 ;; #[allow(unchecked_data)]
 (ft-mint? magic-beans amount who)
 )
)</code></pre>The <code class="inline-code">;; #[allow(unchecked_data)]</code> tells the checker that the next line is allowed to have unchecked arguments. The comment above it is just an explanation, to justify why we’re using that here. Now those warnings should disappear when you save the changes!Okay, that was a lot! Let’s jump into the console and see how all this comes together.First, if you haven’t already, run <code class="inline-code">clarinet check</code> just to make sure everything is good:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-shell">$ clarinet check 

✔ Syntax of 1 contract(s) successfully checked</code></pre>And now <code class="inline-code">clarinet console</code> from earlier:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>$ clarinet console 

clarity-repl v0.27.0
Enter "::help" for usage hints.
Connected to a transient in-memory database.
Contracts
+-------------------------------------------------------+----------------------+
| Contract identifier | Public functions |
+-------------------------------------------------------+----------------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.magic-beans | (mint |
| | (amount uint) |
| | (who principal)) |
+-------------------------------------------------------+----------------------+

Initialized balances
+------------------------------------------------------+-----------------+
| Address | STX |
+------------------------------------------------------+-----------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM (deployer) | 100000000000000 |
+------------------------------------------------------+-----------------+
| ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5 (wallet_1) | 100000000000000 |
...
&gt;&gt; </code></pre>This time we have 2 tables, one for our contracts and then the balances one that we saw before.The contract identifier is kinda interesting, it’s a concatenation of the deployer address and the magic-beans name we gave it.Let’s have a play!<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-clarity">&gt;&gt; tx-sender
ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM</code></pre>You knew this already, but by default the <code class="inline-code">tx-sender</code> is the deployer. Just double checking!<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; (contract-call? .magic-beans mint u1000 tx-sender)
Events emitted
{"type":"ft_mint_event","ft_mint_event":{"asset_identifier":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.magic-beans::magic-beans","recipient":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM","amount":"1000"}}
(ok true)</code></pre>This is super handy! We can call the contract that we just wrote from the console using the <code class="inline-code">contract-call?</code> function. Since we’re the deployer of the contract (notice the start of the contract identifer and deployer address are the same), we can just do <code class="inline-code">.magic-beans</code> to refer to it. Then <code class="inline-code">mint</code> is the function, and the rest of the parameters are the inputs to that function: <code class="inline-code">u1000</code> is the amount and <code class="inline-code">tx-sender</code> is who we mint to. Unsurprisingly this emits an event.<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; ::get_assets_maps
+------------------------------------------------------+--------------------------+-----------------+
| Address | .magic-beans.magic-beans | STX |
+------------------------------------------------------+--------------------------+-----------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM (deployer) | 1000 | 100000000000000 |
+------------------------------------------------------+--------------------------+-----------------+
| ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5 (wallet_1) | 0 | 100000000000000 |
...</code></pre>Remember how we used this to check our STX transfer before? Now it’s expanded to show our token too. SUPER useful!Now let’s see what happens if we switch to a different wallet.<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; ::set_tx_sender ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5
tx-sender switched to ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5</code></pre>I’ve used the wallet_1 from my table. You can use any of the addresses<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; (contract-call? .magic-beans mint u1000 tx-sender)
&lt;stdin&gt;:1:2: error: use of unresolved contract 'ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5.magic-beans'</code></pre>Ah! We can’t use that shorthand .magic-beans any more, because that expands to the address of the tx-sender.<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.magic-beans mint u1000 tx-sender)
(err u100)</code></pre>If we use the full identifier of the contract, we get our <code class="inline-code">err-owner-only</code> error. Perfect!<h3>Transferring tokens</h3>Minting a token is great, but it’s going to be pretty hard to build an exchange without being able to send the token between people and contracts. Let’s add a simple transfer function:<pre filepath="magic-beans.clar" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[5,18,19,20,21,22,23,24,25,26]"><code>(define-fungible-token magic-beans)

(define-constant contract-owner tx-sender)
(define-constant err-owner-only (err u100))
(define-constant err-amount-zero (err u101))

;; Custom function to mint tokens, only available to the contract owner
(define-public (mint (amount uint) (who principal))
 (begin
 (asserts! (is-eq tx-sender contract-owner) err-owner-only)
 ;; amount, who are unchecked, but we let the contract owner mint to whoever they like for convenience
 ;; #[allow(unchecked_data)]
 (ft-mint? magic-beans amount who)
 )
)

(define-public (transfer (amount uint) (sender principal) (recipient principal))
 (begin
 (asserts! (is-eq tx-sender sender) err-owner-only)
 (asserts! (&gt; amount u0) err-amount-zero)
 ;; recipient is unchecked, anyone can transfer their tokens to anyone else
 ;; #[allow(unchecked_data)]
 (ft-transfer? magic-beans amount sender recipient)
 )
)</code></pre>Notice that each function is at the top-level of our contract, there’s no nesting.Hopefully this function isn’t too tricky to follow. We have amount, sender and recipient as inputs. Remember that a principal can either be a wallet or a contract. The <code class="inline-code">sender</code> has to be the <code class="inline-code">tx-sender</code>, we can just re-use our <code class="inline-code">err-owner-only</code> error code for that assertion. I’ve also added another assertion to make sure the amount is non-zero. Remember that we have an unsigned int here so it’s definitely not negative, but transferring zero doesn’t make sense. And then we use ft-transfer? to transfer our tokens, nice and straightforward!<h4>Exercise: Add a similar check to stop users minting zero tokens!</h4>In clarinet console we get an error when we try to mint 0 tokens:<pre filepath="Clarity REPL" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>&gt;&gt; (contract-call? .magic-beans mint u0 tx-sender)
(err u1)</code></pre> That error code is actually coming from the call to <code class="inline-code">ft-mint?</code>. That’s a bit confusing and it’d be nicer to return our own <code class="inline-code">err-amount-zero</code> error code instead! <details class="details"><summary>Show solution</summary><div data-type="detailsContent"><pre filepath="magic-beans.clar" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[4]"><code>(define-public (mint (amount uint) (who principal))
 (begin
 (asserts! (is-eq tx-sender contract-owner) err-owner-only)
 (asserts! (&gt; amount u0) err-amount-zero)
 ;; who is unchecked, but we let the contract owner mint to whoever they like for convenience
 ;; #[allow(unchecked_data)]
 (ft-mint? magic-beans amount who)
 )
)</code></pre></div></details>Since we’ve updated our contract let’s check it behaves as we expect:<pre filepath="" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>$ clarinet console

&gt;&gt; (contract-call? .magic-beans mint u1000 tx-sender)
Events emitted
{"type":"ft_mint_event","ft_mint_event":{"asset_identifier":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.magic-beans::magic-beans","recipient":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM","amount":"1000"}}
(ok true)
&gt;&gt; (contract-call? .magic-beans transfer u500 tx-sender 'ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5)
Events emitted
{"type":"ft_transfer_event","ft_transfer_event":{"asset_identifier":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.magic-beans::magic-beans","sender":"ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM","recipient":"ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5","amount":"500"}}
(ok true)
&gt;&gt; ::get_assets_maps
+------------------------------------------------------+--------------------------+-----------------+
| Address | .magic-beans.magic-beans | STX |
+------------------------------------------------------+--------------------------+-----------------+
| ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM (deployer) | 500 | 100000000000000 |
+------------------------------------------------------+--------------------------+-----------------+
| ST1SJ3DTE5DN7X54YDH5D64R3BCB6A2AG2ZQ8YPD5 (wallet_1) | 500 | 100000000000000 |</code></pre>Perfect! We can mint tokens, and transfer them to whoever we like. Now you know how to write and call a contract. Pretty awesome!In the next lesson we’re going to start building out a frontend to interact with this contract, just to get everything working nicely end-to-end.

Creating our first Stacks contract with Clarity

A Fungible Token

Writing a NextJS app to allow us to mint our fungible token

Minting Frontend

Writing the first version of our exchange contract using Clarity

Exchange v1

Extend our NextJS app to support the functions of our exchange contract

Exchange Frontend

We revise our exchange contract to include an LP token and provide fees as an incentive for liquidity providers

Exchange v2

Okay, let’s start our app back up and get <code class="inline-code">clarinet integrate</code> running again too.<h3>Minting LP tokens</h3>Let’s go to our /admin page and mint some tokens (remember to set the nonce: you want 3 now) like before. That should work fine! Now let’s try providing some liquidity using those tokens:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_aX3nykmYUy5ov6ZhVS5Ri"></image>Hmm, <code class="inline-code">(err u300)</code> is one of ours, from the LP token contract:<code class="inline-code">(define-constant err-minter-only (err u300))</code>This makes sense! Our <code class="inline-code">provide-liquidity</code> function now mints LP tokens, and only the allowed minter can do that. By default the allowed minter is the deployer, so that’s not our exchange. We need to set the minter to the exchange, which our deployer does by calling the <code class="inline-code">set-minter</code> function.Let’s update our admin UI:<pre filepath="pages/admin.tsx" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[2,8,10,15,17,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,118,124,125,126,127,128,129,130]"><code class="language-tsx">import { ContractCallRegularOptions, openContractCall, UserData } from "@stacks/connect";
import { contractPrincipalCV, standardPrincipalCV, uintCV } from "@stacks/transactions";
import { useState } from "react";
import ActionButton from "../components/ActionButton";
import Auth from "../components/Auth";
import NumberInput from "../components/NumberInput";
import PageHeading from "../components/PageHeading";
import { appDetails, contractOwnerAddress, exchangeContractName } from "../lib/constants";
import truncateMiddle from "../lib/truncate";
import { useStacks } from "../providers/StacksProvider";
import { useTransactionToasts } from "../providers/TransactionToastProvider";

export default function AdminPage() {
 const [exchangeToken, setExchangeToken] = useState&lt;string&gt;('');
 const [lpToken, setLpToken] = useState&lt;string&gt;('');
 const [mintAmount, setMintAmount] = useState&lt;number&gt;(1_000_000)
 const { network, address } = useStacks()
 const { addTransactionToast } = useTransactionToasts()

 const mintTokens = async (e: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
 e.preventDefault()
 console.log(`Minting ${mintAmount} of ${exchangeToken}`)

 // (contract-call? .magic-beans mint u1000000 tx-sender)
 const options: ContractCallRegularOptions = {
 contractAddress: contractOwnerAddress,
 contractName: exchangeToken,
 functionName: 'mint',
 functionArgs: [
 uintCV(mintAmount),
 standardPrincipalCV(contractOwnerAddress),
 ],
 network,
 appDetails,
 onFinish: ({ txId }) =&gt; addTransactionToast(txId, `Minting ${exchangeToken} to ${truncateMiddle(contractOwnerAddress)}...`),
 }

 await openContractCall(options)
 }

 const setLpMinterPermission = async (e: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
 e.preventDefault()

 // (contract-call? .magic-beans-lp set-minter .beanstalk-exchange)
 const options: ContractCallRegularOptions = {
 contractAddress: contractOwnerAddress,
 contractName: lpToken,
 functionName: 'set-minter',
 functionArgs: [
 // Create a contract principal which combines the exchange address + name
 contractPrincipalCV(contractOwnerAddress, exchangeContractName),
 ],
 network,
 appDetails,
 onFinish: ({ txId }) =&gt; addTransactionToast(txId, `Setting minter permission on ${lpToken}...`),
 }

 await openContractCall(options)
 }

 return (
 &lt;div className="flex flex-col items-stretch max-w-4xl gap-8 m-auto"&gt;
 &lt;PageHeading&gt;Admin&lt;/PageHeading&gt;

 &lt;Auth /&gt;

 &lt;form className="flex flex-col gap-4"&gt;
 &lt;div&gt;
 &lt;label htmlFor="exchange-token" className="block text-sm font-medium text-gray-700"&gt;
 Exchange Token
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;input
 type="text"
 id="exchange-token"
 defaultValue={exchangeToken}
 onChange={(e) =&gt; setExchangeToken(e.target.value)}
 className="block w-full p-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
 placeholder="some-token"
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;div&gt;
 &lt;label htmlFor="lp-token" className="block text-sm font-medium text-gray-700"&gt;
 LP Token
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;input
 type="text"
 id="lp-token"
 defaultValue={lpToken}
 onChange={(e) =&gt; setLpToken(e.target.value)}
 className="block w-full p-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
 placeholder="some-token-lp"
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;div&gt;
 &lt;label htmlFor="mint-amount" className="block text-sm font-medium text-gray-700"&gt;
 Mint Amount
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;NumberInput
 name="mint-amount"
 decimals={0}
 required={false}
 defaultValue={mintAmount}
 onChange={(e) =&gt; setMintAmount(e.target.valueAsNumber)}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;div className="flex flex-row gap-8"&gt;
 &lt;ActionButton
 type="button"
 disabled={!exchangeToken || !address}
 onClick={mintTokens}
 &gt;
 Mint Tokens
 &lt;/ActionButton&gt;

 &lt;ActionButton
 type="button"
 disabled={!lpToken || !address}
 onClick={setLpMinterPermission}
 &gt;
 Set LP Minter Permission
 &lt;/ActionButton&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 )
}</code></pre>I’ve refactored a little to use our useStacks hook. Mostly just added the new form field though and the call to set-minter. The UI should look like this now:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_M5CPG9dq2QZC4DK5OjpWP"></image>And you should be able to kick off both transactions (remember to set the nonce on the first one, this time to 3):<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_sVxEEY5goi3nSD26I008P"></image>And once those are complete, if you go and provide liquidity you should see the LP tokens in your wallet:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_bHW7lAXlK98S14gTiNojG"></image>Nice!! In my case I provided 1000 STX which is 1B microstacks and therefore 1B LP tokens.<h3>Swap fees</h3>The next thing we added was those fees on swaps. We don’t need to make any UI changes for that, our price slippage already covers us - if the fees are too high and we’ll receive less than our minimum then it’ll reject the transaction. Moving on!<h3>Burning LP tokens</h3>The final new thing we added was the ability to remove liquidity by burning your LP tokens and withdrawing a share of the STX/tokens in the exchange. Let’s add that to our /liquidity pageThere’s nothing really new here, just another function call! Let’s update our liquidity page:<pre filepath="pages/liquidity.tsx" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[2,8,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,158,162,163,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225]"><code>import { ContractCallRegularOptions, openContractCall } from "@stacks/connect";
import { createAssetInfo, FungibleConditionCode, makeContractFungiblePostCondition, makeContractSTXPostCondition, makeStandardFungiblePostCondition, makeStandardSTXPostCondition, uintCV } from "@stacks/transactions";
import { useEffect, useState } from "react";
import ActionButton from "../components/ActionButton";
import Auth from "../components/Auth";
import NumberInput from "../components/NumberInput";
import PageHeading from "../components/PageHeading";
import SectionHeading from "../components/SectionHeading";
import { appDetails, contractOwnerAddress, exchangeContractName, microstacksPerSTX } from "../lib/constants";
import fetchExchangeInfo, { ExchangeInfo } from "../lib/fetchExchangeInfo";
import { useStacks } from "../providers/StacksProvider";
import { useTransactionToasts } from "../providers/TransactionToastProvider";

export default function LiquidityPage() {
 const { addTransactionToast } = useTransactionToasts()
 const { network, address } = useStacks()
 const [exchangeInfo, setExchangeInfo] = useState&lt;ExchangeInfo | undefined&gt;(undefined)

 const exchangeRatio = exchangeInfo &amp;&amp; exchangeInfo.stxBalance ? exchangeInfo.tokenBalance / exchangeInfo.stxBalance : undefined

 const fetchExchangeInfoOnLoad = async () =&gt; {
 if (!address) {
 console.log("Can't fetch exchange info without sender address")
 return
 }

 const exchangeInfo = await fetchExchangeInfo(network, address)
 setExchangeInfo(exchangeInfo)
 }

 useEffect(() =&gt; {
 fetchExchangeInfoOnLoad()
 }, [address])

 const provideLiquidity = async (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 e.preventDefault()

 if (!address) {
 console.error("Must be logged in to provide liquidity")
 return
 }

 console.log("Providing liquidity...")

 // (contract-call? .beanstalk-exchange provide-liquidity u1000 u2000)
 const stxAmount = (e.currentTarget.elements.namedItem("stx-amount") as HTMLInputElement).valueAsNumber
 const microstacksAmount = stxAmount * microstacksPerSTX

 const tokenAmount = (e.currentTarget.elements.namedItem("token-amount") as HTMLInputElement).valueAsNumber

 const stxPostCondition = makeStandardSTXPostCondition(
 address,
 FungibleConditionCode.Equal,
 microstacksAmount,
 )

 const tokenPostCondition = makeStandardFungiblePostCondition(
 address,
 FungibleConditionCode.Equal,
 tokenAmount,
 createAssetInfo(contractOwnerAddress, 'magic-beans', 'magic-beans')
 )

 const options: ContractCallRegularOptions = {
 contractAddress: contractOwnerAddress,
 contractName: exchangeContractName,
 functionName: 'provide-liquidity',
 functionArgs: [
 uintCV(microstacksAmount),
 uintCV(tokenAmount),
 ],
 postConditions: [stxPostCondition, tokenPostCondition],
 network,
 appDetails,
 onFinish: ({ txId }) =&gt; addTransactionToast(txId, `Providing liquidity (${stxAmount} STX)...`),
 }

 await openContractCall(options)
 }

 const removeLiquidity = async (e: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 e.preventDefault()
 console.log("Removing liquidity...")

 if (!address || !exchangeInfo) {
 console.error("Address and exchangeInfo are required for removeLiquidity")
 return
 }

 // (contract-call? .my-exchange remove-liquidity u5000)
 const burnAmount = (e.currentTarget.elements.namedItem("burn-amount") as HTMLInputElement).valueAsNumber

 // Our LP token has 6 decimals

 const functionArgs = [
 uintCV(burnAmount),
 ]

 const burnPostCondition = makeStandardFungiblePostCondition(
 address,
 FungibleConditionCode.Equal,
 burnAmount,
 createAssetInfo(contractOwnerAddress, "magic-beans-lp", "magic-beans-lp"),
 )

 // Since we don't know exactly how much STX/tokens, just say &gt;0 
 // Optionally you could extend `fetchExchangeInfo` to get the number, and then use that to calculate the amount
 // Could also add another input and let the user set what they expect! 
 const stxPostCondition = makeContractSTXPostCondition(
 contractOwnerAddress,
 exchangeContractName,
 FungibleConditionCode.Greater,
 0
 )

 const tokenPostCondition = makeContractFungiblePostCondition(
 contractOwnerAddress,
 exchangeContractName,
 FungibleConditionCode.Greater,
 0,
 createAssetInfo(contractOwnerAddress, "magic-beans", "magic-beans"),
 )

 const options: ContractCallRegularOptions = {
 contractAddress: contractOwnerAddress,
 contractName: exchangeContractName,
 functionName: 'remove-liquidity',
 functionArgs,
 postConditions: [burnPostCondition, stxPostCondition, tokenPostCondition],
 network,
 appDetails,
 onFinish: ({ txId }) =&gt; {
 addTransactionToast(
 txId,
 `Burning liquidity (${burnAmount.toLocaleString()} MAGIC-LP)...`,
 )
 }
 }

 await openContractCall(options)
 }


 const makeExchangeRatioSection = () =&gt; {
 if (!exchangeInfo) {
 return &lt;p&gt;Fetching exchange data...&lt;/p&gt;
 }
 if (!exchangeRatio) {
 return &lt;p&gt;No liquidity yet!&lt;/p&gt;
 }

 // toFixed(6) rounds to 6 decimal places, the + removes trailing 0s. Eg. 0.050000 -&gt; 0.05
 return &lt;p&gt;1 STX = &lt;b&gt;{+exchangeRatio.toFixed(6)}&lt;/b&gt; Magic Beans&lt;/p&gt;
 }

 return (
 &lt;div className="flex flex-col items-stretch max-w-4xl gap-8 m-auto"&gt;
 &lt;PageHeading&gt;Liquidity&lt;/PageHeading&gt;

 &lt;Auth /&gt;

 &lt;section className="flex flex-col gap-8"&gt;
 &lt;SectionHeading&gt;Provide Liquidity&lt;/SectionHeading&gt;

 {makeExchangeRatioSection()}

 &lt;form className="flex flex-row items-end gap-4" onSubmit={provideLiquidity}&gt;
 &lt;div&gt;
 &lt;label htmlFor="stx-amount" className="block text-sm font-medium text-gray-700"&gt;
 STX to provide
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;NumberInput
 name="stx-amount"
 placeholder={123}
 required={true}
 decimals={6}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;div&gt;
 &lt;label htmlFor="token" className="block text-sm font-medium text-gray-700"&gt;
 Magic Beans to provide
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;NumberInput
 name="token-amount"
 placeholder={456}
 required={true}
 decimals={0}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;ActionButton type="submit"&gt;
 Provide Liquidity
 &lt;/ActionButton&gt;
 &lt;/form&gt;

 &lt;/section&gt;

 &lt;section className="flex flex-col gap-8"&gt;
 &lt;SectionHeading&gt;Remove Liquidity&lt;/SectionHeading&gt;

 &lt;form className="flex flex-row items-end gap-4" onSubmit={removeLiquidity}&gt;
 &lt;div&gt;
 &lt;label htmlFor="burn-amount" className="block text-sm font-medium text-gray-700"&gt;
 MAGIC-LP to burn
 &lt;/label&gt;
 &lt;div className="mt-1"&gt;
 &lt;NumberInput
 name="burn-amount"
 placeholder={123}
 required={true}
 decimals={0}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;ActionButton type="submit"&gt;
 Remove Liquidity
 &lt;/ActionButton&gt;
 &lt;/form&gt;
 &lt;/section&gt;
 &lt;/div&gt;
 )
}</code></pre>There’s a little bit of UI shuffling to add sections. But mostly there’s a new form at the bottom which lets users burn their liquidity tokens and receive STX and tokens by calling our <code class="inline-code">remove-liquidity</code> function. If you like you can make the post-conditions here a bit cleverer, there are some ideas in the comments. Hopefully the basic structure here looks pretty familiar by now though!<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_RKRtgfzu6zb5FYm9PBFuh"></image><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_ZzBtoBl0SASArz5JbpDx3"></image>And with that we have a fully functioning exchange for magic beans! We can provide liquidity, swap STX for magic beans and vice versa, and reward our liquidity providers to make our exchange self-sustaining. Sweet!! Now that there’s a badass exchange for magic beans, Jack’s gonna have his beanstalk in no time 🔥<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_p28CXO1THsuwGU3eF1cub"></image>In our final lesson we’re gonna get your contracts deployed to the public testnet - we’ve spent long enough on <a target="_blank" rel="noopener noreferrer nofollow" class="link link" href="http://localhost">localhost</a>!

Update our NextJS app to add support for our LP token

Finishing our app

We’ve been relying on <code class="inline-code">clarinet integrate</code> to run our contracts, which runs everything on <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="http://localhost">localhost</a> (Devnet). One reason for that is that it’s a pretty good dev setup, we can view our transactions, the wallet works well with it, we had a local API, etc! It definitely feels more robust than running other chains locally. The second reason is that in Stacks, contracts are deployed using an address and the contract name. This is pretty nice for looking them up, or seeing what’s happening in Explorer. But it means that once you’ve deployed it’s a bit fiddly to update the contract - you need to deploy from a new address or rename all the contracts. So a good workflow for Stacks is to do things locally, then deploy to Testnet for some final testing, then deploy to Mainnet! We’ll skip that final step because it costs real money, but let’s get onto Testnet.<h3>Deploying our contracts</h3>Remember how we logged into our Hiro wallet using the secret key that we found in the Devnet config file? That file is in source control, which is fine because we’re only using it on Devnet (<a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="http://localhost">localhost</a>). But we need to make sure we use a different account on the public networks.Sign out of Hiro wallet, and create a new Stacks account - or log in with an existing secret key if you’ve used it before. Make sure you switch over to Testnet, it’ll probably change to Mainnet when you log in by default.Now it probably looks something like this:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_XKZMaCwstqVHK-4jl65yu"></image>Note that the address still starts ST…, like the one you’ve been using on Devnet. Stacks uses ST… on Devnet and Testnet, and SP… on Mainnet, so you can always tell the difference. But the secret key is the same, so we don’t want it in Github or anything like that. Your balance will be 0 in the wallet - which means we can’t cover the fees to deploy. Let’s fix that!Stacks Explorer has a built-in faucet: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://explorer.stacks.co/sandbox/faucet?chain=testnet">https://explorer.stacks.co/sandbox/faucet?chain=testnet</a><callout color="green">There are some other cool tools here you might like to play with! For example you can see and call the functions of any contract on the network from the Explorer sandbox. It’s a cool benefit of having the source of every contract always available.</callout>When you connect your wallet you should see something like:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_kVPuq-8Ycku34WAWcTcrl"></image>BTW you can open that sidebar in Explorer by clicking the three line menu iconGo ahead and click “Request STX” and shortly you’ll see a transaction in the sidebar:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_-6nBDTXaVqXG6eLiSjTQ8"></image>Now you have a bunch of Testnet STX! That transaction will be pending and it won’t show up in your wallet just yet. As long as it shows in the sidebar though you’re good. It might take about 10 minutes or so for the transaction to complete, we'll see exactly what's going on there shortly. Now head over to <code class="inline-code">defi-contracts/settings/Testnet.toml</code> and you should see something like this:<pre filepath="defi-contracts/settings/Testnet.toml" data-show-line-numbers="false" showcopybutton="false" data-line-highlights="[]"><code class="language-shell">[accounts.deployer]
mnemonic = "&lt;YOUR PRIVATE TESTNET MNEMONIC HERE&gt;"</code></pre>This file isn’t version controlled like the Devnet one. Copy the secret key for your new Stacks account (the one we just sent 500 STX to) and paste it in here as the <code class="inline-code">mnemonic</code>.Once you’ve set that, we can create a deployment plan:<pre filepath="defi-contracts/" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code>$ clarinet deployments generate --testnet
Generated file deployments/default.testnet-plan.yaml</code></pre>Our contracts are pretty straightforward, and our plan will be pretty simple too! Here’s mine:<pre filepath="deployments/default.testnet-plan.yaml" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-bash">---
id: 0
name: Testnet deployment
network: testnet
node: "https://stacks-node-api.testnet.stacks.co"
plan:
 batches:
 - id: 0
 transactions:
 - contract-publish:
 contract-name: magic-beans
 expected-sender: ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY
 path: contracts/magic-beans.clar
 cost: 10910
 - contract-publish:
 contract-name: magic-beans-lp
 expected-sender: ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY
 path: contracts/magic-beans-lp.clar
 cost: 12970
 - contract-publish:
 contract-name: beanstalk-exchange
 expected-sender: ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY
 path: contracts/beanstalk-exchange.clar
 cost: 69470</code></pre>Seems good: it’s going to deploy all my contracts together, with the exchange last - probably because it references the others.Now we can perform the deploy:<pre filepath="defi-contracts/" data-show-line-numbers="false" showcopybutton="true" data-line-highlights="[]"><code class="language-shell">$ clarinet deployments apply -p deployments/default.testnet-plan.yaml</code></pre>It’ll show the plan it’s going to apply, and the total cost. Click Y to confirm and then you should see something like:<pre filepath="" data-show-line-numbers="false" showcopybutton="false" data-line-highlights="[]"><code class="language-shell">Publishing contracts using https://stacks-node-api.testnet.stacks.co... 
🟨 ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY.beanstalk-exchange Contract broadcasted 
🟨 ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY.magic-beans Contract broadcasted 
🟨 ST1RF441MG7VMFPN73DNHEH341DH7GDZW0MYD0GDY.magic-beans-lp Contract broadcasted</code></pre>Our contracts are being deployed! This will take a few minutes, but in the meantime if you head to Explorer pending tab here: <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="https://explorer.stacks.co/transactions?chain=testnet">https://explorer.stacks.co/transactions?chain=testnet</a><image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial__pVDoqS0aU0wdI_r2TW08"></image>There they are!<callout color="orange">The reason transactions are taking so long is because of how Stacks blocks are finalised on the bitcoin network. Testnet uses a public bitcoin testnet, whereas on Devnet we were running a faster one locally. Contract deploys (and seemingly also the STX faucet) require this finalisation. Basically, we’re waiting for a bitcoin block to be mined. Stacks does have something called microblocks to make this faster, but their behaviour isn’t yet reliable. I did try using them to speed our app up but wasn’t able to. Hopefully transaction speed will be improved soon! - <a target="_blank" rel="noopener noreferrer nofollow" class="link link link notion-link-token notion-enable-hover" href="https://docs.stacks.co/understand-stacks/microblocks#introduction">Microblocks documentation</a> - <a target="_blank" rel="noopener noreferrer nofollow" class="link link link notion-link-token notion-enable-hover" href="https://discord.com/channels/621759717756370964/730814571517968436/983010895686930432">Discussion on Stacks discord</a></callout>Once they’re deployed we can run our app and point it at the testnet!<h3>Changing our app to testnet</h3>Let’s head back into the <code class="inline-code">frontend</code> directory and start our app with <code class="inline-code">npm run dev</code>The first thing we need to change is our network: from <code class="inline-code">StacksMocknet</code> (which is <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link" href="http://localhost/Devnet">localhost/Devnet</a>) to <code class="inline-code">StacksTestnet</code>. Most of our code gets this from our <code class="inline-code">useStacks</code> function in <code class="inline-code">StacksProvider</code>:<pre filepath="providers/StacksProvider.tsx" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[2,16]"><code class="language-tsx">import { AppConfig, UserData, UserSession } from "@stacks/connect";
import { StacksNetwork, StacksTestnet } from "@stacks/network";
import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";

interface StacksContextValue {
 network: StacksNetwork
 address?: string
 userSession: UserSession
}

const AuthContext = createContext&lt;StacksContextValue | undefined&gt;(undefined);

export default function StacksProvider({ children }: PropsWithChildren&lt;{}&gt;) {
 const [userData, setUserData] = useState&lt;UserData | undefined&gt;(undefined);

 const network = new StacksTestnet()
 const appConfig = new AppConfig(['store_write']) // Might need publish_data instead?
 const userSession = new UserSession({ appConfig });
 const address: string | undefined = userData?.profile?.stxAddress?.testnet

...</code></pre>When I search my app for Mocknet it also shows up in TransactionToastProvider. That’s already a child of StacksProvider in _app.tsx, so we can get the network from there. Let’s update it to do that:<pre filepath="providers/TransactionToastProvider.tsx" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[3,12]"><code>import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useStacks } from "./StacksProvider";

interface TransactionsToastContextValue {
 addTransactionToast: (transactionId: string, pendingMessage: string) =&gt; void
}

const TransactionToastsContext = createContext&lt;TransactionsToastContextValue | undefined&gt;(undefined);

export default function TransactionToastProvider({ children }: PropsWithChildren&lt;{}&gt;) {
 const { network } = useStacks()
 const [transactionIds, setTransactionIds] = useState&lt;Set&lt;string&gt;&gt;(new Set())</code></pre>If you have any other instances of <code class="inline-code">StacksMocknet</code> it’d be worth changing them too. It’s good practice to just have the network switched in one place!Nice - now we have one source of truth for our network and everything will be using Testnet. The last thing that we should need to update is our addresses, over in <code class="inline-code">lib/constants.ts</code>:<pre filepath="lib/constants.ts" data-show-line-numbers="true" showcopybutton="true" data-line-highlights="[9]"><code class="language-typescript">import { AuthOptions } from "@stacks/connect";

export const appDetails: AuthOptions["appDetails"] = {
 name: "Beanstalk Exchange",
 icon: "https://freesvg.org/img/youk-k-Beanstalk.png",
}

// Your testnet address! 
export const contractOwnerAddress = "ST..."

export const exchangeContractName = "beanstalk-exchange"

export const microstacksPerSTX = 1_000_000</code></pre>One last thing: in the app, log out and then back in. The existing log in is for Devnet and it’ll complain if you try to do anything using it.Now you should be able to head to your admin page and kick off the transaction on Testnet:<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_qTxreLxRlLxUxJ6QeWPoU"></image>Transactions will take up to ~10 minutes on Testnet. Our UI should deal with that fine, but don’t worry about doing too many transactions here. Just enough to convince yourself that everything still works! That’s why we stuck to Devnet for all our development and testing :)And with that we’re done!! Hopefully you’ve learned a lot about Defi and about Stacks, we’ve covered a crazy amount here! Awesome job!I’d definitely encourage you to deploy your exchange and share it with others! Vercel is the easiest way, but anywhere you can host a NextJS app will work. Nothing special to do here, no environment variables needed! Only thing is you’ll want to set the root directory to <code class="inline-code">frontend</code>, that’s where our Next app is!<image src="https://gcyrkvfwpvlwjrrklxnh.supabase.co/storage/v1/object/public/tutorials/c930c482-5e58-498d-85b1-fc5965497551/tutorial_mkhbLiIrT7xR3rppRBerq"></image><callout color="green">Next Step: Hackathon!We'd love you to join our hackathon, take what you've learned here and build something awesome for a chance to win STX! It's an awesome way to cement your learning too. Check out the Discord hackathon channels to learn more, build a team and discuss ideas. We can't wait to see what you build!</callout><callout color="purple">Verify your exchange to receive completion NFT! Please enter below the Testnet address of your deployed exchange contract :) Note that you'll need to add the address that you used to deploy to your <a target="_blank" rel="noopener noreferrer nofollow" class="link link link notion-link-token notion-enable-hover" href="http://pointer.gg/profile">Pointer profile</a> <deployment-verifier blockchain="stacks" network="testnet"></deployment-verifier></callout><h3>Feedback</h3>We'd love to ask you to share your thoughts about the tutorial on Twitter! 🔥Let us know how your time building with us went :) extra points for dropping a screenshot or link to your exchange! double extra points if you’ve customized it!!Here's a link that makes it easy to tag us! -&gt; <a target="_blank" rel="noopener noreferrer nofollow" class="link link link link notion-link-token notion-enable-hover" href="https://twitter.com/intent/tweet?text=%0A%0A@pointer_gg%20x%20@Stacks">🐦 Share your thoughts on Twitter</a>Finally, we'd love to hear any feedback good/bad/neutral about the tutorial in the #stacks-defi-feedback channel in our discord.Pop in and tell us what you thought! We want to make Pointer the best place to learn web3 dev and we need your feedback to do it!

Deploy our contracts to the public Testnet