zkshield v0.3.353

ZK Shield (soon to be zkonnect)

Introduction

ZK Shield 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.

Installation

Install zkshield via npm or your favorite package manager

npm i zkshield

yarn add zkshield

pnpm add zkshield

Usage

Add zkshield to your component or page, and that's it your zkApp will automatically attempt to connect to an available and supported browser wallet. Currently only Auro Wallet is supported, with a bundled local blockchain wallet on the way. Of course you can always write your own wallet provider!

import React from 'react';
import { ZkShield } from 'zkshield';
import ConnectedComponent from '@/components/ConnectedComponent';

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

Use the data from the connected wallet in your wrapped components

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

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;

Additional components (Coming Soon)

• Choose network dropdown - place it anywhere on your page, it will hide itself after connected... can it be hidden?
• Connect button - initiates the connection to a wallet and hides itself after ... can it be hidden?

Demo

You can see a simple demo of the available features at zkonnect.onrender.com

Props and configuration

ZK Shield offers a number of props that can be set to customize your experience.

SDK Methods

ZK Shield makes some methods available to interact with the wallet component programmatically. This will allow you to decouple the wallet connection code from the contract interaction.

• window.zkshield.launch() - initiate a connection to a wallet when autoLaunch is set to false
• window.zkshield.getSupportedNetworks() - coming soon
• window.zkshield.chooseNetwork(network) - coming soon
• window.zkshield.sendZkTransaction() - coming soon
• window.zkshield.signTransaction(message) - coming soon
• window.zkshield.onAccountChanged - ?

Writing a new Wallet Provider

(Work in progress, has bugs) Currently only Auro Wallet is supported, a custom Local Blockchain wallet will be bundled in a future release to support interacting with the local blockchain from a zkApp. To write a new wallet provider you have to implement IWalletProvider and pass an instance as a prop to ZK Shield.

import { IWalletProvider, ChainSelectedResult, SignedMessageResult, WalletConnectResult, WalletTransactionResult } from "zkshield";
export class AwesomeWalletProvider implements IWalletProvider {
   
    name: string = "Awesome Wallet";
    description: string = "An awesome wallet to behold.";

    hasWallet(): boolean {
        throw new Error("Method not implemented.");
    }
    connect(): Promise<WalletConnectResult> {
        throw new Error("Method not implemented.");
    }
    sendZkTransaction(json: string, fee: number, memo: string): Promise<WalletTransactionResult> {
        throw new Error("Method not implemented.");
    }
    signMessage(message: string): Promise<SignedMessageResult> {
        throw new Error("Method not implemented.");
    }
    selectChain(chainID: string): Promise<ChainSelectedResult> {
        throw new Error("Method not implemented.");
    }
}

Pass an instance of AwesomeWalletProvider to ZK Shield and you're off!

import React from 'react';
import { AwesomeWalletProvider } from '@/modules/AwesomeWalletProvider.js';

export default function Home() {

  	const provider = new AwesomeWalletProvider();
    return (
        <>
            <ZkShield minaWalletProvider={provider}>
                // Child components...
            </ZkShield>
        </>);
}