@mezo-org/passport 0.4.0-dev.12 → 0.4.0-dev.13

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

@@ -1,7 +1,8 @@
 import { ButtonProps } from "@mezo-org/mezo-clay";
 import React, { ReactNode } from "react";
-declare const ConnectedTrigger: React.ForwardRefExoticComponent<Omit<ButtonProps, "children"> & {
+declare const ConnectedTrigger: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "children"> & {
     avatar: ReactNode;
+    size?: "medium" | "large";
 } & React.RefAttributes<HTMLButtonElement>>;
 export default ConnectedTrigger;
 //# sourceMappingURL=ConnectedTrigger.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectedTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/ConnectedTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAgB,MAAM,qBAAqB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAMpD,QAAA,MAAM,gBAAgB;YAHZ,SAAS;2CAiDlB,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"ConnectedTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/ConnectedTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAgB,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,EAAc,SAAS,EAAW,MAAM,OAAO,CAAA;AAO7D,QAAA,MAAM,gBAAgB;YAJZ,SAAS;WACV,QAAQ,GAAG,OAAO;2CAoE1B,CAAA;AAED,eAAe,gBAAgB,CAAA"}

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

@@ -1,30 +1,39 @@
-import { Block, useStyletron } from "@mezo-org/mezo-clay";
-import React, { forwardRef } from "react";
+import { Block, Button, useStyletron } from "@mezo-org/mezo-clay";
+import React, { forwardRef, useMemo } from "react";
 const ConnectedTrigger = forwardRef((props, ref) => {
-    const { onClick, avatar, ...restProps } = props;
+    const { onClick, avatar, size = "medium", ...restProps } = props;
     const [, theme] = useStyletron();
-    return (React.createElement(Block, { as: "button", overrides: {
-            Block: {
+    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 (React.createElement(Button, { overrides: {
+            BaseButton: {
                 props: { ref, ...restProps },
                 style: {
-                    border: "none",
-                    background: "none",
-                    padding: 0,
-                    margin: 0,
-                    cursor: "pointer",
+                    borderRadius: "100%",
+                    overflow: "hidden",
+                    padding: buttonPadding,
                 },
             },
-        }, onClick: onClick },
-        React.createElement(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",
-                    },
+        }, onClick: onClick }, typeof avatar === "string" ? (React.createElement(Block, { width: avatarSize, height: avatarSize, as: "img", src: avatar, alt: "" })) : (React.createElement(Block, { width: avatarSize, height: avatarSize, overrides: {
+            Block: {
+                style: {
+                    borderRadius: "100%",
+                    overflow: "hidden",
                 },
-            } }, typeof avatar === "string" ? (React.createElement(Block, { as: "img", src: avatar, alt: "" })) : (avatar))));
+            },
+        } }, avatar))));
 });
 export default ConnectedTrigger;
 //# sourceMappingURL=ConnectedTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectedTrigger.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/ConnectedTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AAMpD,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IAE/C,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,KAAK,IACJ,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE;gBAC5B,KAAK,EAAE;oBACL,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,SAAS;iBAClB;aACF;SACF,EACD,OAAO,EAAE,OAAO;QAEhB,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAC5B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAC7B,SAAS,EAAE;gBACT,KAAK,EAAE;oBACL,KAAK,EAAE;wBACL,YAAY,EAAE,MAAM;wBACpB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE;wBAClD,SAAS,EAAE,YAAY;wBACvB,QAAQ,EAAE,QAAQ;qBACnB;iBACF;aACF,IAEA,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,oBAAC,KAAK,IAAC,EAAE,EAAC,KAAK,EAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,EAAE,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CACK,CACF,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"ConnectedTrigger.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/ConnectedTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAe,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,OAAO,CAAA;AAO7D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IAEhE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;YAC7B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;SAC9B,CAAA;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,UAAU,GAAG;YACjB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;YAC3B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;SAC7B,CAAA;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE;YACT,UAAU,EAAE;gBACV,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE;gBAC5B,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,aAAa;iBACvB;aACF;SACF,EACD,OAAO,EAAE,OAAO,IAEf,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,oBAAC,KAAK,IACJ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,UAAU,EAClB,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,EAAE,GACN,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM;oBACpB,QAAQ,EAAE,QAAQ;iBACnB;aACF;SACF,IAEA,MAAM,CACD,CACT,CACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

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

@@ -1,4 +1,4 @@
-import { StatefulPopoverProps } from "@mezo-org/mezo-clay";
+import { ButtonProps, StatefulPopoverProps } from "@mezo-org/mezo-clay";
 import React from "react";
 import { DropdownCryptoAsset } from "../../hooks/useDropdownData";
 export type DropdownProps = {
@@ -10,6 +10,13 @@ export type DropdownProps = {
     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">;
+    };
 } & 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,EAEL,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;CACvD,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAEtD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA4E5C"}
+{"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"}

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

