LogoLogo
  • General
    • 👋Welcome to Kinto
    • 📔Terminology
    • 📃Litepaper
    • 📄One Pager
    • 🔗Links
    • 🤝Partners and Collaborators
    • ❓FAQ
  • User Guides
    • 🌟Sign Up Walkthrough
    • đŸ—ī¸KYC Walkthrough
      • 🔑Synaps Walkthrough
      • 🔑Plaid Walkthrough
    • 📄KYB Walkthrough
    • đŸĒŸPasskeys on Windows Walkthrough
    • Setting up a 1Password Passkey
    • ❔Troubleshooting/Help
    • 💰Kinto Deposits
      • Onramp on Kinto
    • 💸Kinto Withdrawals
      • đŸ—ī¸Recover funds from my Passkey address
      • 🎁Wrapping ETH in your Kinto Wallet
      • Offramp on Kinto
    • Swap on Kinto
    • Lending & Borrowing
    • Hyperliquid
      • Fees
      • Deposits
      • Creating Orders
      • Closing an Order
      • Withdrawals
    • Send to other Kinto Wallets
    • Token Sale Participation
    • Full Account Recovery
    • $K Transfer
      • Withdraw $K
      • Send $K on Kinto
      • Deposit $K
      • Swap $K on Kinto
    • Recover Funds from an X Signer
    • $K Lend and Borrow Market
      • Supply USDC to $K Lending Market
      • Withdraw USDC from $K Lending Market
      • Add $K and Borrow USDC
      • Repay USDC and Withdraw $K
  • Security/KYC/AML
    • 🔑Securing Kinto
    • 📃Security One Pager
    • 🔐Security and Risk Management
    • đŸ›Ąī¸Wallet Insurance
    • âš™ī¸User Owned KYC
    • đŸŗī¸Enabled Countries
    • 🔒Beware of Scams
    • ✅Kinto Validators
    • đŸ¤ēSecurity Council
  • Building on Kinto
    • â„šī¸Network Information
    • 🧱Kinto Rollup Architecture
    • ❕Differences with other rollups
    • 🤖Rollup Features
      • âš™ī¸Create2
      • đŸ”ĨKinto Account Abstraction
      • đŸ›Ąī¸KintoWallet
      • đŸĒĸMusubi - Chain Abstraction
    • đŸ’ģDevelopment guide
      • 1ī¸âƒŖ1ī¸âƒŖ Setup your Deployer EOA
      • 2ī¸âƒŖ2ī¸âƒŖ Environment setup
      • 3ī¸âƒŖ3ī¸âƒŖ Creating your Kinto App
    • â›Šī¸Interacting with your Kinto App
      • 🤖Interacting with contracts
      • 👩‍🏭Create a Web Dapp
    • 📗Smart Contract Reference
      • KintoAppRegistry
      • KintoID
      • KintoWalletFactory
      • Kinto Wallet
      • SponsorPaymaster
      • Kinto EntryPoint
      • KYCViewer
      • Faucet
      • EngenCredits
      • EngenGovernance
    • 🌍Kinto Wallet Web SDK
    • đŸĒRunning kinto nodes
    • âš’ī¸Tools
      • â›ˆī¸Node RPC
      • đŸ—ī¸Build Tools
      • đŸ—ēī¸Block Explorer
      • 🐞Debugging and monitoring
      • 🔮Oracle - Pyth
      • Firewall - Venn
    • 🚀ICO Platform
  • Governance
    • 🧠Introduction to the Kinto DAO
    • 📓Kinto Constitution
    • 📃KIP Proposal Template
    • 🌄Engen Proto-Governance
    • â›Šī¸Kinto Token
      • Information, addresses and links
  • 💧Liquidity Programs
    • đŸ› ī¸Mining Program
    • âšĢEngen - Launch Program
    • đŸĒ™K Token Sale
  • Sakura Mining Season
Powered by GitBook
On this page
  • Overview
  • Clone the Sample App
  • Prerequisites
  • Set Up
  • Customization
  • Development
  1. Building on Kinto
  2. Interacting with your Kinto App

Create a Web Dapp

Clone the sample application to get started.

PreviousInteracting with contractsNextSmart Contract Reference

Last updated 9 months ago

This document provides an overview of how to quickly get started with your dapp by cloning the React SDK sample application.

Overview

The is a JavaScript library designed to interact with Kinto's Ethereum Layer 2 solution, enabling fast and secure transactions. It has been designed to maximize security and speed and it has no dependencies (except typescript) and it does not include any UI or web3 framework. The demonstrates how to integrate and use the Kinto Wallet SDK in a real-world React application, in this case a counter contract that Kinto users can increase.

Clone the Sample App

Prerequisites

Before using the sample app, ensure you have:

  1. Kinto Wallet: Create an account at .

  2. Developer Account: Set up your developer account and application at .

  3. Set the App Address: Use your main contract address as the app address in the app.

Set Up

To get started with the sample app:

  1. Clone the Repository

git clone https://github.com/KintoXYZ/react-sdk-sample
  1. Navigate to the Project Directory

cd react-sdk-sample
  1. Install Dependencies

yarn install
  1. Create the certificate

You need to create a certificate to run the application locally under https

brew install mkcert
mkcert -install
mkcert dev.kinto.xyz localhost 127.0.0.1 ::1

// You should see something like this
The certificate is at "./dev.kinto.xyz+3.pem" and the key at "./dev.kinto.xyz+3-key.pem" ✅
  1. Set up local DNS

Modify your etc/hosts file to set up a local redirection from localhost to dev.kinto.xyz

sudo nano /etc/hosts

// Add the following line and save the file
127.0.0.1       dev.kinto.xyz
  1. Start the Application

yarn start

Customization

The Application should be up and running and you should see something like this:

Development

Change the appAddress

in App.tsx change the counterAddress to your app address.

Now, you can connect your Kinto Wallet to your application and start sending transactions.

Make sure you modify the transaction methods like increaseCounter to fit your custom contract.

â›Šī¸
👩‍🏭
Kinto Wallet SDK
Sample Counter App
Kinto Onboarding
Kinto Developers
You can increase a counter
đŸ§