From 1b499977529d4dc8677ff72decd22af7282cf3f9 Mon Sep 17 00:00:00 2001
From: Abyscuit <36307949+Abyscuit@users.noreply.github.com>
Date: Tue, 6 Dec 2022 12:42:51 -0800
Subject: [PATCH 1/2] devop: update mew connect link

---
 src/connectWindow/designTemplates/popupWindowModal.html | 2 +-
 src/connectWindow/popupWindowDesign.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/connectWindow/designTemplates/popupWindowModal.html b/src/connectWindow/designTemplates/popupWindowModal.html
index e5ac7fee..563260ae 100644
--- a/src/connectWindow/designTemplates/popupWindowModal.html
+++ b/src/connectWindow/designTemplates/popupWindowModal.html
@@ -400,7 +400,7 @@
               <div class="mew-bottom">
                 Powered by
                 <a
-                  href="https://myetherwallet.github.io/MEWconnect-Protocol-Documentation/"
+                  href="https://mewconnect.myetherwallet.com/"
                   target="_blank"
                   id="proto-link"
                   class="bottom-link"
diff --git a/src/connectWindow/popupWindowDesign.js b/src/connectWindow/popupWindowDesign.js
index e5af24ed..2039f8fb 100644
--- a/src/connectWindow/popupWindowDesign.js
+++ b/src/connectWindow/popupWindowDesign.js
@@ -389,7 +389,7 @@ const htmlDesign = (
 
         </div>
         <div class="mew-bottom">
-          Powered by <a href="https://myetherwallet.github.io/MEWconnect-Protocol-Documentation/" target="_blank" id="proto-link" class="bottom-link">MEWconnect protocol</a> <br />
+          Powered by <a href="https://mewconnect.myetherwallet.com/" target="_blank" id="proto-link" class="bottom-link">MEWconnect protocol</a> <br />
           brought to you by <a href="https://www.myetherwallet.com/" target="_blank" id="mew-link" class="bottom-link">MyEtherWallet</a>
         </div>
       </div>

From 44e096e81115e3a3d33295f10594479cb4b1661d Mon Sep 17 00:00:00 2001
From: Abyscuit <36307949+Abyscuit@users.noreply.github.com>
Date: Tue, 6 Dec 2022 12:45:35 -0800
Subject: [PATCH 2/2] chore: update build

---
 dist/cjs/index.js | 2 +-
 dist/esm/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index 2088a8ed..2a267757 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -2448,7 +2448,7 @@ var icon = img;
 var cssStyles = "\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');\n\n      .outer-container-mew-modal {\n        font-family: 'Roboto', sans-serif;\n        box-sizing: border-box;\n        bottom: 0;\n        color: #050f19;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        left: 0;\n        position: absolute;\n        right: 0;\n        text-align: center;\n        top: 0;\n        min-width: 450px;\n        max-width: 450px;\n        max-height: 558px;\n      }\n      \n      .container-mew-modal {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        text-align: center;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        flex-shrink: 0;\n        justify-content: center;\n        margin-left: auto;\n        margin-right: auto;\n        padding-bottom: 16px;\n        padding-top: 16px;\n        position: relative;\n        max-width: 450px;\n        max-height: 404px;\n        width: 100%;\n        top: 0;\n      }\n      \n      .upper-text {\n        position: relative;\n        left: 0;\n        bottom: 15px;\n      }\n      \n     .close-mew-modal{\n        position: absolute;\n        right: 16px !important;\n        top: 11px;\n        height: 36px;\n        width: 36px;\n        cursor: pointer;\n        padding: 7px;\n        z-index: 10;\n        border-radius: 50%;\n        transition: background-color 0.2s ease;\n        display: flex;\n        align-items: center;\n      }\n\n      .close-mew-modal:hover {\n        background-color: #ebebeb;\n      }\n\n      .close-mew-modal:active {\n        background-color: #bababa;\n      }\n\n      .close-mew-modal img {\n        opacity: 0.6;\n        height: 22px;\n        width: 22px;\n      }\n      \n      .mew-qr-code {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        height: 210px;\n        width: 210px;\n        margin-left: auto;\n        margin-right: auto;\n        text-align: center;\n        box-sizing: border-box;\n        background-color: white;\n        border-radius: 8px;\n        display: inline-block;\n      }\n      .mew-text-one {\n        min-width: 380px;\n        height: 30px;\n        color: rgba(0, 0, 0);\n        font-size: 24px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 500;\n        text-align: center;\n        letter-spacing: 0.3px;\n        line-height: 30px;\n        box-sizing: border-box;\n        padding-bottom: 8px;\n      }\n      .mew-text-two {\n        font-family: 'Roboto', sans-serif;\n        font-size: 14px;\n        color: rgba(0, 0, 0, 0.55);\n        font-weight: normal;\n        height: 16px;\n        letter-spacing: 0.17px;\n        text-align: center;\n        min-width: 265px;\n        padding-top: 8px;\n      }\n      .mew-list-style {\n        width: 278px;\n        height: 48px;\n        color: rgba(0, 0, 0, 0.55);\n        font-size: 12px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: normal;\n        letter-spacing: 0.15px;\n        line-height: 16px;\n        margin-left: 20px;\n        list-style-position: outside;\n        text-align: left;\n        position: relative;\n        left: 30px\n      }\n      .mew-list-style li {\n        margin-left: 0;\n        padding-left: 10px;\n      }\n      .mew-bottom-background {\n        position: absolute;\n        bottom: 0;\n        right: 64px;\n        border-radius: 0 0 16px 16px;\n        background: rgb(249, 250, 251);\n        text-align: center;\n        padding-top: 25px;\n        padding-bottom: 15px;\n        max-width: 450px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .bottom-container-mew-modal {\n        position: relative;\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        text-align: center;\n        box-sizing: border-box;\n        margin-bottom: 16px;\n        display: flex;\n        flex-direction: row;\n        flex-flow: row wrap;\n        justify-content: center;\n        left: -15px;\n        \n      }\n\n      .bottom-container-mew-modal > .left {\n        margin-right: 15px;\n      }\n\n      .bottom-container-mew-modal > .center {\n        margin-right: 15px;\n      }\n\n      .bottom-container-mew-modal > .right {\n        align-items: flex-start;\n        text-align: left;\n      }\n\n      .bottom-container-mew-modal > .left-img {\n        padding-right: 10px;\n      }\n\n      .bottom-container-mew-modal-text {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        box-sizing: border-box;\n        font-size: 13px;\n        margin: 0;\n        opacity: 0.5;\n        text-align: left;\n      }\n      .bottom-container-mew-modal-text-old {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        box-sizing: border-box;\n        font-size: 13px;\n        margin: 0;\n        opacity: 0.5;\n        padding: 16px;\n        text-align: center;\n      }\n\n      .spaceman-background {\n        background-color: white;\n        border-radius: 10px;\n      }\n\n      p {\n        margin: 0;\n        padding-bottom: 5px;\n      }\n\n      .mew-bottom {\n        color: rgba(0, 0, 0, 0.55);\n        font-size: 12px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: lighter;\n        letter-spacing: 0.15px;\n      }\n      \n      .bottom-link {\n      text-decoration: none;\n       color: rgba(5, 192, 165);\n       cursor: pointer;\n      }\n      \n      #refresh-container-mew-modal {\n      background: #33c7b0;\n      border-radius: 5px;\n      padding: 5px;\n      }\n      \n      #refresh-container-mew-modal:hover {\n      background: #238677;\n      }\n\n      .refreshIcon {\n        padding-top: 5px;\n        justify-content: center;\n        margin-left: auto;\n        margin-right: auto;\n        cursor: pointer;\n        color: #fffff;\n      }\n\n      .mew-hidden {\n        display: none;\n      }\n      \n      .mew-get-text {\n        width: 265px;\n        height: 16px;\n        color: rgb(0, 0, 0);\n        font-size: 14px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: normal;\n        letter-spacing: 0.17px;\n      }\n      \n      .mew-camera-icon {\n          opacity: 0.54;\n          position: relative;\n          bottom: -2px;\n          height: 14px;\n          width: 14px;\n        }\n        \n        #mew-google-link:hover {\n        cursor: pointer;\n        }\n        \n        #mew-apple-link:hover {\n        cursor: pointer;\n        }\n        \n        .mew-warn-color {\n        color: orange;\n        }\n        \n        .loader-mew,\n        .loader-mew:after {\n          border-radius: 50%;\n          width: 10em;\n          height: 10em;\n        }\n        .loader-mew {\n          margin: 20px auto;\n          font-size: 10px;\n          position: relative;\n          text-indent: -9999em;\n          border-top: 1em solid rgba(166,183,183, 0.2);\n          border-right: 1em solid rgba(166,183,183, 0.2);\n          border-bottom: 1em solid rgba(166,183,183, 0.2);\n          border-left: 1em solid rgba(8, 165, 178, 1);\n          -webkit-transform: translateZ(0);\n          -ms-transform: translateZ(0);\n          transform: translateZ(0);\n          -webkit-animation: load8 1.1s infinite linear;\n          animation: load8 1.1s infinite linear;\n        }\n        @-webkit-keyframes load8 {\n          0% {\n            -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n          }\n          100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n          }\n        }\n        @keyframes load8 {\n          0% {\n            -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n          }\n          100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n          }\n        }\n    ";
 
 var htmlDesign = function htmlDesign(refresh, image, playStore, appStore, camera, iconImage, iosLink, androidLink) {
-  return "\n    <div class=\"outer-container-mew-modal\">\n      <div class=\"close-mew-modal\" id=\"close-mew-modal\" aria-label=\"close modal\" data-close>\n          <img src=\"".concat(iconImage, "\" />\n      </div>\n      <div class=\"container-mew-modal\">\n      <div class=\"upper-text\">\n\n        <p class=\"mew-text-one\">Connect to MEW&nbsp;wallet app</p>\n        <p class=\"mew-text-two\">Scan this code to connect</p>\n       </div>\n        <div id=\"qr-failure\"></div>\n        <div id=\"qr-code-connecting-mew\" class=\"mew-hidden\"><div class=\"loader-mew\"></div><h4>Connecting...</h4> Creating encrypted peer-to-peer connection </div>\n        <div id=\"qr-code-display-container-mew\" class=\"mew-qr-code\">\n          <canvas id=\"canvas-for-mewconnect-qr-code\"></canvas>\n        </div>\n        <div id=\"refresh-container\" class=\"refreshIcon mew-hidden\">\n          Try Again <img id=\"refresh\" src=\"").concat(refresh, "\" />\n        </div>\n\n        <ol class=\"mew-list-style\">\n          <li>Open MEW wallet app on your mobile device</li>\n          <li class=\"with-image\">Click <img class=\"mew-camera-icon\" src=\"").concat(camera, "\"> icon in the top right corner</li>\n          <li>Scan this code to connect</li>\n        </ol>\n      </div>\n      <div class=\"mew-bottom-background\">\n        <div class=\"bottom-container-mew-modal\">\n          <div class=\"left\">\n            <img\n              class=\"spaceman-background\"\n              src=\"").concat(image, "\"\n              height=\"58\"\n              width=\"58\"\n            />\n          </div>\n          <div class=\"center\">\n            <div class=\"right\">\n              <p class=\"mew-get-text\">Don't have MEW&nbsp;wallet app?</p>\n              <p id=\"popupsBlocked\" class=\"mew-warn-color\"></p>\n                      <a href=\"").concat(iosLink, "\" target=\"_blank\" id=\"appStore\">               <img\n                  id=\"mew-apple-link\"\n                  class=\"left-img\"\n                  src=\"").concat(appStore, "\"\n                  height=\"40\"\n                  width=\"120\"\n                /></a>\n\n                      <a href=\"").concat(androidLink, "\" target=\"_blank\" id=\"playStore\">                <img\n                  id=\"mew-google-link\"\n                  src=\"").concat(playStore, "\"\n                  height=\"40\"\n                  width=\"135\"\n                /></a>\n\n\n\n            </div>\n          </div>\n\n        </div>\n        <div class=\"mew-bottom\">\n          Powered by <a href=\"https://myetherwallet.github.io/MEWconnect-Protocol-Documentation/\" target=\"_blank\" id=\"proto-link\" class=\"bottom-link\">MEWconnect protocol</a> <br />\n          brought to you by <a href=\"https://www.myetherwallet.com/\" target=\"_blank\" id=\"mew-link\" class=\"bottom-link\">MyEtherWallet</a>\n        </div>\n      </div>\n    </div>\n\n");
+  return "\n    <div class=\"outer-container-mew-modal\">\n      <div class=\"close-mew-modal\" id=\"close-mew-modal\" aria-label=\"close modal\" data-close>\n          <img src=\"".concat(iconImage, "\" />\n      </div>\n      <div class=\"container-mew-modal\">\n      <div class=\"upper-text\">\n\n        <p class=\"mew-text-one\">Connect to MEW&nbsp;wallet app</p>\n        <p class=\"mew-text-two\">Scan this code to connect</p>\n       </div>\n        <div id=\"qr-failure\"></div>\n        <div id=\"qr-code-connecting-mew\" class=\"mew-hidden\"><div class=\"loader-mew\"></div><h4>Connecting...</h4> Creating encrypted peer-to-peer connection </div>\n        <div id=\"qr-code-display-container-mew\" class=\"mew-qr-code\">\n          <canvas id=\"canvas-for-mewconnect-qr-code\"></canvas>\n        </div>\n        <div id=\"refresh-container\" class=\"refreshIcon mew-hidden\">\n          Try Again <img id=\"refresh\" src=\"").concat(refresh, "\" />\n        </div>\n\n        <ol class=\"mew-list-style\">\n          <li>Open MEW wallet app on your mobile device</li>\n          <li class=\"with-image\">Click <img class=\"mew-camera-icon\" src=\"").concat(camera, "\"> icon in the top right corner</li>\n          <li>Scan this code to connect</li>\n        </ol>\n      </div>\n      <div class=\"mew-bottom-background\">\n        <div class=\"bottom-container-mew-modal\">\n          <div class=\"left\">\n            <img\n              class=\"spaceman-background\"\n              src=\"").concat(image, "\"\n              height=\"58\"\n              width=\"58\"\n            />\n          </div>\n          <div class=\"center\">\n            <div class=\"right\">\n              <p class=\"mew-get-text\">Don't have MEW&nbsp;wallet app?</p>\n              <p id=\"popupsBlocked\" class=\"mew-warn-color\"></p>\n                      <a href=\"").concat(iosLink, "\" target=\"_blank\" id=\"appStore\">               <img\n                  id=\"mew-apple-link\"\n                  class=\"left-img\"\n                  src=\"").concat(appStore, "\"\n                  height=\"40\"\n                  width=\"120\"\n                /></a>\n\n                      <a href=\"").concat(androidLink, "\" target=\"_blank\" id=\"playStore\">                <img\n                  id=\"mew-google-link\"\n                  src=\"").concat(playStore, "\"\n                  height=\"40\"\n                  width=\"135\"\n                /></a>\n\n\n\n            </div>\n          </div>\n\n        </div>\n        <div class=\"mew-bottom\">\n          Powered by <a href=\"https://mewconnect.myetherwallet.com/\" target=\"_blank\" id=\"proto-link\" class=\"bottom-link\">MEWconnect protocol</a> <br />\n          brought to you by <a href=\"https://www.myetherwallet.com/\" target=\"_blank\" id=\"mew-link\" class=\"bottom-link\">MyEtherWallet</a>\n        </div>\n      </div>\n    </div>\n\n");
 };
 
 var noticetext = "\n\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');\n\n\n      div#Notifications.mew-hidden {\n        visibility: hidden;\n      }\n      \n      div#Notifications.mew-hidden {\n        visibility: hidden;\n      }\n\n      div#qrcodeError.shown {\n        visibility: visible;\n      }\n      \n      div#qrcodeError.mew-hidden {\n        visibility: hidden;\n      }\n      div#retry-button-mew.mew-hidden {\n        display: none;\n      }\n\n      #Notifications,\n      #Notifications * {\n\n        animation: none;\n        animation-delay: 0;\n        animation-direction: normal;\n        animation-duration: 0;\n        animation-fill-mode: none;\n        animation-iteration-count: 1;\n        animation-name: none;\n        animation-play-state: running;\n        animation-timing-function: ease;\n        backface-visibility: visible;\n        background: 0;\n        background-attachment: scroll;\n        background-clip: border-box;\n        background-color: transparent;\n        background-image: none;\n        background-origin: padding-box;\n        background-position: 0 0;\n        background-position-x: 0;\n        background-position-y: 0;\n        background-repeat: repeat;\n        background-size: auto auto;\n        border-collapse: separate;\n        border-image: none;\n        border-spacing: 0;\n        border-radius: 0;\n        border: medium none inherit;\n        bottom: auto;\n        box-shadow: none;\n        box-sizing: border-box;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        color: inherit;\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-rule-color: currentColor;\n        column-rule-style: none;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        cursor: auto;\n        direction: ltr;\n        display: inline;\n        empty-cells: show;\n        float: none;\n        font-family: 'Roboto', sans-serif;\n        font-size: medium;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        line-height: normal;\n        list-style: disc outside none;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 0;\n        outline: invert none medium;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: inherit;\n        text-align-last: auto;\n        text-decoration: none;\n        text-decoration-color: inherit;\n        text-decoration-line: none;\n        text-decoration-style: solid;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-style: flat;\n        transition: none;\n        transition-delay: 0s;\n        transition-duration: 0s;\n        transition-property: none;\n        transition-timing-function: ease;\n        unicode-bidi: normal;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 0;\n        width: auto;\n        word-spacing: normal;\n        z-index: 9999999999;\n        all: initial;\n        all: unset;\n\n      }\n\n      #Notifications * {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 500;\n        box-sizing: border-box;\n      }\n\n      #Notifications {\n        position: fixed;\n        top: 0;\n        right: 0;\n        text-align: right;\n        z-index: 2147483647;\n      }\n\n      #Notifications style {\n        display: none;\n      }\n\n      #Notifications .Notification {\n        display: block;\n        margin: 8px 16px 0 16px;\n      }\n\n      #Notifications .NotificationBox {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        color: black;\n        margin: 0;\n        font-size: 14px;\n        box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06),\n        0px 0px 8px rgba(0, 0, 0, 0.04);\n        border-radius: 16px;\n        transition: opacity 0.25s, transform 0.25s;\n        opacity: 0;\n        transform: translateX(25%);\n        text-align: left;\n        overflow: hidden;\n      }\n\n      #Notifications\n      .Notificationshow\n      .NotificationBox {\n        opacity: 1;\n        transform: translateX(0);\n      }\n\n      #Notifications .NotificationContent {\n        background-color: rgb(249, 250, 251);\n        display: flex;\n        flex-direction: row;\n        padding: 8px 8px 8px 16px;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n      }\n\n      #Notifications .NotificationMessage {\n        display: block;\n        color: black;\n        line-height: 1.5;\n      }\n\n      #Notifications .NotificationChevron {\n        display: block;\n        margin-left: 8px;\n        transition: transform 0.05s;\n      }\n\n      #Notifications .NotificationProgressBar {\n        display: block;\n        height: 2px;\n        position: relative;\n      }\n\n      #Notifications .NotificationProgressBar::before {\n        display: block;\n        position: absolute;\n        content: \"\";\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background-image: linear-gradient(\n          to right,\n          rgba(22, 82, 240, 0) 0%,\n          rgba(51, 199, 176, 1) 100%\n        );\n        animation: MewNotificationProgressBar 2s linear infinite;\n      }\n\n      @keyframes MewNotificationProgressBar {\n        0% {\n          left: 0;\n          width: 0%;\n          background-image: linear-gradient(\n            to right,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        25% {\n          left: 0;\n          width: 100%;\n        }\n        50% {\n          left: 100%;\n          width: 0%;\n          background-image: linear-gradient(\n            to right,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        50.01% {\n          background-image: linear-gradient(\n            to left,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        75% {\n          left: 0;\n          width: 100%;\n        }\n        100% {\n          left: 0;\n          width: 0%;\n          background-image: linear-gradient(\n            to left,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationProgressBar {\n        margin-bottom: -1px;\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationChevron {\n        transform: rotateZ(180deg);\n      }\n\n      #Notifications .NotificationActions {\n        display: none;\n        flex-direction: column;\n        border-top: 1px solid #f5f7f8;\n        padding: 8px 16px;\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationActions {\n        display: flex;\n      }\n\n      #Notifications .NotificationAction {\n        color: #888;\n        margin: 8px 0;\n      }\n\n      #Notifications .NotificationButtonInfo {\n        margin: 0 8px 0 0;\n      }\n\n      #Notifications .NotificationButton {\n        color: #33c7b0;\n        -webkit-text-fill-color: #33c7b0;\n        cursor: pointer;\n        display: inline;\n        margin: 0;\n        padding: 0;\n        -webkit-appearance: none;\n        transition: opacity 0.25s;\n      }\n\n      #Notifications .NotificationButton:active {\n        opacity: 0.6;\n      }\n\n      #Notifications .NotificationContent .spaceman-background {\n        background-color: rgb(249, 250, 251);\n        border-radius: 10px;\n        height: 50px;\n        width: 50px;\n      }\n      ";
diff --git a/dist/esm/index.js b/dist/esm/index.js
index ec67e42a..9d025f27 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -2425,7 +2425,7 @@ var icon = img;
 var cssStyles = "\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');\n\n      .outer-container-mew-modal {\n        font-family: 'Roboto', sans-serif;\n        box-sizing: border-box;\n        bottom: 0;\n        color: #050f19;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        left: 0;\n        position: absolute;\n        right: 0;\n        text-align: center;\n        top: 0;\n        min-width: 450px;\n        max-width: 450px;\n        max-height: 558px;\n      }\n      \n      .container-mew-modal {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        text-align: center;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        flex-shrink: 0;\n        justify-content: center;\n        margin-left: auto;\n        margin-right: auto;\n        padding-bottom: 16px;\n        padding-top: 16px;\n        position: relative;\n        max-width: 450px;\n        max-height: 404px;\n        width: 100%;\n        top: 0;\n      }\n      \n      .upper-text {\n        position: relative;\n        left: 0;\n        bottom: 15px;\n      }\n      \n     .close-mew-modal{\n        position: absolute;\n        right: 16px !important;\n        top: 11px;\n        height: 36px;\n        width: 36px;\n        cursor: pointer;\n        padding: 7px;\n        z-index: 10;\n        border-radius: 50%;\n        transition: background-color 0.2s ease;\n        display: flex;\n        align-items: center;\n      }\n\n      .close-mew-modal:hover {\n        background-color: #ebebeb;\n      }\n\n      .close-mew-modal:active {\n        background-color: #bababa;\n      }\n\n      .close-mew-modal img {\n        opacity: 0.6;\n        height: 22px;\n        width: 22px;\n      }\n      \n      .mew-qr-code {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        height: 210px;\n        width: 210px;\n        margin-left: auto;\n        margin-right: auto;\n        text-align: center;\n        box-sizing: border-box;\n        background-color: white;\n        border-radius: 8px;\n        display: inline-block;\n      }\n      .mew-text-one {\n        min-width: 380px;\n        height: 30px;\n        color: rgba(0, 0, 0);\n        font-size: 24px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 500;\n        text-align: center;\n        letter-spacing: 0.3px;\n        line-height: 30px;\n        box-sizing: border-box;\n        padding-bottom: 8px;\n      }\n      .mew-text-two {\n        font-family: 'Roboto', sans-serif;\n        font-size: 14px;\n        color: rgba(0, 0, 0, 0.55);\n        font-weight: normal;\n        height: 16px;\n        letter-spacing: 0.17px;\n        text-align: center;\n        min-width: 265px;\n        padding-top: 8px;\n      }\n      .mew-list-style {\n        width: 278px;\n        height: 48px;\n        color: rgba(0, 0, 0, 0.55);\n        font-size: 12px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: normal;\n        letter-spacing: 0.15px;\n        line-height: 16px;\n        margin-left: 20px;\n        list-style-position: outside;\n        text-align: left;\n        position: relative;\n        left: 30px\n      }\n      .mew-list-style li {\n        margin-left: 0;\n        padding-left: 10px;\n      }\n      .mew-bottom-background {\n        position: absolute;\n        bottom: 0;\n        right: 64px;\n        border-radius: 0 0 16px 16px;\n        background: rgb(249, 250, 251);\n        text-align: center;\n        padding-top: 25px;\n        padding-bottom: 15px;\n        max-width: 450px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .bottom-container-mew-modal {\n        position: relative;\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        text-align: center;\n        box-sizing: border-box;\n        margin-bottom: 16px;\n        display: flex;\n        flex-direction: row;\n        flex-flow: row wrap;\n        justify-content: center;\n        left: -15px;\n        \n      }\n\n      .bottom-container-mew-modal > .left {\n        margin-right: 15px;\n      }\n\n      .bottom-container-mew-modal > .center {\n        margin-right: 15px;\n      }\n\n      .bottom-container-mew-modal > .right {\n        align-items: flex-start;\n        text-align: left;\n      }\n\n      .bottom-container-mew-modal > .left-img {\n        padding-right: 10px;\n      }\n\n      .bottom-container-mew-modal-text {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        box-sizing: border-box;\n        font-size: 13px;\n        margin: 0;\n        opacity: 0.5;\n        text-align: left;\n      }\n      .bottom-container-mew-modal-text-old {\n        font-family: 'Roboto', sans-serif;\n        color: #050f19;\n        box-sizing: border-box;\n        font-size: 13px;\n        margin: 0;\n        opacity: 0.5;\n        padding: 16px;\n        text-align: center;\n      }\n\n      .spaceman-background {\n        background-color: white;\n        border-radius: 10px;\n      }\n\n      p {\n        margin: 0;\n        padding-bottom: 5px;\n      }\n\n      .mew-bottom {\n        color: rgba(0, 0, 0, 0.55);\n        font-size: 12px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: lighter;\n        letter-spacing: 0.15px;\n      }\n      \n      .bottom-link {\n      text-decoration: none;\n       color: rgba(5, 192, 165);\n       cursor: pointer;\n      }\n      \n      #refresh-container-mew-modal {\n      background: #33c7b0;\n      border-radius: 5px;\n      padding: 5px;\n      }\n      \n      #refresh-container-mew-modal:hover {\n      background: #238677;\n      }\n\n      .refreshIcon {\n        padding-top: 5px;\n        justify-content: center;\n        margin-left: auto;\n        margin-right: auto;\n        cursor: pointer;\n        color: #fffff;\n      }\n\n      .mew-hidden {\n        display: none;\n      }\n      \n      .mew-get-text {\n        width: 265px;\n        height: 16px;\n        color: rgb(0, 0, 0);\n        font-size: 14px;\n        font-family: 'Roboto', sans-serif;\n        font-weight: normal;\n        letter-spacing: 0.17px;\n      }\n      \n      .mew-camera-icon {\n          opacity: 0.54;\n          position: relative;\n          bottom: -2px;\n          height: 14px;\n          width: 14px;\n        }\n        \n        #mew-google-link:hover {\n        cursor: pointer;\n        }\n        \n        #mew-apple-link:hover {\n        cursor: pointer;\n        }\n        \n        .mew-warn-color {\n        color: orange;\n        }\n        \n        .loader-mew,\n        .loader-mew:after {\n          border-radius: 50%;\n          width: 10em;\n          height: 10em;\n        }\n        .loader-mew {\n          margin: 20px auto;\n          font-size: 10px;\n          position: relative;\n          text-indent: -9999em;\n          border-top: 1em solid rgba(166,183,183, 0.2);\n          border-right: 1em solid rgba(166,183,183, 0.2);\n          border-bottom: 1em solid rgba(166,183,183, 0.2);\n          border-left: 1em solid rgba(8, 165, 178, 1);\n          -webkit-transform: translateZ(0);\n          -ms-transform: translateZ(0);\n          transform: translateZ(0);\n          -webkit-animation: load8 1.1s infinite linear;\n          animation: load8 1.1s infinite linear;\n        }\n        @-webkit-keyframes load8 {\n          0% {\n            -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n          }\n          100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n          }\n        }\n        @keyframes load8 {\n          0% {\n            -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n          }\n          100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n          }\n        }\n    ";
 
 var htmlDesign = function htmlDesign(refresh, image, playStore, appStore, camera, iconImage, iosLink, androidLink) {
-  return "\n    <div class=\"outer-container-mew-modal\">\n      <div class=\"close-mew-modal\" id=\"close-mew-modal\" aria-label=\"close modal\" data-close>\n          <img src=\"".concat(iconImage, "\" />\n      </div>\n      <div class=\"container-mew-modal\">\n      <div class=\"upper-text\">\n\n        <p class=\"mew-text-one\">Connect to MEW&nbsp;wallet app</p>\n        <p class=\"mew-text-two\">Scan this code to connect</p>\n       </div>\n        <div id=\"qr-failure\"></div>\n        <div id=\"qr-code-connecting-mew\" class=\"mew-hidden\"><div class=\"loader-mew\"></div><h4>Connecting...</h4> Creating encrypted peer-to-peer connection </div>\n        <div id=\"qr-code-display-container-mew\" class=\"mew-qr-code\">\n          <canvas id=\"canvas-for-mewconnect-qr-code\"></canvas>\n        </div>\n        <div id=\"refresh-container\" class=\"refreshIcon mew-hidden\">\n          Try Again <img id=\"refresh\" src=\"").concat(refresh, "\" />\n        </div>\n\n        <ol class=\"mew-list-style\">\n          <li>Open MEW wallet app on your mobile device</li>\n          <li class=\"with-image\">Click <img class=\"mew-camera-icon\" src=\"").concat(camera, "\"> icon in the top right corner</li>\n          <li>Scan this code to connect</li>\n        </ol>\n      </div>\n      <div class=\"mew-bottom-background\">\n        <div class=\"bottom-container-mew-modal\">\n          <div class=\"left\">\n            <img\n              class=\"spaceman-background\"\n              src=\"").concat(image, "\"\n              height=\"58\"\n              width=\"58\"\n            />\n          </div>\n          <div class=\"center\">\n            <div class=\"right\">\n              <p class=\"mew-get-text\">Don't have MEW&nbsp;wallet app?</p>\n              <p id=\"popupsBlocked\" class=\"mew-warn-color\"></p>\n                      <a href=\"").concat(iosLink, "\" target=\"_blank\" id=\"appStore\">               <img\n                  id=\"mew-apple-link\"\n                  class=\"left-img\"\n                  src=\"").concat(appStore, "\"\n                  height=\"40\"\n                  width=\"120\"\n                /></a>\n\n                      <a href=\"").concat(androidLink, "\" target=\"_blank\" id=\"playStore\">                <img\n                  id=\"mew-google-link\"\n                  src=\"").concat(playStore, "\"\n                  height=\"40\"\n                  width=\"135\"\n                /></a>\n\n\n\n            </div>\n          </div>\n\n        </div>\n        <div class=\"mew-bottom\">\n          Powered by <a href=\"https://myetherwallet.github.io/MEWconnect-Protocol-Documentation/\" target=\"_blank\" id=\"proto-link\" class=\"bottom-link\">MEWconnect protocol</a> <br />\n          brought to you by <a href=\"https://www.myetherwallet.com/\" target=\"_blank\" id=\"mew-link\" class=\"bottom-link\">MyEtherWallet</a>\n        </div>\n      </div>\n    </div>\n\n");
+  return "\n    <div class=\"outer-container-mew-modal\">\n      <div class=\"close-mew-modal\" id=\"close-mew-modal\" aria-label=\"close modal\" data-close>\n          <img src=\"".concat(iconImage, "\" />\n      </div>\n      <div class=\"container-mew-modal\">\n      <div class=\"upper-text\">\n\n        <p class=\"mew-text-one\">Connect to MEW&nbsp;wallet app</p>\n        <p class=\"mew-text-two\">Scan this code to connect</p>\n       </div>\n        <div id=\"qr-failure\"></div>\n        <div id=\"qr-code-connecting-mew\" class=\"mew-hidden\"><div class=\"loader-mew\"></div><h4>Connecting...</h4> Creating encrypted peer-to-peer connection </div>\n        <div id=\"qr-code-display-container-mew\" class=\"mew-qr-code\">\n          <canvas id=\"canvas-for-mewconnect-qr-code\"></canvas>\n        </div>\n        <div id=\"refresh-container\" class=\"refreshIcon mew-hidden\">\n          Try Again <img id=\"refresh\" src=\"").concat(refresh, "\" />\n        </div>\n\n        <ol class=\"mew-list-style\">\n          <li>Open MEW wallet app on your mobile device</li>\n          <li class=\"with-image\">Click <img class=\"mew-camera-icon\" src=\"").concat(camera, "\"> icon in the top right corner</li>\n          <li>Scan this code to connect</li>\n        </ol>\n      </div>\n      <div class=\"mew-bottom-background\">\n        <div class=\"bottom-container-mew-modal\">\n          <div class=\"left\">\n            <img\n              class=\"spaceman-background\"\n              src=\"").concat(image, "\"\n              height=\"58\"\n              width=\"58\"\n            />\n          </div>\n          <div class=\"center\">\n            <div class=\"right\">\n              <p class=\"mew-get-text\">Don't have MEW&nbsp;wallet app?</p>\n              <p id=\"popupsBlocked\" class=\"mew-warn-color\"></p>\n                      <a href=\"").concat(iosLink, "\" target=\"_blank\" id=\"appStore\">               <img\n                  id=\"mew-apple-link\"\n                  class=\"left-img\"\n                  src=\"").concat(appStore, "\"\n                  height=\"40\"\n                  width=\"120\"\n                /></a>\n\n                      <a href=\"").concat(androidLink, "\" target=\"_blank\" id=\"playStore\">                <img\n                  id=\"mew-google-link\"\n                  src=\"").concat(playStore, "\"\n                  height=\"40\"\n                  width=\"135\"\n                /></a>\n\n\n\n            </div>\n          </div>\n\n        </div>\n        <div class=\"mew-bottom\">\n          Powered by <a href=\"https://mewconnect.myetherwallet.com/\" target=\"_blank\" id=\"proto-link\" class=\"bottom-link\">MEWconnect protocol</a> <br />\n          brought to you by <a href=\"https://www.myetherwallet.com/\" target=\"_blank\" id=\"mew-link\" class=\"bottom-link\">MyEtherWallet</a>\n        </div>\n      </div>\n    </div>\n\n");
 };
 
 var noticetext = "\n\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');\n\n\n      div#Notifications.mew-hidden {\n        visibility: hidden;\n      }\n      \n      div#Notifications.mew-hidden {\n        visibility: hidden;\n      }\n\n      div#qrcodeError.shown {\n        visibility: visible;\n      }\n      \n      div#qrcodeError.mew-hidden {\n        visibility: hidden;\n      }\n      div#retry-button-mew.mew-hidden {\n        display: none;\n      }\n\n      #Notifications,\n      #Notifications * {\n\n        animation: none;\n        animation-delay: 0;\n        animation-direction: normal;\n        animation-duration: 0;\n        animation-fill-mode: none;\n        animation-iteration-count: 1;\n        animation-name: none;\n        animation-play-state: running;\n        animation-timing-function: ease;\n        backface-visibility: visible;\n        background: 0;\n        background-attachment: scroll;\n        background-clip: border-box;\n        background-color: transparent;\n        background-image: none;\n        background-origin: padding-box;\n        background-position: 0 0;\n        background-position-x: 0;\n        background-position-y: 0;\n        background-repeat: repeat;\n        background-size: auto auto;\n        border-collapse: separate;\n        border-image: none;\n        border-spacing: 0;\n        border-radius: 0;\n        border: medium none inherit;\n        bottom: auto;\n        box-shadow: none;\n        box-sizing: border-box;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        color: inherit;\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-rule-color: currentColor;\n        column-rule-style: none;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        cursor: auto;\n        direction: ltr;\n        display: inline;\n        empty-cells: show;\n        float: none;\n        font-family: 'Roboto', sans-serif;\n        font-size: medium;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        line-height: normal;\n        list-style: disc outside none;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 0;\n        outline: invert none medium;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: inherit;\n        text-align-last: auto;\n        text-decoration: none;\n        text-decoration-color: inherit;\n        text-decoration-line: none;\n        text-decoration-style: solid;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-style: flat;\n        transition: none;\n        transition-delay: 0s;\n        transition-duration: 0s;\n        transition-property: none;\n        transition-timing-function: ease;\n        unicode-bidi: normal;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 0;\n        width: auto;\n        word-spacing: normal;\n        z-index: 9999999999;\n        all: initial;\n        all: unset;\n\n      }\n\n      #Notifications * {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 500;\n        box-sizing: border-box;\n      }\n\n      #Notifications {\n        position: fixed;\n        top: 0;\n        right: 0;\n        text-align: right;\n        z-index: 2147483647;\n      }\n\n      #Notifications style {\n        display: none;\n      }\n\n      #Notifications .Notification {\n        display: block;\n        margin: 8px 16px 0 16px;\n      }\n\n      #Notifications .NotificationBox {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        color: black;\n        margin: 0;\n        font-size: 14px;\n        box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06),\n        0px 0px 8px rgba(0, 0, 0, 0.04);\n        border-radius: 16px;\n        transition: opacity 0.25s, transform 0.25s;\n        opacity: 0;\n        transform: translateX(25%);\n        text-align: left;\n        overflow: hidden;\n      }\n\n      #Notifications\n      .Notificationshow\n      .NotificationBox {\n        opacity: 1;\n        transform: translateX(0);\n      }\n\n      #Notifications .NotificationContent {\n        background-color: rgb(249, 250, 251);\n        display: flex;\n        flex-direction: row;\n        padding: 8px 8px 8px 16px;\n        align-items: center;\n        user-select: none;\n        cursor: pointer;\n      }\n\n      #Notifications .NotificationMessage {\n        display: block;\n        color: black;\n        line-height: 1.5;\n      }\n\n      #Notifications .NotificationChevron {\n        display: block;\n        margin-left: 8px;\n        transition: transform 0.05s;\n      }\n\n      #Notifications .NotificationProgressBar {\n        display: block;\n        height: 2px;\n        position: relative;\n      }\n\n      #Notifications .NotificationProgressBar::before {\n        display: block;\n        position: absolute;\n        content: \"\";\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background-image: linear-gradient(\n          to right,\n          rgba(22, 82, 240, 0) 0%,\n          rgba(51, 199, 176, 1) 100%\n        );\n        animation: MewNotificationProgressBar 2s linear infinite;\n      }\n\n      @keyframes MewNotificationProgressBar {\n        0% {\n          left: 0;\n          width: 0%;\n          background-image: linear-gradient(\n            to right,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        25% {\n          left: 0;\n          width: 100%;\n        }\n        50% {\n          left: 100%;\n          width: 0%;\n          background-image: linear-gradient(\n            to right,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        50.01% {\n          background-image: linear-gradient(\n            to left,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n        75% {\n          left: 0;\n          width: 100%;\n        }\n        100% {\n          left: 0;\n          width: 0%;\n          background-image: linear-gradient(\n            to left,\n            rgba(22, 82, 240, 0) 0%,\n            rgba(51, 199, 176, 1) 100%\n          );\n        }\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationProgressBar {\n        margin-bottom: -1px;\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationChevron {\n        transform: rotateZ(180deg);\n      }\n\n      #Notifications .NotificationActions {\n        display: none;\n        flex-direction: column;\n        border-top: 1px solid #f5f7f8;\n        padding: 8px 16px;\n      }\n\n      #Notifications\n      .NotificationExpand\n      .NotificationActions {\n        display: flex;\n      }\n\n      #Notifications .NotificationAction {\n        color: #888;\n        margin: 8px 0;\n      }\n\n      #Notifications .NotificationButtonInfo {\n        margin: 0 8px 0 0;\n      }\n\n      #Notifications .NotificationButton {\n        color: #33c7b0;\n        -webkit-text-fill-color: #33c7b0;\n        cursor: pointer;\n        display: inline;\n        margin: 0;\n        padding: 0;\n        -webkit-appearance: none;\n        transition: opacity 0.25s;\n      }\n\n      #Notifications .NotificationButton:active {\n        opacity: 0.6;\n      }\n\n      #Notifications .NotificationContent .spaceman-background {\n        background-color: rgb(249, 250, 251);\n        border-radius: 10px;\n        height: 50px;\n        width: 50px;\n      }\n      ";