@mezo-org/passport 0.4.0-dev.9 → 0.5.0

package/src/components/Dropdown/ConnectedTrigger.tsx

@@ -1,54 +1,74 @@
-import { Block, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
-import React, { forwardRef, ReactNode } from "react"
+import { Block, Button, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef, ReactNode, useMemo } from "react"
 
-type ConnectedTriggerProps = Omit<ButtonProps, "children"> & {
+type ConnectedTriggerProps = Omit<ButtonProps, "children" | "size"> & {
   avatar: ReactNode
+  size?: "medium" | "large"
 }
 
 const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
   (props, ref) => {
-    const { onClick, avatar, ...restProps } = props
+    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 (
-      <Block
-        as="button"
+      <Button
         overrides={{
-          Block: {
+          BaseButton: {
             props: { ref, ...restProps },
             style: {
-              border: "none",
-              background: "none",
-              padding: 0,
-              margin: 0,
-              cursor: "pointer",
+              borderRadius: "100%",
+              overflow: "hidden",
+              padding: buttonPadding,
             },
           },
         }}
         onClick={onClick}
       >
-        <Block
-          width={theme.sizing.scale950}
-          height={theme.sizing.scale950}
-          overrides={{
-            Block: {
-              style: {
-                borderRadius: "100%",
-                border: `2px solid ${theme.colors.contentPrimary}`,
-                boxSizing: "border-box",
-                overflow: "hidden",
+        {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",
+                },
               },
-            },
-          }}
-        >
-          {typeof avatar === "string" ? (
-            <Block as="img" src={avatar} alt="" />
-          ) : (
-            avatar
-          )}
-        </Block>
-      </Block>
+            }}
+          >
+            {avatar}
+          </Block>
+        )}
+      </Button>
     )
   },
 )

package/src/components/Dropdown/Content.tsx

