@mezo-org/passport 0.4.0-dev.8 → 0.4.0-dev.81

package/src/api/auth.ts

@@ -38,7 +38,7 @@ export type AuthenticationProviderRedirectResponse = {
   redirectTo: string
 }
 
-type SignatureData = {
+export type SignatureData = {
   message: string
   signature: string
 }
@@ -62,12 +62,14 @@ export type GetAccountByMezoIdOrAddressResponse = {
   linkedAccounts?: Extract<LinkedAccount, { type: "wallet" }>[]
 }
 
-export type LinkAccountRequest = CreateSessionRequest
+export type LinkAccountRequest = CreateAccountRequest | { type: "discord" }
 export type LinkAccountResponse =
   | Account
   | AuthenticationProviderRedirectResponse
 
-export type CreateAccountRequest = { type: "wallet" } & SignatureData
+export type CreateAccountRequest = { type: "wallet" } & SignatureData & {
+    bitcoinPublicKey?: string
+  }
 export type CreateAccountResponse = Account
 
 export type UpdateMezoIdResponse = Account
@@ -82,7 +84,9 @@ export class AuthApiClient extends ApiClient {
     environment: keyof typeof AUTH_API_ENDPOINTS_BY_ENV = "mainnet",
     apiUrl?: string,
   ) {
-    super(apiUrl ?? AUTH_API_ENDPOINTS_BY_ENV[environment])
+    super({
+      apiUrl: apiUrl ?? AUTH_API_ENDPOINTS_BY_ENV[environment],
+    })
   }
 
   async getSession(code?: string) {

package/src/api/client.ts

@@ -5,10 +5,19 @@ type RequestHandlerOptions = Omit<RequestInit, "credentials" | "body"> & {
   queryParams?: Record<string, string | undefined>
 }
 
+const ENDS_WITH_VERSIONING_REGEX = /\/v\d+(?=\/|$)/
+const TRAILING_SLASH_REGEX = /\/$/
+
 export abstract class ApiClient {
   private apiUrl: string
 
-  constructor(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
   }
 
@@ -33,7 +42,7 @@ export abstract class ApiClient {
       const { method, body, queryParams = {}, ...restOptions } = options
 
       // If last character in apiUrl is forward slash we are removing it
-      const authApiUrlRoute = this.apiUrl.replace(/\/$/, "")
+      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

package/src/api/portal.ts

@@ -6,25 +6,19 @@ type PortalStatistics = {
   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
+  inactiveMats: number
+  matsActivated: boolean
 }
 
 export const PORTAL_API_ENDPOINTS_BY_ENV = {
-  mainnet: "https://api.mezo.org/api/v1",
-  testnet: "https://api.test.mezo.org/api/v1",
+  mainnet: "https://api.mezo.org/api/",
+  testnet: "https://api.test.mezo.org/api/",
 }
 
 export class PortalApiClient extends ApiClient {
@@ -32,11 +26,14 @@ export class PortalApiClient extends ApiClient {
     environment: keyof typeof PORTAL_API_ENDPOINTS_BY_ENV = "mainnet",
     apiUrl?: string,
   ) {
-    super(apiUrl ?? PORTAL_API_ENDPOINTS_BY_ENV[environment])
+    super({
+      apiUrl: apiUrl ?? PORTAL_API_ENDPOINTS_BY_ENV[environment],
+      removeVersioning: true,
+    })
   }
 
   async getPortalStatistics() {
-    const data = await this.handleRequest<PortalStatistics>("/statistics", {
+    const data = await this.handleRequest<PortalStatistics>("/v1/statistics", {
       method: "GET",
     })
 
@@ -45,7 +42,7 @@ export class PortalApiClient extends ApiClient {
 
   async getPortalMats(address: string) {
     const data = await this.handleRequest<PortalMats>(
-      `/accounts/${address}/mats`,
+      `/v2/account/${address}/mats`,
       {
         method: "GET",
       },

package/src/components/Dropdown/ConnectedTrigger.tsx

@@ -1,54 +1,74 @@
-import { Block, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
-import React, { forwardRef, ReactNode } from "react"
+import { Block, Button, ButtonProps, useStyletron } from "@mezo-org/mezo-clay"
+import React, { forwardRef, ReactNode, useMemo } from "react"
 
-type ConnectedTriggerProps = Omit<ButtonProps, "children"> & {
+type ConnectedTriggerProps = Omit<ButtonProps, "children" | "size"> & {
   avatar: ReactNode
+  size?: "medium" | "large"
 }
 
 const ConnectedTrigger = forwardRef<HTMLButtonElement, ConnectedTriggerProps>(
   (props, ref) => {
-    const { onClick, avatar, ...restProps } = props
+    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 (
-      <Block
-        as="button"
+      <Button
         overrides={{
-          Block: {
+          BaseButton: {
             props: { ref, ...restProps },
             style: {
-              border: "none",
-              background: "none",
-              padding: 0,
-              margin: 0,
-              cursor: "pointer",
+              borderRadius: "100%",
+              overflow: "hidden",
+              padding: buttonPadding,
             },
           },
         }}
         onClick={onClick}
       >
-        <Block
-          width={theme.sizing.scale950}
-          height={theme.sizing.scale950}
-          overrides={{
-            Block: {
-              style: {
-                borderRadius: "100%",
-                border: `2px solid ${theme.colors.contentPrimary}`,
-                boxSizing: "border-box",
-                overflow: "hidden",
+        {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",
+                },
               },
-            },
-          }}
-        >
-          {typeof avatar === "string" ? (
-            <Block as="img" src={avatar} alt="" />
-          ) : (
-            avatar
-          )}
-        </Block>
-      </Block>
+            }}
+          >
+            {avatar}
+          </Block>
+        )}
+      </Button>
     )
   },
 )

package/src/components/Dropdown/Content.tsx

@@ -1,78 +1,64 @@
-import {
-  Block,
-  Button,
-  LogOut01,
-  Mats,
-  ParagraphSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import React, { useCallback } from "react"
-import { useDisconnect } from "wagmi"
-import { useSignOut } from "../../hooks"
-import { DropdownData } from "../../hooks/useDropdownData"
-import AccountAddress from "./AccountAddress"
-import AccountAssets from "./AccountAssets"
-import AccountBalance from "./AccountBalance"
-import WelcomeBlock from "./WelcomeBlock"
+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"
 
-function MatsnetLabel() {
-  const [, theme] = useStyletron()
-  return (
-    <ParagraphSmall color={theme.colors.contentTertiary}>
-      <Mats
-        color="currentColor"
-        size={theme.sizing.scale400}
-        overrides={{
-          Svg: {
-            style: {
-              marginRight: theme.sizing.scale300,
-            },
-          },
-        }}
-      />
-      Matsnet Assets
-    </ParagraphSmall>
-  )
-}
-
-type DropdownContentProps = {
-  data: DropdownData
+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
 }
 
-export default function DropdownContent(props: DropdownContentProps) {
-  const { data, onSignOut } = props
-
-  const [, theme] = useStyletron()
-
+function Content(props: ContentProps) {
   const {
     mezoId,
-    address,
+    accountAddress,
+    walletAddress,
     walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
-  } = data
+    usdTotalBalance,
+    assets,
+    matsBalance,
+    usdTroveDebt,
+    usdCollateral,
+    otherAssetsCount,
+    otherAssetsUsdTotal,
+    onSignOut,
+    onOtherAssetsClick,
+  } = props
 
-  const { disconnect } = useDisconnect()
-  const { signOut } = useSignOut()
+  const [_, theme] = useStyletron()
 
-  const handleLogOut = useCallback(() => {
-    if (onSignOut) {
-      onSignOut()
-      return
-    }
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
 
-    signOut()
-    disconnect()
-  }, [signOut, disconnect, onSignOut])
+  useEffect(
+    () => () => {
+      setView(DropdownView.ROOT)
+    },
+    [setView],
+  )
 
   return (
     <Block
       display="inline-flex"
       flexDirection="column"
       backgroundColor={theme.colors.backgroundPrimary}
-      padding={theme.sizing.scale500}
       width="100%"
       overrides={{
         Block: {
@@ -82,67 +68,31 @@ export default function DropdownContent(props: DropdownContentProps) {
         },
       }}
     >
-      <WelcomeBlock mezoId={mezoId} matsBalance={matsnet.mats} />
-
-      <Block
-        display="flex"
-        flexDirection="column"
-        backgroundColor={theme.colors.backgroundSecondary}
-        overflow="hidden"
-        overrides={{
-          Block: { style: { borderRadius: theme.borders.radius300 } },
-        }}
-      >
-        <AccountAddress address={address} type={walletType} />
-
-        <AccountBalance amount={totalBalanceInUsd} />
+      <TestnetTopBanner />
 
-        <AccountAssets label="Assets" assets={formattedNativeAssets} />
-      </Block>
-
-      {matsnet.formattedAssets.length > 0 && (
-        <Block
-          marginTop={theme.sizing.scale600}
-          backgroundColor={theme.colors.backgroundSecondary}
-          overflow="hidden"
-          overrides={{
-            Block: { style: { borderRadius: theme.borders.radius300 } },
-          }}
-        >
-          <AccountAssets
-            label={<MatsnetLabel />}
-            assets={matsnet.formattedAssets}
-          />
-        </Block>
+      {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}
+        />
       )}
 
-      <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>
+      {currentView === DropdownView.RECEIVE && (
+        <Receive address={accountAddress} />
+      )}
     </Block>
   )
 }
+
+export default Content

package/src/components/Dropdown/DisconnectedTrigger.tsx

@@ -20,12 +20,13 @@ const DisconnectedTrigger = forwardRef<
       }
       overrides={{
         Root: {
-          props: { ref, ...restProps },
+          props: { ref },
         },
       }}
       size="small"
       shape="pill"
       onClick={onClick}
+      {...restProps}
     >
       {children}
     </Button>

package/src/components/Dropdown/Dropdown.tsx

@@ -1,28 +1,37 @@
 import {
+  ButtonProps,
   StatefulPopover,
   StatefulPopoverProps,
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
-import React from "react"
+import React, { useEffect, useMemo } from "react"
+import { useDisconnect } from "wagmi"
 import DefaultAvatar from "../../assets/DefaultAvatar"
-import useDropdownData, {
-  DropdownCryptoAsset,
-} from "../../hooks/useDropdownData"
 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 set of EVM native assets to be displayed in the dropdown */
-  evmNativeAssets?: DropdownCryptoAsset<"tbtc" | "wbtc">[]
-  /** The set of Matsnet assets to be displayed in the dropdown */
-  matsnetAssets?: DropdownCryptoAsset<"mbtc" | "musd">[]
+  /** 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">
 
 /**
@@ -36,26 +45,58 @@ export function Dropdown(props: DropdownProps) {
     animateOutTime = 120,
     onSignIn,
     onSignOut,
-    evmNativeAssets,
-    matsnetAssets,
     overrides,
+    triggerProps,
+    onOtherAssetsClick,
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
     ...restProps
   } = props
 
   const [, theme] = useStyletron()
 
-  const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets })
+  const data = useDropdownData({
+    accountDataRefetchInterval,
+    nativeBalanceRefetchInterval,
+  })
+
+  const isCriticalDropdownDataLoaded = useMemo(
+    () => Boolean(data.mezoId && data.accountAddress && data.walletAddress),
+    [data],
+  )
 
   const { openConnectModal } = useConnectModal()
 
   const { isConnected } = useWalletAccount()
 
-  if (!dropdownData || !isConnected) {
+  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>
@@ -64,7 +105,23 @@ export function Dropdown(props: DropdownProps) {
 
   return (
     <StatefulPopover
-      content={<Content data={dropdownData} onSignOut={onSignOut} />}
+      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={{
@@ -72,7 +129,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            minWidth: "378px",
+            width: "396px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",
@@ -82,7 +139,10 @@ export function Dropdown(props: DropdownProps) {
       }}
       {...restProps}
     >
-      <ConnectedTrigger avatar={<DefaultAvatar />} />
+      <ConnectedTrigger
+        avatar={<DefaultAvatar />}
+        {...triggerProps?.signedIn}
+      />
     </StatefulPopover>
   )
 }