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

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

@@ -0,0 +1,141 @@
+import {
+  Block,
+  Button,
+  LogOut01,
+  Mats,
+  ParagraphSmall,
+  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"
+
+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 & {
+  onSignOut?: () => void
+}
+
+export default function Root(props: RootProps) {
+  const {
+    mezoId,
+    walletAddress,
+    accountAddress,
+    walletType,
+    totalBalanceInUsd,
+    formattedNativeAssets,
+    matsnet,
+    onSignOut,
+  } = props
+
+  const [, theme] = useStyletron()
+
+  const { disconnect } = useDisconnect()
+  const { signOut } = useSignOut()
+
+  const handleLogOut = useCallback(() => {
+    if (onSignOut) {
+      onSignOut()
+      return
+    }
+
+    signOut()
+    disconnect()
+  }, [signOut, disconnect, onSignOut])
+
+  return (
+    <Block
+      display="inline-flex"
+      flexDirection="column"
+      padding={theme.sizing.scale600}
+    >
+      <WelcomeBlock mezoId={mezoId} matsBalance={matsnet.mats} />
+
+      <AccountAddressActions address={accountAddress} />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        backgroundColor={theme.colors.backgroundSecondary}
+        overflow="hidden"
+        overrides={{
+          Block: { style: { borderRadius: theme.borders.radius300 } },
+        }}
+      >
+        <WalletAddress address={walletAddress} type={walletType} />
+
+        <AccountBalance amount={totalBalanceInUsd} />
+
+        <AccountAssets label="Assets" assets={formattedNativeAssets} />
+      </Block>
+
+      {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>
+      )}
+
+      <Block
+        marginTop={theme.sizing.scale700}
+        padding={`0 ${theme.sizing.scale100}`}
+      >
+        <Button
+          size="small"
+          kind="tertiary"
+          startEnhancer={<LogOut01 color="currentColor" size={12} />}
+          onClick={() => handleLogOut()}
+          overrides={{
+            Root: {
+              style: {
+                ":hover": {
+                  backgroundColor: theme.colors.backgroundSecondary,
+                  boxShadow: "none",
+                },
+                ":active": {
+                  backgroundColor: theme.colors.backgroundSecondary,
+                  color: theme.colors.contentPrimary,
+                },
+              },
+            },
+          }}
+        >
+          Log out
+        </Button>
+      </Block>
+    </Block>
+  )
+}

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

@@ -0,0 +1,128 @@
+import {
+  Block,
+  Copy03 as CopyIcon,
+  LinkExternal02 as LinkIcon,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
+import { getCryptoAsset } from "../../../utils/cryptoAssets"
+
+type WalletAddressProps = {
+  address: string
+  type: "bitcoin" | "evm"
+}
+
+export default function WalletAddress(props: WalletAddressProps) {
+  const { address, type } = props
+
+  const { environment } = usePassportContext()
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    type,
+    environment === "testnet",
+  )
+  const trimmedAddress = trimAddress(address)
+  const { icon: accountIcon } = getCryptoAsset(
+    type === "bitcoin" ? "btc" : "eth",
+  )
+
+  const [, theme] = useStyletron()
+
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+  const handleCopyAddress = useCallback(() => {
+    copy(address)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }, [copy, address])
+
+  return (
+    <Block
+      as="button"
+      onClick={handleCopyAddress}
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      padding={`${theme.sizing.scale600} ${theme.sizing.scale500}`}
+      overrides={{
+        Block: {
+          style: {
+            borderWidth: 0,
+            cursor: "pointer",
+            ":hover": {
+              backgroundColor: theme.colors.backgroundTertiary,
+            },
+          },
+        },
+      }}
+    >
+      <Block as={accountIcon} size={theme.sizing.scale600} />
+      {isCopiedMessageVisible ? (
+        <ParagraphSmall
+          margin={0}
+          marginLeft={theme.sizing.scale300}
+          color={theme.colors.gray800}
+        >
+          Copied address to clipboard
+        </ParagraphSmall>
+      ) : (
+        <Block
+          as="a"
+          marginLeft={theme.sizing.scale300}
+          href={blockExplorerUrl}
+          target="_blank"
+          overrides={{
+            Block: {
+              style: {
+                color: "inherit",
+                textDecoration: "none",
+                ":hover": {
+                  textDecoration: "underline",
+                },
+              },
+            },
+          }}
+        >
+          <ParagraphSmall
+            display="flex"
+            alignItems="center"
+            margin={0}
+            color={theme.colors.gray800}
+          >
+            {trimmedAddress}
+            <LinkIcon
+              display="inline"
+              size={theme.sizing.scale550}
+              overrides={{
+                Svg: {
+                  style: {
+                    stroke: "currentColor",
+                    marginLeft: theme.sizing.scale200,
+                  },
+                },
+              }}
+            />
+          </ParagraphSmall>
+        </Block>
+      )}
+      <CopyIcon
+        size={theme.sizing.scale550}
+        overrides={{
+          Svg: {
+            style: {
+              marginLeft: "auto",
+              stroke: "currentColor",
+            },
+          },
+        }}
+      />
+    </Block>
+  )
+}

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

