From 988db4bb6efb573742649765c7a7a09f724da51a Mon Sep 17 00:00:00 2001
From: dr-frmr <docterformer@protonmail.com>
Date: Wed, 25 Dec 2024 15:37:45 -0500
Subject: [PATCH] add a phat warning if app is not updated

---
 kinode/packages/app-store/ui/src/index.css    | 108 ++++++++++--------
 .../app-store/ui/src/pages/AppPage.tsx        |   8 +-
 .../packages/app-store/ui/src/types/Apps.ts   |   4 +-
 3 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/kinode/packages/app-store/ui/src/index.css b/kinode/packages/app-store/ui/src/index.css
index 7c526125..311ee5c4 100644
--- a/kinode/packages/app-store/ui/src/index.css
+++ b/kinode/packages/app-store/ui/src/index.css
@@ -193,7 +193,7 @@ button.danger:hover {
 
 .notification-btn:hover {
     background: var(--surface-hover);
-} */ 
+} */
 
 /* Tables */
 table {
@@ -343,9 +343,16 @@ td {
     margin-bottom: 1.5rem;
 }
 
+.app-warning {
+    background: var(--orange) !important;
+    color: var(--text-light);
+    padding: 1em;
+}
+
 .app-description {
     margin-bottom: 2rem;
     line-height: 1.6;
+    padding: 1em;
 }
 
 .app-info {
@@ -841,7 +848,7 @@ td {
     50%,
     70% {
         transform: translate3d(-4px, 0, 0);
-}
+    }
 
     40%,
     60% {
@@ -856,7 +863,7 @@ td {
 
     50% {
         opacity: 0.6;
-}
+    }
 
     100% {
         opacity: 1;
@@ -1212,81 +1219,82 @@ td {
 }
 
 .tooltip-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .tooltip-icon {
-  cursor: help;
-  color: #666;
-  font-size: 14px;
-  position: relative;
+    cursor: help;
+    color: #666;
+    font-size: 14px;
+    position: relative;
 }
 
 .tooltip-content {
-  position: absolute;
-  left: 24px;
-  top: -4px;
-  background: #333;
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  white-space: nowrap;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-  min-width: max-content;
+    position: absolute;
+    left: 24px;
+    top: -4px;
+    background: #333;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    min-width: max-content;
 }
 
 /* Create an invisible bridge between icon and content */
 .tooltip-content::after {
-  content: '';
-  position: absolute;
-  left: -20px; /* Cover the gap between icon and content */
-  top: 0;
-  width: 20px;
-  height: 100%;
-  background: transparent;
+    content: '';
+    position: absolute;
+    left: -20px;
+    /* Cover the gap between icon and content */
+    top: 0;
+    width: 20px;
+    height: 100%;
+    background: transparent;
 }
 
 .tooltip-container:hover .tooltip-content {
-  opacity: 1;
-  visibility: visible;
-  transition-delay: 0.2s;
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 0.2s;
 }
 
 .tooltip-content:hover {
-  opacity: 1 !important;
-  visibility: visible !important;
+    opacity: 1 !important;
+    visibility: visible !important;
 }
 
 .tooltip-content::before {
-  content: '';
-  position: absolute;
-  left: -4px;
-  top: 8px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 4px solid #333;
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: 8px;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-right: 4px solid #333;
 }
 
 .tooltip-content a {
-  color: #fff;
-  text-decoration: underline;
+    color: #fff;
+    text-decoration: underline;
 }
 
 .tooltip-content a:hover {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .wallet-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .page-header {
diff --git a/kinode/packages/app-store/ui/src/pages/AppPage.tsx b/kinode/packages/app-store/ui/src/pages/AppPage.tsx
index bb6c97aa..01e44364 100644
--- a/kinode/packages/app-store/ui/src/pages/AppPage.tsx
+++ b/kinode/packages/app-store/ui/src/pages/AppPage.tsx
@@ -122,6 +122,8 @@ export default function AppPage() {
     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 (
     <section className="app-page">
       <div className="app-header">
@@ -134,6 +136,10 @@ export default function AppPage() {
         </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-info">
@@ -155,7 +161,7 @@ export default function AppPage() {
             </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>
             <span>Auto Update:</span>
             <span className="status-icon">
diff --git a/kinode/packages/app-store/ui/src/types/Apps.ts b/kinode/packages/app-store/ui/src/types/Apps.ts
index c1051d7d..57645f9b 100644
--- a/kinode/packages/app-store/ui/src/types/Apps.ts
+++ b/kinode/packages/app-store/ui/src/types/Apps.ts
@@ -45,7 +45,7 @@ export interface Erc721Properties {
     code_hashes: [string, string][];
     license?: string;
     screenshots?: string[];
-    wit_version?: [number, number, number];
+    wit_version?: number;
 }
 
 export interface OnchainPackageMetadata {
@@ -99,7 +99,7 @@ export interface HashMismatch {
     actual: string;
 }
 
-export type DownloadError = 
+export type DownloadError =
     | "NoPackage"
     | "NotMirroring"
     | { HashMismatch: HashMismatch }