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

package/src/api/auth.ts

@@ -1,151 +1,88 @@
-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 = {
-  mainnet: "https://api.mezo.org",
-  testnet: "https://api.test.mezo.org",
-}
+export type LinkAccountRequest = CreateSessionRequest
+export type LinkAccountResponse =
+  | Account
+  | AuthenticationProviderRedirectResponse
 
-export class AuthApiClient {
-  private apiUrl: string
+export type CreateAccountRequest = { type: "wallet" } & SignatureData
+export type CreateAccountResponse = Account
 
-  constructor(apiUrl?: string) {
-    this.apiUrl = apiUrl ?? API_ENDPOINTS_BY_ENV.mainnet
-  }
+export type UpdateMezoIdResponse = Account
 
-  /**
-   * 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,
-    })
-
-    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}`)
-    }
+export const AUTH_API_ENDPOINTS_BY_ENV = {
+  mainnet: "https://api.mezo.org",
+  testnet: "https://api.test.mezo.org",
+}
 
-    return data as D
+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) {
@@ -158,21 +95,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 +123,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 +165,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,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/AccountAddress.tsx

@@ -0,0 +1,111 @@
+import {
+  Block,
+  Copy03 as CopyIcon,
+  LinkExternal02 as LinkIcon,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React 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()
+
+  return (
+    <Block
+      as="button"
+      onClick={() => copy(address)}
+      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} />
+      <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>
+  )
+}