@mezo-org/passport 0.4.0-dev.20 → 0.4.0-dev.21

package/src/utils/cryptoAssets.test.ts

@@ -1,16 +1,16 @@
+import { BitcoinCircle, EthCircle, MUsdCircle02 } from "@mezo-org/mezo-clay"
 import {
-  BitcoinCircle,
-  EthCircle,
-  MUsdCircle,
-  TBtcCircle,
-} from "@mezo-org/mezo-clay"
-import { getCryptoAsset } from "./cryptoAssets"
+  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'", () => {
-    const asset = getCryptoAsset("btc")
+    const asset = getCryptoAsset("BTC")
     expect(asset.name).toBe("Bitcoin")
     expect(asset.symbol).toBe("BTC")
     expect(asset.decimals).toBe(8)
@@ -18,44 +18,62 @@ describe("getCryptoAsset", () => {
   })
 
   it("returns the correct asset for 'eth'", () => {
-    const asset = getCryptoAsset("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")
+  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(TBtcCircle)
+    expect(asset.icon).toBe(MUsdCircle02)
   })
+})
 
-  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))
-  })
+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 },
+  ]
 
-  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))
+  cases.forEach(({ input, expected }) => {
+    it(`returns ${expected} for ${input}`, () => {
+      expect(isBitcoinLikeCryptoAsset(input as CryptoAssetKey)).toBe(expected)
+    })
   })
+})
 
-  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)
+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

@@ -2,12 +2,19 @@ import {
   BitcoinCircle,
   EthCircle,
   IconProps,
-  MUsdCircle,
-  TBtcCircle,
+  MUsdCircle02,
+  Cryptocurrency04,
 } from "@mezo-org/mezo-clay"
-import { createElement, FC } from "react"
+import { FC } from "react"
+import { MezoChainToken } from "../lib/contracts"
+import { formatUsd } from "./currency"
+import {
+  fromFixedPointToString,
+  fromFixedPoint,
+  fromFloatToBigInt,
+} from "./numbers"
 
