Feat/app dialog

packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue

@@ -80,11 +80,10 @@
       />
 
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        @close-popup="toggleSelectFee"
         @gas-type-changed="selectFee"
       />
 

packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue

@@ -101,12 +101,11 @@
         {{ errorMsg }}
       </p>
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        :is-popup="true"
-        @close-popup="toggleSelectFee"
+        is-popup
         @gas-type-changed="selectFee"
       />
     </template>

packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue

@@ -75,6 +75,7 @@ const balance = computed(() =>
     img {
       width: 100%;
       height: 100%;
+      object-fit: contain;
     }
   }
 

packages/extension/src/providers/ethereum/ui/send-transaction/index.vue

@@ -58,11 +58,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 
@@ -100,11 +99,10 @@
       />
 
       <transaction-fee-view
+        v-model="isOpenSelectFee"
         :fees="gasCostValues"
-        :show-fees="isOpenSelectFee"
         :selected="selectedFee"
         :is-header="true"
-        @close-popup="toggleSelectFee"
         @gas-type-changed="selectFee"
       />
 

packages/extension/src/providers/kadena/ui/send-transaction/index.vue

@@ -54,11 +54,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 

packages/extension/src/providers/polkadot/ui/send-transaction/index.vue

@@ -52,11 +52,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 

packages/extension/src/providers/solana/ui/send-transaction/index.vue

@@ -53,11 +53,10 @@
       />
 
       <assets-select-list
-        v-show="isOpenSelectToken"
+        v-model="isOpenSelectToken"
         :is-send="true"
         :assets="accountAssets"
         :is-loading="isLoadingAssets"
-        @close="toggleSelectToken"
         @update:select-asset="selectToken"
       />
 

packages/extension/src/ui/action/App.vue

@@ -272,6 +272,7 @@ onMounted(async () => {
       }, 2000);
     }
     updatesStore.init();
+    menuStore.init();
   } else {
     openOnboard();
   }

packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue

@@ -65,7 +65,7 @@
         </a>
       </tooltip>
 
-      <tooltip text="Account's QR code">
+      <tooltip text="Account's QR code" is-bottom-left>
         <a
           showDeposit
           class="account__actions--copy"
@@ -249,6 +249,7 @@ const disconnectFromDapp = async () => {
         box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
         padding: 1px;
         border-radius: 50%;
+        object-fit: contain;
       }
     }
 

