Shield3 React SDK

The Shield3 React SDK provides a convenient way to integrate Shield3's policy simulation and transaction analysis capabilities into your React applications. By leveraging the Shield3Provider and the useShield3Context hook, developers can easily query policy results for Ethereum transactions, helping to ensure that transactions comply with specified policies before being sent to the network.

Features

Policy Simulation: Simulate transactions against Shield3's policy engine to get immediate feedback on compliance.
Easy Integration: Seamlessly integrates with React applications, providing context and hooks to interact with the Shield3 API.
Customizable: Configure with your own API key and chain ID to connect to the appropriate network.

Installation

To install the Shield3 React SDK, run the following command in your project directory:

npm install @shield3/react-sdk

Usage

To use the Shield3 React SDK in your React application, follow these steps:

1. Wrap your application with `Shield3Provider`

First, import Shield3Provider from the SDK and wrap your application's root component. This requires an apiKey for authenticating with the Shield3 API and a chainId to specify the blockchain network.

import { Shield3Provider } from '@shield3/react-sdk';

function App() {
  return (
    <Shield3Provider apiKey="your_api_key_here" chainId={1}> {/* Use the appropriate chain ID */}
      {/* Your app components */}
    </Shield3Provider>
  );
}

export default App;

2. Use `useShield3Context` to access the SDK functionality

Anywhere in your component tree that is wrapped by Shield3Provider, you can use useShield3Context to access the SDK's functionality. This hook provides access to the shield3Client, which includes the getPolicyResults method for simulating transactions.

import { useShield3Context } from '@shield3/react-sdk';
import { useState } from 'react';

function TransactionSimulator() {
  const { shield3Client } = useShield3Context();
  const [result, setResult] = useState(null);

  const simulateTransaction = async (transaction) => {
    const policyResults = await shield3Client.getPolicyResults(transaction, 'your_account_address');
    setResult(policyResults);
  };

  // Your UI logic here

  return (
    <div>
      {/* Your UI components */}
    </div>
  );
}

export default TransactionSimulator;

3. Simulating Transactions

To simulate a transaction, call getPolicyResults with the transaction object and the sender's address. This method returns policy simulation results, which can be used to determine whether a transaction complies with the set policies.

const transaction = {
  to: '0x...',
  value: '0x...',
  data: '0x...',
  // Other transaction fields
};

simulateTransaction(transaction);

4. Handling Policy Results

The policy results returned by getPolicyResults include the following fields:

decision (string): The decision of the policy engine (e.g., 'Allow', 'Block').
transaction (object): The transaction object that was simulated with granular policy decision results.