@mezo-org/passport 0.16.0-dev.2 → 0.16.0

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

package/src/components/Dropdown/SlotNumber.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useMemo } from "react"
+import { AnimatePresence, motion } from "motion/react"
+import { Block, useStyletron } from "@mezo-org/mezo-clay"
+
+type SlotNumberProps = {
+  className?: string
+  children: number
+  formatFunction?: (value: number) => string
+}
+
+type SlotNumberDigitProps = {
+  className?: string
+  children: number
+}
+
+function SlotNumberDigit(props: SlotNumberDigitProps) {
+  const { children: value, ...restProps } = props
+
+  const [css] = useStyletron()
+
+  const digits = [...Array(10).keys()]
+
+  return (
+    <AnimatePresence initial={false}>
+      <motion.div
+        initial={{
+          y: "100%",
+        }}
+        animate={{
+          y: "0%",
+        }}
+        layout="position"
+        className={css({
+          position: "relative",
+        })}
+        {...restProps}
+      >
+        <Block
+          overrides={{
+            Block: {
+              style: {
+                visibility: "hidden",
+              },
+            },
+          }}
+        >
+          {value}
+        </Block>
+
+        <motion.div
+          className={css({
+            display: "flex",
+            flexDirection: "column",
+            position: "absolute",
+            inset: 0,
+            height: "fit-content",
+          })}
+          initial={false}
+          animate={{ y: `${(value / 10) * -100}%` }}
+          transition={{
+            type: "spring",
+            damping: 16,
+            stiffness: 220,
+          }}
+        >
+          {digits.map((digit) => (
+            <Block as="span" key={digit}>
+              {digit}
+            </Block>
+          ))}
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  )
+}
+
+/**
+ * SlotNumber component displays a number with animated digits.
+ *
+ * @typedef {object} SlotNumberProps
+ * @property {number} children - The number to display.
+ * @property {function} [formatFunction] - Optional function to format the number.
+ * @property {BlockProps} [restProps] - Additional properties for the Block component.
+ * @see https://pyszkowski.dev/writings/slot-number
+ * @returns {JSX.Element} The rendered SlotNumber component.
+ */
+function SlotNumber(props: SlotNumberProps) {
+  const { children: value, formatFunction, ...restProps } = props
+
+  const [css] = useStyletron()
+
+  const characters = useMemo(() => {
+    const formattedValue = formatFunction
+      ? formatFunction(value)
+      : value.toString()
+
+    return formattedValue
+      .split("")
+      .map((character) => (/^[0-9]$/.test(character) ? +character : character))
+      .reverse()
+  }, [formatFunction, value])
+
+  return (
+    <motion.div
+      layout
+      className={css({
+        display: "inline-flex",
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        overflow: "hidden",
+        userSelect: "none",
+      })}
+      {...restProps}
+    >
+      {characters.map((character, index) =>
+        typeof character === "number" ? (
+          <SlotNumberDigit key={`slot-number-character-${index}`}>
+            {character}
+          </SlotNumberDigit>
+        ) : (
+          <motion.span layout key={`slot-number-character-${index}`}>
+            {character}
+          </motion.span>
+        ),
+      )}
+    </motion.div>
+  )
+}
+
+export default SlotNumber

package/src/components/Dropdown/TestnetTopBanner.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import {
+  Block,
+  InfoCircle,
+  LabelSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { usePassportContext } from "../../hooks/usePassportContext"
+
+export default function TestnetTopBanner() {
+  const [, theme] = useStyletron()
+
+  const { environment } = usePassportContext()
+
+  if (environment !== "testnet") {
+    return null
+  }
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={`${theme.sizing.scale700} ${theme.sizing.scale600}`}
+      backgroundColor={theme.colors.warning}
+    >
+      <InfoCircle size={theme.sizing.scale550} />
+      <LabelSmall marginLeft={theme.sizing.scale500}>
+        You are using testnet funds.
+      </LabelSmall>
+    </Block>
+  )
+}

package/src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown"
+export type { DropdownProps } from "./Dropdown"

package/src/components/index.ts

@@ -0,0 +1 @@
+export { Dropdown, DropdownProps } from "./Dropdown"

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./components"
 export {
   unisatWalletMezoMainnet,
   unisatWalletMezoTestnet,