@@ -0,0 +1,91 @@
+import {
+  Block,
+  HeadingSmall,
+  LabelSmall,
+  Mats,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import DefaultAvatar from "../../../assets/DefaultAvatar"
+
+const DOT_DELIMITER_REGEX = /(?=\.)/
+
+type WelcomeBlockProps = {
+  mezoId: string
+  matsBalance: string
+}
+
+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}
+          />
+          {matsBalance}
+        </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

@@ -1,6 +1,6 @@
 export const QUERY_KEYS = {
-  ACCOUNT_BY_ADDRESS: "getAccountByAddress",
-  ACCOUNT_BY_MEZO_ID: "getAccountByMezoId",
-  SESSION: "getSession",
-  CURRENT_ACCOUNT: "getCurrentAccount",
+  ACCOUNT: "account",
+  SESSION: "session",
+  CURRENT: "current",
+  ASSETS_USD_CONVERSION: "assetsUsdConversion",
 }

package/src/hooks/index.ts

@@ -6,16 +6,14 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
-export * from "./constants"
-export * from "./useAuthApiClient"
-export * from "./useCreateAccount"
 export * from "./useGetAccountByAddress"
 export * from "./useGetAccountByMezoId"
 export * from "./useGetCurrentAccount"
 export * from "./useGetSession"
 export * from "./useLinkAccount"
-export * from "./usePassportContext"
 export * from "./useSignInWithDiscord"
 export * from "./useSignInWithWallet"
 export * from "./useSignOut"
+export * from "./useSignUpWithWallet"
 export * from "./useUpdateMezoId"
+export * from "./useRefreshPassport"

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

@@ -1,26 +1,35 @@
-import { useQueryClient, useMutation } from "@tanstack/react-query"
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
 import { useAuthApiClient } from "./useAuthApiClient"
 import { QUERY_KEYS } from "./constants"
-import { CreateAccountRequest } from "../api/auth"
+import type { CreateAccountRequest, CreateAccountResponse } from "../api"
 
-export function useCreateAccount(useMutationOptions = {}) {
+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: () => {
-      queryClient.resetQueries({
-        queryKey: [QUERY_KEYS.ACCOUNT_BY_ADDRESS],
-        exact: false,
-      })
+    onSuccess: (data, variables, context) => {
       queryClient.resetQueries({
-        queryKey: [QUERY_KEYS.ACCOUNT_BY_MEZO_ID],
-        exact: false,
+        queryKey: [QUERY_KEYS.ACCOUNT],
       })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
     },
-    ...useMutationOptions,
+    ...restMutationOptions,
   })
 
   return { createAccount: mutate, createAccountAsync: mutateAsync, ...rest }

package/src/hooks/useCreateSession.ts

@@ -1,37 +1,43 @@
-import { useQueryClient, useMutation } from "@tanstack/react-query"
+import {
+  useQueryClient,
+  useMutation,
+  MutationOptions,
+  DefaultError,
+} from "@tanstack/react-query"
 import { useAuthApiClient } from "./useAuthApiClient"
-import { CreateSessionRequest } from "../api/auth"
+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(useMutationOptions = {}) {
+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) => {
-      // Since `getSession` query also has code in it's 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
+    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.SESSION],
-        exact: false,
+        queryKey: [QUERY_KEYS.ACCOUNT, QUERY_KEYS.CURRENT],
       })
-      if ("user" in data) {
-        queryClient.setQueryData([QUERY_KEYS.CURRENT_ACCOUNT], data.user)
-      } else {
-        queryClient.resetQueries({
-          queryKey: [QUERY_KEYS.CURRENT_ACCOUNT],
-        })
-      }
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
     },
-    ...useMutationOptions,
+    ...restMutationOptions,
   })
 
   return { createSession: mutate, createSessionAsync: mutateAsync, ...rest }