Skip to content

Commit

Permalink
devop: migrate menu under 1 component
Browse files Browse the repository at this point in the history
  • Loading branch information
@olgakup
olgakup committed Feb 14, 2025
1 parent 9b844e2 commit 32870a2
Show file tree
Hide file tree
Showing 2 changed files with 351 additions and 331 deletions.
281 changes: 15 additions & 266 deletions packages/extension/src/ui/action/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,14 @@
<div v-if="isLoading" class="app__loading">
<swap-looking-animation />
</div>
<div v-show="!isLoading" ref="appMenuRef" class="app__menu">
<!-- LOGO & TOP MENU -->
<div
class="app__menu-row"
:class="{ border: orderedNetworks.length > 9 }"
>
<div class="app__menu-row">
<logo-min class="app__menu-logo" />
<updated-icon
v-if="updatesIsLoaded && showUpdatesBtn"
@click="openUpdatesDialog(UpdatesOpenLocation.logo)"
class="app__menu-updated"
/>
</div>
<div>
<a ref="toggle" class="app__menu-link" @click="toggleMoreMenu">
<more-icon />
</a>
<div v-show="isOpenMore" ref="dropdown" class="app__menu-dropdown">
<a class="app__menu-dropdown-link" @click="otherNetworksAction">
<manage-networks-icon /> <span>Other networks</span>
</a>
<a class="app__menu-dropdown-link" @click="lockAction">
<hold-icon /> <span>Lock Enkrypt</span>
</a>
<a class="app__menu-dropdown-link" @click="settingsAction">
<settings-icon /> <span>Settings</span>
</a>
<div
v-if="updatesIsLoaded"
class="app__menu-dropdown-divider"
></div>
<a
v-if="updatesIsLoaded"
class="app__menu-dropdown-link"
@click="openUpdatesDialog(UpdatesOpenLocation.settings)"
>
<heart-icon class="app__menu-dropdown-link-heart"></heart-icon>
<span> Updates</span>
</a>
</div>
</div>
</div>
<div v-show="!isLoading">
<app-menu
:active-network="currentNetwork"
@update:network="setNetwork"
@update:gradient="updateGradient"
@show:updates-dialog="setShowUpdatesDialog(true)"
@show:settings-dialog="settingsShow = true"
@show:other-networks-dialog="addNetworkShow = true"
@action:lock-enkrypt="lockAction"
/>
</div>

Expand Down Expand Up @@ -106,7 +67,7 @@
v-if="updatesIsLoaded && showUpdatesDialog"
:current-version="currentVersion"
:current-network="currentNetwork.name"
@close:popup="closeUpdatesDialog"
@close:popup="setShowUpdatesDialog(false)"
/>
</div>
</template>
Expand Down Expand Up @@ -138,44 +99,26 @@ 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';
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';
const domainState = new DomainState();
const rateState = new RateState();
const appMenuRef = ref(null);
const showDepositWindow = ref(false);
const accountHeaderData = ref<AccountsHeaderData>({
activeAccounts: [],
Expand All @@ -184,9 +127,6 @@ const accountHeaderData = ref<AccountsHeaderData>({
activeBalances: [],
});
const isOpenMore = ref(false);
let timeout: ReturnType<typeof setTimeout> | null = null;
defineExpose({ appMenuRef });
const router = useRouter();
const route = useRoute();
const transitionName = 'fade';
Expand All @@ -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('');
Expand All @@ -208,32 +146,21 @@ const latestVersion = ref('');
* Updates
-------------------*/
const updatesStore = useUpdatesStore();
const { updatesIsLoaded, showUpdatesBtn } = storeToRefs(updatesStore);
const { updatesIsLoaded } = storeToRefs(updatesStore);
const showUpdatesDialog = ref<boolean>(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;
};
/** -------------------
* Networks
-------------------*/
const networksStore = useNetworksStore();
const { orderedNetworks } = storeToRefs(networksStore);
/** -------------------
* Core
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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] },
);
</script>

<style lang="less">
Expand Down Expand Up @@ -601,144 +488,6 @@ body {
z-index: 2;
}
}
&__menu {
width: 340px;
height: 600px;
position: absolute;
left: 0;
top: 0;
padding: 8px 12px 2px 12px;
box-sizing: border-box;
z-index: 1;
background: @defaultGradient;
box-shadow: inset -1px 0px 2px 0px rgba(0, 0, 0, 0.16);
&-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;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
&-add {
display: flex;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
flex-direction: row;
height: 40px;
padding: 10px 16px 10px 8px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
text-decoration: none;
cursor: pointer;
border-radius: 10px;
transition: background 300ms ease-in-out;
&.active,
&:hover {
background: @black007;
}
svg {
margin-right: 8px;
}
}
&-link {
display: inline-block;
padding: 8px;
margin-left: 4px;
text-decoration: none;
cursor: pointer;
font-size: 0;
border-radius: 10px;
transition: background 300ms ease-in-out;
&.active,
&:hover {
background: @black007;
}
}
&-dropdown {
padding: 8px;
position: relative;
width: 172px;
background: @white;
box-shadow:
0px 0.5px 5px rgba(0, 0, 0, 0.039),
0px 3.75px 11px rgba(0, 0, 0, 0.19);
border-radius: 12px;
position: absolute;
right: 8px;
top: 48px;
z-index: 3;
&-divider {
height: 1px;
width: 90%;
margin: 8px;
background: @gray02;
}
&-link {
width: 100%;
height: 48px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
cursor: pointer;
transition: background 300ms ease-in-out;
border-radius: 8px;
&-heart {
width: 18px !important;
height: 18px !important;
margin-right: 16px !important;
margin-left: 16px !important;
}
&:hover,
&.active {
background: rgba(0, 0, 0, 0.04);
}
svg {
margin-right: 12px;
margin-left: 12px;
}
span {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
}
}
}
}
&__content {
width: 460px;
Expand Down
Loading

0 comments on commit 32870a2

Please sign in to comment.