From 6cfc7e37df0b41d11de8f5049ba0a6d893e91093 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Wed, 8 Jan 2025 11:53:10 -0800
Subject: [PATCH 1/9] feat: updates popup ui

---
 packages/extension/src/ui/action/App.vue      |  26 ++-
 .../components/header-accounts.vue            |   1 +
 .../src/ui/action/icons/updates/updated.vue   |  61 +++++
 .../updates/components/updates-header.vue     |  54 +++++
 .../updates/components/updates-network.vue    |  73 ++++++
 .../src/ui/action/views/updates/index.vue     | 221 ++++++++++++++++++
 .../src/ui/action/views/updates/news.json     |  97 ++++++++
 7 files changed, 532 insertions(+), 1 deletion(-)
 create mode 100644 packages/extension/src/ui/action/icons/updates/updated.vue
 create mode 100644 packages/extension/src/ui/action/views/updates/components/updates-header.vue
 create mode 100644 packages/extension/src/ui/action/views/updates/components/updates-network.vue
 create mode 100644 packages/extension/src/ui/action/views/updates/index.vue
 create mode 100644 packages/extension/src/ui/action/views/updates/news.json

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index a723bd0b0..7c7310162 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -6,7 +6,10 @@
     <div v-show="!isLoading" ref="appMenuRef" class="app__menu">
       <!-- LOGO & TOP MENU -->
       <div class="app__menu-row" :class="{ border: networks.length > 9 }">
-        <logo-min class="app__menu-logo" />
+        <div class="app__menu-row">
+          <logo-min class="app__menu-logo" />
+          <updated-icon @click="openUpdatesDialog" class="app__menu-updated" />
+        </div>
         <div>
           <a ref="toggle" class="app__menu-link" @click="toggleMoreMenu">
             <more-icon />
@@ -97,6 +100,10 @@
       :latest-version="latestVersion"
       @close:popup="updateShow = !updateShow"
     />
+    <updates-dialog
+      v-if="updatesDialogShow"
+      @close:popup="updatesDialogShow = !updatesDialogShow"
+    />
   </div>
 </template>
 
@@ -143,6 +150,8 @@ import { AccountsHeaderData } from './types/account';
 import AddNetwork from './views/add-network/index.vue';
 import ModalRate from './views/modal-rate/index.vue';
 import Settings from './views/settings/index.vue';
+import UpdatesDialog from './views/updates/index.vue';
+import UpdatedIcon from './icons/updates/updated.vue';
 import { KadenaNetwork } from '@/providers/kadena/types/kadena-network';
 import { EnkryptProviderEventMethods, ProviderName } from '@/types/provider';
 import { onClickOutside } from '@vueuse/core';
@@ -182,6 +191,7 @@ const currentNetwork = ref<BaseNetwork>(defaultNetwork);
 const currentSubNetwork = ref<string>('');
 const kr = new PublicKeyRing();
 const addNetworkShow = ref(false);
+const updatesDialogShow = ref(false);
 const settingsShow = ref(false);
 const rateShow = ref(false);
 const updateShow = ref(false);
@@ -552,6 +562,10 @@ const setIsToggledTestNetwork = async () => {
     console.error('Failed to set is toggled test network:', error);
   }
 };
+
+const openUpdatesDialog = () => {
+  updatesDialogShow.value = true;
+};
 </script>
 
 <style lang="less">
