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

• A supported chrome based wallet extension

  • Compass

  • Fin

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.

yarn create vite my-counter-frontend --template react-ts

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.

yarn && yarn add @gameluk-js/core @gameluk-js/react

or

npm install && npm install @gameluk-js/core @gameluk-js/react

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.

Typescript

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;

Javascript