Connect Buttons and UI

Joey doesn't ship ready-made UI components. Use the building blocks below to add a connect button that matches your design.

#Browser extension

@joeywallet/wallet-sdk/vanilla includes bindConnectButton, which keeps a button in sync with the connection state (install, connect or connected):

import { bindConnectButton, createJoeySession } from '@joeywallet/wallet-sdk/vanilla'

const session = createJoeySession()
bindConnectButton(document.getElementById('connect')!, session, {
  connectLabel: 'Connect Joey',
  installUrl: 'https://joeywallet.xyz/extension',
})

In React, use useJoey() to render your own button. See React and vanilla.

#Mobile (WalletConnect)

wc-client's connect opens the Reown AppKit modal with Joey featured first. For your own button, use generate to get a URI for a QR code and a deep link for phones:

'use client';

import core from '@joey-wallet/wc-client/core';
import { useProvider } from './provider';

export function JoeyButton() {
  const { actions } = useProvider();

  const onClick = async () => {
    const { data, error } = await actions.generate({
      walletId: core.constants.wallets.joey.projectId,
      openModal: false,
    });
    if (error || !data) throw error;

    if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
      window.location.href = data.deeplink; // joey://settings/wc?uri=…
    }
    // On desktop, render data.uri as a QR code
  };

  return <button onClick={onClick}>Connect with Joey</button>;
}

#Brand assets

When you label a button, use the name Joey Wallet (or Joey). For logos, contact joey@joeywallet.xyz.