add a phat warning if app is not updated

This commit is contained in:
dr-frmr 2024-12-25 15:37:45 -05:00
parent e39510479d
commit 988db4bb6e
No known key found for this signature in database
3 changed files with 67 additions and 53 deletions

View File

@ -343,9 +343,16 @@ td {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.app-warning {
background: var(--orange) !important;
color: var(--text-light);
padding: 1em;
}
.app-description { .app-description {
margin-bottom: 2rem; margin-bottom: 2rem;
line-height: 1.6; line-height: 1.6;
padding: 1em;
} }
.app-info { .app-info {
@ -841,7 +848,7 @@ td {
50%, 50%,
70% { 70% {
transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0);
} }
40%, 40%,
60% { 60% {
@ -856,7 +863,7 @@ td {
50% { 50% {
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -1212,81 +1219,82 @@ td {
} }
.tooltip-container { .tooltip-container {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.tooltip-icon { .tooltip-icon {
cursor: help; cursor: help;
color: #666; color: #666;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
} }
.tooltip-content { .tooltip-content {
position: absolute; position: absolute;
left: 24px; left: 24px;
top: -4px; top: -4px;
background: #333; background: #333;
color: white; color: white;
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease;
min-width: max-content; min-width: max-content;
} }
/* Create an invisible bridge between icon and content */ /* Create an invisible bridge between icon and content */
.tooltip-content::after { .tooltip-content::after {
content: ''; content: '';
position: absolute; position: absolute;
left: -20px; /* Cover the gap between icon and content */ left: -20px;
top: 0; /* Cover the gap between icon and content */
width: 20px; top: 0;
height: 100%; width: 20px;
background: transparent; height: 100%;
background: transparent;
} }
.tooltip-container:hover .tooltip-content { .tooltip-container:hover .tooltip-content {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition-delay: 0.2s; transition-delay: 0.2s;
} }
.tooltip-content:hover { .tooltip-content:hover {
opacity: 1 !important; opacity: 1 !important;
visibility: visible !important; visibility: visible !important;
} }
.tooltip-content::before { .tooltip-content::before {
content: ''; content: '';
position: absolute; position: absolute;
left: -4px; left: -4px;
top: 8px; top: 8px;
border-top: 4px solid transparent; border-top: 4px solid transparent;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
border-right: 4px solid #333; border-right: 4px solid #333;
} }
.tooltip-content a { .tooltip-content a {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
} }
.tooltip-content a:hover { .tooltip-content a:hover {
text-decoration: none; text-decoration: none;
} }
.wallet-status { .wallet-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.page-header { .page-header {

View File

@ -122,6 +122,8 @@ export default function AppPage() {
return <div className="app-page"><h4>App details not found for {id}</h4></div>; return <div className="app-page"><h4>App details not found for {id}</h4></div>;
} }
const valid_wit_version = app.metadata?.properties?.wit_version === 1
return ( return (
<section className="app-page"> <section className="app-page">
<div className="app-header"> <div className="app-header">
@ -134,6 +136,10 @@ export default function AppPage() {
</div> </div>
</div> </div>
<div className="app-warning">
{valid_wit_version ? <></> : "THIS APP MUST BE UPDATED TO 1.0"}
</div>
<div className="app-description">{app.metadata?.description || "No description available"}</div> <div className="app-description">{app.metadata?.description || "No description available"}</div>
<div className="app-info"> <div className="app-info">
@ -155,7 +161,7 @@ export default function AppPage() {
</li> </li>
)} )}
<li><span>Publisher:</span> <span>{app.package_id.publisher_node}</span></li> <li><span>Publisher:</span> <span>{app.package_id.publisher_node}</span></li>
<li><span>License:</span> <span>{app.metadata?.properties?.license || "Not specified"}</span></li> {app.metadata?.properties?.license ? <li><span>License:</span> <span>app.metadata?.properties?.license</span></li> : <></>}
<li> <li>
<span>Auto Update:</span> <span>Auto Update:</span>
<span className="status-icon"> <span className="status-icon">

View File

@ -45,7 +45,7 @@ export interface Erc721Properties {
code_hashes: [string, string][]; code_hashes: [string, string][];
license?: string; license?: string;
screenshots?: string[]; screenshots?: string[];
wit_version?: [number, number, number]; wit_version?: number;
} }
export interface OnchainPackageMetadata { export interface OnchainPackageMetadata {