@mezo-org/passport 0.15.1-dev.6 → 0.15.1-dev.7

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

@@ -1,69 +0,0 @@
-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,
-  } = useTokensBalances({
-    queryOptions: {
-      staleTime: nativeBalanceRefetchInterval,
-      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={totalBalanceNumber}
-      subLabel="Total liabilities"
-      subValue={totalDebtNumber}
-      overrides={overrides}
-      {...restProps}
-    />
-  )
-}

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

@@ -1,53 +0,0 @@
-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: {
-      staleTime: nativeBalanceRefetchInterval,
-      refetchInterval: nativeBalanceRefetchInterval,
-    },
-  })
-
-  if (isTokensBalancesPending || isBorrowDataPending) {
-    return <ListingItem isLoading />
-  }
-
-  if (isTokensBalancesError || isBorrowDataError) {
-    return <AccountError topic="Bitcoin balance" />
-  }
-
-  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

@@ -1,34 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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 (isBorrowDataPending || isTokensBalancesPending) {
-    return <ListingItem isLoading />
-  }
-
-  if (isBorrowDataError || isTokensBalancesError) {
-    return <AccountError topic="MUSD balance" />
-  }
-
-  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,85 +0,0 @@
-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 (isTokensBalancesPending) {
-    return <ListingItem isLoading overrides={overrides} />
-  }
-
-  if (isTokensBalancesError) {
-    return (
-      <AccountError
-        topic="other assets"
-        paddingTop={theme.sizing.scale100}
-        paddingBottom={theme.sizing.scale100}
-        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

@@ -1,77 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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.totalMats}
-            </SlotNumber>{" "}
-            mats
-          </LabelLarge>
-        </Block>
-      </Block>
-    </Block>
-  )
-}