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

package/src/components/Dropdown/NestedViewLayout.tsx

@@ -0,0 +1,75 @@
+import {
+  ArrowLeft,
+  Block,
+  ButtonIcon,
+  LabelMedium,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { ReactNode, useCallback } from "react"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+
+const getHeaderTitle = (view: DropdownView) => {
+  const titleMap: Partial<Record<DropdownView, string>> = {
+    [DropdownView.RECEIVE]: "Receive",
+  }
+  return titleMap[view]!
+}
+
+type NestedViewLayoutProps = {
+  children: ReactNode
+}
+
+function NestedViewLayout(props: NestedViewLayoutProps) {
+  const { children, ...restProps } = props
+
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
+  const isNested = useDropdownStore((state) => state.isNestedView())
+
+  const [, theme] = useStyletron()
+
+  const handleOnButtonClick = useCallback(() => {
+    setView(DropdownView.ROOT)
+  }, [setView])
+
+  return (
+    <Block
+      display="flex"
+      flexDirection="column"
+      minHeight="588px"
+      padding={theme.sizing.scale700}
+      paddingTop={0}
+      {...restProps}
+    >
+      <Block
+        display="flex"
+        alignItems="center"
+        paddingTop={theme.sizing.scale600}
+        paddingBottom={theme.sizing.scale600}
+        marginBottom={theme.sizing.scale300}
+      >
+        <ButtonIcon
+          onClick={handleOnButtonClick}
+          shape="circle"
+          size="small"
+          overrides={{
+            BaseButton: {
+              style: {
+                background: theme.colors.backgroundPrimary,
+                marginRight: isNested ? theme.sizing.scale300 : undefined,
+              },
+            },
+          }}
+        >
+          <ArrowLeft size={theme.sizing.scale700} />
+        </ButtonIcon>
+
+        <LabelMedium>{getHeaderTitle(currentView)}</LabelMedium>
+      </Block>
+
+      {children}
+    </Block>
+  )
+}
+
+export default NestedViewLayout

package/src/components/Dropdown/README.md

@@ -0,0 +1,41 @@
+# Passport Dropdown component
+
+This component is a layer of interaction with Passport API in form of Dropdown
+component. It allows to establish the session and interact with the API.
+
+## Props
+
+- `onSignIn` (`() => void`) - The callback to be executed on trigger click when
+  the state is disconnected. It's optional since by default it triggers the
+  [Rainbow Kit's wallet connection modal](https://www.rainbowkit.com/docs/modal-hooks).
+  If the callback is not provided it will automatically establish the Passport
+  Session. If not, you have to handle it manually using `useSignInWithWallet`
+  hook. - **optional**
+- `onSignOut` (`() => void`) - The callback to be executed on click of the
+  **Sign out** button. It's optional since by default it disconnects the current
+  wallet connector and closes the Passport session. - **optional**
+- `triggerProps.signedIn` (`ButtonProps`) - Props to be passed to the trigger
+  button in signed-in state.
+- `triggerProps.signedOut` (`ButtonProps`) - Props to be passed to the trigger
+  button in signed-out state
+
+Besides that, component allows
+[Clay's `StatefulPopover` props](https://baseweb.design/components/popover/)
+excluding the `children` and `content`.
+
+## Overview
+
+The component has two distinguishable states - disconnected and connected. In
+disconnected state the component offers the trigger to initiate the connection
+flow. It can be fully customizable by providing your own one. As long as it's
+compliant with Wagmi/RainbowKit it will work. Component will automatically
+detect connected connector and change the state of component displaying the
+avatar thumbnail instead of button.
+
+Component has the following features:
+
+- displays wallet address that can be copied,
+- displays total balance in USD,
+- displays partial balances per asset with token amounts and USD conversions,
+- serves _Log out_ button which disconnects the wallet connector and closes
+  Passport API session.

package/src/components/Dropdown/Receive/Receive.tsx

@@ -0,0 +1,119 @@
+import {
+  Block,
+  Button,
+  LabelMedium,
+  MonoLabelXSmall,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { QRCodeSVG } from "qrcode.react"
+import NestedViewLayout from "../NestedViewLayout"
+import { getAddressExplorerUrl } from "../../../utils/address"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import useWalletAccount from "../../../hooks/useWalletAccount"
+
+type ReceiveProps = {
+  address: string
+}
+
+function Receive(props: ReceiveProps) {
+  const { address } = props
+
+  const { environment } = usePassportContext()
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const [, theme] = useStyletron()
+
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+  const handleCopyAddress = useCallback(() => {
+    copy(address)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }, [copy, address])
+
+  const { networkFamily } = useWalletAccount()
+
+  return (
+    <NestedViewLayout>
+      <LabelMedium>Receive assets on Mezo</LabelMedium>
+
+      <ParagraphSmall
+        marginTop={theme.sizing.scale300}
+        marginBottom={theme.sizing.scale600}
+        color={theme.colors.contentTertiary}
+      >
+        {networkFamily === "bitcoin" ? (
+          <>
+            Mezo automatically created a smart account that&apos;s fully
+            controlled by your connected Bitcoin wallet. Use this address to
+            receive assets on Mezo.
+          </>
+        ) : (
+          <>
+            Your connected wallet address is your Mezo address. Use this address
+            to receive assets on Mezo.
+          </>
+        )}
+      </ParagraphSmall>
+
+      <Block
+        as={QRCodeSVG}
+        value={address}
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              aspectRatio: 1,
+              width: "fit-content",
+              margin: "0 auto",
+            },
+          },
+        }}
+      />
+
+      <MonoLabelXSmall
+        marginTop={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale800}
+        overrides={{
+          Block: {
+            style: {
+              textAlign: "center",
+            },
+          },
+        }}
+      >
+        {address}
+      </MonoLabelXSmall>
+
+      <Button
+        onClick={handleCopyAddress}
+        overrides={{
+          BaseButton: {
+            style: {
+              marginBottom: theme.sizing.scale400,
+            },
+          },
+        }}
+      >
+        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo Address"}
+      </Button>
+
+      <Button kind="secondary" $as="a" href={blockExplorerUrl} target="_blank">
+        View Explorer
+      </Button>
+    </NestedViewLayout>
+  )
+}
+
+export default Receive

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

