@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal2.js

@@ -1,5 +1,5 @@
-import { init_accountIds, toAccountId } from "../../sdk/src/core/types/accountIds.js";
-import { getAuthenticatorsByUser, init_rpcCalls } from "../../sdk/src/core/rpcCalls.js";
+import { toAccountId } from "../../src/core/types/accountIds.js";
+import { getAuthenticatorsByUser } from "../../src/core/rpcCalls.js";
 import { useTatchi } from "../../context/index.js";
 import { Theme, useTheme } from "../theme/ThemeProvider.js";
 import "./LinkedDevicesModal.js";
@@ -7,8 +7,6 @@ import React, { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/components/AccountMenuButton/LinkedDevicesModal.tsx
-init_rpcCalls();
-init_accountIds();
 const LinkedDevicesModal = ({ nearAccountId, isOpen, onClose }) => {
 	const { tatchi, loginState, viewAccessKeyList } = useTatchi();
 	const { theme } = useTheme();
@@ -105,7 +103,10 @@ const LinkedDevicesModal = ({ nearAccountId, isOpen, onClose }) => {
 		setDeletingKeyPublicKey(publicKey);
 		setDeleteError(null);
 		try {
-			await tatchi.deleteDeviceKey(nearAccountId, publicKey);
+			await tatchi.deleteDeviceKey(nearAccountId, publicKey, { signerMode: {
+				mode: "threshold-signer",
+				behavior: "fallback"
+			} });
 			await loadAuthenticators();
 		} catch (err) {
 			setDeleteError(err.message || "Failed to delete access key");

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal2.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedDevicesModal2.js","names":["LinkedDevicesModal: React.FC<LinkedDevicesModalProps>","rows: Array<{ credentialId: string; registered: string; deviceNumber: number; nearPublicKey: string | null }>","err: any","items: React.ReactNode[]"],"sources":["../../../../../src/react/components/AccountMenuButton/LinkedDevicesModal.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useTatchi } from '../../context';\nimport './LinkedDevicesModal.css';\nimport { useTheme, Theme } from '../theme';\n\nimport { getAuthenticatorsByUser } from '@/core/rpcCalls';\nimport type { ContractStoredAuthenticator } from '@/core/TatchiPasskey/recoverAccount';\nimport type { AccessKeyList } from '@/core/NearClient';\nimport { toAccountId } from '@/core/types/accountIds';\n\ninterface LinkedDevicesModalProps {\n  nearAccountId: string;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nexport const LinkedDevicesModal: React.FC<LinkedDevicesModalProps> = ({\n  nearAccountId,\n  isOpen,\n  onClose\n}) => {\n  const { tatchi, loginState, viewAccessKeyList } = useTatchi();\n  const { theme } = useTheme();\n  // Authenticators list: credentialId + registered timestamp + device number\n  const [authRows, setAuthRows] = useState<Array<{\n    credentialId: string;\n    registered: string;\n    deviceNumber: number;\n    nearPublicKey: string | null;\n  }>>([{ credentialId: 'placeholder', registered: '', deviceNumber: 0, nearPublicKey: null }]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [accessKeyList, setAccessKeyList] = useState<AccessKeyList | null>(null);\n  const [tooltipVisible, setTooltipVisible] = useState<number | null>(null);\n  const [copiedKeys, setCopiedKeys] = useState<Set<number>>(new Set());\n  const [currentDeviceNumber, setCurrentDeviceNumber] = useState<number | null>(null);\n  const [deletingKeyPublicKey, setDeletingKeyPublicKey] = useState<string | null>(null);\n  const [deleteError, setDeleteError] = useState<string | null>(null);\n\n  const formatDateTime = (iso: string) => {\n    if (!iso) return '—';\n    try { return new Date(iso).toLocaleString(); } catch { return iso; }\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      loadAuthenticators();\n      // Also resolve current device number for highlighting\n      (async () => {\n        try {\n          if (!tatchi) return;\n          const { login } = await tatchi.getLoginSession(nearAccountId);\n          const dn = (login as any)?.userData?.deviceNumber;\n          if (typeof dn === 'number' && Number.isFinite(dn)) {\n            setCurrentDeviceNumber(dn);\n          } else {\n            setCurrentDeviceNumber(null);\n          }\n        } catch {\n          setCurrentDeviceNumber(null);\n        }\n      })();\n    }\n  }, [isOpen]);\n\n  // Close on ESC press while modal is open\n  useEffect(() => {\n    if (!isOpen) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        e.preventDefault();\n        onClose();\n      }\n    };\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [isOpen, onClose]);\n\n  const loadAuthenticators = async () => {\n    if (!tatchi) return;\n\n    setIsLoading(true);\n    setError(null);\n    setDeleteError(null);\n\n    try {\n      const nearClient = tatchi.getNearClient();\n      const contractId = tatchi.configs.contractId;\n      const [tuples, keys] = await Promise.all([\n        getAuthenticatorsByUser(nearClient, contractId, toAccountId(nearAccountId)),\n        viewAccessKeyList(nearAccountId)\n      ]);\n\n      // Map each authenticator to a single row with credentialId and registered timestamp\n      const rows: Array<{ credentialId: string; registered: string; deviceNumber: number; nearPublicKey: string | null }> = [];\n      for (const [credentialId, auth] of (tuples || []) as Array<[string, ContractStoredAuthenticator]>) {\n        const dn = Number(auth.device_number);\n        const rawRegistered = String((auth as any).registered ?? '');\n        const registered = (() => {\n          if (!rawRegistered) return '';\n          // Legacy contracts may return a numeric timestamp string.\n          if (/^\\d+$/.test(rawRegistered)) {\n            const ts = Number(rawRegistered);\n            return Number.isFinite(ts) ? new Date(ts).toISOString() : rawRegistered;\n          }\n          return rawRegistered;\n        })();\n\n        const nearPublicKey = (auth as any).near_public_key ?? null;\n        rows.push({ credentialId, registered, deviceNumber: dn, nearPublicKey });\n      }\n      setAuthRows(rows.length > 0 ? rows : []);\n      setAccessKeyList(keys);\n    } catch (err: any) {\n      setError(err.message || 'Failed to load linked devices or access keys');\n      setAccessKeyList(null);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleDeleteKey = async (publicKey: string) => {\n    if (!tatchi || !publicKey) return;\n    if (!nearAccountId) return;\n\n    setDeletingKeyPublicKey(publicKey);\n    setDeleteError(null);\n\n    try {\n      await tatchi.deleteDeviceKey(nearAccountId, publicKey);\n      await loadAuthenticators();\n    } catch (err: any) {\n      setDeleteError(err.message || 'Failed to delete access key');\n    } finally {\n      setDeletingKeyPublicKey(null);\n    }\n  };\n\n  const copyToClipboard = async (text: string, keyIndex: number) => {\n    try {\n      await navigator.clipboard.writeText(text);\n\n      // Fire custom event for copy action\n      const copyEvent = new CustomEvent('accessKeyCopied', {\n        detail: {\n          publicKey: text,\n          keyIndex: keyIndex,\n          timestamp: Date.now()\n        }\n      });\n      window.dispatchEvent(copyEvent);\n\n      // Show brief tooltip feedback\n      setTooltipVisible(keyIndex);\n      setTimeout(() => setTooltipVisible(null), 2000);\n\n      // Set copied state for status badge\n      setCopiedKeys(prev => new Set(prev).add(keyIndex));\n      setTimeout(() => {\n        setCopiedKeys(prev => {\n          const newSet = new Set(prev);\n          newSet.delete(keyIndex);\n          return newSet;\n        });\n      }, 3000);\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err);\n    }\n  };\n\n  if (!isOpen) return null;\n\n  // Prevent any events from bubbling up to parent components\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onClose();\n  };\n\n  const handleModalContentClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    // Don't call onClose here - we want to keep the modal open\n  };\n\n  return (\n    <Theme mode=\"scope-only\">\n    <div className={`w3a-access-keys-modal-backdrop theme-${theme}`}\n      onClick={handleBackdropClick}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseUp={(e) => e.stopPropagation()}\n    >\n      <div className=\"w3a-access-keys-modal-content\"\n        onClick={handleModalContentClick}\n        onMouseDown={(e) => e.stopPropagation()}\n        onMouseUp={(e) => e.stopPropagation()}\n      >\n        <div className=\"w3a-access-keys-modal-header\">\n          <h2 className=\"w3a-access-keys-modal-title\">Linked Devices</h2>\n        </div>\n        <button className=\"w3a-access-keys-modal-close\"\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          ✕\n        </button>\n\n        {error && (\n          <div className=\"w3a-access-keys-error\">\n            <p>{error}</p>\n            <button onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              loadAuthenticators();\n            }} className=\"w3a-btn w3a-btn-primary\">\n              Try Again\n            </button>\n          </div>\n        )}\n\n        {!isLoading && !error && authRows.filter(r => r.credentialId !== 'placeholder').length === 0 && (\n          <div className=\"w3a-access-keys-empty\">\n            <p>No authenticators found.</p>\n          </div>\n        )}\n\n        {!error && authRows.filter(r => r.credentialId !== 'placeholder').length > 0 && (\n          <div className=\"w3a-keys-list\">\n            {(() => {\n              console.log(\"authRows\", authRows)\n              const rows = authRows.filter(r => r.credentialId !== 'placeholder');\n              const current = (currentDeviceNumber != null)\n                ? rows.find(r => r.deviceNumber === currentDeviceNumber)\n                : null;\n              const others = (currentDeviceNumber != null)\n                ? rows.filter(r => r.deviceNumber !== currentDeviceNumber)\n                : rows;\n\n              const items: React.ReactNode[] = [];\n\n              if (current) {\n                const index = 0;\n                const currentKey = current.nearPublicKey || loginState?.nearPublicKey || null;\n                const isCurrentKey = !!currentKey && loginState?.nearPublicKey === currentKey;\n                const canDelete = !!accessKeyList && accessKeyList.keys.length > 1;\n                const isDeletingThisKey = !!currentKey && deletingKeyPublicKey === currentKey;\n                items.push(\n                  <div key={`current-${current.deviceNumber}`} className=\"w3a-key-item\">\n                    <div className=\"w3a-key-content\">\n                      <div className=\"w3a-key-details\">\n                        <div className=\"w3a-key-header\">\n                          <div className=\"mono w3a-device-row\">\n                            <span className=\"w3a-device-badge\">Device {current.deviceNumber}</span>\n                            <span className=\"w3a-current-device-text\">(current device)</span>\n                          </div>\n                        </div>\n                        <div className=\"mono w3a-registered\">Registered: {formatDateTime(current.registered)}</div>\n                        {currentKey && (\n                          <div\n                            className=\"mono w3a-copyable-key w3a-access-key-current\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              copyToClipboard(currentKey, index);\n                            }}\n                            onMouseEnter={() => setTooltipVisible(index)}\n                            onMouseLeave={() => setTooltipVisible(null)}\n                            title=\"Click to copy\"\n                          >\n                            Access Key: {currentKey}\n                            {tooltipVisible === index && (\n                              <div className=\"w3a-copy-tooltip\">Click to copy</div>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                      {currentKey && (\n                        <div className=\"w3a-key-status\">\n                          <button\n                            className={`w3a-btn ${isCurrentKey ? 'w3a-btn-primary' : 'w3a-btn-danger'}`}\n                            style={{ width: '64px' }}\n                            disabled={!canDelete || isDeletingThisKey}\n                            onClick={(e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              if (canDelete && !isDeletingThisKey) {\n                                void handleDeleteKey(currentKey);\n                              }\n                            }}\n                          >\n                            {isDeletingThisKey ? (\n                              <span className=\"w3a-spinner\"/>\n                            ) : (\n                              'Delete'\n                            )}\n                          </button>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                );\n              }\n\n              others.forEach((item, i) => {\n                const canDelete = !!accessKeyList && accessKeyList.keys.length > 1;\n                const isDeletingThisKey = !!item.nearPublicKey && deletingKeyPublicKey === item.nearPublicKey;\n                items.push(\n                  <div key={`other-${item.deviceNumber}-${i}`} className=\"w3a-key-item\">\n                    <div className=\"w3a-key-content\">\n                      <div className=\"w3a-key-details\">\n                        <div className=\"w3a-key-header\">\n                          <div className=\"mono w3a-device-row\">\n                            <span className=\"w3a-device-badge\">Device {item.deviceNumber}</span>\n                          </div>\n                        </div>\n                        <div className=\"mono w3a-registered\">Registered: {formatDateTime(item.registered)}</div>\n                        {item.nearPublicKey && (\n                          <div\n                            className=\"mono w3a-copyable-key\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              copyToClipboard(item.nearPublicKey!, 10 + i);\n                            }}\n                            onMouseEnter={() => setTooltipVisible(10 + i)}\n                            onMouseLeave={() => setTooltipVisible(null)}\n                            title=\"Click to copy\"\n                          >\n                            Access Key: {item.nearPublicKey}\n                            {tooltipVisible === 10 + i && (\n                              <div className=\"w3a-copy-tooltip\">Click to copy</div>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                      {item.nearPublicKey && (\n                        <div className=\"w3a-key-status\">\n                          <button\n                            className=\"w3a-btn w3a-btn-danger\"\n                            style={{ width: '64px' }}\n                            disabled={!canDelete || isDeletingThisKey}\n                            onClick={(e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              if (canDelete && !isDeletingThisKey) {\n                                void handleDeleteKey(item.nearPublicKey!);\n                              }\n                            }}\n                          >\n                            {isDeletingThisKey ? (\n                              <span className=\"w3a-spinner\"/>\n                            ) : (\n                              'Delete'\n                            )}\n                          </button>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                );\n              });\n\n              return items;\n            })()}\n          </div>\n        )}\n\n        {deleteError && (\n          <div className=\"w3a-access-keys-error\">\n            <p>{deleteError}</p>\n          </div>\n        )}\n      </div>\n    </div>\n    </Theme>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LinkedDevicesModal2.js","names":["LinkedDevicesModal: React.FC<LinkedDevicesModalProps>","rows: Array<{ credentialId: string; registered: string; deviceNumber: number; nearPublicKey: string | null }>","err: any","items: React.ReactNode[]"],"sources":["../../../../../src/react/components/AccountMenuButton/LinkedDevicesModal.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useTatchi } from '../../context';\nimport './LinkedDevicesModal.css';\nimport { useTheme, Theme } from '../theme';\n\nimport { getAuthenticatorsByUser } from '@/core/rpcCalls';\nimport type { ContractStoredAuthenticator } from '@/core/TatchiPasskey/syncAccount';\nimport type { AccessKeyList } from '@/core/NearClient';\nimport { toAccountId } from '@/core/types/accountIds';\n\ninterface LinkedDevicesModalProps {\n  nearAccountId: string;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nexport const LinkedDevicesModal: React.FC<LinkedDevicesModalProps> = ({\n  nearAccountId,\n  isOpen,\n  onClose\n}) => {\n  const { tatchi, loginState, viewAccessKeyList } = useTatchi();\n  const { theme } = useTheme();\n  // Authenticators list: credentialId + registered timestamp + device number\n  const [authRows, setAuthRows] = useState<Array<{\n    credentialId: string;\n    registered: string;\n    deviceNumber: number;\n    nearPublicKey: string | null;\n  }>>([{ credentialId: 'placeholder', registered: '', deviceNumber: 0, nearPublicKey: null }]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [accessKeyList, setAccessKeyList] = useState<AccessKeyList | null>(null);\n  const [tooltipVisible, setTooltipVisible] = useState<number | null>(null);\n  const [copiedKeys, setCopiedKeys] = useState<Set<number>>(new Set());\n  const [currentDeviceNumber, setCurrentDeviceNumber] = useState<number | null>(null);\n  const [deletingKeyPublicKey, setDeletingKeyPublicKey] = useState<string | null>(null);\n  const [deleteError, setDeleteError] = useState<string | null>(null);\n\n  const formatDateTime = (iso: string) => {\n    if (!iso) return '—';\n    try { return new Date(iso).toLocaleString(); } catch { return iso; }\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      loadAuthenticators();\n      // Also resolve current device number for highlighting\n      (async () => {\n        try {\n          if (!tatchi) return;\n          const { login } = await tatchi.getLoginSession(nearAccountId);\n          const dn = (login as any)?.userData?.deviceNumber;\n          if (typeof dn === 'number' && Number.isFinite(dn)) {\n            setCurrentDeviceNumber(dn);\n          } else {\n            setCurrentDeviceNumber(null);\n          }\n        } catch {\n          setCurrentDeviceNumber(null);\n        }\n      })();\n    }\n  }, [isOpen]);\n\n  // Close on ESC press while modal is open\n  useEffect(() => {\n    if (!isOpen) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        e.preventDefault();\n        onClose();\n      }\n    };\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [isOpen, onClose]);\n\n  const loadAuthenticators = async () => {\n    if (!tatchi) return;\n\n    setIsLoading(true);\n    setError(null);\n    setDeleteError(null);\n\n    try {\n      const nearClient = tatchi.getNearClient();\n      const contractId = tatchi.configs.contractId;\n      const [tuples, keys] = await Promise.all([\n        getAuthenticatorsByUser(nearClient, contractId, toAccountId(nearAccountId)),\n        viewAccessKeyList(nearAccountId)\n      ]);\n\n      // Map each authenticator to a single row with credentialId and registered timestamp\n      const rows: Array<{ credentialId: string; registered: string; deviceNumber: number; nearPublicKey: string | null }> = [];\n      for (const [credentialId, auth] of (tuples || []) as Array<[string, ContractStoredAuthenticator]>) {\n        const dn = Number(auth.device_number);\n        const rawRegistered = String((auth as any).registered ?? '');\n        const registered = (() => {\n          if (!rawRegistered) return '';\n          // Legacy contracts may return a numeric timestamp string.\n          if (/^\\d+$/.test(rawRegistered)) {\n            const ts = Number(rawRegistered);\n            return Number.isFinite(ts) ? new Date(ts).toISOString() : rawRegistered;\n          }\n          return rawRegistered;\n        })();\n\n        const nearPublicKey = (auth as any).near_public_key ?? null;\n        rows.push({ credentialId, registered, deviceNumber: dn, nearPublicKey });\n      }\n      setAuthRows(rows.length > 0 ? rows : []);\n      setAccessKeyList(keys);\n    } catch (err: any) {\n      setError(err.message || 'Failed to load linked devices or access keys');\n      setAccessKeyList(null);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleDeleteKey = async (publicKey: string) => {\n    if (!tatchi || !publicKey) return;\n    if (!nearAccountId) return;\n\n    setDeletingKeyPublicKey(publicKey);\n    setDeleteError(null);\n\n    try {\n      await tatchi.deleteDeviceKey(nearAccountId, publicKey, {\n        signerMode: { mode: 'threshold-signer', behavior: 'fallback' },\n      });\n      await loadAuthenticators();\n    } catch (err: any) {\n      setDeleteError(err.message || 'Failed to delete access key');\n    } finally {\n      setDeletingKeyPublicKey(null);\n    }\n  };\n\n  const copyToClipboard = async (text: string, keyIndex: number) => {\n    try {\n      await navigator.clipboard.writeText(text);\n\n      // Fire custom event for copy action\n      const copyEvent = new CustomEvent('accessKeyCopied', {\n        detail: {\n          publicKey: text,\n          keyIndex: keyIndex,\n          timestamp: Date.now()\n        }\n      });\n      window.dispatchEvent(copyEvent);\n\n      // Show brief tooltip feedback\n      setTooltipVisible(keyIndex);\n      setTimeout(() => setTooltipVisible(null), 2000);\n\n      // Set copied state for status badge\n      setCopiedKeys(prev => new Set(prev).add(keyIndex));\n      setTimeout(() => {\n        setCopiedKeys(prev => {\n          const newSet = new Set(prev);\n          newSet.delete(keyIndex);\n          return newSet;\n        });\n      }, 3000);\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err);\n    }\n  };\n\n  if (!isOpen) return null;\n\n  // Prevent any events from bubbling up to parent components\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onClose();\n  };\n\n  const handleModalContentClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    // Don't call onClose here - we want to keep the modal open\n  };\n\n  return (\n    <Theme mode=\"scope-only\">\n    <div className={`w3a-access-keys-modal-backdrop theme-${theme}`}\n      onClick={handleBackdropClick}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseUp={(e) => e.stopPropagation()}\n    >\n      <div className=\"w3a-access-keys-modal-content\"\n        onClick={handleModalContentClick}\n        onMouseDown={(e) => e.stopPropagation()}\n        onMouseUp={(e) => e.stopPropagation()}\n      >\n        <div className=\"w3a-access-keys-modal-header\">\n          <h2 className=\"w3a-access-keys-modal-title\">Linked Devices</h2>\n        </div>\n        <button className=\"w3a-access-keys-modal-close\"\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          ✕\n        </button>\n\n        {error && (\n          <div className=\"w3a-access-keys-error\">\n            <p>{error}</p>\n            <button onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              loadAuthenticators();\n            }} className=\"w3a-btn w3a-btn-primary\">\n              Try Again\n            </button>\n          </div>\n        )}\n\n        {!isLoading && !error && authRows.filter(r => r.credentialId !== 'placeholder').length === 0 && (\n          <div className=\"w3a-access-keys-empty\">\n            <p>No authenticators found.</p>\n          </div>\n        )}\n\n        {!error && authRows.filter(r => r.credentialId !== 'placeholder').length > 0 && (\n          <div className=\"w3a-keys-list\">\n            {(() => {\n              console.log(\"authRows\", authRows)\n              const rows = authRows.filter(r => r.credentialId !== 'placeholder');\n              const current = (currentDeviceNumber != null)\n                ? rows.find(r => r.deviceNumber === currentDeviceNumber)\n                : null;\n              const others = (currentDeviceNumber != null)\n                ? rows.filter(r => r.deviceNumber !== currentDeviceNumber)\n                : rows;\n\n              const items: React.ReactNode[] = [];\n\n              if (current) {\n                const index = 0;\n                const currentKey = current.nearPublicKey || loginState?.nearPublicKey || null;\n                const isCurrentKey = !!currentKey && loginState?.nearPublicKey === currentKey;\n                const canDelete = !!accessKeyList && accessKeyList.keys.length > 1;\n                const isDeletingThisKey = !!currentKey && deletingKeyPublicKey === currentKey;\n                items.push(\n                  <div key={`current-${current.deviceNumber}`} className=\"w3a-key-item\">\n                    <div className=\"w3a-key-content\">\n                      <div className=\"w3a-key-details\">\n                        <div className=\"w3a-key-header\">\n                          <div className=\"mono w3a-device-row\">\n                            <span className=\"w3a-device-badge\">Device {current.deviceNumber}</span>\n                            <span className=\"w3a-current-device-text\">(current device)</span>\n                          </div>\n                        </div>\n                        <div className=\"mono w3a-registered\">Registered: {formatDateTime(current.registered)}</div>\n                        {currentKey && (\n                          <div\n                            className=\"mono w3a-copyable-key w3a-access-key-current\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              copyToClipboard(currentKey, index);\n                            }}\n                            onMouseEnter={() => setTooltipVisible(index)}\n                            onMouseLeave={() => setTooltipVisible(null)}\n                            title=\"Click to copy\"\n                          >\n                            Access Key: {currentKey}\n                            {tooltipVisible === index && (\n                              <div className=\"w3a-copy-tooltip\">Click to copy</div>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                      {currentKey && (\n                        <div className=\"w3a-key-status\">\n                          <button\n                            className={`w3a-btn ${isCurrentKey ? 'w3a-btn-primary' : 'w3a-btn-danger'}`}\n                            style={{ width: '64px' }}\n                            disabled={!canDelete || isDeletingThisKey}\n                            onClick={(e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              if (canDelete && !isDeletingThisKey) {\n                                void handleDeleteKey(currentKey);\n                              }\n                            }}\n                          >\n                            {isDeletingThisKey ? (\n                              <span className=\"w3a-spinner\"/>\n                            ) : (\n                              'Delete'\n                            )}\n                          </button>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                );\n              }\n\n              others.forEach((item, i) => {\n                const canDelete = !!accessKeyList && accessKeyList.keys.length > 1;\n                const isDeletingThisKey = !!item.nearPublicKey && deletingKeyPublicKey === item.nearPublicKey;\n                items.push(\n                  <div key={`other-${item.deviceNumber}-${i}`} className=\"w3a-key-item\">\n                    <div className=\"w3a-key-content\">\n                      <div className=\"w3a-key-details\">\n                        <div className=\"w3a-key-header\">\n                          <div className=\"mono w3a-device-row\">\n                            <span className=\"w3a-device-badge\">Device {item.deviceNumber}</span>\n                          </div>\n                        </div>\n                        <div className=\"mono w3a-registered\">Registered: {formatDateTime(item.registered)}</div>\n                        {item.nearPublicKey && (\n                          <div\n                            className=\"mono w3a-copyable-key\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              copyToClipboard(item.nearPublicKey!, 10 + i);\n                            }}\n                            onMouseEnter={() => setTooltipVisible(10 + i)}\n                            onMouseLeave={() => setTooltipVisible(null)}\n                            title=\"Click to copy\"\n                          >\n                            Access Key: {item.nearPublicKey}\n                            {tooltipVisible === 10 + i && (\n                              <div className=\"w3a-copy-tooltip\">Click to copy</div>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                      {item.nearPublicKey && (\n                        <div className=\"w3a-key-status\">\n                          <button\n                            className=\"w3a-btn w3a-btn-danger\"\n                            style={{ width: '64px' }}\n                            disabled={!canDelete || isDeletingThisKey}\n                            onClick={(e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              if (canDelete && !isDeletingThisKey) {\n                                void handleDeleteKey(item.nearPublicKey!);\n                              }\n                            }}\n                          >\n                            {isDeletingThisKey ? (\n                              <span className=\"w3a-spinner\"/>\n                            ) : (\n                              'Delete'\n                            )}\n                          </button>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                );\n              });\n\n              return items;\n            })()}\n          </div>\n        )}\n\n        {deleteError && (\n          <div className=\"w3a-access-keys-error\">\n            <p>{deleteError}</p>\n          </div>\n        )}\n      </div>\n    </div>\n    </Theme>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown-CRJrtxDb.css

@@ -0,0 +1,120 @@
+/* ProfileDropdown component-specific styles */
+
+/* Dropdown (grid height animation with data-state) */
+.w3a-profile-dropdown-morphed {
+  position: static;
+  box-sizing: border-box;
+  margin-top: 0;
+  opacity: 0;
+  visibility: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  grid-template-columns: 1fr;
+  transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);
+  border-top: 1px solid var(--w3a-colors-borderPrimary);
+}
+
+.w3a-profile-dropdown-morphed[data-state="open"] {
+  opacity: 1;
+  visibility: visible;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  pointer-events: auto;
+  --stagger-base: 40ms;
+}
+
+.w3a-profile-dropdown-morphed[data-state="closed"] {
+  pointer-events: none;
+  border-top-width: 0;
+  grid-template-rows: 0fr;
+  height: 0;
+  min-height: 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.w3a-profile-dropdown-morphed.hidden {
+  display: none;
+}
+
+/* Inner clip and container */
+.w3a-profile-dropdown-menu {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Global theme pulse when toggling theme */
+@keyframes w3a-theme-pulse {
+  0% { filter: none; }
+  50% { filter: brightness(1.05) saturate(1.06); }
+  100% { filter: none; }
+}
+body[data-w3a-theme-pulse="1"] .w3a-profile-dropdown-menu {
+  animation: w3a-theme-pulse 220ms ease;
+}
+
+/* Press feedback for menu items (animate even if state doesn't change) */
+.w3a-dropdown-menu-item {
+  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
+}
+.w3a-dropdown-menu-item:active {
+  transform: scale(0.98);
+  background: var(--w3a-colors-surface2);
+}
+
+/* Themed focus ring for accessibility */
+.w3a-dropdown-menu-item:focus { outline: none; }
+.w3a-dropdown-menu-item:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);
+}
+
+/* Menu item animation states */
+
+.w3a-profile-dropdown-morphed[data-state="closed"] .w3a-dropdown-menu-item {
+  opacity: 0;
+  transform: translateX(-1rem);
+  animation: none;
+}
+
+.w3a-profile-dropdown-morphed[data-state="open"] .w3a-dropdown-menu-item {
+  animation: w3a-profile-menu-item-enter 240ms linear forwards;
+  animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);
+}
+
+/* Menu Item Animation Keyframes */
+@keyframes w3a-profile-menu-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes w3a-profile-menu-item-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+}
+
+/* Logout menu item specific styling */
+.w3a-logout-menu-item {
+  border-top: 1px solid var(--w3a-colors-borderPrimary);
+  border-radius: 0px 0px 2rem 2rem;
+  margin-top: 0.5rem;
+}
+
+
+/*# sourceMappingURL=ProfileDropdown-CRJrtxDb.css.map*/

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown-CRJrtxDb.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileDropdown-CRJrtxDb.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.css"],"sourcesContent":["/* ProfileDropdown component-specific styles */\n\n/* Dropdown (grid height animation with data-state) */\n.w3a-profile-dropdown-morphed {\n  position: static;\n  box-sizing: border-box;\n  margin-top: 0;\n  opacity: 0;\n  visibility: hidden;\n  display: grid;\n  grid-template-rows: 0fr;\n  grid-template-columns: 1fr;\n  transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);\n  border-top: 1px solid var(--w3a-colors-borderPrimary);\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] {\n  opacity: 1;\n  visibility: visible;\n  grid-template-rows: 1fr;\n  grid-template-columns: 1fr;\n  pointer-events: auto;\n  --stagger-base: 40ms;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] {\n  pointer-events: none;\n  border-top-width: 0;\n  grid-template-rows: 0fr;\n  height: 0;\n  min-height: 0;\n  width: 0;\n  min-width: 0;\n  max-width: 0;\n  overflow: hidden;\n  margin: 0;\n  padding: 0;\n}\n\n.w3a-profile-dropdown-morphed.hidden {\n  display: none;\n}\n\n/* Inner clip and container */\n.w3a-profile-dropdown-menu {\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n}\n\n/* Global theme pulse when toggling theme */\n@keyframes w3a-theme-pulse {\n  0% { filter: none; }\n  50% { filter: brightness(1.05) saturate(1.06); }\n  100% { filter: none; }\n}\nbody[data-w3a-theme-pulse=\"1\"] .w3a-profile-dropdown-menu {\n  animation: w3a-theme-pulse 220ms ease;\n}\n\n/* Press feedback for menu items (animate even if state doesn't change) */\n.w3a-dropdown-menu-item {\n  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;\n}\n.w3a-dropdown-menu-item:active {\n  transform: scale(0.98);\n  background: var(--w3a-colors-surface2);\n}\n\n/* Themed focus ring for accessibility */\n.w3a-dropdown-menu-item:focus { outline: none; }\n.w3a-dropdown-menu-item:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n/* Menu item animation states */\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] .w3a-dropdown-menu-item {\n  opacity: 0;\n  transform: translateX(-1rem);\n  animation: none;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] .w3a-dropdown-menu-item {\n  animation: w3a-profile-menu-item-enter 240ms linear forwards;\n  animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);\n}\n\n/* Menu Item Animation Keyframes */\n@keyframes w3a-profile-menu-item-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes w3a-profile-menu-item-exit {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-1rem);\n  }\n}\n\n/* Logout menu item specific styling */\n.w3a-logout-menu-item {\n  border-top: 1px solid var(--w3a-colors-borderPrimary);\n  border-radius: 0px 0px 2rem 2rem;\n  margin-top: 0.5rem;\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown2.js

@@ -6,7 +6,7 @@ import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/components/AccountMenuButton/ProfileDropdown.tsx
-const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLogout, onClose, menuItemsRef, toggleColors, currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, onToggleTheme, transactionSettingsOpen = false, theme = "dark", highlightedMenuItemId }, ref) => {
+const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLogout, onClose, menuItemsRef, toggleColors, currentConfirmConfig, signerMode, onToggleThresholdSigning, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, onToggleTheme, transactionSettingsOpen = false, theme = "dark", highlightedMenuItemId }, ref) => {
 	const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;
 	menuItemsRef.current.length = menuItems.length;
 	const highlightedIndex = useMemo(() => {
@@ -36,6 +36,8 @@ const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLogout, onClose, menu
 				}),
 				currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && /* @__PURE__ */ jsx(TransactionSettingsSection, {
 					currentConfirmConfig,
+					signerMode,
+					onToggleThresholdSigning,
 					onSetUiMode,
 					onToggleShowDetails,
 					onToggleSkipClick,

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown2.js","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { MenuItem } from './MenuItem';\nimport { LogoutMenuItem } from './LogoutMenuItem';\nimport { TransactionSettingsSection } from './TransactionSettingsSection';\nimport type { ProfileDropdownProps } from './types';\nimport './ProfileDropdown.css';\n\ninterface ProfileDropdownWithRefs extends Omit<ProfileDropdownProps, 'menuItemsRef'> {\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Transaction settings props\n  currentConfirmConfig?: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n}\n\nexport const ProfileDropdown = forwardRef<HTMLDivElement, ProfileDropdownWithRefs>(\n  ({\n    isOpen,\n    menuItems,\n    onLogout,\n    onClose,\n    menuItemsRef,\n    toggleColors,\n    currentConfirmConfig,\n    onSetUiMode,\n    onToggleShowDetails,\n    onToggleSkipClick,\n    onSetDelay,\n    onToggleTheme,\n    transactionSettingsOpen = false,\n    theme = 'dark',\n    highlightedMenuItemId,\n  }, ref) => {\n    // Only count transaction settings if it's actually rendered (when expanded)\n    const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;\n\n    menuItemsRef.current.length = menuItems.length;\n\n    const highlightedIndex = useMemo(() => {\n      if (!highlightedMenuItemId) return -1;\n      return menuItems.findIndex((item) => item.id === highlightedMenuItemId || item.label === highlightedMenuItemId);\n    }, [highlightedMenuItemId, menuItems]);\n\n    return (\n      <div\n        ref={ref}\n        className={`w3a-profile-dropdown-morphed ${theme}`}\n        data-state={isOpen ? 'open' : 'closed'}\n      >\n        <div className=\"w3a-profile-dropdown-menu\">\n\n          {/* Menu Items */}\n          {menuItems.map((item, index) => {\n            const refCallback = (el: HTMLElement | null) => {\n              if (menuItemsRef.current) {\n                menuItemsRef.current[index] = el;\n              }\n            };\n            const isHighlighted = index === highlightedIndex;\n\n            return (\n              <MenuItem\n                key={item.id ?? index}\n                ref={refCallback}\n                item={item}\n                onClose={onClose}\n                className=\"\"\n                isHighlighted={isHighlighted}\n                // Set CSS variable to calculate stagger delay in CSS stylesheet\n                style={{ ['--stagger-item-n' as any]: index }}\n              />\n            );\n          })}\n\n          {/* Transaction Settings Section - Always render with animation */}\n          {currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && (\n            <TransactionSettingsSection\n              currentConfirmConfig={currentConfirmConfig}\n              onSetUiMode={onSetUiMode}\n              onToggleShowDetails={onToggleShowDetails}\n              onToggleSkipClick={onToggleSkipClick}\n              onSetDelay={onSetDelay}\n              onToggleTheme={onToggleTheme}\n              isOpen={transactionSettingsOpen}\n              theme={theme}\n              // Set CSS variable to calculate stagger delay in CSS stylesheet\n              style={{ ['--stagger-item-n' as any]: menuItems.length }}\n            />\n          )}\n\n          {/* Logout Section */}\n          <LogoutMenuItem\n            onLogout={onLogout}\n            className=\"w3a-logout-menu-item\"\n            // Set CSS variable to calculate stagger delay in CSS stylesheet\n            style={{ ['--stagger-item-n' as any]: hasTransactionSettings ? menuItems.length + 1 : menuItems.length }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;AAmBA,MAAa,kBAAkB,YAC5B,EACC,QACA,WACA,UACA,SACA,cACA,cACA,sBACA,aACA,qBACA,mBACA,YACA,eACA,0BAA0B,OAC1B,QAAQ,QACR,yBACC,QAAQ;CAET,MAAM,yBAAyB,2BAA2B,wBAAwB,uBAAuB,qBAAqB;AAE9H,cAAa,QAAQ,SAAS,UAAU;CAExC,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,sBAAuB,QAAO;AACnC,SAAO,UAAU,WAAW,SAAS,KAAK,OAAO,yBAAyB,KAAK,UAAU;IACxF,CAAC,uBAAuB;AAE3B,QACE,oBAAC;EACM;EACL,WAAW,gCAAgC;EAC3C,cAAY,SAAS,SAAS;YAE9B,qBAAC;GAAI,WAAU;;IAGZ,UAAU,KAAK,MAAM,UAAU;KAC9B,MAAM,eAAe,OAA2B;AAC9C,UAAI,aAAa,QACf,cAAa,QAAQ,SAAS;;KAGlC,MAAM,gBAAgB,UAAU;AAEhC,YACE,oBAAC;MAEC,KAAK;MACC;MACG;MACT,WAAU;MACK;MAEf,OAAO,GAAG,qBAA4B;QAPjC,KAAK,MAAM;;IAarB,yBAAyB,eAAe,wBAAwB,qBAAqB,cACpF,oBAAC;KACuB;KACT;KACQ;KACF;KACP;KACG;KACf,QAAQ;KACD;KAEP,OAAO,GAAG,qBAA4B,UAAU;;IAKpD,oBAAC;KACW;KACV,WAAU;KAEV,OAAO,GAAG,qBAA4B,yBAAyB,UAAU,SAAS,IAAI,UAAU"}
+{"version":3,"file":"ProfileDropdown2.js","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { MenuItem } from './MenuItem';\nimport { LogoutMenuItem } from './LogoutMenuItem';\nimport { TransactionSettingsSection } from './TransactionSettingsSection';\nimport type { ProfileDropdownProps } from './types';\nimport './ProfileDropdown.css';\n\ninterface ProfileDropdownWithRefs extends Omit<ProfileDropdownProps, 'menuItemsRef'> {\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Transaction settings props\n  currentConfirmConfig?: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n}\n\nexport const ProfileDropdown = forwardRef<HTMLDivElement, ProfileDropdownWithRefs>(\n  ({\n    isOpen,\n    menuItems,\n    onLogout,\n    onClose,\n    menuItemsRef,\n    toggleColors,\n    currentConfirmConfig,\n    signerMode,\n    onToggleThresholdSigning,\n    onSetUiMode,\n    onToggleShowDetails,\n    onToggleSkipClick,\n    onSetDelay,\n    onToggleTheme,\n    transactionSettingsOpen = false,\n    theme = 'dark',\n    highlightedMenuItemId,\n  }, ref) => {\n    // Only count transaction settings if it's actually rendered (when expanded)\n    const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;\n\n    menuItemsRef.current.length = menuItems.length;\n\n    const highlightedIndex = useMemo(() => {\n      if (!highlightedMenuItemId) return -1;\n      return menuItems.findIndex((item) => item.id === highlightedMenuItemId || item.label === highlightedMenuItemId);\n    }, [highlightedMenuItemId, menuItems]);\n\n    return (\n      <div\n        ref={ref}\n        className={`w3a-profile-dropdown-morphed ${theme}`}\n        data-state={isOpen ? 'open' : 'closed'}\n      >\n        <div className=\"w3a-profile-dropdown-menu\">\n\n          {/* Menu Items */}\n          {menuItems.map((item, index) => {\n            const refCallback = (el: HTMLElement | null) => {\n              if (menuItemsRef.current) {\n                menuItemsRef.current[index] = el;\n              }\n            };\n            const isHighlighted = index === highlightedIndex;\n\n            return (\n              <MenuItem\n                key={item.id ?? index}\n                ref={refCallback}\n                item={item}\n                onClose={onClose}\n                className=\"\"\n                isHighlighted={isHighlighted}\n                // Set CSS variable to calculate stagger delay in CSS stylesheet\n                style={{ ['--stagger-item-n' as any]: index }}\n              />\n            );\n          })}\n\n          {/* Transaction Settings Section - Always render with animation */}\n          {currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && (\n            <TransactionSettingsSection\n              currentConfirmConfig={currentConfirmConfig}\n              signerMode={signerMode}\n              onToggleThresholdSigning={onToggleThresholdSigning}\n              onSetUiMode={onSetUiMode}\n              onToggleShowDetails={onToggleShowDetails}\n              onToggleSkipClick={onToggleSkipClick}\n              onSetDelay={onSetDelay}\n              onToggleTheme={onToggleTheme}\n              isOpen={transactionSettingsOpen}\n              theme={theme}\n              // Set CSS variable to calculate stagger delay in CSS stylesheet\n              style={{ ['--stagger-item-n' as any]: menuItems.length }}\n            />\n          )}\n\n          {/* Logout Section */}\n          <LogoutMenuItem\n            onLogout={onLogout}\n            className=\"w3a-logout-menu-item\"\n            // Set CSS variable to calculate stagger delay in CSS stylesheet\n            style={{ ['--stagger-item-n' as any]: hasTransactionSettings ? menuItems.length + 1 : menuItems.length }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;AAmBA,MAAa,kBAAkB,YAC5B,EACC,QACA,WACA,UACA,SACA,cACA,cACA,sBACA,YACA,0BACA,aACA,qBACA,mBACA,YACA,eACA,0BAA0B,OAC1B,QAAQ,QACR,yBACC,QAAQ;CAET,MAAM,yBAAyB,2BAA2B,wBAAwB,uBAAuB,qBAAqB;AAE9H,cAAa,QAAQ,SAAS,UAAU;CAExC,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,sBAAuB,QAAO;AACnC,SAAO,UAAU,WAAW,SAAS,KAAK,OAAO,yBAAyB,KAAK,UAAU;IACxF,CAAC,uBAAuB;AAE3B,QACE,oBAAC;EACM;EACL,WAAW,gCAAgC;EAC3C,cAAY,SAAS,SAAS;YAE9B,qBAAC;GAAI,WAAU;;IAGZ,UAAU,KAAK,MAAM,UAAU;KAC9B,MAAM,eAAe,OAA2B;AAC9C,UAAI,aAAa,QACf,cAAa,QAAQ,SAAS;;KAGlC,MAAM,gBAAgB,UAAU;AAEhC,YACE,oBAAC;MAEC,KAAK;MACC;MACG;MACT,WAAU;MACK;MAEf,OAAO,GAAG,qBAA4B;QAPjC,KAAK,MAAM;;IAarB,yBAAyB,eAAe,wBAAwB,qBAAqB,cACpF,oBAAC;KACuB;KACV;KACc;KACb;KACQ;KACF;KACP;KACG;KACf,QAAQ;KACD;KAEP,OAAO,GAAG,qBAA4B,UAAU;;IAKpD,oBAAC;KACW;KACV,WAAU;KAEV,OAAO,GAAG,qBAA4B,yBAAyB,UAAU,SAAS,IAAI,UAAU"}

package/dist/esm/react/components/AccountMenuButton/TransactionSettingsSection.js

@@ -4,13 +4,14 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react/components/AccountMenuButton/TransactionSettingsSection.tsx
-const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, className, style, isOpen = true, theme = "dark" }) => {
+const TransactionSettingsSection = ({ currentConfirmConfig, signerMode, onToggleThresholdSigning, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, className, style, isOpen = true, theme = "dark" }) => {
 	const handleClick = (e) => {
 		e.stopPropagation();
 	};
 	const disableRequireClick = currentConfirmConfig?.uiMode === "skip";
 	const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== "autoProceed";
 	const disableAll = !isOpen;
+	const selectedSignerMode = signerMode?.mode ?? "local-signer";
 	return /* @__PURE__ */ jsx("div", {
 		className: `w3a-dropdown-tx-settings-root ${isOpen ? "is-expanded" : ""} ${className || ""}`,
 		style,
@@ -29,6 +30,39 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 						gap: 8
 					},
 					children: [
+						signerMode && onToggleThresholdSigning && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+							className: "w3a-confirmation-options",
+							children: "Signing Mode"
+						}), /* @__PURE__ */ jsx("div", {
+							style: { width: "100%" },
+							children: /* @__PURE__ */ jsx(SegmentedControl, {
+								items: [{
+									value: "local-signer",
+									label: "Local Signer",
+									disabled: disableAll
+								}, {
+									value: "threshold-signer",
+									label: "MPC Signer",
+									disabled: disableAll
+								}],
+								value: selectedSignerMode,
+								onValueChange: (v) => onToggleThresholdSigning(v === "threshold-signer"),
+								activeBg: "var(--w3a-colors-primary)",
+								height: 40,
+								buttonFontSize: 12,
+								containerStyle: {
+									background: "var(--w3a-colors-surface2)",
+									width: "100%"
+								},
+								buttonStyle: {
+									display: "grid",
+									placeItems: "center",
+									lineHeight: 1,
+									padding: "0 10px"
+								},
+								activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
+							})
+						})] }),
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 							className: "w3a-confirmation-options",
 							children: "Confirmation Options"
@@ -67,7 +101,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 									lineHeight: 1,
 									padding: "0 10px"
 								},
-								activeButtonStyle: { color: "var(--w3a-colors-buttonPrimary)" }
+								activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
 							})
 						})] }),
 						/* @__PURE__ */ jsx("div", {
@@ -106,7 +140,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 										lineHeight: 1,
 										padding: "0 10px"
 									},
-									activeButtonStyle: { color: "var(--w3a-colors-buttonPrimary)" }
+									activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
 								})
 							})
 						}),

