@mezo-org/passport 0.16.0-dev.0 → 0.16.0-dev.1

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

@@ -1,4 +1,10 @@
-import { Block, Button, LogOut01, useStyletron } from "@mezo-org/mezo-clay"
+import {
+  Block,
+  Button,
+  LogOut01,
+  Settings01,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
 import React, { useCallback } from "react"
 import { useDisconnect } from "wagmi"
 import { useSignOut } from "../../../hooks"
@@ -9,6 +15,7 @@ import AccountAddressActions from "./AccountAddressActions"
 import AccountOtherAssets from "./AccountOtherAssets"
 import AccountBtcListing from "./AccountBtcListing"
 import AccountMusdListing from "./AccountMusdListing"
+import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
 
 type RootProps = {
   onSignOut?: () => void
@@ -23,6 +30,12 @@ export default function Root(props: RootProps) {
   const { disconnect } = useDisconnect()
   const { signOut } = useSignOut()
 
+  const setDropdownView = useDropdownStore((state) => state.setView)
+  const handleSettingsClick = useCallback(
+    () => setDropdownView(DropdownView.SETTINGS),
+    [setDropdownView],
+  )
+
   const handleLogOut = useCallback(() => {
     if (onSignOut) {
       onSignOut()
@@ -61,7 +74,21 @@ export default function Root(props: RootProps) {
         overrides={overridesWithDivider}
       />
 
-      <Block padding={theme.sizing.scale300}>
+      <Block
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        padding={theme.sizing.scale300}
+      >
+        <Button
+          size="small"
+          shape="pill"
+          kind="tertiary"
+          startEnhancer={<Settings01 color="currentColor" size={16} />}
+          onClick={handleSettingsClick}
+        >
+          Settings
+        </Button>
         <Button
           size="small"
           shape="pill"

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

@@ -13,7 +13,7 @@ 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"
+import { useWalletAccount } from "../../../hooks/useWalletAccount"
 
 export default function WalletAddress(props: BlockProps) {
   const { overrides, ...restProps } = props

package/src/components/Dropdown/Settings/InlineEditField.tsx

@@ -0,0 +1,212 @@
+import {
+  Block,
+  ButtonIcon,
+  Check,
+  Close,
+  Input,
+  LabelSmall,
+  ParagraphSmall,
+  Spinner,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useEffect, useState } from "react"
+import EditIcon from "../../../assets/EditIcon"
+
+type InlineEditFieldProps = {
+  label: string
+  value: string
+  placeholder?: string
+  onSave: (value: string) => Promise<void>
+  validate?: (value: string) => string | null
+  isLoading?: boolean
+}
+
+type InlineFieldWrapperProps = {
+  label: string
+  children: React.ReactNode
+}
+
+function InlineFieldWrapper({ label, children }: InlineFieldWrapperProps) {
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      flexDirection="column"
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale200,
+          },
+        },
+      }}
+    >
+      <LabelSmall color={theme.colors.contentSecondary}>{label}</LabelSmall>
+      {children}
+    </Block>
+  )
+}
+
+export default function InlineEditField(props: InlineEditFieldProps) {
+  const { label, value, placeholder, onSave, validate, isLoading } = props
+
+  const [, theme] = useStyletron()
+  const [isEditing, setIsEditing] = useState(false)
+  const [editValue, setEditValue] = useState(value)
+  const [error, setError] = useState<string | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+
+  useEffect(() => {
+    setEditValue(value)
+  }, [value])
+
+  const handleEdit = useCallback(() => {
+    setIsEditing(true)
+    setEditValue(value)
+    setError(null)
+  }, [value])
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false)
+    setEditValue(value)
+    setError(null)
+  }, [value])
+
+  const handleSave = useCallback(async () => {
+    if (validate) {
+      const validationError = validate(editValue)
+      if (validationError) {
+        setError(validationError)
+        return
+      }
+    }
+
+    setIsSaving(true)
+    try {
+      await onSave(editValue)
+      setIsEditing(false)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save")
+    } finally {
+      setIsSaving(false)
+    }
+  }, [editValue, onSave, validate])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        handleSave()
+      } else if (e.key === "Escape") {
+        handleCancel()
+      }
+    },
+    [handleSave, handleCancel],
+  )
+
+  if (isLoading) {
+    return (
+      <InlineFieldWrapper label={label}>
+        <Block
+          display="flex"
+          alignItems="center"
+          height={theme.sizing.scale950}
+        >
+          <Spinner $size={theme.sizing.scale600} />
+        </Block>
+      </InlineFieldWrapper>
+    )
+  }
+
+  if (isEditing) {
+    return (
+      <InlineFieldWrapper label={label}>
+        <Block
+          display="flex"
+          alignItems="center"
+          width="100%"
+          gridGap="scale300"
+        >
+          <Block flex={1}>
+            <Input
+              value={editValue}
+              onChange={(e) => {
+                setEditValue(e.currentTarget.value)
+                setError(null)
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              size="small"
+              error={!!error}
+              disabled={isSaving}
+              autoFocus
+            />
+          </Block>
+          <ButtonIcon
+            onClick={handleSave}
+            size="small"
+            shape="circle"
+            kind="secondary"
+            disabled={isSaving}
+            aria-label="Save"
+          >
+            {isSaving ? (
+              <Spinner $size={theme.sizing.scale500} />
+            ) : (
+              <Check size={14} color="currentColor" />
+            )}
+          </ButtonIcon>
+          <ButtonIcon
+            onClick={handleCancel}
+            size="small"
+            shape="circle"
+            kind="tertiary"
+            disabled={isSaving}
+            aria-label="Cancel"
+          >
+            <Close size={14} color="currentColor" />
+          </ButtonIcon>
+        </Block>
+        {error && (
+          <ParagraphSmall
+            color={theme.colors.contentNegative}
+            marginTop={0}
+            marginBottom={0}
+          >
+            {error}
+          </ParagraphSmall>
+        )}
+      </InlineFieldWrapper>
+    )
+  }
+
+  return (
+    <InlineFieldWrapper label={label}>
+      <Block
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={handleEdit}
+        overrides={{
+          Block: {
+            style: {
+              cursor: "pointer",
+              minHeight: theme.sizing.scale950,
+            },
+          },
+        }}
+      >
+        <ParagraphSmall
+          marginTop={0}
+          marginBottom={0}
+          color={
+            value ? theme.colors.contentPrimary : theme.colors.contentTertiary
+          }
+        >
+          {value || placeholder}
+        </ParagraphSmall>
+        <EditIcon size={16} color={theme.colors.contentTertiary} />
+      </Block>
+    </InlineFieldWrapper>
+  )
+}

package/src/components/Dropdown/Settings/Settings.tsx

@@ -0,0 +1,87 @@
+import { Block, ParagraphSmall, Link, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import NestedViewLayout from "../NestedViewLayout"
+import InlineEditField from "./InlineEditField"
+import { useGetCurrentAccount, useUpdateUserProfile } from "../../../hooks"
+import { validateEmail, validateTelegram } from "../../../utils/validation"
+
+function Settings() {
+  const [, theme] = useStyletron()
+
+  const { data: account, isPending: isCurrentAccountPending } =
+    useGetCurrentAccount()
+  const { updateProfileAsync } = useUpdateUserProfile()
+
+  const handleSaveEmail = useCallback(
+    async (value: string) => {
+      await updateProfileAsync({ email: value || "" })
+    },
+    [updateProfileAsync],
+  )
+
+  const handleSaveTelegram = useCallback(
+    async (value: string) => {
+      const handle = value.startsWith("@") ? value.slice(1) : value
+      await updateProfileAsync({ telegram: handle || "" })
+    },
+    [updateProfileAsync],
+  )
+
+  return (
+    <NestedViewLayout>
+      <ParagraphSmall
+        marginTop={0}
+        marginBottom={theme.sizing.scale800}
+        color={theme.colors.contentSecondary}
+      >
+        Update your contact information to stay connected.
+      </ParagraphSmall>
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale600,
+            },
+          },
+        }}
+      >
+        <InlineEditField
+          label="Email"
+          value={account?.email || ""}
+          placeholder="Enter your email"
+          onSave={handleSaveEmail}
+          validate={validateEmail}
+          isLoading={isCurrentAccountPending}
+        />
+
+        <InlineEditField
+          label="Telegram"
+          value={account?.telegram || ""}
+          placeholder="Enter your Telegram handle"
+          onSave={handleSaveTelegram}
+          validate={validateTelegram}
+          isLoading={isCurrentAccountPending}
+        />
+      </Block>
+
+      <ParagraphSmall
+        marginTop={theme.sizing.scale800}
+        marginBottom={0}
+        color={theme.colors.contentTertiary}
+      >
+        By providing your contact information, you agree to receive service
+        notifications and occasional promotional messages. Promotional messages
+        will always include an opt out link. The Privacy Policy is available{" "}
+        <Link href="https://mezo.org/privacy" target="_blank">
+          here
+        </Link>
+        .
+      </ParagraphSmall>
+    </NestedViewLayout>
+  )
+}
+
+export default Settings

