Skip to main content

KeybanProvider

function KeybanProvider(__namedParameters): 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.

Parameters​

• __namedParameters: KeybanProviderProps

Returns​

Element

The provider component that includes the Keyban client context.

Throws​

If the configuration is invalid.

See​

KeybanClientConfig for the available configuration options.

Example​

import { KeybanProvider, KeybanChain, KeybanSigner, KeybanLocalStorage } from "@keyban/sdk-react";
import { useState } from 'react';
import { AppRouter } from './AppRouter';

// A component to allow the user to select the blockchain network (chain)
const ChainSelector: React.FC<{ onSelectChain: (chain: KeybanChain) => void }> = ({ onSelectChain }) => {
  return (
    <div>
      <button onClick={() => onSelectChain(KeybanChain.KeybanTestnet)}>Switch to Testnet</button>
      <button onClick={() => onSelectChain(KeybanChain.Sepolia)}>Switch to Sepolian the Ethereum Testnet</button>
    </div>
  );
};

const App: React.FC = () => {
  const [chain, setChain] = useState<KeybanChain>(KeybanChain.KeybanTestnet);

  // Function to handle changes in the selected blockchain network
  const handleChainSelect = (newChain: KeybanChain) => {
    setChain(newChain);
  };

  return (
    <>
      <ChainSelector onSelectChain={handleChainSelect} />
      <KeybanProvider
        chain={chain}
        storage={KeybanLocalStorage}
      >
        <AppRouter />  // The application router component
      </KeybanProvider>
    </>
  );
};

In this example:

  • The blockchain network (chain) can be dynamically updated using the handleChainSelect function.
  • The ChainSelector component is responsible for triggering updates to the chain configuration, and it is placed outside the KeybanProvider to ensure proper re-initialization of the provider.

Defined in​

packages/sdk-react/src/provider.tsx:84