feat: handle commit tx

apps/ui/src/components/Layout/App.vue

@@ -218,7 +218,7 @@ router.afterEach(() => {
       v-if="uiStore.safeModal !== null"
       :open="uiStore.safeModal !== null"
       :type="uiStore.safeModal.type"
-      :show-verifier-link="false"
+      :show-verifier-link="uiStore.safeModal.showVerifierLink"
       :messages="{
         title: 'Confirm proposal in Safe app',
         subtitle: 'Go back to Safe app to confirm your proposal'

apps/ui/src/composables/useActions.ts

@@ -62,14 +62,19 @@ export function useActions() {
   ) {
     if (envelope !== null) return false;
 
-    // TODO: this should determine differnet types
-    uiStore.openSafeModal(safeAppContext);
+    uiStore.openSafeModal({
+      type: safeAppContext,
+      showVerifierLink: false
+    });
 
-    // uiStore.addNotification('success', 'Transaction set up.');
     return true;
   }
 
-  async function handleCommitEnvelope(envelope: any, networkId: NetworkID) {
+  async function handleCommitEnvelope(
+    envelope: any,
+    networkId: NetworkID,
+    safeAppContext: 'vote' | 'propose' | 'transaction'
+  ) {
     // TODO: it should work with WalletConnect, should be done before L1 transaction is broadcasted
     const network = getNetwork(networkId);
 
@@ -88,10 +93,17 @@ export function useActions() {
         );
       }
 
-      uiStore.addNotification(
-        'success',
-        'Transaction set up. It will be processed once received on L2 network automatically.'
-      );
+      if (envelope.signatureData.commitTxId) {
+        uiStore.addNotification(
+          'success',
+          'Transaction set up. It will be processed once received on L2 network automatically.'
+        );
+      } else {
+        uiStore.openSafeModal({
+          type: safeAppContext,
+          showVerifierLink: true
+        });
+      }
 
       return true;
     }
@@ -114,7 +126,15 @@ export function useActions() {
     if (handleSafeEnvelope(envelope, opts.safeAppContext ?? 'transaction')) {
       return null;
     }
-    if (await handleCommitEnvelope(envelope, networkId)) return null;
+    if (
+      await handleCommitEnvelope(
+        envelope,
+        networkId,
+        opts.safeAppContext ?? 'transaction'
+      )
+    ) {
+      return null;
+    }
 
     let hash;
     // TODO: unify send/soc to both return txHash under same property

apps/ui/src/stores/ui.ts

@@ -6,6 +6,7 @@ import { NetworkID, NotificationType } from '@/types';
 type SafeModal = {
   id: string;
   type: 'vote' | 'propose' | 'transaction';
+  showVerifierLink: boolean;
 };
 
 type Notification = {
@@ -38,8 +39,8 @@ export const useUiStore = defineStore('ui', {
     async toggleSidebar() {
       this.sideMenuOpen = !this.sideMenuOpen;
     },
-    openSafeModal(type: SafeModal['type']) {
-      this.safeModal = { id: crypto.randomUUID(), type };
+    openSafeModal(data: Omit<SafeModal, 'id'>) {
+      this.safeModal = { id: crypto.randomUUID(), ...data };
     },
     addNotification(type: NotificationType, message: string, timeout = 5000) {
       const id = crypto.randomUUID();