@mezo-org/passport 0.4.0-dev.7 → 0.4.0-dev.70

package/src/components/Dropdown/Content.tsx

@@ -1,78 +1,64 @@
-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"
+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"
 
-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
+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
 }
 
-export default function DropdownContent(props: DropdownContentProps) {
-  const { data, onSignOut } = props
-
-  const [, theme] = useStyletron()
-
+function Content(props: ContentProps) {
   const {
     mezoId,
-    address,
+    accountAddress,
+    walletAddress,
     walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
-  } = data
+    usdTotalBalance,
+    assets,
+    matsBalance,
+    usdTroveDebt,
+    usdCollateral,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
+    onSignOut,
+    onOtherAssetsClick,
+  } = props
 
-  const { disconnect } = useDisconnect()
-  const { signOut } = useSignOut()
+  const [_, theme] = useStyletron()
 
-  const handleLogOut = useCallback(() => {
-    if (onSignOut) {
-      onSignOut()
-      return
-    }
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
 
-    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 +68,31 @@ 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} />
-
-        <AccountBalance amount={totalBalanceInUsd} />
+      <TestnetTopBanner />
 
-        <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
+          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}
+        />
       )}
 
-      <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 address={accountAddress} />
+      )}
     </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,28 +1,37 @@
 import {
+  ButtonProps,
   StatefulPopover,
   StatefulPopoverProps,
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React from "react"
+import React, { useEffect, useMemo } from "react"
+import { useDisconnect } from "wagmi"
 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 { 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 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
+  /** Time in milliseconds after which account data (like mats or mezo id) in dropdown should be re-fetched. Default is 90000 (90 secs) */
+  accountDataRefetchInterval?: number
+  /** Time in milliseconds after which native balance in dropdown should be re-fetched. Default is 90000 (90 secs) */
+  nativeBalanceRefetchInterval?: number
 } & Omit<StatefulPopoverProps, "children" | "content">
 
 /**
@@ -36,26 +45,58 @@ export function Dropdown(props: DropdownProps) {
     animateOutTime = 120,
     onSignIn,
     onSignOut,
-    evmNativeAssets,
-    matsnetAssets,
     overrides,
+    triggerProps,
+    onOtherAssetsClick,
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
     ...restProps
   } = props
 
   const [, theme] = useStyletron()
 
-  const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets })
+  const data = useDropdownData({
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
+  })
+
+  const isCriticalDropdownDataLoaded = useMemo(
+    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
+    [data],
+  )
 
   const { openConnectModal } = useConnectModal()
 
   const { isConnected } = useWalletAccount()
 
-  if (!dropdownData || !isConnected) {
+  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>
@@ -64,7 +105,23 @@ export function Dropdown(props: DropdownProps) {
 
   return (
     <StatefulPopover
-      content={<Content data={dropdownData} onSignOut={onSignOut} />}
+      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={{
@@ -72,7 +129,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            minWidth: "378px",
+            width: "396px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",
@@ -82,7 +139,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,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

@@ -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,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>Your Mezo Address</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