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

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

@@ -1,9 +1,4 @@
-import {
-  Chain,
-  getDefaultConfig,
-  RainbowKitWalletConnectParameters,
-  WalletList,
-} from "@rainbow-me/rainbowkit"
+import { Chain, getDefaultConfig, WalletList } from "@rainbow-me/rainbowkit"
 import {
   Config,
   createConfig,
@@ -12,14 +7,7 @@ import {
   webSocket,
 } from "wagmi"
 import { walletConnectWallet } from "@rainbow-me/rainbowkit/wallets"
-import {
-  CHAIN_ID,
-  MEZO_LOGO,
-  mezoMainnet,
-  mezoTestnet,
-  RPC_BY_NETWORK,
-  WALLET_CONNECT_SAFE_WALLET_ID,
-} from "./constants"
+import { CHAIN_ID, mezoMainnet, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -84,50 +72,6 @@ export const xverseWalletMezoMainnet = getXverseWallet(
   bitcoinWalletMainnetConfig,
 )
 
-type WalletConnectWalletOptions = {
-  projectId: string
-  options?: RainbowKitWalletConnectParameters
-}
-
-/**
- * Creates a RainbowKit's WalletConnect wallet with Safe Wallets (Ethereum and Mezo). It has disabled Explorer.
- * @param opts - Options for the WalletConnect wallet.
- * @returns A WalletConnect wallet configured for Safe Wallets.
- */
-export const safeWalletConnectWallet = (opts: WalletConnectWalletOptions) => {
-  const { projectId, options } = opts
-
-  return walletConnectWallet({
-    projectId,
-    options: {
-      ...options,
-      qrModalOptions: {
-        ...options?.qrModalOptions,
-        desktopWallets: [
-          ...(options?.qrModalOptions?.desktopWallets || []),
-          {
-            id: "mezo",
-            name: "Mezo Safe",
-            links: {
-              native: "",
-              universal: "https://safe.mezo.org/",
-            },
-          },
-        ],
-        walletImages: {
-          ...options?.qrModalOptions?.walletImages,
-          mezo: MEZO_LOGO,
-        },
-        explorerExcludedWalletIds: "ALL",
-        explorerRecommendedWalletIds: [
-          ...(options?.qrModalOptions?.explorerRecommendedWalletIds || []),
-          WALLET_CONNECT_SAFE_WALLET_ID,
-        ],
-      },
-    },
-  })
-}
-
 export function getDefaultWallets(
   network: "mainnet" | "testnet" = "mainnet",
 ): WalletList {
@@ -149,7 +93,7 @@ export function getDefaultWallets(
     },
     {
       groupName: "Ethereum",
-      wallets: [safeWalletConnectWallet],
+      wallets: [walletConnectWallet],
     },
   ]
 }

package/src/constants.ts

@@ -17,9 +17,3 @@ export const RPC_BY_NETWORK = {
     webSocket: mezoTestnet.rpcUrls.default.webSocket?.[0],
   },
 }
