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

package/README.md

@@ -96,12 +96,12 @@ Mezo Passport provides a `getConfig` method, which returns a default
 configuration for Mezo Matsnet. We just have to pass it further to
 `WagmiProvider`:
 
-```
+```tsx
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { WagmiProvider } from "wagmi"
 import "@rainbow-me/rainbowkit/styles.css"
-import { getConfig, mezoMatsnetTestnet } from "@mezo-org/passport"
+import { getConfig, mezoTestnet } from "@mezo-org/passport"
 
 const queryClient = new QueryClient()
 
@@ -109,7 +109,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <WagmiProvider config={getConfig({ appName: "Your app name" })}>
       <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider initialChain={mezoMatsnetTestnet}>
+        <RainbowKitProvider initialChain={mezoTestnet}>
           {/* Your App component */}
         </RainbowKitProvider>
       </QueryClientProvider>
@@ -127,7 +127,7 @@ support. By default, the lib supports Unisat, OKX and Xverse wallets. If you
 want to include Unisat wallet only, you can pass it through `bitcoinWallet`
 property to `getConfig` function:
 
-```
+```tsx
 import { getConfig, unisatWallet } from "@mezo-org/passport"
 
 const customBitcoinWallets = [
@@ -169,11 +169,8 @@ There are two ways to connect the Mezo Passport wallet:
 
 We can connect to the specific wallet directly through `wagmi`:
 
-```
-import {
-  useChainId,
-  useConnect,
-} from "wagmi"
+```tsx
+import { useChainId, useConnect } from "wagmi"
 
 export const YourApp = () => {
   const chainId = useChainId()
@@ -194,8 +191,7 @@ export const YourApp = () => {
       ))}
     </div>
   )
-
-};
+}
 ```
 
 This will render a button for each wallet that we've added to the rainbowKit
@@ -208,12 +204,12 @@ We can also implement wallet connection through RainbowKit, where we import the
 `ConnectButton` component, which will handle the connection process under the
 hood:
 
-```
+```tsx
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 
 export const YourApp = () => {
-  return <ConnectButton label="Connect wallet"/>;
-};
+  return <ConnectButton label="Connect wallet" />
+}
 ```
 
 ### Getting addresses and wallet balances
@@ -224,7 +220,7 @@ For bitcoin account Mezo Passport exports a helper hook -
 `useBitcoinAccount()` - which can be used to obtain address and balance of the
 connected bitcoin account:
 
-```
+```ts
 import { useBitcoinAccount } from "@mezo-org/passport"
 
 const { btcAddress, btcBalance } = useBitcoinAccount()
