@mezo-org/passport 0.4.0-dev.0 → 0.4.0-dev.10

package/src/components/Dropdown/WelcomeBlock.tsx

@@ -0,0 +1,92 @@
+import {
+  Block,
+  HeadingSmall,
+  LabelSmall,
+  Mats,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import DefaultAvatar from "../../assets/DefaultAvatar"
+import { formatHumanReadableNumber } from "../../utils/numbers"
+
+const DOT_DELIMITER_REGEX = /(?=\.)/
+
+type WelcomeBlockProps = {
+  mezoId: string
+  matsBalance: number
+}
+
+export default function WelcomeBlock(props: WelcomeBlockProps) {
+  const { mezoId, matsBalance } = props
+
+  const [name, nameSuffix] = mezoId.split(DOT_DELIMITER_REGEX)
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      padding={`${theme.sizing.scale600} 0`}
+      marginBottom={theme.sizing.scale300}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Block
+        as={DefaultAvatar}
+        width={theme.sizing.scale1200}
+        height={theme.sizing.scale1200}
+        overrides={{
+          Block: {
+            style: {
+              borderRadius: "100%",
+            },
+          },
+        }}
+      />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        <HeadingSmall as="span">
+          <Block as="span">{name}</Block>
+          <Block as="span" color={theme.colors.gray500}>
+            {nameSuffix}
+          </Block>
+        </HeadingSmall>
+
+        <LabelSmall
+          display="flex"
+          alignItems="center"
+          margin={0}
+          color={theme.colors.contentTertiary}
+          overrides={{
+            Block: {
+              style: {
+                gap: theme.sizing.scale300,
+              },
+            },
+          }}
+        >
+          <Mats
+            color={theme.colors.contentPrimary}
+            size={theme.sizing.scale600}
+          />
+          {formatHumanReadableNumber(matsBalance, 2)}
+        </LabelSmall>
+      </Block>
+    </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/hooks/constants.ts

@@ -0,0 +1,6 @@
+export const QUERY_KEYS = {
+  ACCOUNT: "account",
+  SESSION: "session",
+  CURRENT: "current",
+  ASSETS_USD_CONVERSION: "assetsUsdConversion",
+}

package/src/hooks/index.ts

@@ -6,3 +6,13 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
+export * from "./useGetAccountByAddress"
+export * from "./useGetAccountByMezoId"
+export * from "./useGetCurrentAccount"
+export * from "./useGetSession"
+export * from "./useLinkAccount"
+export * from "./useSignInWithDiscord"
+export * from "./useSignInWithWallet"
+export * from "./useSignOut"
+export * from "./useSignUpWithWallet"
+export * from "./useUpdateMezoId"

package/src/hooks/useAssetsUSDConversion.ts

@@ -0,0 +1,31 @@
+import { UseBaseQueryOptions, useQuery } from "@tanstack/react-query"
+import { ONE_MINUTE_MS } from "../utils/time"
+import { QUERY_KEYS } from "./constants"
+import { usePortalApiClient } from "./usePortalApiClient"
+
+type AssetsUsdConversion = {
+  btcUsd: string
+  ethUsd: string
+}
+
+export function useAssetsUsdConversion(
+  useQueryOptions: Partial<UseBaseQueryOptions<AssetsUsdConversion>> = {},
+) {
+  const portalApiClient = usePortalApiClient()
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.ASSETS_USD_CONVERSION],
+    queryFn: async () => {
+      const { currentUsdPerBtc, currentUsdPerEth } =
+        await portalApiClient.getPortalStatistics()
+
+      return {
+        btcUsd: currentUsdPerBtc,
+        ethUsd: currentUsdPerEth,
+      }
+    },
+    staleTime: 30 * ONE_MINUTE_MS,
+    retry: 1,
+    ...useQueryOptions,
+  })
+}

package/src/hooks/useAuthApiClient.ts

@@ -0,0 +1,6 @@
+import { usePassportContext } from "./usePassportContext"
+
+export function useAuthApiClient() {
+  const { authApiClient } = usePassportContext()
+  return authApiClient
+}

package/src/hooks/useAuthenticateWithWallet.ts

