​

Setup & Configuration

After installing the SDK, you need to initialize it within your dApp. For React applications, this is done by wrapping your entire application with our SecureSignProvider component. This makes the Refract wallet context available to all components and hooks.

​

Wrapping Your App with SecureSignProvider

The SecureSignProvider is the root component that powers the Refract SDK in a React environment. It handles the connection to the Refract Passport, manages wallet state, and provides the necessary context for all other SDK features.

Place it at the top level of your component tree, typically in your main.tsx or App.tsx file.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { SecureSignProvider } from '@refract-network/securesign-sdk/react'; // ::TODO: confirm package
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);

root.render(
  <React.StrictMode>
    <SecureSignProvider
      appId="YOUR_APP_ID" // Paste the appId from the Refract Portal
    >
      <App />
    </SecureSignProvider>
  </React.StrictMode>
);

​

Provider Configuration

The SecureSignProvider accepts the following props:

For Non-React Applications If you are not using React, you can initialize the SDK using the initBridge() function. This function detects the environment and injects the necessary wallet providers into the window object.

Copy

Ask AI

import { initBridge } from '@refract-network/securesign-sdk';

initBridge({ appId: 'YOUR_APP_ID' });

This makes the providers available globally, and you can interact with them using standard libraries like ethers.js or web3.js.

With the provider configured, your dApp is now connected to the Refract Network. You can proceed to use standard web3 hooks and libraries to interact with the user’s wallet.