@mezo-org/passport 0.4.0-dev.2 → 0.4.0-dev.20

package/src/api/auth.ts

@@ -1,152 +1,110 @@
-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
 }
 
+export type LinkedProviderAccount = {
+  type: AuthProvider
+  name: string
+  id: string
+  avatarUrl: string
+}
+
+export type LinkedAccount = LinkedWalletAccount | LinkedProviderAccount
+
 type Account = {
-  app_metadata: {
-    provider: PassportIdentityProvider
-    providers: PassportIdentityProvider[]
-  }
-  user_metadata: AccountPublicData
+  mezoId: string
+  hasModifiedMezoId: boolean
+  linkedAccounts: LinkedAccount[]
 }
 
-type Session = {
-  access_token: string
-  token_type: string
-  expires_in: number
-  expires_at: number
-  refresh_token: string
-  user: Account
+export type Session = {
+  expiresIn: number
+  expiresAt: number
+  sessionLinks: {
+    _links: {
+      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 DeleteSessionResponse = { message: string }
 
-export type CreateAccountRequest = WalletAccountCredentials
+export type GetCurrentAccountResponse = Partial<Account> | null
 
-export const API_ENDPOINTS_BY_ENV = {
-  mainnet: "https://api.mezo.org",
-  testnet: "https://api.test.mezo.org",
+export type GetAccountByMezoIdOrAddressResponse = {
+  mezoId?: string
+  linkedAccounts?: Extract<LinkedAccount, { type: "wallet" }>[]
 }
 
-const DEFAULT_API_ENDPOINT = API_ENDPOINTS_BY_ENV.mainnet
-
-export class AuthApiClient {
-  private apiUrl: string
-
-  constructor(apiUrl?: string) {
-    this.apiUrl = apiUrl ?? DEFAULT_API_ENDPOINT
-  }
-
-  /**
-   * 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
-   * @param endpoint - The API endpoint to request. Should start with
-   * forward slash ("/")
-   * @param {RequestHandlerOptions<B>} 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!))
-
-    try {
-      const response = await fetch(url, {
-        method,
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-          ...headers,
-        },
-        body: body ? JSON.stringify(body) : undefined,
-        ...restOptions,
-      })
+export type LinkAccountRequest = CreateSessionRequest
+export type LinkAccountResponse =
+  | Account
+  | AuthenticationProviderRedirectResponse
 
-      const data = await response.json()
+export type CreateAccountRequest = { type: "wallet" } & SignatureData
+export type CreateAccountResponse = Account
 
-      if (!response.ok || data?.error) {
-        const error = data?.error || "An error occurred"
-        throw new Error(error)
-      }
+export type UpdateMezoIdResponse = Account
 
-      return data as D
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "An error occurred"
+export const AUTH_API_ENDPOINTS_BY_ENV = {
+  mainnet: "https://api.mezo.org",
+  testnet: "https://api.test.mezo.org",
+}
 
-      throw new Error(errorMessage)
-    }
+export class AuthApiClient extends ApiClient {
+  constructor(
+    environment: keyof typeof AUTH_API_ENDPOINTS_BY_ENV = "mainnet",
+    apiUrl?: string,
+  ) {
+    super(apiUrl ?? AUTH_API_ENDPOINTS_BY_ENV[environment])
   }
 
   async getSession(code?: string) {
-    const data = await this.handleRequest<Session | { nonce: string }>(
-      "/session",
-      {
-        method: "GET",
-        queryParams: { code },
-      },
-    )
+    const data = await this.handleRequest<GetSessionResponse>("/session", {
+      method: "GET",
+      queryParams: { code },
+    })
 
     return data
   }
 
   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",
     })
 
@@ -154,37 +112,51 @@ export class AuthApiClient {
   }
 
   async getCurrentAccount() {
-    const data = await this.handleRequest<Account>("/session/account", {
-      method: "GET",
-    })
+    const data = await this.handleRequest<GetCurrentAccountResponse>(
+      "/session/account",
+      {
+        method: "GET",
+      },
+    )
 
     return data
   }
 
   async getAccountByMezoIdOrAddress(mezoIdOrAddress: string) {
-    const data = await this.handleRequest<AccountPublicData>(
-      `/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,
     })
@@ -193,10 +165,13 @@ export class AuthApiClient {
   }
 
   async updateMezoId(newMezoId: string) {
-    const data = await this.handleRequest<Account>("/session/account", {
-      method: "PATCH",
-      body: { newMezoId },
-    })
+    const data = await this.handleRequest<UpdateMezoIdResponse>(
+      "/session/account",
+      {
+        method: "PATCH",
+        body: { mezoId: newMezoId },
+      },
+    )
 
     return data
   }

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,56 @@
+import { ApiClient } from "./client"
+
+type PortalStatistics = {
+  hodlers: number
+  depositedBitcoin: string
+  tvl: number
+  currentUsdPerBtc: string
+  currentUsdPerEth: 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,62 @@
+import { Block, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useEffect } from "react"
+import { DropdownData } from "../../hooks/useDropdownData"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+import Root from "./Root/Root"
+import Receive from "./Receive/Receive"
+
+type ContentProps = {
+  data: DropdownData
+  onSignOut?: () => void
+}
+
+function Content(props: ContentProps) {
+  const { data, onSignOut } = 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",
+          },
+        },
+      }}
+    >
+      {currentView === DropdownView.ROOT && (
+        <Root
+          mezoId={data.mezoId}
+          accountAddress={data.accountAddress}
+          walletAddress={data.walletAddress}
+          walletType={data.walletType}
+          totalBalanceInUsd={data.totalBalanceInUsd}
+          formattedNativeAssets={data.formattedNativeAssets}
+          matsnet={data.matsnet}
+          onSignOut={onSignOut}
+        />
+      )}
+
+      {currentView === DropdownView.RECEIVE && (
+        <Receive address={data.accountAddress} />
+      )}
+    </Block>
+  )
+}
+
+export default Content