@seams/wallet 0.10.2 → 0.12.0

package/dist/.build-inputs.sha256

@@ -1 +1 @@
-d81ed62ded3b255b97cd863f1d3164d0b6e3a092fba5f99021a38a72eb8c2988
+cac337f5d60ac07e7f5ca7219b430e7f4a2cf19050cd38956b352906687b6759

package/dist/esm/SeamsWeb/operations/recovery/walletRecoveryCodeBackup.js

@@ -0,0 +1,100 @@
+import { createWalletIframeSurfaceMeasurementReporter } from "../../walletIframe/host/surface-measurement-reporter.js";
+//#region src/SeamsWeb/operations/recovery/walletRecoveryCodeBackup.ts
+const CANCELLED_MESSAGE = "Recovery-code backup was cancelled before acknowledgement";
+/**
+* Shows the recovery-code backup dialog and resolves with the user's
+* acknowledgement. This wrapper owns the promise contract: an acknowledged
+* close resolves as backed-up, an unacknowledged close defers during
+* registration and cancels from the account menu, and Escape always cancels.
+*/
+async function showRecoveryCodeExperience(experience, measurementBinding = { kind: "disabled" }, options = {}) {
+	if (typeof document === "undefined") throw new Error("Wallet recovery-code backup requires a browser or a backup handler");
+	const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	if (options.shouldCancel?.()) throw new Error(CANCELLED_MESSAGE);
+	const surfaceModule = await import("../../../core/signingEngine/uiConfirm/ui/preact/mountRecoveryCodeBackupSurface.js");
+	if (options.shouldCancel?.()) throw new Error(CANCELLED_MESSAGE);
+	let measurementReporter = null;
+	let surface = null;
+	let settled = false;
+	return await new Promise((resolve, reject) => {
+		const cleanup = () => {
+			measurementReporter?.disconnect();
+			measurementReporter = null;
+			surface?.dispose();
+			surface = null;
+			previousFocus?.focus();
+		};
+		const settle = (result) => {
+			if (settled) return;
+			settled = true;
+			cleanup();
+			if (result instanceof Error) reject(result);
+			else resolve(result);
+		};
+		const handleClose = (detail) => {
+			switch (detail.kind) {
+				case "dismissed":
+					settle(new Error(CANCELLED_MESSAGE));
+					return;
+				case "recovery_codes":
+					if (detail.acknowledged) {
+						settle({ kind: "wallet_recovery_codes_backed_up_v1" });
+						return;
+					}
+					if (experience.kind === "direct_backup" && experience.request.continuation === "registration_may_defer") {
+						settle({ kind: "wallet_recovery_code_backup_deferred_v1" });
+						return;
+					}
+					settle(new Error(CANCELLED_MESSAGE));
+					return;
+			}
+		};
+		try {
+			surface = surfaceModule.mountRecoveryCodeBackupSurface({
+				parent: document.body,
+				appearance: options.appearance,
+				experience,
+				surface: measurementBinding.kind === "wallet_iframe" ? "wallet-iframe" : "standalone",
+				onClose: handleClose,
+				onCancel: () => settle(new Error(CANCELLED_MESSAGE)),
+				onShown: (dialog) => {
+					if (settled || measurementBinding.kind !== "wallet_iframe") return;
+					measurementReporter = createWalletIframeSurfaceMeasurementReporter({
+						kind: "request_scroll_surface",
+						requestId: measurementBinding.requestId,
+						element: dialog,
+						postMeasurement: postRecoveryMeasurement.bind(null, dialog, measurementBinding.postMeasurement)
+					});
+				}
+			});
+		} catch (error) {
+			settle(error instanceof Error ? error : new Error(String(error)));
+		}
+	});
+}
+async function showWalletRecoveryCodeBackupUi(request, measurementBinding = { kind: "disabled" }) {
+	return await showRecoveryCodeExperience({
+		kind: "direct_backup",
+		request
+	}, measurementBinding);
+}
+async function showWalletRecoveryCodesUi(request, measurementBinding = { kind: "disabled" }, options = {}) {
+	return await showRecoveryCodeExperience({
+		kind: "account_menu",
+		...request
+	}, measurementBinding, options);
+}
+function postRecoveryMeasurement(dialog, postMeasurement, measurement) {
+	if (measurement.kind !== "measured_v1") throw new Error("Recovery codes require a request surface measurement");
+	postMeasurement({
+		kind: "measured_v1",
+		requestId: measurement.requestId,
+		sequence: measurement.sequence,
+		widthCssPx: dialog.dataset.seamsRecoveryStage === "recovery_codes" ? 688 : 480,
+		heightCssPx: measurement.heightCssPx
+	});
+}
+//#endregion
+export { showWalletRecoveryCodeBackupUi, showWalletRecoveryCodesUi };
+
+//# sourceMappingURL=walletRecoveryCodeBackup.js.map