@@ -15,7 +15,7 @@ import { useSignInWithWallet } from "../../hooks";
  * @returns {JSX.Element}
  */
 export function Dropdown(props) {
-    const { placement = "bottomRight", animateOutTime = 120, onSignIn, onSignOut, evmNativeAssets, matsnetAssets, overrides, ...restProps } = props;
+    const { placement = "bottomRight", animateOutTime = 120, onSignIn, onSignOut, evmNativeAssets, matsnetAssets, overrides, triggerProps, ...restProps } = props;
     const [, theme] = useStyletron();
     const dropdownData = useDropdownData({ evmNativeAssets, matsnetAssets });
     const { openConnectModal } = useConnectModal();
@@ -44,7 +44,7 @@ export function Dropdown(props) {
         , { 
             // If connect wallet flow is not provided it fallbacks to RainbowKit's
             // connect modal
-            onClick: onSignIn || openConnectModal, isLoading: isPending }, "Sign in"));
+            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: {
             ...overrides,
@@ -59,6 +59,6 @@ export function Dropdown(props) {
                 },
             },
         }, ...restProps },
-        React.createElement(ConnectedTrigger, { avatar: React.createElement(DefaultAvatar, null) })));
+        React.createElement(ConnectedTrigger, { avatar: React.createElement(DefaultAvatar, null), ...triggerProps?.signedIn })));
 }
 //# sourceMappingURL=Dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,YAAY,GACb,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,aAAa,MAAM,4BAA4B,CAAA;AACtD,OAAO,eAEN,MAAM,6BAA6B,CAAA;AACpC,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAC3D,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAajD;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,cAAc,GAAG,GAAG,EACpB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAA;IAExE,MAAM,EAAE,gBAAgB,EAAE,GAAG,eAAe,EAAE,CAAA;IAE9C,MAAM,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE1C,MAAM,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAElE,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAM;QAEpB,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE;YAC9B,IAAI,CAAC,WAAW;gBAAE,OAAM;YAExB,IAAI,CAAC;gBACH,MAAM,qBAAqB,EAAE,CAAA;YAC/B,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,MAAM,eAAe,EAAE,CAAA;YACzB,CAAC;QACH,CAAC,CAAA;QAED,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAEnE,IAAI,CAAC,YAAY,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,OAAO,CACL,oBAAC,mBAAmB;QAClB,sEAAsE;QACtE,gBAAgB;;YADhB,sEAAsE;YACtE,gBAAgB;YAChB,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EACrC,SAAS,EAAE,SAAS,cAGA,CACvB,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAE,oBAAC,OAAO,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,EAC9D,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE;YACT,GAAG,SAAS;YACZ,IAAI,EAAE;gBACJ,GAAG,SAAS,EAAE,IAAI;gBAClB,KAAK,EAAE;oBACL,QAAQ,EAAE,OAAO;oBACjB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS;oBACrC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS;oBACnC,QAAQ,EAAE,QAAQ;oBAClB,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;iBAC1B;aACF;SACF,KACG,SAAS;QAEb,oBAAC,gBAAgB,IAAC,MAAM,EAAE,oBAAC,aAAa,OAAG,GAAI,CAC/B,CACnB,CAAA;AACH,CAAC"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezo-org/passport",
-  "version": "0.4.0-dev.12",
+  "version": "0.4.0-dev.13",
   "main": "dist/src/index.js",
   "license": "GPL-3.0-only",
   "scripts": {

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/Dropdown.tsx

@@ -1,4 +1,5 @@
 import {
+  ButtonProps,
   StatefulPopover,
   StatefulPopoverProps,
   useStyletron,
@@ -25,6 +26,13 @@ export type DropdownProps = {
   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">
+  }
 } & Omit<StatefulPopoverProps, "children" | "content">
 
 /**
@@ -41,6 +49,7 @@ export function Dropdown(props: DropdownProps) {
     evmNativeAssets,
     matsnetAssets,
     overrides,
+    triggerProps,
     ...restProps
   } = props
 
@@ -79,6 +88,7 @@ export function Dropdown(props: DropdownProps) {
         // connect modal
         onClick={onSignIn || openConnectModal}
         isLoading={isPending}
+        {...triggerProps?.signedOut}
       >
         Sign in
       </DisconnectedTrigger>
@@ -105,7 +115,10 @@ export function Dropdown(props: DropdownProps) {
       }}
       {...restProps}
     >
-      <ConnectedTrigger avatar={<DefaultAvatar />} />
+      <ConnectedTrigger
+        avatar={<DefaultAvatar />}
+        {...triggerProps?.signedIn}
+      />
     </StatefulPopover>
   )
 }

package/src/components/Dropdown/README.md

@@ -28,6 +28,10 @@ component. It allows to establish the session and interact with the API.
     }
   }
   ```
+- `triggerProps.signedIn` (`ButtonProps`) - Props to be passed to the trigger
+  button in signed-in state.
+- `triggerProps.signedOut` (`ButtonProps`) - Props to be passed to the trigger
+  button in signed-out state
 
 Besides that, component allows
 [Clay's `StatefulPopover` props](https://baseweb.design/components/popover/)