@mezo-org/passport 0.4.0-dev.5 → 0.4.0-dev.51

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react"
+import { Block, useStyletron, CoinsStacked02 } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+import { formatUsd } from "../../../utils/currency"
+
+type AccountOtherAssetsProps = {
+  assetsCount: number
+  assetsUsdTotal: number
+  onClick?: () => void
+}
+
+export default function AccountOtherAssets(props: AccountOtherAssetsProps) {
+  const { assetsCount, assetsUsdTotal, onClick } = props
+
+  const [, theme] = useStyletron()
+
+  const label = useMemo(() => {
+    if (assetsCount === 0) return "No other assets"
+    if (assetsCount === 1) return "1 more asset"
+    return `${assetsCount} more assets`
+  }, [assetsCount])
+
+  const formattedAssetsUsdTotal = formatUsd(assetsUsdTotal)
+
+  return (
+    <Block
+      aria-label={label}
+      as="li"
+      overrides={{
+        Block: {
+          style: {
+            listStyle: "none",
+            borderTop: `1px solid ${theme.colors.borderInverseSelected}`,
+          },
+        },
+      }}
+    >
+      <ListingItem
+        icon={CoinsStacked02}
+        label={label}
+        value={formattedAssetsUsdTotal}
+        overrides={{
+          Root: {
+            props: {
+              $as: "button",
+              onClick,
+            },
+            style: {
+              border: 0,
+              padding: 0,
+              cursor: "pointer",
+            },
+          },
+          ArtworkContainer: {
+            style: {
+              stroke: theme.colors.contentPrimary,
+            },
+          },
+          Content: {
+            style: {
+              minHeight: theme.sizing.scale1200,
+            },
+          },
+        }}
+      />
+    </Block>
+  )
+}

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

@@ -0,0 +1,147 @@
+import { Block, Button, LogOut01, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { useDisconnect } from "wagmi"
+import { useSignOut } from "../../../hooks"
+import WalletAddress from "./WalletAddress"
+import AccountBalance from "./AccountBalance"
+import WelcomeBlock from "./WelcomeBlock"
+import AccountAddressActions from "./AccountAddressActions"
+import AccountAssetItem from "./AccountAssetItem"
+import { DetailedCryptoAsset } from "../../../utils/cryptoAssets"
+import { formatNumberToCompactString } from "../../../utils/numbers"
+import { formatUsd } from "../../../utils/currency"
+import AccountOtherAssets from "./AccountOtherAssets"
+
+type RootProps = {
+  mezoId: string
+  matsBalance: number
+  accountAddress: string
+  walletAddress: string
+  walletType: "bitcoin" | "evm"
+  usdTotalBalance: number
+  usdTroveDebt: number
+  usdCollateral: number
+  assets: {
+    btc: DetailedCryptoAsset
+    musd: DetailedCryptoAsset
+  }
+  otherAssetsCount: number
+  otherAssetsUsdTotal: number
+  onSignOut?: () => void
+  onOtherAssetsClick?: () => void
+}
+
+export default function Root(props: RootProps) {
+  const {
+    mezoId,
+    walletAddress,
+    accountAddress,
+    walletType,
+    usdTotalBalance,
+    usdTroveDebt,
+    usdCollateral,
+    matsBalance,
+    assets,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
+    onSignOut,
+    onOtherAssetsClick,
+  } = props
+
+  const [, theme] = useStyletron()
+
+  const { disconnect } = useDisconnect()
+  const { signOut } = useSignOut()
+
+  const handleLogOut = useCallback(() => {
+    if (onSignOut) {
+      onSignOut()
+      return
+    }
+
+    signOut()
+    disconnect()
+  }, [signOut, disconnect, onSignOut])
+
+  const formattedMatsBalance = formatNumberToCompactString(matsBalance, 2)
+  const formattedUsdTotalBalance = formatUsd(usdTotalBalance)
+  const formattedUsdTroveDebt = formatUsd(usdTroveDebt)
+  const formattedUsdCollateral = formatUsd(usdCollateral)
+
+  return (
+    <Block
+      display="inline-flex"
+      flexDirection="column"
+      padding={theme.sizing.scale600}
+    >
+      <WelcomeBlock mezoId={mezoId} matsBalance={formattedMatsBalance} />
+
+      <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
+          totalBalance={formattedUsdTotalBalance}
+          totalDebt={formattedUsdTroveDebt}
+        />
+
+        <AccountAssetItem
+          type="BTC"
+          amount={assets.btc.formattedUsdBalance}
+          subLabel="Locked collateral"
+          subValue={formattedUsdCollateral}
+        />
+
+        <AccountAssetItem
+          type="MUSD"
+          amount={assets.musd.formattedUsdBalance}
+          subLabel="Borrowed"
+          subValue={formattedUsdTroveDebt}
+        />
+
+        <AccountOtherAssets
+          assetsCount={otherAssetsCount}
+          assetsUsdTotal={otherAssetsUsdTotal}
+          onClick={onOtherAssetsClick}
+        />
+      </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.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,12 @@
-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 { CHAIN_ID, mezoMainnet, mezoTestnet, RPC_BY_NETWORK } from "./constants"
 import { getOKXWallet, getUnisatWallet, getXverseWallet } from "./wallet"
 
 type WagmiConfigParameters = Omit<
@@ -20,7 +25,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 +40,90 @@ 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 function getDefaultWallets(): WalletList {
+export const unisatWalletMezoMainnet = getUnisatWallet(
+  bitcoinWalletMainnetConfig,
+)
+export const okxWalletMezoMainnet = getOKXWallet(bitcoinWalletMainnetConfig)
+export const xverseWalletMezoMainnet = getXverseWallet(
+  bitcoinWalletMainnetConfig,
+)
+
+export function getDefaultWallets(
+  network: "mainnet" | "testnet" = "mainnet",
+): WalletList {
   return [
     {
       groupName: "Bitcoin",
-      wallets: [unisatWallet, okxWallet, xverseWallet],
+      wallets:
+        network === "mainnet"
+          ? [
+              unisatWalletMezoMainnet,
+              okxWalletMezoMainnet,
+              xverseWalletMezoMainnet,
+            ]
+          : [
+              unisatWalletMezoTestnet,
+              okxWalletMezoTestnet,
+              xverseWalletMezoTestnet,
+            ],
     },
   ]
 }
 
-export function getConfig({
-  appName,
-  bitcoinWallets,
-  walletConnectProjectId,
-  ...restParameters
-}: GetDefaultConfigParameters): Config {
+export function getConfig(config: GetDefaultConfigParameters): Config {
+  const {
+    appName,
+    walletConnectProjectId = defaultConfig.walletConnectProjectId,
+    ...restParameters
+  } = config
+
+  // Wallets don't have to be differentiated by network. Viem will choose proper
+  // connector selectively based on the chainId, or by the chainId passed
+  // explicitly.
+  const wallets = config.bitcoinWallets ?? [
+    ...getDefaultWallets("mainnet"),
+    ...getDefaultWallets("testnet"),
+  ]
+
   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/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,14 +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"