permaweb

Author: LorimerJenkins

src/app/home/AssetRow/AssetRow.module.css

@@ -236,3 +236,28 @@ body.modal-open .tooltip {
 body.modal-open .tooltip {
   z-index: 1 !important;
 }
+
+/* AO airdrop banner */
+
+.specialStyling {
+  position: relative;
+}
+
+.specialStyling .assetRow {
+  border: 3px solid var(--primary-palatinate-blue);
+  padding: 9px 13px;
+}
+
+.aoLabel {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background-color: var(--primary-palatinate-blue);
+  color: #ffffff;
+  padding: 2px 6px;
+  font-size: 7px;
+  font-weight: bold;
+  border-radius: 4px;
+  z-index: 10;
+  pointer-events: none;
+}

src/app/home/AssetRow/AssetRow.tsx

@@ -34,6 +34,10 @@ const AssetRow: React.FC<AssetRowProps> = ({ asset, mode }) => {
   // Check if the token is deprecated
   const isDeprecated = DEPRECATED_TOKENS.includes(asset.cleanTicker);
 
+  // Check if this should have special styling (WAR in lend mode)
+  const hasSpecialStyling =
+    asset.ticker.toUpperCase() === "WAR" && mode === "lend";
+
   const actionDo = mode === "lend" ? "Supply" : "Borrow";
   const actionReverse = mode === "lend" ? "Withdraw" : "Repay";
 
@@ -71,10 +75,13 @@ const AssetRow: React.FC<AssetRowProps> = ({ asset, mode }) => {
   }, [asset, currentBalance]);
 
   // Add class to hide tooltips when modal is open
-  const wrapperClasses = `${styles.assetRowWrapper} ${modal.modalType ? "modal-open" : ""}`;
+  const wrapperClasses = `${styles.assetRowWrapper} ${modal.modalType ? "modal-open" : ""} ${hasSpecialStyling ? styles.specialStyling : ""}`;
 
   return (
     <div className={wrapperClasses}>
+      {hasSpecialStyling && (
+        <div className={styles.aoLabel}>Continues earning AO while lent</div>
+      )}
       <Link href={`/${asset.cleanTicker}`} className={styles.assetRow}>
         <div className={styles.assetInfo}>
           <div className={styles.iconWrapper}>