@@ -237,7 +233,7 @@ useEffect(() => {
 
 This hook returns the bitcoin balance in satoshis, in the following format:
 
-```
+```ts
 {
   confirmed: number,
   unconfirmed: number,
@@ -250,7 +246,7 @@ This hook returns the bitcoin balance in satoshis, in the following format:
 To get an address and a balance of the underlying Mezo Matsnet account, we can
 use `wagmi` hooks:
 
-```
+```ts
 const { address } = useAccount()
 const { data } = useBalance({ address })
 
@@ -265,14 +261,14 @@ useEffect(() => {
 The Mezo Passport wallets supports message signing from `wagmi` lib, so signing
 functions the same way as it does in `wagmi`:
 
-```
-import { useSignMessage } from 'wagmi'
+```tsx
+import { useSignMessage } from "wagmi"
 
 function App() {
   const { signMessage } = useSignMessage()
 
   return (
-    <button onClick={() => signMessage({ message: 'hello world' })}>
+    <button onClick={() => signMessage({ message: "hello world" })}>
       Sign message
     </button>
   )
@@ -286,7 +282,7 @@ Contracts integrations are handled the same way as in RainbowKit and Wagmi.
 To send a specific Mezo Matsnet transaction from the underlying Mezo Matsnet
 account, we can use a `useSendTransaction` hook from `@mezo-org/passport`:
 
-```
+```ts
 import { useSendTransaction } from "@mezo-org/passport"
 
 const { sendTransaction } = useSendTransaction()
@@ -314,7 +310,7 @@ With `@mezo-org/passport` it's also possible to send BTC transactions from your
 original Bitcoin account (not the underlying Mezo Matsnet account). For that, we
 can use `useSendBitcoin` hook:
 
-```
+```ts
 import { useSendBitcoin } from "@mezo-org/passport"
 
 const { sendBitcoin } = useSendBitcoin()

package/dist/src/api/portal.d.ts

@@ -5,6 +5,7 @@ type PortalStatistics = {
     tvl: number;
     currentUsdPerBtc: string;
     currentUsdPerEth: string;
+    currentUsdPerTToken: string;
     usdPerBtc24hChange: string;
 };
 type PortalMats = {

package/dist/src/api/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/api/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,gBAAgB,EAAE,MAAM,CAAA;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,CAAA;IACzB,0BAA0B,EAAE,MAAM,CAAA;IAClC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,+BAA+B,EAAE,MAAM,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,2BAA2B;;;CAGvC,CAAA;AAED,qBAAa,eAAgB,SAAQ,SAAS;gBAE1C,WAAW,GAAE,MAAM,OAAO,2BAAuC,EACjE,MAAM,CAAC,EAAE,MAAM;IAKX,mBAAmB;IAQnB,aAAa,CAAC,OAAO,EAAE,MAAM;CAUpC"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../src/api/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,gBAAgB,EAAE,MAAM,CAAA;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,CAAA;IACzB,0BAA0B,EAAE,MAAM,CAAA;IAClC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,+BAA+B,EAAE,MAAM,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,2BAA2B;;;CAGvC,CAAA;AAED,qBAAa,eAAgB,SAAQ,SAAS;gBAE1C,WAAW,GAAE,MAAM,OAAO,2BAAuC,EACjE,MAAM,CAAC,EAAE,MAAM;IAKX,mBAAmB;IAQnB,aAAa,CAAC,OAAO,EAAE,MAAM;CAUpC"}

package/dist/src/api/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/api/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAwBpC,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,kCAAkC;CAC5C,CAAA;AAED,MAAM,OAAO,eAAgB,SAAQ,SAAS;IAC5C,YACE,cAAwD,SAAS,EACjE,MAAe;QAEf,KAAK,CAAC,MAAM,IAAI,2BAA2B,CAAC,WAAW,CAAC,CAAC,CAAA;IAC3D,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAmB,aAAa,EAAE;YACrE,MAAM,EAAE,KAAK;SACd,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,OAAe;QACjC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CACnC,aAAa,OAAO,OAAO,EAC3B;YACE,MAAM,EAAE,KAAK;SACd,CACF,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC;CACF"}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/api/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAyBpC,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,kCAAkC;CAC5C,CAAA;AAED,MAAM,OAAO,eAAgB,SAAQ,SAAS;IAC5C,YACE,cAAwD,SAAS,EACjE,MAAe;QAEf,KAAK,CAAC,MAAM,IAAI,2BAA2B,CAAC,WAAW,CAAC,CAAC,CAAA;IAC3D,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAmB,aAAa,EAAE;YACrE,MAAM,EAAE,KAAK;SACd,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,OAAe;QACjC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CACnC,aAAa,OAAO,OAAO,EAC3B;YACE,MAAM,EAAE,KAAK;SACd,CACF,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC;CACF"}

package/dist/src/components/Dropdown/Content.d.ts

@@ -1,8 +1,22 @@
 import React from "react";
-import { DropdownData } from "../../hooks/useDropdownData";
+import { DetailedCryptoAsset } from "../../utils/cryptoAssets";
 type ContentProps = {
-    data: DropdownData;
+    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;
 };
 declare function Content(props: ContentProps): React.JSX.Element;
 export default Content;

package/dist/src/components/Dropdown/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAK1D,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,YAAY,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBA+CnC;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAIxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,SAAS,GAAG,KAAK,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE;QACN,GAAG,EAAE,mBAAmB,CAAA;QACxB,IAAI,EAAE,mBAAmB,CAAA;KAC1B,CAAA;IACD,gBAAgB,EAAE,MAAM,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,CAAA;AAED,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAoEnC;AAED,eAAe,OAAO,CAAA"}

package/dist/src/components/Dropdown/Content.js

@@ -3,8 +3,9 @@ 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";
 function Content(props) {
-    const { data, onSignOut } = props;
+    const { mezoId, accountAddress, walletAddress, walletType, usdTotalBalance, assets, matsBalance, usdTroveDebt, usdCollateral, otherAssetsCount, otherAssetsUsdTotal, onSignOut, onOtherAssetsClick, } = props;
     const [_, theme] = useStyletron();
     const currentView = useDropdownStore((state) => state.view);
     const setView = useDropdownStore((state) => state.setView);
@@ -18,8 +19,9 @@ function Content(props) {
                 },
             },
         } },
-        currentView === DropdownView.ROOT && (React.createElement(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 && (React.createElement(Receive, { address: data.accountAddress }))));
+        React.createElement(TestnetTopBanner, null),
+        currentView === DropdownView.ROOT && (React.createElement(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 })),
+        currentView === DropdownView.RECEIVE && (React.createElement(Receive, { address: accountAddress }))));
 }
 export default Content;
 //# sourceMappingURL=Content.js.map

