@mezo-org/passport 0.16.0-dev.1 → 0.16.0-dev.2

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

@@ -1,99 +0,0 @@
-import {
-  ArrowNarrowLeft,
-  Block,
-  BlockProps,
-  Button,
-  ButtonProps,
-  mergeOverrides,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React from "react"
-import { usePassportContext } from "../../../hooks/usePassportContext"
-import { getAddressExplorerUrl } from "../../../utils/address"
-import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
-import { useWalletAccount } from "../../../hooks/useWalletAccount"
-
-const buttonStartEnhancerSize = 12
-
-const commonButtonProps: Partial<ButtonProps> = {
-  kind: "secondary",
-  size: "small",
-  shape: "pill",
-  overrides: {
-    BaseButton: {
-      style: {
-        flex: 1,
-      },
-    },
-    StartEnhancer: {
-      style: {
-        stroke: "currentColor",
-      },
-    },
-  },
-}
-
-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 walletAccount = useWalletAccount()
-
-  const blockExplorerUrl = getAddressExplorerUrl(
-    walletAccount.accountAddress!,
-    "mezo",
-    environment === "testnet",
-  )
-
-  return (
-    <Block
-      display="flex"
-      alignItems="center"
-      backgroundColor="transparent"
-      padding={`0 ${theme.sizing.scale600} ${theme.sizing.scale800}`}
-      overrides={mergeOverrides(
-        {
-          Block: {
-            style: {
-              gap: theme.sizing.scale600,
-            },
-          },
-        },
-        overrides,
-      )}
-      {...restProps}
-    >
-      <Button
-        onClick={handleReceiveClick}
-        startEnhancer={
-          <ArrowNarrowLeft
-            size={buttonStartEnhancerSize}
-            overrides={{
-              Svg: {
-                style: {
-                  transform: "rotate(-45deg)",
-                },
-              },
-            }}
-          />
-        }
-        {...commonButtonProps}
-      >
-        Receive
-      </Button>
-
-      <Button
-        $as="a"
-        href={blockExplorerUrl}
-        target="_blank"
-        {...commonButtonProps}
-      >
-        Block Explorer
-      </Button>
-    </Block>
-  )
-}

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,104 +0,0 @@
-import {
-  Block,
-  Button,
-  LogOut01,
-  Settings01,
-  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"
-import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
-
-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 setDropdownView = useDropdownStore((state) => state.setView)
-  const handleSettingsClick = useCallback(
-    () => setDropdownView(DropdownView.SETTINGS),
-    [setDropdownView],
-  )
-
-  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
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        padding={theme.sizing.scale300}
-      >
-        <Button
-          size="small"
-          shape="pill"
-          kind="tertiary"
-          startEnhancer={<Settings01 color="currentColor" size={16} />}
-          onClick={handleSettingsClick}
-        >
-          Settings
-        </Button>
-        <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>
-  )
-}