@mezo-org/passport 0.15.1-dev.7 → 0.16.0-dev.0

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

@@ -0,0 +1,123 @@
+import {
+  BitcoinCircle,
+  Block,
+  BlockProps,
+  EthCircle,
+  LabelMedium,
+  LabelXSmall,
+  mergeOverrides,
+  MonoLabelXSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
+import useWalletAccount from "../../../hooks/useWalletAccount"
+
+export default function WalletAddress(props: BlockProps) {
+  const { overrides, ...restProps } = props
+  const { walletAddress, networkFamily } = useWalletAccount()
+  const { environment = "mainnet" } = usePassportContext()
+  const [, theme] = useStyletron()
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+
+  const handleCopyAddress = () => {
+    copy(walletAddress!)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    walletAddress!,
+    networkFamily,
+    environment === "testnet",
+  )
+  const trimmedAddress = trimAddress(walletAddress!)
+  const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle
+
+  return (
+    <Block
+      as="button"
+      onClick={handleCopyAddress}
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      padding={`${theme.sizing.scale800} ${theme.sizing.scale700}`}
+      overrides={mergeOverrides(
+        {
+          Block: {
+            style: {
+              gap: theme.sizing.scale700,
+              borderWidth: 0,
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: theme.colors.backgroundTertiary,
+              },
+            },
+          },
+        },
+        overrides,
+      )}
+      {...restProps}
+    >
+      <AccountIcon
+        color={theme.colors.black}
+        size={theme.sizing.scale800}
+        overrides={{
+          Svg: {
+            style: {
+              backgroundColor: theme.colors.black,
+              overflow: "hidden",
+              borderRadius: theme.borders.radius200,
+            },
+          },
+        }}
+      />
+      <Block
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <LabelMedium>Connected Wallet</LabelMedium>
+
+        {isCopiedMessageVisible ? (
+          <LabelXSmall color={theme.colors.contentSecondary}>
+            Copied address to clipboard
+          </LabelXSmall>
+        ) : (
+          <Block
+            as="a"
+            color={theme.colors.contentSecondary}
+            href={blockExplorerUrl}
+            target="_blank"
+            overrides={{
+              Block: {
+                style: {
+                  color: "inherit",
+                  textDecoration: "none",
+                  ":hover": {
+                    textDecoration: "underline",
+                  },
+                },
+              },
+            }}
+          >
+            <MonoLabelXSmall>{trimmedAddress}</MonoLabelXSmall>
+          </Block>
+        )}
+      </Block>
+    </Block>
+  )
+}

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

@@ -0,0 +1,173 @@
+import {
+  Block,
+  BlockProps,
+  HeadingMedium,
+  LabelLarge,
+  Mats,
+  mergeOverrides,
+  Skeleton,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import DefaultAvatar from "../../../assets/DefaultAvatar"
+import { useGetCurrentAccount } from "../../../hooks"
+import { formatNumberToCompactString } from "../../../utils/numbers"
+import AccountError from "./AccountError"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import SlotNumber from "../SlotNumber"
+
+const DOT_DELIMITER_REGEX = /(?=\.)/
+
+function WelcomeBlockSkeleton() {
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Skeleton
+        animation
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Root: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <Skeleton animation width="60%" height={theme.sizing.scale900} />
+        <Skeleton animation width="40%" height={theme.sizing.scale800} />
+      </Block>
+    </Block>
+  )
+}
+
+type WelcomeBlockProps = BlockProps
+
+export default function WelcomeBlock(props: WelcomeBlockProps) {
+  const { overrides, ...restProps } = props
+  const { accountDataRefetchInterval } = usePassportContext()
+
+  const { data, isError, isPending } = useGetCurrentAccount({
+    staleTime: accountDataRefetchInterval,
+    refetchInterval: accountDataRefetchInterval,
+  })
+  const [, theme] = useStyletron()
+
+  if (isError) {
+    return (
+      <AccountError
+        padding={theme.sizing.scale600}
+        paddingTop={theme.sizing.scale900}
+        paddingBottom={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale300}
+        topic="account information"
+      />
+    )
+  }
+
+  if (isPending) {
+    return <WelcomeBlockSkeleton />
+  }
+
+  const [mezoId, mezoIdSuffix] = (data.mezoId ?? "").split(DOT_DELIMITER_REGEX)
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      paddingLeft={theme.sizing.scale600}
+      paddingRight={theme.sizing.scale600}
+      paddingTop={theme.sizing.scale900}
+      paddingBottom={theme.sizing.scale800}
+      overrides={mergeOverrides(overrides, {
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      })}
+      {...restProps}
+    >
+      <Block
+        as={DefaultAvatar}
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Block: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block display="flex" flexDirection="column">
+        {mezoId && mezoIdSuffix && (
+          <HeadingMedium as="span">
+            <Block as="span">{mezoId}</Block>
+            <Block as="span" color={theme.colors.contentSecondary}>
+              {mezoIdSuffix}
+            </Block>
+          </HeadingMedium>
+        )}
+
+        <Block
+          display="flex"
+          alignItems="center"
+          overrides={{
+            Block: {
+              style: {
+                gap: theme.sizing.scale100,
+              },
+            },
+          }}
+        >
+          <Mats
+            size={theme.sizing.scale600}
+            overrides={{
+              Svg: {
+                style: {
+                  margin: theme.sizing.scale100, // To reduce gap
+                },
+              },
+            }}
+          />
+
+          <LabelLarge color={theme.colors.contentPrimary}>
+            <SlotNumber formatFunction={formatNumberToCompactString}>
+              {data.totalMats}
+            </SlotNumber>{" "}
+            mats
+          </LabelLarge>
+        </Block>
+      </Block>
+    </Block>
+  )
+}

