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: Mintbase Wallet Integration in React App

1. Define Mintbase Wallet Setup in layout.tsx:

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

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

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

2. Add Mintbase Wallet Provider:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <MintbaseWalletContextProvider {...MintbaseWalletSetup}>
      <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>
    </MintbaseWalletContextProvider>
  );
}

3. Utilize the Mintbase Wallet Features in Code:

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

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

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

  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 Mintbase 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 MintbaseWalletContextProvider:

  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 MintbaseWalletSetup = {
		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