Skip to content

Commit

Permalink
feat: enhancements for TLink & Mooar views
Browse files Browse the repository at this point in the history
  • Loading branch information
@micwallace
micwallace committed Oct 21, 2024
1 parent 9c68191 commit 28749b3
Show file tree
Hide file tree
Showing 11 changed files with 172 additions and 183 deletions.
19 changes: 13 additions & 6 deletions javascript/tokenscript-viewer/src/assets/test-iframe-provider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
<button class="frame-btn" data-params="chain=11155111&contract=0x0404ab3994ed48c300ce219546f757ad34484dc7&tokenscriptUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSmartTokenLabs%2Fresources%2Ftokenscript-sln-sepolia.tsml">Sepolia SLN</button>
<button class="frame-btn" data-params="chain=1&contract=0x3c7e352481f4b2fdec1e642a3f0018661c77513d&tokenId=398233297468566556333642">Eth Devcon</button>
<button class="frame-btn" data-params="chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1">Seplia ERC1155</button>
<button class="frame-btn" data-params="chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543">Polygon SmartCat</button>
<button class="frame-btn" data-params="chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543&card=Info">Polygon SmartCat</button>
<button class="frame-btn" data-params="chain=137&contract=0xB48f53010Acbc0E24D3D12D892E2215879e6fD13&tokenId=715&card=play">Morchi</button>
<select id="view-type">
<option value="joyid-token">Joy.ID</option>
<option value="sts-token">Launchpad</option>
Expand All @@ -42,26 +43,32 @@
params = new URLSearchParams();
params.set("chain", currentParams.get("chain"));
params.set("contract", currentParams.get("contract"));
params.set("tokenId", currentParams.get("tokenId"));
if (currentParams.has("emulator"))
params.set("emulator", currentParams.get("emulator"))
if (currentParams.has("tokenId"))
params.set("tokenId", currentParams.get("tokenId"));
} else {
//params = new URLSearchParams("chain=11155111&contract=0xbb14e71e54e03808a6271722192d03ebdc2eab7f&tokenId=3446746621659278273178542360570905268274680596831489800398881977304212307968&tokenscriptUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSmartTokenLabs%2Fresources%2Ftokenscript%2Frb-sepolia-0xbb14e71e54e03808a6271722192d03ebdc2eab7f-v5.tsml")
//params = new URLSearchParams("chain=11155111&contract=0xa532D3c016aA0B44b7228aCcd701A5F03112CD22&tokenId=1"); // smart cat sepolia
//params = new URLSearchParams("chain=11155111&contract=0x2d46915606580080C6c9032ed041e6FF21a5C8a6&tokenId=0&card=Play"); // Morchi sepolia mockNFT
params = new URLSearchParams("chain=11155111&contract=0xF1eb943F12824659d3756004245D14aD001ff82b&tokenId=0&card=Donate");
params = new URLSearchParams("chain=137&contract=0xB48f53010Acbc0E24D3D12D892E2215879e6fD13&tokenId=715&card=Play");
//params = new URLSearchParams("chain=11155111&contract=0xF1eb943F12824659d3756004245D14aD001ff82b&tokenId=0&card=Donate"); // BuyMeABeer
//params = new URLSearchParams("chain=31337&contract=0x5FbDB2315678afecb367f032d93F642f64180aa3&tokenId=1&emulator=http%3A%2F%2Flocalhost%3A8090%2F");
//params = new URLSearchParams("chain=1001&contract=0x73148b2c977586305f5aaa63b473a7af96619296&tokenId=15&emulator=http%3A%2F%2Flocalhost%3A8090%2F");
//params = new URLSearchParams("chain=11155111&contract=0xa532D3c016aA0B44b7228aCcd701A5F03112CD22&tokenId=1&tokenscriptUrl=http%3A%2F%2Flocalhost%3A8090%2Ftokenscript.tsml"); // smart cat sepolia emulator
//params = new URLSearchParams("chain=1&contract=0x3c7e352481f4b2fdec1e642a3f0018661c77513d&tokenId=398233297468566556333642"); // devcon
//params = new URLSearchParams("chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1"); // ERC1155
}

if (currentParams.has("card"))
params.set("card", currentParams.get("card"));

if (currentParams.has("emulator"))
params.set("emulator", currentParams.get("emulator"))

function loadIframeUrl(){
params.set("viewType", document.getElementById("view-type").value);
//params.set("actionsEnabled", "false");
params.set("fullScreen", "true");
document.getElementById("frame").src = BASE_URL + "?" + params.toString() + (card ? `#card=${card}` : '');
document.getElementById("frame").src = BASE_URL + "?" + params.toString();
}