@@ -1,78 +1,35 @@
-import {
-  Block,
-  Button,
-  LogOut01,
-  Mats,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React, { useCallback } from "react"
-import { useDisconnect } from "wagmi"
-import { useSignOut } from "../../hooks"
-import { DropdownData } from "../../hooks/useDropdownData"
-import AccountAddress from "./AccountAddress"
-import AccountAssets from "./AccountAssets"
-import AccountBalance from "./AccountBalance"
-import WelcomeBlock from "./WelcomeBlock"
-
-function MatsnetLabel() {
-  const [, theme] = useStyletron()
-  return (
-    <ParagraphSmall color={theme.colors.contentTertiary}>
-      <Mats
-        color="currentColor"
-        size={theme.sizing.scale400}
-        overrides={{
-          Svg: {
-            style: {
-              marginRight: theme.sizing.scale300,
-            },
-          },
-        }}
-      />
-      Matsnet Assets
-    </ParagraphSmall>
-  )
-}
-
-type DropdownContentProps = {
-  data: DropdownData
+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 TestnetTopBanner from "./TestnetTopBanner"
+
+type ContentProps = {
   onSignOut?: () => void
+  onOtherAssetsClick?: () => void
 }
 
-export default function DropdownContent(props: DropdownContentProps) {
-  const { data, onSignOut } = props
-
-  const [, theme] = useStyletron()
+function Content(props: ContentProps) {
+  const { onSignOut, onOtherAssetsClick } = props
 
-  const {
-    mezoId,
-    address,
-    walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
-  } = data
+  const [_, theme] = useStyletron()
 
-  const { disconnect } = useDisconnect()
-  const { signOut } = useSignOut()
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
 
-  const handleLogOut = useCallback(() => {
-    if (onSignOut) {
-      onSignOut()
-      return
-    }
-
-    signOut()
-    disconnect()
-  }, [signOut, disconnect, onSignOut])
+  useEffect(
+    () => () => {
+      setView(DropdownView.ROOT)
+    },
+    [setView],
+  )
 
   return (
     <Block
       display="inline-flex"
       flexDirection="column"
       backgroundColor={theme.colors.backgroundPrimary}
-      padding={theme.sizing.scale500}
       width="100%"
       overrides={{
         Block: {
@@ -82,67 +39,15 @@ export default function DropdownContent(props: DropdownContentProps) {
         },
       }}
     >
-      <WelcomeBlock mezoId={mezoId} matsBalance={matsnet.mats} />
-
-      <Block
-        display="flex"
-        flexDirection="column"
-        backgroundColor={theme.colors.backgroundSecondary}
-        overflow="hidden"
-        overrides={{
-          Block: { style: { borderRadius: theme.borders.radius300 } },
-        }}
-      >
-        <AccountAddress address={address} type={walletType} />
+      <TestnetTopBanner />
 
-        <AccountBalance amount={totalBalanceInUsd} />
-
-        <AccountAssets label="Assets" assets={formattedNativeAssets} />
-      </Block>
-
-      {matsnet.formattedAssets.length > 0 && (
-        <Block
-          marginTop={theme.sizing.scale600}
-          backgroundColor={theme.colors.backgroundSecondary}
-          overflow="hidden"
-          overrides={{
-            Block: { style: { borderRadius: theme.borders.radius300 } },
-          }}
-        >
-          <AccountAssets
-            label={<MatsnetLabel />}
-            assets={matsnet.formattedAssets}
-          />
-        </Block>
+      {currentView === DropdownView.ROOT && (
+        <Root onSignOut={onSignOut} onOtherAssetsClick={onOtherAssetsClick} />
       )}
 
-      <Block
-        marginTop={theme.sizing.scale700}
-        padding={`0 ${theme.sizing.scale100}`}
-      >
-        <Button
-          size="small"
-          kind="tertiary"
-          startEnhancer={<LogOut01 color="currentColor" size={12} />}
-          onClick={() => handleLogOut()}
-          overrides={{
-            Root: {
-              style: {
-                ":hover": {
-                  backgroundColor: theme.colors.backgroundSecondary,
-                  boxShadow: "none",
-                },
-                ":active": {
-                  backgroundColor: theme.colors.backgroundSecondary,
-                  color: theme.colors.contentPrimary,
-                },
-              },
-            },
-          }}
-        >
-          Log out
-        </Button>
-      </Block>
+      {currentView === DropdownView.RECEIVE && <Receive />}
     </Block>
   )
 }
+
+export default Content

package/src/components/Dropdown/DisconnectedTrigger.tsx

@@ -20,12 +20,13 @@ const DisconnectedTrigger = forwardRef<
       }
       overrides={{
         Root: {
-          props: { ref, ...restProps },
+          props: { ref },
         },
       }}
       size="small"
       shape="pill"
       onClick={onClick}
+      {...restProps}
     >
       {children}
     </Button>

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import {
+  ButtonProps,
   StatefulPopover,
   StatefulPopoverProps,
   useStyletron,
@@ -6,23 +7,25 @@ import {
 import { useConnectModal } from "@rainbow-me/rainbowkit"
 import React from "react"
 import DefaultAvatar from "../../assets/DefaultAvatar"
-import useDropdownData, {
-  DropdownCryptoAsset,
-} from "../../hooks/useDropdownData"
-import useWalletAccount from "../../hooks/useWalletAccount"
 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 set of EVM native assets to be displayed in the dropdown */
-  evmNativeAssets?: DropdownCryptoAsset<"tbtc" | "wbtc">[]
-  /** The set of Matsnet assets to be displayed in the dropdown */
-  matsnetAssets?: DropdownCryptoAsset<"mbtc" | "musd">[]
+  /** 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">
 
 /**
@@ -36,26 +39,27 @@ export function Dropdown(props: DropdownProps) {
     animateOutTime = 120,
     onSignIn,
     onSignOut,
-    evmNativeAssets,
-    matsnetAssets,
     overrides,
+    triggerProps,
+    onOtherAssetsClick,
     ...restProps
   } = props
 
   const [, theme] = useStyletron()
 
-  const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets })
+  const walletAccount = useWalletAccount()
 
-  const { openConnectModal } = useConnectModal()
+  useWatchTransferEventsForAllTokens()
 
-  const { isConnected } = useWalletAccount()
+  const { openConnectModal } = useConnectModal()
 
-  if (!dropdownData || !isConnected) {
+  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>
@@ -64,7 +68,12 @@ export function Dropdown(props: DropdownProps) {
 
   return (
     <StatefulPopover
-      content={<Content data={dropdownData} onSignOut={onSignOut} />}
+      content={
+        <Content
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      }
       placement={placement}
       animateOutTime={animateOutTime}
       overrides={{
@@ -72,7 +81,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            minWidth: "378px",
+            width: "402px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",
@@ -82,7 +91,10 @@ export function Dropdown(props: DropdownProps) {
       }}
       {...restProps}
     >
-      <ConnectedTrigger avatar={<DefaultAvatar />} />
+      <ConnectedTrigger
+        avatar={<DefaultAvatar />}
+        {...triggerProps?.signedIn}
+      />
     </StatefulPopover>
   )
 }

package/src/components/Dropdown/ListingItem.tsx

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

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