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

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>
   )

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

@@ -1,25 +1,26 @@
 import {
   ArrowNarrowLeft,
   Block,
+  BlockProps,
   Button,
   ButtonProps,
-  Cube01,
+  mergeOverrides,
+  Skeleton,
   useStyletron,
 } from "@mezo-org/mezo-clay"
-import React, { useCallback } from "react"
+import React from "react"
 import { usePassportContext } from "../../../hooks/usePassportContext"
 import { getAddressExplorerUrl } from "../../../utils/address"
 import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
-
-type AccountAddressActionsProps = {
-  address: string
-}
+import useWalletAccount from "../../../hooks/useWalletAccount"
+import AccountError from "./AccountError"
 
 const buttonStartEnhancerSize = 12
 
 const commonButtonProps: Partial<ButtonProps> = {
   kind: "secondary",
-  size: "xsmall",
+  size: "small",
+  shape: "pill",
   overrides: {
     BaseButton: {
       style: {
@@ -34,50 +35,69 @@ const commonButtonProps: Partial<ButtonProps> = {
   },
 }
 
-export default function AccountAddressActions(
-  props: AccountAddressActionsProps,
-) {
-  const { address } = props
+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 {
+    data: walletAccountData,
+    isError: isWalletAccountDataError,
+    isPending: isWalletAccountDataPending,
+  } = useWalletAccount()
+
+  if (isWalletAccountDataError) {
+    return <AccountError topic="wallet account data" />
+  }
+
+  if (isWalletAccountDataPending) {
+    return (
+      <Block
+        display="flex"
+        alignItems="center"
+        backgroundColor="transparent"
+        marginBottom={theme.sizing.scale600}
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+            },
+          },
+        }}
+      >
+        <Skeleton animation width="100%" height="28px" />
+        <Skeleton animation width="100%" height="28px" />
+      </Block>
+    )
+  }
+
   const blockExplorerUrl = getAddressExplorerUrl(
-    address,
+    walletAccountData.accountAddress,
     "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,
+      padding={`0 ${theme.sizing.scale600} ${theme.sizing.scale800}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+            },
           },
         },
-      }}
+        overrides,
+      )}
+      {...restProps}
     >
-      <Button
-        startEnhancer={<Cube01 size={buttonStartEnhancerSize} />}
-        $as="a"
-        href={blockExplorerUrl}
-        target="_blank"
-        {...commonButtonProps}
-      >
-        View Mezo Explorer
-      </Button>
-
       <Button
         onClick={handleReceiveClick}
         startEnhancer={
@@ -96,6 +116,15 @@ export default function AccountAddressActions(
       >
         Receive
       </Button>
+
+      <Button
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+        {...commonButtonProps}
+      >
+        Block Explorer
+      </Button>
     </Block>
   )
 }

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

@@ -1,30 +1,68 @@
 import React from "react"
-import { useStyletron } from "@mezo-org/mezo-clay"
+import { BlockProps, useStyletron } from "@mezo-org/mezo-clay"
+import { formatUnits } from "viem"
 import ListingItem from "../ListingItem"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import AccountError from "./AccountError"
+import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates"
+import { usePassportContext } from "../../../hooks/usePassportContext"
 
-type AccountBalanceProps = {
-  totalBalance: string
-  totalDebt: string
-}
+type AccountBalanceProps = Omit<BlockProps, "children">
 
 export default function AccountBalance(props: AccountBalanceProps) {
-  const { totalBalance, totalDebt } = props
-
+  const { overrides, ...restProps } = props
   const [, theme] = useStyletron()
+  const { nativeBalanceRefetchInterval } = usePassportContext()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesDataPending,
+  } = useTokensBalances({
+    queryOptions: {
+      refetchInterval: nativeBalanceRefetchInterval,
+    },
+  })
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  if (isTokensBalancesDataPending || isBorrowDataPending) {
+    return <ListingItem isLoading overrides={overrides} />
+  }
+
+  if (isTokensBalancesError || isBorrowDataError) {
+    return (
+      <AccountError
+        padding={`${theme.sizing.scale500} ${theme.sizing.scale800}`}
+        topic="account balance"
+        overrides={overrides}
+      />
+    )
+  }
+
+  const totalBalanceInUsd = Object.values(tokensBalancesData).reduce(
+    (acc, tokenBalance) => acc + tokenBalance.usd.value,
+    0n,
+  )
+
+  const totalBalanceNumber = Number(
+    formatUnits(totalBalanceInUsd, CONVERSION_RATE_DECIMALS),
+  )
+
+  const totalDebtNumber = Number(borrowData.debtInUsd.formatted)
 
   return (
     <ListingItem
       label="Total assets"
-      value={totalBalance}
+      value={totalBalanceNumber}
       subLabel="Total liabilities"
-      subValue={totalDebt}
-      overrides={{
-        Root: {
-          style: {
-            borderBottom: `1px solid ${theme.colors.borderInverseSelected}`,
-          },
-        },
-      }}
+      subValue={totalDebtNumber}
+      overrides={overrides}
+      {...restProps}
     />
   )
 }

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { BitcoinCircle, BlockProps } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { getAsset } from "../../../utils/assets"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+
+type AccountBTCListingProps = Omit<BlockProps, "children">
+
+export default function AccountBTCListing(props: AccountBTCListingProps) {
+  const { nativeBalanceRefetchInterval } = usePassportContext()
+
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesPending,
+  } = useTokensBalances({
+    queryOptions: {
+      refetchInterval: nativeBalanceRefetchInterval,
+    },
+  })
+
+  if (isTokensBalancesError || isBorrowDataError) {
+    return <AccountError topic="Bitcoin balance" />
+  }
+
+  if (isTokensBalancesPending || isBorrowDataPending) {
+    return <ListingItem isLoading />
+  }
+
+  const btcBalance = Number(tokensBalancesData.BTC.usd.formatted)
+  const lockedCollateral = Number(borrowData.collateral.usd.formatted)
+
+  return (
+    <ListingItem
+      icon={<BitcoinCircle />}
+      label={getAsset("BTC").name}
+      value={btcBalance}
+      subLabel="Locked collateral"
+      subValue={lockedCollateral}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,34 @@
+import React from "react"
+import {
+  BlockProps,
+  LabelSmall,
+  mergeOverrides,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+
+type AccountErrorProps = {
+  topic: string
+} & BlockProps
+
+export default function AccountError(props: AccountErrorProps) {
+  const { topic, overrides, ...restProps } = props
+
+  const [, theme] = useStyletron()
+
+  return (
+    <LabelSmall
+      padding={`${theme.sizing.scale600} ${theme.sizing.scale800}`}
+      color="negative"
+      overrides={mergeOverrides(overrides, {
+        Block: {
+          style: {
+            lineHeight: theme.sizing.scale700,
+          },
+        },
+      })}
+      {...restProps}
+    >
+      An error occured loading {topic}.
+    </LabelSmall>
+  )
+}

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

@@ -0,0 +1,45 @@
+import React from "react"
+import { BlockProps, MUsdCircle02 } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { getAsset } from "../../../utils/assets"
+import { useBorrowData } from "../../../hooks/useBorrowData"
+import { useTokensBalances } from "../../../hooks/useTokensBalances"
+import AccountError from "./AccountError"
+
+export default function AccountMusdListing(
+  props: Omit<BlockProps, "children">,
+) {
+  const {
+    data: borrowData,
+    isError: isBorrowDataError,
+    isPending: isBorrowDataPending,
+  } = useBorrowData()
+
+  const {
+    data: tokensBalancesData,
+    isError: isTokensBalancesError,
+    isPending: isTokensBalancesPending,
+  } = useTokensBalances()
+
+  if (isBorrowDataError || isTokensBalancesError) {
+    return <AccountError topic="MUSD balance" />
+  }
+
+  if (isBorrowDataPending || isTokensBalancesPending) {
+    return <ListingItem isLoading />
+  }
+
+  const musdBalance = Number(tokensBalancesData.MUSD.usd.formatted)
+  const lockedCollateral = Number(borrowData.debtInUsd.formatted)
+
+  return (
+    <ListingItem
+      icon={<MUsdCircle02 />}
+      label={getAsset("MUSD").name}
+      value={musdBalance}
+      subLabel="Borrowed"
+      subValue={lockedCollateral}
+      {...props}
+    />
+  )
+}