@mezo-org/passport 0.4.0-dev.4 → 0.4.0-dev.41

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.scale500}
+          color={theme.colors.contentPrimary}
+        >
+          Copied address to clipboard
+        </ParagraphSmall>
+      ) : (
+        <Block
+          as="a"
+          marginLeft={theme.sizing.scale500}
+          href={blockExplorerUrl}
+          target="_blank"
+          overrides={{
+            Block: {
+              style: {
+                color: "inherit",
+                textDecoration: "none",
+                ":hover": {
+                  textDecoration: "underline",
+                },
+              },
+            },
+          }}
+        >
+          <ParagraphSmall
+            display="flex"
+            alignItems="center"
+            margin={0}
+            color={theme.colors.contentPrimary}
+          >
+            {trimmedAddress}
+            <LinkIcon
+              display="inline"
+              size={theme.sizing.scale550}
+              overrides={{
+                Svg: {
+                  style: {
+                    stroke: "currentColor",
+                    marginLeft: theme.sizing.scale300,
+                  },
+                },
+              }}
+            />
+          </ParagraphSmall>
+        </Block>
+      )}
+      <CopyIcon
+        size={theme.sizing.scale550}
+        color={theme.colors.contentPrimary}
+        overrides={{
+          Svg: {
+            style: {
+              marginLeft: "auto",
+            },
+          },
+        }}
+      />
+    </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.scale400,
+              },
+            },
+          }}
+        >
+          <Mats
+            color={theme.colors.contentPrimary}
+            size={theme.sizing.scale500}
+          />
+          {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/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

@@ -1,7 +1,13 @@
-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 {
+  Config,
+  createConfig,
+  CreateConfigParameters,
+  http,
+  webSocket,
+} from "wagmi"
+import { mainnet, sepolia } from "wagmi/chains"
+import { CHAIN_ID, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -20,7 +26,10 @@ type GetDefaultConfigParameters = WagmiConfigParameters & {
 }
 
 const transports = {
-  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet),
+  [mainnet.id]: http(mainnet.rpcUrls.default.http[0]),
+  [sepolia.id]: http(sepolia.rpcUrls.default.http[0]),
+  // TODO: Add chain for mezo mainnet
+  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet.http),
 } as Pick<CreateConfigParameters, "transports">
 
 export const defaultConfig: Required<
@@ -34,12 +43,13 @@ export const defaultConfig: Required<
 > = {
   transports,
   walletConnectProjectId: "",
-  chains: [mezoMatsnetTestnet],
+  chains: [mainnet, sepolia, mezoTestnet],
   multiInjectedProviderDiscovery: true,
 }
 
 const bitcoinWalletConfig = {
-  rpcUrl: RPC_BY_NETWORK.testnet,
+  // TODO: Add config for mezo mainnet
+  rpcUrl: RPC_BY_NETWORK.testnet.http,
   chainId: CHAIN_ID.testnet,
 }
 
@@ -70,3 +80,14 @@ export function getConfig({
     ...restParameters,
   })
 }
+
+/**
+ * This config is only used to listen for Transfer events on mezo chain.
+ * Should not be exported in index for public use.
+ */
+export const simpleWssMezoConfig = createConfig({
+  chains: [mezoTestnet],
+  transports: {
+    [mezoTestnet.id]: webSocket(RPC_BY_NETWORK.testnet.wss),
+  },
+})

package/src/constants.ts

@@ -1,11 +1,15 @@
-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: {
+    http: mezoTestnet.rpcUrls.default.http[0],
+    wss: mezoTestnet.rpcUrls.default.wss[0],
+  },
 }

package/src/hooks/constants.ts

@@ -2,4 +2,5 @@ export const QUERY_KEYS = {
   ACCOUNT: "account",
   SESSION: "session",
   CURRENT: "current",
+  ASSETS_USD_CONVERSION: "assetsUsdConversion",
 }

package/src/hooks/index.ts

@@ -6,13 +6,19 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
-export * from "./useCreateAccount"
+export { useInvalidateBorrowData, useResetBorrowData } from "./useBorrowData"
 export * from "./useGetAccountByAddress"
 export * from "./useGetAccountByMezoId"
 export * from "./useGetCurrentAccount"
 export * from "./useGetSession"
 export * from "./useLinkAccount"
+export * from "./useRefreshPassport"
 export * from "./useSignInWithDiscord"
 export * from "./useSignInWithWallet"
 export * from "./useSignOut"
+export * from "./useSignUpWithWallet"
+export {
+  useInvalidateTokensBalances,
+  useResetTokensBalances,
+} from "./useTokensBalances"
 export * from "./useUpdateMezoId"

package/src/hooks/useAssetsConversionRates.ts

@@ -0,0 +1,32 @@
+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 = {
+  usd: Record<"btc" | "eth" | "t", number>
+}
+
+export default function useAssetsConversionRates(
+  useQueryOptions: Partial<UseBaseQueryOptions<AssetsUsdConversion>> = {},
+) {
+  const portalApiClient = usePortalApiClient()
+
+  return useQuery({
+    queryKey: [QUERY_KEYS.ASSETS_USD_CONVERSION],
+    queryFn: async () => {
+      const { currentUsdPerBtc, currentUsdPerEth, currentUsdPerTToken } =
+        await portalApiClient.getPortalStatistics()
+      return {
+        usd: {
+          btc: Number(currentUsdPerBtc),
+          eth: Number(currentUsdPerEth),
+          t: Number(currentUsdPerTToken),
+        },
+      }
+    },
+    staleTime: 30 * ONE_MINUTE_MS,
+    retry: 1,
+    ...useQueryOptions,
+  })
+}

