Connect Reference

These interfaces are exported by @dexterai/connect@0.31.2. Start with Add Dexter Sign-In for the React example.

Connection Hook

Import useDexterConnection from @dexterai/connect/react.

An intent selects the control's permission model. Agent spending still requires an authorized grant.

connect() and useAnotherDexterWallet() run a new passkey connection. When continuing an action for a known account, use connect({ userHandle }). It requests the saved credential when available and verifies that the returned account matches. On a browser without that saved credential, the operating system shows its passkey picker; the same account check still applies. retry() repeats relationship verification. disconnectDexter() clears the browser connection and invokes your session clearer while retaining the device passkey.

removeFromThisDevice() changes the device's wallet roster and may prune its passkey. It requires the exported REMOVE_DEXTER_FROM_DEVICE_CONFIRMATION value; put it behind a separate user confirmation.

Account Panel

DexterAccountControl renders the account mark and menu using your existing useDexterConnection instance:

<DexterAccountControl
  connection={dx}
  navigation={{
    activity: { href: '/activity' },
    support: { href: '/support' },
  }}
  items={[
    { id: 'projects', label: 'Your projects', href: '/projects', requires: 'account' },
  ]}
/>

The panel includes sign-in, account creation, portfolio value, Send and Receive, account navigation, switching and disconnecting. Private app links appear only when the connection grants the required access. Device removal belongs in account management and is absent from this menu.

The account name opens the wallet's Money view. Beneath it, a copy control uses the selected account's receive address and confirms when the clipboard accepts it. Both controls remain available with a custom renderSummary; the name link follows navigation.money.

Default account destinations open Dexter with the selected account attached. Dexter checks that account before opening the destination. The default balance reader uses the account's receive address; walletAddress is the control account and must not be used for that comparison. The panel reads a balance while open and offers a refresh control.

The panel inherits the surrounding font. Set --dx-account-font to override it. Keep a visible focus treatment and allow room for the panel at narrow widths.

Returned Identity

A successful connection returns a SignInResult containing all three fields:

The account session and wallet proof are credentials. Store them through the appropriate session adapter and SDK store, and exclude them from analytics.

Use receiveAddress for deposits once available. The Vault PDA and Swig state address have different roles.

Hosted Authorization

The default transport: 'auto' runs inline on dexter.cash and opens a hosted popup on other origins. popup always requests the hosted flow. inline is for Dexter's own origin.

Leave apiBase unset. The package accepts only its canonical https://api.dexter.cash value. The hosted flow checks its origin and request binding.

Create an Account

CreateWalletPanel renders the SDK's creation flow. The shared account panel includes this flow and then offers to finish signing in to your app.

'use client';

import { useState } from 'react';
import { CreateWalletPanel } from '@dexterai/connect/react';

export function CreateDexterWallet() {
  const [message, setMessage] = useState('');
  return (
    <section aria-label="Create a Dexter account">
      <CreateWalletPanel
        terminology="account"
        onCreated={() => setMessage('Account created. You can now sign in.')}
        onError={() => setMessage('Account creation did not complete. Try again.')}
      />
      <p role="status">{message}</p>
    </section>
  );
}

agentDelegation defaults to deferred. Creation alone does not grant an agent spending authority. Other props include transport, showName, and className.

Button and Theme

DexterButton supports variant (primary, secondary, danger), size (md, sm), block, loading, loadingLabel, disabled, withMark, and standard button attributes. Use size="sm" for compact controls.

Set variables on a containing element to scope your theme. Set both fill colors to the same value for a solid button. Preserve visible keyboard focus and readable contrast.