From 32870a2cbf7e1a267c16d230b169f94f1000fcf7 Mon Sep 17 00:00:00 2001 From: olgakup <16910687+olgakup@users.noreply.github.com> Date: Fri, 14 Feb 2025 14:38:15 -0800 Subject: [PATCH] devop: migrate menu under 1 component --- packages/extension/src/ui/action/App.vue | 281 +----------- .../ui/action/components/app-menu/index.vue | 401 +++++++++++++++--- 2 files changed, 351 insertions(+), 331 deletions(-) diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue index 57b233e4c..00aa95ec9 100644 --- a/packages/extension/src/ui/action/App.vue +++ b/packages/extension/src/ui/action/App.vue @@ -3,53 +3,14 @@
-
- -
-
-
-
- - - -
- - Other networks - - - Lock Enkrypt - - - Settings - -
- - - Updates - -
-
-
+
@@ -106,7 +67,7 @@ v-if="updatesIsLoaded && showUpdatesDialog" :current-version="currentVersion" :current-network="currentNetwork.name" - @close:popup="closeUpdatesDialog" + @close:popup="setShowUpdatesDialog(false)" />
@@ -138,11 +99,6 @@ import Browser from 'webextension-polyfill'; import AccountsHeader from './components/accounts-header/index.vue'; import AppMenu from './components/app-menu/index.vue'; import NetworkMenu from './components/network-menu/index.vue'; -import MoreIcon from './icons/actions/more.vue'; -import HoldIcon from './icons/common/hold-icon.vue'; -import LogoMin from './icons/common/logo-min.vue'; -import ManageNetworksIcon from './icons/common/manage-networks-icon.vue'; -import SettingsIcon from './icons/common/settings-icon.vue'; import { AccountsHeaderData } from './types/account'; import AddNetwork from './views/add-network/index.vue'; import ModalRate from './views/modal-rate/index.vue'; @@ -150,24 +106,12 @@ import Settings from './views/settings/index.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'; import RateState from '@/libs/rate-state'; import SwapLookingAnimation from '@action/icons/swap/swap-looking-animation.vue'; -import { - trackBuyEvents, - trackNetwork, - trackUpdatesEvents, -} from '@/libs/metrics'; +import { trackBuyEvents, trackNetwork } from '@/libs/metrics'; import { getLatestEnkryptVersion } from '@action/utils/browser'; import { gt as semverGT } from 'semver'; -import { - BuyEventType, - NetworkChangeEvents, - UpdatesEventType, - UpdatesOpenLocation, -} from '@/libs/metrics/types'; -import UpdatedIcon from '@/ui/action/icons/updates/updated.vue'; -import HeartIcon from '@/ui/action/icons/updates/heart.vue'; +import { BuyEventType, NetworkChangeEvents } from '@/libs/metrics/types'; import { useUpdatesStore } from './store/updates-store'; import { useNetworksStore } from './store/networks-store'; import { storeToRefs } from 'pinia'; @@ -175,7 +119,6 @@ import { storeToRefs } from 'pinia'; const domainState = new DomainState(); const rateState = new RateState(); -const appMenuRef = ref(null); const showDepositWindow = ref(false); const accountHeaderData = ref({ activeAccounts: [], @@ -184,9 +127,6 @@ const accountHeaderData = ref({ activeBalances: [], }); -const isOpenMore = ref(false); -let timeout: ReturnType | null = null; -defineExpose({ appMenuRef }); const router = useRouter(); const route = useRoute(); const transitionName = 'fade'; @@ -198,8 +138,6 @@ const addNetworkShow = ref(false); const settingsShow = ref(false); const rateShow = ref(false); const updateShow = ref(false); -const dropdown = ref(null); -const toggle = ref(null); const isLoading = ref(true); const currentVersion = __PACKAGE_VERSION__; const latestVersion = ref(''); @@ -208,24 +146,14 @@ const latestVersion = ref(''); * Updates -------------------*/ const updatesStore = useUpdatesStore(); -const { updatesIsLoaded, showUpdatesBtn } = storeToRefs(updatesStore); +const { updatesIsLoaded } = storeToRefs(updatesStore); const showUpdatesDialog = ref(false); - -const openUpdatesDialog = (_location: UpdatesOpenLocation) => { - showUpdatesDialog.value = true; - updatesStore.setLastVersionViewed(currentVersion); - showUpdatesBtn.value = false; - if (isOpenMore.value) { - closeMoreMenu(); +const setShowUpdatesDialog = (show: boolean) => { + console.log('setShowUpdatesDialog', show); + showUpdatesDialog.value = show; + if (show) { + updatesStore.setLastVersionViewed(currentVersion); } - trackUpdatesEvents(UpdatesEventType.UpdatesOpen, { - network: currentNetwork.value.name, - location: _location, - }); -}; - -const closeUpdatesDialog = () => { - showUpdatesDialog.value = false; }; /** ------------------- @@ -233,7 +161,6 @@ const closeUpdatesDialog = () => { -------------------*/ const networksStore = useNetworksStore(); -const { orderedNetworks } = storeToRefs(networksStore); /** ------------------- * Core @@ -330,12 +257,7 @@ onMounted(async () => { /** * Update the gradient of the app menu on the active network change */ -const updateGradient = (newGradient: string) => { - //hack may be there is a better way. less.modifyVars doesnt work - if (appMenuRef.value) - (appMenuRef.value as HTMLElement).style.background = - `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`; -}; + const setNetwork = async (network: BaseNetwork) => { trackNetwork(NetworkChangeEvents.NetworkChangePopup, { provider: network.provider, @@ -511,41 +433,6 @@ const lockAction = async () => { }); router.push({ name: 'lock-screen' }); }; -const settingsAction = () => { - closeMoreMenu(); - settingsShow.value = !settingsShow.value; -}; -const otherNetworksAction = () => { - closeMoreMenu(); - addNetworkShow.value = !addNetworkShow.value; -}; -const toggleMoreMenu = () => { - if (timeout != null) { - clearTimeout(timeout); - - timeout = null; - } - if (isOpenMore.value) { - closeMoreMenu(); - } else { - isOpenMore.value = true; - } -}; -const closeMoreMenu = () => { - if (timeout != null) { - clearTimeout(timeout); - } - timeout = setTimeout(() => { - isOpenMore.value = false; - }, 50); -}; -onClickOutside( - dropdown, - () => { - closeMoreMenu(); - }, - { ignore: [toggle] }, -);