@mezo-org/passport 0.4.0-dev.9 → 0.5.1-dev.0

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

@@ -0,0 +1,75 @@
+import React from "react"
+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 = Omit<BlockProps, "children">
+
+export default function AccountBalance(props: AccountBalanceProps) {
+  const { overrides, ...restProps } = props
+  const [, theme] = useStyletron()
+  const { nativeBalanceRefetchInterval } = usePassportContext()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesDataPending,
+    error: tokensBalancesError,
+  } = useTokensBalances({
+    queryOptions: {
+      refetchInterval: nativeBalanceRefetchInterval,
+    },
+  })
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+    error: borrowDataError,
+  } = useBorrowData()
+
+  if (isTokensBalancesDataPending || isBorrowDataPending) {
+    return <ListingItem isLoading overrides={overrides} />
+  }
+
+  if (isTokensBalancesError || isBorrowDataError) {
+    console.log("isTokensBalancesError: ", isTokensBalancesError)
+    console.log("tokensBalancesError: ", tokensBalancesError)
+    console.log("isBorrowDataError: ", isBorrowDataError)
+    console.log("borrowDataError: ", borrowDataError)
+
+    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={totalBalanceNumber}
+      subLabel="Total liabilities"
+      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

@@ -0,0 +1,85 @@
+import React from "react"
+import {
+  useStyletron,
+  CoinsStacked02,
+  mergeOverrides,
+  BlockProps,
+} from "@mezo-org/mezo-clay"
+import { formatUnits } from "viem"
+import ListingItem from "../ListingItem"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates"
+
+type AccountOtherAssetsProps = {
+  onClick?: () => void
+} & Omit<BlockProps, "children">
+
+export default function AccountOtherAssets(props: AccountOtherAssetsProps) {
+  const { onClick, overrides, ...restProps } = props
+
+  const [, theme] = useStyletron()
+
+  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}
+      />
+    )
+  }
+
+  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 (
+    <ListingItem
+      icon={<CoinsStacked02 color={theme.colors.contentPrimary} />}
+      label={label}
+      value={totalAssetsInUsd}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            props: {
+              $as: "button",
+              onClick,
+            },
+            style: {
+              borderWidth: 0,
+              cursor: "pointer",
+              backgroundColor: "transparent",
+              minHeight: "56px",
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    />
+  )
+}

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

