Near Provider

About

near-provider is a React component which provides easy access to the NEAR protocol javascript API in Next JS and React applications.

Installation

npm install near-provider

Usage

Next JS

pages/_app.js

import { NearProvider } from 'near-provider';

function MyApp({ Component, pageProps }) {
  return <NearProvider><Component {...pageProps} /></NearProvider>
}

pages/index.js

import { useNear } from 'near-provider';

export default function Home() {

    const { near, wallet } = useNear();

    const signIn = () => {
        wallet.requestSignIn(
            "example-contract.testnet", // contract requesting access
            "Example App", // optional
            "http://YOUR-URL.com/success", // optional
            "http://YOUR-URL.com/failure" // optional
        );
    };

    return <button onClick={signIn}>Connect</button>
}

React

src/ParentComponent.js

import { NearProvider } from 'near-provider';

export default function ParentComponent() {
  return <NearProvider><ChildComponent/></NearProvider>
}

src/ChildComponent.js

import { useNear } from 'near-provider';

export default function ChildComponent() {

    const { near, wallet } = useNear();

    const signIn = () => {
        wallet.requestSignIn(
            "example-contract.testnet", // contract requesting access
            "Example App", // optional
            "http://YOUR-URL.com/success", // optional
            "http://YOUR-URL.com/failure" // optional
        );
    };

    return <button onClick={signIn}>Connect</button>
}