@mezo-org/passport 0.4.0-dev.8 → 0.4.0-dev.80

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

@@ -0,0 +1,128 @@
+import {
+  Block,
+  Copy03 as CopyIcon,
+  LinkExternal02 as LinkIcon,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
+import { getCryptoAsset } from "../../../utils/cryptoAssets"
+
+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",
+  )
+
+  const [, theme] = useStyletron()
+
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+  const handleCopyAddress = useCallback(() => {
+    copy(address)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }, [copy, address])
+
+  return (
+    <Block
+      as="button"
+      onClick={handleCopyAddress}
+      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,
+            },
+          },
+        },
+      }}
+    >
+      <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>
+      )}
+      <CopyIcon
+        size={theme.sizing.scale550}
+        color={theme.colors.contentPrimary}
+        overrides={{
+          Svg: {
+            style: {
+              marginLeft: "auto",
+            },
+          },
+        }}
+      />
+    </Block>
+  )
+}

package/src/components/Dropdown/{WelcomeBlock.tsx → Root/WelcomeBlock.tsx}

@@ -6,14 +6,13 @@ import {
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import React from "react"
-import DefaultAvatar from "../../assets/DefaultAvatar"
-import { formatHumanReadableNumber } from "../../utils/numbers"
+import DefaultAvatar from "../../../assets/DefaultAvatar"
 
 const DOT_DELIMITER_REGEX = /(?=\.)/
 
 type WelcomeBlockProps = {
   mezoId: string
-  matsBalance: number
+  matsBalance: string
 }
 
 export default function WelcomeBlock(props: WelcomeBlockProps) {
@@ -75,16 +74,16 @@ export default function WelcomeBlock(props: WelcomeBlockProps) {
           overrides={{
             Block: {
               style: {
-                gap: theme.sizing.scale300,
+                gap: theme.sizing.scale400,
               },
             },
           }}
         >
           <Mats
             color={theme.colors.contentPrimary}
-            size={theme.sizing.scale600}
+            size={theme.sizing.scale500}
           />
-          {formatHumanReadableNumber(matsBalance, 0)}
+          {matsBalance} mats
         </LabelSmall>
       </Block>
     </Block>

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,12 @@
-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 { CHAIN_ID, mezoMainnet, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -10,6 +15,7 @@ type WagmiConfigParameters = Omit<
 >
 type GetDefaultConfigParameters = WagmiConfigParameters & {
   appName: string
+  mezoNetwork?: "mainnet" | "testnet"
   appDescription?: string
   appUrl?: string
   appIcon?: string
@@ -20,7 +26,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 +41,85 @@ 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 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,
+            ],
     },
   ]
 }
 
-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,97 @@
+import { useQuery } from "@tanstack/react-query"
+import { useReadContract } from "wagmi"
+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"
+
+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
+}
+
+/**
+ * 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 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
+
+        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
+      },
+      select: (data) => {
+        const [, answer] = data
+        return scalePriceByDigits(answer, BTC_TARGET_DIGITS)
+      },
+    },
+    chainId: CHAIN_ID[environment],
+  })
+
+  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,
+  })
+
+  return {
+    data: {
+      t: {
+        price: tPrice.data ?? 0n,
+        decimals: T_TARGET_DIGITS,
+      },
+      btc: {
+        price: btcPrice.data ?? 0n,
+        decimals: BTC_TARGET_DIGITS,
+      },
+    },
+    isPending: tPrice.isPending || btcPrice.isPending,
+    isError: tPrice.isError || btcPrice.isError,
+  }
+}

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,54 @@ 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 {
+    walletAddress,
+    chainId: walletChainId,
+    connector,
+    networkFamily,
+  } = 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(
+    walletAddress,
+    {
+      enabled: false,
+      retry: false,
+    },
+  )
 
   const { mutate, mutateAsync, ...signInMutationRestParameters } = useMutation({
-    mutationFn: async () => {
-      if (!address) {
+    mutationFn: async (chainId?: number | void) => {
+      if (!walletAddress) {
         throw new Error("Sign in error: Wallet not connected!")
       }
 
       const nonce = await ensureNoSessionAndFetchNonce()
 
       const messageResult = createSignInWithWalletMessage(
-        address,
+        walletAddress,
         nonce,
         networkFamily,
-        chainId,
+        chainId ?? walletChainId,
       )
       const signatureResult = await signMessageAsync({
         message: messageResult,
         connector,
       })
 
+      await verifyDomainInSignInWithWalletMessage(
+        messageResult,
+        signatureResult,
+        nonce,
+      )
+
       if (shouldCreateAccount) {
         const getAccountByAddressResult = await getAccountByAddress()