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

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

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

@@ -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/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"