@mezo-org/passport 0.15.1-dev.5 → 0.15.1-dev.6

package/dist/src/hooks/useAuthenticateWithWallet.d.ts

@@ -15,11 +15,11 @@ declare function useAuthenticateWithWallet(shouldCreateAccount?: boolean, mutati
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
-    variables: number | void;
+    variables: number | void | undefined;
     error: null;
     isError: false;
     isIdle: false;
@@ -32,12 +32,12 @@ declare function useAuthenticateWithWallet(shouldCreateAccount?: boolean, mutati
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
     error: Error;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: true;
     isIdle: false;
     isPending: false;
@@ -49,12 +49,12 @@ declare function useAuthenticateWithWallet(shouldCreateAccount?: boolean, mutati
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: Session;
     error: null;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: false;
     isIdle: false;
     isPending: false;
@@ -66,8 +66,8 @@ declare function useAuthenticateWithWallet(shouldCreateAccount?: boolean, mutati
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    authenticateWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    authenticateWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 };
 export { useAuthenticateWithWallet };
 //# sourceMappingURL=useAuthenticateWithWallet.d.ts.map

package/dist/src/hooks/useSignInWithWallet.d.ts

@@ -15,11 +15,11 @@ declare function useSignInWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
-    variables: number | void;
+    variables: number | void | undefined;
     error: null;
     isError: false;
     isIdle: false;
@@ -32,12 +32,12 @@ declare function useSignInWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
     error: Error;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: true;
     isIdle: false;
     isPending: false;
@@ -49,12 +49,12 @@ declare function useSignInWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: Session;
     error: null;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: false;
     isIdle: false;
     isPending: false;
@@ -66,8 +66,8 @@ declare function useSignInWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signInWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signInWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 };
 export { useSignInWithWallet };
 //# sourceMappingURL=useSignInWithWallet.d.ts.map

package/dist/src/hooks/useSignUpWithWallet.d.ts

@@ -15,11 +15,11 @@ declare function useSignUpWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
-    variables: number | void;
+    variables: number | void | undefined;
     error: null;
     isError: false;
     isIdle: false;
@@ -32,12 +32,12 @@ declare function useSignUpWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: undefined;
     error: Error;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: true;
     isIdle: false;
     isPending: false;
@@ -49,12 +49,12 @@ declare function useSignUpWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 } | {
     data: Session;
     error: null;
-    variables: number | void;
+    variables: number | void | undefined;
     isError: false;
     isIdle: false;
     isPending: false;
@@ -66,8 +66,8 @@ declare function useSignUpWithWallet(mutationOptions?: Omit<MutationOptions<Sess
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void, unknown>;
-    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void, unknown>;
+    signUpWithWallet: import("@tanstack/react-query").UseMutateFunction<Session, Error, number | void | undefined, unknown>;
+    signUpWithWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Session, Error, number | void | undefined, unknown>;
 };
 export { useSignUpWithWallet };
 //# sourceMappingURL=useSignUpWithWallet.d.ts.map

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components";
 export { defaultConfig, unisatWalletMezoMainnet, unisatWalletMezoTestnet, okxWalletMezoMainnet, okxWalletMezoTestnet, xverseWalletMezoMainnet, xverseWalletMezoTestnet, getDefaultWallets, getConfig, } from "./config";
 export * from "./constants";
 export * from "./hooks";

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/src/index.js

@@ -1,3 +1,4 @@
+export * from "./components";
 export { defaultConfig, unisatWalletMezoMainnet, unisatWalletMezoTestnet, okxWalletMezoMainnet, okxWalletMezoTestnet, xverseWalletMezoMainnet, xverseWalletMezoTestnet, getDefaultWallets, getConfig, } from "./config";
 export * from "./constants";
 export * from "./hooks";

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,GACV,MAAM,UAAU,CAAA;AACjB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.15.1-dev.5",
+  "version": "0.15.1-dev.6",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {
@@ -37,6 +37,7 @@
     "typescript": "^5.4.3"
   },
   "dependencies": {
+    "@mezo-org/mezo-clay": "0.1.0-dev.37",
     "@mezo-org/mezod-contracts": "^1.0.0",
     "@mezo-org/musd-contracts": "^1.0.1",
     "@mezo-org/orangekit": "1.0.0-beta.40-dev.28",

package/src/assets/DefaultAvatar.tsx

@@ -0,0 +1,74 @@
+import { Block, BlockProps } from "@mezo-org/mezo-clay"
+import React, { SVGProps } from "react"
+
+function DefaultAvatar(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 214 214" fill="none" {...props}>
+      <rect y="-0.478027" width="166.379" height="81.7091" fill="#FF004D" />
+      <rect x="166" y="-0.478027" width="48" height="82" fill="black" />
+      <rect
+        x="166.379"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#DFFF80"
+      />
+      <rect
+        x="118.758"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#FF5500"
+      />
+      <rect
+        x="71.1372"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#5A59A7"
+      />
+      <rect
+        x="23.5166"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#47B5FF"
+      />
+      <rect y="81.231" width="23.5165" height="132.291" fill="#A3C238" />
+      <rect
+        x="190.483"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#6E6E70"
+      />
+      <rect
+        x="142.863"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#0A3C01"
+      />
+      <rect
+        x="95.2417"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#F2A91F"
+      />
+      <rect
+        x="47.6211"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#6B3D01"
+      />
+    </svg>
+  )
+}
+
+function DefaultAvatarComponent(props: BlockProps) {
+  return <Block as={DefaultAvatar} {...props} />
+}
+
+export default DefaultAvatarComponent

package/src/components/Dropdown/ConnectedTrigger.tsx

@@ -0,0 +1,76 @@
+import { Block, Button, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef, ReactNode, useMemo } from "react"
+
+type ConnectedTriggerProps = Omit<ButtonProps, "children" | "size"> & {
+  avatar: ReactNode
+  size?: "medium" | "large"
+}
+
+const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
+  (props, ref) => {
+    const { onClick, avatar, size = "medium", ...restProps } = props
+
+    const [, theme] = useStyletron()
+
+    const avatarSize = useMemo(() => {
+      const sizeMap = {
+        medium: theme.sizing.scale950,
+        large: theme.sizing.scale1400,
+      }
+
+      return sizeMap[size]
+    }, [theme, size])
+
+    const buttonPadding = useMemo(() => {
+      const paddingMap = {
+        medium: theme.sizing.scale0,
+        large: theme.sizing.scale100,
+      }
+
+      return paddingMap[size]
+    }, [theme, size])
+
+    return (
+      <Button
+        overrides={{
+          BaseButton: {
+            props: { ref, ...restProps },
+            style: {
+              borderRadius: "100%",
+              overflow: "hidden",
+              padding: buttonPadding,
+            },
+          },
+        }}
+        onClick={onClick}
+      >
+        {typeof avatar === "string" ? (
+          <Block
+            width={avatarSize}
+            height={avatarSize}
+            as="img"
+            src={avatar}
+            alt=""
+          />
+        ) : (
+          <Block
+            width={avatarSize}
+            height={avatarSize}
+            overrides={{
+              Block: {
+                style: {
+                  borderRadius: "100%",
+                  overflow: "hidden",
+                },
+              },
+            }}
+          >
+            {avatar}
+          </Block>
+        )}
+      </Button>
+    )
+  },
+)
+
+export default ConnectedTrigger

package/src/components/Dropdown/Content.tsx

@@ -0,0 +1,53 @@
+import { Block, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useEffect } from "react"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+import Root from "./Root/Root"
+import Receive from "./Receive/Receive"
+import TestnetTopBanner from "./TestnetTopBanner"
+
+type ContentProps = {
+  onSignOut?: () => void
+  onOtherAssetsClick?: () => void
+}
+
+function Content(props: ContentProps) {
+  const { onSignOut, onOtherAssetsClick } = props
+
+  const [_, theme] = useStyletron()
+
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
+
+  useEffect(
+    () => () => {
+      setView(DropdownView.ROOT)
+    },
+    [setView],
+  )
+
+  return (
+    <Block
+      display="inline-flex"
+      flexDirection="column"
+      backgroundColor={theme.colors.backgroundPrimary}
+      width="100%"
+      overrides={{
+        Block: {
+          style: {
+            boxSizing: "border-box",
+          },
+        },
+      }}
+    >
+      <TestnetTopBanner />
+
+      {currentView === DropdownView.ROOT && (
+        <Root onSignOut={onSignOut} onOtherAssetsClick={onOtherAssetsClick} />
+      )}
+
+      {currentView === DropdownView.RECEIVE && <Receive />}
+    </Block>
+  )
+}
+
+export default Content

package/src/components/Dropdown/DisconnectedTrigger.tsx

@@ -0,0 +1,36 @@
+import { Button, ButtonProps, LogIn01, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef } from "react"
+
+type DisconnectedTriggerProps = Omit<ButtonProps, "children"> & {
+  children: string
+}
+
+const DisconnectedTrigger = forwardRef<
+  HTMLButtonElement,
+  DisconnectedTriggerProps
+>((props, ref) => {
+  const { onClick, children, ...restProps } = props
+
+  const [, theme] = useStyletron()
+
+  return (
+    <Button
+      startEnhancer={
+        <LogIn01 color="currentColor" size={theme.sizing.scale600} />
+      }
+      overrides={{
+        Root: {
+          props: { ref },
+        },
+      }}
+      size="small"
+      shape="pill"
+      onClick={onClick}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  )
+})
+
+export default DisconnectedTrigger

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,100 @@
+import {
+  ButtonProps,
+  StatefulPopover,
+  StatefulPopoverProps,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import React from "react"
+import DefaultAvatar from "../../assets/DefaultAvatar"
+import ConnectedTrigger from "./ConnectedTrigger"
+import Content from "./Content"
+import DisconnectedTrigger from "./DisconnectedTrigger"
+import { useWalletAccount } from "../../hooks/useWalletAccount"
+import { useWatchTransferEventsForAllTokens } from "../../hooks/useWatchTransferEvents"
+
+export type DropdownProps = {
+  /** The callback to be called when the user clicks the sign-out button */
+  onSignOut?: () => void
+  /** The callback to be called when the user clicks the button in sign-in state */
+  onSignIn?: () => void
+  /** The props to be passed to the trigger button */
+  triggerProps?: {
+    signedIn?: Omit<ButtonProps, "onClick" | "size"> & {
+      size: "medium" | "large"
+    }
+    signedOut?: Omit<ButtonProps, "onClick">
+  }
+  onOtherAssetsClick?: () => void
+} & Omit<StatefulPopoverProps, "children" | "content">
+
+/**
+ * Passport Dropdown component that displays user's wallet and assets information.
+ * @param {DropdownProps} props - Component props.
+ * @returns {JSX.Element}
+ */
+export function Dropdown(props: DropdownProps) {
+  const {
+    placement = "bottomRight",
+    animateOutTime = 120,
+    onSignIn,
+    onSignOut,
+    overrides,
+    triggerProps,
+    onOtherAssetsClick,
+    ...restProps
+  } = props
+
+  const [, theme] = useStyletron()
+
+  const walletAccount = useWalletAccount()
+
+  useWatchTransferEventsForAllTokens()
+
+  const { openConnectModal } = useConnectModal()
+
+  if (!walletAccount?.isConnected) {
+    return (
+      <DisconnectedTrigger
+        // If connect wallet flow is not provided it fallbacks to RainbowKit's
+        // connect modal
+        onClick={onSignIn || openConnectModal}
+        {...triggerProps?.signedOut}
+      >
+        Sign in
+      </DisconnectedTrigger>
+    )
+  }
+
+  return (
+    <StatefulPopover
+      content={
+        <Content
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      }
+      placement={placement}
+      animateOutTime={animateOutTime}
+      overrides={{
+        ...overrides,
+        Body: {
+          ...overrides?.Body,
+          style: {
+            width: "402px",
+            borderRadius: theme.borders.radius500,
+            boxShadow: theme.lighting.shadow500,
+            overflow: "hidden",
+            ...overrides?.Body?.style,
+          },
+        },
+      }}
+      {...restProps}
+    >
+      <ConnectedTrigger
+        avatar={<DefaultAvatar />}
+        {...triggerProps?.signedIn}
+      />
+    </StatefulPopover>
+  )
+}