feat: multi-tokenscript improvements WIP

- Add styled cards for selector dialog
- Implement new resolver cache
- Add script selector to viewer-popover

Author: micwallace

javascript/engine-js/src/Engine.ts

@@ -126,15 +126,15 @@ export class TokenScriptEngine {
 
 	/**
 	 * Create a new TokenScript instance from a repo source
-	 * @param tsId The unique identifier for the TokenScript file
+	 * @param sourceId The unique identifier for the TokenScript file
 	 * @param viewBinding The view binding implementation to be used for this TokenScript
 	 * @param forceRefresh Bypass cache and re-resolve the TokenScript XML
 	 */
-	public async getTokenScript(tsId: string, viewBinding?: IViewBinding, forceRefresh?: true){
+	public async getTokenScript(sourceId: string, viewBinding?: IViewBinding, forceRefresh?: true){
 
-		const resolveResult = await this.repo.getTokenScript(tsId, forceRefresh);
+		const resolveResult = await this.repo.getTokenScript(sourceId, forceRefresh);
 
-		return await this.initializeTokenScriptObject(resolveResult.xml, resolveResult.type, tsId, resolveResult.sourceUrl, resolveResult, viewBinding);
+		return await this.initializeTokenScriptObject(resolveResult.xml, resolveResult.type, resolveResult.sourceId, resolveResult.sourceUrl, resolveResult, viewBinding);
 	}
 
 	/**
@@ -197,6 +197,7 @@ export class TokenScriptEngine {
 				parser = new DOMParser();
 			}
 			let tokenXml = parser.parseFromString(xml,"text/xml");
+
 			return new TokenScript(this, tokenXml, xml, source, sourceId, sourceUrl, scriptInfo, viewBinding);
 		} catch (e){
 			throw new Error("Failed to parse tokenscript definition: " + e.message);

javascript/engine-js/src/TokenScript.ts

@@ -122,7 +122,7 @@ export class TokenScript {
 	public getSourceInfo(){
 		return {
 			// TODO: Use better UID for non-resolved tokenscripts
-			tsId: this.sourceId ?? this.getName(),
+			tsId: this.sourceId + (this.scriptInfo.scriptId ? '-' + this.scriptInfo.scriptId : '') ?? this.getName(),
 			source: this.source,
 			sourceUrl: this.sourceUrl,
 			scriptInfo: this.scriptInfo

javascript/engine-js/src/repo/Repo.ts

@@ -59,7 +59,7 @@ export class Repo {
 	 * @param tsPath
 	 * @param forceRefresh
 	 */
-	public async resolveAllScripts(tsPath: string, forceRefresh = false){
+	public async resolveAllScripts(tsPath: string, forceRefresh = false): Promise<ScriptInfo[]> {
 
 		if (!forceRefresh && this.scriptLookupCache[tsPath] && (Date.now() < this.scriptLookupCache[tsPath].timestamp + (Repo.REPO_TTL * 1000)))
 			return this.scriptLookupCache[tsPath].scripts;

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

@@ -34,7 +34,7 @@ export class ScriptURI implements SourceInterface {
 				icon: tokenScript.getMetadata().iconUrl,
 				order: 0,
 				authenticated: true,
-				sourceId: tsPath,
+				sourceId: chain + "-" + contractAddr,
 				scriptId: "5169_" + tokenScript.getName(),
 				sourceUrl: uri,
 				type: ScriptSourceType.SCRIPT_URI

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

@@ -14,6 +14,7 @@ import { JSX } from "@stencil/core";
 import { TokenScript as TokenScript1 } from "@tokenscript/engine-js/src/TokenScript";
 import { IntegrationViewer } from "./components/viewers/integration/integration-viewer";
 import { ITxValidationInfo } from "../../engine-js/src/security/TransactionValidator";
+import { TokenScript as TokenScript2 } from "@tokenscript/engine-js/dist/lib.esm/TokenScript";
 import { ScriptInfo } from "@tokenscript/engine-js/src/repo/sources/SourceInterface";
 import { Card } from "@tokenscript/engine-js/src/tokenScript/Card";
 import { TabbedViewer } from "./components/viewers/tabbed/tabbed-viewer";
@@ -29,6 +30,7 @@ export { JSX } from "@stencil/core";
 export { TokenScript as TokenScript1 } from "@tokenscript/engine-js/src/TokenScript";
 export { IntegrationViewer } from "./components/viewers/integration/integration-viewer";
 export { ITxValidationInfo } from "../../engine-js/src/security/TransactionValidator";
+export { TokenScript as TokenScript2 } from "@tokenscript/engine-js/dist/lib.esm/TokenScript";
 export { ScriptInfo } from "@tokenscript/engine-js/src/repo/sources/SourceInterface";
 export { Card } from "@tokenscript/engine-js/src/tokenScript/Card";
 export { TabbedViewer } from "./components/viewers/tabbed/tabbed-viewer";
@@ -106,6 +108,9 @@ export namespace Components {
     interface OpenseaViewer {
         "app": AppRoot;
     }
+    interface OtherTappsButton {
+        "tokenScript": TokenScript2;
+    }
     interface PopoverDialog {
         "closeDialog": () => Promise<void>;
         "dialogClasses": string[];
@@ -485,6 +490,12 @@ declare global {
         prototype: HTMLOpenseaViewerElement;
         new (): HTMLOpenseaViewerElement;
     };
+    interface HTMLOtherTappsButtonElement extends Components.OtherTappsButton, HTMLStencilElement {
+    }
+    var HTMLOtherTappsButtonElement: {
+        prototype: HTMLOtherTappsButtonElement;
+        new (): HTMLOtherTappsButtonElement;
+    };
     interface HTMLPopoverDialogElement extends Components.PopoverDialog, HTMLStencilElement {
     }
     var HTMLPopoverDialogElement: {
@@ -684,6 +695,7 @@ declare global {
         "showToast": ShowToastEventArgs;
         "showLoader": void;
         "hideLoader": void;
+        "showScriptSelector": ScriptInfo[];
     }
     interface HTMLViewerPopoverElement extends Components.ViewerPopover, HTMLStencilElement {
         addEventListener<K extends keyof HTMLViewerPopoverElementEventMap>(type: K, listener: (this: HTMLViewerPopoverElement, ev: ViewerPopoverCustomEvent<HTMLViewerPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -748,6 +760,7 @@ declare global {
         "mooar-viewer": HTMLMooarViewerElement;
         "new-viewer": HTMLNewViewerElement;
         "opensea-viewer": HTMLOpenseaViewerElement;
+        "other-tapps-button": HTMLOtherTappsButtonElement;
         "popover-dialog": HTMLPopoverDialogElement;
         "script-select-dialog": HTMLScriptSelectDialogElement;
         "security-status": HTMLSecurityStatusElement;
@@ -854,6 +867,9 @@ declare namespace LocalJSX {
         "onShowLoader"?: (event: OpenseaViewerCustomEvent<void>) => void;
         "onShowToast"?: (event: OpenseaViewerCustomEvent<ShowToastEventArgs>) => void;
     }
+    interface OtherTappsButton {
+        "tokenScript"?: TokenScript2;
+    }
     interface PopoverDialog {
         "dialogClasses"?: string[];
         "dialogStyles"?: {[cssProp: string]: string};
@@ -967,6 +983,7 @@ declare namespace LocalJSX {
     interface ViewerPopover {
         "onHideLoader"?: (event: ViewerPopoverCustomEvent<void>) => void;
         "onShowLoader"?: (event: ViewerPopoverCustomEvent<void>) => void;
+        "onShowScriptSelector"?: (event: ViewerPopoverCustomEvent<ScriptInfo[]>) => void;
         "onShowToast"?: (event: ViewerPopoverCustomEvent<ShowToastEventArgs>) => void;
     }
     interface ViewerTab {
@@ -999,6 +1016,7 @@ declare namespace LocalJSX {
         "mooar-viewer": MooarViewer;
         "new-viewer": NewViewer;
         "opensea-viewer": OpenseaViewer;
+        "other-tapps-button": OtherTappsButton;
         "popover-dialog": PopoverDialog;
         "script-select-dialog": ScriptSelectDialog;
         "security-status": SecurityStatus;
@@ -1050,6 +1068,7 @@ declare module "@stencil/core" {
             "mooar-viewer": LocalJSX.MooarViewer & JSXBase.HTMLAttributes<HTMLMooarViewerElement>;
             "new-viewer": LocalJSX.NewViewer & JSXBase.HTMLAttributes<HTMLNewViewerElement>;
             "opensea-viewer": LocalJSX.OpenseaViewer & JSXBase.HTMLAttributes<HTMLOpenseaViewerElement>;
+            "other-tapps-button": LocalJSX.OtherTappsButton & JSXBase.HTMLAttributes<HTMLOtherTappsButtonElement>;
             "popover-dialog": LocalJSX.PopoverDialog & JSXBase.HTMLAttributes<HTMLPopoverDialogElement>;
             "script-select-dialog": LocalJSX.ScriptSelectDialog & JSXBase.HTMLAttributes<HTMLScriptSelectDialogElement>;
             "security-status": LocalJSX.SecurityStatus & JSXBase.HTMLAttributes<HTMLSecurityStatusElement>;

javascript/tokenscript-viewer/src/components/viewers/new/add/script-select-dialog.tsx

@@ -43,7 +43,7 @@ export class ScriptSelectDialog {
 		return (
 			<Host>
 				<popover-dialog ref={(el) => this.dialog = el as HTMLPopoverDialogElement} dialogStyles={{ background: "#fff !important", color: "#000 !important" }}>
-					<p>Select from the available TApps below</p>
+					<p>Select from the available TApps for this contract below</p>
 					<div class="select-list">
 						{this.scripts.map((script, index) => {
 							return <tokenscript-button

javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx

@@ -1,4 +1,4 @@
-import {Component, Event, EventEmitter, h, Host, Prop, State, Watch} from "@stencil/core";
+import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from "@stencil/core";
 import {AppRoot, ShowToastEventArgs, TokenScriptSource} from "../../app/app";
 import {getKnownTokenScriptMetaById, knownTokenScripts} from "../../../constants/knownTokenScripts";
 import {dbProvider, TokenScriptsMeta} from "../../../providers/databaseProvider";
@@ -48,6 +48,11 @@ export class NewViewer {
 		bubbles: true,
 	}) showToast: EventEmitter<ShowToastEventArgs>;
 
+	@Listen("showScriptSelector")
+	showScriptSelector(event: CustomEvent<ScriptInfo[]>){
+		this.scriptSelectDialog.open(event.detail)
+	}
+
 	componentWillLoad(){
 		Web3WalletProvider.registerWalletChangeListener(async (walletConnection?: WalletConnection) => {
 			for (const id in this.myTokenScripts){
@@ -294,8 +299,6 @@ export class NewViewer {
 				}
 			}
 
-			console.log("Adding TSID: ", tokenScriptId);
-
 			await this.addTokenScript(meta, tokenScript);
 
 			await this.addDialog.closeDialog();
@@ -408,8 +411,8 @@ export class NewViewer {
 				<viewer-popover ref={el => this.viewerPopover = el as HTMLViewerPopoverElement}></viewer-popover>
 				<script-select-dialog ref={el => this.scriptSelectDialog = el as HTMLScriptSelectDialogElement}
 								onScriptSelect={(scriptInfo: ScriptInfo) => {
-									const tsMeta = this.addFormSubmit("resolve", {tsId: scriptInfo.sourceId + "-" + scriptInfo.scriptId})
-									//this.viewerPopover.open(tsMeta.tokenScript);
+									this.viewerPopover.close();
+									this.addFormSubmit("resolve", {tsId: scriptInfo.sourceId + "-" + scriptInfo.scriptId})
 								}}></script-select-dialog>
 				<popover-dialog ref={el => this.aboutDialog = el as HTMLPopoverDialogElement}>
 					<about-tokenscript></about-tokenscript>

javascript/tokenscript-viewer/src/components/viewers/new/viewer-popover/viewer-popover.tsx

@@ -6,7 +6,7 @@ import {handleTransactionError, showTransactionNotification} from "../../util/sh
 import {ShowToastEventArgs} from "../../../app/app";
 import {TokenGridContext} from "../../util/getTokensFlat";
 import {ScriptSourceType} from "../../../../../../engine-js/src/Engine";
-import { getTgUrl } from '../../util/tgUrl';
+import {ScriptInfo} from "@tokenscript/engine-js/src/repo/sources/SourceInterface";
 
 @Component({
 	tag: 'viewer-popover',
@@ -46,6 +46,13 @@ export class ViewerPopover {
 		bubbles: true,
 	}) hideLoader: EventEmitter<void>;
 
+	@Event({
+		eventName: 'showScriptSelector',
+		composed: true,
+		cancelable: true,
+		bubbles: true,
+	}) showScriptSelector: EventEmitter<ScriptInfo[]>;
+
 	@State()
 	private overflowCardButtons: JSX.Element[];
 	private overflowDialog: HTMLActionOverflowModalElement;
@@ -185,6 +192,17 @@ export class ViewerPopover {
 						<h3>{this.tokenScript.getLabel(2) ?? this.tokenScript.getName()}</h3>
 					</div>
 					<div class="view-toolbar-buttons">
+						<button class="btn btn-secondary" style={{marginRight: "15px", minWidth: "35px", fontSize: "16px"}} onClick={async () =>{
+							this.showLoader.emit();
+							try {
+								const scripts = await this.tokenScript.getEngine().resolveAllScripts(this.tokenScript.getSourceInfo().tsId);
+								this.showScriptSelector.emit(scripts);
+							} catch (e){
+
+							}
+							this.hideLoader.emit();
+
+						}}>Other TApps</button>
 						<share-to-tg-button></share-to-tg-button>
 						<security-status tokenScript={this.tokenScript}/>
 						<div>