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

package/dist/src/stores/dropdownStore.d.ts

@@ -0,0 +1,12 @@
+export declare enum DropdownView {
+    ROOT = "ROOT",
+    RECEIVE = "RECEIVE"
+}
+interface DropdownStore {
+    view: DropdownView;
+    setView: (view: DropdownView) => void;
+    isNestedView: () => boolean;
+}
+declare const useDropdownStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DropdownStore>>;
+export default useDropdownStore;
+//# sourceMappingURL=dropdownStore.d.ts.map

package/dist/src/stores/dropdownStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownStore.d.ts","sourceRoot":"","sources":["../../../src/stores/dropdownStore.ts"],"names":[],"mappings":"AAEA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACrC,YAAY,EAAE,MAAM,OAAO,CAAA;CAC5B;AAED,QAAA,MAAM,gBAAgB,4EAInB,CAAA;AAEH,eAAe,gBAAgB,CAAA"}

package/dist/src/stores/dropdownStore.js

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+export var DropdownView;
+(function (DropdownView) {
+    DropdownView["ROOT"] = "ROOT";
+    DropdownView["RECEIVE"] = "RECEIVE";
+})(DropdownView || (DropdownView = {}));
+const useDropdownStore = create((set, get) => ({
+    view: DropdownView.ROOT,
+    setView: (view) => set({ view }),
+    isNestedView: () => get().view !== DropdownView.ROOT,
+}));
+export default useDropdownStore;
+//# sourceMappingURL=dropdownStore.js.map

package/dist/src/stores/dropdownStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownStore.js","sourceRoot":"","sources":["../../../src/stores/dropdownStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,mCAAmB,CAAA;AACrB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAQD,MAAM,gBAAgB,GAAG,MAAM,CAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;IAC5D,IAAI,EAAE,YAAY,CAAC,IAAI;IACvB,OAAO,EAAE,CAAC,IAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC;IAC9C,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;CACrD,CAAC,CAAC,CAAA;AAEH,eAAe,gBAAgB,CAAA"}

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

@@ -11,5 +11,5 @@ export declare function trimAddress(address: string): string;
  * @param isTestnet - Whether the address is on testnet.
  * @returns The URL of the block explorer page for the address.
  */
-export declare function getAddressExplorerUrl(address: string, chainType: "bitcoin" | "evm", isTestnet: boolean): string;
+export declare function getAddressExplorerUrl(address: string, chainType: "bitcoin" | "evm" | "mezo", isTestnet: boolean): string;
 //# sourceMappingURL=address.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../../../src/utils/address.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMnD;AAYD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,SAAS,GAAG,KAAK,EAC5B,SAAS,EAAE,OAAO,UASnB"}
+{"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../../../src/utils/address.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMnD;AAcD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,EACrC,SAAS,EAAE,OAAO,UASnB"}

package/dist/src/utils/address.js

