Merge branch 'master' into fix/json-remove-control-chars

javascript/engine-js/src/Engine.ts

@@ -225,7 +225,9 @@ export class TokenScriptEngine {
 	}
 
 	public async getScriptUri(chain: string, contractAddr: string) {
-		const provider = await this.getWalletAdapter();
+
+		// Direct RPC gets too hammered by opensea view (that doesn't allow localStorage to cache XML)
+		/*const provider = await this.getWalletAdapter();
 		let uri: string|string[]|null;
 
 		try {
@@ -237,6 +239,11 @@ export class TokenScriptEngine {
 		if (uri && Array.isArray(uri))
 			uri = uri.length ? uri[0] : null
 
-		return <string>uri;
+		return <string>uri;*/
+
+		const res = await fetch(`https://api.token-discovery.tokenscript.org/script-uri?chain=${chain}&contract=${contractAddr}`);
+		const scriptUris = await res.json();
+
+		return <string>scriptUris[0];
 	}
 }

javascript/engine-js/src/tokenScript/Card.ts

@@ -62,6 +62,13 @@ export class Card {
 		return origins.split(" ");
 	}
 
+	/**
+	 * The button class of the card, used to determine the styles to apply to the card button
+	 */
+	get buttonClass(){
+		return this.cardDef.getAttribute("buttonClass");
+	}
+
 	/**
 	 * The HTML web content associated with the card
 	 */

javascript/tokenscript-viewer/src/components/common/card-view/card-modal.tsx

