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:
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
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"> {/* Use the appropriate chain ID */}
{/* Your app components */}
</Shield3Provider>
);
}
export default App;
2. Use useShield3Context
to access the SDK functionality
useShield3Context
to access the SDK functionalityAnywhere 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.
Updated 6 months ago