Hiro
Hiro
  • 165
  • 89 511
[Full Tutorial] Build a simple Bitcoin Runes Dashboard using Next.js, shadcn, and the Hiro Runes API
Learn how to build a Bitcoin Runes dashboard application using Next.js 14, shadcn/ui, Hiro's Runes API, Stacks Connect, Leather wallet, and Tailwind.
Come and follow along step-by-step as Eric Choy, Developer Advocate at Hiro, guides you through the building process of the Runes Dashboard app. You'll also get a chance to hear from Rafael Cárdenas, Senior Software Engineer at Hiro, on how the Runes API works.
We'll start with launching a Next.js app from scratch. Then we'll implement the basic skeleton UI for the dashboard. Once we get the UI down, we'll implement our server function calls to fetch the Runes API endpoints. We'll then process that data return from the API and have them displayed on the front end. Finally, we'll wrap it up by adding a Connect Wallet button.
Bitcoin Runes is a new fungible token protocol on Bitcoin that launched in April 2024, alongside the Bitcoin Halving. Created by Casey Rodarmor, the same creator of Bitcoin Ordinals, Runes are a more efficient design compared to BRC-20 tokens, an experimental protocol for fungible tokens that was built on top of Ordinals.
For the code snippets used during the building process:
gist.github.com/ECBSJ/0cd822062a998ada1393a830a48c1043
For more on the Runes API documentation:
docs.hiro.so/bitcoin/runes/api
For the completed application, check out the Github repo for this project where you'll find the app's public link and also be given enhancement suggestions:
github.com/ECBSJ/my-runes-app
00:00 Intro and app demo
01:57 Rafael explaining Runes and how the Runes API works
07:43 Installing Next.js 14
11:59 Building landing page and Hero section
14:57 Installing shadcn/ui components
19:31 Implementing dark/light mode toggle
22:40 Scaffolding our dashboard and route segments
31:44 Implementing our function calls to fetch Runes API endpoint data
54:19 Passing our API data to display on dashboard's card components
01:09:19 Using Stacks Connect to add Connect Wallet functionality
01:21:50 Adding shadcn/ui DataTable components to our leaf segments
01:36:24 Polishing up the landing page
01:46:18 Viewing the completed app
==========
Learn more about Hiro's Developer Tooling:
www.hiro.so
Follow us on Twitter:
x.com/hirosystems
Developers, dive right on into the Docs:
docs.hiro.so
To start learning the Clarity smart contract language:
clarity-lang.org
Learn more about the Stacks Blockchain:
www.stacks.co/
มุมมอง: 21

วีดีโอ

