diff --git a/ui/src/app/modals/action-success/action-success.module.ts b/ui/src/app/modals/action-success/action-success.module.ts
new file mode 100644
index 000000000..eb4f2284a
--- /dev/null
+++ b/ui/src/app/modals/action-success/action-success.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { ActionSuccessPage } from './action-success.page'
+import { SharingModule } from 'src/app/modules/sharing.module'
+import { FormsModule } from '@angular/forms'
+import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
+import { QrCodeModule } from 'ng-qrcode'
+
+@NgModule({
+ declarations: [ActionSuccessPage],
+ imports: [
+ CommonModule,
+ IonicModule,
+ FormsModule,
+ SharingModule,
+ QrCodeModule,
+ ],
+ exports: [ActionSuccessPage],
+})
+export class ActionSuccessPageModule { }
diff --git a/ui/src/app/modals/action-success/action-success.page.html b/ui/src/app/modals/action-success/action-success.page.html
new file mode 100644
index 000000000..e989dd049
--- /dev/null
+++ b/ui/src/app/modals/action-success/action-success.page.html
@@ -0,0 +1,36 @@
+
+
+ {{ header }}
+
+
+
+
+
+
{{ message }}
+
+
+
+ {{ value }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Close
+
+
+
+
+
diff --git a/ui/src/app/modals/action-success/action-success.page.scss b/ui/src/app/modals/action-success/action-success.page.scss
new file mode 100644
index 000000000..8b37c91b4
--- /dev/null
+++ b/ui/src/app/modals/action-success/action-success.page.scss
@@ -0,0 +1,11 @@
+.close-button {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100px;
+}
+
+.main-content {
+ color: var(--ion-color-dark);
+}
\ No newline at end of file
diff --git a/ui/src/app/modals/action-success/action-success.page.ts b/ui/src/app/modals/action-success/action-success.page.ts
new file mode 100644
index 000000000..4d9015cac
--- /dev/null
+++ b/ui/src/app/modals/action-success/action-success.page.ts
@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core'
+import { ModalController, ToastController } from '@ionic/angular'
+import { QRComponent } from 'src/app/components/qr/qr.component'
+import { copyToClipboard } from 'src/app/util/web.util'
+
+@Component({
+ selector: 'action-success',
+ templateUrl: './action-success.page.html',
+ styleUrls: ['./action-success.page.scss'],
+})
+export class ActionSuccessPage {
+ @Input() version: string
+ @Input() header: string
+ @Input() message: string
+ @Input() value: string
+ @Input() qr: boolean = false
+ @Input() copyable: boolean = false
+
+ constructor (
+ private readonly modalCtrl: ModalController,
+ private readonly toastCtrl: ToastController,
+ ) { }
+
+ ngOnInit () {
+ console.log(this.qr)
+ }
+
+ async copy (address: string) {
+ let message = ''
+ await copyToClipboard(address || '')
+ .then(success => { message = success ? 'copied to clipboard!' : 'failed to copy'})
+
+ const toast = await this.toastCtrl.create({
+ header: message,
+ position: 'bottom',
+ duration: 1000,
+ })
+ await toast.present()
+ }
+
+ async dismiss () {
+ return this.modalCtrl.dismiss()
+ }
+}
diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts b/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts
index 2185092b2..ec80535f7 100644
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts
@@ -7,6 +7,7 @@ import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
import { SharingModule } from 'src/app/modules/sharing.module'
import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
import { AppRestoreComponentModule } from 'src/app/modals/app-restore/app-restore.component.module'
+import { ActionSuccessPageModule } from 'src/app/modals/action-success/action-success.module'
const routes: Routes = [
{
@@ -24,6 +25,7 @@ const routes: Routes = [
SharingModule,
GenericFormPageModule,
AppRestoreComponentModule,
+ ActionSuccessPageModule,
],
declarations: [
AppActionsPage,
diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
index eb76edb78..1f138e5c7 100644
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -11,6 +11,7 @@ import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { AppRestoreComponent } from 'src/app/modals/app-restore/app-restore.component'
import { isEmptyObject } from 'src/app/util/misc.util'
+import { ActionSuccessPage } from 'src/app/modals/action-success/action-success.page'
@Component({
selector: 'app-actions',
@@ -157,20 +158,21 @@ export class AppActionsPage {
'action-id': actionId,
input,
})
-
- const successAlert = await this.alertCtrl.create({
- header: 'Execution Complete',
- message: res.message.split('\n').join(''),
- buttons: [
- {
- text: 'Ok',
- role: 'cancel',
- cssClass: 'enter-click',
- },
- ],
+ this.modalCtrl.dismiss()
+ // console.log('action res', res)
+ const successModal = await this.modalCtrl.create({
+ component: ActionSuccessPage,
+ cssClass: res.qr ? 'action-success-modal-qr' : 'action-success-modal',
+ componentProps: {
+ header: 'Execution Complete',
+ message: res.message,
+ value: res.value,
+ qr: res.qr,
+ copyable: res.copyable,
+ },
})
- setTimeout(() => successAlert.present(), 400)
+ setTimeout(() => successModal.present(), 400)
} catch (e) {
this.errToast.present(e)
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 25ad70771..596e4757d 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -187,6 +187,24 @@ ion-button {
}
}
+.action-success-modal {
+ .modal-wrapper {
+ width: 320px !important;
+ height: 320px !important;
+ top: unset !important;
+ left: unset !important;
+ }
+}
+
+.action-success-modal-qr {
+ .modal-wrapper {
+ width: 320px !important;
+ height: 450px !important;
+ top: unset !important;
+ left: unset !important;
+ }
+}
+
.modal-wrapper {
position: absolute;
height: 90% !important;