fix: improve security status components

SmartTokenLabs · Nov 1, 2023 · 499586e · 499586e
1 parent 557b80e
commit 499586e
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 23 deletions.
diff --git a/javascript/engine-js/src/tokenScript/Attribute.ts b/javascript/engine-js/src/tokenScript/Attribute.ts
@@ -118,15 +118,18 @@ export class Attribute {
 		if (throwOnUndefined && value === undefined)
 			throw new Error("Could not resolve attribute " + this.getName());
 
+		if (value === undefined)
+			return value;
+
 		return this.transformValue(value);
 	}
 
 	/**
 	 * Fetches the current value, skipping value resolution except in the case of user input
 	 * This is helpful for rendering the current attribute state and avoids simultaneous requests to resolve attributes
 	 */
-	public async getCurrentValue(){
-		return this.getValue(false, true);
+	public async getCurrentValue(tokenContext: ITokenIdContext = this.tokenScript.getCurrentTokenContext()){
+		return this.getValue(false, true, false, tokenContext);
 	}
 
 	/**

diff --git a/javascript/tokenscript-viewer/src/components/common/security-status.css b/javascript/tokenscript-viewer/src/components/common/security-status.css
@@ -9,4 +9,12 @@
 	height: 36px;
 	text-align: center;
 	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.security-popover-icon {
+	font-size: 50px;
+	margin: 0 0 10px;
 }
diff --git a/javascript/tokenscript-viewer/src/components/common/security-status.tsx b/javascript/tokenscript-viewer/src/components/common/security-status.tsx
@@ -10,6 +10,8 @@ import {computeAddress} from "ethers/lib/utils";
 })
 export class SecurityStatus {
 
+	private dialog: HTMLPopoverDialogElement;
+
 	@Prop() tokenScript: TokenScript;
 
 	@State() securityInfo: Partial<ISecurityInfo>;
@@ -30,11 +32,11 @@ export class SecurityStatus {
 				break;
 			case TSSecurityStatus.WARNING:
 				this.statusColor = "#ff871d";
-				this.statusIcon = "⚠";
+				this.statusIcon = "✗";
 				break;
 			case TSSecurityStatus.INVALID:
 				this.statusColor = "#ff4f4f";
-				this.statusIcon = "⚠";
+				this.statusIcon = "✗";
 				break;
 		}
 	}
@@ -50,19 +52,27 @@ export class SecurityStatus {
 			return previous;
 		}, []);
 
-		return "TokenScript security information\n\n" +
-			(this.securityInfo.authoritivePublicKey ? "Authoritive Key: " + computeAddress(this.securityInfo.authoritivePublicKey) + " (" + this.securityInfo.authoritivePublicKey + ")\n" : "") +
-			(this.securityInfo.signerPublicKey ? "Signer Key: " + computeAddress(this.securityInfo.signerPublicKey) + "\n" : "") +
-			"Authentication: " + (authMethods.join(", "));
+		return "TokenScript security information\n" +
+			(this.securityInfo.authoritivePublicKey ? "\nAuthoritive Key: " + computeAddress(this.securityInfo.authoritivePublicKey) + "\n(" + this.securityInfo.authoritivePublicKey + ")" : "") +
+			(this.securityInfo.signerPublicKey ? "\nSigner Key: " + computeAddress(this.securityInfo.signerPublicKey) : "") +
+			"\nAuthentication: " + (authMethods.join(", "));
 	}
 
 	render() {
 		return (
 			this.securityInfo ?
-				<div class="security-status" style={{background: this.statusColor}}
-					title={this.securityInfo.statusText + "\n\n" +
-						this.getDetailedSecurityInfo()}>
-					{this.statusIcon}
+				<div>
+					<div class="security-status" style={{background: this.statusColor}}
+						 title={this.securityInfo.statusText + "\n\n" + this.getDetailedSecurityInfo()}
+						 onClick={() => this.dialog.openDialog()}>
+						{this.statusIcon}
+					</div>
+					<popover-dialog ref={(el) => this.dialog = el as HTMLPopoverDialogElement}>
+						<h1 class="security-popover-icon" style={{color: this.statusColor}}>{this.statusIcon}</h1>
+						<strong>{this.securityInfo.statusText}</strong>
+						<p style={{wordWrap: "break-word"}} innerHTML={this.getDetailedSecurityInfo().replaceAll("\n", "<br/>")}>
+						</p>
+					</popover-dialog>
 				</div>
 			: ''
 		)

diff --git a/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-info-popover.tsx b/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-info-popover.tsx
@@ -31,10 +31,12 @@ export class TokenInfoPopover {
 		const newAttributes: {label: string, value: string}[] = [];
 
 		for (const attribute of this.tokenScript.getAttributes()){
-			newAttributes.push({
-				label: attribute.getLabel(),
-				value: await attribute.getCurrentValue()
-			})
+			const value = await attribute.getCurrentValue();
+			if (value)
+				newAttributes.push({
+					label: attribute.getLabel(),
+					value
+				});
 		}
 
 		this.tsAttributes = newAttributes;

diff --git a/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-security-status.css b/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-security-status.css
@@ -7,5 +7,12 @@
 	height: 25px;
 	text-align: center;
 	cursor: pointer;
-	line-height: 27px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.security-popover-icon {
+	font-size: 50px;
+	margin: 0 0 10px;
 }
diff --git a/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-security-status.tsx b/javascript/tokenscript-viewer/src/components/common/tokens-grid/token-security-status.tsx
@@ -10,6 +10,8 @@ import {IOriginSecurityInfo} from "@tokenscript/engine-js/src/tokenScript/Origin
 })
 export class TokenSecurityStatus {
 
+	private dialog: HTMLPopoverDialogElement;
+
 	@Prop() tokenScript: TokenScript;
 	@Prop() originId: string;
 
@@ -39,16 +41,24 @@ export class TokenSecurityStatus {
 	}
 
 	private getDetailedSecurityInfo(){
-		return this.securityInfo.statusText +
-			(this.securityInfo.signingKey ? "\n\nSigner Key: " + this.securityInfo.signingKey : "");
+		return (this.securityInfo.signingKey ? "Signer Key: " + this.securityInfo.signingKey : "");
 	}
 
 	render() {
 		return (
 			this.securityInfo ?
-				<div class="token-security-status" style={{background: this.statusColor}}
-					 title={this.getDetailedSecurityInfo()}>
-					{this.statusIcon}
+				<div>
+					<div class="token-security-status" style={{background: this.statusColor}}
+						 title={this.securityInfo.statusText + "\n\n" + this.getDetailedSecurityInfo()}
+						 onClick={() => this.dialog.openDialog()}>
+						{this.statusIcon}
+					</div>
+					<popover-dialog ref={(el) => this.dialog = el as HTMLPopoverDialogElement}>
+						<h1 class="security-popover-icon" style={{color: this.statusColor}}>{this.statusIcon}</h1>
+						<strong>{this.securityInfo.statusText}</strong>
+						<p style={{wordWrap: "break-word"}} innerHTML={this.getDetailedSecurityInfo().replaceAll("\n", "<br/>")}>
+						</p>
+					</popover-dialog>
 				</div>
 				: ''
 		)

diff --git a/javascript/tokenscript-viewer/tsconfig.json b/javascript/tokenscript-viewer/tsconfig.json
@@ -14,7 +14,8 @@
 			"es2017",
 			"dom",
 			"dom.iterable",
-			"es2020.bigint"
+			"es2020.bigint",
+			"es2021.string"
 		],
 		"noUnusedLocals": false,
 		"noUnusedParameters": false,