package/src/hooks/useAuthenticateWithWallet.ts

@@ -0,0 +1,102 @@
+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 { walletAddress, chainId, connector, networkFamily } =
+    useWalletAccount()
+  const { ensureNoSessionAndFetchNonce } = useEnsureNoSessionAndFetchNonce()
+  const { createSessionAsync } = useCreateSession()
+  const { createAccountAsync } = useCreateAccount()
+  const { signMessageAsync } = useSignMessage()
+
+  const { refetch: getAccountByAddress } = useGetAccountByAddress(
+    walletAddress,
+    {
+      enabled: false,
+      retry: false,
+    },
+  )
+
+  const { mutate, mutateAsync, ...signInMutationRestParameters } = useMutation({
+    mutationFn: async () => {
+      if (!walletAddress) {
+        throw new Error("Sign in error: Wallet not connected!")
+      }
+
+      const nonce = await ensureNoSessionAndFetchNonce()
+
+      const messageResult = createSignInWithWalletMessage(
+        walletAddress,
+        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/useBorrowData.ts

@@ -0,0 +1,143 @@
+import { useAccount, useReadContract } from "wagmi"
+import { useCallback, useMemo } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { ONE_MINUTE_MS } from "../utils/time"
+import {
+  mainnetBorrowContracts,
+  testnetBorrowContracts,
+} from "../lib/contracts"
+import { usePassportContext } from "./usePassportContext"
+import { CHAIN_ID } from "../constants"
+
+// Wagmi handles typesafety with ABI const assertions. TypeScript doesn't
+// support importing JSON as const yet so types cannot be inferred from the
+// imported contract. As a workaround there is minimal ABI definition that can
+// be asserted types from.
+// Ref: https://wagmi.sh/core/typescript#const-assert-abis-typed-data
+
+const TROVE_MANAGER_ABI = [
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_borrower",
+        type: "address",
+      },
+    ],
+    name: "getEntireDebtAndColl",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "coll",
+        type: "uint256",
+      },
+      {
+        internalType: "uint256",
+        name: "principal",
+        type: "uint256",
+      },
+      {
+        internalType: "uint256",
+        name: "interest",
+        type: "uint256",
+      },
+      {
+        internalType: "uint256",
+        name: "pendingCollateral",
+        type: "uint256",
+      },
+      {
+        internalType: "uint256",
+        name: "pendingPrincipal",
+        type: "uint256",
+      },
+      {
+        internalType: "uint256",
+        name: "pendingInterest",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+] as const
+
+/**
+ * Query hook for getting borrow data. Returns collateral and trove debt for the
+ * connected account, based on it's evm address.
+ * @param queryOptions Query options passed to the underlying `useQuery` hook.
+ */
+export function useBorrowData(queryOptions = {}) {
+  const { environment = "mainnet" } = usePassportContext()
+  const { address } = useAccount()
+
+  const contractAddress = useMemo(() => {
+    if (environment === "mainnet") {
+      return mainnetBorrowContracts.TroveManager.address
+    }
+    return testnetBorrowContracts.TroveManager.address
+  }, [environment])
+
+  return useReadContract({
+    abi: TROVE_MANAGER_ABI,
+    address: contractAddress,
+    functionName: "getEntireDebtAndColl",
+    args: [address || "0x"],
+    query: {
+      enabled: !!address,
+      staleTime: 5 * ONE_MINUTE_MS,
+      retry: 1,
+      select: (data) => {
+        if (!data) return undefined
+
+        const [collateral, principal, interest] = data
+        return {
+          collateral,
+          troveDebt: principal + interest,
+        }
+      },
+      ...queryOptions,
+    },
+    chainId: CHAIN_ID[environment],
+  })
+}
+
+/**
+ * Hook for for invalidating current user's borrow data. Can be used to
+ * invalidate borrow data manually, which forces the data to be re-fetched.
+ * @returns Function `invalidateBorrowData` for invalidating the borrow data
+ */
+export function useInvalidateBorrowData() {
+  const queryClient = useQueryClient()
+
+  const { queryKey } = useBorrowData()
+
+  const invalidateBorrowDataHandler = useCallback(
+    () => queryClient.invalidateQueries({ queryKey }),
+    [queryClient, queryKey],
+  )
+
+  return {
+    invalidateBorrowData: invalidateBorrowDataHandler,
+  }
+}
+
+/**
+ * Hook for for resetting current user's borrow data. Can be used to reset
+ * borrow data manually, which forces the data to be re-fetched.
+ * @returns Function `resetBorrowData` for resetting the borrow data
+ */
+export function useResetBorrowData() {
+  const queryClient = useQueryClient()
+
+  const { queryKey } = useBorrowData()
+
+  const resetBorrowDataHandler = useCallback(
+    () => queryClient.resetQueries({ queryKey }),
+    [queryClient, queryKey],
+  )
+
+  return {
+    resetBorrowData: resetBorrowDataHandler,
+  }
+}

package/src/hooks/useCreateAccount.ts

@@ -1,21 +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: () => {
+    onSuccess: (data, variables, context) => {
       queryClient.resetQueries({
         queryKey: [QUERY_KEYS.ACCOUNT],
       })
+
+      if (customOnSuccess) customOnSuccess(data, variables, context)
     },
-    ...useMutationOptions,
+    ...restMutationOptions,
   })
 
   return { createAccount: mutate, createAccountAsync: mutateAsync, ...rest }