feat(common): move confirmation modal to his own store, and add 'onClosed' event

app/components/Common/ConfirmationModal.vue

@@ -4,7 +4,7 @@ import Buttons from "./Buttons.vue";
 const { onRender } = useScreen();
 
 const { assets } = useAssets();
-const { close, state } = useConfirmationModal();
+const confirmationModal = useConfirmationModal();
 
 const BG_WIDTH = assets.common.confirmationModal.width;
 const BG_HEIGHT = assets.common.confirmationModal.height;
@@ -17,22 +17,22 @@ const BOTTOM_BAR_HEIGHT = 24;
 const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT;
 
 const handleActivateA = () => {
-  state.value.onConfirm?.();
-  close();
+  confirmationModal.onConfirm?.();
+  confirmationModal.close();
 };
 
 const handleActivateB = () => {
-  close();
+  confirmationModal.close();
 };
 
 onRender((ctx) => {
-  if (!state.value.isVisible) return;
+  if (!confirmationModal.isVisible) return;
 
   ctx.beginPath();
   ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT);
   ctx.clip();
 
-  ctx.translate(0, state.value.offsetY);
+  ctx.translate(0, confirmationModal.offsetY);
 
   ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);
 
@@ -40,18 +40,18 @@ onRender((ctx) => {
   ctx.textBaseline = "top";
   ctx.fillStyle = "#ffffff";
 
-  fillTextCentered(ctx, state.value.text, BG_X, TEXT_Y, BG_WIDTH);
+  fillTextCentered(ctx, confirmationModal.text, BG_X, TEXT_Y, BG_WIDTH);
 }, 100);
 
 onUnmounted(() => {
-  close();
+  confirmationModal.close();
 });
 </script>
 
 <template>
   <Buttons
-    v-if="state.onConfirm"
-    :y-offset="state.modalButtonsYOffset"
+    v-if="confirmationModal.onConfirm"
+    :y-offset="confirmationModal.modalButtonsYOffset"
     b-label="Cancel"
     a-label="Confirm"
     @activate-a="handleActivateA"