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

package/src/assets/DefaultAvatar.tsx

@@ -0,0 +1,74 @@
+import { Block, BlockProps } from "@mezo-org/mezo-clay"
+import React, { SVGProps } from "react"
+
+function DefaultAvatar(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 214 214" fill="none" {...props}>
+      <rect y="-0.478027" width="166.379" height="81.7091" fill="#FF004D" />
+      <rect x="166" y="-0.478027" width="48" height="82" fill="black" />
+      <rect
+        x="166.379"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#DFFF80"
+      />
+      <rect
+        x="118.758"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#FF5500"
+      />
+      <rect
+        x="71.1372"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#5A59A7"
+      />
+      <rect
+        x="23.5166"
+        y="81.231"
+        width="24.1044"
+        height="132.291"
+        fill="#47B5FF"
+      />
+      <rect y="81.231" width="23.5165" height="132.291" fill="#A3C238" />
+      <rect
+        x="190.483"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#6E6E70"
+      />
+      <rect
+        x="142.863"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#0A3C01"
+      />
+      <rect
+        x="95.2417"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#F2A91F"
+      />
+      <rect
+        x="47.6211"
+        y="81.231"
+        width="23.5165"
+        height="132.291"
+        fill="#6B3D01"
+      />
+    </svg>
+  )
+}
+
+function DefaultAvatarComponent(props: BlockProps) {
+  return <Block as={DefaultAvatar} {...props} />
+}
+
+export default DefaultAvatarComponent

package/src/components/Dropdown/AccountAddress.tsx