packages/extension/src/ui/action/components/app-dialog/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <teleport to="#app">
+    <Transition name="modaltransition">
+      <div v-if="model" :class="[defaultClass, { show: model }]">
+        <div class="app-dialog__overlay" @click="closeDialog" />
+        <div
+          class="app-dialog__wrap"
+          :class="[{ show: model }]"
+          :style="dialogStyle"
+        >
+          <a class="app-dialog__close" @click="closeDialog">
+            <close-icon />
+          </a>
+
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from '@action/icons/common/close-icon.vue';
+import { useMenuStore } from '@action/store/menu-store';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+/**
+ * This component is a dialog that can be used to display content in a modal.
+ * It has a close button and a backdrop that can be clicked to close the dialog.
+ * The dialog can be centered or not centered.
+ * By default, it aligned to cover the right side of the screen and be the max width of the content that does not cover menu.
+ *
+ * !!! Do not use it if pinia store is not defined, as it depends on the menu store.
+ *
+ * @emits close:dialog - Emits when the dialog is closed.
+ * @model - Controls the visibility of the dialog.
+ *
+ * @example Basic Dialog
+ * <app-dialog v-model="dialogModel">
+ *    <div> hello world </div>
+ * </app-dialog>
+ * @example Centered Dialog with custom width
+ *
+ * <app-dialog v-model="dialogModel" width="500px" isCentered>
+ *    <div> hello world </div>
+ * </app-dialog>
+ *
+ */
+const props = defineProps({
+  width: {
+    type: String,
+    default: '428px',
+  },
+  isCentered: {
+    type: Boolean,
+    default: false,
+  },
+});
+/** -------------------
+ * Open Close State
+ -------------------*/
+const emit = defineEmits<{
+  (e: 'close:dialog'): void;
+}>();
+
+const model = defineModel<boolean>();
+
+const closeDialog = () => {
+  model.value = false;
+  emit('close:dialog');
+};
+
+/** -------------------
+ * Styling
+ -------------------*/
+const menuStore = useMenuStore();
+const { isExpanded } = storeToRefs(menuStore);
+const defaultClass = computed(() => {
+  const widthClass = isExpanded.value ? 'expanded' : 'collapsed';
+  const justifyClass = props.isCentered ? 'is-centered' : 'is-not-centered';
+  return `app-dialog app-dialog__${widthClass} app-dialog__${justifyClass}`;
+});
+
+const dialogStyle = computed(() => {
+  return {
+    width: props.width,
+  };
+});
+</script>
+
+<style lang="less" scoped>
+@import '@action/styles/theme.less';
+
+.app-dialog {
+  height: 600px;
+  top: 0px;
+  position: fixed;
+  z-index: 105;
+  display: none;
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  padding: 16px;
+  transition: opacity 0.3s ease;
+
+  &__expanded {
+    width: 800px;
+  }
+  &__collapsed {
+    width: 516px;
+  }
+  &__is-centered {
+    justify-content: center;
+  }
+  &__is-not-centered {
+    justify-content: end;
+  }
+
+  &.show {
+    display: flex;
+  }
+
+  &__overlay {
+    background: rgba(0, 0, 0, 0.32);
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    z-index: 106;
+  }
+
+  &__wrap {
+    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: relative;
+    z-index: 107;
+    overflow-y: scroll;
+    max-height: 100%;
+    box-sizing: border-box;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+
+    h2 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 28px;
+      letter-spacing: 0.15px;
+      color: @primaryLabel;
+      margin: 0;
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+      margin: 0 0 24px 0;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0;
+    transition: background 300ms ease-in-out;
+    z-index: 108;
+    &:hover {
+      background: @black007;
+    }
+  }
+}
+.modaltransition-enter-from {
+  opacity: 0;
+}
+
+.modaltransition-leave-to {
+  opacity: 0;
+}
+
+.modaltransition-enter-from .app-dialog__wrap,
+.modaltransition-leave-to .app-dialog__wrap {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

packages/extension/src/ui/action/components/tooltip/index.vue

@@ -41,6 +41,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isBottomLeft: {
+    type: Boolean,
+    default: false,
+  },
   teleportToApp: {
     type: Boolean,
     default: false,
@@ -86,6 +90,13 @@ const onHover = (e: any) => {
             tooltipRef.value.style.top = `${topPosition}px`;
             tooltipRef.value.style.transform =
               'translateX(0) translateY(-100%)';
+          } else if (props.isBottomLeft) {
+            const left =
+              e.target.getBoundingClientRect().x -
+              e.target.getBoundingClientRect().width +
+              10;
+            tooltipRef.value.style.left = `${left}px`;
+            tooltipRef.value.style.top = `${bottom}px`;
           } else {
             const tooltipMiddle =
               tooltipRef.value.getBoundingClientRect().width / 2;
@@ -138,6 +149,9 @@ const classObject = () => {
   if (props.isTopLeft) {
     return { 'left-top': true, visible: visible.value };
   }
+  if (props.isBottomRight) {
+    return { 'left-bottom': true, visible: visible.value };
+  }
   const x = positionX.value;
   const y = positionY.value;
   switch (true) {
@@ -195,6 +209,11 @@ const classObject = () => {
       right: 0;
       transform: translateX(0) translateY(0px);
     }
+    &.left-bottom {
+      top: calc(~'100% + 3px');
+      left: 0;
+      transform: translateX(0) translateY(0px);
+    }
     &.right-top {
       top: calc(~'-100% + 2px');
       right: 0;

packages/extension/src/ui/action/main.ts

@@ -18,7 +18,4 @@ const pinia = createPinia();
 app.use(router).use(Vue3Lottie, { name: 'vue3lottie' }).use(pinia);
 
 app.config.globalProperties.$filters = filters;
-const menuStore = useMenuStore();
-// Get isExpanded value from MenuState and set it to the store
-await menuStore.init();
 app.mount('#app');

packages/extension/src/ui/action/store/menu-store.ts

@@ -1,12 +1,11 @@
-import { init } from '@amplitude/analytics-browser';
 import { defineStore } from 'pinia'
-import { ref, onMounted } from 'vue';
+import { ref, } from 'vue';
 import MenuState from '@/libs/menu-state';
 
 export const useMenuStore = defineStore('useMenuStore', () => {
 
   const menuState = new MenuState();
-  const isExpanded = ref(true);
+  const isExpanded = ref(false);
 
   const setIsExpanded = async (value: boolean) => {
     isExpanded.value = value;