package/dist/src/components/Dropdown/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,gBAAgB,EAAE,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,OAAO,MAAM,mBAAmB,CAAA;AAOvC,SAAS,OAAO,CAAC,KAAmB;IAClC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAEjC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEjC,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAC3D,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAE1D,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAC,aAAa,EACrB,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB,EAC/C,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,SAAS,EAAE,YAAY;iBACxB;aACF;SACF;QAEA,WAAW,KAAK,YAAY,CAAC,IAAI,IAAI,CACpC,oBAAC,IAAI,IACH,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,SAAS,GACpB,CACH;QAEA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACvC,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAI,CAC1C,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,gBAAgB,EAAE,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,OAAO,MAAM,mBAAmB,CAAA;AAEvC,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AAqBjD,SAAS,OAAO,CAAC,KAAmB;IAClC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,aAAa,EACb,UAAU,EACV,eAAe,EACf,MAAM,EACN,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,EACT,kBAAkB,GACnB,GAAG,KAAK,CAAA;IAET,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEjC,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAC3D,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAE1D,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAC,aAAa,EACrB,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB,EAC/C,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,SAAS,EAAE,YAAY;iBACxB;aACF;SACF;QAED,oBAAC,gBAAgB,OAAG;QAEnB,WAAW,KAAK,YAAY,CAAC,IAAI,IAAI,CACpC,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,GACtC,CACH;QAEA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACvC,oBAAC,OAAO,IAAC,OAAO,EAAE,cAAc,GAAI,CACrC,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,OAAO,CAAA"}

package/dist/src/components/Dropdown/Dropdown.d.ts

@@ -1,15 +1,10 @@
 import { ButtonProps, StatefulPopoverProps } from "@mezo-org/mezo-clay";
 import React from "react";
-import { DropdownCryptoAsset } 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"> & {
@@ -17,6 +12,7 @@ export type DropdownProps = {
         };
         signedOut?: Omit<ButtonProps, "onClick">;
     };