@@ -0,0 +1,101 @@
+import {
+  ArrowNarrowLeft,
+  Block,
+  Button,
+  ButtonProps,
+  Cube01,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl } from "../../../utils/address"
+import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
+
+type AccountAddressActionsProps = {
+  address: string
+}
+
+const buttonStartEnhancerSize = 12
+
+const commonButtonProps: Partial<ButtonProps> = {
+  kind: "secondary",
+  size: "xsmall",
+  overrides: {
+    BaseButton: {
+      style: {
+        flex: 1,
+      },
+    },
+    StartEnhancer: {
+      style: {
+        stroke: "currentColor",
+      },
+    },
+  },
+}
+
+export default function AccountAddressActions(
+  props: AccountAddressActionsProps,
+) {
+  const { address } = props
+
+  const [, theme] = useStyletron()
+
+  const { environment } = usePassportContext()
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const setDropdownView = useDropdownStore((state) => state.setView)
+
+  const handleReceiveClick = useCallback(() => {
+    setDropdownView(DropdownView.RECEIVE)
+  }, [setDropdownView])
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      marginBottom={theme.sizing.scale600}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Button
+        startEnhancer={<Cube01 size={buttonStartEnhancerSize} />}
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+        {...commonButtonProps}
+      >
+        View Mezo Explorer
+      </Button>
+
+      <Button
+        onClick={handleReceiveClick}
+        startEnhancer={
+          <ArrowNarrowLeft
+            size={buttonStartEnhancerSize}
+            overrides={{
+              Svg: {
+                style: {
+                  transform: "rotate(-45deg)",
+                },
+              },
+            }}
+          />
+        }
+        {...commonButtonProps}
+      >
+        Receive
+      </Button>
+    </Block>
+  )
+}

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

@@ -0,0 +1,26 @@
+import React from "react"
+import { CryptoAssetKey, getCryptoAsset } from "../../../utils/cryptoAssets"
+import ListingItem from "../ListingItem"
+
+type AccountAssetItemProps = {
+  type: CryptoAssetKey
+  amount: string
+  subLabel: string
+  subValue: string
+}
+
+export default function AccountAssetItem(props: AccountAssetItemProps) {
+  const { type, amount, subLabel, subValue } = props
+
+  const { icon: Icon, name: label } = getCryptoAsset(type)
+
+  return (
+    <ListingItem
+      icon={Icon}
+      label={label}
+      subLabel={subLabel}
+      value={amount}
+      subValue={subValue}
+    />
+  )
+}

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

@@ -0,0 +1,30 @@
+import React from "react"
+import { useStyletron } from "@mezo-org/mezo-clay"
+import ListingItem from "../ListingItem"
+
+type AccountBalanceProps = {
+  totalBalance: string
+  totalDebt: string
+}
+
+export default function AccountBalance(props: AccountBalanceProps) {
+  const { totalBalance, totalDebt } = props
+
+  const [, theme] = useStyletron()
+
+  return (
+    <ListingItem
+      label="Total assets"
+      value={totalBalance}
+      subLabel="Total liabilities"
+      subValue={totalDebt}
+      overrides={{
+        Root: {
+          style: {
+            borderBottom: `1px solid ${theme.colors.borderInverseSelected}`,
+          },
+        },
+      }}
+    />
+  )
+}

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>
+  )
+}