package/src/components/Dropdown/SlotNumber.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useMemo } from "react"
+import { AnimatePresence, motion } from "motion/react"
+import { Block, useStyletron } from "@mezo-org/mezo-clay"
+
+type SlotNumberProps = {
+  className?: string
+  children: number
+  formatFunction?: (value: number) => string
+}
+
+type SlotNumberDigitProps = {
+  className?: string
+  children: number
+}
+
+function SlotNumberDigit(props: SlotNumberDigitProps) {
+  const { children: value, ...restProps } = props
+
+  const [css] = useStyletron()
+
+  const digits = [...Array(10).keys()]
+
+  return (
+    <AnimatePresence initial={false}>
+      <motion.div
+        initial={{
+          y: "100%",
+        }}
+        animate={{
+          y: "0%",
+        }}
+        layout="position"
+        className={css({
+          position: "relative",
+        })}
+        {...restProps}
+      >
+        <Block
+          overrides={{
+            Block: {
+              style: {
+                visibility: "hidden",
+              },
+            },
+          }}
+        >
+          {value}
+        </Block>
+
+        <motion.div
+          className={css({
+            display: "flex",
+            flexDirection: "column",
+            position: "absolute",
+            inset: 0,
+            height: "fit-content",
+          })}
+          initial={false}
+          animate={{ y: `${(value / 10) * -100}%` }}
+          transition={{
+            type: "spring",
+            damping: 16,
+            stiffness: 220,
+          }}
+        >
+          {digits.map((digit) => (
+            <Block as="span" key={digit}>
+              {digit}
+            </Block>
+          ))}
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  )
+}
+
+/**
+ * SlotNumber component displays a number with animated digits.
+ *
+ * @typedef {object} SlotNumberProps
+ * @property {number} children - The number to display.
+ * @property {function} [formatFunction] - Optional function to format the number.
+ * @property {BlockProps} [restProps] - Additional properties for the Block component.
+ * @see https://pyszkowski.dev/writings/slot-number
+ * @returns {JSX.Element} The rendered SlotNumber component.
+ */
+function SlotNumber(props: SlotNumberProps) {
+  const { children: value, formatFunction, ...restProps } = props
+
+  const [css] = useStyletron()
+
+  const characters = useMemo(() => {
+    const formattedValue = formatFunction
+      ? formatFunction(value)
+      : value.toString()
+
+    return formattedValue
+      .split("")
+      .map((character) => (/^[0-9]$/.test(character) ? +character : character))
+      .reverse()
+  }, [formatFunction, value])
+
+  return (
+    <motion.div
+      layout
+      className={css({
+        display: "inline-flex",
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        overflow: "hidden",
+        userSelect: "none",
+      })}
+      {...restProps}
+    >
+      {characters.map((character, index) =>
+        typeof character === "number" ? (
+          <SlotNumberDigit key={`slot-number-character-${index}`}>
+            {character}
+          </SlotNumberDigit>
+        ) : (
+          <motion.span layout key={`slot-number-character-${index}`}>
+            {character}
+          </motion.span>
+        ),
+      )}
+    </motion.div>
+  )
+}
+
+export default SlotNumber

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/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown"
+export type { DropdownProps } from "./Dropdown"

