@mezo-org/passport 0.4.0-dev.9 → 0.5.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.mats.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/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 { walletConnectWallet } from "@rainbow-me/rainbowkit/wallets"
+import { CHAIN_ID, mezoMainnet, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -10,6 +16,7 @@ type WagmiConfigParameters = Omit<
 >
 type GetDefaultConfigParameters = WagmiConfigParameters & {
   appName: string
+  mezoNetwork?: "mainnet" | "testnet"
   appDescription?: string
   appUrl?: string
   appIcon?: string
@@ -20,7 +27,8 @@ type GetDefaultConfigParameters = WagmiConfigParameters & {
 }
 
 const transports = {
-  [CHAIN_ID.testnet]: http(RPC_BY_NETWORK.testnet),
+  [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<
@@ -34,39 +42,99 @@ export const defaultConfig: Required<
 > = {
   transports,
   walletConnectProjectId: "",
-  chains: [mezoMatsnetTestnet],
+  chains: [mezoMainnet, mezoTestnet],
   multiInjectedProviderDiscovery: true,
 }
 
-const bitcoinWalletConfig = {
-  rpcUrl: RPC_BY_NETWORK.testnet,
+const bitcoinWalletTestnetConfig = {
+  rpcUrl: RPC_BY_NETWORK.testnet.http,
   chainId: CHAIN_ID.testnet,
 }
 
-export const unisatWallet = getUnisatWallet(bitcoinWalletConfig)
-export const okxWallet = getOKXWallet(bitcoinWalletConfig)
-export const xverseWallet = getXverseWallet(bitcoinWalletConfig)
+const bitcoinWalletMainnetConfig = {
+  rpcUrl: RPC_BY_NETWORK.mainnet.http,
+  chainId: CHAIN_ID.mainnet,
+}
+
+export const unisatWalletMezoTestnet = getUnisatWallet(
+  bitcoinWalletTestnetConfig,
+)
+export const okxWalletMezoTestnet = getOKXWallet(bitcoinWalletTestnetConfig)
+export const xverseWalletMezoTestnet = getXverseWallet(
+  bitcoinWalletTestnetConfig,
+)
+
+export const unisatWalletMezoMainnet = getUnisatWallet(
+  bitcoinWalletMainnetConfig,
+)
+export const okxWalletMezoMainnet = getOKXWallet(bitcoinWalletMainnetConfig)
+export const xverseWalletMezoMainnet = getXverseWallet(
+  bitcoinWalletMainnetConfig,
+)
+
+export const preconfiguredWalletConnectWallet = (projectId: string) =>
+  walletConnectWallet({
+    projectId,
+    options: {
+      qrModalOptions: {
+        enableExplorer: false,
+      },
+    },
+  })
 
-export function getDefaultWallets(): WalletList {
+export function getDefaultWallets(
+  network: "mainnet" | "testnet" = "mainnet",
+): WalletList {
   return [
     {
       groupName: "Bitcoin",
-      wallets: [unisatWallet, okxWallet, xverseWallet],
+      wallets:
+        network === "mainnet"
+          ? [
+              unisatWalletMezoMainnet,
+              okxWalletMezoMainnet,
+              xverseWalletMezoMainnet,
+            ]
+          : [
+              unisatWalletMezoTestnet,
+              okxWalletMezoTestnet,
+              xverseWalletMezoTestnet,
+            ],
+    },
+    {
+      groupName: "Ethereum",
+      wallets: [({ projectId }) => preconfiguredWalletConnectWallet(projectId)],
     },
   ]
 }
 
-export function getConfig({
-  appName,
-  bitcoinWallets,
-  walletConnectProjectId,
-  ...restParameters
-}: GetDefaultConfigParameters): Config {
+export function getConfig(config: GetDefaultConfigParameters): Config {
+  const {
+    appName,
+    mezoNetwork = "mainnet",
+    walletConnectProjectId = defaultConfig.walletConnectProjectId,
+    ...restParameters
+  } = config
+
+  const wallets = config.bitcoinWallets ?? [...getDefaultWallets(mezoNetwork)]
+
   return getDefaultConfig({
     ...defaultConfig,
     appName,
-    wallets: [...(bitcoinWallets ?? getDefaultWallets())],
-    projectId: walletConnectProjectId ?? defaultConfig.walletConnectProjectId,
+    wallets,
+    projectId: walletConnectProjectId,
     ...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: [mezoMainnet, mezoTestnet],
+  transports: {
+    [mezoMainnet.id]: webSocket(RPC_BY_NETWORK.mainnet.webSocket),
+    [mezoTestnet.id]: webSocket(RPC_BY_NETWORK.testnet.webSocket),
+  },
+})

package/src/constants.ts

@@ -1,11 +1,19 @@
-import { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+import { mezoMainnet, mezoTestnet } from "@mezo-org/orangekit"
 
-export { mezoMatsnetTestnet } from "@mezo-org/orangekit"
+export { mezoMainnet, mezoTestnet } from "@mezo-org/orangekit"
 
 export const CHAIN_ID = {
-  testnet: mezoMatsnetTestnet.id,
+  testnet: mezoTestnet.id,
+  mainnet: mezoMainnet.id,
 }
 
 export const RPC_BY_NETWORK = {
-  testnet: mezoMatsnetTestnet.rpcUrls.default.http[0],
+  mainnet: {
+    http: mezoMainnet.rpcUrls.default.http[0],
+    webSocket: mezoMainnet.rpcUrls.default.webSocket?.[0],
+  },
+  testnet: {
+    http: mezoTestnet.rpcUrls.default.http[0],
+    webSocket: mezoTestnet.rpcUrls.default.webSocket?.[0],
+  },
 }

package/src/hooks/index.ts

@@ -6,13 +6,20 @@ export {
   useSubscribeToConnectorEvent,
   useSubscribeToWalletNetworkDoesNotMatchProviderChain,
 } from "@mezo-org/orangekit"
+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"
+export * from "./useValidateMezoId"