package/src/config.ts

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

package/src/hooks/index.ts

@@ -25,5 +25,7 @@ export {
   useResetTokensBalances,
 } from "./useTokensBalances"
 export * from "./useUpdateMezoId"
+export * from "./useUpdateUserProfile"
 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,12 +13,11 @@ 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"
@@ -66,7 +65,6 @@ const BALANCE_TOKENS: MezoChainToken[] = [
   "mUSDT",
   "mxSolvBTC",
   "MUSD",
-  "MEZO",
 ]
 
 type UseMezoChainTokensBalancesOptions<T extends MezoChainToken[]> = {
@@ -221,13 +219,6 @@ 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/useUpdateUserProfile.ts

@@ -0,0 +1,34 @@
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import type { UpdateAccountRequest, UpdateAccountResponse } from "../api"
+
+export function useUpdateUserProfile(
+  mutationOptions: Omit<
+    MutationOptions<UpdateAccountResponse, DefaultError, UpdateAccountRequest>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const queryClient = useQueryClient()
+  const authApiClient = useAuthApiClient()
+
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
+  const { mutate, mutateAsync, ...rest } = useMutation({
+    mutationFn: (updates: UpdateAccountRequest) =>
+      authApiClient.updateAccount(updates),
+    onSuccess: (data, variables, context) => {
+      queryClient.resetQueries({ queryKey: [QUERY_KEYS.ACCOUNT] })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
+    },
+    ...restMutationOptions,
+  })
+
+  return { updateProfile: mutate, updateProfileAsync: mutateAsync, ...rest }
+}

package/src/hooks/useWalletAccount.ts

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

package/src/hooks/useWatchTransferEvents.ts

@@ -69,7 +69,6 @@ function useWatchTransferEventsForAllTokens() {
   useWatchTransferEvents("mUSDT")
   useWatchTransferEvents("mxSolvBTC")
   useWatchTransferEvents("MUSD")
-  useWatchTransferEvents("MEZO")
 }
 
 export { useWatchTransferEvents, useWatchTransferEventsForAllTokens }

package/src/index.ts

@@ -1,6 +1,5 @@
 export * from "./components"
 export {
-  defaultConfig,
   unisatWalletMezoMainnet,
   unisatWalletMezoTestnet,
   okxWalletMezoMainnet,

package/src/lib/contracts/index.ts

@@ -29,7 +29,6 @@ import priceFeed from "@mezo-org/musd-contracts/deployments/mainnet/PriceFeed.js
 import priceFeedTestnet from "@mezo-org/musd-contracts/deployments/matsnet/PriceFeed.json"
 
 import { Abi, Address } from "viem"
-import mezoArtifact from "./artifacts/MEZO.json"
 
 export type MezoChainToken =
   | "mcbBTC"
@@ -43,7 +42,6 @@ export type MezoChainToken =
   | "mUSDT"
   | "mxSolvBTC"
   | "MUSD"
-  | "MEZO"
 
 export type MezoBorrowContract =
   | "TroveManager"
@@ -70,7 +68,6 @@ export const testnetTokenContracts = {
   mUSDT: usdtTestnet,
   mxSolvBTC: xsolvbtcTestnet,
   MUSD: musdTestnet,
-  MEZO: mezoArtifact,
 } as unknown as ContractsMap<MezoChainToken>
 
 export const mainnetTokenContracts = {
@@ -85,7 +82,6 @@ export const mainnetTokenContracts = {
   mUSDT: usdtMainnet,
   mxSolvBTC: xsolvbtcMainnet,
   MUSD: musdMainnet,
-  MEZO: mezoArtifact,
 } as unknown as ContractsMap<MezoChainToken>
 
 export const mainnetBorrowContracts = {

package/src/stores/dropdownStore.ts

@@ -3,6 +3,7 @@ import { create } from "zustand"
 export enum DropdownView {
   ROOT = "ROOT",
   RECEIVE = "RECEIVE",
+  SETTINGS = "SETTINGS",
 }
 
 interface DropdownStore {