package/dist/esm/react/components/AccountMenuButton/TransactionSettingsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionSettingsSection.js","names":["TransactionSettingsSection: React.FC<TransactionSettingsSectionProps>"],"sources":["../../../../../src/react/components/AccountMenuButton/TransactionSettingsSection.tsx"],"sourcesContent":["import React from 'react';\nimport { Slider } from './Slider';\nimport type { TransactionSettingsSectionProps } from './types';\nimport { SegmentedControl } from '../PasskeyAuthMenu/ui/SegmentedControl';\n\nexport const TransactionSettingsSection: React.FC<TransactionSettingsSectionProps> = ({\n  currentConfirmConfig,\n  onSetUiMode,\n  onToggleShowDetails,\n  onToggleSkipClick,\n  onSetDelay,\n  className,\n  style,\n  isOpen = true,\n  theme = 'dark'\n}) => {\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const disableRequireClick = currentConfirmConfig?.uiMode === 'skip';\n  const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== 'autoProceed';\n  const disableAll = !isOpen;\n\n  return (\n    <div\n      className={`w3a-dropdown-tx-settings-root ${isOpen ? 'is-expanded' : ''} ${className || ''}`}\n      style={style}\n      onClick={handleClick}\n    >\n      <div className=\"w3a-dropdown-toggle-tx-settings\">\n        <div\n          className=\"w3a-dropdown-toggle-tx-settings-content\"\n          aria-hidden={!isOpen}\n          style={{ pointerEvents: isOpen ? 'auto' : 'none' }}\n        >\n          <div style={{\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 8\n          }}>\n            <div>\n              <div className=\"w3a-confirmation-options\">\n                Confirmation Options\n              </div>\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'skip', label: 'skip', disabled: disableAll },\n                    { value: 'modal', label: 'modal', disabled: disableAll },\n                    { value: 'drawer', label: 'drawer', disabled: disableAll },\n                  ]}\n                  value={(currentConfirmConfig?.uiMode ?? 'modal')}\n                  onValueChange={(v) => onSetUiMode?.(v as 'skip' | 'modal' | 'drawer')}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-buttonPrimary)' }}\n                />\n              </div>\n            </div>\n            <div\n              style={{\n                opacity: disableRequireClick ? 0.6 : 1,\n                pointerEvents: disableRequireClick ? 'none' : 'auto'\n              }}\n            >\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'auto', label: 'auto proceed', disabled: disableAll || disableRequireClick },\n                    { value: 'require', label: 'require click', disabled: disableAll || disableRequireClick },\n                  ]}\n                  value={(currentConfirmConfig?.behavior === 'autoProceed') ? 'auto' : 'require'}\n                  onValueChange={(v) => {\n                    const wantsAuto = v === 'auto';\n                    const isAuto = currentConfirmConfig?.behavior === 'autoProceed';\n                    if (wantsAuto !== isAuto) onToggleSkipClick?.();\n                  }}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-buttonPrimary)' }}\n                />\n              </div>\n            </div>\n            <Slider\n              disabled={disableAll || disableDelaySlider}\n              min={0}\n              max={6}\n              step={1}\n              value={Math.round((currentConfirmConfig?.autoProceedDelay ?? 0) / 500)}\n              onChange={(v) => onSetDelay(v * 500)}\n              theme={theme}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAaA,8BAAyE,EACpF,sBACA,aACA,qBACA,mBACA,YACA,WACA,OACA,SAAS,MACT,QAAQ,aACJ;CAEJ,MAAM,eAAe,MAAwB;AAC3C,IAAE;;CAGJ,MAAM,sBAAsB,sBAAsB,WAAW;CAC7D,MAAM,qBAAqB,uBAAuB,sBAAsB,aAAa;CACrF,MAAM,aAAa,CAAC;AAEpB,QACE,oBAAC;EACC,WAAW,iCAAiC,SAAS,gBAAgB,GAAG,GAAG,aAAa;EACjF;EACP,SAAS;YAET,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAU;IACV,eAAa,CAAC;IACd,OAAO,EAAE,eAAe,SAAS,SAAS;cAE1C,qBAAC;KAAI,OAAO;MACV,OAAO;MACP,SAAS;MACT,eAAe;MACf,KAAK;;;MAEL,qBAAC,oBACC,oBAAC;OAAI,WAAU;iBAA2B;UAG1C,oBAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,oBAAC;QACC,OAAO;SACL;UAAE,OAAO;UAAQ,OAAO;UAAQ,UAAU;;SAC1C;UAAE,OAAO;UAAS,OAAO;UAAS,UAAU;;SAC5C;UAAE,OAAO;UAAU,OAAO;UAAU,UAAU;;;QAEhD,OAAQ,sBAAsB,UAAU;QACxC,gBAAgB,MAAM,cAAc;QACpC,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAIlC,oBAAC;OACC,OAAO;QACL,SAAS,sBAAsB,KAAM;QACrC,eAAe,sBAAsB,SAAS;;iBAGhD,oBAAC;QAAI,OAAO,EAAE,OAAO;kBACnB,oBAAC;SACC,OAAO,CACL;UAAE,OAAO;UAAQ,OAAO;UAAgB,UAAU,cAAc;YAChE;UAAE,OAAO;UAAW,OAAO;UAAiB,UAAU,cAAc;;SAEtE,OAAQ,sBAAsB,aAAa,gBAAiB,SAAS;SACrE,gBAAgB,MAAM;UACpB,MAAM,YAAY,MAAM;UACxB,MAAM,SAAS,sBAAsB,aAAa;AAClD,cAAI,cAAc,OAAQ;;SAE5B,UAAU;SACV,QAAQ;SACR,gBAAgB;SAChB,gBAAgB;UAAE,YAAY;UAA8B,OAAO;;SACnE,aAAa;UAAE,SAAS;UAAQ,YAAY;UAAU,YAAY;UAAG,SAAS;;SAC9E,mBAAmB,EAAE,OAAO;;;;MAIlC,oBAAC;OACC,UAAU,cAAc;OACxB,KAAK;OACL,KAAK;OACL,MAAM;OACN,OAAO,KAAK,OAAO,sBAAsB,oBAAoB,KAAK;OAClE,WAAW,MAAM,WAAW,IAAI;OACzB"}
+{"version":3,"file":"TransactionSettingsSection.js","names":["TransactionSettingsSection: React.FC<TransactionSettingsSectionProps>"],"sources":["../../../../../src/react/components/AccountMenuButton/TransactionSettingsSection.tsx"],"sourcesContent":["import React from 'react';\nimport { Slider } from './Slider';\nimport type { TransactionSettingsSectionProps } from './types';\nimport { SegmentedControl } from '../PasskeyAuthMenu/ui/SegmentedControl';\n\nexport const TransactionSettingsSection: React.FC<TransactionSettingsSectionProps> = ({\n  currentConfirmConfig,\n  signerMode,\n  onToggleThresholdSigning,\n  onSetUiMode,\n  onToggleShowDetails,\n  onToggleSkipClick,\n  onSetDelay,\n  className,\n  style,\n  isOpen = true,\n  theme = 'dark'\n}) => {\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const disableRequireClick = currentConfirmConfig?.uiMode === 'skip';\n  const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== 'autoProceed';\n  const disableAll = !isOpen;\n  const selectedSignerMode = signerMode?.mode ?? 'local-signer';\n\n  return (\n    <div\n      className={`w3a-dropdown-tx-settings-root ${isOpen ? 'is-expanded' : ''} ${className || ''}`}\n      style={style}\n      onClick={handleClick}\n    >\n      <div className=\"w3a-dropdown-toggle-tx-settings\">\n        <div\n          className=\"w3a-dropdown-toggle-tx-settings-content\"\n          aria-hidden={!isOpen}\n          style={{ pointerEvents: isOpen ? 'auto' : 'none' }}\n        >\n          <div style={{\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 8\n          }}>\n            {signerMode && onToggleThresholdSigning && (\n              <div>\n                <div className=\"w3a-confirmation-options\">\n                  Signing Mode\n                </div>\n                <div style={{ width: '100%' }}>\n                  <SegmentedControl\n                    items={[\n                      { value: 'local-signer', label: 'Local Signer', disabled: disableAll },\n                      { value: 'threshold-signer', label: 'MPC Signer', disabled: disableAll },\n                    ]}\n                    value={selectedSignerMode}\n                    onValueChange={(v) => onToggleThresholdSigning(v === 'threshold-signer')}\n                    activeBg={'var(--w3a-colors-primary)'}\n                    height={40}\n                    buttonFontSize={12}\n                    containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                    buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                    activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                  />\n                </div>\n              </div>\n            )}\n            <div>\n              <div className=\"w3a-confirmation-options\">\n                Confirmation Options\n              </div>\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'skip', label: 'skip', disabled: disableAll },\n                    { value: 'modal', label: 'modal', disabled: disableAll },\n                    { value: 'drawer', label: 'drawer', disabled: disableAll },\n                  ]}\n                  value={(currentConfirmConfig?.uiMode ?? 'modal')}\n                  onValueChange={(v) => onSetUiMode?.(v as 'skip' | 'modal' | 'drawer')}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                />\n              </div>\n            </div>\n            <div\n              style={{\n                opacity: disableRequireClick ? 0.6 : 1,\n                pointerEvents: disableRequireClick ? 'none' : 'auto'\n              }}\n            >\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'auto', label: 'auto proceed', disabled: disableAll || disableRequireClick },\n                    { value: 'require', label: 'require click', disabled: disableAll || disableRequireClick },\n                  ]}\n                  value={(currentConfirmConfig?.behavior === 'autoProceed') ? 'auto' : 'require'}\n                  onValueChange={(v) => {\n                    const wantsAuto = v === 'auto';\n                    const isAuto = currentConfirmConfig?.behavior === 'autoProceed';\n                    if (wantsAuto !== isAuto) onToggleSkipClick?.();\n                  }}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                />\n              </div>\n            </div>\n            <Slider\n              disabled={disableAll || disableDelaySlider}\n              min={0}\n              max={6}\n              step={1}\n              value={Math.round((currentConfirmConfig?.autoProceedDelay ?? 0) / 500)}\n              onChange={(v) => onSetDelay(v * 500)}\n              theme={theme}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAaA,8BAAyE,EACpF,sBACA,YACA,0BACA,aACA,qBACA,mBACA,YACA,WACA,OACA,SAAS,MACT,QAAQ,aACJ;CAEJ,MAAM,eAAe,MAAwB;AAC3C,IAAE;;CAGJ,MAAM,sBAAsB,sBAAsB,WAAW;CAC7D,MAAM,qBAAqB,uBAAuB,sBAAsB,aAAa;CACrF,MAAM,aAAa,CAAC;CACpB,MAAM,qBAAqB,YAAY,QAAQ;AAE/C,QACE,oBAAC;EACC,WAAW,iCAAiC,SAAS,gBAAgB,GAAG,GAAG,aAAa;EACjF;EACP,SAAS;YAET,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAU;IACV,eAAa,CAAC;IACd,OAAO,EAAE,eAAe,SAAS,SAAS;cAE1C,qBAAC;KAAI,OAAO;MACV,OAAO;MACP,SAAS;MACT,eAAe;MACf,KAAK;;;MAEJ,cAAc,4BACb,qBAAC,oBACC,oBAAC;OAAI,WAAU;iBAA2B;UAG1C,oBAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,oBAAC;QACC,OAAO,CACL;SAAE,OAAO;SAAgB,OAAO;SAAgB,UAAU;WAC1D;SAAE,OAAO;SAAoB,OAAO;SAAc,UAAU;;QAE9D,OAAO;QACP,gBAAgB,MAAM,yBAAyB,MAAM;QACrD,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAKpC,qBAAC,oBACC,oBAAC;OAAI,WAAU;iBAA2B;UAG1C,oBAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,oBAAC;QACC,OAAO;SACL;UAAE,OAAO;UAAQ,OAAO;UAAQ,UAAU;;SAC1C;UAAE,OAAO;UAAS,OAAO;UAAS,UAAU;;SAC5C;UAAE,OAAO;UAAU,OAAO;UAAU,UAAU;;;QAEhD,OAAQ,sBAAsB,UAAU;QACxC,gBAAgB,MAAM,cAAc;QACpC,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAIlC,oBAAC;OACC,OAAO;QACL,SAAS,sBAAsB,KAAM;QACrC,eAAe,sBAAsB,SAAS;;iBAGhD,oBAAC;QAAI,OAAO,EAAE,OAAO;kBACnB,oBAAC;SACC,OAAO,CACL;UAAE,OAAO;UAAQ,OAAO;UAAgB,UAAU,cAAc;YAChE;UAAE,OAAO;UAAW,OAAO;UAAiB,UAAU,cAAc;;SAEtE,OAAQ,sBAAsB,aAAa,gBAAiB,SAAS;SACrE,gBAAgB,MAAM;UACpB,MAAM,YAAY,MAAM;UACxB,MAAM,SAAS,sBAAsB,aAAa;AAClD,cAAI,cAAc,OAAQ;;SAE5B,UAAU;SACV,QAAQ;SACR,gBAAgB;SAChB,gBAAgB;UAAE,YAAY;UAA8B,OAAO;;SACnE,aAAa;UAAE,SAAS;UAAQ,YAAY;UAAU,YAAY;UAAG,SAAS;;SAC9E,mBAAmB,EAAE,OAAO;;;;MAIlC,oBAAC;OACC,UAAU,cAAc;OACxB,KAAK;OACL,KAAK;OACL,MAAM;OACN,OAAO,KAAK,OAAO,sBAAsB,oBAAoB,KAAK;OAClE,WAAW,MAAM,WAAW,IAAI;OACzB"}

package/dist/esm/react/components/AccountMenuButton/Web3AuthProfileButton-DXFRw8ND.css

@@ -0,0 +1,77 @@
+* {
+  box-sizing: border-box;
+}
+
+.w3a-profile-button-morphable {
+  position: relative;
+  background-color: var(--w3a-colors-colorBackground);
+  border: 1px solid var(--w3a-colors-borderPrimary);
+  border-radius: 2rem;
+  box-shadow: var(--w3a-shadows-sm);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--w3a-colors-textPrimary);
+  cursor: pointer;
+  outline: none;
+  overflow: visible;
+  width: fit-content;
+  transition: none;
+}
+
+.w3a-profile-button-morphable:hover {
+  border-color: var(--w3a-colors-borderHover);
+}
+
+.w3a-profile-button-icon {
+  flex-shrink: 0;
+}
+
+.w3a-profile-button-icon svg {
+  overflow: visible;
+}
+
+.w3a-profile-button-username {
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.w3a-profile-button-icon {
+  color: var(--w3a-colors-textSecondary);
+}
+
+.w3a-profile-button-username {
+  display: block; color: var(--w3a-colors-textSecondary);
+}
+
+.w3a-profile-button-username.hidden {
+  display: none;
+}
+
+.w3a-user-account--toggle-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.w3a-user-account--toggle-text {
+  flex: 1;
+}
+
+.w3a-user-account--toggle-title {
+  font-weight: 500;
+  color: var(--w3a-colors-textPrimary);
+  font-size: 14px;
+  margin: 0;
+}
+
+.w3a-user-account--toggle-description {
+  font-size: 14px;
+  color: var(--w3a-colors-textMuted);
+  margin: 0;
+}
+
+
+/*# sourceMappingURL=Web3AuthProfileButton-DXFRw8ND.css.map*/

package/dist/esm/react/components/AccountMenuButton/Web3AuthProfileButton-DXFRw8ND.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"Web3AuthProfileButton-DXFRw8ND.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/Web3AuthProfileButton.css"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n.w3a-profile-button-morphable {\n  position: relative;\n  background-color: var(--w3a-colors-colorBackground);\n  border: 1px solid var(--w3a-colors-borderPrimary);\n  border-radius: 2rem;\n  box-shadow: var(--w3a-shadows-sm);\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--w3a-colors-textPrimary);\n  cursor: pointer;\n  outline: none;\n  overflow: visible;\n  width: fit-content;\n  transition: none;\n}\n\n.w3a-profile-button-morphable:hover {\n  border-color: var(--w3a-colors-borderHover);\n}\n\n.w3a-profile-button-icon {\n  flex-shrink: 0;\n}\n\n.w3a-profile-button-icon svg {\n  overflow: visible;\n}\n\n.w3a-profile-button-username {\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n}\n\n.w3a-profile-button-icon {\n  color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username {\n  display: block; color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username.hidden {\n  display: none;\n}\n\n.w3a-user-account--toggle-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  transition: opacity 0.15s ease-in-out;\n}\n\n.w3a-user-account--toggle-text {\n  flex: 1;\n}\n\n.w3a-user-account--toggle-title {\n  font-weight: 500;\n  color: var(--w3a-colors-textPrimary);\n  font-size: 14px;\n  margin: 0;\n}\n\n.w3a-user-account--toggle-description {\n  font-size: 14px;\n  color: var(--w3a-colors-textMuted);\n  margin: 0;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}

package/dist/esm/react/components/AccountMenuButton/icons/TouchIcon-DNgbAK_i.css

@@ -0,0 +1,41 @@
+/* TouchIcon specific styles and animations */
+
+.w3a-fingerprint-icon {
+  transition: transform 400ms ease;
+}
+
+.w3a-fingerprint-icon path {
+  /* Normalize path length so dash animations are simple */
+  stroke: currentColor;
+}
+
+.w3a-fingerprint-icon.open path {
+  /* Draw the fingerprint when expanding/opening */
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: w3a-fp-open 1.6s ease-out 0.1s both;
+}
+
+/* Animate when closing the menu */
+.w3a-fingerprint-icon.closed path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: w3a-fp-close 1.6s ease-out 0.1s both;
+}
+
+@keyframes w3a-fp-open {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes w3a-fp-close {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+.w3a-fingerprint-icon:hover {
+  transform: rotate(180deg) scale(1.2);
+}
+
+
+/*# sourceMappingURL=TouchIcon-DNgbAK_i.css.map*/

package/dist/esm/react/components/AccountMenuButton/icons/TouchIcon-DNgbAK_i.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchIcon-DNgbAK_i.css","names":[],"sources":["../../../../../../src/react/components/AccountMenuButton/icons/TouchIcon.css"],"sourcesContent":["/* TouchIcon specific styles and animations */\n\n.w3a-fingerprint-icon {\n  transition: transform 400ms ease;\n}\n\n.w3a-fingerprint-icon path {\n  /* Normalize path length so dash animations are simple */\n  stroke: currentColor;\n}\n\n.w3a-fingerprint-icon.open path {\n  /* Draw the fingerprint when expanding/opening */\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: w3a-fp-open 1.6s ease-out 0.1s both;\n}\n\n/* Animate when closing the menu */\n.w3a-fingerprint-icon.closed path {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: w3a-fp-close 1.6s ease-out 0.1s both;\n}\n\n@keyframes w3a-fp-open {\n  from { stroke-dashoffset: 1; }\n  to { stroke-dashoffset: 0; }\n}\n\n@keyframes w3a-fp-close {\n  from { stroke-dashoffset: 1; }\n  to { stroke-dashoffset: 0; }\n}\n\n.w3a-fingerprint-icon:hover {\n  transform: rotate(180deg) scale(1.2);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA"}

package/dist/esm/react/components/AccountMenuButton/index.js

@@ -1,4 +1,4 @@
-import { AccountId, init_accountIds, toAccountId } from "../../sdk/src/core/types/accountIds.js";
+import { AccountId, toAccountId } from "../../src/core/types/accountIds.js";
 import { useTatchi } from "../../context/index.js";
 import { Theme, useTheme } from "../theme/ThemeProvider.js";
 import { KeyIcon } from "./icons/KeyIcon.js";
@@ -14,12 +14,11 @@ import { PROFILE_MENU_ITEM_IDS } from "./types.js";
 import { QRCodeScanner } from "../QRCodeScanner.js";
 import { LinkedDevicesModal } from "./LinkedDevicesModal2.js";
 import "./Web3AuthProfileButton.js";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 
 //#region src/react/components/AccountMenuButton/index.tsx
-init_accountIds();
 /**
 * Account Menu Button Component
 * Provides user settings, account management, and device linking.
@@ -59,6 +58,8 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 	const [showLinkedDevices, setShowLinkedDevices] = useState(false);
 	const [transactionSettingsOpen, setTransactionSettingsOpen] = useState(false);
 	const [currentConfirmConfig, setCurrentConfirmConfig] = useState(null);
+	const [currentSignerMode, setCurrentSignerMode] = useState(null);
+	const lastThresholdSignerModeRef = useRef(null);
 	const { isOpen, refs, handleToggle, handleClose } = useProfileState({
 		open: typeof isMenuOpen === "boolean" ? isMenuOpen : void 0,
 		onOpenChange: onMenuOpenChange
@@ -68,24 +69,34 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 		if (!tatchi) return;
 		if (!loginState.isLoggedIn || !loggedInAccountId) {
 			setCurrentConfirmConfig(null);
+			setCurrentSignerMode(null);
 			return;
 		}
 		let cancelled = false;
 		if (AccountId.validate(loggedInAccountId).valid) tatchi.userPreferences.setCurrentUser(toAccountId(loggedInAccountId));
 		setCurrentConfirmConfig(tatchi.getConfirmationConfig());
-		const unsub = tatchi.userPreferences.onConfirmationConfigChange?.((cfg) => {
+		setCurrentSignerMode(tatchi.getSignerMode());
+		const unsubConfirmConfig = tatchi.userPreferences.onConfirmationConfigChange?.((cfg) => {
 			if (cancelled) return;
 			setCurrentConfirmConfig(cfg);
 		});
+		const unsubSignerMode = tatchi.userPreferences.onSignerModeChange?.((mode) => {
+			if (cancelled) return;
+			setCurrentSignerMode(mode);
+		});
 		return () => {
 			cancelled = true;
-			unsub?.();
+			unsubConfirmConfig?.();
+			unsubSignerMode?.();
 		};
 	}, [
 		tatchi,
 		loginState.isLoggedIn,
 		loggedInAccountId
 	]);
+	useEffect(() => {
+		if (currentSignerMode?.mode === "threshold-signer") lastThresholdSignerModeRef.current = currentSignerMode;
+	}, [currentSignerMode]);
 	const handleSetUiMode = (mode) => {
 		tatchi.setConfirmationConfig({ uiMode: mode });
 	};
@@ -107,6 +118,14 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 			}, 220);
 		}
 	};
+	const handleToggleThresholdSigning = (enabled) => {
+		if (enabled) {
+			const prev = lastThresholdSignerModeRef.current;
+			tatchi.setSignerMode(prev?.mode === "threshold-signer" ? prev : "threshold-signer");
+			return;
+		}
+		tatchi.setSignerMode("local-signer");
+	};
 	const MENU_ITEMS = useMemo(() => [
 		{
 			id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,
@@ -225,6 +244,8 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 				menuItemsRef: refs.menuItemsRef,
 				toggleColors,
 				currentConfirmConfig,
+				signerMode: currentSignerMode ?? void 0,
+				onToggleThresholdSigning: handleToggleThresholdSigning,
 				onSetUiMode: handleSetUiMode,
 				onToggleSkipClick: handleToggleSkipClick,
 				onSetDelay: handleSetDelay,