-
-export const MEZO_LOGO =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRF9TlR9TpS9kRa91Zr92d6+HCC+G+B9klf9TtT9UBX9lJn92V4915x9k9k9T5V+6ax/dLY//b3//7+//////j5/drf+7C6+HSF+pmm/MrQ/vDx//39//n6/urs/MPK+YKR9UJZ92F0/eDk+HiI/LfA/vHz+Y6c+qGt/vP0+6+59kdd9TxU+HqK/uzu/czS9k1j+pik+7S9+YeW/dfc9kVb+YWU//z8/L3F91lt/cvS/MLJ9lRp+Yya/dbb/L/H/d3h/uHl91xw//T2/MbN/uPm+HKD+pCe+pWi/d/j/ufq/ujq9kth/MfO91tv/c7U+7O89lVq+6mz92N19kpg+G1/+p2p+6Ov+pKf+6y3+Gt92yHguQAAAx9JREFUeJzt1tlPE0EcB/CdUtouRxuKQItgCyVNpG3SKoWKqOHBxKQGCf6Z4hGNT8Yjno00UAERJcoCEWuIIgj0iHUtuwWW3ZlpSYq8fOelM/Pb3fnsHL8tEU64EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKPfoZSCmWTpcZGQvGAlZPOYAPXm3fEVRoYyRmN9MZDdVRAiHQOgK5s/aDjIZ/3wbdnMfsNJVjJC2XIkgN1N1rRtsZHMaZoBQla1YVszeVdVgL17Rd91JqcRnFs06cKF/E4VAQHLsrHTS5J71ahhRYqrJC9WD2BppS1pT7Y0zbHlHCXsSJeZg8oBYs8qtd//TVJ+Bz9Swyb/qyoBhj4wAr1vd1+9K8/IC46lQnUA7jwrEtgorkIrc5jgBG8VKgZ4/7APdaEnKQ7MMMMh8rQKgFo7J2hpWolyjjxvJ1YM8P/gRcNfWFtAKZHEVuWAq0te5Xe96VD3/DYPIISmua/S3i6rD53VL6TxtmsTvCdF0q4pXrx/a44XHiAPywKuv+E8IFr7oKuBng/U4t/x8M59dF4qC7jxkn2/N1U8bKPTG+wrLt+NE84bhB/re4wAD3O/CJHXym4eSzEFNvOS0NvMXoXadHlA4+k1Q59avJ9+q5WLy6xjFWq+LQh9jhQj7Ou4Ux5AWhg5Ldh0b6/a0MqYg05l6HgNYx8UcoZsRjk8dU5qzotsJQ4aYwvUnej8qk5NPC3RwrZfxrNMO71DEkWwP/8lpYsyB2JsvFTrc1F2os9zy9hJA9i7LYa/Fpr5V8uwbEj+4oVxea9OWQW5LSNVBhBsI/rTEq3RJxBhdH1Wd1fguSYdmzr00x2YoC0tI4H6Nv9qL7o0JRmv6dtekzVNU/jR4fGCkz81zf7vk9SRWBn8pvmJtQRucUin3tOuEdt3zpa+gT5n6rwhydbVm7Pq8+WY9T7jbLE/IfYr6c2IIDyTXdMy6xoyuNGb8Dhe+DsnJVo8nnRbLTPDFtNCkhbmA/5TAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODEAf8AjIbLgSYY+/AAAAAASUVORK5CYII="
-
-export const WALLET_CONNECT_SAFE_WALLET_ID =
-  "225affb176778569276e484e1b92637ad061b01e13a048b35a9d280c3b58970f"

package/src/hooks/useAssetsConversionRates.ts

@@ -1,36 +1,20 @@
 import { useQuery } from "@tanstack/react-query"
-import { useReadContract } from "wagmi"
+import { useConfig } from "wagmi"
+import { readContract } from "wagmi/actions"
+import { parseUnits } from "viem"
 import { ONE_SECOND_MS } from "../utils/time"
-import { QUERY_KEYS } from "./constants"
 import { usePortalApiClient } from "./usePortalApiClient"
 import { priceOracleContract } from "../lib/contracts"
-import { fromFloatToBigInt } from "../utils/numbers"
-import { getCryptoAsset } from "../utils/cryptoAssets"
 import { CHAIN_ID } from "../constants"
 import { usePassportContext } from "./usePassportContext"
+import { normalizePrecision } from "../utils/numbers"
+
+export const CONVERSION_RATE_DECIMALS = 18
 
-const BTC_TARGET_DIGITS = getCryptoAsset("BTC").decimals
-const T_TARGET_DIGITS = getCryptoAsset("mT").decimals
 // If the oracle has not been updated in at least 60 seconds, it is stale.
 const MAX_PRICE_DELAY = 60 * ONE_SECOND_MS
 
