feat: Add security header (#145)

src/components/layout/HeaderSection.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import AuditStatus from "@/components/warnings/AuditStatus.vue";
 import WalletConnect from "@/components/popups/WalletConnect.vue";
+
+const securityLink = "https://github.com/allinbits/security/";
 </script>
 
 <template>
@@ -23,9 +26,13 @@ import WalletConnect from "@/components/popups/WalletConnect.vue";
             class="text-300 py-4 hover:text-light text-grey-100"
             >{{ $t("homepage.viewForums") }}</a
           >
+          <a :href="securityLink" target="_blank" class="hover:text-light text-grey-100 duration-200">{{
+            $t("homepage.security")
+          }}</a>
         </div>
       </div>
       <WalletConnect class="hidden md:block" />
     </nav>
+    <AuditStatus :link="securityLink" />
   </header>
 </template>

src/components/warnings/AuditStatus.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useLocalStorage } from "@vueuse/core";
+
+import Icon from "@/components/ui/Icon.vue";
+
+const isSecurityHeaderVisible = useLocalStorage("security-popup", true);
+const props = defineProps<{ link: string }>();
+
+function hideSecurityLabel() {
+  isSecurityHeaderVisible.value = false;
+}
+</script>
+
+<template>
+  <div
+    v-if="isSecurityHeaderVisible"
+    class="flex flex-row justify-between items-start bg-red-200 w-full py-5 px-5 rounded text-red-400 text-300 gap-8 mb-2"
+  >
+    <div class="flex flex-col gap-4">
+      <span class="text-justify">{{ $t("homepage.auditStatus") }}</span>
+      <Icon icon="link" :size="1">
+        <a :href="props.link" target="_blank" class="font-bold">{{ $t("homepage.viewAuditStatus") }}</a>
+      </Icon>
+    </div>
+    <button class="hover:opacity-50" @click="hideSecurityLabel">
+      <Icon icon="close" :size="2" />
+    </button>
+  </div>
+</template>

src/localization/index.ts

@@ -16,6 +16,10 @@ export const messages = {
       viewProposals: "Proposals",
       viewFaq: "FAQ",
       viewForums: "Forum",
+      viewAuditStatus: "View Audit Status",
+      security: "Security",
+      auditStatus:
+        "Your security is our priority! Click below to view this application's latest audit status and see how we’re working to keep you safe. We encourage you to check the audit status regularly before using the application to ensure you’re always up-to-date on our security measures.",
     },
     termspage: {
       title: "Terms of Service",