@mezo-org/passport 0.15.0 → 0.15.1-dev.1

package/src/components/Dropdown/ListingItem.tsx

@@ -1,176 +0,0 @@
-import {
-  mergeOverrides,
-  Block,
-  useStyletron,
-  BlockProps,
-  Skeleton,
-  LabelMedium,
-  ParagraphSmall,
-} from "@mezo-org/mezo-clay"
-import React, { ReactNode } from "react"
-import SlotNumber from "./SlotNumber"
-import { formatUsd } from "../../utils/currency"
-
-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?: ReactNode
-  label?: string
-  subLabel?: string
-  value?: number
-  subValue?: number
-  overrides?: BlockProps["overrides"]
-  isLoading?: boolean
-}
-
-export default function ListingItem(props: ListingItemProps) {
-  const {
-    icon,
-    label,
-    subLabel,
-    value,
-    subValue,
-    overrides,
-    isLoading = false,
-  } = props
-
-  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 },
-              },
-            }}
-          />
-        }
-        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}
-        >
-          {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}
-    />
-  )
-}

package/src/components/Dropdown/NestedViewLayout.tsx

@@ -1,87 +0,0 @@
-import {
-  ArrowLeft,
-  Block,
-  BlockProps,
-  ButtonIcon,
-  HeadingSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React, { ReactNode, useCallback } from "react"
-import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
-
-const getHeaderTitle = (view: DropdownView) => {
-  const titleMap: Partial<Record<DropdownView, string>> = {
-    [DropdownView.RECEIVE]: "Scan to receive",
-  }
-  return titleMap[view]!
-}
-
-type NestedViewLayoutProps = {
-  children: ReactNode
-} & BlockProps
-
-function NestedViewLayout(props: NestedViewLayoutProps) {
-  const { children, ...restProps } = props
-
-  const currentView = useDropdownStore((state) => state.view)
-  const setView = useDropdownStore((state) => state.setView)
-
-  const [, theme] = useStyletron()
-
-  const handleOnButtonClick = useCallback(() => {
-    setView(DropdownView.ROOT)
-  }, [setView])
-
-  return (
-    <Block
-      display="flex"
-      flexDirection="column"
-      minHeight="588px"
-      {...restProps}
-    >
-      <Block
-        display="flex"
-        alignItems="center"
-        padding={theme.sizing.scale100}
-        paddingTop={theme.sizing.scale800}
-        paddingBottom={theme.sizing.scale500}
-        marginBottom={theme.sizing.scale300}
-        overrides={{
-          Block: {
-            style: {
-              gap: theme.sizing.scale300,
-            },
-          },
-        }}
-      >
-        <ButtonIcon
-          onClick={handleOnButtonClick}
-          shape="circle"
-          size="medium"
-          kind="tertiary"
-        >
-          <ArrowLeft />
-        </ButtonIcon>
-
-        <HeadingSmall
-          marginTop={theme.sizing.scale300}
-          marginBottom={theme.sizing.scale300}
-        >
-          {getHeaderTitle(currentView)}
-        </HeadingSmall>
-      </Block>
-
-      <Block
-        display="flex"
-        flexDirection="column"
-        padding={theme.sizing.scale600}
-        paddingTop={0}
-        flex={1}
-      >
-        {children}
-      </Block>
-    </Block>
-  )
-}
-
-export default NestedViewLayout

package/src/components/Dropdown/README.md

@@ -1,41 +0,0 @@
-# Passport Dropdown component
-
-This component is a layer of interaction with Passport API in form of Dropdown
-component. It allows to establish the session and interact with the API.
-
-## Props
-
-- `onSignIn` (`() => void`) - The callback to be executed on trigger click when
-  the state is disconnected. It's optional since by default it triggers the
-  [Rainbow Kit's wallet connection modal](https://www.rainbowkit.com/docs/modal-hooks).
-  If the callback is not provided it will automatically establish the Passport
-  Session. If not, you have to handle it manually using `useSignInWithWallet`
-  hook. - **optional**
-- `onSignOut` (`() => void`) - The callback to be executed on click of the
-  **Sign out** button. It's optional since by default it disconnects the current
-  wallet connector and closes the Passport session. - **optional**
-- `triggerProps.signedIn` (`ButtonProps`) - Props to be passed to the trigger
-  button in signed-in state.
-- `triggerProps.signedOut` (`ButtonProps`) - Props to be passed to the trigger
-  button in signed-out state
-
-Besides that, component allows
-[Clay's `StatefulPopover` props](https://baseweb.design/components/popover/)
-excluding the `children` and `content`.
-
-## Overview
-
-The component has two distinguishable states - disconnected and connected. In
-disconnected state the component offers the trigger to initiate the connection
-flow. It can be fully customizable by providing your own one. As long as it's
-compliant with Wagmi/RainbowKit it will work. Component will automatically
-detect connected connector and change the state of component displaying the
-avatar thumbnail instead of button.
-
-Component has the following features:
-
-- displays wallet address that can be copied,
-- displays total balance in USD,
-- displays partial balances per asset with token amounts and USD conversions,
-- serves _Log out_ button which disconnects the wallet connector and closes
-  Passport API session.

package/src/components/Dropdown/Receive/Receive.tsx

@@ -1,144 +0,0 @@
-import {
-  Block,
-  Button,
-  LabelLarge,
-  MezoCircle,
-  MonoLabelXSmall,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React, { useState } from "react"
-import { useCopyToClipboard } from "usehooks-ts"
-import { QRCodeSVG } from "qrcode.react"
-import NestedViewLayout from "../NestedViewLayout"
-import { getAddressExplorerUrl } from "../../../utils/address"
-import { usePassportContext } from "../../../hooks/usePassportContext"
-import useWalletAccount from "../../../hooks/useWalletAccount"
-
-function Receive() {
-  const { environment } = usePassportContext()
-
-  const walletAccount = useWalletAccount()
-
-  const [, theme] = useStyletron()
-
-  const [, copy] = useCopyToClipboard()
-
-  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
-
-  const handleCopyAddress = () => {
-    copy(walletAccount.accountAddress!)
-    setIsCopiedMessageVisible(true)
-
-    setTimeout(() => {
-      setIsCopiedMessageVisible(false)
-    }, 2000)
-  }
-
-  const blockExplorerUrl = getAddressExplorerUrl(
-    walletAccount.accountAddress!,
-    "mezo",
-    environment === "testnet",
-  )
-
-  return (
-    <NestedViewLayout>
-      <LabelLarge>Your Mezo Address</LabelLarge>
-
-      <ParagraphSmall
-        marginTop={0}
-        marginBottom={theme.sizing.scale800}
-        color={theme.colors.contentTertiary}
-      >
-        {walletAccount.networkFamily === "bitcoin" ? (
-          <>
-            Mezo automatically created a smart account that&apos;s fully
-            controlled by your connected Bitcoin wallet. Use this address to
-            receive assets on Mezo.
-          </>
-        ) : (
-          <>
-            Your connected wallet address is your Mezo address. Use this address
-            to receive assets on Mezo.
-          </>
-        )}
-      </ParagraphSmall>
-
-      <Block
-        as={QRCodeSVG}
-        value={walletAccount.accountAddress!}
-        flex={1}
-        overrides={{
-          Block: {
-            style: {
-              aspectRatio: 1,
-              width: "fit-content",
-              margin: "0 auto",
-            },
-          },
-        }}
-      />
-
-      <Block
-        display="flex"
-        alignItems="center"
-        backgroundColor={theme.colors.backgroundSecondary}
-        marginTop={theme.sizing.scale800}
-        marginBottom={theme.sizing.scale600}
-        padding={theme.sizing.scale300}
-        overrides={{
-          Block: {
-            style: {
-              gap: theme.sizing.scale300,
-              borderRadius: theme.borders.radius400,
-            },
-          },
-        }}
-      >
-        <MezoCircle
-          size={theme.sizing.scale700}
-          color={theme.colors.accent}
-          symbolColor={theme.colors.white}
-          overrides={{
-            Svg: {
-              style: {
-                backgroundColor: theme.colors.accent,
-                overflow: "hidden",
-                borderRadius: theme.borders.radius200,
-                flexShrink: 0,
-              },
-            },
-          }}
-        />
-
-        <MonoLabelXSmall>{walletAccount.accountAddress}</MonoLabelXSmall>
-      </Block>
-
-      <Button
-        onClick={handleCopyAddress}
-        size="medium"
-        overrides={{
-          BaseButton: {
-            style: {
-              marginBottom: theme.sizing.scale500,
-            },
-          },
-        }}
-      >
-        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo address"}
-      </Button>
-
-      <Button
-        kind="secondary"
-        size="medium"
-        $as="a"
-        href={blockExplorerUrl}
-        target="_blank"
-      >
-        View Mezo explorer
-      </Button>
-    </NestedViewLayout>
-  )
-}
-
-export default Receive

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>
-  )
-}