@mezo-org/passport 0.4.0-dev.82 → 0.4.0-dev.83

package/src/components/Dropdown/Dropdown.tsx

@@ -5,15 +5,13 @@ import {
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React, { useEffect, useMemo } from "react"
-import { useDisconnect } from "wagmi"
+import React from "react"
 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"
+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 */
@@ -28,10 +26,6 @@ export type DropdownProps = {
     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">
 
 /**
@@ -48,57 +42,23 @@ export function Dropdown(props: DropdownProps) {
     overrides,
     triggerProps,
     onOtherAssetsClick,
-    accountDataRefetchInterval,
-    nativeBalanceRefetchInterval,
     ...restProps
   } = props
 
   const [, theme] = useStyletron()
 
-  const data = useDropdownData({
-    accountDataRefetchInterval,
-    nativeBalanceRefetchInterval,
-  })
+  const { data: walletAccountData } = useWalletAccount()
 
-  const isCriticalDropdownDataLoaded = useMemo(
-    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
-    [data],
-  )
+  useWatchTransferEventsForAllTokens()
 
   const { openConnectModal } = useConnectModal()
 
-  const { isConnected } = useWalletAccount()
-
-  const { signInWithWalletAsync, isPending } = useSignInWithWallet()
-
-  const { disconnectAsync } = useDisconnect()
-
-  useEffect(() => {
-    if (onSignIn) return
-
-    const handleSignIn = async () => {
-      console.log("handle sign in...")
-      if (!isConnected) return
-
-      try {
-        console.log("sign in with wallet async")
-        await signInWithWalletAsync()
-      } catch (error) {
-        console.log("disconnect async")
-        await disconnectAsync()
-      }
-    }
-
-    handleSignIn()
-  }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync])
-
-  if (!isConnected || !isCriticalDropdownDataLoaded) {
+  if (!walletAccountData?.isConnected) {
     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
@@ -110,17 +70,6 @@ export function Dropdown(props: DropdownProps) {
     <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}
         />
@@ -132,7 +81,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            width: "396px",
+            width: "402px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",

package/src/components/Dropdown/ListingItem.tsx

@@ -1,80 +1,176 @@
 import {
-  ListItem,
-  ListItemLabel,
   mergeOverrides,
-  ListItemLabelProps,
-  IconProps,
-  ListItemProps,
+  Block,
+  useStyletron,
+  BlockProps,
+  Skeleton,
+  LabelMedium,
+  ParagraphSmall,
 } from "@mezo-org/mezo-clay"
-import React, { FC } from "react"
+import React, { ReactNode } from "react"
+import SlotNumber from "./SlotNumber"
+import { formatUsd } from "../../utils/currency"
 
-const SHARED_LABEL_OVERRIDES: ListItemLabelProps["overrides"] = {
-  LabelDescription: {
-    style: {
-      color: "#4B4B4B", // contentSecondary
-    },
-  },
+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?: FC<IconProps>
-  label: string
+  icon?: ReactNode
+  label?: string
   subLabel?: string
-  value: string
-  subValue?: string
-  overrides?: ListItemProps["overrides"]
+  value?: number
+  subValue?: number
+  overrides?: BlockProps["overrides"]
+  isLoading?: boolean
 }
 
 export default function ListingItem(props: ListingItemProps) {
   const {
-    icon: Icon,
+    icon,
     label,
-    subLabel = "",
+    subLabel,
     value,
-    subValue = "",
+    subValue,
     overrides,
+    isLoading = false,
   } = props
 
-  return (
-    <ListItem
-      artwork={Icon}
-      // eslint-disable-next-line react/no-unstable-nested-components
-      endEnhancer={() => (
-        <ListItemLabel
-          description={subValue}
-          overrides={mergeOverrides(
-            {
-              LabelRoot: {
-                style: {
-                  textAlign: "right",
-                },
+  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 },
               },
-            },
-            SHARED_LABEL_OVERRIDES,
-          )}
+            }}
+          />
+        }
+        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}
         >
-          {value}
-        </ListItemLabel>
-      )}
-      overrides={mergeOverrides(
-        {
-          Root: {
-            style: {
-              backgroundColor: "transparent",
-            },
-          },
-          Content: {
-            style: {
-              border: 0,
-            },
-          },
-        },
-        overrides,
-      )}
-    >
-      <ListItemLabel description={subLabel} overrides={SHARED_LABEL_OVERRIDES}>
-        {label}
-      </ListItemLabel>
-    </ListItem>
+          {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,8 +1,9 @@
 import {
   ArrowLeft,
   Block,
+  BlockProps,
   ButtonIcon,
-  LabelMedium,
+  HeadingSmall,
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import React, { ReactNode, useCallback } from "react"
@@ -10,21 +11,20 @@ import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
 
 const getHeaderTitle = (view: DropdownView) => {
   const titleMap: Partial<Record<DropdownView, string>> = {
-    [DropdownView.RECEIVE]: "Receive",
+    [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 isNested = useDropdownStore((state) => state.isNestedView())
 
   const [, theme] = useStyletron()
 
@@ -37,37 +37,49 @@ function NestedViewLayout(props: NestedViewLayoutProps) {
       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}
+        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="small"
-          overrides={{
-            BaseButton: {
-              style: {
-                background: theme.colors.backgroundPrimary,
-                marginRight: isNested ? theme.sizing.scale300 : undefined,
-              },
-            },
-          }}
+          size="medium"
+          kind="tertiary"
         >
-          <ArrowLeft size={theme.sizing.scale700} />
+          <ArrowLeft />
         </ButtonIcon>
 
-        <LabelMedium>{getHeaderTitle(currentView)}</LabelMedium>
+        <HeadingSmall
+          marginTop={theme.sizing.scale300}
+          marginBottom={theme.sizing.scale300}
+        >
+          {getHeaderTitle(currentView)}
+        </HeadingSmall>
       </Block>
 
-      {children}
+      <Block
+        display="flex"
+        flexDirection="column"
+        padding={theme.sizing.scale600}
+        paddingTop={0}
+        flex={1}
+      >
+        {children}
+      </Block>
     </Block>
   )
 }

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

@@ -1,12 +1,13 @@
 import {
   Block,
   Button,
-  LabelMedium,
+  LabelLarge,
+  MezoCircle,
   MonoLabelXSmall,
   ParagraphSmall,
   useStyletron,
 } from "@mezo-org/mezo-clay"
-import React, { useCallback, useState } from "react"
+import React, { useState } from "react"
 import { useCopyToClipboard } from "usehooks-ts"
 import { QRCodeSVG } from "qrcode.react"
 import NestedViewLayout from "../NestedViewLayout"
@@ -14,46 +15,54 @@ 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
-
+function Receive() {
   const { environment } = usePassportContext()
 
-  const blockExplorerUrl = getAddressExplorerUrl(
-    address,
-    "mezo",
-    environment === "testnet",
-  )
+  const {
+    data: walletAccountData,
+    isError: isWalletAccountDataError,
+    isPending: isWalletAccountDataPending,
+  } = useWalletAccount()
 
   const [, theme] = useStyletron()
 
   const [, copy] = useCopyToClipboard()
+
   const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
-  const handleCopyAddress = useCallback(() => {
-    copy(address)
+
+  if (isWalletAccountDataError) {
+    return "Error loading wallet account data"
+  }
+
+  if (isWalletAccountDataPending) {
+    return "Loading wallet account data..."
+  }
+
+  const handleCopyAddress = () => {
+    copy(walletAccountData.accountAddress)
     setIsCopiedMessageVisible(true)
 
     setTimeout(() => {
       setIsCopiedMessageVisible(false)
     }, 2000)
-  }, [copy, address])
+  }
 
-  const { networkFamily } = useWalletAccount()
+  const blockExplorerUrl = getAddressExplorerUrl(
+    walletAccountData.accountAddress,
+    "mezo",
+    environment === "testnet",
+  )
 
   return (
     <NestedViewLayout>
-      <LabelMedium>Your Mezo Address</LabelMedium>
+      <LabelLarge>Your Mezo Address</LabelLarge>
 
       <ParagraphSmall
-        marginTop={theme.sizing.scale300}
-        marginBottom={theme.sizing.scale600}
+        marginTop={0}
+        marginBottom={theme.sizing.scale800}
         color={theme.colors.contentTertiary}
       >
-        {networkFamily === "bitcoin" ? (
+        {walletAccountData.networkFamily === "bitcoin" ? (
           <>
             Mezo automatically created a smart account that&apos;s fully
             controlled by your connected Bitcoin wallet. Use this address to
@@ -69,7 +78,7 @@ function Receive(props: ReceiveProps) {
 
       <Block
         as={QRCodeSVG}
-        value={address}
+        value={walletAccountData.accountAddress}
         flex={1}
         overrides={{
           Block: {
@@ -82,35 +91,63 @@ function Receive(props: ReceiveProps) {
         }}
       />
 
-      <MonoLabelXSmall
+      <Block
+        display="flex"
+        alignItems="center"
+        backgroundColor={theme.colors.backgroundSecondary}
         marginTop={theme.sizing.scale800}
-        marginBottom={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale600}
+        padding={theme.sizing.scale300}
         overrides={{
           Block: {
             style: {
-              textAlign: "center",
+              gap: theme.sizing.scale300,
+              borderRadius: theme.borders.radius400,
             },
           },
         }}
       >
-        {address}
-      </MonoLabelXSmall>
+        <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>{walletAccountData.accountAddress}</MonoLabelXSmall>
+      </Block>
 
       <Button
         onClick={handleCopyAddress}
+        size="medium"
         overrides={{
           BaseButton: {
             style: {
-              marginBottom: theme.sizing.scale400,
+              marginBottom: theme.sizing.scale500,
             },
           },
         }}
       >
-        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo Address"}
+        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo address"}
       </Button>
 
-      <Button kind="secondary" $as="a" href={blockExplorerUrl} target="_blank">
-        View Explorer
+      <Button
+        kind="secondary"
+        size="medium"
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+      >
+        View Mezo explorer
       </Button>
     </NestedViewLayout>
   )