@@ -0,0 +1,130 @@
+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 AccountAddressProps = {
+  address: string
+  type: "bitcoin" | "evm"
+}
+
+// TODO: Add visual feedback on copy
+
+export default function AccountAddress(props: AccountAddressProps) {
+  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/AccountAssets.tsx

@@ -0,0 +1,110 @@
+import {
+  Block,
+  LabelSmall,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useMemo } from "react"
+import { CryptoAssetKey, getCryptoAsset } from "../../utils/cryptoAssets"
+import { formatUsd } from "../../utils/currency"
+
+type AccountAssetsProps = {
+  label: string | React.ReactNode
+  assets: {
+    type: CryptoAssetKey
+    decimals: number
+    balance: number
+    balanceInUsd: number
+  }[]
+}
+
+export default function AccountAssets(props: AccountAssetsProps) {
+  const { label, assets } = props
+
+  const [, theme] = useStyletron()
+
+  const assetsData = useMemo(
+    () =>
+      assets.map((token) => {
+        const { name, symbol, icon } = getCryptoAsset(token.type)
+
+        return {
+          ...token,
+          icon,
+          label: name,
+          symbol,
+        }
+      }),
+    [assets],
+  )
+
+  const labelContent =
+    typeof label === "string" ? (
+      <ParagraphSmall margin={0} color={theme.colors.gray800}>
+        {label}
+      </ParagraphSmall>
+    ) : (
+      label
+    )
+
+  if (assetsData.length === 0) {
+    return null
+  }
+
+  return (
+    <Block padding={`0 ${theme.sizing.scale500}`}>
+      <Block margin={`${theme.sizing.scale400} 0`}>{labelContent}</Block>
+
+      <Block
+        as="ul"
+        marginBottom={theme.sizing.scale600}
+        padding={0}
+        display="flex"
+        flexDirection="column"
+        overrides={{
+          Block: {
+            style: {
+              gap: theme.sizing.scale100,
+            },
+          },
+        }}
+      >
+        {assetsData.map((asset) => (
+          <Block
+            as="li"
+            key={`${asset.type}-${asset.balance}`}
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            margin={`${theme.sizing.scale100} 0`}
+          >
+            <asset.icon
+              size={theme.sizing.scale800}
+              overrides={{
+                Svg: {
+                  style: {
+                    marginRight: theme.sizing.scale500,
+                  },
+                },
+              }}
+            />
+
+            <Block flex={1}>
+              <LabelSmall margin={0}>{asset.label}</LabelSmall>
+              <ParagraphSmall margin={0} color={theme.colors.gray500}>
+                {asset.symbol}
+              </ParagraphSmall>
+            </Block>
+
+            <Block display="flex" alignItems="end" flexDirection="column">
+              <LabelSmall margin={0}>{asset.balance}</LabelSmall>
+              <ParagraphSmall margin={0} color={theme.colors.gray500}>
+                {formatUsd(asset.balanceInUsd)}
+              </ParagraphSmall>
+            </Block>
+          </Block>
+        ))}
+      </Block>
+    </Block>
+  )
+}

package/src/components/Dropdown/AccountBalance.tsx

@@ -0,0 +1,38 @@
+import {
+  Block,
+  HeadingSmall,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React from "react"
+import { formatUsd } from "../../utils/currency"
+
+type AccountBalanceProps = {
+  amount: number
+}
+
+export default function AccountBalance(props: AccountBalanceProps) {
+  const { amount } = props
+
+  const formattedUsdBalance = formatUsd(amount)
+
+  const [, theme] = useStyletron()
+
+  return (
+    <Block
+      padding={theme.sizing.scale500}
+      overrides={{
+        Block: {
+          style: {
+            borderBottom: `1px solid ${theme.colors.backgroundPrimary}`,
+          },
+        },
+      }}
+    >
+      <ParagraphSmall margin={0} color={theme.colors.gray800}>
+        Available balance
+      </ParagraphSmall>
+      <HeadingSmall margin={0}>{formattedUsdBalance}</HeadingSmall>
+    </Block>
+  )
+}

package/src/components/Dropdown/ConnectedTrigger.tsx

@@ -0,0 +1,56 @@
+import { Block, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef, ReactNode } from "react"
+
+type ConnectedTriggerProps = Omit<ButtonProps, "children"> & {
+  avatar: ReactNode
+}
+
+const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
+  (props, ref) => {
+    const { onClick, avatar, ...restProps } = props
+
+    const [, theme] = useStyletron()
+
+    return (
+      <Block
+        as="button"
+        overrides={{
+          Block: {
+            props: { ref, ...restProps },
+            style: {
+              border: "none",
+              background: "none",
+              padding: 0,
+              margin: 0,
+              cursor: "pointer",
+            },
+          },
+        }}
+        onClick={onClick}
+      >
+        <Block
+          width={theme.sizing.scale950}
+          height={theme.sizing.scale950}
+          overrides={{
+            Block: {
+              style: {
+                borderRadius: "100%",
+                border: `2px solid ${theme.colors.contentPrimary}`,
+                boxSizing: "border-box",
+                overflow: "hidden",
+              },
+            },
+          }}
+        >
+          {typeof avatar === "string" ? (
+            <Block as="img" src={avatar} alt="" />
+          ) : (
+            avatar
+          )}
+        </Block>
+      </Block>
+    )
+  },
+)
+
+export default ConnectedTrigger

package/src/components/Dropdown/Content.tsx

@@ -0,0 +1,148 @@
+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 AccountAddress from "./AccountAddress"
+import AccountAssets from "./AccountAssets"
+import AccountBalance from "./AccountBalance"
+import WelcomeBlock from "./WelcomeBlock"
+
+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 DropdownContentProps = {
+  data: DropdownData
+  onSignOut?: () => void
+}
+
+export default function DropdownContent(props: DropdownContentProps) {
+  const { data, onSignOut } = props
+
+  const [, theme] = useStyletron()
+
+  const {
+    mezoId,
+    address,
+    walletType,
+    totalBalanceInUsd,
+    formattedNativeAssets,
+    matsnet,
+  } = data
+
+  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"
+      backgroundColor={theme.colors.backgroundPrimary}
+      padding={theme.sizing.scale500}
+      width="100%"
+      overrides={{
+        Block: {
+          style: {
+            boxSizing: "border-box",
+          },
+        },
+      }}
+    >
+      <WelcomeBlock mezoId={mezoId} matsBalance={matsnet.mats} />
+
+      <Block
+        display="flex"
+        flexDirection="column"
+        backgroundColor={theme.colors.backgroundSecondary}
+        overflow="hidden"
+        overrides={{
+          Block: { style: { borderRadius: theme.borders.radius300 } },
+        }}
+      >
+        <AccountAddress address={address} 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/DisconnectedTrigger.tsx

@@ -0,0 +1,36 @@
+import { Button, ButtonProps, LogIn01, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef } from "react"
+
+type DisconnectedTriggerProps = Omit<ButtonProps, "children"> & {
+  children: string
+}
+
+const DisconnectedTrigger = forwardRef<
+  HTMLButtonElement,
+  DisconnectedTriggerProps
+>((props, ref) => {
+  const { onClick, children, ...restProps } = props
+
+  const [, theme] = useStyletron()
+
+  return (
+    <Button
+      startEnhancer={
+        <LogIn01 color="currentColor" size={theme.sizing.scale600} />
+      }
+      overrides={{
+        Root: {
+          props: { ref },
+        },
+      }}
+      size="small"
+      shape="pill"
+      onClick={onClick}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  )
+})
+
+export default DisconnectedTrigger

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,111 @@
+import {
+  StatefulPopover,
+  StatefulPopoverProps,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import React, { useEffect } from "react"
+import { useDisconnect } from "wagmi"
+import DefaultAvatar from "../../assets/DefaultAvatar"
+import useDropdownData, {
+  DropdownCryptoAsset,
+} from "../../hooks/useDropdownData"
+import useWalletAccount from "../../hooks/useWalletAccount"
+import ConnectedTrigger from "./ConnectedTrigger"
+import Content from "./Content"
+import DisconnectedTrigger from "./DisconnectedTrigger"
+import { useSignInWithWallet } from "../../hooks"
+
+export type DropdownProps = {
+  /** The callback to be called when the user clicks the sign-out button */
+  onSignOut?: () => void
+  /** The callback to be called when the user clicks the button in sign-in state */
+  onSignIn?: () => void
+  /** The set of EVM native assets to be displayed in the dropdown */
+  evmNativeAssets?: DropdownCryptoAsset<"tbtc" | "wbtc">[]
+  /** The set of Matsnet assets to be displayed in the dropdown */
+  matsnetAssets?: DropdownCryptoAsset<"mbtc" | "musd">[]
+} & Omit<StatefulPopoverProps, "children" | "content">
+
+/**
+ * Passport Dropdown component that displays user's wallet and assets information.
+ * @param {DropdownProps} props - Component props.
+ * @returns {JSX.Element}
+ */
+export function Dropdown(props: DropdownProps) {
+  const {
+    placement = "bottomRight",
+    animateOutTime = 120,
+    onSignIn,
+    onSignOut,
+    evmNativeAssets,
+    matsnetAssets,
+    overrides,
+    ...restProps
+  } = props
+
+  const [, theme] = useStyletron()
+
+  const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets })
+
+  const { openConnectModal } = useConnectModal()
+
+  const { isConnected } = useWalletAccount()
+
+  const { signInWithWalletAsync, isPending } = useSignInWithWallet()
+
+  const { disconnectAsync } = useDisconnect()
+
+  useEffect(() => {
+    if (onSignIn) return
+
+    const handleSignIn = async () => {
+      if (!isConnected) return
+
+      try {
+        await signInWithWalletAsync()
+      } catch (error) {
+        await disconnectAsync()
+      }
+    }
+
+    handleSignIn()
+  }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync])
+
+  if (!dropdownData || !isConnected) {
+    return (
+      <DisconnectedTrigger
+        // If connect wallet flow is not provided it fallbacks to RainbowKit's
+        // connect modal
+        onClick={onSignIn || openConnectModal}
+        isLoading={isPending}
+      >
+        Sign in
+      </DisconnectedTrigger>
+    )
+  }
+
+  return (
+    <StatefulPopover
+      content={<Content data={dropdownData} onSignOut={onSignOut} />}
+      placement={placement}
+      animateOutTime={animateOutTime}
+      overrides={{
+        ...overrides,
+        Body: {
+          ...overrides?.Body,
+          style: {
+            minWidth: "396px",
+            borderRadius: theme.borders.radius500,
+            boxShadow: theme.lighting.shadow500,
+            overflow: "hidden",
+            ...overrides?.Body?.style,
+          },
+        },
+      }}
+      {...restProps}
+    >
+      <ConnectedTrigger avatar={<DefaultAvatar />} />
+    </StatefulPopover>
+  )
+}