@mezo-org/passport 0.4.0-dev.82 → 0.4.0-dev.83

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

@@ -1,47 +1,55 @@
 import {
+  BitcoinCircle,
   Block,
-  Copy03 as CopyIcon,
-  LinkExternal02 as LinkIcon,
-  ParagraphSmall,
+  BlockProps,
+  EthCircle,
+  LabelMedium,
+  LabelXSmall,
+  mergeOverrides,
+  MonoLabelXSmall,
   useStyletron,
 } from "@mezo-org/mezo-clay"
-import React, { useCallback, useState } from "react"
+import React, { useState } from "react"
 import { useCopyToClipboard } from "usehooks-ts"
 import { usePassportContext } from "../../../hooks/usePassportContext"
 import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
-import { getCryptoAsset } from "../../../utils/cryptoAssets"
+import useWalletAccount from "../../../hooks/useWalletAccount"
 
-type WalletAddressProps = {
-  address: string
-  type: "bitcoin" | "evm"
-}
-
-export default function WalletAddress(props: WalletAddressProps) {
-  const { address, type } = props
-
-  const { environment } = usePassportContext()
-  const blockExplorerUrl = getAddressExplorerUrl(
-    address,
-    type,
-    environment === "testnet",
-  )
-  const trimmedAddress = trimAddress(address)
-  const { icon: accountIcon } = getCryptoAsset(
-    type === "bitcoin" ? "BTC" : "ETH",
-  )
+export default function WalletAddress(props: BlockProps) {
+  const { overrides, ...restProps } = props
 
+  const { data, isError, isPending } = useWalletAccount()
+  const { environment = "mainnet" } = usePassportContext()
   const [, theme] = useStyletron()
-
   const [, copy] = useCopyToClipboard()
   const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
-  const handleCopyAddress = useCallback(() => {
-    copy(address)
+
+  if (isError) {
+    return "Error loading wallet address"
+  }
+
+  if (isPending) {
+    return "Loading..."
+  }
+
+  const { walletAddress, networkFamily } = data
+
+  const handleCopyAddress = () => {
+    copy(walletAddress)
     setIsCopiedMessageVisible(true)
 
     setTimeout(() => {
       setIsCopiedMessageVisible(false)
     }, 2000)
-  }, [copy, address])
+  }
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    walletAddress,
+    networkFamily,
+    environment === "testnet",
+  )
+  const trimmedAddress = trimAddress(walletAddress)
+  const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle
 
   return (
     <Block
@@ -50,79 +58,77 @@ export default function WalletAddress(props: WalletAddressProps) {
       display="flex"
       alignItems="center"
       backgroundColor="transparent"
-      padding={`${theme.sizing.scale600} ${theme.sizing.scale500}`}
-      overrides={{
-        Block: {
-          style: {
-            borderWidth: 0,
-            cursor: "pointer",
-            ":hover": {
-              backgroundColor: theme.colors.backgroundTertiary,
+      padding={`${theme.sizing.scale800} ${theme.sizing.scale700}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale700,
+              borderWidth: 0,
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: theme.colors.backgroundTertiary,
+              },
             },
           },
         },
-      }}
-    >
-      <Block as={accountIcon} size={theme.sizing.scale600} />
-      {isCopiedMessageVisible ? (
-        <ParagraphSmall
-          margin={0}
-          marginLeft={theme.sizing.scale500}
-          color={theme.colors.contentPrimary}
-        >
-          Copied address to clipboard
-        </ParagraphSmall>
-      ) : (
-        <Block
-          as="a"
-          marginLeft={theme.sizing.scale500}
-          href={blockExplorerUrl}
-          target="_blank"
-          overrides={{
-            Block: {
-              style: {
-                color: "inherit",
-                textDecoration: "none",
-                ":hover": {
-                  textDecoration: "underline",
-                },
-              },
-            },
-          }}
-        >
-          <ParagraphSmall
-            display="flex"
-            alignItems="center"
-            margin={0}
-            color={theme.colors.contentPrimary}
-          >
-            {trimmedAddress}
-            <LinkIcon
-              display="inline"
-              size={theme.sizing.scale550}
-              overrides={{
-                Svg: {
-                  style: {
-                    stroke: "currentColor",
-                    marginLeft: theme.sizing.scale300,
-                  },
-                },
-              }}
-            />
-          </ParagraphSmall>
-        </Block>
+        overrides,
       )}
-      <CopyIcon
-        size={theme.sizing.scale550}
-        color={theme.colors.contentPrimary}
+      {...restProps}
+    >
+      <AccountIcon
+        color={theme.colors.black}
+        size={theme.sizing.scale800}
         overrides={{
           Svg: {
             style: {
-              marginLeft: "auto",
+              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,32 +1,33 @@
 import {
   Block,
-  HeadingSmall,
-  LabelSmall,
+  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 = /(?=\.)/
 
-type WelcomeBlockProps = {
-  mezoId: string
-  matsBalance: string
-}
-
-export default function WelcomeBlock(props: WelcomeBlockProps) {
-  const { mezoId, matsBalance } = props
-
-  const [name, nameSuffix] = mezoId.split(DOT_DELIMITER_REGEX)
+function WelcomeBlockSkeleton() {
   const [, theme] = useStyletron()
 
   return (
     <Block
       display="flex"
       alignItems="center"
-      padding={`${theme.sizing.scale600} 0`}
-      marginBottom={theme.sizing.scale300}
+      padding={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
       overrides={{
         Block: {
           style: {
@@ -35,12 +36,12 @@ export default function WelcomeBlock(props: WelcomeBlockProps) {
         },
       }}
     >
-      <Block
-        as={DefaultAvatar}
+      <Skeleton
+        animation
         width={theme.sizing.scale1200}
         height={theme.sizing.scale1200}
         overrides={{
-          Block: {
+          Root: {
             style: {
               borderRadius: "100%",
             },
@@ -51,6 +52,7 @@ export default function WelcomeBlock(props: WelcomeBlockProps) {
       <Block
         display="flex"
         flexDirection="column"
+        flex={1}
         overrides={{
           Block: {
             style: {
@@ -59,32 +61,110 @@ export default function WelcomeBlock(props: WelcomeBlockProps) {
           },
         }}
       >
-        <HeadingSmall as="span">
-          <Block as="span">{name}</Block>
-          <Block as="span" color={theme.colors.gray500}>
-            {nameSuffix}
+        <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">
+        <HeadingMedium as="span">
+          <Block as="span">{mezoId}</Block>
+          <Block as="span" color={theme.colors.contentSecondary}>
+            {mezoIdSuffix}
           </Block>
-        </HeadingSmall>
+        </HeadingMedium>
 
-        <LabelSmall
+        <Block
           display="flex"
           alignItems="center"
-          margin={0}
-          color={theme.colors.contentTertiary}
           overrides={{
             Block: {
               style: {
-                gap: theme.sizing.scale400,
+                gap: theme.sizing.scale100,
               },
             },
           }}
         >
           <Mats
-            color={theme.colors.contentPrimary}
-            size={theme.sizing.scale500}
+            size={theme.sizing.scale600}
+            overrides={{
+              Svg: {
+                style: {
+                  margin: theme.sizing.scale100, // To reduce gap
+                },
+              },
+            }}
           />
-          {matsBalance} mats
-        </LabelSmall>
+
+          <LabelLarge color={theme.colors.contentPrimary}>
+            <SlotNumber formatFunction={formatNumberToCompactString}>
+              {data.mats.totalMats}
+            </SlotNumber>{" "}
+            mats
+          </LabelLarge>
+        </Block>
       </Block>
     </Block>
   )

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

@@ -72,16 +72,6 @@ export const xverseWalletMezoMainnet = getXverseWallet(
   bitcoinWalletMainnetConfig,
 )
 
-export const preconfiguredWalletConnectWallet = (projectId: string) =>
-  walletConnectWallet({
-    projectId,
-    options: {
-      qrModalOptions: {
-        enableExplorer: false,
-      },
-    },
-  })
-
 export function getDefaultWallets(
   network: "mainnet" | "testnet" = "mainnet",
 ): WalletList {
@@ -103,7 +93,7 @@ export function getDefaultWallets(
     },
     {
       groupName: "Ethereum",
-      wallets: [({ projectId }) => preconfiguredWalletConnectWallet(projectId)],
+      wallets: [walletConnectWallet],
     },
   ]
 }