@@ -621,6 +635,16 @@ body {
     &-logo {
       margin-left: 8px;
     }
+    &-updated {
+      height: 24px;
+      width: 90px;
+      cursor: pointer;
+      transition: 0.3s;
+      filter: brightness(1);
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
 
     &-row {
       height: 40px;
diff --git a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
index 31071aaa6..6ab5b29cd 100644
--- a/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
+++ b/packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue
@@ -237,6 +237,7 @@ const disconnectFromDapp = async () => {
         height: 32px;
         margin-right: 12px;
         border-radius: 50%;
+        margin-top: 2px;
       }
       &__active-network {
         position: absolute;
diff --git a/packages/extension/src/ui/action/icons/updates/updated.vue b/packages/extension/src/ui/action/icons/updates/updated.vue
new file mode 100644
index 000000000..fa3e2d2d4
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/updates/updated.vue
@@ -0,0 +1,61 @@
+<template>
+  <svg
+    width="97"
+    height="30"
+    viewBox="0 0 97 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_d_7098_20705)">
+      <path
+        d="M11.7309 5.43415C13.9744 3.23306 16.9919 2 20.1348 2H82C88.6274 2 94 7.37258 94 14C94 20.6274 88.6274 26 82 26H20.1348C16.9919 26 13.9744 24.7669 11.7309 22.5658L4.45514 15.4276C3.65602 14.6436 3.65602 13.3564 4.45515 12.5724L11.7309 5.43415Z"
+        fill="white"
+      />
+    </g>
+    <path
+      d="M21.8184 19.3789C21.7598 19.3789 21.6895 19.3613 21.6074 19.3262C21.5293 19.2949 21.459 19.2598 21.3965 19.2207C20.2949 18.5176 19.3398 17.7812 18.5312 17.0117C17.7227 16.2383 17.0977 15.4453 16.6562 14.6328C16.2188 13.8164 16 12.9922 16 12.1602C16 11.6406 16.082 11.166 16.2461 10.7363C16.4141 10.3027 16.6465 9.92773 16.9434 9.61133C17.2402 9.29492 17.5859 9.05078 17.9805 8.87891C18.375 8.70703 18.8027 8.62109 19.2637 8.62109C19.8379 8.62109 20.3418 8.76758 20.7754 9.06055C21.209 9.35352 21.5566 9.74023 21.8184 10.2207C22.084 9.73633 22.4336 9.34961 22.8672 9.06055C23.3008 8.76758 23.8027 8.62109 24.373 8.62109C24.834 8.62109 25.2617 8.70703 25.6562 8.87891C26.0547 9.05078 26.4004 9.29492 26.6934 9.61133C26.9902 9.92773 27.2207 10.3027 27.3848 10.7363C27.5527 11.166 27.6367 11.6406 27.6367 12.1602C27.6367 12.9922 27.416 13.8164 26.9746 14.6328C26.5371 15.4453 25.9141 16.2383 25.1055 17.0117C24.3008 17.7812 23.3477 18.5176 22.2461 19.2207C22.1836 19.2598 22.1113 19.2949 22.0293 19.3262C21.9512 19.3613 21.8809 19.3789 21.8184 19.3789Z"
+      fill="#684CFF"
+    />
+    <path
+      d="M37.291 9.46875H38.7559V15.1699C38.7559 15.8184 38.6152 16.3613 38.334 16.7988C38.0527 17.2363 37.6699 17.5664 37.1855 17.7891C36.7051 18.0078 36.168 18.1172 35.5742 18.1172C34.9609 18.1172 34.4141 18.0078 33.9336 17.7891C33.4531 17.5664 33.0742 17.2363 32.7969 16.7988C32.5234 16.3613 32.3867 15.8184 32.3867 15.1699V9.46875H33.8516V15.1699C33.8516 15.5801 33.9219 15.918 34.0625 16.1836C34.2031 16.4453 34.4023 16.6387 34.6602 16.7637C34.918 16.8887 35.2227 16.9512 35.5742 16.9512C35.9258 16.9512 36.2285 16.8887 36.4824 16.7637C36.7402 16.6387 36.9395 16.4453 37.0801 16.1836C37.2207 15.918 37.291 15.5801 37.291 15.1699V9.46875ZM42.1328 12.8789V20.4375H40.7207V11.6602H42.0215L42.1328 12.8789ZM46.2637 14.7715V14.8945C46.2637 15.3555 46.209 15.7832 46.0996 16.1777C45.9941 16.5684 45.8359 16.9102 45.625 17.2031C45.418 17.4922 45.1621 17.7168 44.8574 17.877C44.5527 18.0371 44.2012 18.1172 43.8027 18.1172C43.4082 18.1172 43.0625 18.0449 42.7656 17.9004C42.4727 17.752 42.2246 17.543 42.0215 17.2734C41.8184 17.0039 41.6543 16.6875 41.5293 16.3242C41.4082 15.957 41.3223 15.5547 41.2715 15.1172V14.6426C41.3223 14.1777 41.4082 13.7559 41.5293 13.377C41.6543 12.998 41.8184 12.6719 42.0215 12.3984C42.2246 12.125 42.4727 11.9141 42.7656 11.7656C43.0586 11.6172 43.4004 11.543 43.791 11.543C44.1895 11.543 44.543 11.6211 44.8516 11.7773C45.1602 11.9297 45.4199 12.1484 45.6309 12.4336C45.8418 12.7148 46 13.0547 46.1055 13.4531C46.2109 13.8477 46.2637 14.2871 46.2637 14.7715ZM44.8516 14.8945V14.7715C44.8516 14.4785 44.8242 14.207 44.7695 13.957C44.7148 13.7031 44.6289 13.4805 44.5117 13.2891C44.3945 13.0977 44.2441 12.9492 44.0605 12.8438C43.8809 12.7344 43.6641 12.6797 43.4102 12.6797C43.1602 12.6797 42.9453 12.7227 42.7656 12.8086C42.5859 12.8906 42.4355 13.0059 42.3145 13.1543C42.1934 13.3027 42.0996 13.4766 42.0332 13.6758C41.9668 13.8711 41.9199 14.084 41.8926 14.3145V15.4512C41.9395 15.7324 42.0195 15.9902 42.1328 16.2246C42.2461 16.459 42.4062 16.6465 42.6133 16.7871C42.8242 16.9238 43.0938 16.9922 43.4219 16.9922C43.6758 16.9922 43.8926 16.9375 44.0723 16.8281C44.252 16.7188 44.3984 16.5684 44.5117 16.377C44.6289 16.1816 44.7148 15.957 44.7695 15.7031C44.8242 15.4492 44.8516 15.1797 44.8516 14.8945ZM51.832 16.6875V9H53.25V18H51.9668L51.832 16.6875ZM47.707 14.9004V14.7773C47.707 14.2969 47.7637 13.8594 47.877 13.4648C47.9902 13.0664 48.1543 12.7246 48.3691 12.4395C48.584 12.1504 48.8457 11.9297 49.1543 11.7773C49.4629 11.6211 49.8105 11.543 50.1973 11.543C50.5801 11.543 50.916 11.6172 51.2051 11.7656C51.4941 11.9141 51.7402 12.127 51.9434 12.4043C52.1465 12.6777 52.3086 13.0059 52.4297 13.3887C52.5508 13.7676 52.6367 14.1895 52.6875 14.6543V15.0469C52.6367 15.5 52.5508 15.9141 52.4297 16.2891C52.3086 16.6641 52.1465 16.9883 51.9434 17.2617C51.7402 17.5352 51.4922 17.7461 51.1992 17.8945C50.9102 18.043 50.5723 18.1172 50.1855 18.1172C49.8027 18.1172 49.457 18.0371 49.1484 17.877C48.8438 17.7168 48.584 17.4922 48.3691 17.2031C48.1543 16.9141 47.9902 16.5742 47.877 16.1836C47.7637 15.7891 47.707 15.3613 47.707 14.9004ZM49.1191 14.7773V14.9004C49.1191 15.1895 49.1445 15.459 49.1953 15.709C49.25 15.959 49.334 16.1797 49.4473 16.3711C49.5605 16.5586 49.707 16.707 49.8867 16.8164C50.0703 16.9219 50.2891 16.9746 50.543 16.9746C50.8633 16.9746 51.127 16.9043 51.334 16.7637C51.541 16.623 51.7031 16.4336 51.8203 16.1953C51.9414 15.9531 52.0234 15.6836 52.0664 15.3867V14.3262C52.043 14.0957 51.9941 13.8809 51.9199 13.6816C51.8496 13.4824 51.7539 13.3086 51.6328 13.1602C51.5117 13.0078 51.3613 12.8906 51.1816 12.8086C51.0059 12.7227 50.7969 12.6797 50.5547 12.6797C50.2969 12.6797 50.0781 12.7344 49.8984 12.8438C49.7188 12.9531 49.5703 13.1035 49.4531 13.2949C49.3398 13.4863 49.2559 13.709 49.2012 13.9629C49.1465 14.2168 49.1191 14.4883 49.1191 14.7773ZM58.8008 16.7285V13.7051C58.8008 13.4785 58.7598 13.2832 58.6777 13.1191C58.5957 12.9551 58.4707 12.8281 58.3027 12.7383C58.1387 12.6484 57.9316 12.6035 57.6816 12.6035C57.4512 12.6035 57.252 12.6426 57.084 12.7207C56.916 12.7988 56.7852 12.9043 56.6914 13.0371C56.5977 13.1699 56.5508 13.3203 56.5508 13.4883H55.1445C55.1445 13.2383 55.2051 12.9961 55.3262 12.7617C55.4473 12.5273 55.623 12.3184 55.8535 12.1348C56.084 11.9512 56.3594 11.8066 56.6797 11.7012C57 11.5957 57.3594 11.543 57.7578 11.543C58.2344 11.543 58.6562 11.623 59.0234 11.7832C59.3945 11.9434 59.6855 12.1855 59.8965 12.5098C60.1113 12.8301 60.2188 13.2324 60.2188 13.7168V16.5352C60.2188 16.8242 60.2383 17.084 60.2773 17.3145C60.3203 17.541 60.3809 17.7383 60.459 17.9062V18H59.0117C58.9453 17.8477 58.8926 17.6543 58.8535 17.4199C58.8184 17.1816 58.8008 16.9512 58.8008 16.7285ZM59.0059 14.1445L59.0176 15.0176H58.0039C57.7422 15.0176 57.5117 15.043 57.3125 15.0938C57.1133 15.1406 56.9473 15.2109 56.8145 15.3047C56.6816 15.3984 56.582 15.5117 56.5156 15.6445C56.4492 15.7773 56.416 15.9277 56.416 16.0957C56.416 16.2637 56.4551 16.418 56.5332 16.5586C56.6113 16.6953 56.7246 16.8027 56.873 16.8809C57.0254 16.959 57.209 16.998 57.4238 16.998C57.7129 16.998 57.9648 16.9395 58.1797 16.8223C58.3984 16.7012 58.5703 16.5547 58.6953 16.3828C58.8203 16.207 58.8867 16.041 58.8945 15.8848L59.3516 16.5117C59.3047 16.6719 59.2246 16.8438 59.1113 17.0273C58.998 17.2109 58.8496 17.3867 58.666 17.5547C58.4863 17.7188 58.2695 17.8535 58.0156 17.959C57.7656 18.0645 57.4766 18.1172 57.1484 18.1172C56.7344 18.1172 56.3652 18.0352 56.041 17.8711C55.7168 17.7031 55.4629 17.4785 55.2793 17.1973C55.0957 16.9121 55.0039 16.5898 55.0039 16.2305C55.0039 15.8945 55.0664 15.5977 55.1914 15.3398C55.3203 15.0781 55.5078 14.8594 55.7539 14.6836C56.0039 14.5078 56.3086 14.375 56.668 14.2852C57.0273 14.1914 57.4375 14.1445 57.8984 14.1445H59.0059ZM65.1016 11.6602V12.6914H61.5273V11.6602H65.1016ZM62.5586 10.1074H63.9707V16.248C63.9707 16.4434 63.998 16.5938 64.0527 16.6992C64.1113 16.8008 64.1914 16.8691 64.293 16.9043C64.3945 16.9395 64.5137 16.957 64.6504 16.957C64.748 16.957 64.8418 16.9512 64.9316 16.9395C65.0215 16.9277 65.0938 16.916 65.1484 16.9043L65.1543 17.9824C65.0371 18.0176 64.9004 18.0488 64.7441 18.0762C64.5918 18.1035 64.416 18.1172 64.2168 18.1172C63.8926 18.1172 63.6055 18.0605 63.3555 17.9473C63.1055 17.8301 62.9102 17.6406 62.7695 17.3789C62.6289 17.1172 62.5586 16.7695 62.5586 16.3359V10.1074ZM69.4863 18.1172C69.0176 18.1172 68.5938 18.041 68.2148 17.8887C67.8398 17.7324 67.5195 17.5156 67.2539 17.2383C66.9922 16.9609 66.791 16.6348 66.6504 16.2598C66.5098 15.8848 66.4395 15.4805 66.4395 15.0469V14.8125C66.4395 14.3164 66.5117 13.8672 66.6562 13.4648C66.8008 13.0625 67.002 12.7188 67.2598 12.4336C67.5176 12.1445 67.8223 11.9238 68.1738 11.7715C68.5254 11.6191 68.9062 11.543 69.3164 11.543C69.7695 11.543 70.166 11.6191 70.5059 11.7715C70.8457 11.9238 71.127 12.1387 71.3496 12.416C71.5762 12.6895 71.7441 13.0156 71.8535 13.3945C71.9668 13.7734 72.0234 14.1914 72.0234 14.6484V15.252H67.125V14.2383H70.6289V14.127C70.6211 13.873 70.5703 13.6348 70.4766 13.4121C70.3867 13.1895 70.248 13.0098 70.0605 12.873C69.873 12.7363 69.623 12.668 69.3105 12.668C69.0762 12.668 68.8672 12.7188 68.6836 12.8203C68.5039 12.918 68.3535 13.0605 68.2324 13.248C68.1113 13.4355 68.0176 13.6621 67.9512 13.9277C67.8887 14.1895 67.8574 14.4844 67.8574 14.8125V15.0469C67.8574 15.3242 67.8945 15.582 67.9688 15.8203C68.0469 16.0547 68.1602 16.2598 68.3086 16.4355C68.457 16.6113 68.6367 16.75 68.8477 16.8516C69.0586 16.9492 69.2988 16.998 69.5684 16.998C69.9082 16.998 70.2109 16.9297 70.4766 16.793C70.7422 16.6562 70.9727 16.4629 71.168 16.2129L71.9121 16.9336C71.7754 17.1328 71.5977 17.3242 71.3789 17.5078C71.1602 17.6875 70.8926 17.834 70.5762 17.9473C70.2637 18.0605 69.9004 18.1172 69.4863 18.1172ZM77.4922 16.6875V9H78.9102V18H77.627L77.4922 16.6875ZM73.3672 14.9004V14.7773C73.3672 14.2969 73.4238 13.8594 73.5371 13.4648C73.6504 13.0664 73.8145 12.7246 74.0293 12.4395C74.2441 12.1504 74.5059 11.9297 74.8145 11.7773C75.123 11.6211 75.4707 11.543 75.8574 11.543C76.2402 11.543 76.5762 11.6172 76.8652 11.7656C77.1543 11.9141 77.4004 12.127 77.6035 12.4043C77.8066 12.6777 77.9688 13.0059 78.0898 13.3887C78.2109 13.7676 78.2969 14.1895 78.3477 14.6543V15.0469C78.2969 15.5 78.2109 15.9141 78.0898 16.2891C77.9688 16.6641 77.8066 16.9883 77.6035 17.2617C77.4004 17.5352 77.1523 17.7461 76.8594 17.8945C76.5703 18.043 76.2324 18.1172 75.8457 18.1172C75.4629 18.1172 75.1172 18.0371 74.8086 17.877C74.5039 17.7168 74.2441 17.4922 74.0293 17.2031C73.8145 16.9141 73.6504 16.5742 73.5371 16.1836C73.4238 15.7891 73.3672 15.3613 73.3672 14.9004ZM74.7793 14.7773V14.9004C74.7793 15.1895 74.8047 15.459 74.8555 15.709C74.9102 15.959 74.9941 16.1797 75.1074 16.3711C75.2207 16.5586 75.3672 16.707 75.5469 16.8164C75.7305 16.9219 75.9492 16.9746 76.2031 16.9746C76.5234 16.9746 76.7871 16.9043 76.9941 16.7637C77.2012 16.623 77.3633 16.4336 77.4805 16.1953C77.6016 15.9531 77.6836 15.6836 77.7266 15.3867V14.3262C77.7031 14.0957 77.6543 13.8809 77.5801 13.6816C77.5098 13.4824 77.4141 13.3086 77.293 13.1602C77.1719 13.0078 77.0215 12.8906 76.8418 12.8086C76.666 12.7227 76.457 12.6797 76.2148 12.6797C75.957 12.6797 75.7383 12.7344 75.5586 12.8438C75.3789 12.9531 75.2305 13.1035 75.1133 13.2949C75 13.4863 74.916 13.709 74.8613 13.9629C74.8066 14.2168 74.7793 14.4883 74.7793 14.7773ZM82.5156 9.46875L82.375 15.4863H81.168L81.0215 9.46875H82.5156ZM80.9805 17.332C80.9805 17.1172 81.0508 16.9375 81.1914 16.793C81.3359 16.6445 81.5352 16.5703 81.7891 16.5703C82.0391 16.5703 82.2363 16.6445 82.3809 16.793C82.5254 16.9375 82.5977 17.1172 82.5977 17.332C82.5977 17.5391 82.5254 17.7168 82.3809 17.8652C82.2363 18.0098 82.0391 18.082 81.7891 18.082C81.5352 18.082 81.3359 18.0098 81.1914 17.8652C81.0508 17.7168 80.9805 17.5391 80.9805 17.332Z"
+      fill="#603CF0"
+    />
+    <defs>
+      <filter
+        id="filter0_d_7098_20705"
+        x="0.855835"
+        y="0"
+        width="96.1442"
+        height="30"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_7098_20705"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_7098_20705"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>
diff --git a/packages/extension/src/ui/action/views/updates/components/updates-header.vue b/packages/extension/src/ui/action/views/updates/components/updates-header.vue
new file mode 100644
index 000000000..c101b33bb
--- /dev/null
+++ b/packages/extension/src/ui/action/views/updates/components/updates-header.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="settings__header">
+    <h2>What's New</h2>
+    <a class="settings__close" @click="$emit('window:close')">
+      <close-icon />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from '@action/icons/common/close-icon.vue';
+
+defineEmits<{
+  (e: 'window:close'): void;
+}>();
+</script>
+
+<style lang="less">
+@import '@action/styles/color.less';
+
+.settings {
+  &__header {
+    width: 100%;
+    height: 68px;
+    background: @white;
+    box-sizing: border-box;
+    padding: 24px 72px 12px 32px;
+    margin-bottom: 8px;
+
+    h2 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+      color: @primaryLabel;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 300ms ease-in-out;
+    font-size: 0;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/updates/components/updates-network.vue b/packages/extension/src/ui/action/views/updates/components/updates-network.vue
new file mode 100644
index 000000000..227a23e4c
--- /dev/null
+++ b/packages/extension/src/ui/action/views/updates/components/updates-network.vue
@@ -0,0 +1,73 @@
+<template>
+  <div v-if="isLoaded" class="news_network">
+    <img
+      :src="resolvedImg"
+      :alt="props.alt"
+      :height="40"
+      :width="40"
+      @error="handleImageError"
+      :class="{ 'opacity-0': !isLoaded }"
+      class="news_network__icon"
+    />
+    <p>{{ networkName }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getNetworkByName } from '@/libs/utils/networks';
+
+const props = defineProps({
+  networkId: {
+    type: String,
+    required: true,
+  },
+  alt: String,
+});
+
+const resolvedImg = ref('');
+const isLoaded = ref(false);
+const networkName = ref('Unkown');
+
+getNetworkByName(props.networkId)
+  .then(network => {
+    if (network) {
+      isLoaded.value = true;
+      resolvedImg.value = network.icon;
+      networkName.value = network.name_long;
+    }
+  })
+  .catch((error: unknown) => {
+    console.error(
+      `Failed to load image in news for: ${props.networkId}`,
+      error,
+    );
+    isLoaded.value = true;
+    resolvedImg.value = '';
+  });
+
+const handleImageError = () => {
+  isLoaded.value = false;
+};
+</script>
+
+<style lang="less">
+.news_network {
+  display: flex;
+  align-items: center;
+  padding: 6px 4px;
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    margin-right: 8px;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
new file mode 100644
index 000000000..da9db8ede
--- /dev/null
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="news__container">
+    <div class="news__overlay" @click="close()" />
+    <div class="news__wrap">
+      <updates-header @window:close="close" />
+      <div>
+        <div
+          class="news__block"
+          v-for="version in displayVersions"
+          :key="version.version"
+        >
+          <div>
+            <a
+              :href="version.release_link"
+              target="_blank"
+              aria-label="Release notes"
+              class="news__block__title"
+            >
+              <h3>
+                v{{ version.version }} <span> {{ getTimeAgo(version) }}</span>
+              </h3>
+            </a>
+            <p v-if="version.description">{{ version.description }}</p>
+          </div>
+          <div v-if="hasChainsAdded(version)">
+            <h4>{{ getChainsTitle(version) }}</h4>
+            <updates-network
+              v-for="chain in version.chains_added"
+              :key="chain"
+              :network-id="chain"
+            />
+          </div>
+          <div v-if="hasSwapAdded(version)">
+            <h4>{{ getSwapTitle(version) }}</h4>
+            <updates-network
+              v-for="chain in version.swap_added"
+              :key="chain"
+              :network-id="chain"
+            />
+          </div>
+          <p
+            :class="{
+              news_block__end: hasChainsAdded(version) || hasSwapAdded(version),
+            }"
+          >
+            Bug fixes and improvements. <br />
+            Much love to our community.
+          </p>
+          <a :href="version.release_link" target="_blank"
+            >Full release notes
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import UpdatesHeader from './components/updatesheader.vue';
+import type { NetworkNames } from '@enkryptcom/types';
+import UpdatesNetwork from './components/updatesnetwork.vue';
+import news from './news.json';
+import { useTimeAgo } from '@vueuse/core';
+
+const emit = defineEmits<{
+  (e: 'close:popup'): void;
+}>();
+const close = () => {
+  emit('close:popup');
+};
+
+interface Version {
+  version: string;
+  description?: string;
+  chains_added?: NetworkNames[];
+  swap_added?: NetworkNames[];
+  release_date: string;
+  release_link: string;
+}
+interface Releases {
+  versions: Version[];
+}
+const currentVersion = __PACKAGE_VERSION__;
+const releases = news as unknown as Releases;
+const versions = releases.versions;
+
+const displayVersions = computed(() => {
+  const index = versions.findIndex(
+    version => version.version === currentVersion,
+  );
+  if (index === -1) {
+    return versions.slice(0, 20);
+  } else {
+    return versions.slice(index, 20);
+  }
+});
+
+const getTimeAgo = (version: Version) => {
+  return useTimeAgo(new Date(version.release_date));
+};
+
+/** -------------------
+ * Chains Added
+ * ------------------- */
+const hasChainsAdded = (version: Version) => {
+  return version.chains_added && version.chains_added.length > 0;
+};
+
+const getChainsTitle = (version: Version) => {
+  return version.chains_added && version.chains_added.length > 1
+    ? 'New chains added:'
+    : 'New chain added:';
+};
+/** -------------------
+ * Chains Added
+ * ------------------- */
+const hasSwapAdded = (version: Version) => {
+  return version.swap_added && version.swap_added.length > 0;
+};
+
+const getSwapTitle = (version: Version) => {
+  return version.swap_added && version.swap_added.length > 1
+    ? 'Swap added to chains:'
+    : 'Swap added to chain:';
+};
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.news {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+
+  &__wrap {
+    background: @white;
+    box-shadow:
+      0px 3px 6px rgba(0, 0, 0, 0.039),
+      0px 7px 24px rgba(0, 0, 0, 0.19);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 460px;
+    height: auto;
+    z-index: 107;
+    position: relative;
+    height: 568px;
+    overflow-x: hidden;
+    padding-bottom: 16px;
+  }
+
+  &__container {
+    width: 800px;
+    height: 600px;
+    left: 0px;
+    top: 0px;
+    position: fixed;
+    z-index: 105;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__overlay {
+    background: rgba(0, 0, 0, 0.32);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
+  }
+
+  &__block {
+    font-size: 14px;
+    padding: 0px 64px 40px 32px;
+    :not(:first-child) {
+    }
+
+    &:nth-child(2) {
+      padding-top: 0;
+    }
+    &__title {
+      text-decoration: none;
+    }
+
+    h3 {
+      font-size: 19px;
+      font-weight: 700;
+      line-height: 26px;
+      margin-bottom: 10px;
+      margin-top: 20px;
+
+      span {
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 18px;
+        opacity: 0.4;
+        padding-left: 8px;
+      }
+    }
+
+    h4 {
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+    p {
+      line-height: 18px;
+    }
+    &__end {
+      margin-top: 20px;
+    }
+    a {
+      color: @black;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/updates/news.json b/packages/extension/src/ui/action/views/updates/news.json
new file mode 100644
index 000000000..b1bf9d27f
--- /dev/null
+++ b/packages/extension/src/ui/action/views/updates/news.json
@@ -0,0 +1,97 @@
+{
+  "versions": [
+    { 
+      "version": "2.0.2",
+      "chains_added": ["ETH", "OKT", "BNB"],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "2.0.1",
+      "description": "We have changed the look of networks menu. Blah Blah Blah Blah Blah Enjoy!",
+      "chains_added":  ["SEPOLIA", "MOVR", "GLMR"],
+      "swap_added": ["ETC", "gibberish", "MATIC"],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "2.0.0",
+      "description": "I am super cute description",
+      "chains_added":  ["SEPOLIA", "MOVR", "GLMR"],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.9.9",
+      "swap_added": ["ACA", "KAR", "evmKAR", "Rootstock", "RootstockTestnet"],
+
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "1.9.8",
+      "description": "I am super cute description",
+      "chains_added": [],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.9.7",
+      "swap_added": [],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "1.9.6",
+      "description": "I am super cute description",
+      "chains_added": [],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.9.5",
+      "swap_added": [],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "1.9.4",
+      "description": "I am super cute description",
+      "chains_added": [],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.9.3",
+      "swap_added": [],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "1.9.2",
+      "description": "I am super cute description",
+      "chains_added": [],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.9.1",
+      "swap_added": [],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    },
+    { 
+      "version": "1.9.0",
+      "description": "I am super cute description",
+      "chains_added": [],
+      "release_date": "2024-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }, 
+    {
+      "version": "1.8.9",
+      "swap_added": [],
+      "release_date": "2021-07-01",
+      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
+    }
+  ]
+}

From 45d31a7008027beaea770804e1446457604c6a26 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:38:54 -0800
Subject: [PATCH 2/9] fix: import

---
 packages/extension/src/ui/action/views/updates/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
index da9db8ede..a9169fc8b 100644
--- a/packages/extension/src/ui/action/views/updates/index.vue
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -57,7 +57,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import UpdatesHeader from './components/updatesheader.vue';
+import UpdatesHeader from './components/updates-header.vue';
 import type { NetworkNames } from '@enkryptcom/types';
 import UpdatesNetwork from './components/updatesnetwork.vue';
 import news from './news.json';

From af6cf49272bf2d89338bca23f365158a99ee75db Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:36:09 -0800
Subject: [PATCH 3/9] fix: typo

---
 packages/extension/src/ui/action/views/updates/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
index a9169fc8b..847075818 100644
--- a/packages/extension/src/ui/action/views/updates/index.vue
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -59,7 +59,7 @@
 import { computed } from 'vue';
 import UpdatesHeader from './components/updates-header.vue';
 import type { NetworkNames } from '@enkryptcom/types';
-import UpdatesNetwork from './components/updatesnetwork.vue';
+import UpdatesNetwork from './components/updates-network.vue';
 import news from './news.json';
 import { useTimeAgo } from '@vueuse/core';
 

From 079ee4122272c76b9a49975e9eef1ed83d7d5a40 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:45:24 -0800
Subject: [PATCH 4/9] feat: finished updates ui

---
 .../extension/src/libs/updates-state/index.ts |  62 ++++++++++
 .../extension/src/libs/updates-state/types.ts |   9 ++
 packages/extension/src/types/provider.ts      |   1 +
 packages/extension/src/ui/action/App.vue      | 117 ++++++++++++++++--
 .../src/ui/action/icons/updates/heart.vue     |   5 +
 .../extension/src/ui/action/types/updates.ts  |  13 ++
 .../extension/src/ui/action/utils/browser.ts  |  18 ++-
 .../src/ui/action/views/updates/index.vue     |  73 ++++++-----
 .../src/ui/action/views/updates/news.json     |  97 ---------------
 9 files changed, 254 insertions(+), 141 deletions(-)
 create mode 100644 packages/extension/src/libs/updates-state/index.ts
 create mode 100644 packages/extension/src/libs/updates-state/types.ts
 create mode 100644 packages/extension/src/ui/action/icons/updates/heart.vue
 create mode 100644 packages/extension/src/ui/action/types/updates.ts
 delete mode 100644 packages/extension/src/ui/action/views/updates/news.json

diff --git a/packages/extension/src/libs/updates-state/index.ts b/packages/extension/src/libs/updates-state/index.ts
new file mode 100644
index 000000000..1dc92c0f1
--- /dev/null
+++ b/packages/extension/src/libs/updates-state/index.ts
@@ -0,0 +1,62 @@
+import BrowserStorage from '../common/browser-storage';
+import { InternalStorageNamespace } from '@/types/provider';
+import { IState, StorageKeys } from './types';
+
+class UpdatesState {
+  private storage: BrowserStorage;
+
+  constructor() {
+    this.storage = new BrowserStorage(InternalStorageNamespace.updatesState);
+  }
+
+  async setState(state: IState): Promise<void> {
+    return this.storage.set(StorageKeys.updatesInfo, state);
+  }
+
+  async getState(): Promise<IState> {
+    return this.storage.get(StorageKeys.updatesInfo);
+  }
+
+  async getLastVersionViewed(): Promise<IState['lastVersionViewed']> {
+    const state: IState | undefined = await this.getState();
+    if (state && state.lastVersionViewed) {
+      return state.lastVersionViewed;
+    }
+    return '';
+  }
+  async setLastVersionViewed(lastVersionViewed: string): Promise<void> {
+    const state: IState | undefined = await this.getState();
+    const newState: IState = { ...state, lastVersionViewed }
+    await this.setState(newState);
+  }
+
+  async getCurrentRelease(): Promise<IState['currentRelease']> {
+    const state: IState | undefined = await this.getState();
+    if (state && state.currentRelease) {
+      return state.currentRelease;
+    }
+    return ''
+  }
+
+  async setCurrentRelease(currentRelease: string): Promise<void> {
+    const state: IState | undefined = await this.getState();
+    const newState: IState = { ...state, currentRelease }
+    await this.setState(newState);
+  }
+
+  async getCurrentReleaseTimestamp(): Promise<IState['currentReleaseTimestamp']> {
+    const state: IState | undefined = await this.getState();
+    if (state && state.currentReleaseTimestamp) {
+      return state.currentReleaseTimestamp;
+    }
+    return 0
+  }
+
+  async setCurrentReleaseTimestamp(currentReleaseTimestamp: number): Promise<void> {
+    const state: IState | undefined = await this.getState();
+    const newState: IState = { ...state, currentReleaseTimestamp }
+    await this.setState(newState);
+  }
+}
+
+export default UpdatesState;
diff --git a/packages/extension/src/libs/updates-state/types.ts b/packages/extension/src/libs/updates-state/types.ts
new file mode 100644
index 000000000..dae0fb32a
--- /dev/null
+++ b/packages/extension/src/libs/updates-state/types.ts
@@ -0,0 +1,9 @@
+export enum StorageKeys {
+  updatesInfo = 'updates-info',
+}
+
+export interface IState {
+  lastVersionViewed: string;
+  currentRelease: string;
+  currentReleaseTimestamp: number;
+}
diff --git a/packages/extension/src/types/provider.ts b/packages/extension/src/types/provider.ts
index 4d9adafb4..601e67b47 100644
--- a/packages/extension/src/types/provider.ts
+++ b/packages/extension/src/types/provider.ts
@@ -52,6 +52,7 @@ export enum InternalStorageNamespace {
   customNetworksState = 'CustomNetworksState',
   rateState = 'RateState',
   recentlySentAddresses = 'RecentlySentAddresses',
+  updatesState = 'UpdatesState',
 }
 export enum EnkryptProviderEventMethods {
   persistentEvents = 'PersistentEvents',
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 7c7310162..525e07d70 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -8,7 +8,11 @@
       <div class="app__menu-row" :class="{ border: networks.length > 9 }">
         <div class="app__menu-row">
           <logo-min class="app__menu-logo" />
-          <updated-icon @click="openUpdatesDialog" class="app__menu-updated" />
+          <updated-icon
+            v-if="loadedUpdates && showUpdatesBtn"
+            @click="openUpdatesDialog"
+            class="app__menu-updated"
+          />
         </div>
         <div>
           <a ref="toggle" class="app__menu-link" @click="toggleMoreMenu">
@@ -24,6 +28,15 @@
             <a class="app__menu-dropdown-link" @click="settingsAction">
               <settings-icon /> <span>Settings</span>
             </a>
+            <div v-if="loadedUpdates" class="app__menu-dropdown-divider"></div>
+            <a
+              v-if="loadedUpdates"
+              class="app__menu-dropdown-link"
+              @click="openUpdatesDialog"
+            >
+              <heart-icon class="app__menu-dropdown-link-heart"></heart-icon>
+              <span> Updates</span>
+            </a>
           </div>
         </div>
       </div>
@@ -100,9 +113,11 @@
       :latest-version="latestVersion"
       @close:popup="updateShow = !updateShow"
     />
-    <updates-dialog
-      v-if="updatesDialogShow"
-      @close:popup="updatesDialogShow = !updatesDialogShow"
+    <modal-updates
+      v-if="loadedUpdates && showUpdatesDialog"
+      :versions="releases?.versions"
+      :current-version="currentVersion"
+      @close:popup="closeUpdatesDialog"
     />
   </div>
 </template>
@@ -150,8 +165,7 @@ import { AccountsHeaderData } from './types/account';
 import AddNetwork from './views/add-network/index.vue';
 import ModalRate from './views/modal-rate/index.vue';
 import Settings from './views/settings/index.vue';
-import UpdatesDialog from './views/updates/index.vue';
-import UpdatedIcon from './icons/updates/updated.vue';
+import ModalUpdates from './views/updates/index.vue';
 import { KadenaNetwork } from '@/providers/kadena/types/kadena-network';
 import { EnkryptProviderEventMethods, ProviderName } from '@/types/provider';
 import { onClickOutside } from '@vueuse/core';
@@ -163,10 +177,16 @@ import { gt as semverGT } from 'semver';
 import { BuyEventType, NetworkChangeEvents } from '@/libs/metrics/types';
 import { NetworksCategory } from '@action/types/network-category';
 import { newNetworks } from '@/providers/common/libs/new-features';
+import UpdatesState from '@/libs/updates-state';
+import UpdatedIcon from '@/ui/action/icons/updates/updated.vue';
+import HeartIcon from '@/ui/action/icons/updates/heart.vue';
+import { getLatestEnkryptUpdates } from '@action/utils/browser';
+import { Updates } from '@/ui/action/types/updates';
 
 const domainState = new DomainState();
 const networksState = new NetworksState();
 const rateState = new RateState();
+const updatesState = new UpdatesState();
 const appMenuRef = ref(null);
 const showDepositWindow = ref(false);
 const accountHeaderData = ref<AccountsHeaderData>({
@@ -191,7 +211,6 @@ const currentNetwork = ref<BaseNetwork>(defaultNetwork);
 const currentSubNetwork = ref<string>('');
 const kr = new PublicKeyRing();
 const addNetworkShow = ref(false);
-const updatesDialogShow = ref(false);
 const settingsShow = ref(false);
 const rateShow = ref(false);
 const updateShow = ref(false);
@@ -201,7 +220,60 @@ const isLoading = ref(true);
 const currentVersion = __PACKAGE_VERSION__;
 const latestVersion = ref('');
 const enabledTestnetworks = ref<string[]>([]);
+/** -------------------
+ * Updates
+ -------------------*/
+const releases = ref<Updates | undefined>(undefined);
+const loadedUpdates = ref<boolean>(false);
+const showUpdatesBtn = ref<boolean>(false);
+const showUpdatesDialog = ref<boolean>(false);
+const stateCurrentReleaseTimestamp = ref<number>(0);
+
+const initUpdateState = async () => {
+  const currentReleaseInState = await updatesState.getCurrentRelease();
+  stateCurrentReleaseTimestamp.value =
+    await updatesState.getCurrentReleaseTimestamp();
+  if (currentReleaseInState !== currentVersion) {
+    await updatesState.setCurrentRelease(currentVersion);
+    const newReleaseTimestamp = Date.now();
+    await updatesState.setCurrentReleaseTimestamp(newReleaseTimestamp);
+    stateCurrentReleaseTimestamp.value = newReleaseTimestamp;
+  }
+};
 
+const getShowUpdatesBtn = async () => {
+  try {
+    const lastVersionViewed = await updatesState.getLastVersionViewed();
+    if (
+      lastVersionViewed === '' ||
+      (currentVersion && semverGT(currentVersion, lastVersionViewed))
+    ) {
+      const expireTimestamp = stateCurrentReleaseTimestamp.value + 12096e5; //2 weeks;
+      showUpdatesBtn.value =
+        stateCurrentReleaseTimestamp.value < expireTimestamp;
+    } else {
+      showUpdatesBtn.value = false;
+    }
+  } catch (error) {
+    console.error('Failed to get show updates button:', error);
+  }
+};
+const openUpdatesDialog = () => {
+  showUpdatesDialog.value = true;
+  updatesState.setLastVersionViewed(currentVersion);
+  showUpdatesBtn.value = false;
+  if (isOpenMore.value) {
+    closeMoreMenu();
+  }
+};
+
+const closeUpdatesDialog = () => {
+  showUpdatesDialog.value = false;
+};
+
+/** -------------------
+ * Core
+ -------------------*/
 const setActiveNetworks = async () => {
   const pinnedNetworkNames = await networksState.getPinnedNetworkNames();
   const allNetworks = await getAllNetworks();
@@ -256,6 +328,7 @@ const isKeyRingLocked = async (): Promise<boolean> => {
     tabId: await domainState.getCurrentTabId(),
   }).then(res => JSON.parse(res.result || 'true'));
 };
+
 const init = async () => {
   const curNetwork = await domainState.getSelectedNetWork();
   if (curNetwork) {
@@ -268,6 +341,7 @@ const init = async () => {
   await setActiveNetworks();
   isLoading.value = false;
 };
+
 onMounted(async () => {
   const isInitialized = await kr.isInitialized();
   if (isInitialized) {
@@ -278,6 +352,18 @@ onMounted(async () => {
         .then(() => (isLoading.value = false));
     } else {
       init();
+      try {
+        await initUpdateState();
+        releases.value = await getLatestEnkryptUpdates();
+        if (releases.value) {
+          await getShowUpdatesBtn();
+        }
+        loadedUpdates.value = true;
+      } catch (error) {
+        console.error('Failed to get latest enkrypt updates:', error);
+        loadedUpdates.value = false;
+      }
+
       setTimeout(() => {
         rateState.showPopup().then(show => {
           if (show) {
@@ -562,10 +648,6 @@ const setIsToggledTestNetwork = async () => {
     console.error('Failed to set is toggled test network:', error);
   }
 };
-
-const openUpdatesDialog = () => {
-  updatesDialogShow.value = true;
-};
 </script>
 
 <style lang="less">
@@ -713,6 +795,13 @@ body {
       top: 48px;
       z-index: 3;
 
+      &-divider {
+        height: 1px;
+        width: 90%;
+        margin: 8px;
+        background: @gray02;
+      }
+
       &-link {
         width: 100%;
         height: 48px;
@@ -724,6 +813,12 @@ body {
         transition: background 300ms ease-in-out;
         border-radius: 8px;
 
+        &-heart {
+          width: 18px !important;
+          height: 18px !important;
+          margin-right: 18px !important;
+        }
+
         &:hover,
         &.active {
           background: rgba(0, 0, 0, 0.04);
diff --git a/packages/extension/src/ui/action/icons/updates/heart.vue b/packages/extension/src/ui/action/icons/updates/heart.vue
new file mode 100644
index 000000000..b3be9e6ac
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/updates/heart.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.81836 11.3789C5.75977 11.3789 5.68945 11.3613 5.60742 11.3262C5.5293 11.2949 5.45898 11.2598 5.39648 11.2207C4.29492 10.5176 3.33984 9.78125 2.53125 9.01172C1.72266 8.23828 1.09766 7.44531 0.65625 6.63281C0.21875 5.81641 0 4.99219 0 4.16016C0 3.64062 0.0820312 3.16602 0.246094 2.73633C0.414062 2.30273 0.646484 1.92773 0.943359 1.61133C1.24023 1.29492 1.58594 1.05078 1.98047 0.878906C2.375 0.707031 2.80273 0.621094 3.26367 0.621094C3.83789 0.621094 4.3418 0.767578 4.77539 1.06055C5.20898 1.35352 5.55664 1.74023 5.81836 2.2207C6.08398 1.73633 6.43359 1.34961 6.86719 1.06055C7.30078 0.767578 7.80273 0.621094 8.37305 0.621094C8.83398 0.621094 9.26172 0.707031 9.65625 0.878906C10.0547 1.05078 10.4004 1.29492 10.6934 1.61133C10.9902 1.92773 11.2207 2.30273 11.3848 2.73633C11.5527 3.16602 11.6367 3.64062 11.6367 4.16016C11.6367 4.99219 11.416 5.81641 10.9746 6.63281C10.5371 7.44531 9.91406 8.23828 9.10547 9.01172C8.30078 9.78125 7.34766 10.5176 6.24609 11.2207C6.18359 11.2598 6.11133 11.2949 6.0293 11.3262C5.95117 11.3613 5.88086 11.3789 5.81836 11.3789Z" fill="#202124"/>
+  </svg>
+</template>
diff --git a/packages/extension/src/ui/action/types/updates.ts b/packages/extension/src/ui/action/types/updates.ts
new file mode 100644
index 000000000..df9bb8e74
--- /dev/null
+++ b/packages/extension/src/ui/action/types/updates.ts
@@ -0,0 +1,13 @@
+import { NetworkNames } from "@enkryptcom/types";
+
+export interface Version {
+  version: string;
+  description?: string;
+  chains_added?: NetworkNames[];
+  swap_added?: NetworkNames[];
+  release_date: string;
+  release_link: string;
+}
+export interface Updates {
+  versions: Version[];
+}
diff --git a/packages/extension/src/ui/action/utils/browser.ts b/packages/extension/src/ui/action/utils/browser.ts
index 57cff0f89..9d6e9f5a3 100644
--- a/packages/extension/src/ui/action/utils/browser.ts
+++ b/packages/extension/src/ui/action/utils/browser.ts
@@ -1,5 +1,5 @@
 import Browser from 'webextension-polyfill';
-
+import { Updates } from '@/ui/action/types/updates';
 export const BROWSER_NAMES = {
   chrome: 'chrome',
   firefox: 'firefox',
@@ -60,3 +60,19 @@ export const getLatestEnkryptVersion = (): Promise<string> => {
     })
     .catch(() => null);
 };
+
+export const getLatestEnkryptUpdates = (): Promise<Updates> => {
+
+  const browser = detectBrowser();
+  const url = 'https://raw.githubusercontent.com/enkryptcom/dynamic-data/main/configs/release-versions'
+  const fetchUrl = browser === BROWSER_NAMES.safari ? `${url}-safari.json` : `${url}.json`
+  console.log(fetchUrl)
+  return fetch(
+    fetchUrl
+  )
+    .then(res => res.json())
+    .then(releases => {
+      return releases;
+    })
+    .catch(() => null);
+};
diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
index 847075818..1d968a2e0 100644
--- a/packages/extension/src/ui/action/views/updates/index.vue
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="news__container">
-    <div class="news__overlay" @click="close()" />
-    <div class="news__wrap">
+  <div class="updates__container">
+    <div class="updates__overlay" @click="close()" />
+    <div class="updates__wrap">
       <updates-header @window:close="close" />
       <div>
         <div
-          class="news__block"
+          class="updates__block"
           v-for="version in displayVersions"
           :key="version.version"
         >
@@ -14,7 +14,7 @@
               :href="version.release_link"
               target="_blank"
               aria-label="Release notes"
-              class="news__block__title"
+              class="updates__block__title"
             >
               <h3>
                 v{{ version.version }} <span> {{ getTimeAgo(version) }}</span>
@@ -44,11 +44,20 @@
             }"
           >
             Bug fixes and improvements. <br />
-            Much love to our community.
+            With love from Kosala and the entire team.
           </p>
           <a :href="version.release_link" target="_blank"
             >Full release notes
           </a>
+          <p class="updates__block__end">
+            Make sure you follow Enkrypt on Twitter (X....ugh) and let us know
+            how we can build a better crypto product for you
+            <span>
+              <a href="https://x.com/enkrypt" target="_blank"
+                >https://x.com/enkrypt</a
+              ></span
+            >
+          </p>
         </div>
       </div>
     </div>
@@ -56,43 +65,39 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, PropType } from 'vue';
 import UpdatesHeader from './components/updates-header.vue';
-import type { NetworkNames } from '@enkryptcom/types';
 import UpdatesNetwork from './components/updates-network.vue';
-import news from './news.json';
 import { useTimeAgo } from '@vueuse/core';
+import { Version } from '@/ui/action/types/updates';
 
 const emit = defineEmits<{
   (e: 'close:popup'): void;
 }>();
-const close = () => {
-  emit('close:popup');
-};
 
-interface Version {
-  version: string;
-  description?: string;
-  chains_added?: NetworkNames[];
-  swap_added?: NetworkNames[];
-  release_date: string;
-  release_link: string;
-}
-interface Releases {
-  versions: Version[];
-}
-const currentVersion = __PACKAGE_VERSION__;
-const releases = news as unknown as Releases;
-const versions = releases.versions;
+const props = defineProps({
+  currentVersion: {
+    required: true,
+    type: String,
+  },
+  versions: {
+    type: Array as PropType<Version[]>,
+  },
+});
+
+/** -------------------
+ * Versions
+ ------------------- */
 
 const displayVersions = computed(() => {
-  const index = versions.findIndex(
-    version => version.version === currentVersion,
+  if (!props.versions) return [];
+  const index = props.versions.findIndex(
+    version => version.version === props.currentVersion,
   );
   if (index === -1) {
-    return versions.slice(0, 20);
+    return props.versions.slice(0, 10);
   } else {
-    return versions.slice(index, 20);
+    return props.versions.slice(index, 10);
   }
 });
 
@@ -113,7 +118,7 @@ const getChainsTitle = (version: Version) => {
     : 'New chain added:';
 };
 /** -------------------
- * Chains Added
+ * Swap Added
  * ------------------- */
 const hasSwapAdded = (version: Version) => {
   return version.swap_added && version.swap_added.length > 0;
@@ -124,12 +129,16 @@ const getSwapTitle = (version: Version) => {
     ? 'Swap added to chains:'
     : 'Swap added to chain:';
 };
+
+const close = () => {
+  emit('close:popup');
+};
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
 
-.news {
+.updates {
   width: 100%;
   height: auto;
   box-sizing: border-box;
diff --git a/packages/extension/src/ui/action/views/updates/news.json b/packages/extension/src/ui/action/views/updates/news.json
deleted file mode 100644
index b1bf9d27f..000000000
--- a/packages/extension/src/ui/action/views/updates/news.json
+++ /dev/null
@@ -1,97 +0,0 @@
-{
-  "versions": [
-    { 
-      "version": "2.0.2",
-      "chains_added": ["ETH", "OKT", "BNB"],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "2.0.1",
-      "description": "We have changed the look of networks menu. Blah Blah Blah Blah Blah Enjoy!",
-      "chains_added":  ["SEPOLIA", "MOVR", "GLMR"],
-      "swap_added": ["ETC", "gibberish", "MATIC"],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "2.0.0",
-      "description": "I am super cute description",
-      "chains_added":  ["SEPOLIA", "MOVR", "GLMR"],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.9.9",
-      "swap_added": ["ACA", "KAR", "evmKAR", "Rootstock", "RootstockTestnet"],
-
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "1.9.8",
-      "description": "I am super cute description",
-      "chains_added": [],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.9.7",
-      "swap_added": [],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "1.9.6",
-      "description": "I am super cute description",
-      "chains_added": [],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.9.5",
-      "swap_added": [],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "1.9.4",
-      "description": "I am super cute description",
-      "chains_added": [],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.9.3",
-      "swap_added": [],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "1.9.2",
-      "description": "I am super cute description",
-      "chains_added": [],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.9.1",
-      "swap_added": [],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    },
-    { 
-      "version": "1.9.0",
-      "description": "I am super cute description",
-      "chains_added": [],
-      "release_date": "2024-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }, 
-    {
-      "version": "1.8.9",
-      "swap_added": [],
-      "release_date": "2021-07-01",
-      "release_link":  "https://github.com/enkryptcom/enKrypt/releases/tag/v2.0.2"
-    }
-  ]
-}

From cf0c453557d3bc931eb8cfaa4c08306621c3c162 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:09:11 -0800
Subject: [PATCH 5/9] devop: add amplitude

---
 packages/extension/src/libs/metrics/index.ts  | 11 +++++++++
 packages/extension/src/libs/metrics/types.ts  | 10 ++++++++
 packages/extension/src/ui/action/App.vue      | 24 +++++++++++++++----
 .../src/ui/action/views/updates/index.vue     | 22 ++++++++++++++++-
 4 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/libs/metrics/index.ts b/packages/extension/src/libs/metrics/index.ts
index 5aff53bc3..3fc0dec2f 100644
--- a/packages/extension/src/libs/metrics/index.ts
+++ b/packages/extension/src/libs/metrics/index.ts
@@ -10,6 +10,8 @@ import {
   SendEventType,
   SettingEventType,
   SwapEventType,
+  UpdatesEventType,
+  UpdatesOpenLocation
 } from './types';
 
 const metrics = new Metrics();
@@ -75,6 +77,14 @@ const trackDAppsEvents = (
   metrics.track('dapps', { event, ...options });
 };
 
+const trackUpdatesEvents = (event: UpdatesEventType, options: {
+  network: NetworkNames;
+  location?: UpdatesOpenLocation;
+  duration?: number;
+}) => {
+  metrics.track('updatesClick', { event, ...options });
+
+}
 const optOutofMetrics = (optOut: boolean) => {
   if (!__IS_FIREFOX__) {
     metrics.setOptOut(false);
@@ -95,4 +105,5 @@ export {
   trackDAppsEvents,
   optOutofMetrics,
   trackGenericEvents,
+  trackUpdatesEvents
 };
diff --git a/packages/extension/src/libs/metrics/types.ts b/packages/extension/src/libs/metrics/types.ts
index 955ee03e3..8d0bb0908 100644
--- a/packages/extension/src/libs/metrics/types.ts
+++ b/packages/extension/src/libs/metrics/types.ts
@@ -47,3 +47,13 @@ export enum DAppsEventType {
 export enum SettingEventType {
   OptOut = 'opt_out',
 }
+
+export enum UpdatesEventType {
+  UpdatesOpen = 'updates_open',
+  UpdatesClosed = 'updates_closed',
+}
+
+export enum UpdatesOpenLocation {
+  settings = 'settings',
+  logo = "logo",
+}
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 525e07d70..4f3554dc2 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -10,7 +10,7 @@
           <logo-min class="app__menu-logo" />
           <updated-icon
             v-if="loadedUpdates && showUpdatesBtn"
-            @click="openUpdatesDialog"
+            @click="openUpdatesDialog(UpdatesOpenLocation.logo)"
             class="app__menu-updated"
           />
         </div>
@@ -32,7 +32,7 @@
             <a
               v-if="loadedUpdates"
               class="app__menu-dropdown-link"
-              @click="openUpdatesDialog"
+              @click="openUpdatesDialog(UpdatesOpenLocation.settings)"
             >
               <heart-icon class="app__menu-dropdown-link-heart"></heart-icon>
               <span> Updates</span>
@@ -117,6 +117,7 @@
       v-if="loadedUpdates && showUpdatesDialog"
       :versions="releases?.versions"
       :current-version="currentVersion"
+      :current-network="currentNetwork.name"
       @close:popup="closeUpdatesDialog"
     />
   </div>
@@ -171,10 +172,19 @@ import { EnkryptProviderEventMethods, ProviderName } from '@/types/provider';
 import { onClickOutside } from '@vueuse/core';
 import RateState from '@/libs/rate-state';
 import SwapLookingAnimation from '@action/icons/swap/swap-looking-animation.vue';
-import { trackBuyEvents, trackNetworkSelected } from '@/libs/metrics';
+import {
+  trackBuyEvents,
+  trackNetworkSelected,
+  trackUpdatesEvents,
+} from '@/libs/metrics';
 import { getLatestEnkryptVersion } from '@action/utils/browser';
 import { gt as semverGT } from 'semver';
-import { BuyEventType, NetworkChangeEvents } from '@/libs/metrics/types';
+import {
+  BuyEventType,
+  NetworkChangeEvents,
+  UpdatesEventType,
+  UpdatesOpenLocation,
+} from '@/libs/metrics/types';
 import { NetworksCategory } from '@action/types/network-category';
 import { newNetworks } from '@/providers/common/libs/new-features';
 import UpdatesState from '@/libs/updates-state';
@@ -258,13 +268,17 @@ const getShowUpdatesBtn = async () => {
     console.error('Failed to get show updates button:', error);
   }
 };
-const openUpdatesDialog = () => {
+const openUpdatesDialog = (_location: UpdatesOpenLocation) => {
   showUpdatesDialog.value = true;
   updatesState.setLastVersionViewed(currentVersion);
   showUpdatesBtn.value = false;
   if (isOpenMore.value) {
     closeMoreMenu();
   }
+  trackUpdatesEvents(UpdatesEventType.UpdatesOpen, {
+    network: currentNetwork.value.name,
+    location: _location,
+  });
 };
 
 const closeUpdatesDialog = () => {
diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
index 1d968a2e0..0f66a32b0 100644
--- a/packages/extension/src/ui/action/views/updates/index.vue
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -65,11 +65,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue';
+import { computed, onMounted, PropType, ref } from 'vue';
 import UpdatesHeader from './components/updates-header.vue';
 import UpdatesNetwork from './components/updates-network.vue';
 import { useTimeAgo } from '@vueuse/core';
 import { Version } from '@/ui/action/types/updates';
+import { trackUpdatesEvents } from '@/libs/metrics';
+import { UpdatesEventType } from '@/libs/metrics/types';
+import { NetworkNames } from '@enkryptcom/types';
 
 const emit = defineEmits<{
   (e: 'close:popup'): void;
@@ -83,6 +86,10 @@ const props = defineProps({
   versions: {
     type: Array as PropType<Version[]>,
   },
+  currentNetwork: {
+    type: String as PropType<NetworkNames>,
+    required: true,
+  },
 });
 
 /** -------------------
@@ -130,8 +137,21 @@ const getSwapTitle = (version: Version) => {
     : 'Swap added to chain:';
 };
 
+/** -------------------
+ * Close
+ * ------------------- */
+const timeOpen = ref<number>(0);
+
+onMounted(() => {
+  timeOpen.value = Date.now();
+});
 const close = () => {
   emit('close:popup');
+  const timeSinceOpen = Date.now() - timeOpen.value;
+  trackUpdatesEvents(UpdatesEventType.UpdatesClosed, {
+    network: props.currentNetwork,
+    duration: timeSinceOpen,
+  });
 };
 </script>
 

From 4bbff4d69d694234b5b9ecffe43703d24c285634 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:41:24 -0800
Subject: [PATCH 6/9] devop: fix comments

---
 packages/extension/src/libs/metrics/index.ts  |  2 +-
 .../extension/src/libs/updates-state/index.ts | 38 +++++++++----------
 packages/extension/src/ui/action/App.vue      |  5 ++-
 .../extension/src/ui/action/utils/browser.ts  | 12 +++---
 .../updates/components/updates-header.vue     | 19 +++++++++-
 .../updates/components/updates-network.vue    |  4 +-
 .../src/ui/action/views/updates/index.vue     |  2 +-
 7 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/packages/extension/src/libs/metrics/index.ts b/packages/extension/src/libs/metrics/index.ts
index 3fc0dec2f..cc55a820d 100644
--- a/packages/extension/src/libs/metrics/index.ts
+++ b/packages/extension/src/libs/metrics/index.ts
@@ -81,7 +81,7 @@ const trackUpdatesEvents = (event: UpdatesEventType, options: {
   network: NetworkNames;
   location?: UpdatesOpenLocation;
   duration?: number;
-}) => {
+}): void => {
   metrics.track('updatesClick', { event, ...options });
 
 }
diff --git a/packages/extension/src/libs/updates-state/index.ts b/packages/extension/src/libs/updates-state/index.ts
index 1dc92c0f1..83a6c97f0 100644
--- a/packages/extension/src/libs/updates-state/index.ts
+++ b/packages/extension/src/libs/updates-state/index.ts
@@ -14,46 +14,46 @@ class UpdatesState {
   }
 
   async getState(): Promise<IState> {
-    return this.storage.get(StorageKeys.updatesInfo);
+    const state = this.storage.get(StorageKeys.updatesInfo);
+    if (!state) {
+      const newState: IState = {
+        lastVersionViewed: '',
+        currentRelease: '',
+        currentReleaseTimestamp: 0,
+      }
+      return newState
+    }
+    return state;
   }
 
   async getLastVersionViewed(): Promise<IState['lastVersionViewed']> {
-    const state: IState | undefined = await this.getState();
-    if (state && state.lastVersionViewed) {
-      return state.lastVersionViewed;
-    }
-    return '';
+    const state: IState = await this.getState();
+    return state?.lastVersionViewed ?? '';
   }
   async setLastVersionViewed(lastVersionViewed: string): Promise<void> {
-    const state: IState | undefined = await this.getState();
+    const state: IState = await this.getState();
     const newState: IState = { ...state, lastVersionViewed }
     await this.setState(newState);
   }
 
   async getCurrentRelease(): Promise<IState['currentRelease']> {
-    const state: IState | undefined = await this.getState();
-    if (state && state.currentRelease) {
-      return state.currentRelease;
-    }
-    return ''
+    const state: IState = await this.getState();
+    return state?.currentRelease ?? '';
   }
 
   async setCurrentRelease(currentRelease: string): Promise<void> {
-    const state: IState | undefined = await this.getState();
+    const state: IState = await this.getState();
     const newState: IState = { ...state, currentRelease }
     await this.setState(newState);
   }
 
   async getCurrentReleaseTimestamp(): Promise<IState['currentReleaseTimestamp']> {
-    const state: IState | undefined = await this.getState();
-    if (state && state.currentReleaseTimestamp) {
-      return state.currentReleaseTimestamp;
-    }
-    return 0
+    const state: IState = await this.getState();
+    return state?.currentReleaseTimestamp ?? 0;
   }
 
   async setCurrentReleaseTimestamp(currentReleaseTimestamp: number): Promise<void> {
-    const state: IState | undefined = await this.getState();
+    const state: IState = await this.getState();
     const newState: IState = { ...state, currentReleaseTimestamp }
     await this.setState(newState);
   }
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 4f3554dc2..f7e95ec98 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -243,7 +243,10 @@ const initUpdateState = async () => {
   const currentReleaseInState = await updatesState.getCurrentRelease();
   stateCurrentReleaseTimestamp.value =
     await updatesState.getCurrentReleaseTimestamp();
-  if (currentReleaseInState !== currentVersion) {
+  if (
+    currentReleaseInState === '' ||
+    currentReleaseInState !== currentVersion
+  ) {
     await updatesState.setCurrentRelease(currentVersion);
     const newReleaseTimestamp = Date.now();
     await updatesState.setCurrentReleaseTimestamp(newReleaseTimestamp);
diff --git a/packages/extension/src/ui/action/utils/browser.ts b/packages/extension/src/ui/action/utils/browser.ts
index 9d6e9f5a3..d86bb520c 100644
--- a/packages/extension/src/ui/action/utils/browser.ts
+++ b/packages/extension/src/ui/action/utils/browser.ts
@@ -61,18 +61,18 @@ export const getLatestEnkryptVersion = (): Promise<string> => {
     .catch(() => null);
 };
 
-export const getLatestEnkryptUpdates = (): Promise<Updates> => {
+export const getLatestEnkryptUpdates = (): Promise<Updates | null> => {
 
   const browser = detectBrowser();
   const url = 'https://raw.githubusercontent.com/enkryptcom/dynamic-data/main/configs/release-versions'
   const fetchUrl = browser === BROWSER_NAMES.safari ? `${url}-safari.json` : `${url}.json`
-  console.log(fetchUrl)
   return fetch(
     fetchUrl
   )
     .then(res => res.json())
-    .then(releases => {
-      return releases;
-    })
-    .catch(() => null);
+    .catch((error) => {
+      console.error('Failed to fetch updates:', error);
+      return null
+    }
+    );
 };
diff --git a/packages/extension/src/ui/action/views/updates/components/updates-header.vue b/packages/extension/src/ui/action/views/updates/components/updates-header.vue
index c101b33bb..6ce506dfd 100644
--- a/packages/extension/src/ui/action/views/updates/components/updates-header.vue
+++ b/packages/extension/src/ui/action/views/updates/components/updates-header.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="settings__header">
     <h2>What's New</h2>
-    <a class="settings__close" @click="$emit('window:close')">
+    <button
+      type="button"
+      class="settings__close"
+      @click="$emit('window:close')"
+      aria-label="Close what's new popup"
+    >
       <close-icon />
-    </a>
+    </button>
   </div>
 </template>
 
@@ -27,6 +32,16 @@ defineEmits<{
     padding: 24px 72px 12px 32px;
     margin-bottom: 8px;
 
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+    }
+
     h2 {
       font-style: normal;
       font-weight: 700;
diff --git a/packages/extension/src/ui/action/views/updates/components/updates-network.vue b/packages/extension/src/ui/action/views/updates/components/updates-network.vue
index 227a23e4c..2071de211 100644
--- a/packages/extension/src/ui/action/views/updates/components/updates-network.vue
+++ b/packages/extension/src/ui/action/views/updates/components/updates-network.vue
@@ -27,7 +27,7 @@ const props = defineProps({
 
 const resolvedImg = ref('');
 const isLoaded = ref(false);
-const networkName = ref('Unkown');
+const networkName = ref('Unknown');
 
 getNetworkByName(props.networkId)
   .then(network => {
@@ -42,7 +42,7 @@ getNetworkByName(props.networkId)
       `Failed to load image in news for: ${props.networkId}`,
       error,
     );
-    isLoaded.value = true;
+    isLoaded.value = false;
     resolvedImg.value = '';
   });
 
diff --git a/packages/extension/src/ui/action/views/updates/index.vue b/packages/extension/src/ui/action/views/updates/index.vue
index 0f66a32b0..872dd7205 100644
--- a/packages/extension/src/ui/action/views/updates/index.vue
+++ b/packages/extension/src/ui/action/views/updates/index.vue
@@ -104,7 +104,7 @@ const displayVersions = computed(() => {
   if (index === -1) {
     return props.versions.slice(0, 10);
   } else {
-    return props.versions.slice(index, 10);
+    return props.versions.slice(index, index + 10);
   }
 });
 

From 4cdb0b9c5256e2a604d71473ac6f9c7eed44c309 Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Mon, 13 Jan 2025 12:01:23 -0800
Subject: [PATCH 7/9] fix: padding in settings drop down for update button

---
 packages/extension/src/ui/action/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index f7e95ec98..bb5b762a7 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -833,7 +833,8 @@ body {
         &-heart {
           width: 18px !important;
           height: 18px !important;
-          margin-right: 18px !important;
+          margin-right: 16px !important;
+          margin-left: 16px !important;
         }
 
         &:hover,

From 6889a497bdd56d95977458ed0607c87052860a7a Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Mon, 13 Jan 2025 12:03:17 -0800
Subject: [PATCH 8/9] devop: update version

---
 packages/extension/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/package.json b/packages/extension/package.json
index b3af75bf9..b7629b969 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/extension",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "type": "module",
   "scripts": {

From 7a787d2300c445cf13a082c1f6864677a76cb56e Mon Sep 17 00:00:00 2001
From: olgakup <16910687+olgakup@users.noreply.github.com>
Date: Mon, 13 Jan 2025 12:28:16 -0800
Subject: [PATCH 9/9] fix: updates not showing on first init

---
 packages/extension/src/ui/action/App.vue | 77 ++++++++++++++++--------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index bb5b762a7..5cfcb1a40 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -233,27 +233,66 @@ const enabledTestnetworks = ref<string[]>([]);
 /** -------------------
  * Updates
  -------------------*/
-const releases = ref<Updates | undefined>(undefined);
+const releases = ref<Updates | null>(null);
 const loadedUpdates = ref<boolean>(false);
 const showUpdatesBtn = ref<boolean>(false);
 const showUpdatesDialog = ref<boolean>(false);
 const stateCurrentReleaseTimestamp = ref<number>(0);
 
+/**
+ * Initializes the update state by performing the following actions:
+ * 1. Retrieves the current release from the state.
+ * 2. Updates the current release timestamp.
+ * 3. If the current release is empty or different from the current version in the app state,
+ *    sets the current release and updates the release timestamp.
+ * 4. Fetches the latest Enkrypt updates and sets the releases state.
+ * 5. Displays the updates button if there are new releases.
+ * 6. Sets the loadedUpdates state to true if successful, otherwise false.
+ *
+ * @async
+ * @function initUpdateState
+ * @returns {Promise<void>} A promise that resolves when the update state is initialized.
+ * @throws Will log an error message if the initialization fails.
+ */
 const initUpdateState = async () => {
-  const currentReleaseInState = await updatesState.getCurrentRelease();
-  stateCurrentReleaseTimestamp.value =
-    await updatesState.getCurrentReleaseTimestamp();
-  if (
-    currentReleaseInState === '' ||
-    currentReleaseInState !== currentVersion
-  ) {
-    await updatesState.setCurrentRelease(currentVersion);
-    const newReleaseTimestamp = Date.now();
-    await updatesState.setCurrentReleaseTimestamp(newReleaseTimestamp);
-    stateCurrentReleaseTimestamp.value = newReleaseTimestamp;
+  try {
+    const currentReleaseInState = await updatesState.getCurrentRelease();
+    stateCurrentReleaseTimestamp.value =
+      await updatesState.getCurrentReleaseTimestamp();
+    if (
+      currentReleaseInState === '' ||
+      currentReleaseInState !== currentVersion
+    ) {
+      await updatesState.setCurrentRelease(currentVersion);
+      const newReleaseTimestamp = Date.now();
+      await updatesState.setCurrentReleaseTimestamp(newReleaseTimestamp);
+      stateCurrentReleaseTimestamp.value = newReleaseTimestamp;
+    }
+    releases.value = await getLatestEnkryptUpdates();
+    if (releases.value) {
+      await getShowUpdatesBtn();
+    }
+    loadedUpdates.value = true;
+  } catch (error) {
+    console.error('Failed to init update state:', error);
+    loadedUpdates.value = false;
   }
 };
 
+/**
+ * Asynchronously determines whether to show the updates button based on the last version viewed and the current version.
+ *
+ * The function performs the following steps:
+ * 1. Retrieves the last version viewed from the updates state.
+ * 2. Checks if the last version viewed is empty or if the current version is greater than the last version viewed.
+ * 3. If the above condition is true, calculates an expiration timestamp (2 weeks from the current release timestamp).
+ * 4. Sets the `showUpdatesBtn` value to true if the current release timestamp is less than the expiration timestamp.
+ * 5. Otherwise, sets the `showUpdatesBtn` value to false.
+ *
+ * If an error occurs during the process, it logs an error message to the console.
+ *
+ * @returns {Promise<void>} A promise that resolves when the function completes.
+ */
 const getShowUpdatesBtn = async () => {
   try {
     const lastVersionViewed = await updatesState.getLastVersionViewed();
@@ -271,6 +310,7 @@ const getShowUpdatesBtn = async () => {
     console.error('Failed to get show updates button:', error);
   }
 };
+
 const openUpdatesDialog = (_location: UpdatesOpenLocation) => {
   showUpdatesDialog.value = true;
   updatesState.setLastVersionViewed(currentVersion);
@@ -369,18 +409,6 @@ onMounted(async () => {
         .then(() => (isLoading.value = false));
     } else {
       init();
-      try {
-        await initUpdateState();
-        releases.value = await getLatestEnkryptUpdates();
-        if (releases.value) {
-          await getShowUpdatesBtn();
-        }
-        loadedUpdates.value = true;
-      } catch (error) {
-        console.error('Failed to get latest enkrypt updates:', error);
-        loadedUpdates.value = false;
-      }
-
       setTimeout(() => {
         rateState.showPopup().then(show => {
           if (show) {
@@ -400,6 +428,7 @@ onMounted(async () => {
         });
       }, 2000);
     }
+    initUpdateState();
   } else {
     openOnboard();
   }