Step 1: Structuring Your Project

Begin by organizing your project files for efficient development.

Directory Setup: Create a structured directory:
src/
components/ - For UI components
contexts/ - For context providers
styles/ - For CSS and styling files
Initialize with Parcel.js: Use Parcel to quickly set up your TypeScript and React environment.

Step 2: Setting Up the HotWalletProvider

Establish a provider to manage wallet operations and user sessions.

Create Context and Provider: In contexts/HotWalletProvider.tsx, implement context to manage login/logout operations, storing the HereWallet instance and user states.

import React, { useCallback, useContext, useEffect, useState } from "react";import { HereWallet } from "@here-wallet/core";interface HotUser {  accounts: { near: string; solana: string; evm: string; ton: string; };}export const HotContext = React.createContext<{  login: () => void;  logout: () => void;  here: HereWallet | null;  user: HotUser | null;}>({ login: () => {}, logout: () => {}, here: null, user: null });export const useHotWallet = () => {  return useContext(HotContext);};export const HotWalletProvider = ({ children }: any) => {  const [here, setHere] = useState<HereWallet | null>(null);  const [user, setUser] = useState<HotUser | null>(null);  useEffect(() => {    const init = async () => {      const here = await HereWallet.connect({        walletId: "herewalletbot/beta",        botId: "HotHack123Bot/hot123",      });      setHere(here);      const isSigned = await here.isSignedIn();      if (isSigned) {        const near = await here.getAccountId();        setUser({ accounts: { near, solana: "", evm: "", ton: "" } });      }    };    init();  }, []);  const login = useCallback(() => {    here?.authenticate().then(accountId => console.log(accountId));  }, [here]);  const logout = useCallback(() => {    here?.signOut();    setUser(null);  }, [here]);  return (    <HotContext.Provider value={{ login, logout, here, user }}>      {children}    </HotContext.Provider>  );};

Step 3: Building the User Interface

Design components to interact with the wallet in components/WalletButton.tsx.

Wallet Button Component:

import React from "react";import { useHotWallet } from "../contexts/HotWalletProvider";const WalletButton = () => {  const { login, logout, user } = useHotWallet();  return (    <div>      {user ? (        <>          <p>Welcome, {user.accounts.near}!</p>          <button onClick={logout}>Logout</button>        </>      ) : (        <button onClick={login}>Connect Hot Wallet</button>      )}    </div>  );};export default WalletButton;

Step 4: Applying Styles

Use CSS to enrich the visual aspects of the app.

Styling: Apply styles within styles/ using Telegram’s theme variables to maintain a consistent look.

Step 5: Enabling Transactions

Integrate transaction functionality.

Transaction Handling: Utilize here?.signAndSendTransaction() for managing NEAR transactions through appropriate context methods or components.

Step 6: Integration and Testing

Ensure all pieces function together harmoniously.

Assemble and Test: Use ngrok to expose your local environment and ensure seamless interaction with your Telegram Bot.

As a reference, The full code of the miniapp could be found at https://github.com/hot-dao/tg-wallet-examples/tree/main/mini_app

Player Details

Near Land