@deloraprotocol/widget-wallet-management

Optional wallet adapters for @deloraprotocol/widget.

Auto-detect provider

Use this LI.FI-style provider when the app already has WagmiProvider and/or WalletProvider from Solana Wallet Adapter above the widget. It auto-detects those contexts and wires Delora to them. If only one namespace is externally managed, Delora falls back to the core built-in wallet flow for the other namespace by default.

import { TradeWidget } from "@deloraprotocol/widget";
import {
  DeloraAutoWalletManagementProvider,
} from "@deloraprotocol/widget-wallet-management/auto";

function WidgetWithAutoWallets() {
  return (
    <DeloraAutoWalletManagementProvider
      evm={{
        walletOptions: [],
        openConnectModal: () => {
          // Open RainbowKit, Dynamic, Reown, or another host wallet UI here.
        },
      }}
      solana={{
        walletOptions: [],
        openConnectModal: () => {
          // Open Solana Wallet Adapter UI here.
        },
      }}
      usePartialWalletManagement
    >
      <TradeWidget config={{ apiUrl: "https://api.delora.build" }} />
    </DeloraAutoWalletManagementProvider>
  );
}

Set forceInternalWalletManagement to bypass detected contexts. Set usePartialWalletManagement={false} if the host wants full responsibility for all wallet namespaces and does not want Delora to fall back to built-in wallets.

Manual provider

import { TradeWidget } from "@deloraprotocol/widget";
import {
  DeloraWalletManagementProvider,
} from "@deloraprotocol/widget-wallet-management/provider";
import {
  useCompositeManagedWallet,
} from "@deloraprotocol/widget-wallet-management/composite";
import {
  useSolanaWalletAdapterManagedWallet,
} from "@deloraprotocol/widget-wallet-management/solana";
import {
  useWagmiManagedWallet,
} from "@deloraprotocol/widget-wallet-management/wagmi";

function WidgetWithHostWallets() {
  const evm = useWagmiManagedWallet({
    walletOptions: [],
    openConnectModal: () => {
      // Open RainbowKit, Dynamic, Reown, or another host wallet UI here.
    },
  });
  const solana = useSolanaWalletAdapterManagedWallet({
    walletOptions: [],
    openConnectModal: () => {
      // Open Solana Wallet Adapter UI here.
    },
  });
  const wallet = useCompositeManagedWallet({ evm, solana });

  return (
    <DeloraWalletManagementProvider wallet={wallet}>
      <TradeWidget config={{ apiUrl: "https://api.delora.build" }} />
    </DeloraWalletManagementProvider>
  );
}

Use subpath imports when installing only one wallet stack. The root package also re-exports every adapter for apps that install both wagmi and @solana/wallet-adapter-react.

Modes

• Host modal: pass walletOptions: [] and openConnectModal. Delora's connect button opens your app's wallet UI and waits until the host wallet state changes.
• Widget picker: omit walletOptions: []. Delora renders curated wallet rows and delegates the selected row to Wagmi or Solana Wallet Adapter.
• Partial wallet management: pass only the namespace adapters the host owns. Delora core keeps built-in wallet management for the remaining namespaces.

The Wagmi adapter hides unknown/service connectors such as Safe or Base Account from the widget picker by default. Pass walletOptionIds for an explicit allow-list, or includeUnknownWalletOptions: true if your app wants to expose custom connectors.

The Solana adapter hides undetected adapters by default. Pass includeUndetectedWallets: true if your app wants installable Solana rows.