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

package/src/api/client.ts

@@ -0,0 +1,78 @@
+import { FetchError } from "./fetch-error"
+
+type RequestHandlerOptions = Omit<RequestInit, "credentials" | "body"> & {
+  body?: Record<string, unknown>
+  queryParams?: Record<string, string | undefined>
+}
+
+export abstract class ApiClient {
+  private apiUrl: string
+
+  constructor(apiUrl: string) {
+    this.apiUrl = apiUrl
+  }
+
+  /**
+   * The request handler for the Passport API. It accepts an API endpoint and
+   * request options.
+   * @dev Generic type `D` is a type of returned object from the function
+   * @dev WARNING: This function hardcodes `credentials: "include"`, meaning
+   * cookies and authentication headers will be sent with every request. Ensure
+   * this is safe if you plan to use it in other contexts than auth api worker.
+   * @param endpoint - The API endpoint to request. Should start with
+   * forward slash ("/")
+   * @param options - The request options, the `RequestInit` type with
+   * additional type-safe properties
+   * @returns The promise of the API response
+   */
+  protected async handleRequest<D>(
+    endpoint: `/${string}`,
+    options: RequestHandlerOptions = {},
+  ): Promise<D> {
+    try {
+      const { method, body, queryParams = {}, ...restOptions } = options
+
+      // If last character in apiUrl is forward slash we are removing it
+      const authApiUrlRoute = this.apiUrl.replace(/\/$/, "")
+      const url = new URL(`${authApiUrlRoute}${endpoint}`)
+
+      // Removes falsy values (e.g. null, undefined etc.) from query params and
+      // appends remaining ones to the URL
+      Object.entries(queryParams)
+        .filter(([, value]) => value) // Remove falsy values
+        .forEach(([key, value]) => url.searchParams.append(key, value!))
+
+      const response = await fetch(url, {
+        method,
+        credentials: "include",
+        body: body ? JSON.stringify(body) : undefined,
+        ...restOptions,
+      })
+
+      const data = await response.json()
+
+      if (!response.ok || data?.error) {
+        const error =
+          data?.error ||
+          `An error occurred when handling API request: ${JSON.stringify(data)}`
+        throw new FetchError(
+          response.status,
+          `Error [${response.status}]: ${error}`,
+        )
+      }
+
+      return data as D
+    } catch (error) {
+      if (error instanceof FetchError) {
+        throw error
+      }
+
+      const errorMessage =
+        error instanceof Error ? error.message : JSON.stringify(error)
+      throw new FetchError(
+        500,
+        `Error [500]: An error occurred when handling API request: ${errorMessage}`,
+      )
+    }
+  }
+}

package/src/api/fetch-error.ts

@@ -0,0 +1,8 @@
+export class FetchError extends Error {
+  constructor(
+    public status: number,
+    message?: string,
+  ) {
+    super(message)
+  }
+}

package/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./auth"
+export * from "./portal"

package/src/api/portal.ts

@@ -0,0 +1,57 @@
+import { ApiClient } from "./client"
+
+type PortalStatistics = {
+  hodlers: number
+  depositedBitcoin: string
+  tvl: number
+  currentUsdPerBtc: string
+  currentUsdPerEth: string
+  currentUsdPerTToken: string
+  usdPerBtc24hChange: string
+}
+
+type PortalMats = {
+  address: string
+  totalMats: number
+  matsFromDeposits: number
+  matsFromReferrals: number
+  matsFromSecondaryReferrals: number
+  netMatsTransferred: number
+  dailyMats: number
+  dailyMatsFromDeposits: number
+  dailyMatsFromReferrals: number
+  dailyMatsFromSecondaryReferrals: number
+}
+
+export const PORTAL_API_ENDPOINTS_BY_ENV = {
+  mainnet: "https://api.mezo.org/api/v1",
+  testnet: "https://api.test.mezo.org/api/v1",
+}
+
+export class PortalApiClient extends ApiClient {
+  constructor(
+    environment: keyof typeof PORTAL_API_ENDPOINTS_BY_ENV = "mainnet",
+    apiUrl?: string,
+  ) {
+    super(apiUrl ?? PORTAL_API_ENDPOINTS_BY_ENV[environment])
+  }
+
+  async getPortalStatistics() {
+    const data = await this.handleRequest<PortalStatistics>("/statistics", {
+      method: "GET",
+    })
+
+    return data
+  }
+
+  async getPortalMats(address: string) {
+    const data = await this.handleRequest<PortalMats>(
+      `/accounts/${address}/mats`,
+      {
+        method: "GET",
+      },
+    )
+
+    return data
+  }
+}

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/ConnectedTrigger.tsx