Announcing Contract Monitoring in the Hiro Platform
มุมมอง 4021 ชั่วโมงที่ผ่านมา
We’ve rolled out a new contract monitoring feature in the Hiro Platform, so you can get notified anytime a specified function is called in your Clarity smart contract on mainnet. You can target specific function calls by argument values or by caller address, so you can keep an eye on who’s calling your contracts and how they’re being used. Whether you’re monitoring for suspicious activity or si...
Understanding Post-Conditions in a Stacks Blockchain Transaction (Part 2)
มุมมอง 2814 วันที่ผ่านมา
Post-conditions are intended to be used to force a transaction to abort if the transaction would cause a principal to send an asset in a way that is not to the user's liking. For Part 2, we demonstrate the usage of post-conditions on fungible token transfers in a multi-layered smart contract project. If you haven’t already, check out Part 1 to learn what post-conditions are and why to use them ...
Understanding Post-Conditions in a Stacks Blockchain Transaction (Part 1)
มุมมอง 2514 วันที่ผ่านมา
Post-conditions in Stacks transactions provide an additional layer of security. They ensure that transactions execute as expected without requiring the user to know the underlying smart contract code. For Part 1, we explain the what, why, and how behind post-conditions by demostrating its usage on a simple STX Transfer event. Check out Part 2 to see how to use post-conditions on fungible token ...
Announcing Programmatic API Access to Chainhook and Devnet
มุมมอง 5028 วันที่ผ่านมา
We’ve launched programmatic API access in the Hiro Platform, so now you can manage chainhooks and devnet programmatically from your code, unlocking powerful automation opportunities in your application code, development and CI scripts, and more. Learn more: View docs: docs.hiro.so/stacks/platform-api
Adding a Connect Wallet Button to your Bitcoin Web3 App
มุมมอง 109หลายเดือนก่อน
One of the most important steps in building your front end application for the Bitcoin Web3 economy is allowing users to connect with their wallet. Accomplishing this requires the libraries of Stacks.js, which allows your app to have your users interact with your Clarity smart contract, authenticate their identity, and much more. For more on this in our documentation: docs.hiro.so/stacks/connec...
Nakamoto Support Now Live on Simnet and Devnet
มุมมอง 66หลายเดือนก่อน
The latest Clarinet release introduces beta support for Nakamoto in simnet and devnet. That means you can experiment with epoch 3.0 and start writing Clarity 3 contracts today. With just a few short steps, you can start experimenting with Stacks epoch 3.0 in your local environment. Note, these instructions work for Clarinet. Epoch 3.0 support in the Hiro Platform is not yet available, but is ex...
Smart Contract of the Month [August 2024 - Semi-Fungible-Token]
มุมมอง 139หลายเดือนก่อน
This month we are tearing through a simple semi-fungible-token (SFT) implementation contract, which is a new starter template contract in the Hiro Platform. Semi-Fungible-Tokens are an innovative way to bring multiple ownership of a single unique digital item in web3. Learn what they are and how you can start building your own SFT smart contract in the Hiro Platform. This smart contract is writ...
How to Use the Runes API
มุมมอง 74หลายเดือนก่อน
How to Use the Runes API
Reinventing Crowdfunding on Stacks at the Consensus Hackathon
มุมมอง 130หลายเดือนก่อน
Reinventing Crowdfunding on Stacks at the Consensus Hackathon
5 Ways to Interact With Devnet in the Hiro Platform
มุมมอง 482 หลายเดือนก่อน
5 Ways to Interact With Devnet in the Hiro Platform
Building a Static Analysis Tool for Clarity Smart Contracts
มุมมอง 1602 หลายเดือนก่อน
Building a Static Analysis Tool for Clarity Smart Contracts
Explore the New Hiro Docs
มุมมอง 4262 หลายเดือนก่อน
Explore the New Hiro Docs
Tokenizing Real World Assets at the Consensus Hackathon
มุมมอง 942 หลายเดือนก่อน
Tokenizing Real World Assets at the Consensus Hackathon
Why Consensus Hackathon Devs Are Building on Stacks
มุมมอง 1813 หลายเดือนก่อน
Why Consensus Hackathon Devs Are Building on Stacks
Creating Event Streams for Stacks
มุมมอง 903 หลายเดือนก่อน
Creating Event Streams for Stacks
Validate Your Contract Code in the Hiro Platform Pt. 2
มุมมอง 995 หลายเดือนก่อน
Validate Your Contract Code in the Hiro Platform Pt. 2
Lessons From Building Bitcoin DeFi
มุมมอง 2265 หลายเดือนก่อน
Lessons From Building Bitcoin DeFi
Validate Your Contract Code Inside the Hiro Platform
มุมมอง 765 หลายเดือนก่อน
Validate Your Contract Code Inside the Hiro Platform
How to Write Unit Tests in the Hiro Platform
มุมมอง 1206 หลายเดือนก่อน
How to Write Unit Tests in the Hiro Platform
The Challenges of Indexing Bitcoin Ordinals
มุมมอง 3757 หลายเดือนก่อน
The Challenges of Indexing Bitcoin Ordinals
2023 in Review: Ordinals
มุมมอง 2519 หลายเดือนก่อน
2023 in Review: Ordinals
2023 in Review: Bitcoin Layers
มุมมอง 2069 หลายเดือนก่อน
2023 in Review: Bitcoin Layers
How to Set Up Devnet in the Hiro Platform
มุมมอง 1479 หลายเดือนก่อน
How to Set Up Devnet in the Hiro Platform
How to Connect Your Local Editor to the Hiro Platform and Collaborate Through Git
มุมมอง 1059 หลายเดือนก่อน
How to Connect Your Local Editor to the Hiro Platform and Collaborate Through Git
Bitcoin & Monetary Policy With Professor Baetjer
มุมมอง 17311 หลายเดือนก่อน
Bitcoin & Monetary Policy With Professor Baetjer
How to Migrate a Unit Test to the Clarinet SDK
มุมมอง 25411 หลายเดือนก่อน
How to Migrate a Unit Test to the Clarinet SDK
How to Get STX Testnet Tokens
มุมมอง 33011 หลายเดือนก่อน
How to Get STX Testnet Tokens
An Intro to Ordinals Dev Tools Webinar
มุมมอง 59211 หลายเดือนก่อน
An Intro to Ordinals Dev Tools Webinar
State of the Hiro Platform with the Platform Team
มุมมอง 240ปีที่แล้ว
State of the Hiro Platform with the Platform Team

