React

The React entrypoint exposes a context provider and two hooks. The provider owns one Sigil instance for the lifetime of its mount and tears it down on unmount.

<SigilProvider config={...}>

Wrap the part of your tree that needs wallet access. Conventionally this is your whole app.

import { SigilProvider } from '@sigil/sdk/react';

const config = {
  organizationId: 'org_xxx',
  publishableKey: 'pk_live_xxx',
  iframeUrl: 'https://wallet.sigilkeys.com',
  authMode: 'sigil' as const,
};

export function Root({ children }: { children: React.ReactNode }) {
  return <SigilProvider config={config}>{children}</SigilProvider>;
}

The provider renders the iframe (mounted by the SDK) directly into document.body by default. To mount it inside a specific node, pass iframeContainer in config.

useWallet()

const { address, ready, error } = useWallet();

Field	Type	Meaning
address	string | null	Wallet address, or null if not yet created.
ready	boolean	true after init() succeeded.
error	Error | null	Whatever blew up during init(), or null.

Re-renders only on transitions; subscribing components don’t re-render on every postMessage round-trip.

useSignMessage()

const { signMessage, isLoading } = useSignMessage();

<button
  disabled={isLoading}
  onClick={async () => {
    const sig = await signMessage('hello');
    console.log(sig);
  }}
>
  Sign
</button>

signMessage(message) returns the hex signature. isLoading is true while the iframe is showing the confirmation modal and the user hasn’t yet approved or rejected.

If the user rejects, the promise rejects with a SigilRejectedError.

Full app

import { SigilProvider, useWallet, useSignMessage } from '@sigil/sdk/react';

function App() {
  return (
    <SigilProvider
      config={{
        organizationId: 'org_xxx',
        publishableKey: 'pk_live_xxx',
        iframeUrl: 'https://wallet.sigilkeys.com',
        authMode: 'sigil',
      }}
    >
      <Wallet />
    </SigilProvider>
  );
}

function Wallet() {
  const { address, ready, error } = useWallet();
  const { signMessage, isLoading } = useSignMessage();

  if (error) return <p>error: {error.message}</p>;
  if (!ready) return <p>loading…</p>;

  return (
    <>
      <p>{address}</p>
      <button disabled={isLoading} onClick={() => signMessage('hi')}>
        Sign
      </button>
    </>
  );
}