@@ -0,0 +1,76 @@
+import { Block, Button, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef, ReactNode, useMemo } from "react"
+
+type ConnectedTriggerProps = Omit<ButtonProps, "children" | "size"> & {
+  avatar: ReactNode
+  size?: "medium" | "large"
+}
+
+const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
+  (props, ref) => {
+    const { onClick, avatar, size = "medium", ...restProps } = props
+
+    const [, theme] = useStyletron()
+
+    const avatarSize = useMemo(() => {
+      const sizeMap = {
+        medium: theme.sizing.scale950,
+        large: theme.sizing.scale1400,
+      }
+
+      return sizeMap[size]
+    }, [theme, size])
+
+    const buttonPadding = useMemo(() => {
+      const paddingMap = {
+        medium: theme.sizing.scale0,
+        large: theme.sizing.scale100,
+      }
+
+      return paddingMap[size]
+    }, [theme, size])
+
+    return (
+      <Button
+        overrides={{
+          BaseButton: {
+            props: { ref, ...restProps },
+            style: {
+              borderRadius: "100%",
+              overflow: "hidden",
+              padding: buttonPadding,
+            },
+          },
+        }}
+        onClick={onClick}
+      >
+        {typeof avatar === "string" ? (
+          <Block
+            width={avatarSize}
+            height={avatarSize}
+            as="img"
+            src={avatar}
+            alt=""
+          />
+        ) : (
+          <Block
+            width={avatarSize}
+            height={avatarSize}
+            overrides={{
+              Block: {
+                style: {
+                  borderRadius: "100%",
+                  overflow: "hidden",
+                },
+              },
+            }}
+          >
+            {avatar}
+          </Block>
+        )}
+      </Button>
+    )
+  },
+)
+
+export default ConnectedTrigger

package/src/components/Dropdown/Content.tsx

@@ -0,0 +1,98 @@
+import { Block, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useEffect } from "react"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+import Root from "./Root/Root"
+import Receive from "./Receive/Receive"
+import { DetailedCryptoAsset } from "../../utils/cryptoAssets"
+import TestnetTopBanner from "./TestnetTopBanner"
+
+type ContentProps = {
+  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
+}
+
+function Content(props: ContentProps) {
+  const {
+    mezoId,
+    accountAddress,
+    walletAddress,
+    walletType,
+    usdTotalBalance,
+    assets,
+    matsBalance,
+    usdTroveDebt,
+    usdCollateral,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
+    onSignOut,
+    onOtherAssetsClick,
+  } = props
+
+  const [_, theme] = useStyletron()
+
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
+
+  useEffect(
+    () => () => {
+      setView(DropdownView.ROOT)
+    },
+    [setView],
+  )
+
+  return (
+    <Block
+      display="inline-flex"
+      flexDirection="column"
+      backgroundColor={theme.colors.backgroundPrimary}
+      width="100%"
+      overrides={{
+        Block: {
+          style: {
+            boxSizing: "border-box",
+          },
+        },
+      }}
+    >
+      <TestnetTopBanner />
+
+      {currentView === DropdownView.ROOT && (
+        <Root
+          mezoId={mezoId}
+          accountAddress={accountAddress}
+          walletAddress={walletAddress}
+          walletType={walletType}
+          usdTotalBalance={usdTotalBalance}
+          assets={assets}
+          matsBalance={matsBalance}
+          usdTroveDebt={usdTroveDebt}
+          usdCollateral={usdCollateral}
+          otherAssetsCount={otherAssetsCount}
+          otherAssetsUsdTotal={otherAssetsUsdTotal}
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      )}
+
+      {currentView === DropdownView.RECEIVE && (
+        <Receive address={accountAddress} />
+      )}
+    </Block>
+  )
+}
+
+export default Content

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,148 @@
+import {
+  ButtonProps,
+  StatefulPopover,
+  StatefulPopoverProps,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+import React, { useEffect, useMemo } from "react"
+import { useDisconnect } from "wagmi"
+import DefaultAvatar from "../../assets/DefaultAvatar"
+import useWalletAccount from "../../hooks/useWalletAccount"
+import ConnectedTrigger from "./ConnectedTrigger"
+import Content from "./Content"
+import DisconnectedTrigger from "./DisconnectedTrigger"
+import { useSignInWithWallet } from "../../hooks"
+import useDropdownData from "../../hooks/useDropdownData"
+
+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 props to be passed to the trigger button */
+  triggerProps?: {
+    signedIn?: Omit<ButtonProps, "onClick" | "size"> & {
+      size: "medium" | "large"
+    }
+    signedOut?: Omit<ButtonProps, "onClick">
+  }
+  onOtherAssetsClick?: () => void
+  /** Time in milliseconds after which account data (like mats or mezo id) in dropdown should be re-fetched. Default is 90000 (90 secs) */
+  accountDataRefetchInterval?: number
+  /** Time in milliseconds after which native balance in dropdown should be re-fetched. Default is 90000 (90 secs) */
+  nativeBalanceRefetchInterval?: number
+} & 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,
+    overrides,
+    triggerProps,
+    onOtherAssetsClick,
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
+    ...restProps
+  } = props
+
+  const [, theme] = useStyletron()
+
+  const data = useDropdownData({
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
+  })
+
+  const isCriticalDropdownDataLoaded = useMemo(
+    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
+    [data],
+  )
+
+  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 (!isConnected || !isCriticalDropdownDataLoaded) {
+    return (
+      <DisconnectedTrigger
+        // If connect wallet flow is not provided it fallbacks to RainbowKit's
+        // connect modal
+        onClick={onSignIn || openConnectModal}
+        isLoading={isPending}
+        {...triggerProps?.signedOut}
+      >
+        Sign in
+      </DisconnectedTrigger>
+    )
+  }
+
+  return (
+    <StatefulPopover
+      content={
+        <Content
+          mezoId={data.mezoId!}
+          matsBalance={data.matsBalance}
+          accountAddress={data.accountAddress!}
+          walletAddress={data.walletAddress!}
+          walletType={data.walletType}
+          usdTotalBalance={data.usdTotalBalance}
+          usdTroveDebt={data.usdTroveDebt}
+          usdCollateral={data.usdCollateral}
+          assets={data.assets}
+          otherAssetsCount={data.otherAssetsCount}
+          otherAssetsUsdTotal={data.otherAssetsUsdTotal}
+          onSignOut={onSignOut}
+          onOtherAssetsClick={onOtherAssetsClick}
+        />
+      }
+      placement={placement}
+      animateOutTime={animateOutTime}
+      overrides={{
+        ...overrides,
+        Body: {
+          ...overrides?.Body,
+          style: {
+            width: "396px",
+            borderRadius: theme.borders.radius500,
+            boxShadow: theme.lighting.shadow500,
+            overflow: "hidden",
+            ...overrides?.Body?.style,
+          },
+        },
+      }}
+      {...restProps}
+    >
+      <ConnectedTrigger
+        avatar={<DefaultAvatar />}
+        {...triggerProps?.signedIn}
+      />
+    </StatefulPopover>
+  )
+}