-/**
- * Scales the price by the number of digits.
- * @dev Oracles returns prices with variable number of digits. This function
- *      scales the price to a fixed number of digits ensuring consistency.
- * @param price - The price to scale.
- * @param priceDigits - The number of digits in the price.
- * @returns The scaled price.
- */
-function scalePriceByDigits(price: bigint, priceDigits: number): bigint {
-  if (priceDigits > BTC_TARGET_DIGITS) {
-    return price / 10n ** BigInt(priceDigits - BTC_TARGET_DIGITS)
-  }
-  if (priceDigits < BTC_TARGET_DIGITS) {
-    return price * 10n ** BigInt(BTC_TARGET_DIGITS - priceDigits)
-  }
-  return price
-}
+export const QUERY_KEY = "passport.assetsConversionRates"
 
 /**
  * Hook to fetch assets conversion rates.
@@ -43,55 +27,53 @@ function scalePriceByDigits(price: bigint, priceDigits: number): bigint {
 export function useAssetsConversionRates() {
   const portalApiClient = usePortalApiClient()
   const { environment = "mainnet" } = usePassportContext()
+  const config = useConfig()
 
-  const btcPrice = useReadContract({
-    ...priceOracleContract,
-    functionName: "latestRoundData",
-    query: {
-      refetchInterval: ({ state }) => {
-        if (!state.data) return MAX_PRICE_DELAY
-
-        const [, , , updatedAt] = state.data ?? []
-        if (!updatedAt) return MAX_PRICE_DELAY
+  return useQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: async () =>
+      Promise.all([
+        portalApiClient.getPortalStatistics(),
+        readContract(config, {
+          ...priceOracleContract,
+          functionName: "latestRoundData",
+          chainId: CHAIN_ID[environment],
+        }),
+      ]),
+    select: ([portalStatistics, btcPriceData]) => {
+      const tTokenConversionRate = portalStatistics.currentUsdPerTToken
+      const [, btcConversionRate] = btcPriceData
 
-        const age = Date.now() - Number(updatedAt) * 1000
+      const tPrice = parseUnits(tTokenConversionRate, CONVERSION_RATE_DECIMALS)
+      const btcPrice = normalizePrecision(
+        btcConversionRate,
+        CONVERSION_RATE_DECIMALS,
+      )
 
-        return age > MAX_PRICE_DELAY
-          ? // If the data is stale, we want to refetch as soon as possible, but
-            // not faster than once per second, to avoid excessive requests.
-            // Math.max ensures the interval is at least 1 second.
-            Math.max(ONE_SECOND_MS, MAX_PRICE_DELAY - age)
-          : MAX_PRICE_DELAY - age
-      },
-      select: (data) => {
-        const [, answer] = data
-        return scalePriceByDigits(answer, BTC_TARGET_DIGITS)
-      },
+      return {
+        rates: {
+          mT: tPrice,
+          BTC: btcPrice,
+        },
+        decimals: CONVERSION_RATE_DECIMALS,
+      }
     },
-    chainId: CHAIN_ID[environment],
-  })
+    refetchInterval: ({ state }) => {
+      if (!state.data) return MAX_PRICE_DELAY
 
-  const tPrice = useQuery({
-    queryKey: [QUERY_KEYS.ASSETS_USD_CONVERSION],
-    queryFn: () => portalApiClient.getPortalStatistics(),
-    select: (data) =>
-      fromFloatToBigInt(data.currentUsdPerTToken, T_TARGET_DIGITS),
-    refetchInterval: MAX_PRICE_DELAY,
-    throwOnError: true,
-  })
+      const [, btcPriceData] = state.data
+      const [, , , updatedAt] = btcPriceData
+
+      if (!updatedAt) return MAX_PRICE_DELAY
 
-  return {
-    data: {
-      t: {
-        price: tPrice.data ?? 0n,
-        decimals: T_TARGET_DIGITS,
-      },
-      btc: {
-        price: btcPrice.data ?? 0n,
-        decimals: BTC_TARGET_DIGITS,
-      },
+      const age = Date.now() - Number(updatedAt) * 1000
+
+      return age > MAX_PRICE_DELAY
+        ? // If the data is stale, we want to refetch as soon as possible, but
+          // not faster than once per second, to avoid excessive requests.
+          // Math.max ensures the interval is at least 1 second.
+          Math.max(ONE_SECOND_MS, MAX_PRICE_DELAY - age)
+        : MAX_PRICE_DELAY - age
     },
-    isPending: tPrice.isPending || btcPrice.isPending,
-    isError: tPrice.isError || btcPrice.isError,
-  }
+  })
 }

package/src/hooks/useAuthenticateWithWallet.ts

@@ -23,10 +23,12 @@ function useAuthenticateWithWallet(
   > = {},
 ) {
   const {
-    walletAddress,
-    chainId: walletChainId,
-    connector,
-    networkFamily,
+    data: {
+      walletAddress,
+      chainId: walletChainId,
+      connector,
+      networkFamily,
+    } = {},
   } = useWalletAccount()
   const { ensureNoSessionAndFetchNonce } = useEnsureNoSessionAndFetchNonce()
   const { createSessionAsync } = useCreateSession()
@@ -52,7 +54,7 @@ function useAuthenticateWithWallet(
       const messageResult = createSignInWithWalletMessage(
         walletAddress,
         nonce,
-        networkFamily,
+        networkFamily!,
         chainId ?? walletChainId,
       )
       const signatureResult = await signMessageAsync({