+    onOtherAssetsClick?: () => void;
 } & Omit<StatefulPopoverProps, "children" | "content">;
 /**
  * Passport Dropdown component that displays user's wallet and assets information.

package/dist/src/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,oBAAoB,EAErB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAwB,EACtB,mBAAmB,EACpB,MAAM,6BAA6B,CAAA;AAOpC,MAAM,MAAM,aAAa,GAAG;IAC1B,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mEAAmE;IACnE,eAAe,CAAC,EAAE,mBAAmB,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACxD,gEAAgE;IAChE,aAAa,CAAC,EAAE,mBAAmB,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACtD,mDAAmD;IACnD,YAAY,CAAC,EAAE;QACb,QAAQ,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;YACjD,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;SACzB,CAAA;QACD,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;KACzC,CAAA;CACF,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAEtD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAiF5C"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,oBAAoB,EAErB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,KAA6B,MAAM,OAAO,CAAA;AAUjD,MAAM,MAAM,aAAa,GAAG;IAC1B,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mDAAmD;IACnD,YAAY,CAAC,EAAE;QACb,QAAQ,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;YACjD,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;SACzB,CAAA;QACD,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;KACzC,CAAA;IACD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAEtD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAqG5C"}

package/dist/src/components/Dropdown/Dropdown.js

@@ -1,23 +1,24 @@
 import { StatefulPopover, useStyletron, } from "@mezo-org/mezo-clay";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useDisconnect } from "wagmi";
 import DefaultAvatar from "../../assets/DefaultAvatar";
-import useDropdownData 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";
 /**
  * Passport Dropdown component that displays user's wallet and assets information.
  * @param {DropdownProps} props - Component props.
  * @returns {JSX.Element}
  */
 export function Dropdown(props) {
-    const { placement = "bottomRight", animateOutTime = 120, onSignIn, onSignOut, evmNativeAssets, matsnetAssets, overrides, triggerProps, ...restProps } = props;
+    const { placement = "bottomRight", animateOutTime = 120, onSignIn, onSignOut, overrides, triggerProps, onOtherAssetsClick, ...restProps } = props;
     const [, theme] = useStyletron();
-    const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets });
+    const data = useDropdownData();
+    const isCriticalDropdownDataLoaded = useMemo(() => Boolean(data.mezoId && data.accountAddress && data.walletAddress), [data]);
     const { openConnectModal } = useConnectModal();
     const { isConnected } = useWalletAccount();
     const { signInWithWalletAsync, isPending } = useSignInWithWallet();
@@ -37,7 +38,7 @@ export function Dropdown(props) {
         };
         handleSignIn();
     }, [disconnectAsync, isConnected, onSignIn, signInWithWalletAsync]);
