@mezo-org/passport 0.4.0-dev.9 → 0.5.1-dev.0

package/dist/src/utils/siww.d.ts

@@ -1,4 +1,5 @@
 type NetworkFamily = "evm" | "bitcoin";
 export declare function createSignInWithWalletMessage(address: string, nonce: string, networkFamily: NetworkFamily, chainId?: number): string;
+export declare function verifyDomainInSignInWithWalletMessage(message: string, signature: string, nonce: string): Promise<void>;
 export {};
 //# sourceMappingURL=siww.d.ts.map

package/dist/src/utils/siww.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"siww.d.ts","sourceRoot":"","sources":["../../../src/utils/siww.ts"],"names":[],"mappings":"AAKA,KAAK,aAAa,GAAG,KAAK,GAAG,SAAS,CAAA;AAEtC,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,aAAa,EAC5B,OAAO,CAAC,EAAE,MAAM,UAmBjB"}
+{"version":3,"file":"siww.d.ts","sourceRoot":"","sources":["../../../src/utils/siww.ts"],"names":[],"mappings":"AAQA,KAAK,aAAa,GAAG,KAAK,GAAG,SAAS,CAAA;AAEtC,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,aAAa,EAC5B,OAAO,CAAC,EAAE,MAAM,UAwBjB;AASD,wBAAsB,qCAAqC,CACzD,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,iBAmCd"}

package/dist/src/utils/siww.js

@@ -1,19 +1,57 @@
-import { SignInWithWalletMessage } from "@mezo-org/sign-in-with-wallet";
+import { SignInWithWalletErrorType, SignInWithWalletMessage, } from "@mezo-org/sign-in-with-wallet";
 import { ONE_DAY_MS } from "./time";
 const SESSION_EXPIRATION_DURATION_MS = 14 * ONE_DAY_MS;
 export function createSignInWithWalletMessage(address, nonce, networkFamily, chainId) {
     const { host: domain, origin: uri } = window.location;
-    const message = new SignInWithWalletMessage({
-        domain,
-        address, // if "bitcoin" this should be btc address, not underlaying eth address
-        uri,
+    let siwwMessage;
+    try {
+        siwwMessage = new SignInWithWalletMessage({
+            domain,
+            address, // if "bitcoin" this should be btc address, not underlaying eth address
+            uri,
+            nonce,
+            issuedAt: new Date().toISOString(),
+            expirationTime: new Date(Date.now() + SESSION_EXPIRATION_DURATION_MS).toISOString(),
+            version: "1",
+            chainId: networkFamily === "evm" ? chainId : undefined,
+            networkFamily,
+        });
+    }
+    catch (error) {
+        throw new Error(`Failed to create sign in with wallet message: ${error}`);
+    }
+    return siwwMessage.prepareMessage();
+}
+class SIWWDomainError extends Error {
+    constructor(message) {
+        super(`Error when verifying domain in SIWW message: ${message}`);
+        this.name = "SIWWDomainError";
+    }
+}
+export async function verifyDomainInSignInWithWalletMessage(message, signature, nonce) {
+    const { host: domain } = window.location;
+    let siwwMessage;
+    try {
+        siwwMessage = new SignInWithWalletMessage(message);
+    }
+    catch (error) {
+        throw new SIWWDomainError("Failed to parse SIWW message");
+    }
+    if (!siwwMessage.expirationTime) {
+        throw new SIWWDomainError("SIWW messages must have an expiration time set");
+    }
+    const result = await siwwMessage.verify({
+        signature,
+        // Nonce has to match the session ID carried in the request.
         nonce,
-        issuedAt: new Date().toISOString(),
-        expirationTime: new Date(Date.now() + SESSION_EXPIRATION_DURATION_MS).toISOString(),
-        version: "1",
-        chainId: networkFamily === "evm" ? chainId : undefined,
-        networkFamily,
-    });
-    return message.prepareMessage();
+        domain,
+        // Time is used as a reference to verify the expiration time set in the
+        // message.
+        time: new Date().toISOString(),
+    }, { suppressExceptions: true });
+    if (result.error &&
+        result.error.type === SignInWithWalletErrorType.DOMAIN_MISMATCH) {
+        throw new SIWWDomainError("Domain does not match provided domain for verification.");
+    }
 }
 //# sourceMappingURL=siww.js.map

package/dist/src/utils/siww.js.map

