Account dropdown menu

The account dropdown menu is displayed on the right side of the CSPR.click top bar after the user connects a wallet. CSPR.click always includes the session actions needed to switch account and sign out. You can add prebuilt menu items and custom application actions before those session actions.

Account dropdown menu setup

Configure the account dropdown menu with the accountMenuItems property in window.clickUIOptions. The array can contain prebuilt item literals and custom menu item objects.

import type {
  ClickUIOptions,
  CustomMenuItem,
} from '@make-software/csprclick-core-types/clickui';

const csprClickDocsMenuItem = {
  label: 'CSPR.click docs',
  icon: './csprclick-icon.svg',
  badge: { title: 'New', variation: 'green' },
  onClick: () => {
    window.open('https://docs.cspr.click', '_blank');
  },
} as CustomMenuItem;

window.clickUIOptions = {
  uiContainer: 'csprclick-ui',
  rootAppElement: '#root',
  show1ClickModal: true,
  showTopBar: true,
  accountMenuItems: [
    'AccountCardMenuItem',
    'CopyHashMenuItem',
    csprClickDocsMenuItem,
    'BuyCSPRMenuItem',
  ],
  defaultTheme: 'light',
} as ClickUIOptions;

Prebuilt menu items

CSPR.click provides these prebuilt account menu item literals:

Literal	Description
AccountCardMenuItem	Displays account information, including account name, public key, and balance.
CopyHashMenuItem	Copies the connected account hash to the clipboard.
BuyCSPRMenuItem	Opens the Topper by Uphold widget in a new tab.

Account card

Add AccountCardMenuItem to render a card with connected account information at the top of the dropdown menu. The card includes the account name, public key, and balances.

accountMenuItems: ['AccountCardMenuItem']

Copy public key

Add CopyHashMenuItem to render a menu item that copies the connected account hash to the clipboard.

accountMenuItems: ['CopyHashMenuItem']

Buy CSPR

Add BuyCSPRMenuItem to render a menu item that opens the Topper by Uphold widget in a new tab. This lets users top up their account with a card payment.

accountMenuItems: ['BuyCSPRMenuItem']

Custom menu item

Use a custom menu item object when you want to add an application-specific action. A custom item has a label, an icon, and an onClick handler. You can also add a small badge next to the label.

const csprClickDocsMenuItem = {
  label: 'CSPR.click docs',
  icon: './csprclick-icon.svg',
  badge: { title: 'New', variation: 'green' },
  onClick: () => {
    window.open('https://docs.cspr.click', '_blank');
  },
} as CustomMenuItem;

Valid badge variation values are green, blue, violet, and gray.