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

package/src/components/Dropdown/ConnectedTrigger.tsx

@@ -1,76 +0,0 @@
-import { Block, Button, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
-import React, { forwardRef, ReactNode, useMemo } from "react"
-
-type ConnectedTriggerProps = Omit<ButtonProps, "children" | "size"> & {
-  avatar: ReactNode
-  size?: "medium" | "large"
-}
-
-const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
-  (props, ref) => {
-    const { onClick, avatar, size = "medium", ...restProps } = props
-
-    const [, theme] = useStyletron()
-
-    const avatarSize = useMemo(() => {
-      const sizeMap = {
-        medium: theme.sizing.scale950,
-        large: theme.sizing.scale1400,
-      }
-
-      return sizeMap[size]
-    }, [theme, size])
-
-    const buttonPadding = useMemo(() => {
-      const paddingMap = {
-        medium: theme.sizing.scale0,
-        large: theme.sizing.scale100,
-      }
-
-      return paddingMap[size]
-    }, [theme, size])
-
-    return (
-      <Button
-        overrides={{
-          BaseButton: {
-            props: { ref, ...restProps },
-            style: {
-              borderRadius: "100%",
-              overflow: "hidden",
-              padding: buttonPadding,
-            },
-          },
-        }}
-        onClick={onClick}
-      >
-        {typeof avatar === "string" ? (
-          <Block
-            width={avatarSize}
-            height={avatarSize}
-            as="img"
-            src={avatar}
-            alt=""
-          />
-        ) : (
-          <Block
-            width={avatarSize}
-            height={avatarSize}
-            overrides={{
-              Block: {
-                style: {
-                  borderRadius: "100%",
-                  overflow: "hidden",
-                },
-              },
-            }}
-          >
-            {avatar}
-          </Block>
-        )}
-      </Button>
-    )
-  },
-)
-
-export default ConnectedTrigger

package/src/components/Dropdown/Content.tsx

@@ -1,56 +0,0 @@
-import { Block, useStyletron } from "@mezo-org/mezo-clay"
-import React, { useEffect } from "react"
-import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
-import Root from "./Root/Root"
-import Receive from "./Receive/Receive"
-import Settings from "./Settings/Settings"
-import TestnetTopBanner from "./TestnetTopBanner"
-
-type ContentProps = {
-  onSignOut?: () => void
-  onOtherAssetsClick?: () => void
-}
-
-function Content(props: ContentProps) {
-  const { onSignOut, onOtherAssetsClick } = props
-
-  const [_, theme] = useStyletron()
-
-  const currentView = useDropdownStore((state) => state.view)
-  const setView = useDropdownStore((state) => state.setView)
-
-  useEffect(
-    () => () => {
-      setView(DropdownView.ROOT)
-    },
-    [setView],
-  )
-
-  return (
-    <Block
-      display="inline-flex"
-      flexDirection="column"
-      backgroundColor={theme.colors.backgroundPrimary}
-      width="100%"
-      overrides={{
-        Block: {
-          style: {
-            boxSizing: "border-box",
-          },
-        },
-      }}
-    >
-      <TestnetTopBanner />
-
-      {currentView === DropdownView.ROOT && (
-        <Root onSignOut={onSignOut} onOtherAssetsClick={onOtherAssetsClick} />
-      )}
-
-      {currentView === DropdownView.RECEIVE && <Receive />}
-
-      {currentView === DropdownView.SETTINGS && <Settings />}
-    </Block>
-  )
-}
-
-export default Content

package/src/components/Dropdown/DisconnectedTrigger.tsx

@@ -1,36 +0,0 @@
-import { Button, ButtonProps, LogIn01, useStyletron } from "@mezo-org/mezo-clay"
-import React, { forwardRef } from "react"
-
-type DisconnectedTriggerProps = Omit<ButtonProps, "children"> & {
-  children: string
-}
-
-const DisconnectedTrigger = forwardRef<
-  HTMLButtonElement,
-  DisconnectedTriggerProps
->((props, ref) => {
-  const { onClick, children, ...restProps } = props
-
-  const [, theme] = useStyletron()
-
-  return (
-    <Button
-      startEnhancer={
-        <LogIn01 color="currentColor" size={theme.sizing.scale600} />
-      }
-      overrides={{
-        Root: {
-          props: { ref },
-        },
-      }}
-      size="small"
-      shape="pill"
-      onClick={onClick}
-      {...restProps}
-    >
-      {children}
-    </Button>
-  )
-})
-
-export default DisconnectedTrigger

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,88 +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",
-    [DropdownView.SETTINGS]: "Settings",
-  }
-  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.