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

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/useWalletAccount.ts

@@ -16,7 +16,6 @@ export function useWalletAccount(): UseWalletAccountReturn {
     connector,
     chainId,
     isConnected,
-    isConnecting,
     ...rest
   } = useAccount()
 
@@ -25,7 +24,7 @@ export function useWalletAccount(): UseWalletAccountReturn {
     [connector],
   )
 
-  const { data: btcData, isPending: isPendingBtcData } = useQuery({
+  const { data: btcData } = useQuery({
     queryKey: [connector?.id],
     queryFn: async () => {
       const bitcoinProvider = (
@@ -51,10 +50,6 @@ export function useWalletAccount(): UseWalletAccountReturn {
     isConnected:
       isConnected &&
       (networkFamily === "bitcoin" ? !!btcAddress : !!evmAddress),
-    isConnecting:
-      networkFamily === "bitcoin"
-        ? isConnecting && isPendingBtcData
-        : isConnecting,
     networkFamily,
     connector,
     chainId,

package/src/index.ts

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