@mezo-org/passport 0.4.0-dev.5 → 0.4.0-dev.50

package/src/lib/contracts/priceOracle.ts

@@ -0,0 +1,53 @@
+import { Address } from "viem"
+
+export default {
+  address: "0x7b7c000000000000000000000000000000000015" as Address,
+  abi: [
+    {
+      inputs: [],
+      name: "decimals",
+      outputs: [
+        {
+          internalType: "uint8",
+          name: "",
+          type: "uint8",
+        },
+      ],
+      stateMutability: "view",
+      type: "function",
+    },
+    {
+      inputs: [],
+      name: "latestRoundData",
+      outputs: [
+        {
+          internalType: "uint80",
+          name: "roundId",
+          type: "uint80",
+        },
+        {
+          internalType: "int256",
+          name: "answer",
+          type: "int256",
+        },
+        {
+          internalType: "uint256",
+          name: "startedAt",
+          type: "uint256",
+        },
+        {
+          internalType: "uint256",
+          name: "updatedAt",
+          type: "uint256",
+        },
+        {
+          internalType: "uint80",
+          name: "answeredInRound",
+          type: "uint80",
+        },
+      ],
+      stateMutability: "view",
+      type: "function",
+    },
+  ] as const,
+}

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", "testnet"].includes(environment)) {
+    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/stores/dropdownStore.ts

@@ -0,0 +1,20 @@
+import { create } from "zustand"
+
+export enum DropdownView {
+  ROOT = "ROOT",
+  RECEIVE = "RECEIVE",
+}
+
+interface DropdownStore {
+  view: DropdownView
+  setView: (view: DropdownView) => void
+  isNestedView: () => boolean
+}
+
+const useDropdownStore = create<DropdownStore>((set, get) => ({
+  view: DropdownView.ROOT,
+  setView: (view: DropdownView) => set({ view }),
+  isNestedView: () => get().view !== DropdownView.ROOT,
+}))
+
+export default useDropdownStore

package/src/utils/address.test.ts

@@ -0,0 +1,48 @@
+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)
+  })
+})
+
+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}`)
+  })
+
+  it("returns correct mainnet Mezo explorer URL", () => {
+    const url = getAddressExplorerUrl(evmAddress, "mezo", false)
+    expect(url).toBe(`https://explorer.mezo.org/address/${evmAddress}`)
+  })
+
+  it("returns correct testnet Mezo explorer URL", () => {
+    const url = getAddressExplorerUrl(evmAddress, "mezo", true)
+    expect(url).toBe(`https://explorer.test.mezo.org/address/${evmAddress}`)
+  })
+})

package/src/utils/address.ts