@@ -0,0 +1,98 @@
+import { useSignMessage } from "wagmi"
+import { MutationOptions, useMutation } from "@tanstack/react-query"
+import { useCreateAccount } from "./useCreateAccount"
+import { useCreateSession } from "./useCreateSession"
+import { useEnsureNoSessionAndFetchNonce } from "./useEnsureNoSessionAndFetchNonce"
+import { createSignInWithWalletMessage } from "../utils/siww"
+import { useGetAccountByAddress } from "./useGetAccountByAddress"
+import type { Session } from "../api"
+import useWalletAccount from "./useWalletAccount"
+
+function useAuthenticateWithWallet(
+  shouldCreateAccount = false,
+  mutationOptions: Omit<
+    MutationOptions<Session>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const { address, chainId, connector, networkFamily } = useWalletAccount()
+  const { ensureNoSessionAndFetchNonce } = useEnsureNoSessionAndFetchNonce()
+  const { createSessionAsync } = useCreateSession()
+  const { createAccountAsync } = useCreateAccount()
+  const { signMessageAsync } = useSignMessage()
+
+  const { refetch: getAccountByAddress } = useGetAccountByAddress(address, {
+    enabled: false,
+    retry: false,
+  })
+
+  const { mutate, mutateAsync, ...signInMutationRestParameters } = useMutation({
+    mutationFn: async () => {
+      if (!address) {
+        throw new Error("Sign in error: Wallet not connected!")
+      }
+
+      const nonce = await ensureNoSessionAndFetchNonce()
+
+      const messageResult = createSignInWithWalletMessage(
+        address,
+        nonce,
+        networkFamily,
+        chainId,
+      )
+      const signatureResult = await signMessageAsync({
+        message: messageResult,
+        connector,
+      })
+
+      if (shouldCreateAccount) {
+        const getAccountByAddressResult = await getAccountByAddress()
+
+        if (getAccountByAddressResult.data) {
+          throw new Error(
+            "Wallet authentication failed: Account creation failed. Account already exists.",
+          )
+        }
+
+        if (getAccountByAddressResult.error) {
+          throw new Error(
+            `Wallet authentication failed: Account creation failed. Could not verify if account already exists: ${getAccountByAddressResult.error}`,
+          )
+        }
+
+        // Fetch was successful, but no account was found
+        try {
+          const createAccountResult = await createAccountAsync({
+            type: "wallet",
+            message: messageResult,
+            signature: signatureResult,
+          })
+
+          if (!createAccountResult) {
+            throw new Error("Failed to create new account")
+          }
+        } catch (error) {
+          throw new Error(
+            `Wallet authentication failed: Account creation failed: ${error}`,
+          )
+        }
+      }
+
+      return (await createSessionAsync({
+        type: "wallet",
+        message: messageResult,
+        signature: signatureResult,
+      })) as Session
+      // ^ By passing type: "wallet" we know for sure the return type is Session
+    },
+    ...mutationOptions,
+  })
+
+  return {
+    authenticateWithWallet: mutate,
+    authenticateWithWalletAsync: mutateAsync,
+    ...signInMutationRestParameters,
+  }
+}
+
+export { useAuthenticateWithWallet }

package/src/hooks/useCreateAccount.ts

@@ -0,0 +1,36 @@
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import type { CreateAccountRequest, CreateAccountResponse } from "../api"
+
+export function useCreateAccount(
+  mutationOptions: Omit<
+    MutationOptions<CreateAccountResponse, DefaultError, CreateAccountRequest>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const queryClient = useQueryClient()
+  const authApiClient = useAuthApiClient()
+
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
+  const { mutate, mutateAsync, ...rest } = useMutation({
+    mutationFn: (createAccountRequest: CreateAccountRequest) =>
+      authApiClient.createAccount(createAccountRequest),
+    onSuccess: (data, variables, context) => {
+      queryClient.resetQueries({
+        queryKey: [QUERY_KEYS.ACCOUNT],
+      })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
+    },
+    ...restMutationOptions,
+  })
+
+  return { createAccount: mutate, createAccountAsync: mutateAsync, ...rest }
+}

package/src/hooks/useCreateSession.ts

