New Landing (+ Loading Screen) (#148)

* Replace 'Intro' with 'Loading Screen' * Prettier * Changelog update * Empty commit to kick Fleek * Clicking logo directs to Dashboard * Wait for import to avoid Loading UI glitches
PIVX-Labs · Jul 4, 2023 · f9f80d5 · f9f80d5
1 parent 2bfa375
commit f9f80d5
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 109 deletions.
diff --git a/assets/img_governance.png b/assets/img_governance.png
diff --git a/assets/img_pos.png b/assets/img_pos.png
diff --git a/assets/img_privacy.png b/assets/img_privacy.png
diff --git a/assets/img_slider_bars.png b/assets/img_slider_bars.png
diff --git a/changelog.md b/changelog.md
@@ -5,6 +5,7 @@
 - Per-update changelog: You're reading it right now!
 
 # Improvements
+- New Landing: landing replaced with a loader.
 - New Settings screen design, sleek and intuitive.
 - New Explorer: explorer.duddino.com.
 

diff --git a/index.template.html b/index.template.html
@@ -43,7 +43,7 @@
         <!-- NAVBAR -->
         <nav class="navbar navbar-expand-lg sticky-top navbar-dark navbarSpecial">
           <div class="container">
-            <img onclick="MPW.openTab(event, 'home')" style="cursor: pointer;" class="nav-logo navbar-brand noselect" alt="PIVX" id="mpw-main-logo" />
+            <img onclick="MPW.openTab(event, 'keypair')" style="cursor: pointer;" class="nav-logo navbar-brand noselect" alt="PIVX" id="mpw-main-logo" />
             <button id="navbarToggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
@@ -185,109 +185,15 @@ <h3 class="modal-title" id="confirmModalTitle" style="text-align: center; width:
         <div class="container">
           <div class="row no-gutters">
             <div class="col-md-12 rm-pd">
-              <div id="home" class="tabcontent" style="display: block;">
+              <div class="tabcontent" style="display: block;">
                 <!-- PIVX TITLE SECTION -->
                 <div class="col-md-12 title-section float-left rm-pd">
                   <h1 class="pivx-bold-title center-text">
-                    <span data-i18n="title">Welcome to</span>
-                    <div data-i18n="titleName">My PIVX Wallet!</div>
+                    <span data-i18n="loadingTitle">My PIVX Wallet is</span>
+                    <div data-i18n="loading">Loading</div>
                   </h1>
                 </div>
                 <!-- // PIVX TITLE SECTION -->
-
-                <!-- PIVX FEATURE SECTION -->
-                <div class="col-md-12 features-section float-left rm-pd intro-page">
-                  <!-- PIVX FEATURE -->
-                  <div class="col-md-6 float-left pivx-feature-father">
-                    <div class="col-md-11 pivx-feature-interior">
-                      <div class="col-md-12 feature-icon">
-                        <img id="img-governance" alt="PIVX Governance" />
-                      </div>
-
-                      <h4 data-i18n="cardOneTitle">Be your own Bank!</h4>
-                      <h5 data-i18n="cardOneDesc">MyPIVXWallet has <b>no custody</b> over your funds. You are in full ownership of your keys and your PIV.</h5>
-                      <span onclick="window.location.href='https://forum.pivx.org/threads/mypivxwallet-an-easy-open-source-self-sovereign-pivx-wallet.873/'" class="purple-icon-link ptr">
-                        <span data-i18n="cardOneLink">Know more</span>
-                        <span class="link-icon link-icon-suffix">
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                            <path d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"></path>
-                          </svg>
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                  <!-- // PIVX FEATURE -->
-
-                  <!-- PIVX FEATURE -->
-                  <div class="col-md-6 float-left pivx-feature-father">
-                    <div class="col-md-11 pivx-feature-interior">
-                      <div class="col-md-12 feature-icon">
-                        <img id="img-pos" alt="PIVX Proof of Stake (PoS)" />
-                      </div>
-
-                      <h4 data-i18n="cardTwoTitle">Universal and Portable</h4>
-                      <h5 data-i18n="cardTwoDesc">
-                        You can generate cryptographically-secure addresses with your browser and hardware.
-                      </h5>
-                      <span onclick="window.location.href='https://forum.pivx.org/threads/mypivxwallet-an-easy-open-source-self-sovereign-pivx-wallet.873/'" class="purple-icon-link ptr">
-                        <span data-i18n="cardTwoLink">Know more</span>
-                        <span class="link-icon link-icon-suffix">
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                            <path d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"></path>
-                          </svg>
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                  <!-- // PIVX FEATURE -->
-
-                  <!-- PIVX FEATURE -->
-                  <div class="col-md-6 float-left pivx-feature-father">
-                    <div class="col-md-11 pivx-feature-interior">
-                      <div class="col-md-12 feature-icon">
-                        <img id="img-privacy" alt="PIVX Privacy" class="smaller-feature" />
-                      </div>
-
-                      <h4 data-i18n="cardThreeTitle">Don't trust, verify!</h4>
-                      <h5 data-i18n="cardThreeDesc">
-                        MyPIVXWallet is completely open-source, available on the PIVX Labs github.
-                      </h5>
-                      <span onclick="window.location.href='https://forum.pivx.org/threads/mypivxwallet-an-easy-open-source-self-sovereign-pivx-wallet.873/'" class="purple-icon-link ptr">
-                        <span data-i18n="cardThreeLink">Know more</span>
-                        <span class="link-icon link-icon-suffix">
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                            <path d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"></path>
-                          </svg>
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                  <!-- // PIVX FEATURE -->
-
-                  <!-- PIVX FEATURE -->
-                  <div class="col-md-6 float-left pivx-feature-father">
-                    <div class="col-md-11 pivx-feature-interior">
-                      <div class="col-md-12 feature-icon">
-                        <img id="img-slider-bars" alt="PIVX Bar Chart" class="smaller-feature" />
-                      </div>
-
-                      <h4 data-i18n="cardFourTitle">For the community</h4>
-                      <h5 data-i18n="cardFourDesc">
-                        MyPIVXWallet is built with love without any fees, privacy intrusions or advertising.
-                      </h5>
-                      <span onclick="window.location.href='https://forum.pivx.org/threads/mypivxwallet-an-easy-open-source-self-sovereign-pivx-wallet.873/'" class="purple-icon-link ptr">
-                        <span data-i18n="cardFourLink">Know more</span>
-                        <span class="link-icon link-icon-suffix">
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                            <path d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"></path>
-                          </svg>
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                  <!-- // PIVX FEATURE -->
-                </div>
-                <!-- // PIVX FEATURE SECTION -->
               </div>
 
               <!-- KEYPAIR SECTION -->

diff --git a/locale/en/translation.js b/locale/en/translation.js
@@ -25,8 +25,8 @@ export const en_translation = {
     footerBuiltWithPivxLabs: 'Built with 💜 by PIVX Labs', //
 
     // Intro
-    title: 'Welcome to', //
-    titleName: 'My PIVX Wallet!', //
+    loading: 'Loading', //
+    loadingTitle: 'My PIVX Wallet is', //
 
     cardOneTitle: 'Be your own Bank!', //
     cardOneDesc:

diff --git a/locale/template/translation.js b/locale/template/translation.js
@@ -43,8 +43,8 @@ var translation = {
     footerBuiltWithPivxLabs: '', //Built with 💜 by PIVX Labs
 
     // Intro
-    title: '', //Welcome to
-    titleName: '', //My PIVX Wallet!
+    loading: '', //Loading
+    loadingTitle: '', //My PIVX Wallet is
 
     cardOneTitle: '', //Be your own Bank!
     cardOneDesc: '', //MyPIVXWallet has <b>no custody</b> over your funds. You are in full ownership of your keys and your PIV.

diff --git a/locale/uwu/translation.js b/locale/uwu/translation.js
@@ -25,8 +25,8 @@ export const uwu_translation = {
     footerBuiltWithPivxLabs: 'Built with wuv by PIVX Wabs❣', //Built with 💜 by PIVX Labs
 
     // Intro
-    title: 'Wewcome to', //Welcome to
-    titleName: 'My PIVX Wawwet!', //My PIVX Wallet!
+    loading: 'Loading', //
+    loadingTitle: 'My PIVX Wawwet is', //
 
     cardOneTitle: 'Be da bank!', //Be your own Bank!
     cardOneDesc:

diff --git a/scripts/global.js b/scripts/global.js
@@ -355,7 +355,7 @@ export async function start() {
 
         // Import the wallet, and toggle the startup flag, which delegates the chain data refresh to settingsStart();
         if (publicKey) {
-            importWallet({ newWif: publicKey, fStartup: true });
+            await importWallet({ newWif: publicKey, fStartup: true });
 
             // Payment processor popup
             if (reqTo.length || reqAmount > 0) {
@@ -391,6 +391,9 @@ export async function start() {
 
     // Check for recent upgrades, display the changelog
     checkForUpgrades();
+
+    // If we haven't already (due to having no wallet, etc), display the Dashboard
+    doms.domDashboard.click();
 }
 
 function subscribeToNetworkEvents() {
@@ -946,10 +949,6 @@ async function loadImages() {
     const images = [
         ['mpw-main-logo', import('../assets/logo.png')],
         ['privateKeyImage', import('../assets/key.png')],
-        ['img-governance', import('../assets/img_governance.png')],
-        ['img-pos', import('../assets/img_pos.png')],
-        ['img-privacy', import('../assets/img_privacy.png')],
-        ['img-slider-bars', import('../assets/img_slider_bars.png')],
     ];
 
     const promises = images.map(([id, path]) =>