@@ -49,7 +49,7 @@ export class CardModal {
 		return (
 			<Host class="view-container" style={{display: "none"}}>
 				<button class="close-btn" onClick={() => {
-					document.location.hash = "#";
+					//document.location.hash = "#";
 					this.tokenScript.getViewController().unloadTokenCard();
 				}}>X
 				</button>

javascript/tokenscript-viewer/src/components/common/card-view/card-popover.tsx

@@ -61,7 +61,7 @@ export class CardPopover implements IViewBinding {
 
 	protected handlePostMessageFromView(event: MessageEvent) {
 
-		if (!this.iframe || !this.iframe.src)
+		if (!this.iframe)
 			return;
 
 		if (event.source !== this.iframe.contentWindow) {
@@ -136,8 +136,8 @@ export class CardPopover implements IViewBinding {
 	async unloadTokenView() {
 		await this.dialog.closeDialog();
 		this.currentCard = null;
-		this.iframe.src = "";
-		document.location.hash = "#";
+		this.iframe.contentWindow.location.replace("data:text/html;base64,PCFET0NUWVBFIGh0bWw+");
+		history.replaceState(undefined, undefined, "/");
 	}
 
 	viewError(error: Error) {

javascript/tokenscript-viewer/src/components/common/tokens-grid/tokens-grid-item.tsx

@@ -1,8 +1,9 @@
-import {Component, h, Host, JSX, Prop, State} from "@stencil/core";
+import {Component, h, Host, JSX, Prop, State, Watch} from "@stencil/core";
 import {ITokenIdContext, TokenScript} from "@tokenscript/engine-js/src/TokenScript";
 import {Card} from "@tokenscript/engine-js/src/tokenScript/Card";
 import {TokenGridContext} from "../../viewers/util/getTokensFlat";
 import {EthUtils} from "@tokenscript/engine-js/src/ethereum/EthUtils";
+import {getCardButtonClass} from "../../viewers/util/getCardButtonClass";
 
 @Component({
 	tag: 'tokens-grid-item',
@@ -25,6 +26,11 @@ export class TokensGridItem {
 	private overflowDialog: HTMLActionOverflowModalElement;
 
 	async componentDidLoad() {
+		await this.loadCardButtons();
+	}
+
+	@Watch("tokenScript")
+	private async loadCardButtons(){
 
 		const cardButtons: JSX.Element[] = [];
 		const overflowCardButtons: JSX.Element[] = [];
@@ -52,7 +58,7 @@ export class TokensGridItem {
 					continue;
 
 				const cardElem = (
-					<button class={"btn " + (index === 0 ? "btn-primary" : "btn-secondary")}
+					<button class={"btn " + getCardButtonClass(card, index)}
 							onClick={() => this.showCard(card, this.token, index)}
 							disabled={enabled !== true}
 							title={enabled !== true ? enabled : label}>
@@ -74,6 +80,8 @@ export class TokensGridItem {
 		this.overflowCardButtons = overflowCardButtons;
 	}
 
+
+
 	private showTokenInfo(token: TokenGridContext){
 		(document.getElementById("token-info-popover") as HTMLTokenInfoPopoverElement).openDialog(token);
 	}

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

@@ -46,9 +46,13 @@ export class TokensGrid {
 		bubbles: true,
 	}) hideLoader: EventEmitter<void>;
 
-	@Watch("tokenScript")
+
 	async componentDidLoad() {
+		await this.initTokenScript();
+	}
 
+	@Watch("tokenScript")
+	private async initTokenScript(){
 		await this.populateTokens(await this.tokenScript.getTokenMetadata());
 
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {
@@ -144,7 +148,7 @@ export class TokensGrid {
 		// TODO: Remove index - all cards should have a unique name but some current tokenscripts don't match the schema
 		// TODO: set only card param rather than updating the whole hash query
 		if (card.view)
-			document.location.hash = "#card=" + (card.name ?? cardIndex);
+			history.replaceState(undefined, undefined, "#card=" + (card.name ?? cardIndex));
 	}
 
 	render() {

javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx

@@ -88,7 +88,7 @@ export class ActionBar {
 					continue;
 
 				cardButtons.push((
-					<button class="jid-btn"
+					<button class={"jid-btn " + this.getCardButtonClass(card, index)}
 							onClick={() => this.showCard(card)}
 							disabled={enabled !== true}
 							title={enabled !== true ? enabled : label}>
@@ -103,6 +103,20 @@ export class ActionBar {
 		this.cardButtons = cardButtons;
 	}
 
+	private getCardButtonClass(card: Card, index: number){
+
+		switch (card.buttonClass){
+			case "featured":
+				return "btn-featured";
+			case "primary":
+				return "btn-primary";
+			case "secondary":
+				return "jid-btn-secondary";
+			default:
+				return card.type === "token" || index === 0 ? "btn-primary" : "jid-btn-secondary";
+		}
+	}
+
 	// TODO: This is copied from tokens-grid-item, dedupe required
 	private async showCard(card: Card){
 

javascript/tokenscript-viewer/src/components/viewers/joyid-token/token-viewer.css

@@ -127,7 +127,7 @@ header {
 	border-radius: 16px;
 	gap: 10px;
 	flex: 1 0 0;
-	border: 1px solid #333;
+	border: 1px solid #333 !important;
 	background: #FFF;
 	font-size: 14px;
 	font-weight: 700;

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

@@ -72,7 +72,7 @@ export class NewViewer {
 				// Import completed successfully, add tokenscript to myTokenScripts
 				tsMeta = await this.addFormSubmit("url", {tsId: tokenScript.getSourceInfo().tsId, image: definition.meta.image});
 
-				document.location.hash = "";
+				//document.location.hash = "";
 				window.history.replaceState({}, document.title, "/");
 
 				this.showToast.emit({

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

@@ -112,8 +112,14 @@ export class OpenseaViewer {
 		try {
 			const chain: number = parseInt(this.urlRequest.get("chain"));
 			const contract: string = this.urlRequest.get("contract");
-			const tsId = chain + "-" + contract;
-			const tokenScript = await this.app.loadTokenscript("resolve", tsId);
+			let tokenScript;
+
+			if (this.urlRequest.has("tokenscriptUrl")) {
+				tokenScript = await this.app.loadTokenscript("url", this.urlRequest.get("tokenscriptUrl"));
+			} else {
+				const tsId = chain + "-" + contract;
+				tokenScript = await this.app.loadTokenscript("resolve", tsId);
+			}
 
 			const origins = tokenScript.getTokenOriginData();
 			let selectedOrigin;

javascript/tokenscript-viewer/src/components/viewers/sts-token/sts-viewer.tsx

@@ -7,6 +7,7 @@ import {ITokenDiscoveryAdapter} from "@tokenscript/engine-js/src/tokens/ITokenDi
 import {getSingleTokenMetadata} from "../util/getSingleTokenMetadata";
 import {Card} from "@tokenscript/engine-js/src/tokenScript/Card";
 import {handleTransactionError, showTransactionNotification} from "../util/showTransactionNotification";
+import {getCardButtonClass} from "../util/getCardButtonClass";
 
 @Component({
 	tag: 'sts-viewer',
@@ -181,7 +182,7 @@ export class SmartTokenStoreViewer {
 					continue;
 
 				const cardElem = (
-					<button class={"btn " + (index === 0 ? "btn-primary" : "btn-secondary")}
+					<button class={"btn " + getCardButtonClass(card, index)}
 							onClick={() => this.showCard(card)}
 							disabled={enabled !== true}
 							title={enabled !== true ? enabled : label}>

javascript/tokenscript-viewer/src/components/viewers/util/getCardButtonClass.ts

@@ -0,0 +1,15 @@
+import {Card} from "@tokenscript/engine-js/src/tokenScript/Card";
+
+export const getCardButtonClass = (card: Card, index: number) => {
+
+	switch (card.buttonClass){
+		case "featured":
+			return "btn-featured";
+		case "primary":
+			return "btn-primary";
+		case "secondary":
+			return "btn-secondary";
+		default:
+			return card.type === "token" || index === 0 ? "btn-primary" : "btn-secondary";
+	}
+}

javascript/tokenscript-viewer/src/global/app.css

@@ -76,6 +76,21 @@ select:hover {
 	pointer-events: auto !important;
 }
 
+.btn-featured {
+	color: #fff;
+	border: 2px solid #FF6B00;
+	background: linear-gradient(0deg, #FF6B00 0%, #FF6B00 100%);
+}
+
+.btn-featured:hover {
+	border: 2px solid rgba(255, 107, 0, 0.90);
+	background: linear-gradient(0deg, rgba(255, 107, 0, 0.90) 0%, rgba(255, 107, 0, 0.90) 100%);
+}
+
+.btn-featured:disabled {
+	background: linear-gradient(0deg, rgba(255, 107, 0, 0.6) 0%, rgba(255, 107, 0, 0.6) 100%), #8A9CB8; !important;
+}
+
 a {
 	color: #001AFF;
 	text-decoration: underline;

javascript/tokenscript-viewer/src/integration/abstractViewBinding.ts

@@ -53,9 +53,9 @@ export abstract class AbstractViewBinding implements IViewBinding {
 
 	async unloadTokenView() {
 		this.currentCard = null;
-		this.iframe.src = "";
 		this.actionBar.style.display = "none";
-		document.location.hash = "#";
+		this.iframe.contentWindow.location.replace("data:text/html;base64,PCFET0NUWVBFIGh0bWw+");
+		history.replaceState(undefined, undefined, "/");
 	}
 
 	protected showLoader() {
@@ -75,7 +75,8 @@ export abstract class AbstractViewBinding implements IViewBinding {
 
 		if (card.isUrlView) {
 
-			iframe.src = card.url;
+			//iframe.src = card.url;
+			iframe.contentWindow.location.replace(card.url);
 
 		} else {
 			const html = await card.renderViewHtml();
@@ -84,7 +85,8 @@ export abstract class AbstractViewBinding implements IViewBinding {
 
 			const urlFragment = card.urlFragment;
 
-			iframe.src = URL.createObjectURL(blob) + (urlFragment ? "#" + urlFragment : "");
+			const url = URL.createObjectURL(blob) + (urlFragment ? "#" + urlFragment : "");
+			iframe.contentWindow.location.replace(url);
 
 			// TODO: try src-doc method
 		}
@@ -112,7 +114,7 @@ export abstract class AbstractViewBinding implements IViewBinding {
 
 	protected handlePostMessageFromView(event: MessageEvent) {
 
-		if (!this.iframe.src)
+		if (!this.iframe)
 			return;
 
 		if (event.source !== this.iframe.contentWindow) {

javascript/tokenscript-viewer/src/integration/constants.ts

@@ -57,7 +57,7 @@ export const CHAIN_NAME_MAP: ChainMapInterface = {
 
 export const CHAIN_CONFIG: {[chain: number]: IChainConfig} = {
 	[ChainID.ETHEREUM]: {
-		rpc: 'https://eth-mainnet.g.alchemy.com/v2/2bJxn0VGXp9U5EOfA6CoMGU-rrd-BIIT',
+		rpc: 'https://mainnet.infura.io/v3/3ca8f1ba91f84e1f97c99f6218fe3743',
 		explorer: 'https://etherscan.com/tx/'
 	},
 	[ChainID.GOERLI]: {