@@ -0,0 +1,44 @@
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import type { CreateSessionRequest, CreateSessionResponse } from "../api"
+import { QUERY_KEYS } from "./constants"
+
+/**
+ * This hook is not exposed for external consumers. For creating session they
+ * should use `useSignIn` hook related to the authentication method.
+ */
+export function useCreateSession(
+  mutationOptions: Omit<
+    MutationOptions<CreateSessionResponse, DefaultError, CreateSessionRequest>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const queryClient = useQueryClient()
+  const authApiClient = useAuthApiClient()
+
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
+  const { mutate, mutateAsync, ...rest } = useMutation({
+    mutationFn: (createSessionRequest: CreateSessionRequest) =>
+      authApiClient.createSession(createSessionRequest),
+    onSuccess: (data, variables, context) => {
+      // Since `getSession` query also has code in its query keys we can't set
+      // query data for a specific query, because we don't know if the code was
+      // used or not. Because of that we just reset all getSession queries
+      queryClient.resetQueries({ queryKey: [QUERY_KEYS.SESSION] })
+      queryClient.resetQueries({
+        queryKey: [QUERY_KEYS.ACCOUNT, QUERY_KEYS.CURRENT],
+      })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
+    },
+    ...restMutationOptions,
+  })
+
+  return { createSession: mutate, createSessionAsync: mutateAsync, ...rest }
+}

package/src/hooks/useDropdownData.ts

@@ -0,0 +1,131 @@
+import { useBitcoinAccount } from "@mezo-org/orangekit"
+import { useGetCurrentAccount } from "."
+import {
+  CryptoAssetKey,
+  getCryptoAsset,
+  isBitcoinLikeCryptoAsset,
+  isUsdLikeCryptoAsset,
+} from "../utils/cryptoAssets"
+import { fromFixedPoint } from "../utils/numbers"
+import { useAssetsUsdConversion } from "./useAssetsUSDConversion"
+import useWalletAccount from "./useWalletAccount"
+
+/**
+ * Formats crypto asset to balance details (balance in USD and decimals)
+ * @param type The type of crypto asset
+ * @param balance The balance of crypto asset
+ * @param btcUsdConversionRate The USD conversion rate
+ * @returns The balance details
+ */
+function formatCryptoAsset(
+  type: CryptoAssetKey,
+  balance: bigint,
+  btcUsdConversionRate: number,
+) {
+  const { decimals } = getCryptoAsset(type)
+
+  const nativeBalance = fromFixedPoint(balance, decimals, 4)
+  let balanceInUsd = 0
+  if (isBitcoinLikeCryptoAsset(type)) {
+    balanceInUsd = nativeBalance * btcUsdConversionRate
+  }
+  if (isUsdLikeCryptoAsset(type)) {
+    balanceInUsd = nativeBalance
+  }
+
+  return {
+    type,
+    balance: nativeBalance,
+    balanceInUsd,
+    decimals,
+  }
+}
+
+export type DropdownCryptoAsset<T = CryptoAssetKey> = {
+  type: T
+  balance: bigint
+}
+
+type DropdownDetailedCryptoAsset = ReturnType<typeof formatCryptoAsset>
+
+export type DropdownData = {
+  mezoId: string
+  address: string
+  walletType: "bitcoin" | "evm"
+  totalBalanceInUsd: number
+  formattedNativeAssets: DropdownDetailedCryptoAsset[]
+  matsnet: {
+    mats: number
+    formattedAssets: DropdownDetailedCryptoAsset[]
+  }
+}
+
+type UseDropdownDataOptions = {
+  // This is workaround. It should be read from contracts or fetched from API.
+  evmNativeAssets?: DropdownCryptoAsset[]
+  matsnetAssets?: DropdownCryptoAsset[]
+}
+
+/**
+ * Aggregates dropdown data for Dropdown component.
+ * @param options - Options for the dropdown data.
+ * @param options.evmNativeAssets - Native assets for EVM wallet.
+ * @param options.matsnetAssets - Matsnet tokens. Rendered as separate section.
+ * @returns Dropdown data.
+ * @dev This hook is for internal use only.
+ */
+export default function useDropdownData(
+  options?: UseDropdownDataOptions,
+): DropdownData | null {
+  const { evmNativeAssets = [], matsnetAssets = [] } = options || {}
+
+  const { btcBalance } = useBitcoinAccount()
+  const { address, networkFamily, isConnected } = useWalletAccount()
+  const { data: passportAccount } = useGetCurrentAccount()
+  const { data: assetsUsdConversion } = useAssetsUsdConversion()
+
+  if (!address || !isConnected || !passportAccount) {
+    return null
+  }
+
+  const mezoId = passportAccount.mezoId!
+
+  const nativeAssets: DropdownCryptoAsset[] =
+    networkFamily === "bitcoin"
+      ? [
+          {
+            type: "btc",
+            balance: BigInt(btcBalance?.total ?? 0),
+          },
+        ]
+      : evmNativeAssets
+
+  const btcUsdConversionRate = Number(assetsUsdConversion?.btcUsd ?? 0)
+
+  const formattedNativeAssets = nativeAssets.map((asset) =>
+    formatCryptoAsset(asset.type, asset.balance, btcUsdConversionRate),
+  )
+
+  const totalBalanceInUsd = formattedNativeAssets.reduce(
+    (sum, value) => sum + value.balanceInUsd,
+    0,
+  )
+
+  const matsBalance = passportAccount.mats.totalMats
+
+  const matsnetFormattedAssets = matsnetAssets.map((asset) =>
+    formatCryptoAsset(asset.type, asset.balance, btcUsdConversionRate),
+  )
+
+  return {
+    mezoId,
+    address,
+    walletType: networkFamily,
+    totalBalanceInUsd,
+    formattedNativeAssets,
+    matsnet: {
+      mats: matsBalance,
+      formattedAssets: matsnetFormattedAssets,
+    },
+  }
+}

