@mezo-org/passport 0.15.1-dev.7 → 0.16.0-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.15.1-dev.7",
+  "version": "0.16.0-dev.1",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {
@@ -34,24 +34,27 @@
     "prettier": "^3.2.5",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.8.2"
   },
   "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",
+    "@mezo-org/orangekit": "1.0.0-beta.40",
     "@mezo-org/sign-in-with-wallet": "1.0.0-beta.8",
+    "@rainbow-me/rainbowkit": "2.0.2",
+    "@tanstack/react-query": "^5.28.4",
+    "motion": "^12.23.6",
     "qrcode.react": "^4.2.0",
     "styletron-engine-monolithic": "^1.0.0",
     "usehooks-ts": "^3.1.1",
-    "motion": "^12.23.6",
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "@rainbow-me/rainbowkit": "^2.0.2",
     "@tanstack/react-query": "^5.28.4",
-    "react": ">=18",
-    "viem": "2.x",
-    "wagmi": "2.x"
+    "react": "^18.2.0",
+    "viem": "^2.22.8",
+    "wagmi": "^2.5.12"
   }
 }

package/src/api/auth.ts

@@ -31,6 +31,8 @@ type Account = {
   hasModifiedMezoId: boolean
   linkedAccounts: LinkedAccount[]
   documents?: Record<DocumentType, UserDocumentStatus>
+  email?: string
+  telegram?: string
 }
 
 export type Session = {
@@ -94,6 +96,14 @@ export type AcceptDocumentsRequest = Partial<
   Record<DocumentType, { acceptedVersion: string }>
 >
 
+export type UpdateAccountRequest = {
+  mezoId?: string
+  email?: string
+  telegram?: string
+}
+
+export type UpdateAccountResponse = Account
+
 export const AUTH_API_ENDPOINTS_BY_ENV = {
   mainnet: "https://api.mezo.org",
   testnet: "https://api.test.mezo.org",
@@ -222,4 +232,16 @@ export class AuthApiClient extends ApiClient {
 
     return data
   }
+
+  async updateAccount(updates: UpdateAccountRequest) {
+    const data = await this.handleRequest<UpdateAccountResponse>(
+      "/session/account",
+      {
+        method: "PATCH",
+        body: updates,
+      },
+    )
+
+    return data
+  }
 }

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/assets/EditIcon.tsx

@@ -0,0 +1,33 @@
+import { Icon, IconProps } from "@mezo-org/mezo-clay"
+import React, { forwardRef, Ref } from "react"
+
+function EditIcon(props: IconProps, ref: Ref<SVGSVGElement>) {
+  const { title, size = 16, color = "black", ...restProps } = props
+
+  return (
+    <Icon
+      ref={ref}
+      viewBox="0 0 24 24"
+      title={title ?? "Edit"}
+      size={size}
+      color={color}
+      role="graphics-symbol"
+      {...restProps}
+    >
+      <path
+        d="M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Icon>
+  )
+}
+
+const ForwardedEditIcon: React.ForwardRefExoticComponent<
+  IconProps & React.RefAttributes<SVGSVGElement>
+> = forwardRef<SVGSVGElement, IconProps>(EditIcon)
+
+export default ForwardedEditIcon

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,56 @@
+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 Settings from "./Settings/Settings"
+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 />}
+
+      {currentView === DropdownView.SETTINGS && <Settings />}
+    </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>
+  )
+}

package/src/components/Dropdown/ListingItem.tsx

@@ -0,0 +1,176 @@
+import {
+  mergeOverrides,
+  Block,
+  useStyletron,
+  BlockProps,
+  Skeleton,
+  LabelMedium,
+  ParagraphSmall,
+} from "@mezo-org/mezo-clay"
+import React, { ReactNode } from "react"
+import SlotNumber from "./SlotNumber"
+import { formatUsd } from "../../utils/currency"
+
+type ListingItemLayoutProps = Omit<BlockProps, "children"> & {
+  icon: ReactNode
+  label: ReactNode
+  value: ReactNode
+  subLabel: ReactNode
+  subValue: ReactNode
+}
+
+function ListingItemLayout(props: ListingItemLayoutProps) {
+  const { icon, label, value, subLabel, subValue, overrides, ...restProps } =
+    props
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      paddingLeft={theme.sizing.scale600}
+      paddingRight={theme.sizing.scale600}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+              minHeight: "72px",
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    >
+      {icon && icon}
+
+      <Block display="flex" flexDirection="column" alignItems="flex-start">
+        {label && label}
+        {subLabel && subLabel}
+      </Block>
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-end"
+        marginLeft="auto"
+      >
+        {value && value}
+        {subValue && subValue}
+      </Block>
+    </Block>
+  )
+}
+
+type ListingItemProps = {
+  icon?: ReactNode
+  label?: string
+  subLabel?: string
+  value?: number
+  subValue?: number
+  overrides?: BlockProps["overrides"]
+  isLoading?: boolean
+}
+
+export default function ListingItem(props: ListingItemProps) {
+  const {
+    icon,
+    label,
+    subLabel,
+    value,
+    subValue,
+    overrides,
+    isLoading = false,
+  } = props
+
+  const [, theme] = useStyletron()
+
+  if (isLoading) {
+    return (
+      <ListingItemLayout
+        icon={
+          <Skeleton
+            animation
+            width={theme.sizing.scale800}
+            height={theme.sizing.scale800}
+          />
+        }
+        label={
+          <Skeleton
+            animation
+            width={theme.sizing.scale2400}
+            height={theme.sizing.scale600}
+            overrides={{
+              Root: {
+                style: { marginBottom: theme.sizing.scale100 },
+              },
+            }}
+          />
+        }
+        subLabel={
+          <Skeleton
+            animation
+            width={theme.sizing.scale1600}
+            height={theme.sizing.scale550}
+          />
+        }
+        value={
+          <Skeleton
+            animation
+            width={theme.sizing.scale2400}
+            height={theme.sizing.scale600}
+            overrides={{
+              Root: {
+                style: { marginBottom: theme.sizing.scale100 },
+              },
+            }}
+          />
+        }
+        subValue={
+          <Skeleton
+            animation
+            width={theme.sizing.scale1600}
+            height={theme.sizing.scale550}
+          />
+        }
+        overrides={overrides}
+      />
+    )
+  }
+
+  return (
+    <ListingItemLayout
+      icon={icon}
+      label={<LabelMedium>{label}</LabelMedium>}
+      subLabel={
+        <ParagraphSmall
+          margin={0}
+          as="div"
+          color={theme.colors.contentSecondary}
+        >
+          {subLabel}
+        </ParagraphSmall>
+      }
+      value={
+        value !== undefined && (
+          <LabelMedium>
+            <SlotNumber formatFunction={formatUsd}>{value}</SlotNumber>
+          </LabelMedium>
+        )
+      }
+      subValue={
+        subValue !== undefined && (
+          <ParagraphSmall
+            margin={0}
+            as="div"
+            color={theme.colors.contentSecondary}
+          >
+            <SlotNumber formatFunction={formatUsd}>{subValue}</SlotNumber>
+          </ParagraphSmall>
+        )
+      }
+      overrides={overrides}
+    />
+  )
+}