@@ -1 +1 @@
-{"version":3,"file":"siww.js","sourceRoot":"","sources":["../../../src/utils/siww.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEnC,MAAM,8BAA8B,GAAG,EAAE,GAAG,UAAU,CAAA;AAItD,MAAM,UAAU,6BAA6B,CAC3C,OAAe,EACf,KAAa,EACb,aAA4B,EAC5B,OAAgB;IAEhB,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;IAErD,MAAM,OAAO,GAAG,IAAI,uBAAuB,CAAC;QAC1C,MAAM;QACN,OAAO,EAAE,uEAAuE;QAChF,GAAG;QACH,KAAK;QACL,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;QAClC,cAAc,EAAE,IAAI,IAAI,CACtB,IAAI,CAAC,GAAG,EAAE,GAAG,8BAA8B,CAC5C,CAAC,WAAW,EAAE;QACf,OAAO,EAAE,GAAG;QACZ,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACtD,aAAa;KACd,CAAC,CAAA;IAEF,OAAO,OAAO,CAAC,cAAc,EAAE,CAAA;AACjC,CAAC"}
+{"version":3,"file":"siww.js","sourceRoot":"","sources":["../../../src/utils/siww.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEnC,MAAM,8BAA8B,GAAG,EAAE,GAAG,UAAU,CAAA;AAItD,MAAM,UAAU,6BAA6B,CAC3C,OAAe,EACf,KAAa,EACb,aAA4B,EAC5B,OAAgB;IAEhB,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;IAErD,IAAI,WAAW,CAAA;IACf,IAAI,CAAC;QACH,WAAW,GAAG,IAAI,uBAAuB,CAAC;YACxC,MAAM;YACN,OAAO,EAAE,uEAAuE;YAChF,GAAG;YACH,KAAK;YACL,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;YAClC,cAAc,EAAE,IAAI,IAAI,CACtB,IAAI,CAAC,GAAG,EAAE,GAAG,8BAA8B,CAC5C,CAAC,WAAW,EAAE;YACf,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YACtD,aAAa;SACd,CAAC,CAAA;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,iDAAiD,KAAK,EAAE,CAAC,CAAA;IAC3E,CAAC;IAED,OAAO,WAAW,CAAC,cAAc,EAAE,CAAA;AACrC,CAAC;AAED,MAAM,eAAgB,SAAQ,KAAK;IACjC,YAAY,OAAe;QACzB,KAAK,CAAC,gDAAgD,OAAO,EAAE,CAAC,CAAA;QAChE,IAAI,CAAC,IAAI,GAAG,iBAAiB,CAAA;IAC/B,CAAC;CACF;AAED,MAAM,CAAC,KAAK,UAAU,qCAAqC,CACzD,OAAe,EACf,SAAiB,EACjB,KAAa;IAEb,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;IACxC,IAAI,WAAoC,CAAA;IACxC,IAAI,CAAC;QACH,WAAW,GAAG,IAAI,uBAAuB,CAAC,OAAO,CAAC,CAAA;IACpD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,eAAe,CAAC,8BAA8B,CAAC,CAAA;IAC3D,CAAC;IAED,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;QAChC,MAAM,IAAI,eAAe,CAAC,gDAAgD,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,MAAM,CACrC;QACE,SAAS;QACT,4DAA4D;QAC5D,KAAK;QACL,MAAM;QACN,uEAAuE;QACvE,WAAW;QACX,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;KAC/B,EACD,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAC7B,CAAA;IAED,IACE,MAAM,CAAC,KAAK;QACZ,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,yBAAyB,CAAC,eAAe,EAC/D,CAAC;QACD,MAAM,IAAI,eAAe,CACvB,yDAAyD,CAC1D,CAAA;IACH,CAAC;AACH,CAAC"}

package/dist/src/utils/wagmi.d.ts

@@ -0,0 +1,3 @@
+import { Connector } from "wagmi";
+export declare function getBitcoinPublicKeyFromConnector(connector: Connector): Promise<string | undefined>;
+//# sourceMappingURL=wagmi.d.ts.map

package/dist/src/utils/wagmi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wagmi.d.ts","sourceRoot":"","sources":["../../../src/utils/wagmi.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,wBAAsB,gCAAgC,CAAC,SAAS,EAAE,SAAS,+BAQ1E"}

package/dist/src/utils/wagmi.js

@@ -0,0 +1,7 @@
+export async function getBitcoinPublicKeyFromConnector(connector) {
+    if (connector.type !== "orangekit")
+        return undefined;
+    const provider = connector.getBitcoinProvider();
+    return provider.getPublicKey();
+}
+//# sourceMappingURL=wagmi.js.map

package/dist/src/utils/wagmi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wagmi.js","sourceRoot":"","sources":["../../../src/utils/wagmi.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,KAAK,UAAU,gCAAgC,CAAC,SAAoB;IACzE,IAAI,SAAS,CAAC,IAAI,KAAK,WAAW;QAAE,OAAO,SAAS,CAAA;IAEpD,MAAM,QAAQ,GACZ,SACD,CAAC,kBAAkB,EAAE,CAAA;IAEtB,OAAO,QAAQ,CAAC,YAAY,EAAE,CAAA;AAChC,CAAC"}

package/dist/src/wallet/index.d.ts

@@ -1,2 +1,2 @@
-export { getOKXWallet, getUnisatWallet, getXverseWallet, BitcoinWalletConnectionError, WalletNetworkDoesNotMatchProviderChainError, isUnsupportedBitcoinAddressError, isWalletNetworkDoesNotMatchProviderChainError, } from "@mezo-org/orangekit";
+export { BitcoinWalletConnectionError, getOKXWallet, getUnisatWallet, getXverseWallet, isUnsupportedBitcoinAddressError, isWalletNetworkDoesNotMatchProviderChainError, OrangeKitConnector, WalletNetworkDoesNotMatchProviderChainError, } from "@mezo-org/orangekit";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/wallet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wallet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,EACf,4BAA4B,EAC5B,2CAA2C,EAC3C,gCAAgC,EAChC,6CAA6C,GAC9C,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wallet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,YAAY,EACZ,eAAe,EACf,eAAe,EACf,gCAAgC,EAChC,6CAA6C,EAC7C,kBAAkB,EAClB,2CAA2C,GAC5C,MAAM,qBAAqB,CAAA"}

package/dist/src/wallet/index.js

@@ -1,2 +1,2 @@
-export { getOKXWallet, getUnisatWallet, getXverseWallet, BitcoinWalletConnectionError, WalletNetworkDoesNotMatchProviderChainError, isUnsupportedBitcoinAddressError, isWalletNetworkDoesNotMatchProviderChainError, } from "@mezo-org/orangekit";
+export { BitcoinWalletConnectionError, getOKXWallet, getUnisatWallet, getXverseWallet, isUnsupportedBitcoinAddressError, isWalletNetworkDoesNotMatchProviderChainError, WalletNetworkDoesNotMatchProviderChainError, } from "@mezo-org/orangekit";
 //# sourceMappingURL=index.js.map

package/dist/src/wallet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wallet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,EACf,4BAA4B,EAC5B,2CAA2C,EAC3C,gCAAgC,EAChC,6CAA6C,GAC9C,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wallet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,YAAY,EACZ,eAAe,EACf,eAAe,EACf,gCAAgC,EAChC,6CAA6C,EAE7C,2CAA2C,GAC5C,MAAM,qBAAqB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.4.0-dev.9",
+  "version": "0.5.1-dev.0",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {
@@ -28,8 +28,6 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.64",
-    "@types/ungap__structured-clone": "^1.2.0",
-    "@ungap/structured-clone": "^1.3.0",
     "eslint": "^8.57.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -39,16 +37,21 @@
     "typescript": "^5.4.3"
   },
   "dependencies": {
-    "@mezo-org/mezo-clay": "0.1.0-dev.18",
-    "@mezo-org/orangekit": "1.0.0-beta.40-dev.0",
-    "@mezo-org/sign-in-with-wallet": "1.0.0-beta.8"
+    "@mezo-org/mezo-clay": "0.1.0-dev.30",
+    "@mezo-org/mezod-contracts": "^1.0.0",
+    "@mezo-org/musd-contracts": "^1.0.1",
+    "@mezo-org/orangekit": "1.0.0-beta.40-dev.19",
+    "@mezo-org/sign-in-with-wallet": "1.0.0-beta.8",
+    "qrcode.react": "^4.2.0",
+    "styletron-engine-monolithic": "^1.0.0",
+    "usehooks-ts": "^3.1.1",
+    "motion": "^12.23.6",
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "@rainbow-me/rainbowkit": "2.0.2",
     "@tanstack/react-query": "^5.28.4",
     "react": "^18.2.0",
-    "styletron-engine-monolithic": "^1.0.0",
-    "usehooks-ts": "^3.1.1",
     "viem": "2.22.8",
     "wagmi": "2.5.12"
   }

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,35 @@
-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"
-
-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
+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 TestnetTopBanner from "./TestnetTopBanner"
+
+type ContentProps = {
   onSignOut?: () => void
+  onOtherAssetsClick?: () => void
 }
 
-export default function DropdownContent(props: DropdownContentProps) {
-  const { data, onSignOut } = props
-
-  const [, theme] = useStyletron()
+function Content(props: ContentProps) {
+  const { onSignOut, onOtherAssetsClick } = props
 
-  const {
-    mezoId,
-    address,
-    walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
-  } = data
+  const [_, theme] = useStyletron()
 
-  const { disconnect } = useDisconnect()
-  const { signOut } = useSignOut()
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
 
-  const handleLogOut = useCallback(() => {
-    if (onSignOut) {
-      onSignOut()
-      return
-    }
-
-    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 +39,15 @@ 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} />
+      <TestnetTopBanner />
 
-        <AccountBalance amount={totalBalanceInUsd} />
-
-        <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 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 />}
     </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>