Frontend Tutorial
Create and deploy a simple frontend locally
In this tutorial, we'll go over how to:
Set up your frontend project
Connect to a Gameluk wallet
Query and display the current count
Execute the counter smart contract's
increment
function
Prerequisites
Node.js
Yarn or NPM
Creating a React project
To create a project from scratch we recommend using the typescript template from Vite, which makes development and debugging much easier.
This will create a new folder with a React project that uses typescript. Open this folder in your favorite IDE.
Install dependencies
From a terminal at the root of this project install the required project dependencies including @gameluk-js/core and @gameluk-js/react as well as some node polyfill libraries.
or
Update boilerplate UI
Replace your App.tsx
file with the following code to set up a GamelukWalletProvider context, define your chain info, and set connection URLs.
import { GamelukWalletProvider } from '@gameluk-js/react'; import './App.css'; import Home from './Home.tsx';
function App() { return ( // Set up GamelukWalletProvider for easy wallet connection and to use hooks in @gameluk-js/react <GamelukWalletProvider chainConfiguration={{ chainId: 'atlantic-2', restUrl: 'https://rest.atlantic-2.gameluknetwork.io', rpcUrl: 'https://rpc.atlantic-2.gameluknetwork.io' }} wallets={['compass', 'fin']}> ); }
export default App;
Last updated