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

package/src/api/auth.ts

@@ -1,151 +1,90 @@
-type RequestHandlerOptions = Omit<RequestInit, "credentials" | "body"> & {
-  body?: Record<string, unknown>
-  queryParams?: Record<string, string | undefined>
-}
-type PassportIdentityProvider = "wallet" | "discord" | "email"
+import { ApiClient } from "./client"
+import { FetchError } from "./fetch-error"
 
-type AccountPublicData = {
-  mezoId?: string
-  btcAddress: string
+type AuthProvider = "discord"
+
+export type LinkedWalletAccount = {
+  type: "wallet"
+  btcAddress?: string
   evmAddress: string
 }
 
-type AuthUser = {
+export type LinkedProviderAccount = {
+  type: AuthProvider
+  name: string
   id: string
-  app_metadata: {
-    provider: PassportIdentityProvider
-    providers: PassportIdentityProvider[]
-  }
-  user_metadata: AccountPublicData
+  avatarUrl: string
 }
 
-type AuthProvider = "discord"
-
-export type LinkedAccount =
-  | {
-      type: "wallet"
-      btcAddress?: string
-      evmAddress: string
-    }
-  | {
-      type: AuthProvider
-      name: string
-      id: string
-      avatarUrl: string
-    }
+export type LinkedAccount = LinkedWalletAccount | LinkedProviderAccount
 
 type Account = {
   mezoId: string
   hasModifiedMezoId: boolean
   linkedAccounts: LinkedAccount[]
-  authUser: AuthUser
 }
 
-type Session = {
+export type Session = {
   expiresIn: number
   expiresAt: number
   sessionLinks: {
     _links: {
-      account: "/session/account"
+      account: string
     }
   }
 }
 
-type AuthenticationProviderRedirectResponse = {
+export type AuthenticationProviderRedirectResponse = {
   redirectTo: string
 }
 
-type WalletAccountCredentials = {
-  type: "wallet"
+type SignatureData = {
   message: string
   signature: string
 }
 
+// Request and Response types
+export type GetSessionResponse = Session | { nonce: string }
+
 export type CreateSessionRequest =
-  | WalletAccountCredentials
+  | ({ type: "wallet" } & SignatureData)
   | { type: "discord" }
+export type CreateSessionResponse =
+  | Session
+  | AuthenticationProviderRedirectResponse
 
-export type LinkAccountRequest = CreateSessionRequest
-
-export type CreateAccountRequest = WalletAccountCredentials
-
-export type GetSessionResponse = Session | { nonce: string }
+export type DeleteSessionResponse = { message: string }
 
 export type GetCurrentAccountResponse = Partial<Account> | null
 
 export type GetAccountByMezoIdOrAddressResponse = {
   mezoId?: string
-  linkedAccounts?: LinkedAccount[]
+  linkedAccounts?: Extract<LinkedAccount, { type: "wallet" }>[]
 }
 
-export const API_ENDPOINTS_BY_ENV = {
+export type LinkAccountRequest = CreateSessionRequest
+export type LinkAccountResponse =
+  | Account
+  | AuthenticationProviderRedirectResponse
+
+export type CreateAccountRequest = { type: "wallet" } & SignatureData
+export type CreateAccountResponse = Account
+
+export type UpdateMezoIdResponse = Account
+
+export const AUTH_API_ENDPOINTS_BY_ENV = {
   mainnet: "https://api.mezo.org",
   testnet: "https://api.test.mezo.org",
 }
 
-export class AuthApiClient {
-  private apiUrl: string
-
-  constructor(apiUrl?: string) {
-    this.apiUrl = apiUrl ?? API_ENDPOINTS_BY_ENV.mainnet
-  }
-
-  /**
-   * 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> {
-    const {
-      method,
-      headers,
-      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",
-      headers: {
-        "Content-Type": "application/json",
-        ...headers,
-      },
-      body: body ? JSON.stringify(body) : undefined,
-      ...restOptions,
+export class AuthApiClient extends ApiClient {
+  constructor(
+    environment: keyof typeof AUTH_API_ENDPOINTS_BY_ENV = "mainnet",
+    apiUrl?: string,
+  ) {
+    super({
+      apiUrl: apiUrl ?? AUTH_API_ENDPOINTS_BY_ENV[environment],
     })
-
-    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 Error(`Error [${response.status}]: ${error}`)
-    }
-
-    return data as D
   }
 
   async getSession(code?: string) {
@@ -158,21 +97,16 @@ export class AuthApiClient {
   }
 
   async createSession(createSessionRequest: CreateSessionRequest) {
-    const data = await this.handleRequest<Session | { redirectTo: string }>(
-      "/session",
-      {
-        method: "POST",
-        body: createSessionRequest,
-      },
-    )
+    const data = await this.handleRequest<CreateSessionResponse>("/session", {
+      method: "POST",
+      body: createSessionRequest,
+    })
 
     return data
   }
 
   async deleteSession() {
-    const data = await this.handleRequest<{
-      message: string
-    }>("/session", {
+    const data = await this.handleRequest<DeleteSessionResponse>("/session", {
       method: "DELETE",
     })
 
@@ -191,29 +125,40 @@ export class AuthApiClient {
   }
 
   async getAccountByMezoIdOrAddress(mezoIdOrAddress: string) {
-    const data = await this.handleRequest<GetAccountByMezoIdOrAddressResponse>(
-      `/accounts/${mezoIdOrAddress}`,
-      {
-        method: "GET",
-      },
-    )
+    let data
+    try {
+      data = await this.handleRequest<GetAccountByMezoIdOrAddressResponse>(
+        `/accounts/${mezoIdOrAddress}`,
+        {
+          method: "GET",
+        },
+      )
+    } catch (error) {
+      // Return null if account is not found instead of throwing an error
+      if (error instanceof FetchError && error.status === 404) {
+        data = null
+      } else {
+        throw error
+      }
+    }
 
     return data
   }
 
   async linkAccount(linkAccountRequest: LinkAccountRequest) {
-    const data = await this.handleRequest<
-      Account | AuthenticationProviderRedirectResponse
-    >("/session/account/linked-accounts", {
-      method: "POST",
-      body: linkAccountRequest,
-    })
+    const data = await this.handleRequest<LinkAccountResponse>(
+      "/session/account/linked-accounts",
+      {
+        method: "POST",
+        body: linkAccountRequest,
+      },
+    )
 
     return data
   }
 
   async createAccount(createAccountRequest: CreateAccountRequest) {
-    const data = await this.handleRequest<Account>("/accounts", {
+    const data = await this.handleRequest<CreateAccountResponse>("/accounts", {
       method: "POST",
       body: createAccountRequest,
     })
@@ -222,7 +167,7 @@ export class AuthApiClient {
   }
 
   async updateMezoId(newMezoId: string) {
-    const data = await this.handleRequest<Partial<Account> | null>(
+    const data = await this.handleRequest<UpdateMezoIdResponse>(
       "/session/account",
       {
         method: "PATCH",

package/src/api/client.ts

@@ -0,0 +1,87 @@
+import { FetchError } from "./fetch-error"
+
+type RequestHandlerOptions = Omit<RequestInit, "credentials" | "body"> & {
+  body?: Record<string, unknown>
+  queryParams?: Record<string, string | undefined>
+}
+
+const ENDS_WITH_VERSIONING_REGEX = /\/v\d+(?=\/|$)/
+const TRAILING_SLASH_REGEX = /\/$/
+
+export abstract class ApiClient {
+  private apiUrl: string
+
+  constructor(opts: { apiUrl: string; removeVersioning?: boolean }) {
+    const { apiUrl, removeVersioning = false } = opts
+
+    if (removeVersioning) {
+      this.apiUrl = apiUrl.replace(ENDS_WITH_VERSIONING_REGEX, "")
+      return
+    }
+    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(TRAILING_SLASH_REGEX, "")
+      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,53 @@
+import { ApiClient } from "./client"
+
+type PortalStatistics = {
+  hodlers: number
+  depositedBitcoin: string
+  tvl: number
+  currentUsdPerBtc: string
+  currentUsdPerEth: string
+  currentUsdPerTToken: string
+  usdPerBtc24hChange: string
+}
+
+type PortalMats = {
+  totalMats: number
+  inactiveMats: number
+  matsActivated: boolean
+}
+
+export const PORTAL_API_ENDPOINTS_BY_ENV = {
+  mainnet: "https://api.mezo.org/api/",
+  testnet: "https://api.test.mezo.org/api/",
+}
+
+export class PortalApiClient extends ApiClient {
+  constructor(
+    environment: keyof typeof PORTAL_API_ENDPOINTS_BY_ENV = "mainnet",
+    apiUrl?: string,
+  ) {
+    super({
+      apiUrl: apiUrl ?? PORTAL_API_ENDPOINTS_BY_ENV[environment],
+      removeVersioning: true,
+    })
+  }
+
+  async getPortalStatistics() {
+    const data = await this.handleRequest<PortalStatistics>("/v1/statistics", {
+      method: "GET",
+    })
+
+    return data
+  }
+
+  async getPortalMats(address: string) {
+    const data = await this.handleRequest<PortalMats>(
+      `/v2/account/${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