diff --git a/javascript/tokenscript-viewer/src/assets/icon/sl-icon-white.png b/javascript/tokenscript-viewer/src/assets/icon/sl-icon-white.png new file mode 100644 index 00000000..17c14bd6 Binary files /dev/null and b/javascript/tokenscript-viewer/src/assets/icon/sl-icon-white.png differ diff --git a/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html b/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html index e6796859..e6cc5805 100644 --- a/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html +++ b/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html @@ -21,8 +21,8 @@ + + + + + + + + + + Cat Bio + + + + + + + + + Adopt + + + + + + + + + + + + + + + + Level Up! + + + + + + + + + + + + + + + + Messages + + + + + + + + + Feed Cat + + + + + + + + + + + + + + + + Clean Cat + + + + + + + + + + + + + + + + Accept Playdates + + + 1.3.6.1.4.1.1466.115.121.1.27 + + + + + + + + + + + + + + + + + + + + Invite Cat for Playdate + + + 1.3.6.1.4.1.1466.115.121.1.27 + + + + + + + + + + + + + + + + + + + + Partners + + + + + + + + + + 1.3.6.1.4.1.1466.115.121.1.27 + + Level + + + + + + + + + + + + 1.3.6.1.4.1.1466.115.121.1.7 + + Can Feed + + + + + + + + + + + + 1.3.6.1.4.1.1466.115.121.1.7 + + Can Play + + + + + + + + + + + + 1.3.6.1.4.1.1466.115.121.1.7 + + Can Clean + + + + + + + + + + + + 1.3.6.1.4.1.1466.115.121.1.7 + + Can Level Up + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml b/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml index 7650fa5e..b12a5eac 100644 --- a/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml +++ b/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml @@ -68,24 +68,24 @@ @@ -396,7 +396,14 @@ p.light { - + + + Partners + + + + + @@ -470,4 +477,4 @@ p.light { -GJJxM4gV8ECD5yFK7i9U79wsMg2vJni85XdRuBPXh+Y=3JdiI6pseniohJRctjrxNqT/ihHfzUAOJqM4liRfzEFTna423lxNcuJ4ZiD861AKwTnC1IZa/SjazY94p4DZHQ==4AQVAWD3IY5tHmASnBn38RKHrVTFodVnV4IAFStb3sg=ZmUq25j5e065TtcZyDY7FqHBTk8aJ2Jc/Kq5kHYq2mQ=MIIBxjCCAWygAwIBAgIBATAKBggqhkjOPQQDAjATMREwDwYDVQQDEwhTbWFydENhdDAeFw0yMzEwMjcwMjA5NTVaFw0yNTEwMjcwMjA5NTVaMBUxEzARBgNVBAMTCm1pY2N5Mi5ldGgwVjAQBgcqhkjOPQIBBgUrgQQACgNCAATgBBUBYPchjm0eYBKcGffxEoetVMWh1WdXggAVK1veyGZlKtuY+XtOuU7XGcg2OxahwU5PGidiXPyquZB2Ktpko4GxMIGuMA8GA1UdEwEB/wQFMAMCAQAwDgYDVR0PAQH/BAQDAgeAMB0GA1UdDgQWBBT3uFcb7xlllKr0HM1DFQJHJ8hyejAfBgNVHSMEGDAWgBQTK5vtCxgRHrj6QrtB/Rla2wPb6zBLBgNVHRIBAf8EQQQiMGC8T8daGKYhMWFsHwmZeRV1aawywGcGKDKIC6NV7LE1OxsmNRtSSKXkJJkhw8SYX8B8XYadL2Tsb1LMgUVfMAoGCCqGSM49BAMCA0gAMEUCIFDiOxh1gdQLKpGTgWvfYstsEd4uDZGlz9JEfC+nIApKAiEA1Onj6C8Bu0X3mUU++GnbV3wW01mxM7eQPzi7ebd10ek= \ No newline at end of file +uAaM8Ok5pWemv8LxZhLmYlg7TqKxWpydHTthEAR6LdE=t/WwiftpLYCJIPPEUJ1LSuqqVuKprhlknJq5TG5iUTF26Ja730M51jqJhSB2iPX4G6wOFpndARf/HAr4D5qviA==4AQVAWD3IY5tHmASnBn38RKHrVTFodVnV4IAFStb3sg=ZmUq25j5e065TtcZyDY7FqHBTk8aJ2Jc/Kq5kHYq2mQ=MIIBxjCCAWygAwIBAgIBATAKBggqhkjOPQQDAjATMREwDwYDVQQDEwhTbWFydENhdDAeFw0yMzEwMjcwMjA5NTVaFw0yNTEwMjcwMjA5NTVaMBUxEzARBgNVBAMTCm1pY2N5Mi5ldGgwVjAQBgcqhkjOPQIBBgUrgQQACgNCAATgBBUBYPchjm0eYBKcGffxEoetVMWh1WdXggAVK1veyGZlKtuY+XtOuU7XGcg2OxahwU5PGidiXPyquZB2Ktpko4GxMIGuMA8GA1UdEwEB/wQFMAMCAQAwDgYDVR0PAQH/BAQDAgeAMB0GA1UdDgQWBBT3uFcb7xlllKr0HM1DFQJHJ8hyejAfBgNVHSMEGDAWgBQTK5vtCxgRHrj6QrtB/Rla2wPb6zBLBgNVHRIBAf8EQQQiMGC8T8daGKYhMWFsHwmZeRV1aawywGcGKDKIC6NV7LE1OxsmNRtSSKXkJJkhw8SYX8B8XYadL2Tsb1LMgUVfMAoGCCqGSM49BAMCA0gAMEUCIFDiOxh1gdQLKpGTgWvfYstsEd4uDZGlz9JEfC+nIApKAiEA1Onj6C8Bu0X3mUU++GnbV3wW01mxM7eQPzi7ebd10ek= \ No newline at end of file diff --git a/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx b/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx index fcc75e61..61fdc4e5 100644 --- a/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx +++ b/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx @@ -62,6 +62,11 @@ export class ActionBar { }) } + componentDidLoad(){ + if (this.tokenScript) + this.initTokenScript(); + } + // TODO: This is copied from tokens-grid-item, dedupe required private async loadCardButtons(){ diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css index ec64d3c4..95f3a955 100644 --- a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css +++ b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css @@ -26,6 +26,66 @@ body { padding-top: 2px; } +.opensea-img-container { + display: flex; + flex-grow: 1; + background-size: cover; + background-repeat: no-repeat; + background-position: top; +} + +.info-button, .close-button { + font-size: 30px; + background: #000; + color: #fff; + width: 40px; + height: 40px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.info-button img { + width: 90%; +} + +.info-button-container { + position: absolute; + top: 0; + left: 0; + z-index: 30; + height: 40px; + width: 40px; + margin: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.close-button { + position: absolute; + top: 0; + right: 0; + z-index: 50; + margin: 20px; + text-align: center; + display: table-cell; +} + +.card-overlay { + position: absolute; + top: 0; + width: 100%; + height: 100%; + z-index: 40; +} + +opensea-viewer, .opensea-viewer { + position: relative; +} + opensea-viewer, .opensea-viewer, card-view, .card-container { display: flex !important; flex-direction: column; @@ -33,7 +93,7 @@ opensea-viewer, .opensea-viewer, card-view, .card-container { } .card-container { - max-width: 900px !important; + max-width: unset !important; margin: 0 auto !important; max-height: unset !important; width: 100%; diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx index 937ecf32..e3e9a7c5 100644 --- a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx +++ b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx @@ -27,6 +27,9 @@ export class OpenseaViewer { @State() tokenScript: TokenScript; + @State() + showInfoCard = false; + viewBinding: ViewBinding; urlRequest: URLSearchParams; @@ -69,7 +72,7 @@ export class OpenseaViewer { this.urlRequest = query; await this.processUrlLoad(); - await this.loadTokenScript(); + this.loadTokenScript(); } catch (e){ console.error(e); @@ -140,10 +143,7 @@ export class OpenseaViewer { this.viewBinding.setTokenScript(this.tokenScript); this.tokenScript.setViewBinding(this.viewBinding); - const infoCard = this.tokenScript.getCards().find((card) => card.type === "token"); - if (infoCard) - this.tokenScript.showOrExecuteTokenCard(infoCard); } } catch (e){ @@ -151,11 +151,42 @@ export class OpenseaViewer { } } + private displayInfoCard(){ + const infoCard = this.tokenScript.getCards().find((card) => card.type === "token"); + + if (infoCard) { + this.tokenScript.showOrExecuteTokenCard(infoCard); + this.showInfoCard = true + } + } + render(){ return ( - +
+ { this.tokenDetails ? + [ +
+
+ { this.tokenScript ? +
this.displayInfoCard()}> + Smart Layer +
: + + } +
+
, +
+
{ + this.showInfoCard = false; + this.tokenScript.getViewController().unloadTokenCard(); + }}>x
+ +
+ ] + : ''} +
Powered by TokenScript icon