Injective | Documentation
InjectiveGithub
Injective | Documentation
Injective | Documentation
  • About Injective
  • Getting Started
    • Wallet
      • Create a wallet
      • Accounts
      • Staking
      • Governance
      • Auction
    • Token Standards
      • INJ coin
      • Token Factory
      • CW20 Standard
    • Transactions
      • Gas and Fees
  • Guides
    • Create a Wallet
    • Bridge
      • From Ethereum
      • Using Wormhole
      • Using IBC
      • From Solana
    • Launch a Token
    • Launch a Market
    • Denom Metadata
    • Get INJ
  • Toolkits
    • injectived
      • Install injectived
      • Using injectived
      • Commands
    • Injective TS SDK
    • Injective Go SDK
    • Injective Python SDK
    • Injective CW SDK
    • Injective Rust
    • The Graph
  • References
  • Glossary
  • Developers
    • Getting Started
      • Guides
        • Testnet Proposals
        • Convert addresses
        • Calculations
          • Min Price Tick Size
          • Min Quantity Tick Size
        • Testnet Faucet Integration
    • Exchange Developers
      • Build a DEX
      • Provider Oracle
    • Cosmwasm Developers
      • Your First Smart Contract
      • Guides
        • Local Development
        • Mainnet Deployment
        • Whitelisting deployment address
        • Create your Swap Contract
        • Creating UIs
      • Using Injective Queries and Messages
      • CW20 Adapter
      • Injective Test Tube
    • Modules
      • Injective
        • Auction
          • State
          • Messages
          • EndBlock
          • Events
          • Params
          • Errors
        • Exchange
          • Derivative Markets Concepts
          • Spot Markets Concepts
          • Binary Option Markets Concepts
          • Other Concepts
          • State
          • State Transitions
          • Messages
          • Proposals
          • BeginBlock
          • EndBlock
          • Events
          • Params
          • MsgPrivilegedExecuteContract
          • Errors
        • Insurance
          • State
          • State Transitions
          • Messages
          • EndBlock
          • Events
          • Params
          • Improvements
          • Errors
        • OCR
          • Concepts
          • State
          • Messages
          • Proposals
          • BeginBlock
          • Hooks
          • Events
          • Params
          • Errors
        • Oracle
          • State
          • Keeper
          • Messages
          • Proposals
          • Events
          • Improvements
          • Errors
        • Peggy
          • Definitions
          • Workflow
          • State
          • Messages
          • Slashing
          • EndBlock
          • Events
          • Params
          • Relay Semantics
          • Improvements
          • Errors
        • Permissions
          • Concepts
          • State
          • State Transition
          • Errors
        • TokenFactory
          • Concepts
          • State
          • Messages
          • Events
          • Params
          • Errors
        • WasmX
          • Concepts
          • Data
          • Proposals
          • Messages
          • Params
          • Errors
        • Lanes
        • TxFees
      • Core
        • Auth
        • AuthZ
        • Bank
        • Consensus
        • Crisis
        • Distribution
        • Evidence
        • Feegrant
        • Gov
        • Group
        • Mint
        • NFT
        • Params
        • Slashing
        • Staking
        • Upgrade
        • Circuit
        • Genutils
    • dApps Documentation
  • Nodes
    • Getting Started
      • Interact with a node
      • Running a node
        • Setting up the keyring
        • Join a network
        • Cosmovisor
        • Upgrade your node
    • Validators
      • Mainnet
        • Peggo
        • Canonical Chain Upgrades
          • Upgrade to 10002-rc1
          • Upgrade to 10002-rc2
          • Upgrade to 10003-rc1
          • Upgrade to 10004-rc1
          • Upgrade to 10004-rc1-patch
          • Upgrade to 10005-rc1
          • Upgrade to 10006-rc1
          • Upgrade to 10007-rc1
          • Upgrade to 10008 - Camelot
          • Upgrade to 10009
          • Upgrade to v1.10
          • Upgrade to v1.11
          • Upgrade to v1.12.0 - Volan
          • Upgrade to v1.12.1
          • Upgrade to v1.13.0 - Altaris
          • Upgrade to v1.13.2
          • Upgrade to v1.13.3
          • Upgrade to v1.14.0
          • Upgrade to v1.14.1
          • Upgrade to v1.15.0
      • Testnet
        • Testnet Peggo
    • Public Endpoints
    • Premium Endpoints
    • Injective Indexer Setup
  • Traders
    • Getting Started
    • Documentation
    • API Reference
  • Useful Links
    • Injective 101
    • Injective Hub
    • Injective Explorer
    • Chain API Reference
    • Indexer API Reference
    • Testnet Faucet
Powered by GitBook
On this page
Edit on GitHub
Export as PDF
  1. Developers
  2. Cosmwasm Developers
  3. Guides

Creating UIs

PreviousCreate your Swap ContractNextUsing Injective Queries and Messages

Last updated 7 months ago

More comprehensive docs about creating UIs as well as bootstrapping options can be found on the .

We've interacted with our contract through the Injective CLI, but this is not ideal for most dApp users. A web UI can provide a much better experience! Rather than sending transaction messages through injectived, we can abstract away the complexity and provide the user with two buttons—one to increment the count, and one to reset the count.

For example, see the . A high level guide on developing the frontend using Vue and the can be found in the . For a React implementation, see .

Now, interacting with the contract is as simple as clicking a button and signing with MetaMask (make sure the account is set to Ethereum Goerli Testnet or you will receive a chain ID mismatch error).

You may notice that you get an "Unauthorized" error message when attempting to reset the count. This is expected behavior! Recall from the that only the contract owner is permitted to reset the count. Since you did not instantiate the exact contract that the frontend is interacting with, you don't have the required permissions to reset the count.

contract logic for reset
TypeScript docs
counter website
Injective TS SDK
website repo here
here