Junodocs
  • Juno
    • Intro
    • Home of CosmWasm
    • Contributors - Core Software
    • Brand Identity
    • Security Disclosures
    • Economic Overview
      • Disclaimer
      • Native Asset (JUNO)
      • Incentive structure
      • Supply API - Data
  • Developer Guides
    • CosmWasm Contracts
      • Compile a Contract
      • Deploy a Contract
      • Query A Contract
      • Send Tokens to a Contract
    • Miscellaneous
      • Conversions
      • Multi Message Transaction
      • Get & Decode Transactions
      • Get Token Prices
      • Get Account Transactions
      • IBC Transfer
      • State Export / Airdrop
      • Frontend UI tutorial
        • Wallet usage
        • Contract integration
    • Juno Modules
      • FeeShare
      • TokenFactory
    • API Endpoints
      • Cosmos
        • Tx
          • V1beta1
            • Simulate
            • Txs
              • Block
        • Params
          • V1beta1
            • Params
        • Bank
          • V1beta1
            • Balances
              • By denom
            • Denoms metadata
            • Params
            • Spendable balances
            • Supply
        • Upgrade
          • V1beta1
            • Applied plan
            • Current plan
            • Module versions
            • Upgraded consensus state
        • Auth
          • V1beta1
            • Accounts
            • Module accounts
            • Params
        • Staking
          • V1beta1
            • Delegations
            • Historical info
            • Params
            • Pool
            • Validators
              • Delegations
                • Unbonding delegation
              • Unbonding delegations
            • Delegators
              • Redelegations
              • Unbonding delegations
              • Validators
        • Evidence
          • V1beta1
            • Evidence
        • Mint
          • V1beta1
            • Annual provisions
            • Inflation
            • Params
        • Feegrant
          • V1beta1
            • Allowance
            • Allowances
            • Issued
        • Gov
          • V1beta1
            • Params
            • Proposals
              • Deposits
              • Tally
              • Votes
        • Distribution
          • V1beta1
            • Community pool
            • Params
            • Delegators
              • Rewards
              • Validators
              • Withdraw address
            • Validators
              • Commission
              • Outstanding rewards
              • Slashes
        • Slashing
          • V1beta1
            • Params
            • Signing infos
        • Authz
          • V1beta1
            • Grants
              • Grantee
              • Granter
        • Base
          • Tendermint
            • V1beta1
              • Blocks
                • Latest
              • Node info
              • Syncing
              • Validatorsets
                • Latest
          • Node
            • V1beta1
              • Config
      • Cosmwasm
        • Wasm
          • V1
            • Code
              • Contracts
            • Contract
              • History
              • Raw
              • Smart
              • State
            • Codes
              • Params
              • Pinned
            • Contracts
              • Creator
      • Juno
        • Feeshare
          • V1
            • Fee shares
            • Params
        • Tokenfactory
          • V1beta1
            • Denoms from creator
            • Params
            • Denoms
              • Authority metadata
      • Ibc
        • Apps
          • Router
            • V1
              • Params
      • API Specification
    • Junod Local Dev Setup
  • Governance
    • Before submitting a proposal
    • Submitting a Proposal (CLI)
      • Formatting Proposal Markdown
  • Command-Line Interface (CLI)
    • Introduction
    • Useful CLI Commands
    • Module Reference
      • bank
      • distribution
      • gov
      • keys
      • params
      • slashing
      • staking
      • status
      • tendermint
      • upgrade
      • wasm
  • Nodes & Validators
    • Junod Installation and setup
    • Setting up Cosmovisor
    • Mainnet Setup and Tooling
    • Joining Mainnet
      • Sync from Snapshot
      • Sync with state-sync
      • Mainnet Upgrades
    • Joining Testnet
    • Relaying
    • Official Delegations Handbook
Powered by GitBook
On this page
  1. Developer Guides
  2. Miscellaneous

Frontend UI tutorial

PreviousState Export / AirdropNextWallet usage

Last updated 1 year ago

This tutorial will guide you through the process of implementing the frontend for your contracts. It relies on the following libraries:

  • React: A library for building user interfaces.

  • React-query: Used for making RPC queries and caching data.

  • Recoil.js: A state management library for managing application state.

  • Chakra UI: A UI kit that provides pre-styled components for building user interfaces.

The reason for choosing these libraries is that they work seamlessly with Cosmos-related libraries such as ts-codegen, which generates types and queries from contracts, and CosmosKit, which facilitates integration with wallets.

The code used in this tutorial is available on GitHub at the following repository: .

https://github.com/topmonks/juno-dapp-tutorial