From 735d76b978d4c22a52dad0c56e5d675643e90a24 Mon Sep 17 00:00:00 2001
From: tolya-yanot <1449561+tolya-yanot@users.noreply.github.com>
Date: Sat, 26 Feb 2022 19:58:15 +0300
Subject: [PATCH] big UI update by @Zavtramen
 (https://github.com/Zavtramen/ton-wallet)

- check that amount + fee <= balance at send popup
- disable inputs autocomplete
- show loader after click buttons
- recovery words confirm screen
- animations
- back buttons
- alert css
- "Delete wallet" -> "Logout"
---
 src/assets/arrow.svg          |   7 +
 src/assets/lottie/confirm.tgs | Bin 0 -> 14815 bytes
 src/css/main.css              | 223 ++++++++++++++++++--
 src/index.html                | 345 ++++++++++++++++++-------------
 src/js/Controller.js          |  48 ++++-
 src/js/view/Utils.js          |  30 ++-
 src/js/view/View.js           | 371 +++++++++++++++++++++++++++++-----
 7 files changed, 800 insertions(+), 224 deletions(-)
 create mode 100644 src/assets/arrow.svg
 create mode 100644 src/assets/lottie/confirm.tgs

diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
new file mode 100644
index 0000000..00d62b6
--- /dev/null
+++ b/src/assets/arrow.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Path" x="0" y="0" width="34" height="34"></rect>
+        <path d="M19,5.5 L30,17 L19,28.5 M30,17 L2.5,17" id="Combined-Shape" stroke="#9c9b9b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/lottie/confirm.tgs b/src/assets/lottie/confirm.tgs
new file mode 100644
index 0000000000000000000000000000000000000000..3a35762f4e9f297ad38e0e804ad0807ea5afb4f2
GIT binary patch
literal 14815
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
F0syv6H8lVL

literal 0
HcmV?d00001

diff --git a/src/css/main.css b/src/css/main.css
index f773c54..3d5735e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -10,6 +10,11 @@ body.plugin {
     min-height: 600px;
 }
 
+body.disable-animations * {
+    transition-duration: 0s !important;
+    animation-duration: 0s !important;
+}
+
 .body-container {
     position: absolute;
     left: 0;
@@ -35,7 +40,7 @@ a, a:focus, a:active, a:after {
 input {
     width: 100%;
     border: none;
-    border-bottom: 1px solid #e7e7e7;
+    border-bottom: 1px solid transparent;
     height: 40px;
     margin-top: 10px;
     margin-bottom: 10px;
@@ -47,16 +52,27 @@ input {
     user-select: auto;
     -webkit-user-select: auto;
     -moz-user-select: auto;
+
+    background-image: linear-gradient(rgba(215, 77, 77, 0), rgba(215, 77, 77, 0)), linear-gradient(rgba(60, 164, 219, 0), rgba(60, 164, 219, 0)), linear-gradient(#e7e7e7, #e7e7e7);
+    background-size: 0% 1px, 0% 1px, 100% 1px;
+    background-position: bottom center;
+    background-repeat: no-repeat;
+    transition: 0.2s background-image, 0s 0.2s background-size;
 }
 
 input:focus {
-    border-bottom: 1px solid #3CA4DB;
+    background-image: linear-gradient(rgba(215, 77, 77, 0), rgba(215, 77, 77, 0)), linear-gradient(rgba(60, 164, 219, 1), rgba(60, 164, 219, 1)), linear-gradient(#e7e7e7, #e7e7e7);
+    background-size: 100% 1px, 100% 1px, 100% 1px;
+    transition: 0.2s background-image, 0.2s background-size;
 }
 
 input.error {
-    border-bottom: 1px solid #D74D4D;
+    background-image: linear-gradient(rgba(215, 77, 77, 1), rgba(215, 77, 77, 1)), linear-gradient(rgba(60, 164, 219, 0), rgba(60, 164, 219, 0)), linear-gradient(#e7e7e7, #e7e7e7);
+    background-size: 100% 1px, 100% 1px, 100% 1px;
+    transition: 0.2s background-image, 0.2s background-size;
 }
 
+
 ::-webkit-input-placeholder { /* Edge */
     color: #999999;
 }
@@ -119,6 +135,64 @@ button {
     background-color: #2E2F31;
 }
 
+.btn-loader {
+    pointer-events: none;
+}
+
+.btn-loader:after {
+    content: '';
+    position: absolute;
+    transform: translate(8px, 2px);
+    width: 8px;
+    height: 8px;
+    border: 3px solid white;
+    border-left: 3px solid transparent;
+    border-radius: 50%;
+    animation: loading-animation-spin 2s infinite linear;
+}
+
+.btn-lite.btn-loader:after {
+    transform: translate(6px, 3px);
+    width: 6px;
+    height: 6px;
+    border: 2px solid #3CA4DB;
+    border-left: 2px solid transparent;
+    animation: loading-animation-spin-small 2s infinite linear;
+}
+
+.btn-back {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    border: none;
+    background-color: transparent;
+    background-image: url("../assets/arrow.svg");
+    transform: scaleX(-1);
+    border-radius: 100%;
+    background-color: white;
+}
+
+.btn-back:hover {
+   background-color: #F7F7F7;
+}
+
+@keyframes loading-animation-spin {
+    to {
+        transform: translate(8px, 2px) rotate(1turn);
+    }
+}
+
+@keyframes loading-animation-spin-small {
+    to {
+        transform: translate(6px, 3px) rotate(1turn);
+    }
+}
+
 .screen {
     position: absolute;
     left: 0;
@@ -129,12 +203,82 @@ button {
 }
 
 .middle {
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    left: 0;
     width: 100%;
-    transform: translate(0, -50%);
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.middle-content {
+    text-align: center;
+}
+
+.screen.faded-show {
+    opacity: 1;
+    visibility: inherit !important;
+    transition: 0.3s opacity, 0.3s visibility step-start;
+}
+
+.screen.faded-hide {
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s opacity, 0.3s visibility step-end;
+    animation: 99999999s 0.3s screen-delayed-overflow;
+}
+
+.screen.faded-show .middle {
+    animation: screen-show-left 0.3s ease-out;
+}
+
+.screen.faded-hide .middle {
+    animation: screen-hide-left 0.3s ease-in;
+}
+
+.screen.faded-show.isBack .middle {
+    animation: screen-show-right 0.3s ease-out;
+}
+
+.screen.faded-hide.isBack .middle {
+    animation: screen-hide-right 0.3s ease-in;
+}
+
+.screen.faded-show .screen-lottie {
+    opacity: 1;
+    transform: scale(1);
+    transition: 0.2s opacity, transform 0.2s;
+}
+
+.screen.faded-hide .screen-lottie {
+    opacity: 0;
+    transform: scale(0.3);
+    transition: 0.2s opacity, transform 0.25s;
+}
+
+
+@keyframes screen-delayed-overflow {
+    from { overflow: hidden }
+}
+
+@keyframes screen-hide-left {
+    from { transform: translateX(0px) }
+    to { transform: translateX(-25px) }
+}
+
+@keyframes screen-hide-right {
+    from { transform: translateX(0px) }
+    to { transform: translateX(25px) }
+}
+
+@keyframes screen-show-left {
+    from { transform: translateX(25px) }
+    to { transform: translateX(0px) }
+}
+
+@keyframes screen-show-right {
+    from { transform: translateX(-25px) }
+    to { transform: translateX(0px) }
 }
 
 .addr {
@@ -187,6 +331,16 @@ button {
     color: white;
     font-size: 14px;
     text-align: center;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.15s opacity, 0.15s visibility step-end;
+}
+
+#notify.faded-show {
+    opacity: 1;
+    visibility: inherit !important;
+    transition: 0.15s opacity, 0.15s visibility step-start;
 }
 
 /* SET PASSWORD */
@@ -197,7 +351,7 @@ button {
     font-size: 15px;
 }
 
-/* IMPORT */
+/* IMPORT && BACKUP && CONFIRM */
 
 #import .btn-lite {
     font-weight: normal;
@@ -205,13 +359,16 @@ button {
     margin-bottom: 10px;
 }
 
-#importWords {
+#importWords,
+#confirmWords,
+#createWords {
     max-width: 276px;
     margin-left: auto;
     margin-right: auto;
 }
 
-#wordsPopup {
+#wordsPopup,
+#wordsConfirmPopup {
     position: absolute;
     background: white;
     padding-top: 4px;
@@ -229,6 +386,10 @@ button {
     border: 1px solid #DCDCDC;
 }
 
+#wordsConfirmPopup {
+    width: 190px;
+}
+
 .words-popup-item {
     font-size: 14px;
     line-height: 30px;
@@ -245,13 +406,6 @@ button {
     background: #f0f0f0;
 }
 
-#createWords {
-    margin-top: 10px;
-    max-width: 272px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 .word-item {
     float: left;
 }
@@ -265,18 +419,24 @@ button {
     margin-right: 4px;
 }
 
-#import .word-num {
+#import .word-num,
+#wordsConfirm .word-num {
     margin-right: 8px;
     margin-left: 16px;
 }
 
-#import input {
+#import input,
+#wordsConfirm input {
     width: 92px;
     height: 32px;
     margin-top: 0;
     margin-bottom: 0;
 }
 
+#wordsConfirm input {
+    width: 190px;
+}
+
 .create-word-item {
     float: left;
     width: 136px;
@@ -520,7 +680,7 @@ button {
 /* POPUP */
 
 #modal {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     width: 100%;
@@ -533,6 +693,7 @@ button {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    box-shadow: 0px 8px 24px rgba(0, 0, 0, .25);
 
     width: 320px;
     background-color: white;
@@ -541,6 +702,26 @@ button {
     font-size: 14px;
 }
 
+.popup#alert {
+    position: fixed;
+}
+
+.popup.faded-show,
+#menuDropdown.faded-show,
+#modal.faded-show {
+    opacity: 1;
+    visibility: inherit !important;
+    transition: 0.15s opacity, 0.15s visibility step-start;
+}
+
+.popup.faded-hide,
+#menuDropdown.faded-hide,
+#modal.faded-hide {
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.15s opacity, 0.15s visibility step-end;
+}
+
 .popup-title {
     font-weight: bold;
     margin-bottom: 20px;
diff --git a/src/index.html b/src/index.html
index 4831660..f66eff6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,190 +19,241 @@
 
     <!-- Start Screen -->
 
-    <div id="start" class="screen" style="display: none">
+    <div id="start" class="screen" style="visibility: hidden">
         <div class="middle">
-            <tgs-player data-name="start" src="assets/lottie/intro.tgs"
-                        width="120" height="120"
-                        class="screen-lottie">
-            </tgs-player>
-
-            <div class="screen-title">TON Wallet</div>
-            <div class="screen-text">
-                TON wallet allows you to make fast and<br>
-                secure blockchain-based payments<br>
-                without intermediaries.
-            </div>
+            <div class="middle-content">
+                <tgs-player data-name="start" src="assets/lottie/intro.tgs"
+                            width="120" height="120"
+                            class="screen-lottie">
+                </tgs-player>
 
-            <div style="margin-top: 95px">
-                <button id="start_createBtn" class="btn-blue screen-btn">Create My Wallet</button>
-            </div>
-            <div style="margin-top: 20px">
-                <button id="start_importBtn" class="btn-lite" style="font-weight: normal">Import existing wallet
-                </button>
+                <div class="screen-title">TON Wallet</div>
+                <div class="screen-text">
+                    TON wallet allows you to make fast and<br>
+                    secure blockchain-based payments<br>
+                    without intermediaries.
+                </div>
+
+                <div style="margin-top: 95px">
+                    <button id="start_createBtn" class="btn-blue screen-btn">Create My Wallet</button>
+                </div>
+                <div style="margin-top: 20px">
+                    <button id="start_importBtn" class="btn-lite" style="font-weight: normal">Import existing wallet
+                    </button>
+                </div>
+                <div style="margin-top: 10px">
+                    <button id="start_importLedgerHidBtn" class="btn-lite" style="font-weight: normal">Connect Ledger
+                    </button>
+                </div>
+
+        <!--            <div style="margin-top: 10px">-->
+        <!--                <button id="start_importLedgerBleBtn" class="btn-lite" style="font-weight: normal">Connect Ledger via Bluetooth-->
+        <!--                </button>-->
+        <!--            </div>-->
             </div>
-            <div style="margin-top: 10px">
-                <button id="start_importLedgerHidBtn" class="btn-lite" style="font-weight: normal">Connect Ledger
-                </button>
-            </div>
-
-<!--            <div style="margin-top: 10px">-->
-<!--                <button id="start_importLedgerBleBtn" class="btn-lite" style="font-weight: normal">Connect Ledger via Bluetooth-->
-<!--                </button>-->
-<!--            </div>-->
-        </div>
-
-        <div class="screen-text"
-             style="font-size: 12px; position: absolute; width: 100%; left: 0; bottom: 0; text-align: center">
         </div>
     </div>
 
     <!-- Import Screen -->
 
-    <div id="import" class="screen" style="text-align: center; display: none">
-        <div class="screen-title" style="margin-top: 80px">24 Secret Words</div>
-        <div class="screen-text" style="margin-bottom: 10px">
-            Please restore access to your <b>non-hardware</b> wallet by<br>
-            entering the 24 secret words you wrote<br>
-            down when creating the wallet.
-        </div>
+    <div id="import" class="screen" style="text-align: center; visibility: hidden">
+        <button id="import_backBtn" class="btn-back"></button>
+        <div class="middle">
+            <div class="middle-content">
 
-        <button id="import_alertBtn" class="btn-lite">I don't have them</button>
+                <div class="screen-title" style="margin-top: 80px">24 Secret Words</div>
+                <div class="screen-text" style="margin-bottom: 10px">
+                    Please restore access to your <b>non-hardware</b> wallet by<br>
+                    entering the 24 secret words you wrote<br>
+                    down when creating the wallet.
+                </div>
 
-        <div id="importWords">
+                <button id="import_alertBtn" class="btn-lite">I don't have them</button>
 
-        </div>
+                <div id="importWords">
 
-        <div id="wordsPopup" style="display: none">
-        </div>
+                </div>
 
-        <div style="clear: both">
-            <button id="import_continueBtn" class="btn-blue screen-btn" style="margin-top: 30px; margin-bottom: 20px">
-                Continue
-            </button>
+                <div id="wordsPopup" style="display: none">
+                </div>
+
+                <div style="clear: both">
+                    <button id="import_continueBtn" class="btn-blue screen-btn" style="margin-top: 30px; margin-bottom: 20px">
+                        Continue
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 
     <!-- Created Screen -->
 
-    <div id="created" class="screen" style="display: none">
+    <div id="created" class="screen" style="visibility: hidden">
         <div class="middle">
-            <tgs-player data-name="created" src="assets/lottie/created.tgs"
-                        width="120" height="120"
-                        class="screen-lottie">
-            </tgs-player>
+            <div class="middle-content">
+                <tgs-player data-name="created" src="assets/lottie/created.tgs"
+                            width="120" height="120"
+                            class="screen-lottie">
+                </tgs-player>
 
-            <div class="screen-title">Congratulations</div>
+                <div class="screen-title">Congratulations</div>
 
-            <div class="screen-text">
-                Your TON wallet has just been created.<br>
-                Only you control it.
-            </div>
+                <div class="screen-text">
+                    Your TON wallet has just been created.<br>
+                    Only you control it.
+                </div>
 
-            <div class="screen-text">
-                To be able to always have access to it,<br>
-                please set up a secure password and write<br>
-                down secret words.
-            </div>
+                <div class="screen-text">
+                    To be able to always have access to it,<br>
+                    please set up a secure password and write<br>
+                    down secret words.
+                </div>
 
-            <div>
-                <button id="createdContinueButton" class="btn-blue screen-btn"
-                        style="margin-top: 18px; margin-bottom: 20px">Continue
-                </button>
+                <div>
+                    <button id="createdContinueButton" class="btn-blue screen-btn"
+                            style="margin-top: 18px; margin-bottom: 20px">Continue
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- Backup Screen -->
 
-    <div id="backup" class="screen" style="text-align: center; display: none">
-        <tgs-player data-name="backup" src="assets/lottie/paper.tgs"
-                    width="120" height="120"
-                    class="screen-lottie" style="margin-top: 30px">
-        </tgs-player>
+    <div id="backup" class="screen" style="text-align: center; visibility: hidden">
+        <div class="middle">
+            <div class="middle-content">
+                <tgs-player data-name="backup" src="assets/lottie/paper.tgs"
+                            width="120" height="120"
+                            class="screen-lottie" style="margin-top: 30px">
+                </tgs-player>
 
-        <div class="screen-title">24 secret words</div>
+                <div class="screen-title">24 secret words</div>
 
-        <div class="screen-text">
-            Write down these 24 words in the correct<br>
-            order and store them in secret place.
-        </div>
+                <div class="screen-text">
+                    Write down these 24 words in the correct<br>
+                    order and store them in secret place.
+                </div>
 
-        <div class="screen-text">
-            Use these secret words to restore access to<br>
-            your wallet if you lose your password or<br>
-            access to this device.
-        </div>
+                <div class="screen-text">
+                    Use these secret words to restore access to<br>
+                    your wallet if you lose your password or<br>
+                    access to this device.
+                </div>
 
-        <div id="createWords">
+                <div id="createWords" style="margin-top: 10px">
 
-        </div>
+                </div>
 
-        <div style="clear: both">
-            <button id="backup_continueBtn" class="btn-blue screen-btn" style="margin-top: 26px; margin-bottom: 20px">
-                Continue
-            </button>
+                <div style="clear: both">
+                    <button id="backup_continueBtn" class="btn-blue screen-btn" style="margin-top: 26px; margin-bottom: 20px">
+                        Continue
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 
-    <!-- Create Password Screen -->
+    <!-- Words Confirm Screen -->
 
-    <div id="createPassword" class="screen" style="display: none">
+    <div id="wordsConfirm" class="screen" style="text-align: center; visibility: hidden">
+        <button id="wordsConfirm_backBtn" class="btn-back"></button>
         <div class="middle">
-            <tgs-player data-name="createPassword" src="assets/lottie/lock.tgs"
-                        width="120" height="120"
-                        class="screen-lottie">
-            </tgs-player>
+            <div class="middle-content">
 
-            <div class="screen-title">Secure Password</div>
+                <tgs-player data-name="wordsConfirm" src="assets/lottie/confirm.tgs"
+                            width="120" height="120"
+                            class="screen-lottie" style="margin-top: 30px">
+                </tgs-player>
 
-            <div class="screen-text">
-                Please choose a secure password<br>
-                for confirming your payments
-            </div>
+                <div class="screen-title">Test Time!</div>
 
-            <div style="margin-top: 54px">
-                <input id="createPassword_input" placeholder="Enter your password" type="password">
-            </div>
-            <div>
-                <input id="createPassword_repeatInput" placeholder="Repeat your password" type="password">
+                <div class="screen-text">
+                    Now let's check that you wrote your secret<br/>words correctly.<br/>
+                </div>
+
+                <div id="confirmWordsNums" class="screen-text">
+                    Please enter the words <span></span>, <span></span> and <span></span> below:
+                </div>
+
+                <div id="confirmWords">
+                </div>
+
+                <div id="wordsConfirmPopup" style="display: none">
+                </div>
+
+                <div style="clear: both">
+                    <button id="wordsConfirm_continueBtn" class="btn-blue screen-btn" style="margin-top: 26px; margin-bottom: 20px">
+                        Continue
+                    </button>
+                </div>
             </div>
+        </div>
+    </div>
 
-            <div>
-                <button id="createPassword_continueBtn" class="btn-blue screen-btn"
-                        style="margin-top: 38px; margin-bottom: 20px">Continue
-                </button>
+    <!-- Create Password Screen -->
+
+    <div id="createPassword" class="screen" style="visibility: hidden">
+        <div class="middle">
+            <div class="middle-content">
+                <tgs-player data-name="createPassword" src="assets/lottie/lock.tgs"
+                            width="120" height="120"
+                            class="screen-lottie">
+                </tgs-player>
+
+                <div class="screen-title">Secure Password</div>
+
+                <div class="screen-text">
+                    Please choose a secure password<br>
+                    for confirming your payments
+                </div>
+
+                <div style="margin-top: 54px">
+                    <input id="createPassword_input" placeholder="Enter your password" type="password">
+                </div>
+                <div>
+                    <input id="createPassword_repeatInput" placeholder="Repeat your password" type="password">
+                </div>
+
+                <div>
+                    <button id="createPassword_continueBtn" class="btn-blue screen-btn"
+                            style="margin-top: 38px; margin-bottom: 20px">Continue
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- Ready To Go Screen -->
 
-    <div id="readyToGo" class="screen" style="display: none">
+    <div id="readyToGo" class="screen" style="visibility: hidden">
         <div class="middle">
-            <tgs-player data-name="readyToGo" src="assets/lottie/done.tgs"
-                        width="120" height="120"
-                        class="screen-lottie">
-            </tgs-player>
+            <div class="middle-content">
+                <tgs-player data-name="readyToGo" src="assets/lottie/done.tgs"
+                            width="120" height="120"
+                            class="screen-lottie">
+                </tgs-player>
 
-            <div class="screen-title">Ready to go!</div>
+                <div class="screen-title">Ready to go!</div>
 
-            <div class="screen-text">
-                You're all set. Now you have a wallet that<br>
-                only you control - directly, without<br>
-                middlemen or bankers.
-            </div>
+                <div class="screen-text">
+                    You're all set. Now you have a wallet that<br>
+                    only you control - directly, without<br>
+                    middlemen or bankers.
+                </div>
 
-            <div>
-                <button id="readyToGo_continueBtn" class="btn-blue screen-btn"
-                        style="margin-top: 170px; margin-bottom: 20px">View My Wallet
-                </button>
+                <div>
+                    <button id="readyToGo_continueBtn" class="btn-blue screen-btn"
+                            style="margin-top: 170px; margin-bottom: 20px">View My Wallet
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- Main Screen -->
 
-    <div id="main" class="screen" style="display: none">
+    <div id="main" class="screen" style="visibility: hidden">
         <div class="head">
             <div class="head-row">
                 <button id="main_refreshBtn" class="btn-round"
@@ -252,11 +303,11 @@
 
     <!-- Modal -->
 
-    <div id="modal" style="display: none"></div>
+    <div id="modal" style="visibility: hidden"></div>
 
     <!-- Menu Dropdown -->
 
-    <div id="menuDropdown" style="display: none">
+    <div id="menuDropdown" style="visibility: hidden">
         <div id="menu_extension" class="dropdown-item" onclick="window.open('https://chrome.google.com/webstore/detail/ton-wallet/nphplpgoakhhjchkkhmiggakijnkhfnd', '_blank')">Chrome Extension</div>
         <div id="menu_about" class="dropdown-item">About</div>
         <div id="menu_magic" class="dropdown-item">TON Magic <div class="dropdown-toggle"></div></div>
@@ -264,12 +315,20 @@
         <div id="menu_proxy" class="dropdown-item">TON Proxy <div class="dropdown-toggle"></div></div>
         <div id="menu_changePassword" class="dropdown-item">Change password</div>
         <div id="menu_backupWallet" class="dropdown-item">Back up wallet</div>
-        <div id="menu_delete" class="dropdown-item">Delete wallet</div>
+        <div id="menu_delete" class="dropdown-item">Log Out</div>
+    </div>
+
+    <!-- Alert Popup-->
+
+    <div id="alert" class="popup" style="visibility: hidden">
+        <div class="popup-title"></div>
+        <div class="popup-black-text"></div>
+        <div class="popup-footer"></div>
     </div>
 
     <!-- Receive Popup-->
 
-    <div id="receive" class="popup" style="display: none">
+    <div id="receive" class="popup" style="visibility: hidden">
         <div class="popup-title">Receive TON</div>
         <div class="popup-text">Share this address to receive TON.
         </div>
@@ -291,7 +350,7 @@
 
     <!-- Invoice Popup -->
 
-    <div id="invoice" class="popup" style="display: none">
+    <div id="invoice" class="popup" style="visibility: hidden">
         <div class="popup-title">Create Invoice</div>
 
         <div>
@@ -324,7 +383,7 @@
 
     <!-- Invoice QR Popup-->
 
-    <div id="invoiceQr" class="popup" style="display: none">
+    <div id="invoiceQr" class="popup" style="visibility: hidden">
         <div class="popup-title">Invoice QR</div>
 
         <div class="qr-container">
@@ -344,7 +403,7 @@
 
     <!-- Transaction Popup -->
 
-    <div id="transaction" class="popup" style="display: none">
+    <div id="transaction" class="popup" style="visibility: hidden">
         <div class="popup-title">Transaction</div>
 
         <div id="transactionAmount">+0.1 TON</div>
@@ -376,7 +435,7 @@
 
     <!-- Send Popup -->
 
-    <div id="send" class="popup" style="display: none">
+    <div id="send" class="popup" style="visibility: hidden">
         <div class="popup-title">Send TON</div>
 
         <div class="input-label">Recipient wallet address</div>
@@ -403,7 +462,7 @@
 
     <!-- Send Confirm Popup -->
 
-    <div id="sendConfirm" class="popup" style="display: none; padding-bottom: 10px">
+    <div id="sendConfirm" class="popup" style="visibility: hidden; padding-bottom: 10px">
         <div class="popup-title">Confirmation</div>
         <div class="popup-black-text">Do you want to send <b id="sendConfirmAmount">x TON</b> to:</div>
 
@@ -423,7 +482,7 @@
 
     <!-- Sign Confirm Popup -->
 
-    <div id="signConfirm" class="popup" style="display: none; padding-bottom: 10px">
+    <div id="signConfirm" class="popup" style="visibility: hidden; padding-bottom: 10px">
         <div class="popup-title">Confirmation</div>
         <div class="popup-black-text">Do you want to sign:</div>
 
@@ -441,7 +500,7 @@
 
     <!-- Processing Popup -->
 
-    <div id="processing" class="popup" style="display: none; text-align: center">
+    <div id="processing" class="popup" style="visibility: hidden; text-align: center">
         <tgs-player data-name="processing" src="assets/lottie/money.tgs" width="150" height="150"></tgs-player>
         <div class="popup-title">Sending TON</div>
         <div class="popup-grey-text">Please wait a few seconds for your<br>transaction to be processed..</div>
@@ -451,7 +510,7 @@
 
     <!-- Done Popup -->
 
-    <div id="done" class="popup" style="display: none; text-align: center; padding-bottom: 10px">
+    <div id="done" class="popup" style="visibility: hidden; text-align: center; padding-bottom: 10px">
         <tgs-player data-name="done" src="assets/lottie/done.tgs" width="150" height="150"></tgs-player>
         <div class="popup-title">Done!</div>
         <div class="popup-grey-text">1 TON have been send</div>
@@ -463,7 +522,7 @@
 
     <!-- About Popup -->
 
-    <div id="about" class="popup" style="display: none; text-align: center; padding-bottom: 10px">
+    <div id="about" class="popup" style="visibility: hidden; text-align: center; padding-bottom: 10px">
         <div class="popup-title">TON Wallet</div>
         <div class="popup-grey-text">
             Version: 1.1.30
@@ -493,7 +552,7 @@ <h4>What is TON Magic?</h4>
 
     <!-- Change Password Popup -->
 
-    <div id="changePassword" class="popup" style="display: none; padding-bottom: 10px">
+    <div id="changePassword" class="popup" style="visibility: hidden; padding-bottom: 10px">
         <div class="popup-title">Change Password</div>
 
         <tgs-player data-name="changePassword" src="assets/lottie/lock.tgs" width="150" height="150"></tgs-player>
@@ -513,7 +572,7 @@ <h4>What is TON Magic?</h4>
 
     <!-- Enter Password Popup -->
 
-    <div id="enterPassword" class="popup" style="display: none; padding-bottom: 10px">
+    <div id="enterPassword" class="popup" style="visibility: hidden; padding-bottom: 10px">
         <div class="popup-title">Password</div>
 
         <tgs-player data-name="enterPassword" src="assets/lottie/lock.tgs" width="150" height="150"></tgs-player>
@@ -526,10 +585,10 @@ <h4>What is TON Magic?</h4>
         </div>
     </div>
 
-    <!-- Delete Wallet Popup -->
+    <!-- Log Out Popup -->
 
-    <div id="delete" class="popup" style="display: none; padding-bottom: 10px">
-        <div class="popup-title">Delete Wallet</div>
+    <div id="delete" class="popup" style="visibility: hidden; padding-bottom: 10px">
+        <div class="popup-title">Log Out</div>
         <div class="popup-black-text">
             This will disconnect the wallet from this<br>
             app. You will be able to restore your<br>
@@ -551,7 +610,7 @@ <h4>What is TON Magic?</h4>
 
     <!-- Connect Ledger Popup -->
 
-    <div id="connectLedger" class="popup" style="display: none; padding-bottom: 10px">
+    <div id="connectLedger" class="popup" style="visibility: hidden; padding-bottom: 10px">
         <div class="popup-title">Connect Ledger</div>
         <div class="popup-black-text">
             Please use Edge/Google Chrome v89 or later.
@@ -570,7 +629,7 @@ <h4>What is TON Magic?</h4>
 
     <!-- Notify-->
 
-    <div id="notify" style="display: none"></div>
+    <div id="notify" style="visibility: hidden"></div>
 </div>
 
 <!-- Scripts -->
diff --git a/src/js/Controller.js b/src/js/Controller.js
index 71b63b5..c9f97e6 100644
--- a/src/js/Controller.js
+++ b/src/js/Controller.js
@@ -131,7 +131,7 @@ class Controller {
         this.myAddress = localStorage.getItem('address');
         if (!this.myAddress || !localStorage.getItem('words')) {
             localStorage.clear();
-            this.sendToView('showScreen', {name: 'start'})
+            this.sendToView('showScreen', {name: 'start', noAnimation: true})
         } else {
             if (localStorage.getItem('isLedger') === 'true') {
                 this.isLedger = true;
@@ -297,6 +297,24 @@ class Controller {
         if (localStorage.getItem('words')) {
             this.sendToView('showScreen', {name: 'main'});
         } else {
+            this.sendToView('showScreen', {name: 'wordsConfirm', words: this.myMnemonicWords});
+        }
+    }
+
+    onConfirmDone(words) {
+        if (words) {
+            let isValid = true;
+
+            Object.keys(words).forEach(index => {
+                if (this.myMnemonicWords[index] !== words[index]) {
+                    isValid = false;
+                }
+            });
+
+            if (!isValid) {
+                return;
+            }
+
             this.showCreatePassword();
         }
     }
@@ -390,6 +408,10 @@ class Controller {
             }
 
             await this.importImpl(keyPair, walletClass);
+
+            this.sendToView('importCompleted', {state: 'success'});
+        } else {
+            this.sendToView('importCompleted', {state: 'failure'});
         }
     }
 
@@ -418,6 +440,7 @@ class Controller {
 
         this.sendToView('setIsLedger', this.isLedger);
         this.sendToView('showScreen', {name: 'readyToGo'});
+        this.sendToView('privateKeySaved');
     }
 
     async onChangePassword(oldPassword, newPassword) {
@@ -431,6 +454,7 @@ class Controller {
         await Controller.saveWords(words, newPassword);
 
         this.sendToView('closePopup');
+        this.sendToView('passwordChanged');
     }
 
     async onEnterPassword(password) {
@@ -443,6 +467,7 @@ class Controller {
         }
 
         this.afterEnterPassword(words);
+        this.sendToView('passwordEntered');
     }
 
     // MAIN
@@ -471,7 +496,7 @@ class Controller {
 
     initView() {
         if (!this.myAddress || !localStorage.getItem('words')) {
-            this.sendToView('showScreen', {name: 'start'})
+            this.sendToView('showScreen', {name: 'start', noAnimation: true})
         } else {
             this.sendToView('showScreen', {name: 'main', myAddress: this.myAddress});
             if (this.balance !== null) {
@@ -588,14 +613,21 @@ class Controller {
      */
     async showSendConfirm(amount, toAddress, comment, needQueue) {
         if (amount.lte(0) || this.balance.lt(amount)) {
+            this.sendToView('sendCheckFailed');
             return;
         }
         if (!Address.isValid(toAddress)) {
+            this.sendToView('sendCheckFailed');
             return;
         }
 
         const fee = await this.getFees(amount, toAddress, comment);
 
+        if (this.balance.sub(fee).lt(amount)) {
+            this.sendToView('sendCheckCantPayFee', {fee});
+            return;
+        }
+
         if (this.isLedger) {
 
             this.sendToView('showPopup', {
@@ -622,8 +654,9 @@ class Controller {
                 toAddress: toAddress,
                 fee: fee.toString()
             }, needQueue);
-
         }
+
+        this.sendToView('sendCheckSucceeded');
     }
 
     /**
@@ -838,6 +871,15 @@ class Controller {
             case 'onBackupDone':
                 this.onBackupDone();
                 break;
+            case 'onConfirmBack':
+                this.showBackup(this.myMnemonicWords);
+                break;
+            case 'onImportBack':
+                this.sendToView('showScreen', {name: 'start'})
+                break;
+            case 'onConfirmDone':
+                this.onConfirmDone(params.words);
+                break;
             case 'showMain':
                 this.showMain();
                 break;
diff --git a/src/js/view/Utils.js b/src/js/view/Utils.js
index fb0bb1d..30462c1 100644
--- a/src/js/view/Utils.js
+++ b/src/js/view/Utils.js
@@ -16,6 +16,30 @@ function toggle(div, visible) {
     div.style.display = d;
 }
 
+function toggleFaded(div, isVisible, params) {
+    params = params || {};
+    if (params.isBack) {
+        div.classList.add('isBack');
+    } else {
+        div.classList.remove('isBack');
+    }
+    if (isVisible) {
+        div.classList.add('faded-show');
+        div.classList.remove('faded-hide');
+    } else {
+        div.classList.remove('faded-show');
+        div.classList.add('faded-hide');
+    }
+}
+
+function triggerClass(div, className, duration) {
+    div.classList.add(className);
+
+    setTimeout(() => {
+        div.classList.remove(className);
+    }, duration);
+}
+
 function createElement(params) {
     const item = document.createElement(params.tag);
     if (params.clazz) {
@@ -103,11 +127,14 @@ function copyToClipboard(text) {
 }
 
 const IMPORT_WORDS_COUNT = 24;
+const CONFIRM_WORDS_COUNT = 3;
 
 export {
     $,
     $$,
     toggle,
+    toggleFaded,
+    triggerClass,
     createElement,
     clearElement,
     onInput,
@@ -117,5 +144,6 @@ export {
     formatDate,
     formatDateFull,
     copyToClipboard,
-    IMPORT_WORDS_COUNT
+    IMPORT_WORDS_COUNT,
+    CONFIRM_WORDS_COUNT
 };
diff --git a/src/js/view/View.js b/src/js/view/View.js
index b819a5a..ce8344f 100644
--- a/src/js/view/View.js
+++ b/src/js/view/View.js
@@ -1,13 +1,16 @@
 import {
-    $, clearElement,
+    $, $$, clearElement,
     copyToClipboard,
     createElement,
     formatDate,
     formatDateFull,
     formatTime,
     IMPORT_WORDS_COUNT,
+    CONFIRM_WORDS_COUNT,
     onInput, setAddr,
     toggle,
+    toggleFaded,
+    triggerClass
 } from "./Utils.js";
 
 import {initLotties, lotties} from "./Lottie.js";
@@ -17,12 +20,21 @@ const toNano = TonWeb.utils.toNano;
 const formatNanograms = TonWeb.utils.fromNano;
 const BN = TonWeb.utils.BN;
 
-function toggleLottie(lottie, visible) {
+function toggleLottie(lottie, visible, params) {
+    params = params || {};
+    clearTimeout(lottie.hideTimeout);
     if (visible) {
         lottie.player.play();
     } else {
         lottie.player.stop();
-        lottie.ctx.clearRect(0, 0, 1000, 1000);
+
+        if (params.hideDelay) {
+            lottie.hideTimeout = setTimeout(() => {
+                lottie.ctx.clearRect(0, 0, 1000, 1000);
+            }, params.hideDelay)
+        } else {
+            lottie.ctx.clearRect(0, 0, 1000, 1000);
+        }
     }
 }
 
@@ -41,8 +53,23 @@ class View {
         this.currentScreenName = null;
         /** @type   {boolean} */
         this.isTestnet = false;
-
-        this.createImportInputs();
+        /** @type   {string} */
+        this.popup = ''; // current opened popup
+
+        this.createWordInputs({
+            count: IMPORT_WORDS_COUNT,
+            dropdownId: '#wordsPopup',
+            inputId: '#importsInput',
+            containerId: '#importWords',
+            multiColumns: true
+        });
+        this.createWordInputs({
+            count: CONFIRM_WORDS_COUNT,
+            dropdownId: '#wordsConfirmPopup',
+            inputId: '#confirmInput',
+            containerId: '#confirmWords',
+            multiColumns: false
+        });
 
         initLotties().then(() => {
             const lottie = lotties[this.currentScreenName];
@@ -129,14 +156,105 @@ class View {
         //     window.open('https://exchange.mercuryo.io/?currency=TONCOIN&address=' + this.myAddress, '_blank');
         // });
 
-        $('#import_alertBtn').addEventListener('click', () => alert('Too Bad. Without the secret words, you can\'t restore access to your wallet.'));
-        $('#import_continueBtn').addEventListener('click', async () => this.sendMessage('import', {words: await this.getImportWords()}));
+        $('#import_backBtn').addEventListener('click', () => {
+            this.isBack = true;
+            this.sendMessage('onImportBack')
+        });
+
+        $('#import_alertBtn').addEventListener('click', () => {
+            this.showAlert({
+                title: 'Too Bad',
+                message: 'Without the secret words, you can\'t restore access to your wallet.',
+                buttons: [
+                    {
+                        label: 'CANCEL',
+                        callback: () => {
+                            this.isBack = true;
+                            this.sendMessage('onImportBack');
+                        }
+                    },
+                    {
+                        label: 'ENTER WORDS',
+                        callback: () => {
+                            this.closePopup();
+                        }
+                    },
+                ]
+            });
+        });
+        $('#import_continueBtn').addEventListener('click', async (e) => {
+            this.toggleButtonLoader(e.currentTarget, true);
+            this.sendMessage('import', {words: await this.getImportWords()})
+        });
 
         $('#createdContinueButton').addEventListener('click', () => this.sendMessage('createPrivateKey'));
 
-        $('#backup_continueBtn').addEventListener('click', () => this.sendMessage('onBackupDone'));
+        $('#backup_continueBtn').addEventListener('click', () => {
+            const currentTime = +new Date();
+            if (currentTime - this.backupShownTime < 60000) { //1 minute
+                this.showAlert({
+                    title: 'Sure done?',
+                    message: 'You didn\'t have enough time to write these words down.',
+                    buttons: [
+                        {
+                            label: 'I\'M SURE',
+                            callback: () => {
+                                this.sendMessage('onBackupDone');
+                            }
+                        },
+                        {
+                            label: 'OK, SORRY',
+                            callback: () => {
+                                this.closePopup();
+                            }
+                        },
+                    ]
+                });
+            } else {
+                this.sendMessage('onBackupDone')
+            }
+        });
 
-        $('#createPassword_continueBtn').addEventListener('click', () => {
+        $('#wordsConfirm_backBtn').addEventListener('click', () => {
+            this.isBack = true;
+            this.sendMessage('onConfirmBack');
+        });
+
+        $('#wordsConfirm_continueBtn').addEventListener('click', () => {
+            const confirmWords = this.getConfirmWords();
+
+            if (!confirmWords.isWordsFromList) {
+                return;
+            }
+
+            if (!confirmWords.isRightWords) {
+                this.showAlert({
+                    title: 'Incorrect words',
+                    message: 'The secret words you have entered do not match the ones in the list.',
+                    buttons: [
+                        {
+                            label: 'SEE WORDS',
+                            callback: () => {
+                                this.isBack = true;
+                                this.sendMessage('onConfirmBack');
+                            }
+                        },
+                        {
+                            label: 'TRY AGAIN',
+                            callback: () => {
+                                this.closePopup();
+                            }
+                        },
+                    ]
+                });
+            } else {
+                this.sendMessage('onConfirmDone', {words: confirmWords.words});
+            }
+        });
+
+
+
+        $('#createPassword_continueBtn').addEventListener('click', (e) => {
             const password = $('#createPassword_input').value;
             const passwordRepeat = $('#createPassword_repeatInput').value;
 
@@ -147,6 +265,7 @@ class View {
             } else if (password !== passwordRepeat) {
                 $('#createPassword_repeatInput').classList.add('error');
             } else {
+                this.toggleButtonLoader(e.currentTarget, true);
                 this.sendMessage('passwordCreated', {password});
             }
         });
@@ -206,7 +325,7 @@ class View {
 
         $('#connectLedger_cancelBtn').addEventListener('click', () => this.closePopup());
 
-        $('#send_btn').addEventListener('click', () => {
+        $('#send_btn').addEventListener('click', (e) => {
             const amount = Number($('#amountInput').value);
             const amountNano = toNano(amount);
             if (amountNano.lte(0) || this.balance.lt(amountNano)) {
@@ -220,6 +339,7 @@ class View {
             }
             const comment = $('#commentInput').value;
 
+            this.toggleButtonLoader(e.currentTarget, true);
             this.sendMessage('onSend', {amount: amountNano.toString(), toAddress, comment});
         });
         $('#send_closeBtn').addEventListener('click', () => this.closePopup());
@@ -237,7 +357,7 @@ class View {
         $('#about_closeBtn').addEventListener('click', () => this.closePopup());
 
         $('#changePassword_cancelBtn').addEventListener('click', () => this.closePopup());
-        $('#changePassword_okBtn').addEventListener('click', async () => {
+        $('#changePassword_okBtn').addEventListener('click', async (e) => {
             const oldPassword = $('#changePassword_oldInput').value;
             const newPassword = $('#changePassword_newInput').value;
             const passwordRepeat = $('#changePassword_repeatInput').value;
@@ -254,13 +374,15 @@ class View {
                 return;
             }
 
+            this.toggleButtonLoader(e.currentTarget, true);
             this.sendMessage('onChangePassword', {oldPassword, newPassword});
         });
 
         $('#enterPassword_cancelBtn').addEventListener('click', () => this.closePopup());
-        $('#enterPassword_okBtn').addEventListener('click', async () => {
+        $('#enterPassword_okBtn').addEventListener('click', async (e) => {
             const password = $('#enterPassword_input').value;
 
+            this.toggleButtonLoader(e.currentTarget, true);
             this.sendMessage('onEnterPassword', {password})
         });
 
@@ -273,40 +395,71 @@ class View {
     showScreen(name) {
         this.closePopup();
 
-        const screens = ['start', 'created', 'backup', 'import', 'createPassword', 'readyToGo', 'main'];
+        const screens = ['start', 'created', 'backup', 'wordsConfirm', 'import', 'createPassword', 'readyToGo', 'main'];
 
         screens.forEach(screen => {
-            const display = screen === 'main' ? 'flex' : 'block';
-            toggle($('#' + screen), name === screen ? display : false);
+            toggleFaded($('#' + screen), name === screen, {
+                isBack: this.isBack,
+            });
 
             const lottie = lotties[screen];
             if (lottie) {
-                toggleLottie(lottie, name === screen);
+                toggleLottie(lottie, name === screen, {hideDelay: 300}); //300ms, as for screen show/hide animation duration in CSS
             }
         });
         this.currentScreenName = name;
 
+        this.isBack = false;
+
         window.scrollTo(0, 0);
     }
 
+    toggleButtonLoader(el, enable) {
+        el.disabled = enable;
+        enable ? el.classList.add('btn-loader') : el.classList.remove('btn-loader');
+    }
+
+    showAlert(params) {
+        $('#alert .popup-title').innerText = params.title;
+        $('#alert .popup-black-text').innerText = params.message;
+        $('#alert .popup-footer').innerHTML = '';
+
+        if (params.buttons) {
+            params.buttons.forEach(button => {
+                const el = createElement({
+                    tag: 'button',
+                    clazz: 'btn-lite',
+                    text: button.label
+                });
+                $('#alert .popup-footer').appendChild(el);
+                el.addEventListener('click', button.callback);
+            });
+        }
+
+        this.showPopup('alert');
+    }
+
     showPopup(name) {
         $('#enterPassword_input').value = '';
 
-        toggle($('#modal'), name !== '');
+        //popups switching without animations
+        if (this.popup && name) {
+            triggerClass(document.body, 'disable-animations', 20);
+        }
+
+        toggleFaded($('#modal'), name !== '');
 
-        const popups = ['receive', 'invoice', 'invoiceQr', 'send', 'sendConfirm', 'signConfirm', 'processing', 'done', 'menuDropdown', 'about', 'delete', 'changePassword', 'enterPassword', 'transaction', 'connectLedger'];
+        const popups = ['alert', 'receive', 'invoice', 'invoiceQr', 'send', 'sendConfirm', 'signConfirm', 'processing', 'done', 'menuDropdown', 'about', 'delete', 'changePassword', 'enterPassword', 'transaction', 'connectLedger'];
 
         popups.forEach(popup => {
-            toggle($('#' + popup), name === popup);
+            toggleFaded($('#' + popup), name === popup);
             const lottie = lotties[popup];
             if (lottie) {
                 toggleLottie(lottie, name === popup);
             }
         });
-    }
 
-    isPopupVisible(name) {
-        return $('#' + name).style.display === 'block';
+        this.popup = name;
     }
 
     closePopup() {
@@ -351,30 +504,30 @@ class View {
         clearElement($('#createWords'));
     }
 
-    // IMPORT SCREEN
+    // IMPORT && CONFIRM SCREENS
+
+    createWordInputs(params) {
 
-    createImportInputs() {
         const onEnter = input => {
             const i = Number(input.getAttribute('tabindex'));
-            if (i === IMPORT_WORDS_COUNT) {
+            if (i === params.count) {
 
             } else {
-                $('#importInput' + i).focus();
+                $(params.inputId + i).focus();
             }
         };
 
-        this.importDropDown = new DropDown($('#wordsPopup'), onEnter, this.mnemonicWords);
-
+        const dropdown = new DropDown($(params.dropdownId), onEnter, this.mnemonicWords);
         let lastInput = null;
 
         const showWordsPopup = input => {
             const text = input.value;
             if (text === null || text.length === 0) {
-                toggle($('#wordsPopup'), false);
+                toggle($(params.dropdownId), false);
                 return;
             }
 
-            this.importDropDown.show(input, text.toLowerCase());
+            dropdown.show(input, text.toLowerCase());
         };
 
         function onWordInput(e) {
@@ -391,7 +544,7 @@ class View {
         };
 
         const onFocusOut = (e) => {
-            toggle($('#wordsPopup'), false);
+            toggle($(params.dropdownId), false);
             if (lastInput) {
                 const value = lastInput.value.toLowerCase().trim();
                 if (value.length > 0 && this.mnemonicWords.indexOf(value) === -1) {
@@ -406,19 +559,19 @@ class View {
             const input = e.target;
             switch (e.key) {
                 case 'Enter':
-                    const selectedText = this.importDropDown.getSelectedText();
+                    const selectedText = dropdown.getSelectedText();
                     if (selectedText) {
                         input.value = selectedText;
                         input.classList.remove('error');
-                        this.importDropDown.hide();
+                        dropdown.hide();
                     }
                     onEnter(input);
                     break;
                 case 'ArrowUp':
-                    this.importDropDown.up();
+                    dropdown.up();
                     break;
                 case 'ArrowDown':
-                    this.importDropDown.down();
+                    dropdown.down();
                     break;
             }
         };
@@ -426,12 +579,12 @@ class View {
         const onPaste = (event) => {
             const text = (event.clipboardData || window.clipboardData).getData('text');
             let arr = text.split(' ');
-            if (arr.length !== IMPORT_WORDS_COUNT) {
+            if (arr.length !== params.count) {
                 arr = text.split(',');
             }
-            if (arr.length === IMPORT_WORDS_COUNT) {
-                for (let i = 0; i < IMPORT_WORDS_COUNT; i++) {
-                    const input = $('#importInput' + i);
+            if (arr.length === params.count) {
+                for (let i = 0; i < params.count; i++) {
+                    const input = $(params.inputId + i);
                     const value = arr[i].toLowerCase().trim();
                     if (!value || this.mnemonicWords.indexOf(value) === -1) {
                         input.classList.add('error');
@@ -449,9 +602,10 @@ class View {
             const span = createElement({tag: 'span', clazz: 'word-num', text: (n + 1) + '.'});
             inputContainer.appendChild(span);
             const input = createElement({tag: 'input'});
-            input.id = 'importInput' + n;
+            input.id = params.inputId.slice(1) + n;
             input.type = 'text';
             input.tabIndex = n + 1;
+            input.autocomplete = 'off';
             inputContainer.appendChild(input);
 
             input.addEventListener('focusin', onFocusIn);
@@ -460,29 +614,64 @@ class View {
             input.addEventListener('paste', onPaste);
             onInput(input, onWordInput);
 
-            $('#importWords').appendChild(inputContainer);
+            $(params.containerId).appendChild(inputContainer);
         };
 
-        for (let i = 0; i < IMPORT_WORDS_COUNT / 2; i++) {
-            createInput(i);
-            createInput(i + IMPORT_WORDS_COUNT / 2);
+        if (params.multiColumns) {
+            for (let i = 0; i < params.count / 2; i++) {
+                createInput(i);
+                createInput(i + params.count / 2);
+            }
+        } else {
+            for (let i = 0; i < params.count ; i++) {
+                createInput(i);
+            }
         }
     }
 
     clearImportWords() {
         toggle($('#wordsPopup'), false);
         for (let i = 0; i < IMPORT_WORDS_COUNT; i++) {
-            const input = $('#importInput' + i);
+            const input = $('#importsInput' + i);
             input.value = '';
             input.classList.remove('error');
         }
     }
 
+    clearConfirmWords() {
+        toggle($('#wordsConfirmPopup'), false);
+        for (let i = 0; i < CONFIRM_WORDS_COUNT; i++) {
+            const input = $('#confirmInput' + i);
+            input.value = '';
+            input.setAttribute('data-word', '');
+            input.classList.remove('error');
+        }
+    }
+
+    setConfirmWords(words) {
+        const nums = Array(IMPORT_WORDS_COUNT)
+            .fill(0)
+            .map((_, i) => ({i, rnd: Math.random()}))
+            .sort((a, b) => a.rnd - b.rnd)
+            .map(i => i.i)
+            .slice(0, CONFIRM_WORDS_COUNT)
+            .sort((a, b) => a-b);
+
+        const spans = $$('#confirmWordsNums span');
+        for (let i = 0; i < CONFIRM_WORDS_COUNT; i++) {
+            const input = $('#confirmInput' + i);
+            input.setAttribute('data-index', nums[i]);
+            input.setAttribute('data-word', words[nums[i]]);
+            spans[i].innerText = nums[i] + 1;
+            input.parentNode.children[0].innerText = (nums[i] + 1) + '.';
+        }
+    }
+
     async getImportWords() {
         let isValid = true;
         const words = [];
         for (let i = 0; i < IMPORT_WORDS_COUNT; i++) {
-            const input = $('#importInput' + i);
+            const input = $('#importsInput' + i);
             const value = input.value.toLowerCase().trim();
             if (!value || this.mnemonicWords.indexOf(value) === -1) {
                 input.classList.add('error');
@@ -495,7 +684,7 @@ class View {
             isValid = await TonWeb.mnemonic.validateMnemonic(words);
             if (!isValid) {
                 for (let i = 0; i < IMPORT_WORDS_COUNT; i++) {
-                    const input = $('#importInput' + i);
+                    const input = $('#importsInput' + i);
                     input.classList.add('error');
                 }
             }
@@ -504,6 +693,33 @@ class View {
         return isValid ? words : null;
     }
 
+    getConfirmWords() {
+        let isWordsFromList = true;
+        let isRightWords = true;
+        const words = {};
+
+        for (let i = 0; i < CONFIRM_WORDS_COUNT; i++) {
+            const input = $('#confirmInput' + i);
+            const value = input.value.toLowerCase().trim();
+            const index = input.getAttribute('data-index');
+            const validValue = input.getAttribute('data-word');
+            if (!value || this.mnemonicWords.indexOf(value) === -1) {
+                input.classList.add('error');
+                isWordsFromList = false;
+            }
+            if (value !== validValue) {
+                isRightWords = false;
+            }
+            words[index] = value;
+        }
+
+        return {
+            isWordsFromList,
+            isRightWords,
+            words: isWordsFromList && isRightWords ? words : null
+        }
+    }
+
     // CREATE PASSWORD SCREEN
 
     clearCreatePassword() {
@@ -526,8 +742,8 @@ class View {
     }
 
     onSettingsClick() {
-        toggle($('#modal'), true);
-        toggle($('#menuDropdown'), true);
+        toggleFaded($('#modal'), true);
+        toggleFaded($('#menuDropdown'), true);
         toggle($('#menu_changePassword'), !this.isLedger);
         toggle($('#menu_backupWallet'), !this.isLedger);
     }
@@ -667,15 +883,13 @@ class View {
         const data = onyAddress ? this.myAddress : 'ton://transfer/' + this.myAddress;
         const text = onyAddress ? 'Wallet address copied to clipboard' : 'Transfer link copied to clipboard';
         $('#notify').innerText = copyToClipboard(data) ? text : 'Can\'t copy link';
-        toggle($('#notify'), true);
-        setTimeout(() => toggle($('#notify'), false), 2000);
+        triggerClass($('#notify'), 'faded-show', 2000)
     }
 
     onShowAddressOnDevice() {
         this.sendMessage('showAddressOnDevice');
         $('#notify').innerText = 'Please check the address on your device';
-        toggle($('#notify'), true);
-        setTimeout(() => toggle($('#notify'), false), 2000);
+        triggerClass($('#notify'), 'faded-show', 2000)
     }
 
     // RECEIVE INVOICE POPUP
@@ -708,8 +922,7 @@ class View {
 
     onShareInvoiceClick() {
         $('#notify').innerText = copyToClipboard(this.getInvoiceLink()) ? 'Transfer link copied to clipboard' : 'Can\'t copy link';
-        toggle($('#notify'), true);
-        setTimeout(() => toggle($('#notify'), false), 2000);
+        triggerClass($('#notify'), 'faded-show', 2000)
     }
 
     // RECEIVE INVOICE QR POPUP
@@ -777,32 +990,78 @@ class View {
                 }
                 break;
 
+            case 'privateKeySaved':
+                this.toggleButtonLoader($('#createPassword_continueBtn'), false);
+                break;
+
+            case 'passwordChanged':
+                this.toggleButtonLoader($('#changePassword_okBtn'), false);
+                break;
+
             case 'showChangePasswordError':
+                this.toggleButtonLoader($('#changePassword_okBtn'), false);
                 $('#changePassword_oldInput').classList.add('error');
                 break;
 
+            case 'passwordEntered':
+                this.toggleButtonLoader($('#enterPassword_okBtn'), false);
+                break;
+
             case 'showEnterPasswordError':
+                this.toggleButtonLoader($('#enterPassword_okBtn'), false);
                 $('#enterPassword_input').classList.add('error');
                 break;
 
+            case 'importCompleted':
+                this.toggleButtonLoader($('#import_continueBtn'), false);
+                break;
+
+            case 'sendCheckFailed':
+            case 'sendCheckSucceeded':
+                this.toggleButtonLoader($('#send_btn'), false);
+                break;
+
+            case 'sendCheckCantPayFee':
+                this.toggleButtonLoader($('#send_btn'), false);
+                $('#amountInput').classList.add('error');
+
+                $('#notify').innerText = `Estimated fee is ~${formatNanograms(params.fee)} TON`;
+                triggerClass($('#notify'), 'faded-show', 3000)
+
+                break;
+
             case 'showScreen':
+                if (params.noAnimation) {
+                    triggerClass(document.body, 'disable-animations', 300);
+                }
+
                 this.showScreen(params.name);
 
                 switch (params.name) {
                     case 'start':
                         this.clearBalance();
+                        this.clearImportWords();
                         break;
                     case 'created':
                         break;
                     case 'import':
                         this.clearImportWords();
-                        $('#importInput0').focus();
+                        $('#importsInput0').focus();
                         break;
                     case 'backup':
+                        this.clearConfirmWords();
                         this.setBackupWords(params.words);
+                        this.backupShownTime = +new Date();
+                        break;
+                    case 'wordsConfirm':
+                        this.clearConfirmWords();
+                        this.clearBackupWords();
+                        $('#confirmInput0').focus();
+                        this.setConfirmWords(params.words);
                         break;
                     case 'createPassword':
                         this.clearImportWords();
+                        this.clearConfirmWords();
                         this.clearCreatePassword();
                         $('#createPassword_input').focus();
                         break;