@mezo-org/passport 0.4.0-dev.2 → 0.4.0-dev.21

package/src/components/Dropdown/Content.tsx

@@ -0,0 +1,98 @@
+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 { DetailedCryptoAsset } from "../../utils/cryptoAssets"
+import TestnetTopBanner from "./TestnetTopBanner"
+
+type ContentProps = {
+  mezoId: string
+  matsBalance: number
+  accountAddress: string
+  walletAddress: string
+  walletType: "bitcoin" | "evm"
+  usdTotalBalance: number
+  usdTroveDebt: number
+  usdCollateral: number
+  assets: {
+    btc: DetailedCryptoAsset
+    musd: DetailedCryptoAsset
+  }
+  otherAssetsCount: number
+  otherAssetsUsdTotal: number
+  onSignOut?: () => void
+  onOtherAssetsClick?: () => void
+}
+
+function Content(props: ContentProps) {
+  const {
+    mezoId,
+    accountAddress,
+    walletAddress,
+    walletType,
+    usdTotalBalance,
+    assets,
+    matsBalance,
+    usdTroveDebt,
+    usdCollateral,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
+    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
+          mezoId={mezoId}
+          accountAddress={accountAddress}
+          walletAddress={walletAddress}
+          walletType={walletType}
+          usdTotalBalance={usdTotalBalance}
+          assets={assets}
+          matsBalance={matsBalance}
+          usdTroveDebt={usdTroveDebt}
+          usdCollateral={usdCollateral}
+          otherAssetsCount={otherAssetsCount}
+          otherAssetsUsdTotal={otherAssetsUsdTotal}
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      )}
+
+      {currentView === DropdownView.RECEIVE && (
+        <Receive address={accountAddress} />
+      )}
+    </Block>
+  )
+}
+
+export default Content

package/src/components/Dropdown/DisconnectedTrigger.tsx

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