@@ -0,0 +1,77 @@
+import { Block, Button, LogOut01, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { useDisconnect } from "wagmi"
+import { useSignOut } from "../../../hooks"
+import WalletAddress from "./WalletAddress"
+import AccountBalance from "./AccountBalance"
+import WelcomeBlock from "./WelcomeBlock"
+import AccountAddressActions from "./AccountAddressActions"
+import AccountOtherAssets from "./AccountOtherAssets"
+import AccountBtcListing from "./AccountBtcListing"
+import AccountMusdListing from "./AccountMusdListing"
+
+type RootProps = {
+  onSignOut?: () => void
+  onOtherAssetsClick?: () => void
+}
+
+export default function Root(props: RootProps) {
+  const { onSignOut, onOtherAssetsClick } = props
+
+  const [, theme] = useStyletron()
+
+  const { disconnect } = useDisconnect()
+  const { signOut } = useSignOut()
+
+  const handleLogOut = useCallback(() => {
+    if (onSignOut) {
+      onSignOut()
+      return
+    }
+    signOut()
+    disconnect()
+  }, [signOut, disconnect, onSignOut])
+
+  const overridesWithDivider = {
+    Block: {
+      style: {
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.borderOpaque,
+      },
+    },
+  }
+
+  return (
+    <Block display="inline-flex" flexDirection="column">
+      <WelcomeBlock />
+
+      <AccountAddressActions overrides={overridesWithDivider} />
+
+      <WalletAddress overrides={overridesWithDivider} />
+
+      <AccountBalance overrides={overridesWithDivider} />
+
+      <AccountBtcListing />
+
+      <AccountMusdListing />
+
+      <AccountOtherAssets
+        onClick={onOtherAssetsClick}
+        overrides={overridesWithDivider}
+      />
+
+      <Block padding={theme.sizing.scale300}>
+        <Button
+          size="small"
+          shape="pill"
+          kind="tertiary"
+          startEnhancer={<LogOut01 color="currentColor" size={16} />}
+          onClick={handleLogOut}
+        >
+          Sign out
+        </Button>
+      </Block>
+    </Block>
+  )
+}

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

@@ -0,0 +1,123 @@
+import {
+  BitcoinCircle,
+  Block,
+  BlockProps,
+  EthCircle,
+  LabelMedium,
+  LabelXSmall,
+  mergeOverrides,
+  MonoLabelXSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
+import useWalletAccount from "../../../hooks/useWalletAccount"
+
+export default function WalletAddress(props: BlockProps) {
+  const { overrides, ...restProps } = props
+  const { walletAddress, networkFamily } = useWalletAccount()
+  const { environment = "mainnet" } = usePassportContext()
+  const [, theme] = useStyletron()
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+
+  const handleCopyAddress = () => {
+    copy(walletAddress!)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    walletAddress!,
+    networkFamily,
+    environment === "testnet",
+  )
+  const trimmedAddress = trimAddress(walletAddress!)
+  const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle
+
+  return (
+    <Block
+      as="button"
+      onClick={handleCopyAddress}
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      padding={`${theme.sizing.scale800} ${theme.sizing.scale700}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale700,
+              borderWidth: 0,
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: theme.colors.backgroundTertiary,
+              },
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    >
+      <AccountIcon
+        color={theme.colors.black}
+        size={theme.sizing.scale800}
+        overrides={{
+          Svg: {
+            style: {
+              backgroundColor: theme.colors.black,
+              overflow: "hidden",
+              borderRadius: theme.borders.radius200,
+            },
+          },
+        }}
+      />
+      <Block
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <LabelMedium>Connected Wallet</LabelMedium>
+
+        {isCopiedMessageVisible ? (
+          <LabelXSmall color={theme.colors.contentSecondary}>
+            Copied address to clipboard
+          </LabelXSmall>
+        ) : (
+          <Block
+            as="a"
+            color={theme.colors.contentSecondary}
+            href={blockExplorerUrl}
+            target="_blank"
+            overrides={{
+              Block: {
+                style: {
+                  color: "inherit",
+                  textDecoration: "none",
+                  ":hover": {
+                    textDecoration: "underline",
+                  },
+                },
+              },
+            }}
+          >
+            <MonoLabelXSmall>{trimmedAddress}</MonoLabelXSmall>
+          </Block>
+        )}
+      </Block>
+    </Block>
+  )
+}

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

@@ -0,0 +1,173 @@
+import {
+  Block,
+  BlockProps,
+  HeadingMedium,
+  LabelLarge,
+  Mats,
+  mergeOverrides,
+  Skeleton,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import DefaultAvatar from "../../../assets/DefaultAvatar"
+import { useGetCurrentAccount } from "../../../hooks"
+import { formatNumberToCompactString } from "../../../utils/numbers"
+import AccountError from "./AccountError"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import SlotNumber from "../SlotNumber"
+
+const DOT_DELIMITER_REGEX = /(?=\.)/
+
+function WelcomeBlockSkeleton() {
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Skeleton
+        animation
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Root: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <Skeleton animation width="60%" height={theme.sizing.scale900} />
+        <Skeleton animation width="40%" height={theme.sizing.scale800} />
+      </Block>
+    </Block>
+  )
+}
+
+type WelcomeBlockProps = BlockProps
+
+export default function WelcomeBlock(props: WelcomeBlockProps) {
+  const { overrides, ...restProps } = props
+  const { accountDataRefetchInterval } = usePassportContext()
+
+  const { data, isError, isPending } = useGetCurrentAccount({
+    staleTime: accountDataRefetchInterval,
+    refetchInterval: accountDataRefetchInterval,
+  })
+  const [, theme] = useStyletron()
+
+  if (isError) {
+    return (
+      <AccountError
+        padding={theme.sizing.scale600}
+        paddingTop={theme.sizing.scale900}
+        paddingBottom={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale300}
+        topic="account information"
+      />
+    )
+  }
+
+  if (isPending) {
+    return <WelcomeBlockSkeleton />
+  }
+
+  const [mezoId, mezoIdSuffix] = (data.mezoId ?? "").split(DOT_DELIMITER_REGEX)
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      paddingLeft={theme.sizing.scale600}
+      paddingRight={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={mergeOverrides(overrides, {
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      })}
+      {...restProps}
+    >
+      <Block
+        as={DefaultAvatar}
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Block: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block display="flex" flexDirection="column">
+        {mezoId && mezoIdSuffix && (
+          <HeadingMedium as="span">
+            <Block as="span">{mezoId}</Block>
+            <Block as="span" color={theme.colors.contentSecondary}>
+              {mezoIdSuffix}
+            </Block>
+          </HeadingMedium>
+        )}
+
+        <Block
+          display="flex"
+          alignItems="center"
+          overrides={{
+            Block: {
+              style: {
+                gap: theme.sizing.scale100,
+              },
+            },
+          }}
+        >
+          <Mats
+            size={theme.sizing.scale600}
+            overrides={{
+              Svg: {
+                style: {
+                  margin: theme.sizing.scale100, // To reduce gap
+                },
+              },
+            }}
+          />
+
+          <LabelLarge color={theme.colors.contentPrimary}>
+            <SlotNumber formatFunction={formatNumberToCompactString}>
+              {data.mats.totalMats}
+            </SlotNumber>{" "}
+            mats
+          </LabelLarge>
+        </Block>
+      </Block>
+    </Block>
+  )
+}