-export type CryptoAssetKey = "btc" | "eth" | "tbtc" | "wbtc" | "mbtc" | "musd"
+export type CryptoAssetKey = MezoChainToken | "BTC" | "ETH"
 
 export type CryptoAsset = {
   name: string
@@ -16,51 +23,85 @@ export type CryptoAsset = {
   decimals: number
 }
 
+// TODO: Add actual icons for the assets
+
 const CRYPTO_ASSETS: Record<CryptoAssetKey, CryptoAsset> = {
-  btc: {
+  BTC: {
     name: "Bitcoin",
     symbol: "BTC",
     icon: BitcoinCircle,
     decimals: 8,
   },
-  eth: {
+  ETH: {
     name: "Ethereum",
     symbol: "ETH",
     icon: EthCircle,
     decimals: 18,
   },
-  tbtc: {
-    name: "Threshold Bitcoin",
-    symbol: "tBTC",
-    icon: TBtcCircle,
+  MUSD: {
+    name: "MUSD",
+    symbol: "MUSD",
+    icon: MUsdCircle02,
+    decimals: 18,
+  },
+  mDAI: {
+    name: "mDAI",
+    symbol: "mDAI",
+    icon: Cryptocurrency04,
     decimals: 18,
   },
-  wbtc: {
-    name: "Wrapped Bitcoin",
-    symbol: "wBTC",
-    icon: (props) =>
-      createElement(BitcoinCircle, {
-        ...props,
-        symbolColor: "#FF8A00",
-        color: "#000000",
-      }),
+  mFBTC: {
+    name: "mFBTC",
+    symbol: "mFBTC",
+    icon: BitcoinCircle,
     decimals: 8,
   },
-  mbtc: {
-    name: "Matsnet Bitcoin",
-    symbol: "BTC",
-    icon: (props) =>
-      createElement(BitcoinCircle, {
-        ...props,
-        symbolColor: "#000000",
-        color: "#FFC907",
-      }),
+  mcbBTC: {
+    name: "mcbBTC",
+    symbol: "mcbBTC",
+    icon: BitcoinCircle,
+    decimals: 8,
+  },
+  mSolvBTC: {
+    name: "mSolvBTC",
+    symbol: "mSolvBTC",
+    icon: BitcoinCircle,
     decimals: 18,
   },
-  musd: {
-    name: "Mezo USD",
-    symbol: "MUSD",
-    icon: MUsdCircle,
+  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,
   },
 }
@@ -80,7 +121,7 @@ export function getCryptoAsset(key: CryptoAssetKey) {
  * @returns True if crypto asset is Bitcoin-like
  */
 export function isBitcoinLikeCryptoAsset(key: CryptoAssetKey) {
-  return ["btc", "tbtc", "wbtc", "mbtc"].includes(key)
+  return /(btc)/i.test(key)
 }
 
 /**
@@ -89,5 +130,44 @@ export function isBitcoinLikeCryptoAsset(key: CryptoAssetKey) {
  * @returns True if crypto asset is USD-like
  */
 export function isUsdLikeCryptoAsset(key: CryptoAssetKey) {
-  return ["musd"].includes(key)
+  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: number,
+) {
+  const { decimals } = getCryptoAsset(type)
+
+  const formattedBalance = fromFixedPointToString(
+    balance,
+    decimals,
+    isUsdLikeCryptoAsset(type) ? 2 : 4,
+  )
+
+  const usdBalance = fromFixedPoint(
+    // Native BigInt constructor doesn't support floating point numbers.
+    balance * fromFloatToBigInt(usdConversionRate, 0),
+    decimals,
+  )
+
+  const formattedUsdBalance = formatUsd(usdBalance)
+
+  return {
+    type,
+    rawBalance: balance,
+    formattedBalance,
+    usdBalance,
+    formattedUsdBalance,
+  }
+}
+
+export type DetailedCryptoAsset = ReturnType<typeof mapCryptoAssetToDetails>

package/src/utils/numbers.ts

@@ -118,3 +118,71 @@ export const fromFixedPointToString = (
     : formattedAmount
   return formatNumberToLocaleString(finalFormattedAmount, desiredDecimals)
 }
+
+/**
+ * Converts a floating-point number or string to a bigint representation
+ * scaled by the specified number of decimal places (default: 18).
+ *
+ * This function avoids floating-point precision issues by manually
+ * parsing and scaling the number.
+ *
+ * @param amount - A number or string containing a floating point number.
+ * @param decimals - Number of decimals to scale to (default: 18).
+ * @returns A bigint representation scaled to the given decimal places.
+ * @see https://github.com/thesis/mezo-portal/blob/3bd4f39cb77c39948af2886a6ce7415a0c60307a/dapp/src/shared/utils/numbers.ts#L55
+ */
+export const fromFloatToBigInt = (
+  amount: string | number,
+  decimals = 18,
+): bigint => {
+  const FLOATING_POINT_REGEX = /^-?\d{1,3}(,\d{3})*(\.\d+)?$|^-?\d+(\.\d+)?$/
+
+  const parseToFixedPointNumber = (
+    floatingPointString: string,
+  ): { amount: bigint; decimals: number } | undefined => {
+    if (!floatingPointString.match(FLOATING_POINT_REGEX)) {
+      return undefined
+    }
+
+    const [whole, decimalsPart, ...extra] = floatingPointString.split(".")
+
+    if (extra.length > 0) return undefined
+
+    const noThousandsSeparatorWhole = whole.replace(/,/g, "")
+    const setDecimals = decimalsPart ?? ""
+
+    try {
+      return {
+        amount: BigInt([noThousandsSeparatorWhole, setDecimals].join("")),
+        decimals: setDecimals.length,
+      }
+    } catch {
+      return undefined
+    }
+  }
+
+  const convertFixedPoint = (
+    fixedPoint: bigint,
+    fixedPointDecimals: number,
+    targetDecimals: number,
+  ): bigint => {
+    if (fixedPointDecimals >= targetDecimals) {
+      return fixedPoint / 10n ** BigInt(fixedPointDecimals - targetDecimals)
+    }
+
+    return fixedPoint * 10n ** BigInt(targetDecimals - fixedPointDecimals)
+  }
+
+  const parsedAmount = amount.toString()
+  const fixedPointAmount = parseToFixedPointNumber(parsedAmount)
+
+  if (typeof fixedPointAmount === "undefined") {
+    return 0n
+  }
+
+  return convertFixedPoint(
+    fixedPointAmount.amount,
+    fixedPointAmount.decimals,
+    decimals,
+  )
+}

package/dist/src/components/Dropdown/Root/AccountAssets.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { CryptoAssetKey } from "../../../utils/cryptoAssets";
-type AccountAssetsProps = {
-    label: string | React.ReactNode;
-    assets: {
-        type: CryptoAssetKey;
-        balance: string;
-        balanceInUsd: string;
-    }[];
-};
-export default function AccountAssets(props: AccountAssetsProps): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=AccountAssets.d.ts.map

package/dist/src/components/Dropdown/Root/AccountAssets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccountAssets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountAssets.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,cAAc,EAAkB,MAAM,6BAA6B,CAAA;AAE5E,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,cAAc,CAAA;QACpB,OAAO,EAAE,MAAM,CAAA;QACf,YAAY,EAAE,MAAM,CAAA;KACrB,EAAE,CAAA;CACJ,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BAyF9D"}

package/dist/src/components/Dropdown/Root/AccountAssets.js

@@ -1,43 +0,0 @@
-import { Block, LabelSmall, ParagraphSmall, useStyletron, } from "@mezo-org/mezo-clay";
-import React, { useMemo } from "react";
-import { getCryptoAsset } from "../../../utils/cryptoAssets";
-export default function AccountAssets(props) {
-    const { label, assets } = props;
-    const [, theme] = useStyletron();
-    const assetsData = useMemo(() => assets.map((token) => {
-        const { name, symbol, icon } = getCryptoAsset(token.type);
-        return {
-            ...token,
-            icon,
-            label: name,
-            symbol,
-        };
-    }), [assets]);
-    const labelContent = typeof label === "string" ? (React.createElement(ParagraphSmall, { margin: 0, color: theme.colors.gray800 }, label)) : (label);
-    if (assetsData.length === 0) {
-        return null;
-    }
-    return (React.createElement(Block, { padding: `0 ${theme.sizing.scale500}` },
-        React.createElement(Block, { margin: `${theme.sizing.scale400} 0` }, labelContent),
-        React.createElement(Block, { as: "ul", marginBottom: theme.sizing.scale600, padding: 0, display: "flex", flexDirection: "column", overrides: {
-                Block: {
-                    style: {
-                        gap: theme.sizing.scale100,
-                    },
-                },
-            } }, assetsData.map((asset) => (React.createElement(Block, { as: "li", key: `${asset.type}-${asset.balance}`, display: "flex", justifyContent: "space-between", alignItems: "center", margin: `${theme.sizing.scale100} 0` },
-            React.createElement(asset.icon, { size: theme.sizing.scale800, overrides: {
-                    Svg: {
-                        style: {
-                            marginRight: theme.sizing.scale500,
-                        },
-                    },
-                } }),
-            React.createElement(Block, { flex: 1 },
-                React.createElement(LabelSmall, { margin: 0 }, asset.label),
-                React.createElement(ParagraphSmall, { margin: 0, color: theme.colors.gray500 }, asset.symbol)),
-            React.createElement(Block, { display: "flex", alignItems: "end", flexDirection: "column" },
-                React.createElement(LabelSmall, { margin: 0 }, asset.balance),
-                React.createElement(ParagraphSmall, { margin: 0, color: theme.colors.gray500 }, asset.balanceInUsd))))))));
-}
-//# sourceMappingURL=AccountAssets.js.map

package/dist/src/components/Dropdown/Root/AccountAssets.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccountAssets.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountAssets.tsx"],"names":[],"mappings":"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"}

package/dist/src/hooks/useAssetsUSDConversion.d.ts

@@ -1,8 +0,0 @@
-import { UseBaseQueryOptions } from "@tanstack/react-query";
-type AssetsUsdConversion = {
-    btcUsd: string;
-    ethUsd: string;
-};
-export declare function useAssetsUsdConversion(useQueryOptions?: Partial<UseBaseQueryOptions<AssetsUsdConversion>>): import("@tanstack/react-query").UseQueryResult<AssetsUsdConversion, Error>;
-export {};
-//# sourceMappingURL=useAssetsUSDConversion.d.ts.map

package/dist/src/hooks/useAssetsUSDConversion.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAssetsUSDConversion.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAssetsUSDConversion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,MAAM,uBAAuB,CAAA;AAKrE,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,sBAAsB,CACpC,eAAe,GAAE,OAAO,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAM,8EAmBxE"}

package/dist/src/hooks/useAssetsUSDConversion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAssetsUSDConversion.js","sourceRoot":"","sources":["../../../src/hooks/useAssetsUSDConversion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAOzD,MAAM,UAAU,sBAAsB,CACpC,kBAAqE,EAAE;IAEvE,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,QAAQ,CAAC;QACd,QAAQ,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC;QAC5C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAC1C,MAAM,eAAe,CAAC,mBAAmB,EAAE,CAAA;YAE7C,OAAO;gBACL,MAAM,EAAE,gBAAgB;gBACxB,MAAM,EAAE,gBAAgB;aACzB,CAAA;QACH,CAAC;QACD,SAAS,EAAE,EAAE,GAAG,aAAa;QAC7B,KAAK,EAAE,CAAC;QACR,GAAG,eAAe;KACnB,CAAC,CAAA;AACJ,CAAC"}

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

@@ -1,108 +0,0 @@
-import {
-  Block,
-  LabelSmall,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React, { useMemo } from "react"
-import { CryptoAssetKey, getCryptoAsset } from "../../../utils/cryptoAssets"
-
-type AccountAssetsProps = {
-  label: string | React.ReactNode
-  assets: {
-    type: CryptoAssetKey
-    balance: string
-    balanceInUsd: string
-  }[]
-}
-
-export default function AccountAssets(props: AccountAssetsProps) {
-  const { label, assets } = props
-
-  const [, theme] = useStyletron()
-
-  const assetsData = useMemo(
-    () =>
-      assets.map((token) => {
-        const { name, symbol, icon } = getCryptoAsset(token.type)
-
-        return {
-          ...token,
-          icon,
-          label: name,
-          symbol,
-        }
-      }),
-    [assets],
-  )
-
-  const labelContent =
-    typeof label === "string" ? (
-      <ParagraphSmall margin={0} color={theme.colors.gray800}>
-        {label}
-      </ParagraphSmall>
-    ) : (
-      label
-    )
-
-  if (assetsData.length === 0) {
-    return null
-  }
-
-  return (
-    <Block padding={`0 ${theme.sizing.scale500}`}>
-      <Block margin={`${theme.sizing.scale400} 0`}>{labelContent}</Block>
-
-      <Block
-        as="ul"
-        marginBottom={theme.sizing.scale600}
-        padding={0}
-        display="flex"
-        flexDirection="column"
-        overrides={{
-          Block: {
-            style: {
-              gap: theme.sizing.scale100,
-            },
-          },
-        }}
-      >
-        {assetsData.map((asset) => (
-          <Block
-            as="li"
-            key={`${asset.type}-${asset.balance}`}
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            margin={`${theme.sizing.scale100} 0`}
-          >
-            <asset.icon
-              size={theme.sizing.scale800}
-              overrides={{
-                Svg: {
-                  style: {
-                    marginRight: theme.sizing.scale500,
-                  },
-                },
-              }}
-            />
-
-            <Block flex={1}>
-              <LabelSmall margin={0}>{asset.label}</LabelSmall>
-              <ParagraphSmall margin={0} color={theme.colors.gray500}>
-                {asset.symbol}
-              </ParagraphSmall>
-            </Block>
-
-            <Block display="flex" alignItems="end" flexDirection="column">
-              <LabelSmall margin={0}>{asset.balance}</LabelSmall>
-              <ParagraphSmall margin={0} color={theme.colors.gray500}>
-                {asset.balanceInUsd}
-              </ParagraphSmall>
-            </Block>
-          </Block>
-        ))}
-      </Block>
-    </Block>
-  )
-}