package-lock.json

@@ -1980,11 +1980,6 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
-    "@types/video.js": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.3.tgz",
-      "integrity": "sha512-yAb46+4A0dKFxOQRVLoLyfC/S/BmHLE10MxPXt/t88+7R4GWLHosHelVtYpKBRykjptdkqfQXNRXoQzDeKm6MA=="
-    },
     "@types/webpack-sources": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.5.tgz",

src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.html

@@ -76,7 +76,7 @@
     tokens. Next payout in
     <span>{{ nextPayout | timediff }}</span> (Daily at 2:00am UTC)
   </div>
-  <m-walletModal *ngIf="showModal" (closeModal)="showModal = false">
+  <m-walletModal [showModal]="showModal" (closeModal)="showModal = false">
     <m-walletOnchainTransfer
       [offchainBalance]="offchainBalance.total"
       [onchainAddress]="wallet.onchain.address"

src/app/modules/wallet/v2/modal/modal.component.html

-<div class="m-walletModal__backdrop"></div>
-<div class="m-walletModal__close" (click)="clickedClose()">
-  <i class="material-icons">close</i>
-</div>
-<div class="m-walletModal">
-  <div class="m-walletModal__content">
-    <ng-content></ng-content>
+<div *ngIf="_showModal" class="m-walletModal__container">
+  <div class="m-walletModal__backdrop"></div>
+  <div class="m-walletModal__close" (click)="close()">
+    <i class="material-icons">close</i>
+  </div>
+  <div class="m-walletModal" (click)="clickedModal($event)">
+    <div class="m-walletModal__content">
+      <ng-content></ng-content>
+    </div>
   </div>
 </div>

src/app/modules/wallet/v2/modal/modal.component.scss

 m-walletModal {
-  display: block;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  overflow: scroll;
-  z-index: 9999999;
+  .m-walletModal__container {
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    overflow: scroll;
+    z-index: 9999999;
+  }
 
   .m-walletModal__backdrop {
     position: fixed;
@@ -82,8 +84,8 @@ m-walletModal {
     position: fixed;
     height: 53px;
     width: 53px;
-    right: 8px;
-    top: 8px;
+    right: 25px;
+    top: 25px;
     padding: 4px;
     display: inline-block;
     border-radius: 50%;
@@ -92,7 +94,7 @@ m-walletModal {
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     @include m-theme() {
       background-color: themed($m-white);
-      box-shadow: 0 0 15px 0 rgba(themed($m-black), 0.2);
+      box-shadow: 0 0 15px 0 rgba(themed($m-black), 0.25);
     }
     i {
       position: absolute;

src/app/modules/wallet/v2/modal/modal.component.ts

 import {
   Component,
   Output,
+  Input,
   EventEmitter,
-  AfterViewInit,
   OnDestroy,
+  HostListener,
 } from '@angular/core';
 
 @Component({
   selector: 'm-walletModal',
   templateUrl: './modal.component.html',
 })
-export class WalletModalComponent implements AfterViewInit, OnDestroy {
+export class WalletModalComponent implements OnDestroy {
+  showModalTimeout: any = null;
+  justOpened = true;
+  public _showModal = false;
+  @Input()
+  public set showModal(val: boolean) {
+    this._showModal = val;
+    if (val) {
+      this.show();
+    }
+  }
   @Output() closeModal: EventEmitter<any> = new EventEmitter();
-  // root;
+
   constructor() {}
 
-  ngAfterViewInit() {
+  show() {
     if (document && document.body) {
+      this.justOpened = true;
       document.body.classList.add('m-overlay-modal--shown--no-scroll');
+      // Prevent dismissal of modal when it's just been opened
+      this.showModalTimeout = setTimeout(() => {
+        this.justOpened = false;
+      }, 20);
     }
+  }
 
-    // if (!this.root && document && document.body) {
-    //   this.root = document.body;
-    // }
-    // if (this.root) {
-    //   this.root.classList.add('m-overlay-modal--shown');
-    //   // document.body.classList.add('m-overlay-modal--shown--no-scroll');
-    // }
+  // * MODAL DISMISSAL * --------------------------------------------------------------------------
+  // Dismiss modal when backdrop is clicked and modal is open
+  @HostListener('document:click', ['$event'])
+  clickedBackdrop($event) {
+    if (this._showModal && !this.justOpened) {
+      $event.preventDefault();
+      $event.stopPropagation();
+      this.close();
+    }
   }
-  ngOnDestroy() {
-    document.body.classList.remove('m-overlay-modal--shown--no-scroll');
+
+  // Don't dismiss modal if click somewhere other than backdrop
+  clickedModal($event) {
+    $event.stopPropagation();
   }
 
-  clickedClose() {
+  close() {
     document.body.classList.remove('m-overlay-modal--shown--no-scroll');
-
-    // if (this.root) {
-    //   this.root.classList.remove('m-overlay-modal--shown');
-    //   document.body.classList.remove('m-overlay-modal--shown--no-scroll');
-    // }
     this.closeModal.emit();
   }
+  ngOnDestroy() {
+    if (this.showModalTimeout) {
+      clearTimeout(this.showModalTimeout);
+    }
+    this.close();
+  }
 }

src/app/modules/wallet/v2/token-onboarding/token-onboarding.component.html

@@ -29,7 +29,7 @@
     </div>
   </div>
 </div>
-<m-walletModal *ngIf="showModal" (closeModal)="showModal = false">
+<m-walletModal [showModal]="showModal" (closeModal)="showModal = false">
   <m-walletPhoneVerification
     class="m-walletTokenOnboardingModal__view--verifyPhone"
     *ngIf="activeStep === 'phone'"