package/dist/esm/SeamsWeb/walletIframe/host/ui/auth-menu/AuthMenuSurface.js

@@ -1,4 +1,6 @@
 import { isLinkedDeviceTargetEmailAddressV1 } from "../../../../../core/types/linkDevice.js";
+import { EMAIL_OTP_RECOVERY_KEY_ALPHABET } from "../../../../../shared-ts/src/utils/emailOtpRecoveryKey.js";
+import "../../../../../shared-ts/src/wallet-recovery/recoveryCodes.js";
 import { demoEmailOtpCodeFromDelivery } from "../../../../../core/signingEngine/session/emailOtp/challengeDelivery.js";
 import { isAuthMenuActionReady, isAuthMenuGoogleActionReady, isAuthMenuLoadingStatus, isAuthMenuReady, resolveAuthMenuLoginAccount } from "../../auth-menu/domain.js";
 import { PadlockIcon } from "../../../../../core/signingEngine/uiConfirm/ui/preact/PadlockIcon.js";
@@ -19,8 +21,40 @@ function renderDemoEmailCode(delivery) {
 }
 const AUTH_MENU_TITLE_ID = "seams-auth-menu-title";
 const AUTH_MENU_ACCOUNT_LIST_ID = "seams-auth-menu-account-list";
-function otpCodeDigits(code) {
-	return code.padEnd(6, " ").slice(0, 6).split("");
+function otpCodeDigits(code, length = 6) {
+	return code.padEnd(length, " ").slice(0, length).split("");
+}
+const RECOVERY_CODE_CHARACTERS = new Set(EMAIL_OTP_RECOVERY_KEY_ALPHABET);
+function recoveryInputCharacters(code) {
+	let characters = "";
+	for (const character of code.toUpperCase()) {
+		const read = character === "O" ? "0" : character === "I" || character === "L" ? "1" : character;
+		if (RECOVERY_CODE_CHARACTERS.has(read)) characters += read;
+	}
+	return characters;
+}
+function renderRecoveryCodeGroups(code, caret) {
+	const groups = [];
+	for (let start = 0; start < 32; start += 4) {
+		const end = start + 4;
+		const slots = [];
+		for (let index = start; index < end; index += 1) {
+			const character = code[index] ?? "";
+			const classes = ["seams-otp-slot"];
+			if (character) classes.push("is-filled");
+			if (index === caret) classes.push("is-caret");
+			slots.push(/* @__PURE__ */ jsx("span", {
+				class: classes.join(" "),
+				children: character
+			}, index));
+		}
+		const active = caret !== null && caret >= start && caret < end;
+		groups.push(/* @__PURE__ */ jsx("div", {
+			class: `seams-recovery-code-group ${active ? "is-active" : ""}`,
+			children: slots
+		}, start));
+	}
+	return groups;
 }
 function renderOtpCodeDigit(digit) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
@@ -39,6 +73,10 @@ function recoveryAnnouncement(viewModel) {
 	if (viewModel.stage === "sign_in_ready") return "Wallet recovered. Unlock it to continue.";
 	return "";
 }
+function recoveryBackLabel(viewModel) {
+	if (viewModel.kind !== "recovery") return "Back";
+	return viewModel.stage === "choose_method" ? "Back to recovery code" : "Back to unlock wallet";
+}
 function recoveryNavigationLocked(viewModel) {
 	return viewModel.kind === "recovery" && viewModel.stage === "finalizing";
 }
@@ -179,7 +217,10 @@ const ACCOUNT_MENU_EXIT_MS = 160;
 var AuthMenuSurface = class extends Component {
 	constructor(..._args) {
 		super(..._args);
-		this.state = { accountMenu: "closed" };
+		this.state = {
+			accountMenu: "closed",
+			recoveryCaret: null
+		};
 		this.accountMenuExitTimer = null;
 		this.accountMenuChoice = null;
 		this.previouslyFocusedElement = null;
@@ -352,13 +393,30 @@ var AuthMenuSurface = class extends Component {
 		};
 		this.onRecoveryCodeInput = (event) => {
 			if (!(event.currentTarget instanceof HTMLInputElement)) return;
+			if (this.viewModel.kind !== "recovery") return;
+			const input = event.currentTarget;
+			const raw = input.value;
+			const caret = recoveryInputCharacters(raw.slice(0, input.selectionStart ?? raw.length)).length;
+			const code = recoveryInputCharacters(raw).slice(0, 32);
+			if (input.value !== code) {
+				input.value = code;
+				input.setSelectionRange(Math.min(caret, code.length), Math.min(caret, code.length));
+			}
+			this.syncRecoveryCaret(input);
 			this.emitIntent({
 				kind: "recovery_code_changed",
-				recoveryCode: event.currentTarget.value
+				recoveryCode: code
 			});
 		};
+		this.onRecoveryCaretMove = (event) => {
+			if (event.currentTarget instanceof HTMLInputElement) this.syncRecoveryCaret(event.currentTarget);
+		};
+		this.onRecoveryCodeBlur = () => {
+			this.setState({ recoveryCaret: null });
+		};
 		this.onRecoverySubmit = (event) => {
 			event.preventDefault();
+			this.emitIntent({ kind: "recovery_code_submit" });
 		};
 		this.onRecoveryPasskeySelected = () => {
 			this.emitIntent({ kind: "recovery_passkey_selected" });
@@ -498,6 +556,10 @@ var AuthMenuSurface = class extends Component {
 			if (previous?.kind !== "recovery" || previous.stage !== "enter_code") this.props.element.querySelector("[data-recovery-code]")?.focus();
 			return;
 		}
+		if (current.stage === "choose_method") {
+			if (stageChanged) this.props.element.querySelector("[data-recovery-target]")?.focus();
+			return;
+		}
 		const becameRecoverable = current.status.kind === "recoverable" && previous?.kind === "recovery" && previous.status.kind !== "recoverable";
 		if ((stageChanged || becameRecoverable) && (current.stage === "passkey_ready" || current.stage === "finalizing" || current.stage === "sign_in_ready")) this.props.element.querySelector("[data-auth-menu-primary]")?.focus();
 	}
@@ -531,6 +593,11 @@ var AuthMenuSurface = class extends Component {
 	focusableElements() {
 		return Array.from(this.props.element.querySelectorAll("button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex=\"-1\"])"));
 	}
+	syncRecoveryCaret(input) {
+		const caret = Math.min(input.selectionStart ?? input.value.length, 31);
+		const recoveryCaret = input.value.length < 32 ? caret : null;
+		if (recoveryCaret !== this.state.recoveryCaret) this.setState({ recoveryCaret });
+	}
 	emitIntent(intent) {
 		this.props.onIntent(intent);
 	}
@@ -554,40 +621,51 @@ var AuthMenuSurface = class extends Component {
 			"aria-busy": loading ? "true" : "false",
 			tabIndex: -1,
 			onKeyDown: this.onKeydown,
-			children: [/* @__PURE__ */ jsxs("div", {
-				class: "seams-content-switcher",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
-						type: "button",
-						"aria-label": recovery ? "Back to unlock wallet" : "Back",
-						"data-auth-menu-close": true,
-						disabled: recoveryNavigationLocked(viewModel),
-						onClick: this.onBackClick,
-						children: backIcon()
-					}),
-					recovery ? /* @__PURE__ */ jsx("div", {
-						class: "sr-only",
-						role: "status",
-						"aria-live": "polite",
-						"aria-atomic": "true",
-						children: recoveryAnnouncement(viewModel)
-					}) : null,
-					/* @__PURE__ */ jsx("div", {
-						class: "seams-content-area",
-						children: /* @__PURE__ */ jsx("div", {
-							class: "seams-content-sizer",
-							children: loading ? this.renderWaiting(viewModel) : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
-								class: "seams-signin-menu",
-								children: /* @__PURE__ */ jsx(Fragment, { children: this.renderActiveView(viewModel) }, authViewKey(viewModel))
-							}) })
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-menu-origin",
+					children: [
+						/* @__PURE__ */ jsx(PadlockIcon, {}),
+						" ",
+						/* @__PURE__ */ jsx("span", { children: viewModel.hostname })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-content-switcher",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							class: `seams-back-button ${loading || linkDevice || otpPrompt || registrationPrompt || recovery ? "is-visible" : ""}`,
+							type: "button",
+							"aria-label": recoveryBackLabel(viewModel),
+							"data-auth-menu-close": true,
+							disabled: recoveryNavigationLocked(viewModel),
+							onClick: this.onBackClick,
+							children: backIcon()
+						}),
+						recovery ? /* @__PURE__ */ jsx("div", {
+							class: "sr-only",
+							role: "status",
+							"aria-live": "polite",
+							"aria-atomic": "true",
+							children: recoveryAnnouncement(viewModel)
+						}) : null,
+						/* @__PURE__ */ jsx("div", {
+							class: "seams-content-area",
+							children: /* @__PURE__ */ jsx("div", {
+								class: "seams-content-sizer",
+								children: loading ? this.renderWaiting(viewModel) : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+									class: "seams-signin-menu",
+									children: /* @__PURE__ */ jsx(Fragment, { children: this.renderActiveView(viewModel) }, authViewKey(viewModel))
+								}) })
+							})
 						})
-					})
-				]
-			}), /* @__PURE__ */ jsx(AuthMenuFooter, {
-				notice: menuNotice(viewModel),
-				onRetry: this.onNoticeRetry
-			})]
+					]
+				}),
+				/* @__PURE__ */ jsx(AuthMenuFooter, {
+					notice: menuNotice(viewModel),
+					onRetry: this.onNoticeRetry
+				})
+			]
 		}) });
 	}
 	renderActiveView(viewModel) {
@@ -610,14 +688,6 @@ var AuthMenuSurface = class extends Component {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "seams-menu-header",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					class: "seams-menu-origin",
-					children: [
-						/* @__PURE__ */ jsx(PadlockIcon, {}),
-						" ",
-						/* @__PURE__ */ jsx("span", { children: viewModel.hostname })
-					]
-				}),
 				eyebrow === viewModel.heading ? null : /* @__PURE__ */ jsx("div", {
 					class: "seams-menu-eyebrow",
 					children: eyebrow
@@ -827,6 +897,8 @@ var AuthMenuSurface = class extends Component {
 	}
 	renderRecovery(viewModel) {
 		if (viewModel.stage === "enter_code") {
+			const code = recoveryInputCharacters(viewModel.recoveryCode).slice(0, 32);
+			const complete = code.length === 32;
 			const statusMessage = viewModel.status.kind === "recoverable" ? viewModel.status.message : "";
 			const feedbackMessage = viewModel.recoveryCodeError ?? statusMessage;
 			const feedbackIsError = feedbackMessage.length > 0;
@@ -845,50 +917,101 @@ var AuthMenuSurface = class extends Component {
 					onSubmit: this.onRecoverySubmit,
 					children: [/* @__PURE__ */ jsxs("div", {
 						class: "seams-recovery-field",
-						children: [/* @__PURE__ */ jsx("label", {
-							class: "seams-field-label",
-							for: "seams-recovery-code",
-							children: "Recovery code"
-						}), /* @__PURE__ */ jsx("input", {
-							id: "seams-recovery-code",
-							class: "seams-recovery-input seams-recovery-code-input",
-							"data-recovery-code": true,
-							name: "recoveryCode",
-							type: "text",
-							autocomplete: "one-time-code",
-							autocapitalize: "characters",
-							autocorrect: "off",
-							spellcheck: false,
-							"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
-							"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback" : "",
-							value: viewModel.recoveryCode,
-							onInput: this.onRecoveryCodeInput
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						class: "seams-secondary-actions",
-						children: [/* @__PURE__ */ jsxs("button", {
-							class: "seams-link-device-btn seams-auth-method-choice-btn",
-							type: "button",
-							"data-recovery-target": "passkey",
-							onClick: this.onRecoveryPasskeySelected,
-							children: [/* @__PURE__ */ jsx("span", {
-								class: "seams-auth-method-choice-icon",
-								children: fingerprintIcon()
-							}), /* @__PURE__ */ jsx("span", { children: "Recover with Passkey" })]
-						}), /* @__PURE__ */ jsxs("button", {
-							class: "seams-link-device-btn seams-auth-method-choice-btn",
-							type: "button",
-							"data-recovery-target": "google_email_otp",
-							onClick: this.onRecoveryGoogleSelected,
-							children: [/* @__PURE__ */ jsx("span", {
-								class: "seams-auth-method-choice-icon",
-								children: googleIcon()
-							}), /* @__PURE__ */ jsx("span", { children: "Recover with Google" })]
+						children: [/* @__PURE__ */ jsxs("div", {
+							class: "seams-recovery-field-header",
+							children: [/* @__PURE__ */ jsx("label", {
+								class: "seams-field-label",
+								for: "seams-recovery-code",
+								children: "Recovery code"
+							}), /* @__PURE__ */ jsxs("span", {
+								id: "seams-recovery-code-count",
+								class: "seams-recovery-code-count",
+								children: [
+									code.length,
+									"/",
+									32
+								]
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							class: "seams-otp-code-field seams-recovery-code-field",
+							children: [/* @__PURE__ */ jsx("input", {
+								id: "seams-recovery-code",
+								class: "seams-otp-input",
+								"data-recovery-code": true,
+								name: "recoveryCode",
+								type: "text",
+								inputmode: "text",
+								autocomplete: "off",
+								autocapitalize: "characters",
+								autocorrect: "off",
+								spellcheck: false,
+								"aria-invalid": viewModel.recoveryCodeError ? "true" : "false",
+								"aria-describedby": viewModel.recoveryCodeError ? "seams-recovery-code-feedback seams-recovery-code-count" : "seams-recovery-code-count",
+								value: code,
+								onInput: this.onRecoveryCodeInput,
+								onFocus: this.onRecoveryCaretMove,
+								onKeyUp: this.onRecoveryCaretMove,
+								onClick: this.onRecoveryCaretMove,
+								onBlur: this.onRecoveryCodeBlur
+							}), /* @__PURE__ */ jsx("div", {
+								class: "seams-otp-slots seams-recovery-code-slots",
+								"aria-hidden": "true",
+								children: renderRecoveryCodeGroups(code, this.state.recoveryCaret)
+							})]
 						})]
+					}), /* @__PURE__ */ jsx("button", {
+						class: "seams-auth-method-btn seams-auth-method-btn-primary",
+						type: "submit",
+						"data-auth-menu-primary": true,
+						"data-recovery-continue": true,
+						disabled: !complete,
+						children: "Continue"
 					})]
 				})
 			] });
 		}
+		if (viewModel.stage === "choose_method" || viewModel.stage === "preparing") {
+			const busyTarget = viewModel.stage === "preparing" ? viewModel.target.kind : null;
+			const statusMessage = viewModel.status.kind === "recoverable" ? viewModel.status.message : viewModel.status.kind === "busy" ? viewModel.status.headline : "";
+			const googleEnabled = viewModel.enabledExternalProviders?.includes("google") ?? false;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				this.renderHeader(viewModel),
+				/* @__PURE__ */ jsx("p", {
+					class: `seams-recovery-status ${viewModel.status.kind === "recoverable" ? "seams-recovery-error" : ""}`,
+					"aria-hidden": "true",
+					children: statusMessage
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-auth-methods seams-recovery-methods",
+					children: [/* @__PURE__ */ jsxs("button", {
+						class: "seams-auth-method-btn seams-auth-method-btn-primary",
+						type: "button",
+						"data-auth-menu-primary": true,
+						"data-recovery-target": "passkey",
+						disabled: busyTarget !== null,
+						onClick: this.onRecoveryPasskeySelected,
+						children: [busyTarget === "passkey" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-spinner",
+							"aria-hidden": "true"
+						}) : fingerprintIcon(), /* @__PURE__ */ jsx("span", { children: "Create a passkey" })]
+					}), googleEnabled ? /* @__PURE__ */ jsxs("button", {
+						class: "seams-auth-method-btn",
+						type: "button",
+						"data-recovery-target": "google_email_otp",
+						disabled: busyTarget !== null,
+						onClick: this.onRecoveryGoogleSelected,
+						children: [busyTarget === "google_email_otp" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-spinner",
+							"aria-hidden": "true"
+						}) : googleIcon(), /* @__PURE__ */ jsx("span", { children: "Continue with Google" })]
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "seams-recovery-method-note",
+					children: "This adds a new sign-in method to your wallet."
+				})
+			] });
+		}
 		if (viewModel.stage === "email_code_required") {
 			const digits = otpCodeDigits(viewModel.otpCode);
 			const canSubmit = /^\d{6}$/.test(viewModel.otpCode) && viewModel.status.kind !== "busy";
@@ -991,19 +1114,35 @@ var AuthMenuSurface = class extends Component {
 			class: "seams-waiting",
 			role: "status",
 			"aria-live": "polite",
-			children: [/* @__PURE__ */ jsxs("div", {
-				class: "seams-waiting-message",
-				children: [/* @__PURE__ */ jsx("span", {
-					class: "seams-waiting-text",
-					children: waitingText
-				}), viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
-					class: "seams-waiting-sdk-events",
-					children: status.detail
-				}) }) : null]
-			}), /* @__PURE__ */ jsx("div", {
-				"aria-label": "Loading",
-				class: "seams-spinner"
-			})]
+			children: [
+				status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+					class: "seams-passkey-prompt",
+					role: "img",
+					"aria-label": "Passkey authentication",
+					children: fingerprintIcon()
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					class: "seams-waiting-message",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							class: "seams-waiting-text",
+							children: waitingText
+						}),
+						status.illustration === "passkey" ? /* @__PURE__ */ jsx("span", {
+							class: "seams-passkey-instruction",
+							children: "Complete the prompt on your device."
+						}) : null,
+						viewModel.showProgress && status.detail && status.detail !== waitingText ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("span", {
+							class: "seams-waiting-sdk-events",
+							children: status.detail
+						}) }) : null
+					]
+				}),
+				status.illustration !== "passkey" ? /* @__PURE__ */ jsx("div", {
+					"aria-label": "Loading",
+					class: "seams-spinner"
+				}) : null
+			]
 		}) });
 	}
 	renderLinkDevice(viewModel) {