Add visible selection, update text and tidy assets

Author: JamesSmartCell

javascript/engine-js/src/repo/sources/RegistryScriptURI.ts

@@ -1,7 +1,7 @@
 import {ResolvedScriptData, ScriptInfo, SourceInterface} from "./SourceInterface";
 import {TokenScriptEngine, ScriptSourceType} from "../../Engine";
 
-const HOLESKY_DEV_7738 = "0x29a27A5D74Fe8ff01E2dA8b9fC64061A3DFBEe14";
+const HOLESKY_DEV_7738 = "0x0077380bCDb2717C9640e892B9d5Ee02Bb5e0682";
 const HOLESKY_ID = 17000; // TODO: Source this from engine
 const cacheTimeout = 60 * 1000; // 1 minute cache validity
 

javascript/tokenscript-viewer/src/assets/icon/circlecr.png

@@ -198,6 +198,7 @@ export namespace Components {
         "imageUrl": string;
         "name": string;
         "onRemove"?: (tsId: string) => Promise<void>;
+        "selected": boolean;
         "tokenScript"?: TokenScript1;
         "tsId": string;
     }
@@ -947,6 +948,7 @@ declare namespace LocalJSX {
         "imageUrl"?: string;
         "name"?: string;
         "onRemove"?: (tsId: string) => Promise<void>;
+        "selected"?: boolean;
         "tokenScript"?: TokenScript1;
         "tsId"?: string;
     }

javascript/tokenscript-viewer/src/assets/icon/uncel2s.png

@@ -28,6 +28,10 @@
 	opacity: 0.6;
 }
 
+.ts-button.selected {
+	border: 2px solid blue; /* Add fine blue line */
+}
+
 .ts-details {
 	padding: 10px;
 	flex-grow: 1;

javascript/tokenscript-viewer/src/components.d.ts

@@ -23,6 +23,9 @@ export class TokenscriptButton {
 	@State()
 	subText: string;
 
+	@Prop({mutable: true})
+	selected: boolean = false;
+
 	@Prop()
 	imageUrl: string;
 
@@ -61,7 +64,7 @@ export class TokenscriptButton {
 
 	render(){
 		return (
-			<Host class={"ts-button" + (this.enabled && (!this.onRemove || this.tokenScript) ? '' : ' disabled')}
+			<Host class={"ts-button" + (this.selected ? ' selected' : '') + (this.enabled && (!this.onRemove || this.tokenScript) ? '' : ' disabled')}
 				 title={this.name}
 				 style={{cursor: this.enabled && (!this.onRemove || this.tokenScript) ? 'pointer' : 'not-allowed'}}>
 				<token-icon src={this.imageUrl} imageTitle={this.name}/>

javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.css

@@ -24,31 +24,32 @@ export class ScriptSelectDialog {
 
 		let scriptData = this.scripts;
 		let buttons = [];
-
-		// TODO: Add this same component on viewer-popover too
-		// Which is currently selected?
-		//let currentSelection = this.tokenScript.getSourceInfo().scriptInfo?.scriptId;
 		let currentSelection;
 
+		const query = new URLSearchParams(document.location.search.substring(1));
+		if (query.has("scriptId")) {
+			currentSelection = query.get("scriptId");
+		}
 		//populate with script data
 		for (let i = 0; i < scriptData?.length; i++) {
 			let script = scriptData[i];
 			buttons.push({
 				icon: script.icon?.length > 0 ? script.icon : "assets/icon/blueTS.svg",
 				name: script.name,
-				selected: scriptData[i].scriptId == currentSelection ? "assets/icon/circlecr.png" : "assets/icon/uncel2s.png"
+				selected: scriptData[i].scriptId == currentSelection
 			});
 		}
 
 		return (
 			<Host>
 				<popover-dialog ref={(el) => this.dialog = el as HTMLPopoverDialogElement} dialogStyles={{ background: "#fff !important", color: "#000 !important" }}>
-					<p>Select from the available TApps for this contract below</p>
+					<p>Select from the available tapps for this contract below</p>
 					<div class="select-list">
-						{this.scripts.map((script, index) => {
+						{buttons.map((script, index) => {
 							return <tokenscript-button
 								name={script.name}
 								imageUrl={script.icon}
+								selected={script.selected}
 								onClick={() => {
 									this.onScriptSelect(this.scripts[index]);
 									this.dialog.closeDialog();

javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx

@@ -211,7 +211,7 @@ export class ViewerPopover {
 					<div class="view-toolbar-buttons">
 						{this.otherScripts?.length > 1 ? <button class="btn btn-secondary" style={{marginRight: "15px", minWidth: "35px", fontSize: "16px"}} onClick={async () =>{
 							this.showScriptSelector.emit(this.otherScripts);
-						}}>Other TApps</button> : ''}
+						}}>Other tapps</button> : ''}
 						<share-to-tg-button></share-to-tg-button>
 						<security-status tokenScript={this.tokenScript}/>
 						<div>