@@ -12,10 +12,12 @@ export function trimAddress(address) {
 const MAINNET_EXPLORER_URLS = {
     bitcoin: "https://mempool.space",
     evm: "https://etherscan.io",
+    mezo: "https://explorer.mezo.org",
 };
 const TESTNET_EXPLORER_URLS = {
     bitcoin: "https://mempool.space/testnet",
     evm: "https://sepolia.etherscan.io",
+    mezo: "https://explorer.test.mezo.org",
 };
 /**
  * Get the URL of the block explorer page for an address.

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

@@ -1 +1 @@
-{"version":3,"file":"address.js","sourceRoot":"","sources":["../../../src/utils/address.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAAe;IACzC,IAAI,OAAO,CAAC,MAAM,GAAG,EAAE;QAAE,OAAO,OAAO,CAAA;IAEvC,MAAM,cAAc,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtE,OAAO,cAAc,CAAA;AACvB,CAAC;AAED,MAAM,qBAAqB,GAAsC;IAC/D,OAAO,EAAE,uBAAuB;IAChC,GAAG,EAAE,sBAAsB;CAC5B,CAAA;AAED,MAAM,qBAAqB,GAAsC;IAC/D,OAAO,EAAE,+BAA+B;IACxC,GAAG,EAAE,8BAA8B;CACpC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,OAAe,EACf,SAA4B,EAC5B,SAAkB;IAElB,MAAM,aAAa,GAAG,SAAS;QAC7B,CAAC,CAAC,qBAAqB;QACvB,CAAC,CAAC,qBAAqB,CAAA;IACzB,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,OAAO,EAAE,CAAA;IAErC,OAAO,GAAG,OAAO,IAAI,QAAQ,EAAE,CAAA;AACjC,CAAC"}
+{"version":3,"file":"address.js","sourceRoot":"","sources":["../../../src/utils/address.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAAe;IACzC,IAAI,OAAO,CAAC,MAAM,GAAG,EAAE;QAAE,OAAO,OAAO,CAAA;IAEvC,MAAM,cAAc,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtE,OAAO,cAAc,CAAA;AACvB,CAAC;AAED,MAAM,qBAAqB,GAA+C;IACxE,OAAO,EAAE,uBAAuB;IAChC,GAAG,EAAE,sBAAsB;IAC3B,IAAI,EAAE,2BAA2B;CAClC,CAAA;AAED,MAAM,qBAAqB,GAA+C;IACxE,OAAO,EAAE,+BAA+B;IACxC,GAAG,EAAE,8BAA8B;IACnC,IAAI,EAAE,gCAAgC;CACvC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,OAAe,EACf,SAAqC,EACrC,SAAkB;IAElB,MAAM,aAAa,GAAG,SAAS;QAC7B,CAAC,CAAC,qBAAqB;QACvB,CAAC,CAAC,qBAAqB,CAAA;IACzB,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,WAAW,OAAO,EAAE,CAAA;IAErC,OAAO,GAAG,OAAO,IAAI,QAAQ,EAAE,CAAA;AACjC,CAAC"}

package/dist/src/utils/address.test.js

@@ -28,5 +28,13 @@ describe("getAddressExplorerUrl", () => {
         const url = getAddressExplorerUrl(evmAddress, "evm", true);
         expect(url).toBe(`https://sepolia.etherscan.io/address/${evmAddress}`);
     });
+    it("returns correct mainnet Mezo explorer URL", () => {
+        const url = getAddressExplorerUrl(evmAddress, "mezo", false);
+        expect(url).toBe(`https://explorer.mezo.org/address/${evmAddress}`);
+    });
+    it("returns correct testnet Mezo explorer URL", () => {
+        const url = getAddressExplorerUrl(evmAddress, "mezo", true);
+        expect(url).toBe(`https://explorer.test.mezo.org/address/${evmAddress}`);
+    });
 });
 //# sourceMappingURL=address.test.js.map

package/dist/src/utils/address.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"address.test.js","sourceRoot":"","sources":["../../../src/utils/address.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE9D,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,KAAK,GAAG,mBAAmB,CAAA;QACjC,MAAM,QAAQ,GAAG,eAAe,CAAA;QAChC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,MAAM,UAAU,GAAG,YAAY,CAAA;IAC/B,MAAM,UAAU,GAAG,oBAAoB,CAAA;IAEvC,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QAC/D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,iCAAiC,UAAU,EAAE,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;QAC9D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,yCAAyC,UAAU,EAAE,CAAC,CAAA;IACzE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;QAC3D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,gCAAgC,UAAU,EAAE,CAAC,CAAA;IAChE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;QAC1D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,wCAAwC,UAAU,EAAE,CAAC,CAAA;IACxE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"address.test.js","sourceRoot":"","sources":["../../../src/utils/address.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE9D,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,KAAK,GAAG,mBAAmB,CAAA;QACjC,MAAM,QAAQ,GAAG,eAAe,CAAA;QAChC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,MAAM,UAAU,GAAG,YAAY,CAAA;IAC/B,MAAM,UAAU,GAAG,oBAAoB,CAAA;IAEvC,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QAC/D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,iCAAiC,UAAU,EAAE,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;QAC9D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,yCAAyC,UAAU,EAAE,CAAC,CAAA;IACzE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;QAC3D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,gCAAgC,UAAU,EAAE,CAAC,CAAA;IAChE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;QAC1D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,wCAAwC,UAAU,EAAE,CAAC,CAAA;IACxE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,CAAA;QAC5D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,qCAAqC,UAAU,EAAE,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,GAAG,GAAG,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;QAC3D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,0CAA0C,UAAU,EAAE,CAAC,CAAA;IAC1E,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.4.0-dev.19",
+  "version": "0.4.0-dev.20",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {
@@ -39,7 +39,9 @@
   "dependencies": {
     "@mezo-org/mezo-clay": "0.1.0-dev.26",
     "@mezo-org/orangekit": "1.0.0-beta.40-dev.1",
-    "@mezo-org/sign-in-with-wallet": "1.0.0-beta.8"
+    "@mezo-org/sign-in-with-wallet": "1.0.0-beta.8",
+    "qrcode.react": "^4.2.0",
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "@rainbow-me/rainbowkit": "2.0.2",

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 { Block, useStyletron } from "@mezo-org/mezo-clay"
+import React, { useEffect } from "react"
 import { DropdownData } from "../../hooks/useDropdownData"
-import AccountAddress from "./AccountAddress"
-import AccountAssets from "./AccountAssets"
-import AccountBalance from "./AccountBalance"
-import WelcomeBlock from "./WelcomeBlock"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+import Root from "./Root/Root"
+import Receive from "./Receive/Receive"
 
-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 = {
+type ContentProps = {
   data: DropdownData
   onSignOut?: () => void
 }
 
-export default function DropdownContent(props: DropdownContentProps) {
+function Content(props: ContentProps) {
   const { data, onSignOut } = props
 
-  const [, theme] = useStyletron()
-
-  const {
-    mezoId,
-    address,
-    walletType,
-    totalBalanceInUsd,
-    formattedNativeAssets,
-    matsnet,
-  } = data
-
-  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 +39,24 @@ 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} />
-
-        <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={data.mezoId}
+          accountAddress={data.accountAddress}
+          walletAddress={data.walletAddress}
+          walletType={data.walletType}
+          totalBalanceInUsd={data.totalBalanceInUsd}
+          formattedNativeAssets={data.formattedNativeAssets}
+          matsnet={data.matsnet}
+          onSignOut={onSignOut}
+        />
       )}
 
-      <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={data.accountAddress} />
+      )}
     </Block>
   )
 }
+
+export default Content

package/src/components/Dropdown/Dropdown.tsx

@@ -105,7 +105,7 @@ export function Dropdown(props: DropdownProps) {
         Body: {
           ...overrides?.Body,
           style: {
-            minWidth: "396px",
+            width: "396px",
             borderRadius: theme.borders.radius500,
             boxShadow: theme.lighting.shadow500,
             overflow: "hidden",

package/src/components/Dropdown/NestedViewLayout.tsx

@@ -0,0 +1,75 @@
+import {
+  ArrowLeft,
+  Block,
+  ButtonIcon,
+  LabelMedium,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { ReactNode, useCallback } from "react"
+import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
+
+const getHeaderTitle = (view: DropdownView) => {
+  const titleMap: Partial<Record<DropdownView, string>> = {
+    [DropdownView.RECEIVE]: "Receive",
+  }
+  return titleMap[view]!
+}
+
+type NestedViewLayoutProps = {
+  children: ReactNode
+}
+
+function NestedViewLayout(props: NestedViewLayoutProps) {
+  const { children, ...restProps } = props
+
+  const currentView = useDropdownStore((state) => state.view)
+  const setView = useDropdownStore((state) => state.setView)
+  const isNested = useDropdownStore((state) => state.isNestedView())
+
+  const [, theme] = useStyletron()
+
+  const handleOnButtonClick = useCallback(() => {
+    setView(DropdownView.ROOT)
+  }, [setView])
+
+  return (
+    <Block
+      display="flex"
+      flexDirection="column"
+      minHeight="588px"
+      padding={theme.sizing.scale700}
+      paddingTop={0}
+      {...restProps}
+    >
+      <Block
+        display="flex"
+        alignItems="center"
+        paddingTop={theme.sizing.scale600}
+        paddingBottom={theme.sizing.scale600}
+        marginBottom={theme.sizing.scale300}
+      >
+        <ButtonIcon
+          onClick={handleOnButtonClick}
+          shape="circle"
+          size="small"
+          overrides={{
+            BaseButton: {
+              style: {
+                background: theme.colors.backgroundPrimary,
+                marginRight: isNested ? theme.sizing.scale300 : undefined,
+              },
+            },
+          }}
+        >
+          <ArrowLeft size={theme.sizing.scale700} />
+        </ButtonIcon>
+
+        <LabelMedium>{getHeaderTitle(currentView)}</LabelMedium>
+      </Block>
+
+      {children}
+    </Block>
+  )
+}
+
+export default NestedViewLayout

package/src/components/Dropdown/Receive/Receive.tsx

@@ -0,0 +1,119 @@
+import {
+  Block,
+  Button,
+  LabelMedium,
+  MonoLabelXSmall,
+  ParagraphSmall,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback, useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+import { QRCodeSVG } from "qrcode.react"
+import NestedViewLayout from "../NestedViewLayout"
+import { getAddressExplorerUrl } from "../../../utils/address"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import useWalletAccount from "../../../hooks/useWalletAccount"
+
+type ReceiveProps = {
+  address: string
+}
+
+function Receive(props: ReceiveProps) {
+  const { address } = props
+
+  const { environment } = usePassportContext()
+
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const [, theme] = useStyletron()
+
+  const [, copy] = useCopyToClipboard()
+  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)
+  const handleCopyAddress = useCallback(() => {
+    copy(address)
+    setIsCopiedMessageVisible(true)
+
+    setTimeout(() => {
+      setIsCopiedMessageVisible(false)
+    }, 2000)
+  }, [copy, address])
+
+  const { networkFamily } = useWalletAccount()
+
+  return (
+    <NestedViewLayout>
+      <LabelMedium>Receive assets on Mezo</LabelMedium>
+
+      <ParagraphSmall
+        marginTop={theme.sizing.scale300}
+        marginBottom={theme.sizing.scale600}
+        color={theme.colors.contentTertiary}
+      >
+        {networkFamily === "bitcoin" ? (
+          <>
+            Mezo automatically created a smart account that&apos;s fully
+            controlled by your connected Bitcoin wallet. Use this address to
+            receive assets on Mezo.
+          </>
+        ) : (
+          <>
+            Your connected wallet address is your Mezo address. Use this address
+            to receive assets on Mezo.
+          </>
+        )}
+      </ParagraphSmall>
+
+      <Block
+        as={QRCodeSVG}
+        value={address}
+        flex={1}
+        overrides={{
+          Block: {
+            style: {
+              aspectRatio: 1,
+              width: "fit-content",
+              margin: "0 auto",
+            },
+          },
+        }}
+      />
+
+      <MonoLabelXSmall
+        marginTop={theme.sizing.scale800}
+        marginBottom={theme.sizing.scale800}
+        overrides={{
+          Block: {
+            style: {
+              textAlign: "center",
+            },
+          },
+        }}
+      >
+        {address}
+      </MonoLabelXSmall>
+
+      <Button
+        onClick={handleCopyAddress}
+        overrides={{
+          BaseButton: {
+            style: {
+              marginBottom: theme.sizing.scale400,
+            },
+          },
+        }}
+      >
+        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo Address"}
+      </Button>
+
+      <Button kind="secondary" $as="a" href={blockExplorerUrl} target="_blank">
+        View Explorer
+      </Button>
+    </NestedViewLayout>
+  )
+}
+
+export default Receive

package/src/components/Dropdown/Root/AccountAddressActions.tsx

@@ -0,0 +1,101 @@
+import {
+  ArrowNarrowLeft,
+  Block,
+  Button,
+  ButtonProps,
+  Cube01,
+  useStyletron,
+} from "@mezo-org/mezo-clay"
+import React, { useCallback } from "react"
+import { usePassportContext } from "../../../hooks/usePassportContext"
+import { getAddressExplorerUrl } from "../../../utils/address"
+import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
+
+type AccountAddressActionsProps = {
+  address: string
+}
+
+const buttonStartEnhancerSize = 12
+
+const commonButtonProps: Partial<ButtonProps> = {
+  kind: "secondary",
+  size: "xsmall",
+  overrides: {
+    BaseButton: {
+      style: {
+        flex: 1,
+      },
+    },
+    StartEnhancer: {
+      style: {
+        stroke: "currentColor",
+      },
+    },
+  },
+}
+
+export default function AccountAddressActions(
+  props: AccountAddressActionsProps,
+) {
+  const { address } = props
+
+  const [, theme] = useStyletron()
+
+  const { environment } = usePassportContext()
+  const blockExplorerUrl = getAddressExplorerUrl(
+    address,
+    "mezo",
+    environment === "testnet",
+  )
+
+  const setDropdownView = useDropdownStore((state) => state.setView)
+
+  const handleReceiveClick = useCallback(() => {
+    setDropdownView(DropdownView.RECEIVE)
+  }, [setDropdownView])
+
+  return (
+    <Block
+      display="flex"
+      alignItems="center"
+      backgroundColor="transparent"
+      marginBottom={theme.sizing.scale600}
+      overrides={{
+        Block: {
+          style: {
+            gap: theme.sizing.scale600,
+          },
+        },
+      }}
+    >
+      <Button
+        startEnhancer={<Cube01 size={buttonStartEnhancerSize} />}
+        $as="a"
+        href={blockExplorerUrl}
+        target="_blank"
+        {...commonButtonProps}
+      >
+        View Mezo Explorer
+      </Button>
+
+      <Button
+        onClick={handleReceiveClick}
+        startEnhancer={
+          <ArrowNarrowLeft
+            size={buttonStartEnhancerSize}
+            overrides={{
+              Svg: {
+                style: {
+                  transform: "rotate(-45deg)",
+                },
+              },
+            }}
+          />
+        }
+        {...commonButtonProps}
+      >
+        Receive
+      </Button>
+    </Block>
+  )
+}

package/src/components/Dropdown/{AccountAssets.tsx → Root/AccountAssets.tsx}

@@ -5,7 +5,7 @@ import {
   useStyletron,
 } from "@mezo-org/mezo-clay"
 import React, { useMemo } from "react"
-import { CryptoAssetKey, getCryptoAsset } from "../../utils/cryptoAssets"
+import { CryptoAssetKey, getCryptoAsset } from "../../../utils/cryptoAssets"
 
 type AccountAssetsProps = {
   label: string | React.ReactNode