UI & Layout

Sophon Widget

General Usage

Once a user connects their wallet, you may want to display a navigation component to show the current wallet and connected network. Additionally, you may want to display the user’s profile so they can edit their information, add additional wallets, and more.

The SophonWidget is the parent component that has all these features available in it. If you want to explore sub-components for more granular control, then see SophonConnectButton, SophonUserProfile and the SophonNav components.

If you need to embed the modal directly into your site without the need for button first, then we recommend exploring the SophonEmbeddedWidget instead.

Properties

Name	Type	Description
variant	`'modal' \| 'dropdown'`	The variant name of the widget
label	`ReactNode`	The label of the widget, if not provided, the default label will be used
className	`string`	The CSS class name of the widget, it must exists in the shadow DOM
containerClassName	`string`	The CSS class name of the widget container, it must exists in the shadow DOM

Widget With Modal

This is the default expecience, once clicked the widget will open the login or profile page on a modal in the center of the screen.

"use client";

import { SophonWidget } from "@sophon-labs/account-react";

export default function ExampleComponent() {
  return <SophonWidget variant="modal" label="Login With Modal" />;
}

Custom Widget

You can also customize the widget to your needs, but because we use ShadowDom for ui isolation, you need to override the css in the provider. This is useful if you want to match the design of your site. Out of the box, you can use the partner-custom-button class to override the styles of the button.

"use client";

import { SophonWidget } from "@sophon-labs/account-react";
import { RabbitIcon } from "lucide-react";

export default function ExampleComponent() {
  const customComponent = (
    <span
      style={{
        display: "flex",
        alignItems: "center",
        gap: "10px",
      }}
    >
      <RabbitIcon /> Custom Component
    </span>
  );

  return (
    <SophonWidget
      variant="modal"
      className="partner-custom-button"
      label={customComponent}
    />
  );
}