zkonnect (formally ZK Shield)

Introduction

zkonnect is a simple React component that allows you to quickly and easily integrate your zkApp with a browser based wallet on the Mina Protocol. It provides wrapper component that hides sub-components until it is connected to a wallet. Data about the connected wallet is made available to all sub-components, along with many other features listed below.

• Select a supported network to connect to
• Select a supported wallet to connect to
• Disable connect for quick testing
• Pass connected wallet information to child components
• ...

Installation

Install zkconnect via npm or your favorite package manager

npm i zkonnect

yarn add zkonnect

pnpm add zkonnect

Usage

Add zkconnect to your component or page.

import React from 'react';
import { Zkonnect } from 'zkonnect';
import ConnectedComponent from '@/components/ConnectedComponent';

export default function ParentComponent() {
 
  return (
    <Zkonnect>
 		<ConnectedComponent />
  	</Zkonnect>
  );
}

Use the connected data in your connected components

import React from 'react';
import { AuthContext } from "zkonnect";

const ConnectedComponent = () => {
  const [authState, setAuthState] = useContext(AuthContext);

  return (
    <>
    <div>
      <h1>{authState.userAuthenticated && <> Connected as {authState.userAddress} on network {authState.connectedNetwork} </> }</h1>
    </div>
    </>  );
}
export default ConnectedComponent;

Connect

Auto Connect

Disable Auth

Soon to be deprecated in favor of Auto Connect

Local Blockchain Connect

Coming soon!

Select Network

Select Supported Wallet

Style component

allows you to easily connect your wallet to a zkApp on the Mina blockchain. zkonnect allows you to select the network and the wallet you want to connect with