package/src/hooks/useEnsureNoSessionAndFetchNonce.ts

@@ -0,0 +1,46 @@
+import { useCallback } from "react"
+import { useGetSession } from "./useGetSession"
+import { useSignOut } from "./useSignOut"
+
+function useEnsureNoSessionAndFetchNonce() {
+  const { refetch: getSession } = useGetSession(undefined, {
+    enabled: false,
+    retry: false,
+  })
+  const { signOutAsync } = useSignOut()
+
+  const getAndValidateSession = useCallback(async () => {
+    const getSessionResult = await getSession()
+
+    // TODO: We should create a separate endpoint that will always return nonce
+    if (getSessionResult.error) {
+      throw new Error(
+        `Sign in error: Failed to fetch the current session: ${getSessionResult.error}`,
+      )
+    }
+    if (!getSessionResult.data) {
+      throw new Error(
+        "Sign in error: Failed to fetch the current session; no data returned.",
+      )
+    }
+
+    return getSessionResult.data
+  }, [getSession])
+
+  const ensureNoSessionAndFetchNonce = useCallback(async () => {
+    let getSessionResult = await getAndValidateSession()
+
+    if (!("nonce" in getSessionResult)) {
+      // If there is active session we are terminating it
+      await signOutAsync()
+      // Because we've signed out we can assume nonce will be returned here
+      getSessionResult = (await getAndValidateSession()) as { nonce: string }
+    }
+
+    return getSessionResult.nonce
+  }, [getAndValidateSession, signOutAsync])
+
+  return { ensureNoSessionAndFetchNonce }
+}
+
+export { useEnsureNoSessionAndFetchNonce }

package/src/hooks/useGetAccountByAddress.ts

@@ -0,0 +1,25 @@
+import { useQuery, skipToken, UseBaseQueryOptions } from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import { ONE_MINUTE_MS } from "../utils/time"
+import type { GetAccountByMezoIdOrAddressResponse } from "../api"
+
+export function useGetAccountByAddress(
+  address?: string,
+  queryOptions: Omit<
+    UseBaseQueryOptions<GetAccountByMezoIdOrAddressResponse | null>,
+    "queryKey" | "queryFn"
+  > = {},
+) {
+  const authApiClient = useAuthApiClient()
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.ACCOUNT, address],
+    queryFn: address
+      ? () => authApiClient.getAccountByMezoIdOrAddress(address)
+      : skipToken,
+    staleTime: ONE_MINUTE_MS,
+    retry: 1,
+    ...queryOptions,
+  })
+}

package/src/hooks/useGetAccountByMezoId.ts

@@ -0,0 +1,25 @@
+import { useQuery, skipToken, UseBaseQueryOptions } from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import { ONE_MINUTE_MS } from "../utils/time"
+import type { GetAccountByMezoIdOrAddressResponse } from "../api"
+
+export function useGetAccountByMezoId(
+  mezoId?: string,
+  queryOptions: Omit<
+    UseBaseQueryOptions<GetAccountByMezoIdOrAddressResponse | null>,
+    "queryKey" | "queryFn"
+  > = {},
+) {
+  const authApiClient = useAuthApiClient()
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.ACCOUNT, mezoId],
+    queryFn: mezoId
+      ? () => authApiClient.getAccountByMezoIdOrAddress(mezoId)
+      : skipToken,
+    staleTime: ONE_MINUTE_MS,
+    retry: 1,
+    ...queryOptions,
+  })
+}

