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

package/src/components/Dropdown/Dropdown.tsx

@@ -1,100 +0,0 @@
-import {
-  ButtonProps,
-  StatefulPopover,
-  StatefulPopoverProps,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React from "react"
-import DefaultAvatar from "../../assets/DefaultAvatar"
-import ConnectedTrigger from "./ConnectedTrigger"
-import Content from "./Content"
-import DisconnectedTrigger from "./DisconnectedTrigger"
-import { useWalletAccount } from "../../hooks/useWalletAccount"
-import { useWatchTransferEventsForAllTokens } from "../../hooks/useWatchTransferEvents"
-
-export type DropdownProps = {
-  /** The callback to be called when the user clicks the sign-out button */
-  onSignOut?: () => void
-  /** The callback to be called when the user clicks the button in sign-in state */
-  onSignIn?: () => void
-  /** The props to be passed to the trigger button */
-  triggerProps?: {
-    signedIn?: Omit<ButtonProps, "onClick" | "size"> & {
-      size: "medium" | "large"
-    }
-    signedOut?: Omit<ButtonProps, "onClick">
-  }
-  onOtherAssetsClick?: () => void
-} & Omit<StatefulPopoverProps, "children" | "content">
-
-/**
- * Passport Dropdown component that displays user's wallet and assets information.
- * @param {DropdownProps} props - Component props.
- * @returns {JSX.Element}
- */
-export function Dropdown(props: DropdownProps) {
-  const {
-    placement = "bottomRight",
-    animateOutTime = 120,
-    onSignIn,
-    onSignOut,
-    overrides,
-    triggerProps,
-    onOtherAssetsClick,
-    ...restProps
-  } = props
-
-  const [, theme] = useStyletron()
-
-  const walletAccount = useWalletAccount()
-
-  useWatchTransferEventsForAllTokens()
-
-  const { openConnectModal } = useConnectModal()
-
-  if (!walletAccount?.isConnected) {
-    return (
-      <DisconnectedTrigger
-        // If connect wallet flow is not provided it fallbacks to RainbowKit's
-        // connect modal
-        onClick={onSignIn || openConnectModal}
-        {...triggerProps?.signedOut}
-      >
-        Sign in
-      </DisconnectedTrigger>
-    )
-  }
-
-  return (
-    <StatefulPopover
-      content={
-        <Content
-          onSignOut={onSignOut}
-          onOtherAssetsClick={onOtherAssetsClick}
-        />
-      }
-      placement={placement}
-      animateOutTime={animateOutTime}
-      overrides={{
-        ...overrides,
-        Body: {
-          ...overrides?.Body,
-          style: {
-            width: "402px",
-            borderRadius: theme.borders.radius500,
-            boxShadow: theme.lighting.shadow500,
-            overflow: "hidden",
-            ...overrides?.Body?.style,
-          },
-        },
-      }}
-      {...restProps}
-    >
-      <ConnectedTrigger
-        avatar={<DefaultAvatar />}
-        {...triggerProps?.signedIn}
-      />
-    </StatefulPopover>
-  )
-}

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