package/src/components/index.ts

@@ -0,0 +1 @@
+export { Dropdown, DropdownProps } from "./Dropdown"

package/src/config.ts

@@ -12,7 +12,7 @@ import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
   CreateConfigParameters,
-  "client" | "connectors" | "chains" | "transports"
+  "client" | "connectors" | "chains" | "wallets" | "transports"
 >
 type GetDefaultConfigParameters = WagmiConfigParameters & {
   appName: string
@@ -20,12 +20,32 @@ type GetDefaultConfigParameters = WagmiConfigParameters & {
   appDescription?: string
   appUrl?: string
   appIcon?: string
-  wallets?: WalletList
-  walletConnectProjectId: string
+  bitcoinWallets?: WalletList
+  walletConnectProjectId?: string
   chains?: [Chain, ...Chain[]]
   transports?: Pick<CreateConfigParameters, "transports">
 }
 
+const transports = {
+  [CHAIN_ID.mainnet]: http(RPC_BY_NETWORK.mainnet.http),
+  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet.http),
+} as Pick<CreateConfigParameters, "transports">
+
+export const defaultConfig: Required<
+  Pick<
+    GetDefaultConfigParameters,
+    | "transports"
+    | "walletConnectProjectId"
+    | "chains"
+    | "multiInjectedProviderDiscovery"
+  >
+> = {
+  transports,
+  walletConnectProjectId: "",
+  chains: [mezoMainnet, mezoTestnet],
+  multiInjectedProviderDiscovery: true,
+}
+
 const bitcoinWalletTestnetConfig = {
   rpcUrl: RPC_BY_NETWORK.testnet.http,
   chainId: CHAIN_ID.testnet,
@@ -92,27 +112,17 @@ export function getConfig(config: GetDefaultConfigParameters): Config {
   const {
     appName,
     mezoNetwork = "mainnet",
-    walletConnectProjectId,
+    walletConnectProjectId = defaultConfig.walletConnectProjectId,
     ...restParameters
   } = config
 
-  const chains: [Chain, ...Chain[]] =
-    mezoNetwork === "mainnet" ? [mezoMainnet] : [mezoTestnet]
-
-  const transports =
-    mezoNetwork === "mainnet"
-      ? { [mezoMainnet.id]: http(RPC_BY_NETWORK.mainnet.http) }
-      : { [mezoTestnet.id]: http(RPC_BY_NETWORK.testnet.http) }
-
-  const wallets = config.wallets ?? [...getDefaultWallets(mezoNetwork)]
+  const wallets = config.bitcoinWallets ?? [...getDefaultWallets(mezoNetwork)]
 
   return getDefaultConfig({
+    ...defaultConfig,
     appName,
-    chains,
-    transports,
     wallets,
     projectId: walletConnectProjectId,
-    multiInjectedProviderDiscovery: true,
     ...restParameters,
   })
 }

package/src/hooks/index.ts

@@ -27,4 +27,3 @@ export {
 export * from "./useUpdateMezoId"
 export * from "./useValidateMezoId"
 export * from "./useRewardsApiClient"
-export * from "./useWalletAccount"

package/src/hooks/useAuthenticateWithWallet.ts

@@ -13,7 +13,7 @@ import {
 } from "../utils/siww"
 import { useGetAccountByAddress } from "./useGetAccountByAddress"
 import type { Session } from "../api"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 
 function useAuthenticateWithWallet(
   shouldCreateAccount = false,

package/src/hooks/useBorrowData.ts

@@ -9,7 +9,7 @@ import {
 import { usePassportContext } from "./usePassportContext"
 import { CHAIN_ID } from "../constants"
 import { bigIntMax, normalizePrecision } from "../utils/numbers"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 import { getAsset } from "../utils/assets"
 import { convertToUsd } from "../utils/currency"
 import { useCollateralPrice } from "./useCollateralPrice"

package/src/hooks/useCollateralPrice.ts

@@ -6,7 +6,7 @@ import {
 } from "../lib/contracts"
 import { usePassportContext } from "./usePassportContext"
 import { CHAIN_ID } from "../constants"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 
 // Wagmi handles typesafety with ABI const assertions. TypeScript doesn't
 // support importing JSON as const yet so types cannot be inferred from the

package/src/hooks/useCreateAccount.ts

@@ -7,7 +7,7 @@ import {
 import { useAuthApiClient } from "./useAuthApiClient"
 import { QUERY_KEYS } from "./constants"
 import type { CreateAccountRequest, CreateAccountResponse } from "../api"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 import { getBitcoinPublicKeyFromConnector } from "../utils/wagmi"
 
 export function useCreateAccount(

package/src/hooks/useLinkAccount.ts

@@ -7,7 +7,7 @@ import {
 import { useAuthApiClient } from "./useAuthApiClient"
 import type { LinkAccountResponse, SignatureData } from "../api"
 import { QUERY_KEYS } from "./constants"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 import { getBitcoinPublicKeyFromConnector } from "../utils/wagmi"
 
 type LinkAccountMutationFnParameters =

package/src/hooks/useTokensBalances.ts

@@ -13,11 +13,12 @@ import {
   MezoChainToken,
   testnetTokenContracts,
 } from "../lib/contracts"
-import { useWalletAccount } from "./useWalletAccount"
+import useWalletAccount from "./useWalletAccount"
 import {
   getAsset,
   isBitcoinLikeCryptoAsset,
   isTTokenCryptoAsset,
+  isMezoCryptoAsset,
 } from "../utils/assets"
 import { convertToUsd } from "../utils/currency"
 import { CHAIN_ID, mezoMainnet, mezoTestnet } from "../constants"
@@ -65,6 +66,7 @@ const BALANCE_TOKENS: MezoChainToken[] = [
   "mUSDT",
   "mxSolvBTC",
   "MUSD",
+  "MEZO",
 ]
 
 type UseMezoChainTokensBalancesOptions<T extends MezoChainToken[]> = {
@@ -219,6 +221,13 @@ export function useTokensBalances<T extends MezoChainToken[]>(
             conversion.decimals,
           )
         }
+        // TODO: Provide MEZO oracle to get accurate token price
+        if (isMezoCryptoAsset(tokenBalance.symbol)) {
+          usd = {
+            value: 0n,
+            formatted: "0",
+          }
+        }
 
         return { ...tokenBalance, usd }
       })

package/src/hooks/useWalletAccount.ts

@@ -2,12 +2,9 @@ import { OrangeKitConnector } from "@mezo-org/orangekit"
 import { useQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
 import { Address } from "viem"
-import { Connector, useAccount, UseAccountReturnType } from "wagmi"
+import { Connector, useAccount } from "wagmi"
 
-type UseWalletAccountReturn = Omit<
-  UseAccountReturnType,
-  "isConnected" | "address" | "connector" | "chainId"
-> & {
+type UseWalletAccountReturn = {
   accountAddress?: Address
   walletAddress?: string
   isConnected: boolean
@@ -16,14 +13,10 @@ type UseWalletAccountReturn = Omit<
   chainId?: number
 }
 
-export function useWalletAccount(): UseWalletAccountReturn {
-  const {
-    address: evmAddress,
-    connector,
-    chainId,
-    isConnected,
-    ...rest
-  } = useAccount()
+// TODO: Invesitgate race conditions and refactor
+
+export default function useWalletAccount(): UseWalletAccountReturn {
+  const { address: evmAddress, connector, chainId } = useAccount()
 
   const networkFamily = useMemo(
     () => (connector?.type !== "orangekit" ? "evm" : "bitcoin"),
@@ -45,7 +38,6 @@ export function useWalletAccount(): UseWalletAccountReturn {
         balance,
       }
     },
-    enabled: networkFamily === "bitcoin" && !!connector,
   })
 
   const { address: btcAddress } = btcData || {}
@@ -53,12 +45,9 @@ export function useWalletAccount(): UseWalletAccountReturn {
   return {
     accountAddress: evmAddress,
     walletAddress: btcAddress ?? evmAddress,
-    isConnected:
-      isConnected &&
-      (networkFamily === "bitcoin" ? !!btcAddress : !!evmAddress),
+    isConnected: networkFamily === "bitcoin" ? !!btcAddress : !!evmAddress,
     networkFamily,
     connector,
     chainId,
-    ...rest,
   }
 }