package/src/components/Dropdown/ListingItem.tsx

@@ -0,0 +1,80 @@
+import {
+  ListItem,
+  ListItemLabel,
+  mergeOverrides,
+  ListItemLabelProps,
+  IconProps,
+  ListItemProps,
+} from "@mezo-org/mezo-clay"
+import React, { FC } from "react"
+
+const SHARED_LABEL_OVERRIDES: ListItemLabelProps["overrides"] = {
+  LabelDescription: {
+    style: {
+      color: "#4B4B4B", // contentSecondary
+    },
+  },
+}
+
+type ListingItemProps = {
+  icon?: FC<IconProps>
+  label: string
+  subLabel?: string
+  value: string
+  subValue?: string
+  overrides?: ListItemProps["overrides"]
+}
+
+export default function ListingItem(props: ListingItemProps) {
+  const {
+    icon: Icon,
+    label,
+    subLabel = "",
+    value,
+    subValue = "",
+    overrides,
+  } = props
+
+  return (
+    <ListItem
+      artwork={Icon}
+      // eslint-disable-next-line react/no-unstable-nested-components
+      endEnhancer={() => (
+        <ListItemLabel
+          description={subValue}
+          overrides={mergeOverrides(
+            {
+              LabelRoot: {
+                style: {
+                  textAlign: "right",
+                },
+              },
+            },
+            SHARED_LABEL_OVERRIDES,
+          )}
+        >
+          {value}
+        </ListItemLabel>
+      )}
+      overrides={mergeOverrides(
+        {
+          Root: {
+            style: {
+              backgroundColor: "transparent",
+            },
+          },
+          Content: {
+            style: {
+              border: 0,
+            },
+          },
+        },
+        overrides,
+      )}
+    >
+      <ListItemLabel description={subLabel} overrides={SHARED_LABEL_OVERRIDES}>
+        {label}
+      </ListItemLabel>
+    </ListItem>
+  )
+}