React

Note: The package has not been published, please contact us or fill out this form for access

Built upon our core JavaScript package, the React SDK is tailored for projects leveraging React's dynamic ecosystem. Featuring an intuitive hook, it simplifies integration into existing React applications, particularly within bridging components. This wrapper aims to streamline the inclusion of insurance functionalities, making it an effortless addition to your React-based projects.

Installation

npm

npm install @web3shield/insurance-react

yarn

yarn add @web3shield/insurance-react

Basic Implementation

Provider Setup

...

import { Web3ShieldProvider } from "@web3shield/insurance-react";

...

root.render(
    <React.StrictMode>
        <Web3ShieldProvider
            apiKey={process.env.REACT_APP_W3S_API_KEY}
            logs={process.env.REACT_APP_W3S_LOGS}
            environment={process.env.REACT_APP_W3S_ENVIRONMENT}
        >
            <App />
        </Web3ShieldProvider>
    </React.StrictMode>
);

Hook Setup

...

import { useInsurance } from '@web3shield/insruance-react';

...

const ExampleBridgeComponent: React.FC = () => {
    // Example parameters, should ideally be dynamic states
    const user = '0xuserAddress';
    const amount = 100;
    const source = 'source_chain_id';
    const destination = 'destination_chain_id';
    const sourceToken = '0xsourceTokenAddress';
    const destinationToken = '0xdestinationTokenAddress';
    
    const { premium, premiumValue, status, message, timeLeft, error, refetch } 
        = useInsurance(user,amount,source,destination,sourceToken,destinationToken);
        
    return(
        <div>
           
        </div>
    )
}

Types

Web3ShieldProvider

Prop	Type	Description
apiKey	string	Web3Shield Project API Key
logs	boolean	Enable or disable logs, false by default
environment	mainnet | testnet | local	Select which Web3Shield environment to operate in, local by default

useInsurance()

Parameter	Type	Description
user	string	Address of the user opting in for insurance
amount	string | number | BigNumber	Amount of sourceToken being bridged
source	string	Chain ID of the source chain
destination	string	Chain ID of the destination chain
sourceToken	string	Address of the source token
destinationToken	string	Address of the destination token

Return Value	Type	Description
message	string	Relevant success/error message
premium	float	Premium amount to be paid to cover amount of sourceToken
premiumValue	float	Value of premium in USD
minimumPremium	float	Minimum premium amount to be paid (in USD)
timeLeft	number	Time left until insurance expires
refetch	function	Manually trigger the refetching of insurance data

Signing Implementation

Coming Soon

ethers.js

...

import { useInsurance } from '@web3shield/insurance-react';

...

const provider = new ethers.providers.Web3Provider(window.ethereum);

...

const ExampleBridgeComponent: React.FC = () => {
    // Example parameters, should ideally be dynamic states
    const user = '0xuserAddress';
    const amount = 100;
    const source = 'source_chain_id';
    const destination = 'destination_chain_id';
    const sourceToken = '0xsourceTokenAddress';
    const destinationToken = '0xdestinationTokenAddress';
    
    const { unsignedTransaction } = useInsurance(user, amount, source, destination, sourceToken, destinationToken);

...

  return (
    <div>
      <button onCLick = {async () => {
          await provider.sendTransaction({
              to:unsignedTransaction.to,
              data:unsignedTransaction.data
          })
      }}>
       Bridge with Insurance
      <button />
    </div>
  );
};

web3.js

...

import { useInsurance } from '@web3shield/insurance-react';

...

const provider = new Web3(window.ethereum);

...

const ExampleBridgeComponent: React.FC = () => {
    // Example parameters, should ideally be dynamic states
    const user = '0xuserAddress';
    const amount = 100;
    const source = 'source_chain_id';
    const destination = 'destination_chain_id';
    const sourceToken = '0xsourceTokenAddress';
    const destinationToken = '0xdestinationTokenAddress';
    
    const { unsignedTransaction } = useInsurance(user, amount, source, destination, sourceToken, destinationToken);

...

  return (
    <div>
      <button onCLick = {async () => {
          await provider.eth.sendTransaction(unsignedTransaction);
      }}>
       Bridge with Insurance
      <button />
    </div>
  );
};