Button

The ConnectButton component offers a pre-styled and recognizable button for initiating the DID Connect authentication process. It simplifies creating a consistent user experience for your application's login flow. The button is styled with the official DID Connect branding, including the logo and color scheme, providing a clear call-to-action for users.

Import

To use the button, import it from the library's Button module.

import ConnectButton from '@arcblock/did-connect-react/lib/Button';

Basic Usage

The most common use case is to pair the ConnectButton with the useConnect hook. The onClick prop of the button can be directly mapped to the open function returned by the hook to trigger the connection modal.

Basic Usage

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function MyLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open} />
  );
}

By default, the button renders with the text "Continue With" followed by the DID Connect logo.

Customization

You can easily customize the button's appearance and behavior.

Custom Text

To change the default text, simply pass your desired content as children to the component.

Customizing Button Text

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function CustomLoginComponent() {
  const { open } = useConnect();

  return (
    <ConnectButton onClick={open}>
      Login with DID Wallet
    </ConnectButton>
  );
}

Additional Props

The ConnectButton is a wrapper around the @arcblock/ux/lib/Button component (which is based on Material-UI's Button) and accepts all of its standard props. This allows for extensive customization, such as disabling the button, making it full-width, or applying custom styles with the sx prop.

Passing Additional Props

import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';

export default function DisabledButtonComponent() {
  const { open } = useConnect();

  // Example: disable the button while a process is running
  const isLoading = true;

  return (
    <ConnectButton
      onClick={open}
      disabled={isLoading}
      fullWidth
      sx={{ mt: 2, mb: 2 }}
    >
      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
    </ConnectButton>
  );
}

Props

Next Steps

Now that you know how to add a ConnectButton, the next logical step is to understand the hook that powers its functionality.