diff --git a/javascript/tokenscript-viewer/src/components.d.ts b/javascript/tokenscript-viewer/src/components.d.ts index 5ac63dc..47f627e 100644 --- a/javascript/tokenscript-viewer/src/components.d.ts +++ b/javascript/tokenscript-viewer/src/components.d.ts @@ -207,6 +207,7 @@ export namespace Components { "tsId": string; } interface TokenscriptGrid { + "showLoader": boolean; } interface TransferDialog { "closeDialog": () => Promise; @@ -968,6 +969,7 @@ declare namespace LocalJSX { "tsId"?: string; } interface TokenscriptGrid { + "showLoader"?: boolean; } interface TransferDialog { "engine"?: TokenScriptEngine; diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx index 52af5c6..684fc11 100644 --- a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx +++ b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx @@ -60,6 +60,9 @@ export class TokenscriptButton { const keys = Object.keys(tokens); + if (!keys.length) + return; + if (keys.length > 1){ const numUniqueTokens = Object.values(tokens).reduce((total, token) => { diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css index bdb5799..38ef7fe 100644 --- a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css +++ b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css @@ -5,6 +5,13 @@ flex-wrap: wrap; } +.loader-container { + height: 60px; + display: flex; + justify-content: left; + align-items: center; +} + @media (max-width: 768px) { .ts-grid { justify-content: space-evenly; diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx index a403b4d..54b6b80 100644 --- a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx +++ b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx @@ -1,4 +1,4 @@ -import {Component, h, Host} from "@stencil/core"; +import {Component, h, Host, Prop} from "@stencil/core"; @Component({ tag: 'tokenscript-grid', @@ -8,10 +8,14 @@ import {Component, h, Host} from "@stencil/core"; }) export class TokenscriptGrid { + @Prop() + showLoader = false; + render(){ return ( + { this.showLoader ?
: '' }
); } diff --git a/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx index 3aa1127..c724655 100644 --- a/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx +++ b/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx @@ -147,47 +147,36 @@ export class NewViewer { private async init(){ - const tokenScriptsMap = {}; + const myTokenScripts = await dbProvider.myTokenScripts.toArray(); - // this.app.showTsLoader(); + await Promise.all(myTokenScripts.map((tsMeta) => this.loadMyTokenScript(tsMeta))) - // do not proceed here if we are loading a TS selection choice - /*const queryStr = document.location.search.substring(1); + this.scriptsLoading = false; + } - if (queryStr) { - const query = new URLSearchParams(queryStr); - if (query.has("registryScriptUrl") && query.has("registryTokenId")) { - console.log("Abort load of TS"); - return; - } - }*/ + private async loadMyTokenScript(tsMeta: TokenScriptsMeta){ - for (const tsMeta of await dbProvider.myTokenScripts.toArray()){ + if (this.myTokenScripts[tsMeta.tokenScriptId]) + return; // This script has already been loaded via processUrlLoad - try { - const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml); + try { + const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml); - tokenScriptsMap[tsMeta.tokenScriptId] = {...tsMeta, tokenScript}; - } catch (e){ - console.error("Failed to load TokenScript definition: ", tsMeta.name); + this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: {...tsMeta, tokenScript}}; + } catch (e){ + console.error("Failed to load TokenScript definition: ", tsMeta.name); - if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost") - continue; + if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost") + return; - this.showToast.emit({ - type: "error", - title: "Failed to load TokenScript", - description: e.message - }); + this.showToast.emit({ + type: "error", + title: "Failed to load TokenScript", + description: e.message + }); - tokenScriptsMap[tsMeta.tokenScriptId] = tsMeta; - } + this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: tsMeta}; } - - this.myTokenScripts = tokenScriptsMap; - this.scriptsLoading = false; - - // this.app.hideTsLoader(); } @Watch("myTokenScripts") @@ -342,44 +331,42 @@ export class NewViewer { { - this.scriptsLoading ? - : - (Object.values(this.myTokenScripts).length > 0 ? - - { - Object.values(this.myTokenScripts).map((ts) => { - return ( - { - if (!ts.tokenScript) { - this.showToast.emit({ - type: "error", - title: "TokenScript not available", - description: "This tokenscript could not be resolved" - }); - return; - } - this.viewerPopover.open(ts.tokenScript); - }} - onRemove={async (tsId: string) => { - this.removeTokenScript(tsId); - }}> - - ); - }) - } - : -
- You don't have any TokenScripts in your - library yet
- Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button. -
- ) + Object.values(this.myTokenScripts).length > 0 ? + + { + Object.values(this.myTokenScripts).map((ts) => { + return ( + { + if (!ts.tokenScript) { + this.showToast.emit({ + type: "error", + title: "TokenScript not available", + description: "This tokenscript could not be resolved" + }); + return; + } + this.viewerPopover.open(ts.tokenScript); + }} + onRemove={async (tsId: string) => { + this.removeTokenScript(tsId); + }}> + + ); + }) + } + : + (!this.scriptsLoading ?
+ You don't have any TokenScripts in your + library yet
+ Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button. +
: '') + } {this.popularTokenscripts.length > 0 ?