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

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

@@ -1,173 +0,0 @@
-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

@@ -1,212 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,131 +0,0 @@
-/* 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

@@ -1,32 +0,0 @@
-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

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

package/src/components/index.ts

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