Merge remote-tracking branch 'upstream/master'

assets/scss/main.scss

@@ -411,6 +411,7 @@ a {
   --integritee-blue: #1845b9;
   --integritee-green: #24ad7c;
   --integritee-red: #ff4d4d;
+  --integritee-yellow: #ffdb4d;
   --integritee-gray: #696868;
 }
 
@@ -430,6 +431,10 @@ a {
   background: var(--integritee-green);
 }
 
+.incognitee-yellow {
+  background: var(--integritee-yellow);
+}
+
 .incognitee-border-gradient {
   width: 100%;
   height: 100%;

components/ui/WarningBanner.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="flex flex-col lg:flex-row container p-2 incognitee-yellow items-center text-indigo-100 leading-none lg:rounded-full"
+  >
+    <div
+      class="flex w-full justify-between items-center"
+      :class="{ 'py-2': isMobile }"
+    >
+      <!-- Live Badge -->
+      <span
+        class="rounded-full incognitee-yellow uppercase px-2 py-1 text-xs font-bold mr-3 text-red-400"
+        >⚠</span
+      >
+
+      <!-- Mobile Version -->
+      <p
+        v-if="isMobile"
+        class="flex-1 text-sm font-medium text-black mx-2"
+        v-html="textMobile"
+      />
+
+      <!-- Desktop Version -->
+      <p
+        v-else
+        class="flex-1 text-sm font-medium text-black mx-2"
+        v-html="textDesktop"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+defineProps({
+  isMobile: {
+    type: Boolean,
+    required: true,
+  },
+  textMobile: {
+    type: String,
+    required: false,
+  },
+  textDesktop: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style scoped>
+/* to apply styles to content rendered by v-html */
+::v-deep a {
+  text-decoration: underline;
+  color: #1a1a1a;
+}
+</style>

pages/index.vue

@@ -1,11 +1,21 @@
 <template>
-  <CampaignBanner
-    v-if="enableActions"
-    :onClick="openGuessTheNumberOverlay"
+  <WarningBanner
+    v-if="
+      isProd && accountStore.getAddress !== 'none' && !accountStore.hasInjector
+    "
     :isMobile="isMobile"
-    textMobile="Guess-The-Number"
-    textDesktop="Join the Guess-The-Number Campaign and win some juicy prizes."
+    textMobile="This is a temporary voucher with low security. Please use a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
+    textDesktop="You are using a temporary voucher with low security. Everyone who knows your url (including the person who may have shared this url with you) could spend these funds. Please transfer funds to a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
   />
+  <div v-else>
+    <CampaignBanner
+      v-if="enableActions"
+      :onClick="openGuessTheNumberOverlay"
+      :isMobile="isMobile"
+      textMobile="Guess-The-Number"
+      textDesktop="Join the Guess-The-Number Campaign and win some juicy prizes."
+    />
+  </div>
 
   <InfoBanner
     v-if="!enableActions"
@@ -1088,6 +1098,7 @@ import {
   INCOGNITEE_UNSHIELDING_FEE,
 } from "../configs/incognitee";
 import { useSystemHealth } from "@/store/systemHealth";
+import WarningBanner from "@/components/ui/WarningBanner.vue";
 
 const router = useRouter();
 const accountStore = useAccount();
@@ -1602,6 +1613,15 @@ const subscribeWhatsReady = async () => {
   promises.push(p2);
 
   await Promise.all(promises);
+
+  if (accountStore.getDecimalBalanceTransferable(shieldingTarget.value) === 0) {
+    if (
+      accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) > 0
+    ) {
+      console.log("account has funds on incognitee. selecting private tab");
+      selectTab("private");
+    }
+  }
 };
 const copyOwnAddressToClipboard = () => {
   navigator.clipboard
@@ -1650,6 +1670,9 @@ onMounted(async () => {
     }
   } else {
     openChooseWalletOverlay();
+  }
+  if (accountStore.getAddress !== "none") {
+    // if we move back from TEERdays, the account may already be selected and the subscription watcher won't trigger
     await subscribeWhatsReady();
   }
 });