@mezo-org/passport 0.4.0-dev.82 → 0.4.0-dev.84

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

@@ -1,25 +1,24 @@
 import {
   ArrowNarrowLeft,
   Block,
+  BlockProps,
   Button,
   ButtonProps,
-  Cube01,
+  mergeOverrides,
   useStyletron,
 } from "@mezo-org/mezo-clay"
-import React, { useCallback } from "react"
+import React from "react"
 import { usePassportContext } from "../../../hooks/usePassportContext"
 import { getAddressExplorerUrl } from "../../../utils/address"
 import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
-
-type AccountAddressActionsProps = {
-  address: string
-}
+import useWalletAccount from "../../../hooks/useWalletAccount"
 
 const buttonStartEnhancerSize = 12
 
 const commonButtonProps: Partial<ButtonProps> = {
   kind: "secondary",
-  size: "xsmall",
+  size: "small",
+  shape: "pill",
   overrides: {
     BaseButton: {
       style: {
@@ -34,50 +33,40 @@ const commonButtonProps: Partial<ButtonProps> = {
   },
 }
 
-export default function AccountAddressActions(
-  props: AccountAddressActionsProps,
-) {
-  const { address } = props
+export default function AccountAddressActions(props: BlockProps) {
+  const { overrides, ...restProps } = props
 
   const [, theme] = useStyletron()
-
   const { environment } = usePassportContext()
+  const setDropdownView = useDropdownStore((state) => state.setView)
+  const handleReceiveClick = () => setDropdownView(DropdownView.RECEIVE)
+
+  const { data: walletAccountData } = useWalletAccount()
+
   const blockExplorerUrl = getAddressExplorerUrl(
-    address,
+    walletAccountData.accountAddress!,
     "mezo",
     environment === "testnet",
   )
 
-  const setDropdownView = useDropdownStore((state) => state.setView)
-
-  const handleReceiveClick = useCallback(() => {
-    setDropdownView(DropdownView.RECEIVE)
-  }, [setDropdownView])
-
   return (
     <Block
       display="flex"
       alignItems="center"
       backgroundColor="transparent"
-      marginBottom={theme.sizing.scale600}
-      overrides={{
-        Block: {
-          style: {
-            gap: theme.sizing.scale600,
+      padding={`0 ${theme.sizing.scale600} ${theme.sizing.scale800}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+            },
           },
         },
-      }}
+        overrides,
+      )}
+      {...restProps}
     >
-      <Button
-        startEnhancer={<Cube01 size={buttonStartEnhancerSize} />}
-        $as="a"
-        href={blockExplorerUrl}
-        target="_blank"
-        {...commonButtonProps}
-      >
-        View Mezo Explorer
-      </Button>
-
       <Button
         onClick={handleReceiveClick}
         startEnhancer={
@@ -96,6 +85,15 @@ export default function AccountAddressActions(
       >
         Receive
       </Button>
+
+      <Button
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+        {...commonButtonProps}
+      >
+        Block Explorer
+      </Button>
     </Block>
   )
 }

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

@@ -1,30 +1,68 @@
 import React from "react"
-import { useStyletron } from "@mezo-org/mezo-clay"
+import { BlockProps, useStyletron } from "@mezo-org/mezo-clay"
+import { formatUnits } from "viem"
 import ListingItem from "../ListingItem"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import AccountError from "./AccountError"
+import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates"
+import { usePassportContext } from "../../../hooks/usePassportContext"
 
-type AccountBalanceProps = {
-  totalBalance: string
-  totalDebt: string
-}
+type AccountBalanceProps = Omit<BlockProps, "children">
 
 export default function AccountBalance(props: AccountBalanceProps) {
-  const { totalBalance, totalDebt } = props
-
+  const { overrides, ...restProps } = props
   const [, theme] = useStyletron()
+  const { nativeBalanceRefetchInterval } = usePassportContext()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesDataPending,
+  } = useTokensBalances({
+    queryOptions: {
+      refetchInterval: nativeBalanceRefetchInterval,
+    },
+  })
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  if (isTokensBalancesDataPending || isBorrowDataPending) {
+    return <ListingItem isLoading overrides={overrides} />
+  }
+
+  if (isTokensBalancesError || isBorrowDataError) {
+    return (
+      <AccountError
+        padding={`${theme.sizing.scale500} ${theme.sizing.scale800}`}
+        topic="account balance"
+        overrides={overrides}
+      />
+    )
+  }
+
+  const totalBalanceInUsd = Object.values(tokensBalancesData).reduce(
+    (acc, tokenBalance) => acc + tokenBalance.usd.value,
+    0n,
+  )
+
+  const totalBalanceNumber = Number(
+    formatUnits(totalBalanceInUsd, CONVERSION_RATE_DECIMALS),
+  )
+
+  const totalDebtNumber = Number(borrowData.debtInUsd.formatted)
 
   return (
     <ListingItem
       label="Total assets"
-      value={totalBalance}
+      value={totalBalanceNumber}
       subLabel="Total liabilities"
-      subValue={totalDebt}
-      overrides={{
-        Root: {
-          style: {
-            borderBottom: `1px solid ${theme.colors.borderInverseSelected}`,
-          },
-        },
-      }}
+      subValue={totalDebtNumber}
+      overrides={overrides}
+      {...restProps}
     />
   )
 }

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { BitcoinCircle, BlockProps } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { getAsset } from "../../../utils/assets"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+
+type AccountBTCListingProps = Omit<BlockProps, "children">
+
+export default function AccountBTCListing(props: AccountBTCListingProps) {
+  const { nativeBalanceRefetchInterval } = usePassportContext()
+
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesPending,
+  } = useTokensBalances({
+    queryOptions: {
+      refetchInterval: nativeBalanceRefetchInterval,
+    },
+  })
+
+  if (isTokensBalancesError || isBorrowDataError) {
+    return <AccountError topic="Bitcoin balance" />
+  }
+
+  if (isTokensBalancesPending || isBorrowDataPending) {
+    return <ListingItem isLoading />
+  }
+
+  const btcBalance = Number(tokensBalancesData.BTC.usd.formatted)
+  const lockedCollateral = Number(borrowData.collateral.usd.formatted)
+
+  return (
+    <ListingItem
+      icon={<BitcoinCircle />}
+      label={getAsset("BTC").name}
+      value={btcBalance}
+      subLabel="Locked collateral"
+      subValue={lockedCollateral}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,34 @@
+import React from "react"
+import {
+  BlockProps,
+  LabelSmall,
+  mergeOverrides,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+
+type AccountErrorProps = {
+  topic: string
+} & BlockProps
+
+export default function AccountError(props: AccountErrorProps) {
+  const { topic, overrides, ...restProps } = props
+
+  const [, theme] = useStyletron()
+
+  return (
+    <LabelSmall
+      padding={`${theme.sizing.scale600} ${theme.sizing.scale800}`}
+      color="negative"
+      overrides={mergeOverrides(overrides, {
+        Block: {
+          style: {
+            lineHeight: theme.sizing.scale700,
+          },
+        },
+      })}
+      {...restProps}
+    >
+      An error occured loading {topic}.
+    </LabelSmall>
+  )
+}

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

@@ -0,0 +1,45 @@
+import React from "react"
+import { BlockProps, MUsdCircle02 } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { getAsset } from "../../../utils/assets"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+
+export default function AccountMusdListing(
+  props: Omit<BlockProps, "children">,
+) {
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesPending,
+  } = useTokensBalances()
+
+  if (isBorrowDataError || isTokensBalancesError) {
+    return <AccountError topic="MUSD balance" />
+  }
+
+  if (isBorrowDataPending || isTokensBalancesPending) {
+    return <ListingItem isLoading />
+  }
+
+  const musdBalance = Number(tokensBalancesData.MUSD.usd.formatted)
+  const lockedCollateral = Number(borrowData.debtInUsd.formatted)
+
+  return (
+    <ListingItem
+      icon={<MUsdCircle02 />}
+      label={getAsset("MUSD").name}
+      value={musdBalance}
+      subLabel="Borrowed"
+      subValue={lockedCollateral}
+      {...props}
+    />
+  )
+}

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

@@ -1,68 +1,85 @@
-import React, { useMemo } from "react"
-import { Block, useStyletron, CoinsStacked02 } from "@mezo-org/mezo-clay"
+import React from "react"
+import {
+  useStyletron,
+  CoinsStacked02,
+  mergeOverrides,
+  BlockProps,
+} from "@mezo-org/mezo-clay"
+import { formatUnits } from "viem"
 import ListingItem from "../ListingItem"
-import { formatUsd } from "../../../utils/currency"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates"
 
 type AccountOtherAssetsProps = {
-  assetsCount: number
-  assetsUsdTotal: number
   onClick?: () => void
-}
+} & Omit<BlockProps, "children">
 
 export default function AccountOtherAssets(props: AccountOtherAssetsProps) {
-  const { assetsCount, assetsUsdTotal, onClick } = props
+  const { onClick, overrides, ...restProps } = props
 
   const [, theme] = useStyletron()
 
-  const label = useMemo(() => {
-    if (assetsCount === 0) return "No other assets"
-    if (assetsCount === 1) return "1 more asset"
-    return `${assetsCount} more assets`
-  }, [assetsCount])
+  const {
+    data: tokensBalancesData,
+    isPending: isTokensBalancesPending,
+    isError: isTokensBalancesError,
+  } = useTokensBalances()
+
+  if (isTokensBalancesError) {
+    return (
+      <AccountError
+        topic="other assets"
+        paddingTop={theme.sizing.scale100}
+        paddingBottom={theme.sizing.scale100}
+        overrides={overrides}
+      />
+    )
+  }
 
-  const formattedAssetsUsdTotal = formatUsd(assetsUsdTotal)
+  if (isTokensBalancesPending) {
+    return <ListingItem isLoading overrides={overrides} />
+  }
+
+  const otherAssets = Object.values(tokensBalancesData)
+    .filter((asset) => !["BTC", "MUSD"].includes(asset.symbol))
+    .filter((asset) => asset.value > 0n)
+
+  const assetsCount = otherAssets.length
+  const totalAssetsInUsd = Number(
+    formatUnits(
+      otherAssets.reduce((total, asset) => total + asset.usd.value, 0n),
+      CONVERSION_RATE_DECIMALS,
+    ),
+  )
+
+  let label = "No other assets"
+  if (assetsCount === 1) label = "1 more asset"
+  if (assetsCount > 1) label = `${assetsCount} more assets`
 
   return (
-    <Block
-      aria-label={label}
-      as="li"
-      overrides={{
-        Block: {
-          style: {
-            listStyle: "none",
-            borderTop: `1px solid ${theme.colors.borderInverseSelected}`,
-          },
-        },
-      }}
-    >
-      <ListingItem
-        icon={CoinsStacked02}
-        label={label}
-        value={formattedAssetsUsdTotal}
-        overrides={{
-          Root: {
+    <ListingItem
+      icon={<CoinsStacked02 color={theme.colors.contentPrimary} />}
+      label={label}
+      value={totalAssetsInUsd}
+      overrides={mergeOverrides(
+        {
+          Block: {
             props: {
               $as: "button",
               onClick,
             },
             style: {
-              border: 0,
-              padding: 0,
+              borderWidth: 0,
               cursor: "pointer",
+              backgroundColor: "transparent",
+              minHeight: "56px",
             },
           },
-          ArtworkContainer: {
-            style: {
-              stroke: theme.colors.contentPrimary,
-            },
-          },
-          Content: {
-            style: {
-              minHeight: theme.sizing.scale1200,
-            },
-          },
-        }}
-      />
-    </Block>
+        },
+        overrides,
+      )}
+      {...restProps}
+    />
   )
 }

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

@@ -6,47 +6,17 @@ import WalletAddress from "./WalletAddress"
 import AccountBalance from "./AccountBalance"
 import WelcomeBlock from "./WelcomeBlock"
 import AccountAddressActions from "./AccountAddressActions"
-import AccountAssetItem from "./AccountAssetItem"
-import { DetailedCryptoAsset } from "../../../utils/cryptoAssets"
-import { formatNumberToCompactString } from "../../../utils/numbers"
-import { formatUsd } from "../../../utils/currency"
 import AccountOtherAssets from "./AccountOtherAssets"
+import AccountBtcListing from "./AccountBtcListing"
+import AccountMusdListing from "./AccountMusdListing"
 
 type RootProps = {
-  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
 }
 
 export default function Root(props: RootProps) {
-  const {
-    mezoId,
-    walletAddress,
-    accountAddress,
-    walletType,
-    usdTotalBalance,
-    usdTroveDebt,
-    usdCollateral,
-    matsBalance,
-    assets,
-    otherAssetsCount,
-    otherAssetsUsdTotal,
-    onSignOut,
-    onOtherAssetsClick,
-  } = props
+  const { onSignOut, onOtherAssetsClick } = props
 
   const [, theme] = useStyletron()
 
@@ -58,88 +28,48 @@ export default function Root(props: RootProps) {
       onSignOut()
       return
     }
-
     signOut()
     disconnect()
   }, [signOut, disconnect, onSignOut])
 
-  const formattedMatsBalance = formatNumberToCompactString(matsBalance, 2)
-  const formattedUsdTotalBalance = formatUsd(usdTotalBalance)
-  const formattedUsdTroveDebt = formatUsd(usdTroveDebt)
-  const formattedUsdCollateral = formatUsd(usdCollateral)
+  const overridesWithDivider = {
+    Block: {
+      style: {
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.borderOpaque,
+      },
+    },
+  }
 
   return (
-    <Block
-      display="inline-flex"
-      flexDirection="column"
-      padding={theme.sizing.scale600}
-    >
-      <WelcomeBlock mezoId={mezoId} matsBalance={formattedMatsBalance} />
+    <Block display="inline-flex" flexDirection="column">
+      <WelcomeBlock />
 
-      <AccountAddressActions address={accountAddress} />
+      <AccountAddressActions overrides={overridesWithDivider} />
 
-      <Block
-        display="flex"
-        flexDirection="column"
-        backgroundColor={theme.colors.backgroundSecondary}
-        overflow="hidden"
-        overrides={{
-          Block: { style: { borderRadius: theme.borders.radius300 } },
-        }}
-      >
-        <WalletAddress address={walletAddress} type={walletType} />
+      <WalletAddress overrides={overridesWithDivider} />
 
-        <AccountBalance
-          totalBalance={formattedUsdTotalBalance}
-          totalDebt={formattedUsdTroveDebt}
-        />
+      <AccountBalance overrides={overridesWithDivider} />
 
-        <AccountAssetItem
-          type="BTC"
-          amount={assets.btc.formattedUsdBalance}
-          subLabel="Locked collateral"
-          subValue={formattedUsdCollateral}
-        />
+      <AccountBtcListing />
 
-        <AccountAssetItem
-          type="MUSD"
-          amount={assets.musd.formattedUsdBalance}
-          subLabel="Borrowed"
-          subValue={formattedUsdTroveDebt}
-        />
+      <AccountMusdListing />
 
-        <AccountOtherAssets
-          assetsCount={otherAssetsCount}
-          assetsUsdTotal={otherAssetsUsdTotal}
-          onClick={onOtherAssetsClick}
-        />
-      </Block>
+      <AccountOtherAssets
+        onClick={onOtherAssetsClick}
+        overrides={overridesWithDivider}
+      />
 
-      <Block
-        marginTop={theme.sizing.scale700}
-        padding={`0 ${theme.sizing.scale100}`}
-      >
+      <Block padding={theme.sizing.scale300}>
         <Button
           size="small"
+          shape="pill"
           kind="tertiary"
-          startEnhancer={<LogOut01 color="currentColor" size={12} />}
-          onClick={() => handleLogOut()}
-          overrides={{
-            Root: {
-              style: {
-                ":hover": {
-                  backgroundColor: theme.colors.backgroundSecondary,
-                  boxShadow: "none",
-                },
-                ":active": {
-                  backgroundColor: theme.colors.backgroundSecondary,
-                  color: theme.colors.contentPrimary,
-                },
-              },
-            },
-          }}
+          startEnhancer={<LogOut01 color="currentColor" size={16} />}
+          onClick={handleLogOut}
         >
-          Log out
+          Sign out
         </Button>
       </Block>
     </Block>