Function.KeybanProvider

function KeybanProvider(props: KeybanProviderProps): Element

Provider component for the Keyban SDK. This component wraps the application and provides Keyban SDK functionalities to the components within the application. It is responsible for configuring the Keyban client with the appropriate options and ensuring that the SDK is accessible via the useKeybanClient hook.

The configuration options for the Keyban SDK are specified via the KeybanClientConfig type, which includes settings such as the API URL, blockchain network (chain), signing algorithm (signer), and storage mechanism (storage).

The provider supports dynamic updates to certain configuration options, such as chain, allowing components to adjust the blockchain network or other configurations during the application's lifecycle.

Additionally, the clientShareKeyProvider prop allows for the injection of a shared key provider function. This function is used to cipher the client's share of the end user and is stored securely within Keyban's infrastructure. By utilizing this, Keyban as the server and client share cannot sign operations on behalf of the end users. We recommend providing a unique key per client share to enhance security.

Parameters

Parameter	Type	Description
props	KeybanProviderProps	The Keyban provider configuration options.

Returns

Element

The provider component wrapping the children components.

Throws

If the configuration is invalid.

See

• KeybanClientConfig for the available configuration options.
• clientShareKeyProvider for managing shared keys in client-side operations.

Example

import React from "react";
import { KeybanProvider, KeybanChain } from "@keyban/sdk-react";

const App: React.FC = () => {
  // Function to provide the access token.
  // You can implement logic here to retrieve the token from a secure source,
  // such as environment variables, a secure vault, or an authentication service.
  const getAccessToken = () => {
    // Example: Retrieve the access token from environment variables
    return process.env.REACT_APP_KEYBAN_ACCESS_TOKEN || "your-access-token";
  };

  // Function to provide the shared key for client-side operations.
  // This key is used to cipher the client's share of the end user and is stored securely in Keyban's infrastructure.
  // By managing the key this way, Keyban as the server and client share will not be able to sign operations on behalf of the end users.
  // We recommend providing a unique key per client share to enhance security.
  const clientShareKeyProvider = async () => {
    // Logic to retrieve or generate the shared key
    return "your-unique-shared-key";
  };

  return (
    <KeybanProvider
      apiUrl="https://api.keyban.io" // Base URL for Keyban API
      appId="your-app-id" // Your unique application ID from Keyban
      chain={KeybanChain.KeybanTestnet} // Specify the blockchain network (e.g., Testnet or Mainnet)
      accessTokenProvider={getAccessToken} // Function that provides the access token
      clientShareKeyProvider={clientShareKeyProvider} // Function that provides the shared key
    >
      <YourMainComponent />
    </KeybanProvider>
  );
};

export default App;