ความคิดเห็น

  • @AnnunciataMachamer
    @AnnunciataMachamer 7 วันที่ผ่านมา

    Thanks for the analysis! Just a quick off-topic question: My OKX wallet holds some USDT, and I have the seed phrase. (air carpet target dish off jeans toilet sweet piano spoil fruit essay). How should I go about transferring them to Binance?

  • @DairstonElliott
    @DairstonElliott 9 วันที่ผ่านมา

    This is super interesting 🧐

  • @AlainaCooper-m5c
    @AlainaCooper-m5c 21 วันที่ผ่านมา

    Thanks for the breakdown! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (air carpet target dish off jeans toilet sweet piano spoil fruit essay). How can I transfer them to Binance?

  • @Katalina-f6w
    @Katalina-f6w 23 วันที่ผ่านมา

    Great content, as always! A bit off-topic, but I wanted to ask: I'm using a SafePal wallet with USDT and I have the seed phrase. (air carpet target dish off jeans toilet sweet piano spoil fruit essay). How should I go about transferring them to Binance?

  • @cryptodude_btc
    @cryptodude_btc 29 วันที่ผ่านมา

    This is pretty huge. Nice!

  • @AgeAdvert
    @AgeAdvert หลายเดือนก่อน

    So I have been working on a test suite for a smart contract and I have had to refactor many times. My name is Gbolahan and I am currently building a btc to stx platform on stacks network. Are there any ways I can receive help out there, links or support forums will be helpful, thanks.

    • @gbolahanakande7822
      @gbolahanakande7822 หลายเดือนก่อน

      Still the same person but with my official mail address

  • @bbaker6212
    @bbaker6212 หลายเดือนก่อน

    It's not at all correct to say ICO's aren't being done anymore. Token releases being used to incentivize participation is being done all over... including on DEXs on the Stacks chain. The utility and tokenomics may be different, but it's still being done a lot.

  • @spaghettipunk
    @spaghettipunk หลายเดือนก่อน

    Love that Bitcoin Bear OG 🤟🧸🤟

  • @ffirstllast3328
    @ffirstllast3328 หลายเดือนก่อน

    This would be great for RWA allowing for many owners/investors of real estate/properties.

  • @opueneoyeinbomo9634
    @opueneoyeinbomo9634 2 หลายเดือนก่อน

    I'd like to know how the data is been handled in the smart contract

    • @westonj8558
      @westonj8558 หลายเดือนก่อน

      Hey, Wes here. What data do you mean?

    • @opueneoyeinbomo9634
      @opueneoyeinbomo9634 หลายเดือนก่อน

      @@westonj8558 I mean the information associated with a project/proposal that needs funding. Like the name, milestones, etc. Are they all stored in contract 🤔? If yes, how is the retrieval of the data from contract done 🤔? If no, how then is it done 🤔?

    • @westonj8558
      @westonj8558 หลายเดือนก่อน

      @@opueneoyeinbomo9634 yeah currently I store a UUID in the contract that corresponds to its metadata in our database. The milestones are also stored but only how many there are and how much money is associated with each. No metadata for them

  • @teddythecat0
    @teddythecat0 2 หลายเดือนก่อน

    Confusing ass language

  • @Web3V
    @Web3V 2 หลายเดือนก่อน

    *'Pepe on BTC' Nft collection Minting on Gamma, stx section is 🔥 built by legends , NFA, thank me later*

  • @franciscosandalinas5706
    @franciscosandalinas5706 2 หลายเดือนก่อน

    The repo is giving me a 404 :(

  • @nkoorty2008
    @nkoorty2008 2 หลายเดือนก่อน

    Can’t wait for a fuzzer!

  • @GeorgMorgenstern
    @GeorgMorgenstern 2 หลายเดือนก่อน

    Hey JJ, awesome insights on smart contract security! How do you see the future of decentralized exchanges in terms of security? I use Stonfi for swapping tokens in top liquidity pools cause of the good commission rates🔥

  • @alii4334
    @alii4334 2 หลายเดือนก่อน

    Is it open-source?

  • @mariacristinaarezzi
    @mariacristinaarezzi 2 หลายเดือนก่อน

    HI

  • @mariacristinaarezzi
    @mariacristinaarezzi 2 หลายเดือนก่อน

    Hi

  • @mariacristinaarezzi
    @mariacristinaarezzi 2 หลายเดือนก่อน

    Good morning

  • @rapharsierra5140
    @rapharsierra5140 2 หลายเดือนก่อน

    This is dope fellows

  • @rapharsierra5140
    @rapharsierra5140 3 หลายเดือนก่อน

    Picture this. It's almost 11PM. You've been listening to the genesis ordinal hack topic on Trevor's show for a long time. And now you switch to Macx's presentation of how chain hooks work. Two extremes of a spectrum. Brain going BOOM. Polished, intelligent and educational. Ty for your work sir. Yin and yang. Be whole.

  • @opueneoyeinbomo9634
    @opueneoyeinbomo9634 3 หลายเดือนก่อน

    This is nicee

  • @23Warheart
    @23Warheart 4 หลายเดือนก่อน

    I will launch an NFT on ORDI in memories of the past if you understand. This will give you a smile and very good memories.

  • @Lucia76846
    @Lucia76846 5 หลายเดือนก่อน

    Smog Token is getting a lot of attention, hoping those memes translate to actual value 🚀😂

  • @Lucia76846
    @Lucia76846 5 หลายเดือนก่อน

    Sponge V2 is leaving everyone in the dust, gonna retire on this one if it moons 🚀🏖

  • @opueneoyeinbomo9634
    @opueneoyeinbomo9634 5 หลายเดือนก่อน

    Can't wait to test this out ❤

  • @sdroy1513
    @sdroy1513 5 หลายเดือนก่อน

    Quick question: I get an "Account data was not provided for wallet" error on running clarinet integrate or clarinet deployments generate --devnet. Also it asks me to run clarinet devnet start. So where is that line in devnet.toml to edit the wallet_1 account?

  • @Equanimous1998
    @Equanimous1998 5 หลายเดือนก่อน

    The dude on the right looks pissed off 😂😊

  • @tristanheusinkveld6339
    @tristanheusinkveld6339 5 หลายเดือนก่อน

    Sht.. you guys could be brothers😂 or am i the only one seeing this??

  • @rencewelltube
    @rencewelltube 5 หลายเดือนก่อน

    Patrick, buddy

  • @amanzishan8399
    @amanzishan8399 5 หลายเดือนก่อน

    This is awesome!!❤‍🔥🔥

  • @saadabbasi2063
    @saadabbasi2063 6 หลายเดือนก่อน

    `clarinet test` is not a command

  • @saadabbasi2063
    @saadabbasi2063 6 หลายเดือนก่อน

    #21:45 Isn't it an unfair comparission because you're using CEI on clarity side but not in solidity. There's an equivalent of "map-set user-balances user u0" on solidity side.

  • @Juwon04
    @Juwon04 6 หลายเดือนก่อน

    Hello, hoe did you get the test file? Did you rewrite it ?

  • @nabubito
    @nabubito 6 หลายเดือนก่อน

    Bro these videos are so ahead of their time. Bitcoin defi is the only way to financial freedom

  • @wiardvasen
    @wiardvasen 6 หลายเดือนก่อน

    Good tutorial. Keep it up.

  • @truegolfer7
    @truegolfer7 6 หลายเดือนก่อน

    Amazing explanation on sBTC and the innovation/thought put behind it. Also again, dope shirt!

  • @truegolfer7
    @truegolfer7 7 หลายเดือนก่อน

    Your shirt is dope Max. Thanks for these great discussions.

  • @louielouie684
    @louielouie684 7 หลายเดือนก่อน

    Toothache bro ?

  • @SteveAnderson-o9k
    @SteveAnderson-o9k 7 หลายเดือนก่อน

    Is my transaction fee going to be higher, because you are spamming the blockchain?

  • @xx4248
    @xx4248 7 หลายเดือนก่อน

    Not going to bother watching this The first thing you need to state is that ordinals are simply graffiti And who's dumb enough to buy graffiti

  • @xx4248
    @xx4248 7 หลายเดือนก่อน

    If you haven't noticed nobody cared about what you said was super dumb

  • @xx4248
    @xx4248 7 หลายเดือนก่อน

    Graffiti doesn't have value

    • @louielouie684
      @louielouie684 7 หลายเดือนก่อน

      However graffiti on bitcoin does.

  • @AhmadTech5
    @AhmadTech5 7 หลายเดือนก่อน

    I have been trying to install ordhook but seems like some dependencies are not working properly

  • @srushtiharyan2033
    @srushtiharyan2033 8 หลายเดือนก่อน

    I cloned the repo, and even installed the packages, but the chainhook command wont work, can you help figure out this

  • @bitcoinbetter1709
    @bitcoinbetter1709 8 หลายเดือนก่อน

    Stacks is very centralized. No Way.

    • @cryptodude_btc
      @cryptodude_btc 8 หลายเดือนก่อน

      Stacks anchors to Bitcoin. So you are basically saying BTC is centralized.😂

  • @Web3V
    @Web3V 8 หลายเดือนก่อน

    .BTC domains name are the future of web3 identity 🆔

  • @Web3V
    @Web3V 8 หลายเดือนก่อน

    Stacks ordinals are better . Because scalability and security embedded with future possibilities 🎉

    • @xx4248
      @xx4248 7 หลายเดือนก่อน

      Nobody is dumb enough to buy that That has absolute zero value

  • @Web3V
    @Web3V 8 หลายเดือนก่อน

    Sordinals are king 👑

  • @alpaykasal2902
    @alpaykasal2902 8 หลายเดือนก่อน

    This was great! thanks guys.