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

package/src/components/Dropdown/Root/Root.tsx

@@ -0,0 +1,104 @@
+import {
+  Block,
+  Button,
+  LogOut01,
+  Settings01,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { useDisconnect } from "wagmi"
+import { useSignOut } from "../../../hooks"
+import WalletAddress from "./WalletAddress"
+import AccountBalance from "./AccountBalance"
+import WelcomeBlock from "./WelcomeBlock"
+import AccountAddressActions from "./AccountAddressActions"
+import AccountOtherAssets from "./AccountOtherAssets"
+import AccountBtcListing from "./AccountBtcListing"
+import AccountMusdListing from "./AccountMusdListing"
+import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
+
+type RootProps = {
+  onSignOut?: () => void
+  onOtherAssetsClick?: () => void
+}
+
+export default function Root(props: RootProps) {
+  const { onSignOut, onOtherAssetsClick } = props
+
+  const [, theme] = useStyletron()
+
+  const { disconnect } = useDisconnect()
+  const { signOut } = useSignOut()
+
+  const setDropdownView = useDropdownStore((state) => state.setView)
+  const handleSettingsClick = useCallback(
+    () => setDropdownView(DropdownView.SETTINGS),
+    [setDropdownView],
+  )
+
+  const handleLogOut = useCallback(() => {
+    if (onSignOut) {
+      onSignOut()
+      return
+    }
+    signOut()
+    disconnect()
+  }, [signOut, disconnect, onSignOut])
+
+  const overridesWithDivider = {
+    Block: {
+      style: {
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.borderOpaque,
+      },
+    },
+  }
+
+  return (
+    <Block display="inline-flex" flexDirection="column">
+      <WelcomeBlock />
+
+      <AccountAddressActions overrides={overridesWithDivider} />
+
+      <WalletAddress overrides={overridesWithDivider} />
+
+      <AccountBalance overrides={overridesWithDivider} />
+
+      <AccountBtcListing />
+
+      <AccountMusdListing />
+
+      <AccountOtherAssets
+        onClick={onOtherAssetsClick}
+        overrides={overridesWithDivider}
+      />
+
+      <Block
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        padding={theme.sizing.scale300}
+      >
+        <Button
+          size="small"
+          shape="pill"
+          kind="tertiary"
+          startEnhancer={<Settings01 color="currentColor" size={16} />}
+          onClick={handleSettingsClick}
+        >
+          Settings
+        </Button>
+        <Button
+          size="small"
+          shape="pill"
+          kind="tertiary"
+          startEnhancer={<LogOut01 color="currentColor" size={16} />}
+          onClick={handleLogOut}
+        >
+          Sign out
+        </Button>
+      </Block>
+    </Block>
+  )
+}

package/src/components/Dropdown/Root/WalletAddress.tsx

@@ -0,0 +1,123 @@
+import {
+  BitcoinCircle,
+  Block,
+  BlockProps,
+  EthCircle,
+  LabelMedium,
+  LabelXSmall,
+  mergeOverrides,
+  MonoLabelXSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
+import { useWalletAccount } from "../../../hooks/useWalletAccount"
+
+export default function WalletAddress(props: BlockProps) {
+  const { overrides, ...restProps } = props
+  const { walletAddress, networkFamily } = useWalletAccount()
+  const { environment = "mainnet" } = usePassportContext()
+  const [, theme] = useStyletron()
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+
+  const handleCopyAddress = () => {
+    copy(walletAddress!)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    walletAddress!,
+    networkFamily,
+    environment === "testnet",
+  )
+  const trimmedAddress = trimAddress(walletAddress!)
+  const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle
+
+  return (
+    <Block
+      as="button"
+      onClick={handleCopyAddress}
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      padding={`${theme.sizing.scale800} ${theme.sizing.scale700}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale700,
+              borderWidth: 0,
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: theme.colors.backgroundTertiary,
+              },
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    >
+      <AccountIcon
+        color={theme.colors.black}
+        size={theme.sizing.scale800}
+        overrides={{
+          Svg: {
+            style: {
+              backgroundColor: theme.colors.black,
+              overflow: "hidden",
+              borderRadius: theme.borders.radius200,
+            },
+          },
+        }}
+      />
+      <Block
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <LabelMedium>Connected Wallet</LabelMedium>
+
+        {isCopiedMessageVisible ? (
+          <LabelXSmall color={theme.colors.contentSecondary}>
+            Copied address to clipboard
+          </LabelXSmall>
+        ) : (
+          <Block
+            as="a"
+            color={theme.colors.contentSecondary}
+            href={blockExplorerUrl}
+            target="_blank"
+            overrides={{
+              Block: {
+                style: {
+                  color: "inherit",
+                  textDecoration: "none",
+                  ":hover": {
+                    textDecoration: "underline",
+                  },
+                },
+              },
+            }}
+          >
+            <MonoLabelXSmall>{trimmedAddress}</MonoLabelXSmall>
+          </Block>
+        )}
+      </Block>
+    </Block>
+  )
+}

package/src/components/Dropdown/Root/WelcomeBlock.tsx

@@ -0,0 +1,173 @@
+import {
+  Block,
+  BlockProps,
+  HeadingMedium,
+  LabelLarge,
+  Mats,
+  mergeOverrides,
+  Skeleton,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import DefaultAvatar from "../../../assets/DefaultAvatar"
+import { useGetCurrentAccount } from "../../../hooks"
+import { formatNumberToCompactString } from "../../../utils/numbers"
+import AccountError from "./AccountError"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import SlotNumber from "../SlotNumber"
+
+const DOT_DELIMITER_REGEX = /(?=\.)/
+
+function WelcomeBlockSkeleton() {
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Skeleton
+        animation
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Root: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <Skeleton animation width="60%" height={theme.sizing.scale900} />
+        <Skeleton animation width="40%" height={theme.sizing.scale800} />
+      </Block>
+    </Block>
+  )
+}
+
+type WelcomeBlockProps = BlockProps
+
+export default function WelcomeBlock(props: WelcomeBlockProps) {
+  const { overrides, ...restProps } = props
+  const { accountDataRefetchInterval } = usePassportContext()
+
+  const { data, isError, isPending } = useGetCurrentAccount({
+    staleTime: accountDataRefetchInterval,
+    refetchInterval: accountDataRefetchInterval,
+  })
+  const [, theme] = useStyletron()
+
+  if (isError) {
+    return (
+      <AccountError
+        padding={theme.sizing.scale600}
+        paddingTop={theme.sizing.scale900}
+        paddingBottom={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale300}
+        topic="account information"
+      />
+    )
+  }
+
+  if (isPending) {
+    return <WelcomeBlockSkeleton />
+  }
+
+  const [mezoId, mezoIdSuffix] = (data.mezoId ?? "").split(DOT_DELIMITER_REGEX)
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      paddingLeft={theme.sizing.scale600}
+      paddingRight={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={mergeOverrides(overrides, {
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      })}
+      {...restProps}
+    >
+      <Block
+        as={DefaultAvatar}
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Block: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block display="flex" flexDirection="column">
+        {mezoId && mezoIdSuffix && (
+          <HeadingMedium as="span">
+            <Block as="span">{mezoId}</Block>
+            <Block as="span" color={theme.colors.contentSecondary}>
+              {mezoIdSuffix}
+            </Block>
+          </HeadingMedium>
+        )}
+
+        <Block
+          display="flex"
+          alignItems="center"
+          overrides={{
+            Block: {
+              style: {
+                gap: theme.sizing.scale100,
+              },
+            },
+          }}
+        >
+          <Mats
+            size={theme.sizing.scale600}
+            overrides={{
+              Svg: {
+                style: {
+                  margin: theme.sizing.scale100, // To reduce gap
+                },
+              },
+            }}
+          />
+
+          <LabelLarge color={theme.colors.contentPrimary}>
+            <SlotNumber formatFunction={formatNumberToCompactString}>
+              {data.totalMats}
+            </SlotNumber>{" "}
+            mats
+          </LabelLarge>
+        </Block>
+      </Block>
+    </Block>
+  )
+}

package/src/components/Dropdown/Settings/InlineEditField.tsx

@@ -0,0 +1,212 @@
+import {
+  Block,
+  ButtonIcon,
+  Check,
+  Close,
+  Input,
+  LabelSmall,
+  ParagraphSmall,
+  Spinner,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useEffect, useState } from "react"
+import EditIcon from "../../../assets/EditIcon"
+
+type InlineEditFieldProps = {
+  label: string
+  value: string
+  placeholder?: string
+  onSave: (value: string) => Promise<void>
+  validate?: (value: string) => string | null
+  isLoading?: boolean
+}
+
+type InlineFieldWrapperProps = {
+  label: string
+  children: React.ReactNode
+}
+
+function InlineFieldWrapper({ label, children }: InlineFieldWrapperProps) {
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      flexDirection="column"
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale200,
+          },
+        },
+      }}
+    >
+      <LabelSmall color={theme.colors.contentSecondary}>{label}</LabelSmall>
+      {children}
+    </Block>
+  )
+}
+
+export default function InlineEditField(props: InlineEditFieldProps) {
+  const { label, value, placeholder, onSave, validate, isLoading } = props
+
+  const [, theme] = useStyletron()
+  const [isEditing, setIsEditing] = useState(false)
+  const [editValue, setEditValue] = useState(value)
+  const [error, setError] = useState<string | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+
+  useEffect(() => {
+    setEditValue(value)
+  }, [value])
+
+  const handleEdit = useCallback(() => {
+    setIsEditing(true)
+    setEditValue(value)
+    setError(null)
+  }, [value])
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false)
+    setEditValue(value)
+    setError(null)
+  }, [value])
+
+  const handleSave = useCallback(async () => {
+    if (validate) {
+      const validationError = validate(editValue)
+      if (validationError) {
+        setError(validationError)
+        return
+      }
+    }
+
+    setIsSaving(true)
+    try {
+      await onSave(editValue)
+      setIsEditing(false)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save")
+    } finally {
+      setIsSaving(false)
+    }
+  }, [editValue, onSave, validate])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        handleSave()
+      } else if (e.key === "Escape") {
+        handleCancel()
+      }
+    },
+    [handleSave, handleCancel],
+  )
+
+  if (isLoading) {
+    return (
+      <InlineFieldWrapper label={label}>
+        <Block
+          display="flex"
+          alignItems="center"
+          height={theme.sizing.scale950}
+        >
+          <Spinner $size={theme.sizing.scale600} />
+        </Block>
+      </InlineFieldWrapper>
+    )
+  }
+
+  if (isEditing) {
+    return (
+      <InlineFieldWrapper label={label}>
+        <Block
+          display="flex"
+          alignItems="center"
+          width="100%"
+          gridGap="scale300"
+        >
+          <Block flex={1}>
+            <Input
+              value={editValue}
+              onChange={(e) => {
+                setEditValue(e.currentTarget.value)
+                setError(null)
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              size="small"
+              error={!!error}
+              disabled={isSaving}
+              autoFocus
+            />
+          </Block>
+          <ButtonIcon
+            onClick={handleSave}
+            size="small"
+            shape="circle"
+            kind="secondary"
+            disabled={isSaving}
+            aria-label="Save"
+          >
+            {isSaving ? (
+              <Spinner $size={theme.sizing.scale500} />
+            ) : (
+              <Check size={14} color="currentColor" />
+            )}
+          </ButtonIcon>
+          <ButtonIcon
+            onClick={handleCancel}
+            size="small"
+            shape="circle"
+            kind="tertiary"
+            disabled={isSaving}
+            aria-label="Cancel"
+          >
+            <Close size={14} color="currentColor" />
+          </ButtonIcon>
+        </Block>
+        {error && (
+          <ParagraphSmall
+            color={theme.colors.contentNegative}
+            marginTop={0}
+            marginBottom={0}
+          >
+            {error}
+          </ParagraphSmall>
+        )}
+      </InlineFieldWrapper>
+    )
+  }
+
+  return (
+    <InlineFieldWrapper label={label}>
+      <Block
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={handleEdit}
+        overrides={{
+          Block: {
+            style: {
+              cursor: "pointer",
+              minHeight: theme.sizing.scale950,
+            },
+          },
+        }}
+      >
+        <ParagraphSmall
+          marginTop={0}
+          marginBottom={0}
+          color={
+            value ? theme.colors.contentPrimary : theme.colors.contentTertiary
+          }
+        >
+          {value || placeholder}
+        </ParagraphSmall>
+        <EditIcon size={16} color={theme.colors.contentTertiary} />
+      </Block>
+    </InlineFieldWrapper>
+  )
+}

package/src/components/Dropdown/Settings/Settings.tsx

@@ -0,0 +1,87 @@
+import { Block, ParagraphSmall, Link, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import NestedViewLayout from "../NestedViewLayout"
+import InlineEditField from "./InlineEditField"
+import { useGetCurrentAccount, useUpdateUserProfile } from "../../../hooks"
+import { validateEmail, validateTelegram } from "../../../utils/validation"
+
+function Settings() {
+  const [, theme] = useStyletron()
+
+  const { data: account, isPending: isCurrentAccountPending } =
+    useGetCurrentAccount()
+  const { updateProfileAsync } = useUpdateUserProfile()
+
+  const handleSaveEmail = useCallback(
+    async (value: string) => {
+      await updateProfileAsync({ email: value || "" })
+    },
+    [updateProfileAsync],
+  )
+
+  const handleSaveTelegram = useCallback(
+    async (value: string) => {
+      const handle = value.startsWith("@") ? value.slice(1) : value
+      await updateProfileAsync({ telegram: handle || "" })
+    },
+    [updateProfileAsync],
+  )
+
+  return (
+    <NestedViewLayout>
+      <ParagraphSmall
+        marginTop={0}
+        marginBottom={theme.sizing.scale800}
+        color={theme.colors.contentSecondary}
+      >
+        Update your contact information to stay connected.
+      </ParagraphSmall>
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+            },
+          },
+        }}
+      >
+        <InlineEditField
+          label="Email"
+          value={account?.email || ""}
+          placeholder="Enter your email"
+          onSave={handleSaveEmail}
+          validate={validateEmail}
+          isLoading={isCurrentAccountPending}
+        />
+
+        <InlineEditField
+          label="Telegram"
+          value={account?.telegram || ""}
+          placeholder="Enter your Telegram handle"
+          onSave={handleSaveTelegram}
+          validate={validateTelegram}
+          isLoading={isCurrentAccountPending}
+        />
+      </Block>
+
+      <ParagraphSmall
+        marginTop={theme.sizing.scale800}
+        marginBottom={0}
+        color={theme.colors.contentTertiary}
+      >
+        By providing your contact information, you agree to receive service
+        notifications and occasional promotional messages. Promotional messages
+        will always include an opt out link. The Privacy Policy is available{" "}
+        <Link href="https://mezo.org/privacy" target="_blank">
+          here
+        </Link>
+        .
+      </ParagraphSmall>
+    </NestedViewLayout>
+  )
+}
+
+export default Settings