@mezo-org/passport 0.4.0-dev.9 → 0.5.1-dev.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/config.ts

@@ -1,7 +1,13 @@
-import { http } from "viem"
 import { Chain, getDefaultConfig, WalletList } from "@rainbow-me/rainbowkit"
-import { Config, CreateConfigParameters } from "wagmi"
-import { CHAIN_ID, mezoMatsnetTestnet, RPC_BY_NETWORK } from "./constants"
+import {
+  Config,
+  createConfig,
+  CreateConfigParameters,
+  http,
+  webSocket,
+} from "wagmi"
+import { walletConnectWallet } from "@rainbow-me/rainbowkit/wallets"
+import { CHAIN_ID, mezoMainnet, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -10,6 +16,7 @@ type WagmiConfigParameters = Omit<
 >
 type GetDefaultConfigParameters = WagmiConfigParameters & {
   appName: string
+  mezoNetwork?: "mainnet" | "testnet"
   appDescription?: string
   appUrl?: string
   appIcon?: string
@@ -20,7 +27,8 @@ type GetDefaultConfigParameters = WagmiConfigParameters & {
 }
 
 const transports = {
-  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet),
+  [CHAIN_ID.mainnet]: http(RPC_BY_NETWORK.mainnet.http),
+  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet.http),
 } as Pick<CreateConfigParameters, "transports">
 
 export const defaultConfig: Required<
@@ -34,39 +42,99 @@ export const defaultConfig: Required<
 > = {
   transports,
   walletConnectProjectId: "",
-  chains: [mezoMatsnetTestnet],
+  chains: [mezoMainnet, mezoTestnet],
   multiInjectedProviderDiscovery: true,
 }
 