@@ -0,0 +1,139 @@
+import {
+  ButtonProps,
+  StatefulPopover,
+  StatefulPopoverProps,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import React, { useEffect, useMemo } from "react"
+import { useDisconnect } from "wagmi"
+import DefaultAvatar from "../../assets/DefaultAvatar"
+import useWalletAccount from "../../hooks/useWalletAccount"
+import ConnectedTrigger from "./ConnectedTrigger"
+import Content from "./Content"
+import DisconnectedTrigger from "./DisconnectedTrigger"
+import { useSignInWithWallet } from "../../hooks"
+import useDropdownData from "../../hooks/useDropdownData"
+
+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 data = useDropdownData()
+
+  const isCriticalDropdownDataLoaded = useMemo(
+    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
+    [data],
+  )
+
+  const { openConnectModal } = useConnectModal()
+
+  const { isConnected } = useWalletAccount()
+
+  const { signInWithWalletAsync, isPending } = useSignInWithWallet()
+
+  const { disconnectAsync } = useDisconnect()
+
+  useEffect(() => {
+    if (onSignIn) return
+
+    const handleSignIn = async () => {
+      if (!isConnected) return
+
+      try {
+        await signInWithWalletAsync()
+      } catch (error) {
+        await disconnectAsync()
+      }
+    }
+
+    handleSignIn()
+  }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync])
+
+  if (!isConnected || !isCriticalDropdownDataLoaded) {
+    return (
+      <DisconnectedTrigger
+        // If connect wallet flow is not provided it fallbacks to RainbowKit's
+        // connect modal
+        onClick={onSignIn || openConnectModal}
+        isLoading={isPending}
+        {...triggerProps?.signedOut}
+      >
+        Sign in
+      </DisconnectedTrigger>
+    )
+  }
+
+  return (
+    <StatefulPopover
+      content={
+        <Content
+          mezoId={data.mezoId!}
+          matsBalance={data.matsBalance}
+          accountAddress={data.accountAddress!}
+          walletAddress={data.walletAddress!}
+          walletType={data.walletType}
+          usdTotalBalance={data.usdTotalBalance}
+          usdTroveDebt={data.usdTroveDebt}
+          usdCollateral={data.usdCollateral}
+          assets={data.assets}
+          otherAssetsCount={data.otherAssetsCount}
+          otherAssetsUsdTotal={data.otherAssetsUsdTotal}
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      }
+      placement={placement}
+      animateOutTime={animateOutTime}
+      overrides={{
+        ...overrides,
+        Body: {
+          ...overrides?.Body,
+          style: {
+            width: "396px",
+            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

@@ -0,0 +1,80 @@
+import {
+  ListItem,
+  ListItemLabel,
+  mergeOverrides,
+  ListItemLabelProps,
+  IconProps,
+  ListItemProps,
+} from "@mezo-org/mezo-clay"
+import React, { FC } from "react"
+
+const SHARED_LABEL_OVERRIDES: ListItemLabelProps["overrides"] = {
+  LabelDescription: {
+    style: {
+      color: "#4B4B4B", // contentSecondary
+    },
+  },
+}
+
+type ListingItemProps = {
+  icon?: FC<IconProps>
+  label: string
+  subLabel?: string
+  value: string
+  subValue?: string
+  overrides?: ListItemProps["overrides"]
+}
+
+export default function ListingItem(props: ListingItemProps) {
+  const {
+    icon: Icon,
+    label,
+    subLabel = "",
+    value,
+    subValue = "",
+    overrides,
+  } = props
+
+  return (
+    <ListItem
+      artwork={Icon}
+      // eslint-disable-next-line react/no-unstable-nested-components
+      endEnhancer={() => (
+        <ListItemLabel
+          description={subValue}
+          overrides={mergeOverrides(
+            {
+              LabelRoot: {
+                style: {
+                  textAlign: "right",
+                },
+              },
+            },
+            SHARED_LABEL_OVERRIDES,
+          )}
+        >
+          {value}
+        </ListItemLabel>
+      )}
+      overrides={mergeOverrides(
+        {
+          Root: {
+            style: {
+              backgroundColor: "transparent",
+            },
+          },
+          Content: {
+            style: {
+              border: 0,
+            },
+          },
+        },
+        overrides,
+      )}
+    >
+      <ListItemLabel description={subLabel} overrides={SHARED_LABEL_OVERRIDES}>
+        {label}
+      </ListItemLabel>
+    </ListItem>
+  )
+}

package/src/components/Dropdown/NestedViewLayout.tsx

@@ -0,0 +1,75 @@
+import {
+  ArrowLeft,
+  Block,
+  ButtonIcon,
+  LabelMedium,
+  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]: "Receive",
+  }
+  return titleMap[view]!
+}
+
+type NestedViewLayoutProps = {
+  children: ReactNode
+}
+
+function NestedViewLayout(props: NestedViewLayoutProps) {
+  const { children, ...restProps } = props
+
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
+  const isNested = useDropdownStore((state) => state.isNestedView())
+
+  const [, theme] = useStyletron()
+
+  const handleOnButtonClick = useCallback(() => {
+    setView(DropdownView.ROOT)
+  }, [setView])
+
+  return (
+    <Block
+      display="flex"
+      flexDirection="column"
+      minHeight="588px"
+      padding={theme.sizing.scale700}
+      paddingTop={0}
+      {...restProps}
+    >
+      <Block
+        display="flex"
+        alignItems="center"
+        paddingTop={theme.sizing.scale600}
+        paddingBottom={theme.sizing.scale600}
+        marginBottom={theme.sizing.scale300}
+      >
+        <ButtonIcon
+          onClick={handleOnButtonClick}
+          shape="circle"
+          size="small"
+          overrides={{
+            BaseButton: {
+              style: {
+                background: theme.colors.backgroundPrimary,
+                marginRight: isNested ? theme.sizing.scale300 : undefined,
+              },
+            },
+          }}
+        >
+          <ArrowLeft size={theme.sizing.scale700} />
+        </ButtonIcon>
+
+        <LabelMedium>{getHeaderTitle(currentView)}</LabelMedium>
+      </Block>
+
+      {children}
+    </Block>
+  )
+}
+
+export default NestedViewLayout

package/src/components/Dropdown/README.md

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

@@ -0,0 +1,119 @@
+import {
+  Block,
+  Button,
+  LabelMedium,
+  MonoLabelXSmall,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, 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"
+
+type ReceiveProps = {
+  address: string
+}
+
+function Receive(props: ReceiveProps) {
+  const { address } = props
+
+  const { environment } = usePassportContext()
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const [, theme] = useStyletron()
+
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+  const handleCopyAddress = useCallback(() => {
+    copy(address)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }, [copy, address])
+
+  const { networkFamily } = useWalletAccount()
+
+  return (
+    <NestedViewLayout>
+      <LabelMedium>Receive assets on Mezo</LabelMedium>
+
+      <ParagraphSmall
+        marginTop={theme.sizing.scale300}
+        marginBottom={theme.sizing.scale600}
+        color={theme.colors.contentTertiary}
+      >
+        {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={address}
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              aspectRatio: 1,
+              width: "fit-content",
+              margin: "0 auto",
+            },
+          },
+        }}
+      />
+
+      <MonoLabelXSmall
+        marginTop={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale800}
+        overrides={{
+          Block: {
+            style: {
+              textAlign: "center",
+            },
+          },
+        }}
+      >
+        {address}
+      </MonoLabelXSmall>
+
+      <Button
+        onClick={handleCopyAddress}
+        overrides={{
+          BaseButton: {
+            style: {
+              marginBottom: theme.sizing.scale400,
+            },
+          },
+        }}
+      >
+        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo Address"}
+      </Button>
+
+      <Button kind="secondary" $as="a" href={blockExplorerUrl} target="_blank">
+        View Explorer
+      </Button>
+    </NestedViewLayout>
+  )
+}
+
+export default Receive

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

@@ -0,0 +1,101 @@
+import {
+  ArrowNarrowLeft,
+  Block,
+  Button,
+  ButtonProps,
+  Cube01,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl } from "../../../utils/address"
+import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
+
+type AccountAddressActionsProps = {
+  address: string
+}
+
+const buttonStartEnhancerSize = 12
+
+const commonButtonProps: Partial<ButtonProps> = {
+  kind: "secondary",
+  size: "xsmall",
+  overrides: {
+    BaseButton: {
+      style: {
+        flex: 1,
+      },
+    },
+    StartEnhancer: {
+      style: {
+        stroke: "currentColor",
+      },
+    },
+  },
+}
+
+export default function AccountAddressActions(
+  props: AccountAddressActionsProps,
+) {
+  const { address } = props
+
+  const [, theme] = useStyletron()
+
+  const { environment } = usePassportContext()
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const setDropdownView = useDropdownStore((state) => state.setView)
+
+  const handleReceiveClick = useCallback(() => {
+    setDropdownView(DropdownView.RECEIVE)
+  }, [setDropdownView])
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      marginBottom={theme.sizing.scale600}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Button
+        startEnhancer={<Cube01 size={buttonStartEnhancerSize} />}
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+        {...commonButtonProps}
+      >
+        View Mezo Explorer
+      </Button>
+
+      <Button
+        onClick={handleReceiveClick}
+        startEnhancer={
+          <ArrowNarrowLeft
+            size={buttonStartEnhancerSize}
+            overrides={{
+              Svg: {
+                style: {
+                  transform: "rotate(-45deg)",
+                },
+              },
+            }}
+          />
+        }
+        {...commonButtonProps}
+      >
+        Receive
+      </Button>
+    </Block>
+  )
+}