GITBOOK-53: update Build A Frontend page

eric-stacks · gitbook-bot · commit 2c87fa9d703c · 2025-12-24T03:12:40.000Z
diff --git a/docs/build/SUMMARY.md b/docs/build/SUMMARY.md
@@ -96,7 +96,6 @@
   * [Creating a Bitcoin Transaction](more-guides/verify-bitcoin-transactions-clarity/creating-btc-tx.md)
   * [Parsing a Bitcoin Transaction](more-guides/verify-bitcoin-transactions-clarity/parsing-a-bitcoin-transaction.md)
 * [c32check](more-guides/c32check.md)
-* [Community Tutorials](more-guides/community-tutorials.md)
 
 ***
 
diff --git a/docs/build/clarinet/overview.md b/docs/build/clarinet/overview.md
@@ -16,19 +16,6 @@ For the latest releases and versions of Clarinet, check out the open-source repo
 
 <div data-with-frame="true"><figure><img src="../.gitbook/assets/clarinet-diagram.png" alt=""><figcaption></figcaption></figure></div>
 
-#### Announcements
-
-{% updates format="full" %}
-{% update date="2025-11-05" %}
-## Clarinet was migrated to Stacks Labs
-
-* The Clarinet repository now belongs to the stx-labs organization.
-* The NPM packages are now published under the `@stacks` organization.
-* The VSCode extension is now published under the Stacks Labs organization.
-* Check out the [announcement](/broken/pages/MJwczGlRXtiBGKy9CNxu) to see how to migrate older projects.
-{% endupdate %}
-{% endupdates %}
-
 ## Key features
 
 * [**Leverage a powerful CLI**](https://app.gitbook.com/s/GVj1Z9vMuEOMe7oH7Wnq/clarinet/cli-reference) - Create new projects, manage your smart contracts and their dependencies using clarinet requirements, and interact with your code through the built-in REPL.
diff --git a/docs/build/get-started/build-a-frontend/README.md b/docs/build/get-started/build-a-frontend/README.md
@@ -4,20 +4,28 @@ description: Interact with your contracts with a proper frontend app
 
 # Build a Frontend
 
-<figure><img src="../../.gitbook/assets/build-a-frontend.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/3-reasons-the-future-of-apps-will-be-decentralized">Hiro Blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../../.gitbook/assets/build-a-frontend.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/3-reasons-the-future-of-apps-will-be-decentralized">Hiro Blog</a></p></figcaption></figure></div>
 
 A major part of building full-stack Stacks applications is creating a well designed UI with a solid UX. One of your primary tools for this is stacks.js, a JavaScript/Typescript library that simplifies working with contracts, wallets, and the Stacks network.
 
 {% hint style="info" %}
 This section assumes you have basic knowledge in front-end development and bootstrapping frontend frameworks.
 {% endhint %}
 
-### Components to your Stacks frontend app
+### Basic components to your Stacks frontend app
 
 * [Authentication](authentication.md)
 * [Post-Conditions](post-conditions.md)
 * [Sending Transactions](sending-transactions.md)
 
+### Stacks brand designs for your app's UI
+
+Access the latest Stacks brand design resources at [stacks.co/brand](https://stacks.co/brand). Find and download Stacks brand design materials directly from the linked Figma space.
+
+{% embed url="https://www.figma.com/design/afyAaHa2vGCR0KU1BHiske/Stacks-Brand?node-id=256-790&t=qXPWrrQ10iytre1c-1" %}
+
+***
+
 ### Additional Resources
 
 * \[[Hiro Blog](https://www.hiro.so/blog/rich-app-templates-in-the-hiro-platform)] Rich App Templates in the Hiro Platform: Accelerating Web3 Development
diff --git a/docs/build/get-started/build-a-frontend/authentication.md b/docs/build/get-started/build-a-frontend/authentication.md
@@ -1,11 +1,11 @@
 # Authentication
 
-<figure><img src="../../.gitbook/assets/authentication.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/navigating-the-tension-between-web3-privacy-and-data-transparency">Hiro Blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../../.gitbook/assets/authentication.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/navigating-the-tension-between-web3-privacy-and-data-transparency">Hiro Blog</a></p></figcaption></figure></div>
 
 Authenticating (connecting wallets) with a Stacks-supported wallet is a common task when building Stacks apps. On a web2 app, authentication usually means sending credentials to a central provider, which then verifies you and controls access. In web3, authentication uses a wallet and cryptographic signatures with libraries like stacks.js, letting users prove identity without a central party holding the keys.
 
 {% hint style="info" %}
-To learn more about how wallets and accounts work with Stacks, check out this [section](https://app.gitbook.com/s/H74xqoobupBWwBsVMJhK/network-fundamentals/accounts) in Learn.
+To learn more about how wallets and accounts work with Stacks, check out this [section](https://app.gitbook.com/s/H74xqoobupBWwBsVMJhK/network-fundamentals/wallets-and-accounts) in Learn.
 {% endhint %}
 
 Below is a simple example showing how to set up front-end authentication with `@stacks/connect` and access user data in the UI. The stacks.js monorepo contains several underlying packages specific to different use cases. The package `@stacks/connect` is the main connectivity package used in Stacks.
diff --git a/docs/build/get-started/build-a-frontend/sending-transactions.md b/docs/build/get-started/build-a-frontend/sending-transactions.md
@@ -1,6 +1,6 @@
 # Sending Transactions
 
-<figure><img src="../../.gitbook/assets/send-transactions.jpg" alt=""><figcaption></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../../.gitbook/assets/send-transactions.jpg" alt=""><figcaption></figcaption></figure></div>
 
 Any Stacks app is going to require sending transactions at some point, so how do we do that?
 
diff --git a/docs/build/get-started/clarity-crash-course.md b/docs/build/get-started/clarity-crash-course.md
@@ -6,7 +6,7 @@ description: >-
 
 # Clarity Crash Course
 
-<figure><img src="../.gitbook/assets/clarity.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/write-better-smart-contracts-with-the-programming-language-clarity">Hiro Blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../.gitbook/assets/clarity.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/write-better-smart-contracts-with-the-programming-language-clarity">Hiro Blog</a></p></figcaption></figure></div>
 
 ### Intro
 
diff --git a/docs/build/get-started/developer-quickstart.md b/docs/build/get-started/developer-quickstart.md
@@ -4,7 +4,7 @@ description: Your 0→1 guide for building a Clarity contract and app on Stacks.
 
 # Developer Quickstart
 
-<figure><img src="../.gitbook/assets/Frame 316125324 (1).jpg" alt=""><figcaption></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../.gitbook/assets/Frame 316125324 (1).jpg" alt=""><figcaption></figcaption></figure></div>
 
 **Welcome to the Stacks Developer Quickstart Guide!**\
 This is your fast-track path for understanding what you'll need to become a Stacks developer. In this guide, you’ll build a real Clarity smart contract, wire up a functioning Stacks app, and pick up about 75% of the practical knowledge every Stacks builder needs. Whether you’re shipping your first project or leveling up your skills, this guide takes you from zero to deployed—quickly and confidently.
diff --git a/docs/build/more-guides/community-tutorials.md b/docs/build/more-guides/community-tutorials.md
diff --git a/docs/build/more-guides/sbtc/bridging-bitcoin/btc-to-sbtc.md b/docs/build/more-guides/sbtc/bridging-bitcoin/btc-to-sbtc.md
@@ -230,6 +230,7 @@ You could also fetch the deposit data from the API client. This will return data
 
 {% code expandable="true" %}
 ```typescript
+// https://sbtc-emily.com/deposit/<initial-deposit-txid>
 let depositInfo = await client.fetchDeposit(txid) // txid of initial bitcoin deposit
 
 // example depositInfo result below
diff --git a/docs/build/post-conditions/overview.md b/docs/build/post-conditions/overview.md
@@ -4,7 +4,7 @@ description: Learn how post-conditions protect users from unexpected transaction
 
 # Overview
 
-<figure><img src="../.gitbook/assets/post-conditions.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/a-developers-guide-to-post-conditions">Hiro Blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../.gitbook/assets/post-conditions.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/a-developers-guide-to-post-conditions">Hiro Blog</a></p></figcaption></figure></div>
 
 ### What are post-conditions?
 
diff --git a/docs/build/stacks-connect/connect-wallet.md b/docs/build/stacks-connect/connect-wallet.md
@@ -2,7 +2,7 @@
 
 Learn how to integrate wallet connections into your Stacks application. Connecting a wallet authenticates users and enables blockchain interactions like transfers and contract calls.
 
-<figure><img src="../.gitbook/assets/stacks-connect.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/better-devex-fewer-dependencies-meet-the-new-stacks-connect">Hiro blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../.gitbook/assets/stacks-connect.jpg" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/better-devex-fewer-dependencies-meet-the-new-stacks-connect">Hiro blog</a></p></figcaption></figure></div>
 
 {% hint style="success" %}
 For the latest releases and versions of `@stacks/connect`, check out its npm page [here](https://www.npmjs.com/package/@stacks/connect).
@@ -27,7 +27,7 @@ Prerequisites:
 
 {% stepper %}
 {% step %}
-#### Install package
+**Install package**
 
 Add Stacks Connect to your project:
 
@@ -39,7 +39,7 @@ npm install @stacks/connect
 {% endstep %}
 
 {% step %}
-#### Connect and authenticate
+**Connect and authenticate**
 
 Use `connect` to initiate a wallet session and persist user data:
 
@@ -76,7 +76,7 @@ function logout() {
 {% endstep %}
 
 {% step %}
-#### Access user data
+**Access user data**
 
 Read persisted addresses and request full account details:
 
@@ -102,7 +102,7 @@ console.log('Gaia URL:', account.gaiaHubUrl);
 {% endstep %}
 
 {% step %}
-#### Make your first transaction
+**Make your first transaction**
 
 Request the wallet to broadcast a transfer:
 
diff --git a/docs/build/stacks.js/overview.md b/docs/build/stacks.js/overview.md
@@ -1,6 +1,6 @@
 # Overview
 
-<figure><img src="../.gitbook/assets/stacksjs-learn.png" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/taking-a-look-at-recent-stacks-js-improvements">Hiro blog</a></p></figcaption></figure>
+<div data-with-frame="true"><figure><img src="../.gitbook/assets/stacksjs-learn.png" alt=""><figcaption><p>source: <a href="https://www.hiro.so/blog/taking-a-look-at-recent-stacks-js-improvements">Hiro blog</a></p></figcaption></figure></div>
 
 ## Overview
 
diff --git a/docs/build/whats-new/latest-updates.md b/docs/build/whats-new/latest-updates.md
@@ -4,6 +4,26 @@ description: Check out the latest Stacks developer updates
 
 # Latest Updates
 
+### Stacks Blockchain API v8.13.6 is live
+
+_December 22, 2025_
+
+\[Hiro] This is a required upgrade for all API users (incl. partners & exchanges): adds support for smart contracts deployed with empty source code.
+
+It's an easy upgrade: no DB migrations, and fully compatible with the current chainstate.
+
+See more in Hiro's release notes [here](https://github.com/hirosystems/stacks-blockchain-api/releases/tag/v8.13.6).
+
+***
+
+### USDCx now live on mainnet
+
+_December 18, 2025_
+
+New docs section dedicated to the launch of USDCx is now live [here](https://app.gitbook.com/s/H74xqoobupBWwBsVMJhK/bridging/usdcx). Learn about its interoperable architecture with Circle's xReserve and discover the Clarity contracts behind the new USDCx token.
+
+***
+
 ### Stacks Miners — Please Update ASAP!
 
 _December 12, 2025_