package/src/hooks/useGetCurrentAccount.ts

@@ -0,0 +1,62 @@
+import { UseBaseQueryOptions, useQuery } from "@tanstack/react-query"
+import { ONE_MINUTE_MS } from "../utils/time"
+import { QUERY_KEYS } from "./constants"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { usePortalApiClient } from "./usePortalApiClient"
+import type { GetCurrentAccountResponse } from "../api"
+
+type GetCurrentAccountResponseWithMats = GetCurrentAccountResponse & {
+  mats: {
+    totalMats: number
+  }
+}
+
+export function useGetCurrentAccount(
+  queryOptions: Omit<
+    UseBaseQueryOptions<GetCurrentAccountResponseWithMats>,
+    "queryKey" | "queryFn"
+  > = {},
+) {
+  const authApiClient = useAuthApiClient()
+  const portalApiClient = usePortalApiClient()
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.ACCOUNT, QUERY_KEYS.CURRENT],
+    queryFn: async () => {
+      const currentAccount = await authApiClient.getCurrentAccount()
+      const linkedWallets = currentAccount?.linkedAccounts?.filter(
+        (account) => account.type === "wallet",
+      )
+      if (!linkedWallets || linkedWallets.length === 0) {
+        return {
+          ...currentAccount,
+          mats: {
+            totalMats: 0,
+          },
+        }
+      }
+
+      const addresses = linkedWallets.map(
+        (account) => account.btcAddress || account.evmAddress,
+      )
+      const mats = await Promise.all(
+        addresses.map((address) => portalApiClient.getPortalMats(address)),
+      )
+
+      const totalMats = mats.reduce(
+        (sumMats, currentMats) => sumMats + currentMats.totalMats,
+        0,
+      )
+
+      return {
+        ...currentAccount,
+        mats: {
+          totalMats,
+        },
+      }
+    },
+    staleTime: ONE_MINUTE_MS,
+    retry: 1,
+    ...queryOptions,
+  })
+}

package/src/hooks/useGetSession.ts

@@ -0,0 +1,22 @@
+import { useQuery, UseBaseQueryOptions } from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import { QUERY_KEYS } from "./constants"
+import { ONE_MINUTE_MS } from "../utils/time"
+import type { GetSessionResponse } from "../api"
+
+export function useGetSession(
+  code?: string,
+  queryOptions: Omit<
+    UseBaseQueryOptions<GetSessionResponse>,
+    "queryKey" | "queryFn"
+  > = {},
+) {
+  const authApiClient = useAuthApiClient()
+  return useQuery({
+    queryKey: [QUERY_KEYS.SESSION, code],
+    queryFn: () => authApiClient.getSession(code),
+    staleTime: ONE_MINUTE_MS,
+    retry: 1,
+    ...queryOptions,
+  })
+}

package/src/hooks/useLinkAccount.ts

@@ -0,0 +1,33 @@
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
+import { useAuthApiClient } from "./useAuthApiClient"
+import type { LinkAccountRequest, LinkAccountResponse } from "../api"
+import { QUERY_KEYS } from "./constants"
+
+export function useLinkAccount(
+  mutationOptions: Omit<
+    MutationOptions<LinkAccountResponse, DefaultError, LinkAccountRequest>,
+    "mutationFn" | "mutationKey"
+  > = {},
+) {
+  const queryClient = useQueryClient()
+  const authApiClient = useAuthApiClient()
+
+  const { onSuccess: customOnSuccess, ...restMutationOptions } = mutationOptions
+
+  const { mutate, mutateAsync, ...rest } = useMutation({
+    mutationFn: (linkAccountRequest: LinkAccountRequest) =>
+      authApiClient.linkAccount(linkAccountRequest),
+    onSuccess: (data, variables, context) => {
+      queryClient.resetQueries({ queryKey: [QUERY_KEYS.ACCOUNT] })
+      if (customOnSuccess) customOnSuccess(data, variables, context)
+    },
+    ...restMutationOptions,
+  })
+
+  return { linkAccount: mutate, linkAccountAsync: mutateAsync, ...rest }
+}