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

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/hooks/index.ts

@@ -25,6 +25,7 @@ export {
   useResetTokensBalances,
 } from "./useTokensBalances"
 export * from "./useUpdateMezoId"
+export * from "./useUpdateUserProfile"
 export * from "./useValidateMezoId"
 export * from "./useRewardsApiClient"
 export * from "./useWalletAccount"

package/src/hooks/useUpdateUserProfile.ts

@@ -0,0 +1,34 @@
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import type { UpdateAccountRequest, UpdateAccountResponse } from "../api"
+
+export function useUpdateUserProfile(
+  mutationOptions: Omit<
+    MutationOptions<UpdateAccountResponse, DefaultError, UpdateAccountRequest>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const queryClient = useQueryClient()
+  const authApiClient = useAuthApiClient()
+
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
+  const { mutate, mutateAsync, ...rest } = useMutation({
+    mutationFn: (updates: UpdateAccountRequest) =>
+      authApiClient.updateAccount(updates),
+    onSuccess: (data, variables, context) => {
+      queryClient.resetQueries({ queryKey: [QUERY_KEYS.ACCOUNT] })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
+    },
+    ...restMutationOptions,
+  })
+
+  return { updateProfile: mutate, updateProfileAsync: mutateAsync, ...rest }
+}

package/src/hooks/useWalletAccount.ts

@@ -2,18 +2,12 @@ import { OrangeKitConnector } from "@mezo-org/orangekit"
 import { useQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
 import { Address } from "viem"
-import { Connector, useAccount, UseAccountReturnType } from "wagmi"
+import { useAccount, UseAccountReturnType } from "wagmi"
 
-type UseWalletAccountReturn = Omit<
-  UseAccountReturnType,
-  "isConnected" | "address" | "connector" | "chainId"
-> & {
+type UseWalletAccountReturn = Omit<UseAccountReturnType, "address"> & {
   accountAddress?: Address
   walletAddress?: string
-  isConnected: boolean
   networkFamily: "bitcoin" | "evm"
-  connector?: Connector
-  chainId?: number
 }
 
 export function useWalletAccount(): UseWalletAccountReturn {

package/src/index.ts

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

package/src/stores/dropdownStore.ts

@@ -3,6 +3,7 @@ import { create } from "zustand"
 export enum DropdownView {
   ROOT = "ROOT",
   RECEIVE = "RECEIVE",
+  SETTINGS = "SETTINGS",
 }
 
 interface DropdownStore {

package/src/utils/validation.test.ts

@@ -0,0 +1,97 @@
+import { validateEmail, validateTelegram } from "./validation"
+
+describe("validateEmail", () => {
+  it("returns null for empty string", () => {
+    expect(validateEmail("")).toBeNull()
+  })
+
+  it("returns null for valid email", () => {
+    expect(validateEmail("user@example.com")).toBeNull()
+  })
+
+  it("returns null for valid email with subdomain", () => {
+    expect(validateEmail("user@mail.example.com")).toBeNull()
+  })
+
+  it("returns null for valid email with plus addressing", () => {
+    expect(validateEmail("user+tag@example.com")).toBeNull()
+  })
+
+  it("returns error for email without @", () => {
+    expect(validateEmail("userexample.com")).toBe(
+      "Please enter a valid email address",
+    )
+  })
+
+  it("returns error for email without domain", () => {
+    expect(validateEmail("user@")).toBe("Please enter a valid email address")
+  })
+
+  it("returns error for email without TLD", () => {
+    expect(validateEmail("user@example")).toBe(
+      "Please enter a valid email address",
+    )
+  })
+
+  it("returns error for email with spaces", () => {
+    expect(validateEmail("user @example.com")).toBe(
+      "Please enter a valid email address",
+    )
+  })
+})
+
+describe("validateTelegram", () => {
+  it("returns null for empty string", () => {
+    expect(validateTelegram("")).toBeNull()
+  })
+
+  it("returns null for valid handle without @", () => {
+    expect(validateTelegram("username")).toBeNull()
+  })
+
+  it("returns null for valid handle with @", () => {
+    expect(validateTelegram("@username")).toBeNull()
+  })
+
+  it("returns null for handle with numbers", () => {
+    expect(validateTelegram("user123")).toBeNull()
+  })
+
+  it("returns null for handle with underscores", () => {
+    expect(validateTelegram("user_name")).toBeNull()
+  })
+
+  it("returns null for exactly 5 character handle", () => {
+    expect(validateTelegram("abcde")).toBeNull()
+  })
+
+  it("returns error for handle shorter than 5 characters", () => {
+    expect(validateTelegram("abcd")).toBe(
+      "Telegram handle must be at least 5 characters",
+    )
+  })
+
+  it("returns error for handle with @ that is too short", () => {
+    expect(validateTelegram("@abcd")).toBe(
+      "Telegram handle must be at least 5 characters",
+    )
+  })
+
+  it("returns error for handle with special characters", () => {
+    expect(validateTelegram("user-name")).toBe(
+      "Telegram handle can only contain letters, numbers, and underscores",
+    )
+  })
+
+  it("returns error for handle with spaces", () => {
+    expect(validateTelegram("user name")).toBe(
+      "Telegram handle can only contain letters, numbers, and underscores",
+    )
+  })
+
+  it("returns error for handle with dots", () => {
+    expect(validateTelegram("user.name")).toBe(
+      "Telegram handle can only contain letters, numbers, and underscores",
+    )
+  })
+})

package/src/utils/validation.ts

@@ -0,0 +1,35 @@
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+/**
+ * Validates an email address.
+ * @param value - The email address to validate
+ * @returns An error message if invalid, null if valid or empty
+ */
+export function validateEmail(value: string): string | null {
+  if (!value) {
+    return null
+  }
+  if (!EMAIL_REGEX.test(value)) {
+    return "Please enter a valid email address"
+  }
+  return null
+}
+
+/**
+ * Validates a Telegram handle.
+ * @param value - The Telegram handle to validate (with or without @ prefix)
+ * @returns An error message if invalid, null if valid or empty
+ */
+export function validateTelegram(value: string): string | null {
+  if (!value) {
+    return null
+  }
+  const handle = value.startsWith("@") ? value.slice(1) : value
+  if (handle.length < 5) {
+    return "Telegram handle must be at least 5 characters"
+  }
+  if (!/^[a-zA-Z0-9_]+$/.test(handle)) {
+    return "Telegram handle can only contain letters, numbers, and underscores"
+  }
+  return null
+}