-const bitcoinWalletConfig = {
-  rpcUrl: RPC_BY_NETWORK.testnet,
+const bitcoinWalletTestnetConfig = {
+  rpcUrl: RPC_BY_NETWORK.testnet.http,
   chainId: CHAIN_ID.testnet,
 }
 
-export const unisatWallet = getUnisatWallet(bitcoinWalletConfig)
-export const okxWallet = getOKXWallet(bitcoinWalletConfig)
-export const xverseWallet = getXverseWallet(bitcoinWalletConfig)
+const bitcoinWalletMainnetConfig = {
+  rpcUrl: RPC_BY_NETWORK.mainnet.http,
+  chainId: CHAIN_ID.mainnet,
+}
+
+export const unisatWalletMezoTestnet = getUnisatWallet(
+  bitcoinWalletTestnetConfig,
+)
+export const okxWalletMezoTestnet = getOKXWallet(bitcoinWalletTestnetConfig)
+export const xverseWalletMezoTestnet = getXverseWallet(
+  bitcoinWalletTestnetConfig,
+)
+
+export const unisatWalletMezoMainnet = getUnisatWallet(
+  bitcoinWalletMainnetConfig,
+)
+export const okxWalletMezoMainnet = getOKXWallet(bitcoinWalletMainnetConfig)
+export const xverseWalletMezoMainnet = getXverseWallet(
+  bitcoinWalletMainnetConfig,
+)
+
+export const preconfiguredWalletConnectWallet = (projectId: string) =>
+  walletConnectWallet({
+    projectId,
+    options: {
+      qrModalOptions: {
+        enableExplorer: false,
+      },
+    },
+  })
 
-export function getDefaultWallets(): WalletList {
+export function getDefaultWallets(
+  network: "mainnet" | "testnet" = "mainnet",
+): WalletList {
   return [
     {
       groupName: "Bitcoin",
-      wallets: [unisatWallet, okxWallet, xverseWallet],
+      wallets:
+        network === "mainnet"
+          ? [
+              unisatWalletMezoMainnet,
+              okxWalletMezoMainnet,
+              xverseWalletMezoMainnet,
+            ]
+          : [
+              unisatWalletMezoTestnet,
+              okxWalletMezoTestnet,
+              xverseWalletMezoTestnet,
+            ],
+    },
+    {
+      groupName: "Ethereum",
+      wallets: [({ projectId }) => preconfiguredWalletConnectWallet(projectId)],
     },
   ]
 }
 
-export function getConfig({
-  appName,
-  bitcoinWallets,
-  walletConnectProjectId,
-  ...restParameters
-}: GetDefaultConfigParameters): Config {
+export function getConfig(config: GetDefaultConfigParameters): Config {
+  const {
+    appName,
+    mezoNetwork = "mainnet",
+    walletConnectProjectId = defaultConfig.walletConnectProjectId,
+    ...restParameters
+  } = config
+
+  const wallets = config.bitcoinWallets ?? [...getDefaultWallets(mezoNetwork)]
+
   return getDefaultConfig({
     ...defaultConfig,
     appName,
-    wallets: [...(bitcoinWallets ?? getDefaultWallets())],
-    projectId: walletConnectProjectId ?? defaultConfig.walletConnectProjectId,
+    wallets,
+    projectId: walletConnectProjectId,
     ...restParameters,
   })
 }
+
+/**
+ * This config is only used to listen for Transfer events on mezo chain.
+ * Should not be exported in index for public use.
+ */
+export const simpleWssMezoConfig = createConfig({
+  chains: [mezoMainnet, mezoTestnet],
+  transports: {
+    [mezoMainnet.id]: webSocket(RPC_BY_NETWORK.mainnet.webSocket),
+    [mezoTestnet.id]: webSocket(RPC_BY_NETWORK.testnet.webSocket),
+  },
+})

package/src/constants.ts

@@ -1,11 +1,19 @@
-import { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+import { mezoMainnet, mezoTestnet } from "@mezo-org/orangekit"
 
-export { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+export { mezoMainnet, mezoTestnet } from "@mezo-org/orangekit"
 
 export const CHAIN_ID = {
-  testnet: mezoMatsnetTestnet.id,
+  testnet: mezoTestnet.id,
+  mainnet: mezoMainnet.id,
 }
 
 export const RPC_BY_NETWORK = {
-  testnet: mezoMatsnetTestnet.rpcUrls.default.http[0],
+  mainnet: {
+    http: mezoMainnet.rpcUrls.default.http[0],
+    webSocket: mezoMainnet.rpcUrls.default.webSocket?.[0],
+  },
+  testnet: {
+    http: mezoTestnet.rpcUrls.default.http[0],
+    webSocket: mezoTestnet.rpcUrls.default.webSocket?.[0],
+  },
 }

package/src/hooks/index.ts

@@ -6,13 +6,20 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
+export { useInvalidateBorrowData, useResetBorrowData } from "./useBorrowData"
 export * from "./useGetAccountByAddress"
 export * from "./useGetAccountByMezoId"
 export * from "./useGetCurrentAccount"
 export * from "./useGetSession"
 export * from "./useLinkAccount"
+export * from "./useRefreshPassport"
 export * from "./useSignInWithDiscord"
 export * from "./useSignInWithWallet"
 export * from "./useSignOut"
 export * from "./useSignUpWithWallet"
+export {
+  useInvalidateTokensBalances,
+  useResetTokensBalances,
+} from "./useTokensBalances"
 export * from "./useUpdateMezoId"
+export * from "./useValidateMezoId"

package/src/hooks/useAssetsConversionRates.ts

@@ -0,0 +1,79 @@
+import { useQuery } from "@tanstack/react-query"
+import { useConfig } from "wagmi"
+import { readContract } from "wagmi/actions"
+import { parseUnits } from "viem"
+import { ONE_SECOND_MS } from "../utils/time"
+import { usePortalApiClient } from "./usePortalApiClient"
+import { priceOracleContract } from "../lib/contracts"
+import { CHAIN_ID } from "../constants"
+import { usePassportContext } from "./usePassportContext"
+import { normalizePrecision } from "../utils/numbers"
+
+export const CONVERSION_RATE_DECIMALS = 18
+
+// If the oracle has not been updated in at least 60 seconds, it is stale.
+const MAX_PRICE_DELAY = 60 * ONE_SECOND_MS
+
+export const QUERY_KEY = "passport.assetsConversionRates"
+
+/**
+ * Hook to fetch assets conversion rates.
+ * @see https://github.com/mezo-org/musd/blob/f0b2030315f0d8b0fc11a9fc778856fe4673051f/solidity/contracts/PriceFeed.sol
+ * @returns {}.data.{}.price - The latest asset price.
+ * @returns {}.data.{}.digits - The latest asset price digits.
+ * @returns {}.isPending - Whether the request is pending.
+ * @returns {}.isError - Whether there was an error fetching the price.
+ */
+export function useAssetsConversionRates() {
+  const portalApiClient = usePortalApiClient()
+  const { environment = "mainnet" } = usePassportContext()
+  const config = useConfig()
+
+  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 tPrice = parseUnits(tTokenConversionRate, CONVERSION_RATE_DECIMALS)
+      const btcPrice = normalizePrecision(
+        btcConversionRate,
+        CONVERSION_RATE_DECIMALS,
+      )
+
+      return {
+        rates: {
+          mT: tPrice,
+          BTC: btcPrice,
+        },
+        decimals: CONVERSION_RATE_DECIMALS,
+      }
+    },
+    refetchInterval: ({ state }) => {
+      if (!state.data) return MAX_PRICE_DELAY
+
+      const [, btcPriceData] = state.data
+      const [, , , updatedAt] = btcPriceData
+
+      if (!updatedAt) return MAX_PRICE_DELAY
+
+      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
+    },
+  })
+}

package/src/hooks/useAuthenticateWithWallet.ts

@@ -1,9 +1,16 @@
 import { useSignMessage } from "wagmi"
-import { MutationOptions, useMutation } from "@tanstack/react-query"
+import {
+  DefaultError,
+  MutationOptions,
+  useMutation,
+} from "@tanstack/react-query"
 import { useCreateAccount } from "./useCreateAccount"
 import { useCreateSession } from "./useCreateSession"
 import { useEnsureNoSessionAndFetchNonce } from "./useEnsureNoSessionAndFetchNonce"
-import { createSignInWithWalletMessage } from "../utils/siww"
+import {
+  createSignInWithWalletMessage,
+  verifyDomainInSignInWithWalletMessage,
+} from "../utils/siww"
 import { useGetAccountByAddress } from "./useGetAccountByAddress"
 import type { Session } from "../api"
 import useWalletAccount from "./useWalletAccount"
@@ -11,40 +18,49 @@ import useWalletAccount from "./useWalletAccount"
 function useAuthenticateWithWallet(
   shouldCreateAccount = false,
   mutationOptions: Omit<
-    MutationOptions<Session>,
+    MutationOptions<Session, DefaultError, number | void>,
     "mutationFn" | "mutationKey"
   > = {},
 ) {
-  const { address, chainId, connector, networkFamily } = useWalletAccount()
+  const walletAccount = useWalletAccount()
   const { ensureNoSessionAndFetchNonce } = useEnsureNoSessionAndFetchNonce()
   const { createSessionAsync } = useCreateSession()
   const { createAccountAsync } = useCreateAccount()
   const { signMessageAsync } = useSignMessage()
 
-  const { refetch: getAccountByAddress } = useGetAccountByAddress(address, {
-    enabled: false,
-    retry: false,
-  })
+  const { refetch: getAccountByAddress } = useGetAccountByAddress(
+    walletAccount.walletAddress,
+    {
+      enabled: false,
+      retry: false,
+    },
+  )
 
   const { mutate, mutateAsync, ...signInMutationRestParameters } = useMutation({
-    mutationFn: async () => {
-      if (!address) {
+    mutationFn: async (chainId?: number | void) => {
+      if (!walletAccount.walletAddress) {
         throw new Error("Sign in error: Wallet not connected!")
       }
 
       const nonce = await ensureNoSessionAndFetchNonce()
 
       const messageResult = createSignInWithWalletMessage(
-        address,
+        walletAccount.walletAddress,
         nonce,
-        networkFamily,
-        chainId,
+        walletAccount.networkFamily!,
+        chainId ?? walletAccount.chainId,
       )
       const signatureResult = await signMessageAsync({
         message: messageResult,
-        connector,
+        connector: walletAccount.connector,
       })
 
+      await verifyDomainInSignInWithWalletMessage(
+        messageResult,
+        signatureResult,
+        nonce,
+      )
+
       if (shouldCreateAccount) {
         const getAccountByAddressResult = await getAccountByAddress()