👩‍🏭Create a Web Dapp

Clone the sample application to get started.

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

Overview

The Kinto Wallet SDK 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 Sample Counter App 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 Kinto Onboarding.

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

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

2. Navigate to the Project Directory

cd react-sdk-sample

3. Install Dependencies

yarn install

4. 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" ✅

5. 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

6. Start the Application

yarn start

Customization

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

You can increase a counter 🧠

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.