Skip to content

Latest commit

 

History

History

starter-next

README.md

Next Wallet Starter

cover_image

Effortless Onboarding: Jumpstart Your Web3 Journey with Ultra-Easy NEAR Wallet Integration. An empty canvas with nothing but a NEAR wallet connection. Use this project to bootstrap your dapp ideas and make progress as fast as possible!

Getting Started

Welcome to the NEAR ecosystem—an exciting space where development meets innovation. If you're new, we've got the essentials to kickstart your journey. For those familiar with the tools, feel free to skip ahead to the project walkthrough

Demo

Deploy

Tooling:

Use Case

Tools

Framework

Author:

Author Organization

Project Walkthrough

This simple starter project uses @mintbase-js/react to easily add wallet connection functionality to your web3 application. It provides a solid foundation for building decentralized applications and allows you to quickly get started with your dapp ideas.

Step-by-Step Guide: Bitte Wallet Integration in React App

1. Define Bitte Wallet Setup in layout.tsx:

In the layout.tsx file, the Bitte Wallet setup is defined using the BitteWalletContextProvider from the @mintbase-js/react library.

import { BitteWalletContextProvider } from "@mintbase-js/react";
import "@near-wallet-selector/modal-ui/styles.css";

// Bitte Wallet setup configuration
const BitteWalletSetup = {
  contractAddress: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
  network: process.env.NEXT_PUBLIC_NETWORK,
  callbackUrl: process.env.NEXT_PUBLIC_CALLBACK_URL,
};

2. Add Bitte Wallet Provider:

Ensure to include the BitteWalletContextProvider with the provided setup in the root layout of your application.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <BitteWalletContextProvider {...BitteWalletSetup}>
      <html lang="en">
        <body className={inter.className}>
          <div className="flex flex-1 flex-col min-h-screen text-gray-500 gradient w-full  h-full flex justify-center items-center bold text-white">
            {children}
          </div>
        </body>
      </html>
    </BitteWalletContextProvider>
  );
}

3. Utilize the Bitte Wallet Features in Code:

In your code, you can use the useBitteWallet hook to access Bitte wallet features such as connecting or signing out.

import { useBitteWallet } from "@mintbase-js/react";

export const NearWalletConnector = () => {
  const { isConnected, selector, connect, activeAccountId } = useBitteWallet();

  const handleSignout = async () => {
    const wallet = await selector.wallet();
    return wallet.signOut();
  };

  const handleSignIn = async () => {
    return connect();
  };

  if (!isConnected) {
    return (
      <button
        className="bg-white text-black rounded p-3 hover:bg-[#e1e1e1]"
        onClick={handleSignIn}
      >
        Connect To NEAR
      </button>
    );
  }

  return (
    <div>
      <p>You are connected as {activeAccountId}</p>
      <div className="flex justify-center items-center mt-4">
        <button
          className="bg-white text-black rounded p-3 hover:bg-[#e1e1e1]"
          onClick={handleSignout}
        >
          Disconnect
        </button>
      </div>
    </div>
  );
};

NOTE: As a standard on Bitte as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.

Setup

First run install

npm install

yarn

# or

pnpm install

Setup

ENV Variables

you can change the values on the starter-next/.env.example to the ones that suits you.

NOTE: the env variables need to have the NEXT_PUBLIC_ on the variable name due to be available for the browser to process

on the file .env.example , you can change / or add the env variables according to the properties of the BitteWalletContextProvider:

	NEXT_PUBLIC_NETWORK="testnet"

	NEXT_PUBLIC_CONTRACT_ADDRESS="hellovirtualworld.mintspace2.testnet"

	NEXT_PUBLIC_CALLBACK_URL="http://localhost:3000"

on the file starter-next/src/app/layout.tsx , theres this const:

const BitteWalletSetup = {
  contractAddress: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
  network: process.env.NEXT_PUBLIC_NETWORK,
  callbackUrl: process.env.NEXT_PUBLIC_CALLBACK_URL,
};

Running

for development env just run:


 pnpm run dev

Get in touch

detail_image