@mezo-org/passport 0.4.0-dev.20 → 0.4.0-dev.22

package/src/components/Dropdown/Dropdown.tsx

@@ -5,27 +5,21 @@ import {
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React, { useEffect } 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"> & {
@@ -33,6 +27,7 @@ export type DropdownProps = {
     }
     signedOut?: Omit<ButtonProps, "onClick">
   }
+  onOtherAssetsClick?: () => void
 } & Omit<StatefulPopoverProps, "children" | "content">
 
 /**
@@ -46,16 +41,20 @@ 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 data = useDropdownData()
+
+  const isCriticalDropdownDataLoaded = useMemo(
+    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
+    [data],
+  )
 
   const { openConnectModal } = useConnectModal()
 
@@ -81,7 +80,7 @@ export function Dropdown(props: DropdownProps) {
     handleSignIn()
   }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync])
 
-  if (!dropdownData || !isConnected) {
+  if (!isConnected || !isCriticalDropdownDataLoaded) {
     return (
       <DisconnectedTrigger
         // If connect wallet flow is not provided it fallbacks to RainbowKit's
@@ -97,7 +96,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={{

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/README.md

@@ -14,20 +14,6 @@ component. It allows to establish the session and interact with the API.
 - `onSignOut` (`() => void`) - The callback to be executed on click of the
   **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

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

@@ -0,0 +1,26 @@
+import React from "react"
+import { CryptoAssetKey, getCryptoAsset } from "../../../utils/cryptoAssets"
+import ListingItem from "../ListingItem"
+
+type AccountAssetItemProps = {
+  type: CryptoAssetKey
+  amount: string
+  subLabel: string
+  subValue: string
+}
+
+export default function AccountAssetItem(props: AccountAssetItemProps) {
+  const { type, amount, subLabel, subValue } = props
+
+  const { icon: Icon, name: label } = getCryptoAsset(type)
+
+  return (
+    <ListingItem
+      icon={Icon}
+      label={label}
+      subLabel={subLabel}
+      value={amount}
+      subValue={subValue}
+    />
+  )
+}

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

@@ -1,35 +1,30 @@
-import {
-  Block,
-  HeadingSmall,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
 import React from "react"
+import { useStyletron } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
 
 type AccountBalanceProps = {
-  amount: string
+  totalBalance: string
+  totalDebt: string
 }
 
 export default function AccountBalance(props: AccountBalanceProps) {
-  const { amount } = props
+  const { totalBalance, totalDebt } = props
 
   const [, theme] = useStyletron()
 
   return (
-    <Block
-      padding={theme.sizing.scale500}
+    <ListingItem
+      label="Total assets"
+      value={totalBalance}
+      subLabel="Total liabilities"
+      subValue={totalDebt}
       overrides={{
-        Block: {
+        Root: {
           style: {
-            borderBottom: `1px solid ${theme.colors.backgroundPrimary}`,
+            borderBottom: `1px solid ${theme.colors.borderInverseSelected}`,
           },
         },
       }}
-    >
-      <ParagraphSmall margin={0} color={theme.colors.gray800}>
-        Available balance
-      </ParagraphSmall>
-      <HeadingSmall margin={0}>{amount}</HeadingSmall>
-    </Block>
+    />
   )
 }

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react"
+import { Block, useStyletron, CoinsStacked02 } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { formatUsd } from "../../../utils/currency"
+
+type AccountOtherAssetsProps = {
+  assetsCount: number
+  assetsUsdTotal: number
+  onClick?: () => void
+}
+
+export default function AccountOtherAssets(props: AccountOtherAssetsProps) {
+  const { assetsCount, assetsUsdTotal, onClick } = props
+
+  const [, theme] = useStyletron()
+
+  const label = useMemo(() => {
+    if (assetsCount === 0) return "No other assets"
+    if (assetsCount === 1) return "1 more asset"
+    return `${assetsCount} more assets`
+  }, [assetsCount])
+
+  const formattedAssetsUsdTotal = formatUsd(assetsUsdTotal)
+
+  return (
+    <Block
+      aria-label={label}
+      as="li"
+      overrides={{
+        Block: {
+          style: {
+            listStyle: "none",
+            borderTop: `1px solid ${theme.colors.borderInverseSelected}`,
+          },
+        },
+      }}
+    >
+      <ListingItem
+        icon={CoinsStacked02}
+        label={label}
+        value={formattedAssetsUsdTotal}
+        overrides={{
+          Root: {
+            props: {
+              $as: "button",
+              onClick,
+            },
+            style: {
+              border: 0,
+              padding: 0,
+              cursor: "pointer",
+            },
+          },
+          ArtworkContainer: {
+            style: {
+              stroke: theme.colors.contentPrimary,
+            },
+          },
+          Content: {
+            style: {
+              minHeight: theme.sizing.scale1200,
+            },
+          },
+        }}
+      />
+    </Block>
+  )
+}

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

@@ -1,43 +1,34 @@
-import {
-  Block,
-  Button,
-  LogOut01,
-  Mats,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
+import { Block, Button, LogOut01, 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 WalletAddress from "./WalletAddress"
-import AccountAssets from "./AccountAssets"
 import AccountBalance from "./AccountBalance"
 import WelcomeBlock from "./WelcomeBlock"
 import AccountAddressActions from "./AccountAddressActions"
+import AccountAssetItem from "./AccountAssetItem"
+import { DetailedCryptoAsset } from "../../../utils/cryptoAssets"
+import { formatNumberToCompactString } from "../../../utils/numbers"
+import { formatUsd } from "../../../utils/currency"
+import AccountOtherAssets from "./AccountOtherAssets"
 
-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 RootProps = DropdownData & {
+type RootProps = {
+  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 Root(props: RootProps) {
@@ -46,10 +37,15 @@ export default function Root(props: RootProps) {
     walletAddress,
     accountAddress,
     walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
+    usdTotalBalance,
+    usdTroveDebt,
+    usdCollateral,
+    matsBalance,
+    assets,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
     onSignOut,
+    onOtherAssetsClick,
   } = props
 
   const [, theme] = useStyletron()
@@ -67,13 +63,18 @@ export default function Root(props: RootProps) {
     disconnect()
   }, [signOut, disconnect, onSignOut])
 
+  const formattedMatsBalance = formatNumberToCompactString(matsBalance, 2)
+  const formattedUsdTotalBalance = formatUsd(usdTotalBalance)
+  const formattedUsdTroveDebt = formatUsd(usdTroveDebt)
+  const formattedUsdCollateral = formatUsd(usdCollateral)
+
   return (
     <Block
       display="inline-flex"
       flexDirection="column"
       padding={theme.sizing.scale600}
     >
-      <WelcomeBlock mezoId={mezoId} matsBalance={matsnet.mats} />
+      <WelcomeBlock mezoId={mezoId} matsBalance={formattedMatsBalance} />
 
       <AccountAddressActions address={accountAddress} />
 
@@ -88,26 +89,31 @@ export default function Root(props: RootProps) {
       >
         <WalletAddress address={walletAddress} type={walletType} />
 
-        <AccountBalance amount={totalBalanceInUsd} />
+        <AccountBalance
+          totalBalance={formattedUsdTotalBalance}
+          totalDebt={formattedUsdTroveDebt}
+        />
 
-        <AccountAssets label="Assets" assets={formattedNativeAssets} />
-      </Block>
+        <AccountAssetItem
+          type="BTC"
+          amount={assets.btc.formattedUsdBalance}
+          subLabel="Locked collateral"
+          subValue={formattedUsdCollateral}
+        />
 
-      {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>
-      )}
+        <AccountAssetItem
+          type="MUSD"
+          amount={assets.musd.formattedUsdBalance}
+          subLabel="Borrowed"
+          subValue={formattedUsdTroveDebt}
+        />
+
+        <AccountOtherAssets
+          assetsCount={otherAssetsCount}
+          assetsUsdTotal={otherAssetsUsdTotal}
+          onClick={onOtherAssetsClick}
+        />
+      </Block>
 
       <Block
         marginTop={theme.sizing.scale700}

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

@@ -27,7 +27,7 @@ export default function WalletAddress(props: WalletAddressProps) {
   )
   const trimmedAddress = trimAddress(address)
   const { icon: accountIcon } = getCryptoAsset(
-    type === "bitcoin" ? "btc" : "eth",
+    type === "bitcoin" ? "BTC" : "ETH",
   )
 
   const [, theme] = useStyletron()
@@ -67,15 +67,15 @@ export default function WalletAddress(props: WalletAddressProps) {
       {isCopiedMessageVisible ? (
         <ParagraphSmall
           margin={0}
-          marginLeft={theme.sizing.scale300}
-          color={theme.colors.gray800}
+          marginLeft={theme.sizing.scale500}
+          color={theme.colors.contentPrimary}
         >
           Copied address to clipboard
         </ParagraphSmall>
       ) : (
         <Block
           as="a"
-          marginLeft={theme.sizing.scale300}
+          marginLeft={theme.sizing.scale500}
           href={blockExplorerUrl}
           target="_blank"
           overrides={{
@@ -94,7 +94,7 @@ export default function WalletAddress(props: WalletAddressProps) {
             display="flex"
             alignItems="center"
             margin={0}
-            color={theme.colors.gray800}
+            color={theme.colors.contentPrimary}
           >
             {trimmedAddress}
             <LinkIcon
@@ -104,7 +104,7 @@ export default function WalletAddress(props: WalletAddressProps) {
                 Svg: {
                   style: {
                     stroke: "currentColor",
-                    marginLeft: theme.sizing.scale200,
+                    marginLeft: theme.sizing.scale300,
                   },
                 },
               }}
@@ -114,11 +114,11 @@ export default function WalletAddress(props: WalletAddressProps) {
       )}
       <CopyIcon
         size={theme.sizing.scale550}
+        color={theme.colors.contentPrimary}
         overrides={{
           Svg: {
             style: {
               marginLeft: "auto",
-              stroke: "currentColor",
             },
           },
         }}

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

@@ -74,16 +74,16 @@ export default function WelcomeBlock(props: WelcomeBlockProps) {
           overrides={{
             Block: {
               style: {
-                gap: theme.sizing.scale300,
+                gap: theme.sizing.scale400,
               },
             },
           }}
         >
           <Mats
             color={theme.colors.contentPrimary}
-            size={theme.sizing.scale600}
+            size={theme.sizing.scale500}
           />
-          {matsBalance}
+          {matsBalance} mats
         </LabelSmall>
       </Block>
     </Block>

package/src/components/Dropdown/TestnetTopBanner.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import {
+  Block,
+  InfoCircle,
+  LabelSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { usePassportContext } from "../../hooks/usePassportContext"
+
+export default function TestnetTopBanner() {
+  const [, theme] = useStyletron()
+
+  const { environment } = usePassportContext()
+
+  if (environment !== "testnet") {
+    return null
+  }
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={`${theme.sizing.scale700} ${theme.sizing.scale600}`}
+      backgroundColor={theme.colors.warning}
+    >
+      <InfoCircle size={theme.sizing.scale550} />
+      <LabelSmall marginLeft={theme.sizing.scale500}>
+        You are using testnet funds.
+      </LabelSmall>
+    </Block>
+  )
+}

package/src/config.ts

@@ -1,7 +1,7 @@
 import { http } from "viem"
 import { Chain, getDefaultConfig, WalletList } from "@rainbow-me/rainbowkit"
 import { Config, CreateConfigParameters } from "wagmi"
-import { CHAIN_ID, mezoMatsnetTestnet, RPC_BY_NETWORK } from "./constants"
+import { CHAIN_ID, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -34,7 +34,7 @@ export const defaultConfig: Required<
 > = {
   transports,
   walletConnectProjectId: "",
-  chains: [mezoMatsnetTestnet],
+  chains: [mezoTestnet],
   multiInjectedProviderDiscovery: true,
 }
 

package/src/constants.ts

@@ -1,11 +1,12 @@
-import { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+import { mezoTestnet } from "@mezo-org/orangekit"
 
-export { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+export { mezoTestnet } from "@mezo-org/orangekit"
 
 export const CHAIN_ID = {
-  testnet: mezoMatsnetTestnet.id,
+  testnet: mezoTestnet.id,
+  mainnet: undefined,
 }
 
 export const RPC_BY_NETWORK = {
-  testnet: mezoMatsnetTestnet.rpcUrls.default.http[0],
+  testnet: mezoTestnet.rpcUrls.default.http[0],
 }

package/src/hooks/index.ts

@@ -6,6 +6,7 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
+export { useInvalidateBorrowData, useResetBorrowData } from "./useBorrowData"
 export * from "./useGetAccountByAddress"
 export * from "./useGetAccountByMezoId"
 export * from "./useGetCurrentAccount"
@@ -15,5 +16,9 @@ export * from "./useSignInWithDiscord"
 export * from "./useSignInWithWallet"
 export * from "./useSignOut"
 export * from "./useSignUpWithWallet"
+export {
+  useInvalidateTokensBalances,
+  useResetTokensBalances,
+} from "./useTokensBalances"
 export * from "./useUpdateMezoId"
 export * from "./useRefreshPassport"