@mezo-org/passport 0.4.0-dev.4 → 0.4.0-dev.6

package/src/hooks/useUpdateMezoId.ts

@@ -1,17 +1,32 @@
-import { useQueryClient, useMutation } from "@tanstack/react-query"
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
 import { useAuthApiClient } from "./useAuthApiClient"
 import { QUERY_KEYS } from "./constants"
+import type { UpdateMezoIdResponse } from "../api"
 
-export function useUpdateMezoId(useMutationOptions = {}) {
+export function useUpdateMezoId(
+  mutationOptions: Omit<
+    MutationOptions<UpdateMezoIdResponse, DefaultError, string>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
   const queryClient = useQueryClient()
   const authApiClient = useAuthApiClient()
 
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
   const { mutate, mutateAsync, ...rest } = useMutation({
     mutationFn: (newMezoId: string) => authApiClient.updateMezoId(newMezoId),
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
       queryClient.resetQueries({ queryKey: [QUERY_KEYS.ACCOUNT] })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
     },
-    ...useMutationOptions,
+    ...restMutationOptions,
   })
 
   return { updateMezoId: mutate, updateMezoIdAsync: mutateAsync, ...rest }

package/src/hooks/useWalletAccount.ts

@@ -0,0 +1,41 @@
+import { useBitcoinAccount } from "@mezo-org/orangekit"
+import { useEffect, useMemo, useState } from "react"
+import { Address } from "viem"
+import { Connector, useAccount } from "wagmi"
+
+type UseWalletAccountReturn = {
+  address?: string | Address
+  isConnected: boolean
+  networkFamily: "bitcoin" | "evm"
+  connector?: Connector
+  chainId?: number
+}
+
+export default function useWalletAccount(): UseWalletAccountReturn {
+  const { address: evmAddress, connector, chainId } = useAccount()
+  const { btcAddress } = useBitcoinAccount()
+  const [isConnected, setIsConnected] = useState(false)
+
+  useEffect(() => {
+    if (!connector) {
+      setIsConnected(false)
+      return
+    }
+
+    const isBitcoinFlow = connector.type === "orangekit"
+    setIsConnected(isBitcoinFlow ? !!btcAddress : !!evmAddress)
+  }, [btcAddress, connector, evmAddress])
+
+  const networkFamily = useMemo(
+    () => (btcAddress ? "bitcoin" : "evm"),
+    [btcAddress],
+  )
+
+  return {
+    address: btcAddress || evmAddress,
+    isConnected,
+    networkFamily,
+    connector,
+    chainId,
+  } as const
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./components"
 export * from "./config"
 export * from "./constants"
 export * from "./hooks"

package/src/provider.ts

@@ -1,56 +1,49 @@
-import { createContext, createElement, useMemo } from "react"
-import { API_ENDPOINTS_BY_ENV, AuthApiClient } from "./api/auth"
+import { createContext, createElement } from "react"
+import { AuthApiClient, PortalApiClient } from "./api"
 
 export interface PassportContextValue {
   authApiClient: AuthApiClient
+  portalApiClient: PortalApiClient
+  environment?: Environment
 }
 
 export const PassportContext = createContext<PassportContextValue | undefined>(
   undefined,
 )
 
-interface PassportProviderProps {
-  // eslint-disable-next-line react/require-default-props
-  options: {
-    environment?: keyof typeof API_ENDPOINTS_BY_ENV
-    apiUrl?: string
-  } & (
-    | {
-        environment: keyof typeof API_ENDPOINTS_BY_ENV
-      }
-    | {
-        apiUrl: string
-      }
-  )
+type Environment = "mainnet" | "testnet"
+
+type PassportProviderProps = {
   children: React.ReactNode
+  // eslint-disable-next-line react/require-default-props
+  environment?: Environment
+  // eslint-disable-next-line react/require-default-props
+  authApiUrl?: string
+  // eslint-disable-next-line react/require-default-props
+  portalApiUrl?: string
 }
 
-export function PassportProvider({ options, children }: PassportProviderProps) {
-  const { environment, apiUrl } = options
-
-  const finalApiUrl = useMemo(() => {
-    if (!environment && !apiUrl) {
-      throw new Error(
-        "Neither apiUrl or environment are specified in Passport Provider",
-      )
-    }
-    if (apiUrl) return apiUrl
-
-    if (!(environment! in API_ENDPOINTS_BY_ENV)) {
-      throw new Error("Wrong environment passed to PassportProvider.")
-    }
-
-    return API_ENDPOINTS_BY_ENV[environment!]
-  }, [environment, apiUrl])
+export function PassportProvider({
+  environment,
+  authApiUrl,
+  portalApiUrl,
+  children,
+}: PassportProviderProps) {
+  if (environment !== "mainnet" && environment !== "testnet") {
+    throw new Error("Wrong environment passed to PassportProvider.")
+  }
 
   return createElement(
     PassportContext.Provider,
     {
-      value: finalApiUrl
-        ? {
-            authApiClient: new AuthApiClient(finalApiUrl),
-          }
-        : undefined,
+      value: {
+        authApiClient: new AuthApiClient(environment ?? "mainnet", authApiUrl),
+        portalApiClient: new PortalApiClient(
+          environment ?? "mainnet",
+          portalApiUrl,
+        ),
+        environment,
+      },
     },
     children,
   )

package/src/utils/address.test.ts

@@ -0,0 +1,44 @@
+import { getAddressExplorerUrl, trimAddress } from "./address"
+
+describe("trimAddress", () => {
+  it("returns full address if length is less than 11", () => {
+    expect(trimAddress("0x12345")).toBe("0x12345")
+  })
+
+  it("returns trimmed address if length is 11 or more", () => {
+    const input = "0x123456789abcdef"
+    const expected = "0x123...bcdef"
+    expect(trimAddress(input)).toBe(expected)
+  })
+
+  it("returns lowercase result", () => {
+    const input = "0xABCDEF1234567890"
+    const expected = "0xabc...67890"
+    expect(trimAddress(input)).toBe(expected)
+  })
+})
+
+describe("getAddressExplorerUrl", () => {
+  const btcAddress = "bc1qxyz123"
+  const evmAddress = "0x1234567890abcdef"
+
+  it("returns correct mainnet Bitcoin explorer URL", () => {
+    const url = getAddressExplorerUrl(btcAddress, "bitcoin", false)
+    expect(url).toBe(`https://mempool.space/address/${btcAddress}`)
+  })
+
+  it("returns correct testnet Bitcoin explorer URL", () => {
+    const url = getAddressExplorerUrl(btcAddress, "bitcoin", true)
+    expect(url).toBe(`https://mempool.space/testnet/address/${btcAddress}`)
+  })
+
+  it("returns correct mainnet EVM explorer URL", () => {
+    const url = getAddressExplorerUrl(evmAddress, "evm", false)
+    expect(url).toBe(`https://etherscan.io/address/${evmAddress}`)
+  })
+
+  it("returns correct testnet EVM explorer URL", () => {
+    const url = getAddressExplorerUrl(evmAddress, "evm", true)
+    expect(url).toBe(`https://sepolia.etherscan.io/address/${evmAddress}`)
+  })
+})

package/src/utils/address.ts

@@ -0,0 +1,43 @@
+/**
+ * Trims the address to the first 5 and last 5 characters.
+ * @param address The address to trim.
+ * @returns The trimmed address.
+ */
+export function trimAddress(address: string): string {
+  if (address.length < 11) return address
+
+  const trimmedAddress = `${address.slice(0, 5)}...${address.slice(-5)}`
+
+  return trimmedAddress
+}
+
+const MAINNET_EXPLORER_URLS: Record<"bitcoin" | "evm", string> = {
+  bitcoin: "https://mempool.space",
+  evm: "https://etherscan.io",
+}
+
+const TESTNET_EXPLORER_URLS: Record<"bitcoin" | "evm", string> = {
+  bitcoin: "https://mempool.space/testnet",
+  evm: "https://sepolia.etherscan.io",
+}
+
+/**
+ * Get the URL of the block explorer page for an address.
+ * @param address - The address to link to.
+ * @param chainType - The chain type of the address.
+ * @param isTestnet - Whether the address is on testnet.
+ * @returns The URL of the block explorer page for the address.
+ */
+export function getAddressExplorerUrl(
+  address: string,
+  chainType: "bitcoin" | "evm",
+  isTestnet: boolean,
+) {
+  const EXPLORER_URLS = isTestnet
+    ? TESTNET_EXPLORER_URLS
+    : MAINNET_EXPLORER_URLS
+  const baseUrl = EXPLORER_URLS[chainType]
+  const endpoint = `address/${address}`
+
+  return `${baseUrl}/${endpoint}`
+}

package/src/utils/cryptoAssets.test.ts

@@ -0,0 +1,59 @@
+import {
+  BitcoinCircle,
+  EthCircle,
+  MUsdCircle,
+  TBtcCircle,
+} from "@mezo-org/mezo-clay"
+import { getCryptoAsset } from "./cryptoAssets"
+
+describe("getCryptoAsset", () => {
+  it("returns the correct asset for 'btc'", () => {
+    const asset = getCryptoAsset("btc")
+    expect(asset.name).toBe("Bitcoin")
+    expect(asset.symbol).toBe("BTC")
+    expect(asset.decimals).toBe(8)
+    expect(asset.icon).toBe(BitcoinCircle)
+  })
+
+  it("returns the correct asset for 'eth'", () => {
+    const asset = getCryptoAsset("eth")
+    expect(asset.name).toBe("Ethereum")
+    expect(asset.symbol).toBe("ETH")
+    expect(asset.decimals).toBe(18)
+    expect(asset.icon).toBe(EthCircle)
+  })
+
+  it("returns the correct asset for 'tbtc'", () => {
+    const asset = getCryptoAsset("tbtc")
+    expect(asset.name).toBe("Threshold Bitcoin")
+    expect(asset.symbol).toBe("tBTC")
+    expect(asset.decimals).toBe(18)
+    expect(asset.icon).toBe(TBtcCircle)
+  })
+
+  it("returns the correct asset for 'wbtc'", () => {
+    const asset = getCryptoAsset("wbtc")
+    expect(asset.name).toBe("Wrapped Bitcoin")
+    expect(asset.symbol).toBe("wBTC")
+    expect(asset.decimals).toBe(8)
+    // FIXME: Test should expect the exact icon component
+    expect(asset.icon).toEqual(expect.any(Function))
+  })
+
+  it("returns the correct asset for 'mbtc'", () => {
+    const asset = getCryptoAsset("mbtc")
+    expect(asset.name).toBe("Matsnet Bitcoin")
+    expect(asset.symbol).toBe("BTC")
+    expect(asset.decimals).toBe(18)
+    // FIXME: Test should expect the exact icon component
+    expect(asset.icon).toEqual(expect.any(Function))
+  })
+
+  it("returns the correct asset for 'musd'", () => {
+    const asset = getCryptoAsset("musd")
+    expect(asset.name).toBe("Mezo USD")
+    expect(asset.symbol).toBe("mUSD")
+    expect(asset.decimals).toBe(18)
+    expect(asset.icon).toBe(MUsdCircle)
+  })
+})

package/src/utils/cryptoAssets.ts

@@ -0,0 +1,93 @@
+import {
+  BitcoinCircle,
+  EthCircle,
+  IconProps,
+  MUsdCircle,
+  TBtcCircle,
+} from "@mezo-org/mezo-clay"
+import { createElement, FC } from "react"
+
+export type CryptoAssetKey = "btc" | "eth" | "tbtc" | "wbtc" | "mbtc" | "musd"
+
+export type CryptoAsset = {
+  name: string
+  symbol: string
+  icon: FC<IconProps>
+  decimals: number
+}
+
+const CRYPTO_ASSETS: Record<CryptoAssetKey, CryptoAsset> = {
+  btc: {
+    name: "Bitcoin",
+    symbol: "BTC",
+    icon: BitcoinCircle,
+    decimals: 8,
+  },
+  eth: {
+    name: "Ethereum",
+    symbol: "ETH",
+    icon: EthCircle,
+    decimals: 18,
+  },
+  tbtc: {
+    name: "Threshold Bitcoin",
+    symbol: "tBTC",
+    icon: TBtcCircle,
+    decimals: 18,
+  },
+  wbtc: {
+    name: "Wrapped Bitcoin",
+    symbol: "wBTC",
+    icon: (props) =>
+      createElement(BitcoinCircle, {
+        ...props,
+        symbolColor: "#FF8A00",
+        color: "#000000",
+      }),
+    decimals: 8,
+  },
+  mbtc: {
+    name: "Matsnet Bitcoin",
+    symbol: "BTC",
+    icon: (props) =>
+      createElement(BitcoinCircle, {
+        ...props,
+        symbolColor: "#000000",
+        color: "#FFC907",
+      }),
+    decimals: 18,
+  },
+  musd: {
+    name: "Mezo USD",
+    symbol: "mUSD",
+    icon: MUsdCircle,
+    decimals: 18,
+  },
+}
+
+/**
+ * Gets details of given crypto asset
+ * @param key The key of crypto asset
+ * @returns The crypto asset details
+ */
+export function getCryptoAsset(key: CryptoAssetKey) {
+  return CRYPTO_ASSETS[key]
+}
+
+/**
+ * Checks if given crypto asset is Bitcoin-like
+ * @param key The key of crypto asset
+ * @returns True if crypto asset is Bitcoin-like
+ */
+export function isBitcoinLikeCryptoAsset(key: CryptoAssetKey) {
+  return ["btc", "tbtc", "wbtc", "mbtc"].includes(key)
+}
+
+/**
+ * Checks if given crypto asset is USD-like
+ * @param key The key of crypto asset
+ * @returns True if crypto asset is USD-like
+ */
+export function isUsdLikeCryptoAsset(key: CryptoAssetKey) {
+  return ["musd"].includes(key)
+}

package/src/utils/currency.test.ts

@@ -0,0 +1,38 @@
+import { formatCurrency, formatUsd } from "./currency"
+
+describe("formatCurrency", () => {
+  it("formats a number as currency with default options", () => {
+    const result = formatCurrency(1234.5, { currency: "EUR" })
+    expect(result).toBe("€1,234.50")
+  })
+
+  it("respects minimumFractionDigits (min = 3, max = 3)", () => {
+    const result = formatCurrency(1.2, {
+      currency: "USD",
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3,
+    })
+    expect(result).toBe("$1.200")
+  })
+
+  it("respects maximumFractionDigits (min = 0, max = 1)", () => {
+    const result = formatCurrency(1.234567, {
+      currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 1,
+    })
+    expect(result).toBe("$1.2")
+  })
+})
+
+describe("formatUsd", () => {
+  it("formats a number as USD", () => {
+    const result = formatUsd(99.99)
+    expect(result).toBe("$99.99")
+  })
+
+  it("formats zero", () => {
+    const result = formatUsd(0)
+    expect(result).toBe("$0.00")
+  })
+})

package/src/utils/currency.ts

@@ -0,0 +1,32 @@
+const DEFAULT_FORMAT_OPTIONS: Intl.NumberFormatOptions = {
+  style: "currency",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+}
+
+/**
+ * Formats a number as a currency
+ * @param value The value to format
+ * @param options The options to pass to the formatter
+ * @returns The formatted currency
+ */
+export function formatCurrency(
+  value: number,
+  options: Omit<Intl.NumberFormatOptions, "style"> = {},
+): string {
+  const formatter = new Intl.NumberFormat("en-US", {
+    ...DEFAULT_FORMAT_OPTIONS,
+    ...options,
+  })
+
+  return formatter.format(value)
+}
+
+/**
+ * Formats a number as a USD currency
+ * @param value The value to format
+ * @returns The formatted currency
+ */
+export function formatUsd(value: number): string {
+  return formatCurrency(value, { currency: "USD" })
+}

package/src/utils/numbers.test.ts

@@ -0,0 +1,89 @@
+import {
+  formatHumanReadableNumber,
+  formatTokenAmount,
+  fromFixedPoint,
+  roundUpNumber,
+} from "./numbers"
+
+describe("formatHumanReadableNumber", () => {
+  it("formats number less than 1000 with decimals", () => {
+    expect(formatHumanReadableNumber(123.456789, 2)).toBe("123.46")
+  })
+
+  it("formats thousands with K", () => {
+    expect(formatHumanReadableNumber(12_345, 2)).toBe("12.35K")
+  })
+
+  it("formats millions with M", () => {
+    expect(formatHumanReadableNumber(12_345_678, 2)).toBe("12.35M")
+  })
+
+  it("formats billions with B", () => {
+    expect(formatHumanReadableNumber(12_345_678_901, 2)).toBe("12.35B")
+  })
+
+  it("formats trillions with T", () => {
+    expect(formatHumanReadableNumber(12_345_678_901_234, 2)).toBe("12.35T")
+  })
+
+  it("formats bigint as readable number", () => {
+    expect(formatHumanReadableNumber(1234567890123456789n, 2)).toBe("> 1000T")
+  })
+
+  it("caps at > 1000T for huge numbers", () => {
+    const hugeNumber = 10 ** 18 // 1e18
+    expect(formatHumanReadableNumber(hugeNumber, 2)).toBe("> 1000T")
+  })
+})
+
+describe("roundUpNumber", () => {
+  it("rounds up to 2 decimals", () => {
+    expect(roundUpNumber(1.234)).toBe(1.24)
+  })
+
+  it("rounds up to 3 decimals", () => {
+    expect(roundUpNumber(9.87654, 3)).toBe(9.877)
+  })
+
+  it("rounds up exact decimal", () => {
+    expect(roundUpNumber(2.5, 1)).toBe(2.5)
+  })
+})
+
+describe("fromFixedPoint", () => {
+  it("converts fixed point with 18 decimals to float", () => {
+    const raw = 1234567890000000000n // 1.23456789 ETH in 18 decimals
+    expect(fromFixedPoint(raw, 18, 4)).toBe(1.2345)
+  })
+
+  it("converts with truncation to 2 decimals", () => {
+    const raw = 987654321000000000n // ~0.987654321 ETH
+    expect(fromFixedPoint(raw, 18, 2)).toBe(0.98)
+  })
+
+  it("handles large fixedPoint decimals", () => {
+    const raw = 1_000_000_000_000_000_000_000_000n // 1M with 6 decimals
+    expect(fromFixedPoint(raw, 6, 2)).toBe(1000000000000000000)
+  })
+})
+
+describe("formatTokenAmount", () => {
+  it("formats zero value with desired decimals", () => {
+    expect(formatTokenAmount(0, 18, 3)).toBe("0.000")
+    expect(formatTokenAmount("0", 18, 2)).toBe("0.00")
+  })
+
+  it("returns <0.01 if amount is less than minimum display value", () => {
+    expect(formatTokenAmount("1", 18, 2)).toBe("<0.01") // 1 wei = 1e-18
+  })
+
+  it("formats a normal value without rounding", () => {
+    const result = formatTokenAmount("1230000000000000000", 18, 2)
+    expect(result).toBe("1.23")
+  })
+
+  it("formats with rounding if withRoundUp = true", () => {
+    const result = formatTokenAmount("1234560000000000000", 18, 2, true)
+    expect(result).toBe("1.24")
+  })
+})

package/src/utils/numbers.ts

@@ -0,0 +1,110 @@
+/**
+ * Formats a number or bigint into a human-readable string with K, M, B, or T suffix.
+ * @param value The number or bigint to format.
+ * @param decimals Number of decimal places to include (ignored for bigint to avoid floating point issues).
+ * @returns The formatted number as a string.
+ */
+export function formatHumanReadableNumber(
+  value: number | bigint,
+  decimals: number = 4,
+): string {
+  const suffixes = ["", "K", "M", "B", "T"]
+  const numericValue = typeof value === "bigint" ? Number(value) : value
+
+  if (numericValue < 1000) return numericValue.toFixed(decimals)
+
+  const magnitude = Math.floor(Math.log10(numericValue) / 3)
+
+  if (magnitude >= suffixes.length) {
+    const max = 10 ** ((suffixes.length - 1) * 3) * 1000 - 1
+    const capped = max / 10 ** ((suffixes.length - 1) * 3)
+    return `> ${capped.toFixed(0)}${suffixes[suffixes.length - 1]}`
+  }
+
+  const scaledValue = numericValue / 10 ** (magnitude * 3)
+  return `${scaledValue.toFixed(decimals)}${suffixes[magnitude]}`
+}
+
+/**
+ * Returns a number rounded up to the desired number of decimals.
+ * @param amount The number to round up.
+ * @param desiredDecimals The number of decimals to round up to.
+ * @returns The rounded up number.
+ * @see https://github.com/thesis/acre/blob/main/dapp/src/utils/numbersUtils.ts#L1-L3
+ */
+export function roundUpNumber(amount: number, desiredDecimals = 2): number {
+  return Math.ceil(amount * 10 ** desiredDecimals) / 10 ** desiredDecimals
+}
+
+/**
+ * Convert a fixed point bigint with precision `fixedPointDecimals` to a
+ * floating point number truncated to `desiredDecimals`.
+ * @param fixedPoint The fixed point bigint to convert.
+ * @param fixedPointDecimals The number of decimals in the fixed point bigint.
+ * @param desiredDecimals The number of decimals in the output number.
+ * @returns The floating point number truncated to `desiredDecimals`.
+ * @see https://github.com/tahowallet/extension/blob/main/background/lib/fixed-point.ts#L216-L239
+ */
+export function fromFixedPoint(
+  fixedPoint: bigint,
+  fixedPointDecimals: number,
+  desiredDecimals = 2,
+): number {
+  const fixedPointDesiredDecimalsAmount =
+    fixedPoint /
+    10n ** BigInt(Math.max(1, fixedPointDecimals - desiredDecimals))
+
+  const formattedAmount =
+    Number(fixedPointDesiredDecimalsAmount) /
+    10 ** Math.min(desiredDecimals, fixedPointDecimals)
+
+  return formattedAmount
+}
+
+/**
+ * Display a cryptoAsset amount correctly with desired decimals.
+ * The function returns a string with a language-sensitive representation of this number.
+ * - If the amount entered is zero, return the result with the desired decimals.
+ *   For example, 0.00 for a precision of 2.
+ * - If `formattedAmount` is less than the minimum amount to display
+ *  for the specified precision return information about this.
+ *  For example, <0.01 for a precision of 2.
+ *  - Other amounts are formatted according to the use of the `bigIntToUserAmount` function.
+ * @param amount The amount of tokens to format.
+ * @param decimals The number of decimals the cryptoAsset has.
+ * @param desiredDecimals The number of decimals to display.
+ * @param withRoundUp If true, the amount will be rounded up.
+ * @returns The formatted cryptoAsset amount.
+ * @see https://github.com/thesis/acre/blob/main/dapp/src/utils/numbersUtils.ts#L57-L87
+ */
+export function formatTokenAmount(
+  amount: number | string | bigint,
+  decimals = 18,
+  desiredDecimals = 2,
+  withRoundUp = false,
+) {
+  const fixedPoint = BigInt(amount)
+
+  if (fixedPoint === 0n) {
+    return `0.${"0".repeat(desiredDecimals)}`
+  }
+
+  const formattedAmount = fromFixedPoint(
+    fixedPoint,
+    decimals,
+    // To round the amount up, let's increase the precision by one.
+    // The desired decimal numbers will be set later anyway.
+    withRoundUp ? desiredDecimals + 1 : desiredDecimals,
+  )
+
+  const minAmountToDisplay = 1 / 10 ** Math.min(desiredDecimals, decimals)
+
+  if (minAmountToDisplay > formattedAmount) {
+    return `<0.${"0".repeat(desiredDecimals - 1)}1`
+  }
+
+  const finalFormattedAmount = withRoundUp
+    ? roundUpNumber(formattedAmount, desiredDecimals)
+    : formattedAmount
+  return formatHumanReadableNumber(finalFormattedAmount, desiredDecimals)
+}