-    if (!dropdownData || !isConnected) {
+    if (!isConnected || !isCriticalDropdownDataLoaded) {
         return (React.createElement(DisconnectedTrigger
         // If connect wallet flow is not provided it fallbacks to RainbowKit's
         // connect modal
@@ -46,7 +47,7 @@ export function Dropdown(props) {
             // connect modal
             onClick: onSignIn || openConnectModal, isLoading: isPending, ...triggerProps?.signedOut }, "Sign in"));
     }
-    return (React.createElement(StatefulPopover, { content: React.createElement(Content, { data: dropdownData, onSignOut: onSignOut }), placement: placement, animateOutTime: animateOutTime, overrides: {
+    return (React.createElement(StatefulPopover, { content: React.createElement(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: {
             ...overrides,
             Body: {
                 ...overrides?.Body,

package/dist/src/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Dropdown/ListingItem.d.ts

@@ -0,0 +1,13 @@
+import { IconProps, ListItemProps } from "@mezo-org/mezo-clay";
+import React, { FC } from "react";
+type ListingItemProps = {
+    icon?: FC<IconProps>;
+    label: string;
+    subLabel?: string;
+    value: string;
+    subValue?: string;
+    overrides?: ListItemProps["overrides"];
+};
+export default function ListingItem(props: ListingItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ListingItem.d.ts.map

package/dist/src/components/Dropdown/ListingItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/ListingItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,aAAa,EACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAUjC,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAoD1D"}

package/dist/src/components/Dropdown/ListingItem.js

@@ -0,0 +1,34 @@
+import { ListItem, ListItemLabel, mergeOverrides, } from "@mezo-org/mezo-clay";
+import React from "react";
+const SHARED_LABEL_OVERRIDES = {
+    LabelDescription: {
+        style: {
+            color: "#4B4B4B", // contentSecondary
+        },
+    },
+};
+export default function ListingItem(props) {
+    const { icon: Icon, label, subLabel = "", value, subValue = "", overrides, } = props;
+    return (React.createElement(ListItem, { artwork: Icon, 
+        // eslint-disable-next-line react/no-unstable-nested-components
+        endEnhancer: () => (React.createElement(ListItemLabel, { description: subValue, overrides: mergeOverrides({
+                LabelRoot: {
+                    style: {
+                        textAlign: "right",
+                    },
+                },
+            }, SHARED_LABEL_OVERRIDES) }, value)), overrides: mergeOverrides({
+            Root: {
+                style: {
+                    backgroundColor: "transparent",
+                },
+            },
+            Content: {
+                style: {
+                    border: 0,
+                },
+            },
+        }, overrides) },
+        React.createElement(ListItemLabel, { description: subLabel, overrides: SHARED_LABEL_OVERRIDES }, label)));
+}
+//# sourceMappingURL=ListingItem.js.map

package/dist/src/components/Dropdown/ListingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingItem.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/ListingItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,MAAM,sBAAsB,GAAoC;IAC9D,gBAAgB,EAAE;QAChB,KAAK,EAAE;YACL,KAAK,EAAE,SAAS,EAAE,mBAAmB;SACtC;KACF;CACF,CAAA;AAWD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAuB;IACzD,MAAM,EACJ,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,QAAQ,GAAG,EAAE,EACb,SAAS,GACV,GAAG,KAAK,CAAA;IAET,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,IAAI;QACb,+DAA+D;QAC/D,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,oBAAC,aAAa,IACZ,WAAW,EAAE,QAAQ,EACrB,SAAS,EAAE,cAAc,CACvB;gBACE,SAAS,EAAE;oBACT,KAAK,EAAE;wBACL,SAAS,EAAE,OAAO;qBACnB;iBACF;aACF,EACD,sBAAsB,CACvB,IAEA,KAAK,CACQ,CACjB,EACD,SAAS,EAAE,cAAc,CACvB;YACE,IAAI,EAAE;gBACJ,KAAK,EAAE;oBACL,eAAe,EAAE,aAAa;iBAC/B;aACF;YACD,OAAO,EAAE;gBACP,KAAK,EAAE;oBACL,MAAM,EAAE,CAAC;iBACV;aACF;SACF,EACD,SAAS,CACV;QAED,oBAAC,aAAa,IAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB,IACpE,KAAK,CACQ,CACP,CACZ,CAAA;AACH,CAAC"}

package/dist/src/components/Dropdown/Root/AccountAssetItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CryptoAssetKey } from "../../../utils/cryptoAssets";
+type AccountAssetItemProps = {
+    type: CryptoAssetKey;
+    amount: string;
+    subLabel: string;
+    subValue: string;
+};
+export default function AccountAssetItem(props: AccountAssetItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AccountAssetItem.d.ts.map

package/dist/src/components/Dropdown/Root/AccountAssetItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAssetItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountAssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAkB,MAAM,6BAA6B,CAAA;AAG5E,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,cAAc,CAAA;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAcpE"}

package/dist/src/components/Dropdown/Root/AccountAssetItem.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { getCryptoAsset } from "../../../utils/cryptoAssets";
+import ListingItem from "../ListingItem";
+export default function AccountAssetItem(props) {
+    const { type, amount, subLabel, subValue } = props;
+    const { icon: Icon, name: label } = getCryptoAsset(type);
+    return (React.createElement(ListingItem, { icon: Icon, label: label, subLabel: subLabel, value: amount, subValue: subValue }));
+}
+//# sourceMappingURL=AccountAssetItem.js.map

package/dist/src/components/Dropdown/Root/AccountAssetItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAssetItem.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountAssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,WAAW,MAAM,gBAAgB,CAAA;AASxC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAElD,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAExD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;AACH,CAAC"}

package/dist/src/components/Dropdown/Root/AccountBalance.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type AccountBalanceProps = {
-    amount: string;
+    totalBalance: string;
+    totalDebt: string;
 };
 export default function AccountBalance(props: AccountBalanceProps): React.JSX.Element;
 export {};

package/dist/src/components/Dropdown/Root/AccountBalance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountBalance.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBalance.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAsBhE"}
+{"version":3,"file":"AccountBalance.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,mBAAmB,GAAG;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoBhE"}

package/dist/src/components/Dropdown/Root/AccountBalance.js

@@ -1,16 +1,15 @@
-import { Block, HeadingSmall, ParagraphSmall, useStyletron, } from "@mezo-org/mezo-clay";
 import React from "react";
+import { useStyletron } from "@mezo-org/mezo-clay";
+import ListingItem from "../ListingItem";
 export default function AccountBalance(props) {
-    const { amount } = props;
+    const { totalBalance, totalDebt } = props;
     const [, theme] = useStyletron();
-    return (React.createElement(Block, { padding: theme.sizing.scale500, overrides: {
-            Block: {
+    return (React.createElement(ListingItem, { label: "Total assets", value: totalBalance, subLabel: "Total liabilities", subValue: totalDebt, overrides: {
+            Root: {
                 style: {
-                    borderBottom: `1px solid ${theme.colors.backgroundPrimary}`,
+                    borderBottom: `1px solid ${theme.colors.borderInverseSelected}`,
                 },
             },
-        } },
-        React.createElement(ParagraphSmall, { margin: 0, color: theme.colors.gray800 }, "Available balance"),
-        React.createElement(HeadingSmall, { margin: 0 }, amount)));
+        } }));
 }
 //# sourceMappingURL=AccountBalance.js.map

package/dist/src/components/Dropdown/Root/AccountBalance.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountBalance.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAC9B,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,YAAY,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,iBAAiB,EAAE;iBAC5D;aACF;SACF;QAED,oBAAC,cAAc,IAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,wBAErC;QACjB,oBAAC,YAAY,IAAC,MAAM,EAAE,CAAC,IAAG,MAAM,CAAgB,CAC1C,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"AccountBalance.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAOxC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAEzC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,WAAW,IACV,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAC,mBAAmB,EAC5B,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,KAAK,EAAE;oBACL,YAAY,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE;iBAChE;aACF;SACF,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/src/components/Dropdown/Root/AccountOtherAssets.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type AccountOtherAssetsProps = {
+    assetsCount: number;
+    assetsUsdTotal: number;
+    onClick?: () => void;
+};
+export default function AccountOtherAssets(props: AccountOtherAssetsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AccountOtherAssets.d.ts.map

package/dist/src/components/Dropdown/Root/AccountOtherAssets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOtherAssets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountOtherAssets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,KAAK,uBAAuB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmDxE"}

package/dist/src/components/Dropdown/Root/AccountOtherAssets.js

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { Block, useStyletron } from "@mezo-org/mezo-clay";
+import ListingItem from "../ListingItem";
+import { formatUsd } from "../../../utils/currency";
+export default function AccountOtherAssets(props) {
+    const { assetsCount, assetsUsdTotal, onClick } = props;
+    const [, theme] = useStyletron();
+    const label = useMemo(() => {
+        if (assetsCount === 0)
+            return "No other assets";
+        if (assetsCount === 1)
+            return "1 more asset";
+        return `${assetsCount} more assets`;
+    }, [assetsCount]);
+    const formattedAssetsUsdTotal = formatUsd(assetsUsdTotal);
+    return (React.createElement(Block, { "aria-label": label, as: "li", overrides: {
+            Block: {
+                style: {
+                    listStyle: "none",
+                    borderTop: `1px solid ${theme.colors.borderInverseSelected}`,
+                },
+            },
+        } },
+        React.createElement(ListingItem
+        // TODO: Implement icon in Clay
+        , { 
+            // TODO: Implement icon in Clay
+            label: label, value: formattedAssetsUsdTotal, overrides: {
+                Root: {
+                    props: {
+                        $as: "button",
+                        onClick,
+                    },
+                    style: {
+                        border: 0,
+                        padding: 0,
+                        cursor: "pointer",
+                    },
+                },
+                Content: {
+                    style: {
+                        minHeight: theme.sizing.scale1200,
+                    },
+                },
+            } })));
+}
+//# sourceMappingURL=AccountOtherAssets.js.map

package/dist/src/components/Dropdown/Root/AccountOtherAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOtherAssets.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountOtherAssets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAQnD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAA8B;IACvE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAEtD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,IAAI,WAAW,KAAK,CAAC;YAAE,OAAO,iBAAiB,CAAA;QAC/C,IAAI,WAAW,KAAK,CAAC;YAAE,OAAO,cAAc,CAAA;QAC5C,OAAO,GAAG,WAAW,cAAc,CAAA;IACrC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;IAEzD,OAAO,CACL,oBAAC,KAAK,kBACQ,KAAK,EACjB,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,SAAS,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE;iBAC7D;aACF;SACF;QAED,oBAAC,WAAW;QACV,+BAA+B;;YAA/B,+BAA+B;YAC/B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,uBAAuB,EAC9B,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,GAAG,EAAE,QAAQ;wBACb,OAAO;qBACR;oBACD,KAAK,EAAE;wBACL,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,CAAC;wBACV,MAAM,EAAE,SAAS;qBAClB;iBACF;gBACD,OAAO,EAAE;oBACP,KAAK,EAAE;wBACL,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;qBAClC;iBACF;aACF,GACD,CACI,CACT,CAAA;AACH,CAAC"}

package/dist/src/components/Dropdown/Root/Root.d.ts

@@ -1,7 +1,22 @@
 import React from "react";
-import { DropdownData } from "../../../hooks/useDropdownData";
-type RootProps = DropdownData & {
+import { DetailedCryptoAsset } from "../../../utils/cryptoAssets";
+type RootProps = {
+    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 Root(props: RootProps): React.JSX.Element;
 export {};

package/dist/src/components/Dropdown/Root/Root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/Root.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AA2B7D,KAAK,SAAS,GAAG,YAAY,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,qBAkG5C"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/Root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAKjE,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,SAAS,GAAG,KAAK,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE;QACN,GAAG,EAAE,mBAAmB,CAAA;QACxB,IAAI,EAAE,mBAAmB,CAAA;KAC1B,CAAA;IACD,gBAAgB,EAAE,MAAM,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,qBAiH5C"}

package/dist/src/components/Dropdown/Root/Root.js

@@ -1,26 +1,17 @@
-import { Block, Button, LogOut01, Mats, ParagraphSmall, useStyletron, } from "@mezo-org/mezo-clay";
+import { Block, Button, LogOut01, useStyletron } from "@mezo-org/mezo-clay";
 import React, { useCallback } from "react";
 import { useDisconnect } from "wagmi";
 import { useSignOut } from "../../../hooks";
 import WalletAddress from "./WalletAddress";
-import AccountAssets from "./AccountAssets";
 import AccountBalance from "./AccountBalance";
 import WelcomeBlock from "./WelcomeBlock";
 import AccountAddressActions from "./AccountAddressActions";
-function MatsnetLabel() {
-    const [, theme] = useStyletron();
-    return (React.createElement(ParagraphSmall, { color: theme.colors.contentTertiary },
-        React.createElement(Mats, { color: "currentColor", size: theme.sizing.scale400, overrides: {
-                Svg: {
-                    style: {
-                        marginRight: theme.sizing.scale300,
-                    },
-                },
-            } }),
-        "Matsnet Assets"));
-}
+import AccountAssetItem from "./AccountAssetItem";
+import { formatNumberToCompactString } from "../../../utils/numbers";
+import { formatUsd } from "../../../utils/currency";
+import AccountOtherAssets from "./AccountOtherAssets";
 export default function Root(props) {
-    const { mezoId, walletAddress, accountAddress, walletType, totalBalanceInUsd, formattedNativeAssets, matsnet, onSignOut, } = props;
+    const { mezoId, walletAddress, accountAddress, walletType, usdTotalBalance, usdTroveDebt, usdCollateral, matsBalance, assets, otherAssetsCount, otherAssetsUsdTotal, onSignOut, onOtherAssetsClick, } = props;
     const [, theme] = useStyletron();
     const { disconnect } = useDisconnect();
     const { signOut } = useSignOut();
@@ -32,19 +23,21 @@ export default function Root(props) {
         signOut();
         disconnect();
     }, [signOut, disconnect, onSignOut]);
+    const formattedMatsBalance = formatNumberToCompactString(matsBalance, 2);
+    const formattedUsdTotalBalance = formatUsd(usdTotalBalance);
+    const formattedUsdTroveDebt = formatUsd(usdTroveDebt);
+    const formattedUsdCollateral = formatUsd(usdCollateral);
     return (React.createElement(Block, { display: "inline-flex", flexDirection: "column", padding: theme.sizing.scale600 },
-        React.createElement(WelcomeBlock, { mezoId: mezoId, matsBalance: matsnet.mats }),
+        React.createElement(WelcomeBlock, { mezoId: mezoId, matsBalance: formattedMatsBalance }),
         React.createElement(AccountAddressActions, { address: accountAddress }),
         React.createElement(Block, { display: "flex", flexDirection: "column", backgroundColor: theme.colors.backgroundSecondary, overflow: "hidden", overrides: {
                 Block: { style: { borderRadius: theme.borders.radius300 } },
             } },
             React.createElement(WalletAddress, { address: walletAddress, type: walletType }),
-            React.createElement(AccountBalance, { amount: totalBalanceInUsd }),
-            React.createElement(AccountAssets, { label: "Assets", assets: formattedNativeAssets })),
-        matsnet.formattedAssets.length > 0 && (React.createElement(Block, { marginTop: theme.sizing.scale600, backgroundColor: theme.colors.backgroundSecondary, overflow: "hidden", overrides: {
-                Block: { style: { borderRadius: theme.borders.radius300 } },
-            } },
-            React.createElement(AccountAssets, { label: React.createElement(MatsnetLabel, null), assets: matsnet.formattedAssets }))),
+            React.createElement(AccountBalance, { totalBalance: formattedUsdTotalBalance, totalDebt: formattedUsdTroveDebt }),
+            React.createElement(AccountAssetItem, { type: "BTC", amount: assets.btc.formattedUsdBalance, subLabel: "Locked collateral", subValue: formattedUsdCollateral }),
+            React.createElement(AccountAssetItem, { type: "MUSD", amount: assets.musd.formattedUsdBalance, subLabel: "Borrowed", subValue: formattedUsdTroveDebt }),
+            React.createElement(AccountOtherAssets, { assetsCount: otherAssetsCount, assetsUsdTotal: otherAssetsUsdTotal, onClick: onOtherAssetsClick })),
         React.createElement(Block, { marginTop: theme.sizing.scale700, padding: `0 ${theme.sizing.scale100}` },
             React.createElement(Button, { size: "small", kind: "tertiary", startEnhancer: React.createElement(LogOut01, { color: "currentColor", size: 12 }), onClick: () => handleLogOut(), overrides: {
                     Root: {