@mezo-org/passport 0.4.0-dev.9 → 0.5.1-dev.0

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

package/src/components/Dropdown/README.md

@@ -6,26 +6,18 @@ 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). -
-  **optional**
+  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
+  **Sign out** button. It's optional since by default it disconnects the current
   wallet connector and closes the Passport session. - **optional**
-- `evmNativeAssets` (`Asset<"tbtc" | "wbtc">[]`) - Array of Matsnet assets. -
-  **optional**
-- `matsnetAssets` (`Asset<"mbtc" | "musd">[]`) - Array of Matsnet assets. -
-  **optional**
-  ```ts
-  type Asset = {
-    type: "btc" | "tbtc" | "wbtc" | "mbtc" | "musd"
-    decimals: number
-    amount: {
-      token: bigint
-      usd: number
-    }
-  }
-  ```
+- `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/)

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

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

@@ -0,0 +1,99 @@
+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>
+  )
+}