@@ -0,0 +1,45 @@
+/**
+ * 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" | "mezo", string> = {
+  bitcoin: "https://mempool.space",
+  evm: "https://etherscan.io",
+  mezo: "https://explorer.mezo.org",
+}
+
+const TESTNET_EXPLORER_URLS: Record<"bitcoin" | "evm" | "mezo", string> = {
+  bitcoin: "https://mempool.space/testnet",
+  evm: "https://sepolia.etherscan.io",
+  mezo: "https://explorer.test.mezo.org",
+}
+
+/**
+ * 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" | "mezo",
+  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,79 @@
+import { BitcoinCircle, EthCircle, MUsdCircle02 } from "@mezo-org/mezo-clay"
+import {
+  CryptoAssetKey,
+  getCryptoAsset,
+  isBitcoinLikeCryptoAsset,
+  isUsdLikeCryptoAsset,
+} from "./cryptoAssets"
+
+// FIXME: Test fails if run in full suite (pnpm test) but works when run in isolation (pnpm test cryptoAssets)
+
+describe("getCryptoAsset", () => {
+  it("returns the correct asset for 'BTC (mBTC)'", () => {
+    const asset = getCryptoAsset("BTC")
+    expect(asset.name).toBe("Bitcoin")
+    expect(asset.symbol).toBe("BTC")
+    expect(asset.decimals).toBe(18)
+    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 'MUSD'", () => {
+    const asset = getCryptoAsset("MUSD")
+    expect(asset.name).toBe("MUSD")
+    expect(asset.symbol).toBe("MUSD")
+    expect(asset.decimals).toBe(18)
+    expect(asset.icon).toBe(MUsdCircle02)
+  })
+})
+
+describe("isBitcoinLikeCryptoAsset", () => {
+  const cases = [
+    { input: "mcbBTC", expected: true },
+    { input: "mDAI", expected: false },
+    { input: "mFBTC", expected: true },
+    { input: "mSolvBTC", expected: true },
+    { input: "mswBTC", expected: true },
+    { input: "mT", expected: false },
+    { input: "mUSDC", expected: false },
+    { input: "mUSDe", expected: false },
+    { input: "mUSDT", expected: false },
+    { input: "mxSolvBTC", expected: true },
+    { input: "MUSD", expected: false },
+  ]
+
+  cases.forEach(({ input, expected }) => {
+    it(`returns ${expected} for ${input}`, () => {
+      expect(isBitcoinLikeCryptoAsset(input as CryptoAssetKey)).toBe(expected)
+    })
+  })
+})
+
+describe("isUsdLikeCryptoAsset", () => {
+  const cases = [
+    { input: "mcbBTC", expected: false },
+    { input: "mDAI", expected: true },
+    { input: "mFBTC", expected: false },
+    { input: "mSolvBTC", expected: false },
+    { input: "mswBTC", expected: false },
+    { input: "mT", expected: false },
+    { input: "mUSDC", expected: true },
+    { input: "mUSDe", expected: true },
+    { input: "mUSDT", expected: true },
+    { input: "mxSolvBTC", expected: false },
+    { input: "MUSD", expected: true },
+  ]
+
+  cases.forEach(({ input, expected }) => {
+    it(`returns ${expected} for ${input}`, () => {
+      expect(isUsdLikeCryptoAsset(input as CryptoAssetKey)).toBe(expected)
+    })
+  })
+})

package/src/utils/cryptoAssets.ts

@@ -0,0 +1,173 @@
+import {
+  BitcoinCircle,
+  EthCircle,
+  IconProps,
+  MUsdCircle02,
+  Cryptocurrency04,
+} from "@mezo-org/mezo-clay"
+import { FC } from "react"
+import { MezoChainToken } from "../lib/contracts"
+import { formatUsd } from "./currency"
+import { fromFixedPointToString, fromFixedPoint } from "./numbers"
+
+export type CryptoAssetKey = MezoChainToken | "BTC" | "ETH"
+
+export type CryptoAsset = {
+  name: string
+  symbol: string
+  icon: FC<IconProps>
+  decimals: number
+}
+
+// TODO: Add actual icons for the assets
+
+const CRYPTO_ASSETS: Record<CryptoAssetKey, CryptoAsset> = {
+  BTC: {
+    name: "Bitcoin",
+    symbol: "BTC",
+    icon: BitcoinCircle,
+    decimals: 18,
+  },
+  ETH: {
+    name: "Ethereum",
+    symbol: "ETH",
+    icon: EthCircle,
+    decimals: 18,
+  },
+  MUSD: {
+    name: "MUSD",
+    symbol: "MUSD",
+    icon: MUsdCircle02,
+    decimals: 18,
+  },
+  mDAI: {
+    name: "mDAI",
+    symbol: "mDAI",
+    icon: Cryptocurrency04,
+    decimals: 18,
+  },
+  mFBTC: {
+    name: "mFBTC",
+    symbol: "mFBTC",
+    icon: BitcoinCircle,
+    decimals: 8,
+  },
+  mcbBTC: {
+    name: "mcbBTC",
+    symbol: "mcbBTC",
+    icon: BitcoinCircle,
+    decimals: 8,
+  },
+  mSolvBTC: {
+    name: "mSolvBTC",
+    symbol: "mSolvBTC",
+    icon: BitcoinCircle,
+    decimals: 18,
+  },
+  mswBTC: {
+    name: "mswBTC",
+    symbol: "mswBTC",
+    icon: BitcoinCircle,
+    decimals: 8,
+  },
+  mT: {
+    name: "mT",
+    symbol: "mT",
+    icon: Cryptocurrency04,
+    decimals: 18,
+  },
+  mUSDC: {
+    name: "mUSDC",
+    symbol: "mUSDC",
+    icon: Cryptocurrency04,
+    decimals: 6,
+  },
+  mUSDe: {
+    name: "mUSDe",
+    symbol: "mUSDe",
+    icon: Cryptocurrency04,
+    decimals: 18,
+  },
+  mUSDT: {
+    name: "mUSDT",
+    symbol: "mUSDT",
+    icon: Cryptocurrency04,
+    decimals: 6,
+  },
+  mxSolvBTC: {
+    name: "mxSolvBTC",
+    symbol: "mxSolvBTC",
+    icon: BitcoinCircle,
+    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)/i.test(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 /(usd|dai)/i.test(key)
+}
+
+/**
+ * Formats crypto asset to balance details (balance in USD and decimals)
+ * @param type The type of crypto asset
+ * @param balance The balance of crypto asset
+ * @param usdConversionRate The USD conversion rate
+ * @returns The balance details
+ */
+export function mapCryptoAssetToDetails(
+  type: CryptoAssetKey,
+  balance: bigint,
+  usdConversionRate?: bigint,
+  usdConversionRateDecimals?: number,
+) {
+  const { decimals } = getCryptoAsset(type)
+
+  const formattedBalance = fromFixedPointToString(
+    balance,
+    decimals,
+    isUsdLikeCryptoAsset(type) ? 2 : 4,
+  )
+
+  let usdBalance = fromFixedPoint(balance, decimals)
+
+  if (usdConversionRate && usdConversionRateDecimals) {
+    usdBalance = fromFixedPoint(
+      (usdConversionRate * balance) / 10n ** BigInt(decimals),
+      usdConversionRateDecimals,
+    )
+  }
+
+  const formattedUsdBalance = formatUsd(usdBalance)
+
+  return {
+    type,
+    rawBalance: balance,
+    formattedBalance,
+    usdBalance,
+    formattedUsdBalance,
+  }
+}
+
+export type DetailedCryptoAsset = ReturnType<typeof mapCryptoAssetToDetails>

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" })
+}