@pacrypto55/wallet-menu

Shared host for the "Privy Wallet" dropdown button used by @pacrypto55/privy-onramp and @pacrypto55/privy-2fa on Orderly Network DEXes.

You normally don't need to install this directly — both feature plugins depend on it and register it automatically. It exists as a separate package so the button renders exactly once no matter which combination of feature plugins is installed, instead of each one shipping its own competing button.

Why this exists

Orderly's plugin system lets any number of plugins target the same UI slot, each wrapping the previous one (an "onion" chain). If privy-onramp and privy-2fa each rendered their own top-level button, installing both would show two. Instead, they each add a row into this package's single dropdown:

• This package renders the "Privy Wallet" button and an empty dropdown.
• Each feature plugin (privy-onramp, privy-2fa) injects one row into that dropdown via registerWalletMenuItem().
• The button only appears once a wallet is connected, and only if at least it's registered — installing zero feature plugins means nothing renders at all.

Both feature plugins call this package's registerWalletMenuPlugin() internally as part of their own registration, so installing just one of them is enough. If more than one thing ends up registering the host (e.g. you install both privy-onramp and privy-2fa, or you also register it explicitly yourself), only the first-mounted button instance actually renders — the rest self-suppress, so you never see duplicates.

Install

You only need this directly if you're building your own feature plugin that should add a row to the same menu.

npm install @pacrypto55/wallet-menu

Peer dependencies: react, react-dom, @privy-io/react-auth, @orderly.network/plugin-core, @orderly.network/ui, @orderly.network/ui-scaffold.

Usage

As a DEX operator

Nothing to do — just install @pacrypto55/privy-onramp and/or @pacrypto55/privy-2fa and register them. This package comes along automatically.

import { registerPrivyOnrampPlugin } from "@pacrypto55/privy-onramp";
import { registerPrivy2faPlugin } from "@pacrypto55/privy-2fa";

<OrderlyAppProvider
  plugins={[registerPrivyOnrampPlugin(), registerPrivy2faPlugin()]}
  // ...
>
  {/* your app */}
</OrderlyAppProvider>;

As a feature-plugin author

import { registerWalletMenuItem, registerWalletMenuPlugin } from "@pacrypto55/wallet-menu";
import type { PluginRegistrationFn } from "@orderly.network/plugin-core";

function MyRow({ closeMenu }: { closeMenu: () => void }) {
  return <DropdownMenuItem onSelect={() => { closeMenu(); /* ... */ }}>My feature</DropdownMenuItem>;
}

export function registerMyPlugin(): PluginRegistrationFn {
  return (SDK) => {
    registerWalletMenuPlugin()(SDK); // defensive: ensures the host button exists
    SDK.registerPlugin({
      id: "my-plugin",
      name: "My Plugin",
      interceptors: [registerWalletMenuItem(MyRow)],
    });
  };
}

API

registerWalletMenuPlugin(options?)

| Property | Type | Default | Description | |---|---|---|---| | label | string | "Privy Wallet" | Text on the trigger button. | | width | number | 220 | Dropdown panel width in px. |

registerWalletMenuItem(Item)

Registers a WalletMenuItemProps -> ReactNode component as a row in the dropdown. WalletMenuItemProps is { closeMenu: () => void }.

Development

npm install
npm run dev         # tsup --watch
npm run build
npm run typecheck

License

MIT