@mezo-org/passport 0.4.0-dev.81 → 0.4.0-dev.83

package/dist/src/utils/numbers.test.js

@@ -1,4 +1,4 @@
-import { formatNumberToCompactString, fromFixedPoint, roundUpNumber, formatNumberToLocaleString, fromFixedPointToString, bigIntMax, } from "./numbers";
+import { formatNumberToCompactString, bigIntMax, normalizePrecision, } from "./numbers";
 describe("formatNumberToCompactString", () => {
     it("formats number less than 1000 with decimals", () => {
         expect(formatNumberToCompactString(123.456789, 2)).toBe("123.46");
@@ -26,147 +26,6 @@ describe("formatNumberToCompactString", () => {
         expect(formatNumberToCompactString(1_000, 2)).toBe("1K");
     });
 });
-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)).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 = 1000000000000000000000000n; // 1M with 6 decimals
-        expect(fromFixedPoint(raw, 6, 2)).toBe(1000000000000000000);
-    });
-});
-describe("formatNumberToLocaleString", () => {
-    it("formats zero with 0 decimals", () => {
-        expect(formatNumberToLocaleString(0, 0)).toBe("0");
-    });
-    it("formats zero with >0 decimals", () => {
-        expect(formatNumberToLocaleString(0, 2)).toBe("0.00");
-        expect(formatNumberToLocaleString(0, 4)).toBe("0.0000");
-    });
-    it("formats small decimal number", () => {
-        expect(formatNumberToLocaleString(0.123456, 2)).toBe("0.12");
-        expect(formatNumberToLocaleString(0.123456, 4)).toBe("0.1235");
-    });
-    it("formats number just above 1", () => {
-        expect(formatNumberToLocaleString(1.000001, 3)).toBe("1.000");
-        expect(formatNumberToLocaleString(1.234567, 2)).toBe("1.23");
-    });
-    it("formats whole number", () => {
-        expect(formatNumberToLocaleString(1234, 0)).toBe("1,234");
-        expect(formatNumberToLocaleString(1000, 2)).toBe("1,000.00");
-    });
-    it("formats number with trailing decimal zeroes", () => {
-        expect(formatNumberToLocaleString(10.1, 3)).toBe("10.100");
-        expect(formatNumberToLocaleString(5.0, 2)).toBe("5.00");
-    });
-    it("formats string input", () => {
-        expect(formatNumberToLocaleString("123.456", 2)).toBe("123.46");
-        expect(formatNumberToLocaleString("0.00123", 4)).toBe("0.0012");
-    });
-    it("formats negative number", () => {
-        expect(formatNumberToLocaleString(-123.456, 2)).toBe("-123.46");
-        expect(formatNumberToLocaleString("-0.00999", 3)).toBe("-0.010");
-    });
-    it("formats large number with commas", () => {
-        expect(formatNumberToLocaleString(12345678.9, 2)).toBe("12,345,678.90");
-    });
-    it("handles max decimals safely", () => {
-        expect(formatNumberToLocaleString(1.123456789, 8)).toBe("1.12345679");
-        expect(formatNumberToLocaleString("0.000000000000000001", 18)).toBe("0.000000000000000001");
-    });
-    it("defaults to 0 decimals if not passed", () => {
-        expect(formatNumberToLocaleString(1234.567)).toBe("1,235"); // rounds up by default
-    });
-});
-describe("fromFixedPointToString", () => {
-    const toFixedPoint = (num) => BigInt(Math.round(num * 1e18));
-    const cases = [
-        { input: 2.0, expected: "2.000" },
-        { input: 2.009, expected: "2.009" },
-        { input: 2.01, expected: "2.010" },
-        { input: 2.015, expected: "2.016" },
-        { input: 2.05, expected: "2.050" },
-        { input: 2.09, expected: "2.090" },
-    ];
-    describe("withRoundUp: true", () => {
-        cases.forEach(({ input, expected }) => {
-            it(`formats ${input} → ${expected}`, () => {
-                const fixed = toFixedPoint(input);
-                expect(fromFixedPointToString(fixed, 18, 3, true)).toBe(expected);
-            });
-        });
-    });
-    describe("withRoundUp: false", () => {
-        const noRoundCases = [
-            { input: 2.0099, expected: "2.009" },
-            { input: 2.0159, expected: "2.015" },
-            { input: 2.0101, expected: "2.010" },
-            { input: 2.0199, expected: "2.019" },
-        ];
-        noRoundCases.forEach(({ input, expected }) => {
-            it(`formats ${input} → ${expected} (no rounding)`, () => {
-                const fixed = toFixedPoint(input);
-                expect(fromFixedPointToString(fixed, 18, 3, false)).toBe(expected);
-            });
-        });
-    });
-    describe("zero handling", () => {
-        it("formats 0 → 0.000 (3 decimals)", () => {
-            expect(fromFixedPointToString(0n, 18, 3)).toBe("0.000");
-        });
-        it("formats 0 → 0.0000 (4 decimals)", () => {
-            expect(fromFixedPointToString(0n, 18, 4)).toBe("0.0000");
-        });
-    });
-    describe("very small numbers below display threshold", () => {
-        it("returns <0.0001 for small number (3 decimals)", () => {
-            const small = BigInt(123); // ~1.23e-16
-            expect(fromFixedPointToString(small, 18, 4)).toBe("<0.0001");
-        });
-        it("returns <0.01 for small number with only 2 decimals", () => {
-            const tiny = BigInt(9999999999999); // <0.01
-            expect(fromFixedPointToString(tiny, 18, 2)).toBe("<0.01");
-        });
-    });
-    describe("input types", () => {
-        it("accepts bigint", () => {
-            const amount = 2100000000000000000n;
-            expect(fromFixedPointToString(amount, 18, 3)).toBe("2.100");
-        });
-        it("accepts string", () => {
-            expect(fromFixedPointToString("2000000000000000000", 18, 3)).toBe("2.000");
-        });
-        it("accepts number", () => {
-            expect(fromFixedPointToString(Number("1000000000000000000"), 18, 3)).toBe("1.000");
-        });
-    });
-    describe("high values", () => {
-        it("formats 1_000_000.123456789 correctly", () => {
-            const big = toFixedPoint(1_000_000.123456789);
-            expect(fromFixedPointToString(big, 18, 6)).toBe("1,000,000.123456");
-        });
-        it("formats 1e12 ETH", () => {
-            const big = BigInt("1000000000000000000000000000000");
-            expect(fromFixedPointToString(big, 18, 2)).toBe("1,000,000,000,000.00");
-        });
-    });
-});
 describe("bigIntMax", () => {
     it("returns the maximum of positive bigint values", () => {
         expect(bigIntMax(1n, 2n, 3n)).toBe(3n);
@@ -187,4 +46,27 @@ describe("bigIntMax", () => {
         expect(bigIntMax(5n, 5n, 5n)).toBe(5n);
     });
 });
+describe("normalizePrecision", () => {
+    it("reduces precision correctly (scale down)", () => {
+        const result = normalizePrecision(1234500n, 6, 3);
+        expect(result).toBe(1234n);
+    });
+    it("increases precision correctly (scale up)", () => {
+        const result = normalizePrecision(1234n, 3, 6);
+        expect(result).toBe(1234000n);
+    });
+    it("returns the same value when precision is equal", () => {
+        const result = normalizePrecision(987654321n, 5, 5);
+        expect(result).toBe(987654321n);
+    });
+    it("handles zero value correctly", () => {
+        const result = normalizePrecision(0n, 4, 8);
+        expect(result).toBe(0n);
+    });
+    it("handles large numbers without precision loss", () => {
+        const value = 123456789012345678901234567890n;
+        const result = normalizePrecision(value, 18, 20);
+        expect(result).toBe(value * 100n);
+    });
+});
 //# sourceMappingURL=numbers.test.js.map

package/dist/src/utils/numbers.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"numbers.test.js","sourceRoot":"","sources":["../../../src/utils/numbers.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"numbers.test.js","sourceRoot":"","sources":["../../../src/utils/numbers.test.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,SAAS,EACT,kBAAkB,GACnB,MAAM,WAAW,CAAA;AAElB,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,CAAC,2BAA2B,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACnE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,2BAA2B,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,2BAA2B,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACnE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,2BAA2B,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,2BAA2B,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3E,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,2BAA2B,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/D,eAAe,CAChB,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,UAAU,GAAG,EAAE,IAAI,EAAE,CAAA,CAAC,OAAO;QACnC,MAAM,CAAC,2BAA2B,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,2BAA2B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAClC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACnD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,MAAM,GAAG,kBAAkB,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,MAAM,GAAG,kBAAkB,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9C,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,MAAM,GAAG,kBAAkB,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QACnD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACjC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,kBAAkB,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAC3C,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,KAAK,GAAG,+BAA+B,CAAA;QAC7C,MAAM,MAAM,GAAG,kBAAkB,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;QAChD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAA;IACnC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.4.0-dev.81",
+  "version": "0.4.0-dev.83",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {
@@ -45,6 +45,7 @@
     "qrcode.react": "^4.2.0",
     "styletron-engine-monolithic": "^1.0.0",
     "usehooks-ts": "^3.1.1",
+    "motion": "^12.23.6",
     "zustand": "^5.0.3"
   },
   "peerDependencies": {

package/src/api/auth.ts

@@ -55,7 +55,7 @@ export type CreateSessionResponse =
 
 export type DeleteSessionResponse = { message: string }
 
-export type GetCurrentAccountResponse = Partial<Account> | null
+export type GetCurrentAccountResponse = Account | null
 
 export type GetAccountByMezoIdOrAddressResponse = {
   mezoId?: string

package/src/components/Dropdown/Content.tsx

@@ -3,44 +3,15 @@ import React, { useEffect } from "react"
 import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
 import Root from "./Root/Root"
 import Receive from "./Receive/Receive"
-import { DetailedCryptoAsset } from "../../utils/cryptoAssets"
 import TestnetTopBanner from "./TestnetTopBanner"
 
 type ContentProps = {
-  mezoId: string
-  matsBalance: number
-  accountAddress: string
-  walletAddress: string
-  walletType: "bitcoin" | "evm"
-  usdTotalBalance: number
-  usdTroveDebt: number
-  usdCollateral: number
-  assets: {
-    btc: DetailedCryptoAsset
-    musd: DetailedCryptoAsset
-  }
-  otherAssetsCount: number
-  otherAssetsUsdTotal: number
   onSignOut?: () => void
   onOtherAssetsClick?: () => void
 }
 
 function Content(props: ContentProps) {
-  const {
-    mezoId,
-    accountAddress,
-    walletAddress,
-    walletType,
-    usdTotalBalance,
-    assets,
-    matsBalance,
-    usdTroveDebt,
-    usdCollateral,
-    otherAssetsCount,
-    otherAssetsUsdTotal,
-    onSignOut,
-    onOtherAssetsClick,
-  } = props
+  const { onSignOut, onOtherAssetsClick } = props
 
   const [_, theme] = useStyletron()
 
@@ -71,26 +42,10 @@ function Content(props: ContentProps) {
       <TestnetTopBanner />
 
       {currentView === DropdownView.ROOT && (
-        <Root
-          mezoId={mezoId}
-          accountAddress={accountAddress}
-          walletAddress={walletAddress}
-          walletType={walletType}
-          usdTotalBalance={usdTotalBalance}
-          assets={assets}
-          matsBalance={matsBalance}
-          usdTroveDebt={usdTroveDebt}
-          usdCollateral={usdCollateral}
-          otherAssetsCount={otherAssetsCount}
-          otherAssetsUsdTotal={otherAssetsUsdTotal}
-          onSignOut={onSignOut}
-          onOtherAssetsClick={onOtherAssetsClick}
-        />
+        <Root onSignOut={onSignOut} onOtherAssetsClick={onOtherAssetsClick} />
       )}
 
-      {currentView === DropdownView.RECEIVE && (
-        <Receive address={accountAddress} />
-      )}
+      {currentView === DropdownView.RECEIVE && <Receive />}
     </Block>
   )
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -5,15 +5,13 @@ import {
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React, { useEffect, useMemo } from "react"
-import { useDisconnect } from "wagmi"
+import React from "react"
 import DefaultAvatar from "../../assets/DefaultAvatar"
-import useWalletAccount from "../../hooks/useWalletAccount"
 import ConnectedTrigger from "./ConnectedTrigger"
 import Content from "./Content"
 import DisconnectedTrigger from "./DisconnectedTrigger"
-import { useSignInWithWallet } from "../../hooks"
-import useDropdownData from "../../hooks/useDropdownData"
+import useWalletAccount from "../../hooks/useWalletAccount"
+import { useWatchTransferEventsForAllTokens } from "../../hooks/useWatchTransferEvents"
 
 export type DropdownProps = {
   /** The callback to be called when the user clicks the sign-out button */
@@ -28,10 +26,6 @@ export type DropdownProps = {
     signedOut?: Omit<ButtonProps, "onClick">
   }
   onOtherAssetsClick?: () => void
-  /** Time in milliseconds after which account data (like mats or mezo id) in dropdown should be re-fetched. Default is 90000 (90 secs) */
-  accountDataRefetchInterval?: number
-  /** Time in milliseconds after which native balance in dropdown should be re-fetched. Default is 90000 (90 secs) */
-  nativeBalanceRefetchInterval?: number
 } & Omit<StatefulPopoverProps, "children" | "content">
 
 /**
@@ -48,54 +42,23 @@ export function Dropdown(props: DropdownProps) {
     overrides,
     triggerProps,
     onOtherAssetsClick,
-    accountDataRefetchInterval,
-    nativeBalanceRefetchInterval,
     ...restProps
   } = props
 
   const [, theme] = useStyletron()
 
-  const data = useDropdownData({
-    accountDataRefetchInterval,
-    nativeBalanceRefetchInterval,
-  })
+  const { data: walletAccountData } = useWalletAccount()
 
-  const isCriticalDropdownDataLoaded = useMemo(
-    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
-    [data],
-  )
+  useWatchTransferEventsForAllTokens()
 
   const { openConnectModal } = useConnectModal()
 
-  const { isConnected } = useWalletAccount()
-
-  const { signInWithWalletAsync, isPending } = useSignInWithWallet()
-
-  const { disconnectAsync } = useDisconnect()
-
-  useEffect(() => {
-    if (onSignIn) return
-
-    const handleSignIn = async () => {
-      if (!isConnected) return
-
-      try {
-        await signInWithWalletAsync()
-      } catch (error) {
-        await disconnectAsync()
-      }
-    }
-
-    handleSignIn()
-  }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync])
-
-  if (!isConnected || !isCriticalDropdownDataLoaded) {
+  if (!walletAccountData?.isConnected) {
     return (
       <DisconnectedTrigger
         // If connect wallet flow is not provided it fallbacks to RainbowKit's
         // connect modal
         onClick={onSignIn || openConnectModal}
-        isLoading={isPending}
         {...triggerProps?.signedOut}
       >
         Sign in
@@ -107,17 +70,6 @@ export function Dropdown(props: DropdownProps) {
     <StatefulPopover
       content={
         <Content
-          mezoId={data.mezoId!}
-          matsBalance={data.matsBalance}
-          accountAddress={data.accountAddress!}
-          walletAddress={data.walletAddress!}
-          walletType={data.walletType}
-          usdTotalBalance={data.usdTotalBalance}
-          usdTroveDebt={data.usdTroveDebt}
-          usdCollateral={data.usdCollateral}
-          assets={data.assets}
-          otherAssetsCount={data.otherAssetsCount}
-          otherAssetsUsdTotal={data.otherAssetsUsdTotal}
           onSignOut={onSignOut}
           onOtherAssetsClick={onOtherAssetsClick}
         />
@@ -129,7 +81,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            width: "396px",
+            width: "402px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",

package/src/components/Dropdown/ListingItem.tsx

@@ -1,80 +1,176 @@
 import {
-  ListItem,
-  ListItemLabel,
   mergeOverrides,
-  ListItemLabelProps,
-  IconProps,
-  ListItemProps,
+  Block,
+  useStyletron,
+  BlockProps,
+  Skeleton,
+  LabelMedium,
+  ParagraphSmall,
 } from "@mezo-org/mezo-clay"
-import React, { FC } from "react"
+import React, { ReactNode } from "react"
+import SlotNumber from "./SlotNumber"
+import { formatUsd } from "../../utils/currency"
 
-const SHARED_LABEL_OVERRIDES: ListItemLabelProps["overrides"] = {
-  LabelDescription: {
-    style: {
-      color: "#4B4B4B", // contentSecondary
-    },
-  },
+type ListingItemLayoutProps = Omit<BlockProps, "children"> & {
+  icon: ReactNode
+  label: ReactNode
+  value: ReactNode
+  subLabel: ReactNode
+  subValue: ReactNode
+}
+
+function ListingItemLayout(props: ListingItemLayoutProps) {
+  const { icon, label, value, subLabel, subValue, overrides, ...restProps } =
+    props
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      paddingLeft={theme.sizing.scale600}
+      paddingRight={theme.sizing.scale600}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+              minHeight: "72px",
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    >
+      {icon && icon}
+
+      <Block display="flex" flexDirection="column" alignItems="flex-start">
+        {label && label}
+        {subLabel && subLabel}
+      </Block>
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-end"
+        marginLeft="auto"
+      >
+        {value && value}
+        {subValue && subValue}
+      </Block>
+    </Block>
+  )
 }
 
 type ListingItemProps = {
-  icon?: FC<IconProps>
-  label: string
+  icon?: ReactNode
+  label?: string
   subLabel?: string
-  value: string
-  subValue?: string
-  overrides?: ListItemProps["overrides"]
+  value?: number
+  subValue?: number
+  overrides?: BlockProps["overrides"]
+  isLoading?: boolean
 }
 
 export default function ListingItem(props: ListingItemProps) {
   const {
-    icon: Icon,
+    icon,
     label,
-    subLabel = "",
+    subLabel,
     value,
-    subValue = "",
+    subValue,
     overrides,
+    isLoading = false,
   } = props
 
-  return (
-    <ListItem
-      artwork={Icon}
-      // eslint-disable-next-line react/no-unstable-nested-components
-      endEnhancer={() => (
-        <ListItemLabel
-          description={subValue}
-          overrides={mergeOverrides(
-            {
-              LabelRoot: {
-                style: {
-                  textAlign: "right",
-                },
+  const [, theme] = useStyletron()
+
+  if (isLoading) {
+    return (
+      <ListingItemLayout
+        icon={
+          <Skeleton
+            animation
+            width={theme.sizing.scale800}
+            height={theme.sizing.scale800}
+          />
+        }
+        label={
+          <Skeleton
+            animation
+            width={theme.sizing.scale2400}
+            height={theme.sizing.scale600}
+            overrides={{
+              Root: {
+                style: { marginBottom: theme.sizing.scale100 },
               },
-            },
-            SHARED_LABEL_OVERRIDES,
-          )}
+            }}
+          />
+        }
+        subLabel={
+          <Skeleton
+            animation
+            width={theme.sizing.scale1600}
+            height={theme.sizing.scale550}
+          />
+        }
+        value={
+          <Skeleton
+            animation
+            width={theme.sizing.scale2400}
+            height={theme.sizing.scale600}
+            overrides={{
+              Root: {
+                style: { marginBottom: theme.sizing.scale100 },
+              },
+            }}
+          />
+        }
+        subValue={
+          <Skeleton
+            animation
+            width={theme.sizing.scale1600}
+            height={theme.sizing.scale550}
+          />
+        }
+        overrides={overrides}
+      />
+    )
+  }
+
+  return (
+    <ListingItemLayout
+      icon={icon}
+      label={<LabelMedium>{label}</LabelMedium>}
+      subLabel={
+        <ParagraphSmall
+          margin={0}
+          as="div"
+          color={theme.colors.contentSecondary}
         >
-          {value}
-        </ListItemLabel>
-      )}
-      overrides={mergeOverrides(
-        {
-          Root: {
-            style: {
-              backgroundColor: "transparent",
-            },
-          },
-          Content: {
-            style: {
-              border: 0,
-            },
-          },
-        },
-        overrides,
-      )}
-    >
-      <ListItemLabel description={subLabel} overrides={SHARED_LABEL_OVERRIDES}>
-        {label}
-      </ListItemLabel>
-    </ListItem>
+          {subLabel}
+        </ParagraphSmall>
+      }
+      value={
+        value !== undefined && (
+          <LabelMedium>
+            <SlotNumber formatFunction={formatUsd}>{value}</SlotNumber>
+          </LabelMedium>
+        )
+      }
+      subValue={
+        subValue !== undefined && (
+          <ParagraphSmall
+            margin={0}
+            as="div"
+            color={theme.colors.contentSecondary}
+          >
+            <SlotNumber formatFunction={formatUsd}>{subValue}</SlotNumber>
+          </ParagraphSmall>
+        )
+      }
+      overrides={overrides}
+    />
   )
 }