for (const button of document.getElementsByClassName("frame-btn")){
Expand Down
3 changes: 2 additions & 1 deletion javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {getTokenUrlParams} from "../util/getTokenUrlParams";
import {invokeDeeplink} from "../util/invokeDeeplink";
import {connectEmulatorSocket} from "../util/connectEmulatorSocket";
import {ViewController} from "@tokenscript/engine-js/src/view/ViewController";
import {getTokenScriptWithProvidedTokenContext} from "../util/getTokenScriptWithProvidedTokenContext";

@Component({
tag: 'mooar-viewer',
Expand Down Expand Up @@ -106,7 +107,7 @@ export class SmartTokenStoreViewer {

private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){

this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
this.tokenScript = await getTokenScriptWithProvidedTokenContext(this.app, chain, contract, scriptId, tokenId, tokenScriptUrl);

// Reload cards after the token is updated
this.tokenScript.on("TOKENS_UPDATED", (data) => {
Expand Down
57 changes: 8 additions & 49 deletions javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,39 @@ body, action-overflow-modal .popover-container {
color: #333;
}

.mooar-header {
.tlink-header {
height: 45px;
margin: 5px 15px 0;
display: flex;
align-items: center;
}

.mooar-header a {
.tlink-header a {
display: flex;
align-items: center;
text-decoration: none;
}

.mooar-header .text {
.tlink-header .text {
font-size: 16px;
font-weight: 500;
color: #fff;
}

.mooar-header .header-icon {
.tlink-header .header-icon {
height: 24px !important;
padding-left: 8px;
}

.mooar-header-right {
.tlink-header-right {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}

.mooar-viewer {
.tlink-viewer {
max-width: 800px;
width: 100%;
height: 100vh;
Expand Down Expand Up @@ -93,7 +93,7 @@ card-view .card-container {
padding: 10px 15px 0;
}

.mooar-viewer .btn {
.tlink-viewer .btn {
font-size: 16px !important;
line-height: 22px;
font-weight: 700;
Expand All @@ -102,51 +102,10 @@ card-view .card-container {
border-radius: 14px;
}

.mooar-viewer .btn:disabled {
.tlink-viewer .btn:disabled {
opacity: 0.6 !important;
}

.mooar-viewer .btn-primary, .mooar-viewer .btn-featured {
background: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
border: none;
}

.mooar-viewer .btn-primary:hover, .mooar-viewer .btn-featured:hover, .mooar-viewer .btn-primary:disabled, .mooar-viewer .btn-featured:disabled {
background: linear-gradient(106.84deg, #ff8c4a 6.22%, #ff065f 90.19%) !important;
border: none;
}

.mooar-viewer .btn-secondary, .mooar-viewer .btn-secondary:disabled {
border: 1px solid rgb(255, 88, 36);
border-color: rgb(255, 88, 36) !important;
background: transparent;
}

.btn-secondary:disabled {
background: transparent !important;
}

.mooar-viewer .btn-secondary span {
background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
background-clip: text;
color: transparent;
}

.mooar-viewer .btn-secondary:hover {
border: 1px solid rgb(255, 88, 36);
background: rgba(194, 140, 109, 0.06);
}

.mooar-viewer .more-actions-btn {
border: 1px solid rgb(70, 65, 63);
background: none;
color: #fff;
}

.mooar-viewer .more-actions-btn:hover {
background: rgba(194, 140, 109, 0.06);
}

card-view .action-bar {
height: auto !important;
padding: 10px 0 0 !important;
Expand Down
40 changes: 21 additions & 19 deletions javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,29 +256,31 @@ export class TlinkViewer {

return (
<Host>
<div class="mooar-viewer">
<div class="mooar-header">
<div class="tlink-viewer">
<style innerHTML={this.tokenScript ? this.tokenScript.viewStyles.getViewCss() : ""}/>
<div class="tlink-header">
<a href="https://www.smartlayer.network/" target="_blank">
<img class="header-icon" alt="SmartLayer Network" src="assets/icon/smart-layer-icon.png"/>
<span class="text">Tapp Viewer</span>
</a>
<div class="mooar-header-right">
<div class="tlink-header-right">
{/*<share-to-tg-button/>*/}
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small" />}
{ this.tokenScript && <tokens-selector tokenScript={this.tokenScript} switchToken={async (token) => {
// TODO: Allow removing token context so this flag isn't needed?
if (token) {
this.tokenScript.setCurrentTokenContext(token.originId, null, token.tokenId);
this.onboardingSelected = false;
} else {
this.onboardingSelected = true;
}
this.card = null;
this.mainCard = null;
await this.mainViewController.unloadTokenCard();
await this.loadCards();
await this.mainViewController.showOrExecuteCard(this.mainCard, undefined);
}} />}
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small"/>}
{this.tokenScript &&
<tokens-selector tokenScript={this.tokenScript} switchToken={async (token) => {
// TODO: Allow removing token context so this flag isn't needed?
if (token) {
this.tokenScript.setCurrentTokenContext(token.originId, null, token.tokenId);
this.onboardingSelected = false;
} else {
this.onboardingSelected = true;
}
this.card = null;
this.mainCard = null;
await this.mainViewController.unloadTokenCard();
await this.loadCards();
await this.mainViewController.showOrExecuteCard(this.mainCard, undefined);
}}/>}
</div>
</div>
<card-view ref={(el: HTMLElement) => this.mainCardView = el}></card-view>
Expand All @@ -303,7 +305,7 @@ export class TlinkViewer {
] : ''
}
</div>
: ''}
: ''}
<card-popover tokenScript={this.tokenScript}></card-popover>
</div>
</Host>
Expand Down
57 changes: 8 additions & 49 deletions javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,39 @@ body, action-overflow-modal .popover-container {
color: #333;
}

.mooar-header {
.tlink-header {
height: 34px;
margin: 0 15px 0;
display: flex;
align-items: center;
}

.mooar-header a {
.tlink-header a {
display: flex;
align-items: center;
text-decoration: none;
}

.mooar-header .text {
.tlink-header .text {
font-size: 14px;
font-weight: 500;
color: #fff;
}

.mooar-header .header-icon {
.tlink-header .header-icon {
height: 20px !important;
padding-left: 8px;
}

.mooar-header-right {
.tlink-header-right {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}

.mooar-viewer {
.tlink-viewer {
max-width: 800px;
width: 100%;
height: 100vh;
Expand Down Expand Up @@ -93,7 +93,7 @@ card-view .card-container {
padding: 10px 20px;
}

.mooar-viewer .btn {
.tlink-viewer .btn {
font-size: 16px !important;
line-height: 22px;
font-weight: 700;
Expand All @@ -102,51 +102,10 @@ card-view .card-container {
border-radius: 14px;
}

.mooar-viewer .btn:disabled {
.tlink-viewer .btn:disabled {
opacity: 0.6 !important;
}

/*.mooar-viewer .btn-primary, .mooar-viewer .btn-featured {
background: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
border: none;
}
.mooar-viewer .btn-primary:hover, .mooar-viewer .btn-featured:hover, .mooar-viewer .btn-primary:disabled, .mooar-viewer .btn-featured:disabled {
background: linear-gradient(106.84deg, #ff8c4a 6.22%, #ff065f 90.19%) !important;
border: none;
}
.mooar-viewer .btn-secondary, .mooar-viewer .btn-secondary:disabled {
border: 1px solid rgb(255, 88, 36);
border-color: rgb(255, 88, 36) !important;
background: transparent;
}
.btn-secondary:disabled {
background: transparent !important;
}
.mooar-viewer .btn-secondary span {
background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
background-clip: text;
color: transparent;
}
.mooar-viewer .btn-secondary:hover {
border: 1px solid rgb(255, 88, 36);
background: rgba(194, 140, 109, 0.06);
}
.mooar-viewer .more-actions-btn {
border: 1px solid rgb(70, 65, 63);
background: none;
color: #fff;
}
.mooar-viewer .more-actions-btn:hover {
background: rgba(194, 140, 109, 0.06);
}*/

card-view .action-bar {
height: auto !important;
padding: 10px 0 0 !important;
Expand Down
6 changes: 3 additions & 3 deletions javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,13 +141,13 @@ export class TlinkCardViewer {

return (
<Host>
<div class="mooar-viewer">
<div class="mooar-header">
<div class="tlink-viewer">
<div class="tlink-header">
<a href="https://www.smartlayer.network/" target="_blank">
<img class="header-icon" alt="SmartLayer Network" src="assets/icon/smart-layer-icon.png"/>
<span class="text">Tapp Viewer</span>
</a>
<div class="mooar-header-right">
<div class="tlink-header-right">
{/*<share-to-tg-button/>*/}
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="x-small" />}
</div>
Expand Down
22 changes: 22 additions & 0 deletions ...ipt/tokenscript-viewer/src/components/viewers/util/getSelectedOriginTokenFromUrlParams.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {TokenScript} from "@tokenscript/engine-js/src";

export async function getSelectedOriginTokenFromUrlParams(tokenScript: TokenScript, chain: number, contract: string){

const origins = tokenScript.getTokenOriginData();

// TODO: Return the origin specified in the URL

for (const origin of origins) {
if (
origin.chainId === chain &&
origin.contractAddress.toLowerCase() === contract.toLowerCase() //&&
// This is required to handle ST404, where both the erc20 & 721 contract origins are included in the same tokenscript
// TODO: This causes issues for onboarding cards
//((tokenId === null && origin.tokenType === "erc20") || (tokenId !== null && origin.tokenType !== "erc20"))
) {
return origin;
}
}

throw new Error("Could not find token origin in the tokenscript");
}
Loading

0 comments on commit 28749b3

Please sign in to comment.