feat(solana): error popup shows whenever an error occurs to prevent i…

…nfinite loading (#3062)

components/ui/Popups/ErrorNetwork/ErrorNetwork.html

@@ -0,0 +1,21 @@
+<div class="error-network-container">
+  <div class="modal-body">
+    <div class="custom-modal-content">
+      <img src="~/assets/svg/mascot/sad_curious.svg" class="mascot" />
+      <TypographyTitle :text="$t('popups.error_network.title')" class="title" />
+      <TypographyText
+        :text="$t('popups.error_network.subtitle')"
+        :size="6"
+        class="subtitle"
+      />
+      <InteractablesButton type="primary" class="action" :action="tryAgain">
+        <refresh-cw-icon size="1.5x" />
+        <TypographyText
+          :text="$t('popups.error_network.action')"
+          :size="6"
+          class="text"
+        />
+      </InteractablesButton>
+    </div>
+  </div>
+</div>

components/ui/Popups/ErrorNetwork/ErrorNetwork.less

@@ -0,0 +1,45 @@
+.error-network-container {
+  &:extend(.modal-gradient);
+  padding: 1rem;
+
+  .modal-body {
+    .custom-modal-content {
+      padding: 0 1rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .title {
+        font-size: 1.9rem;
+        color: @secondary-text;
+        margin-top: 2rem;
+        text-align: center;
+      }
+
+      .subtitle {
+        color: @secondary-text;
+        margin-top: 0.5rem;
+      }
+
+      .mascot {
+        width: 15rem;
+        height: 15rem;
+      }
+
+      .action {
+        width: 100%;
+
+        .text {
+          margin: 0 0.5rem;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @mobile-breakpoint) {
+  .error-network-container {
+    max-width: 550px;
+  }
+}

components/ui/Popups/ErrorNetwork/ErrorNetwork.vue

@@ -0,0 +1,56 @@
+<template src="./ErrorNetwork.html" />
+
+<script>
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import { throttle } from 'lodash'
+
+import { RefreshCwIcon } from 'satellite-lucide-icons'
+
+import { Config } from '~/config'
+
+/**
+ * @component Error
+ * @description Component that takes an error message to display including source and extra details.
+ * setTimeout prop is a bool that if true will auto close the modal after 5 seconds
+ * @example
+ */
+export default Vue.extend({
+  name: 'ErrorNetwork',
+  components: {
+    RefreshCwIcon,
+  },
+  watch: {
+    $route(to, from) {
+      if (to !== from) {
+        this.closeNetworkErrorPopup()
+      }
+    },
+  },
+  methods: {
+    /**
+     * @method toggleNetworkErrorPopup
+     * @description
+     * @example
+     */
+    closeNetworkErrorPopup() {
+      this.$store.commit('ui/toggleErrorNetworkModal', {
+        state: false,
+        action: null,
+      })
+    },
+    /**
+     * @method tryAgain
+     * @description
+     * @example
+     */
+    tryAgain: throttle(function () {
+      this.$store.state.ui.modals.errorNetwork.action()
+      this.closeNetworkErrorPopup()
+    }, Config.modal.errorNetworkActionThrottle),
+  },
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less" src="./ErrorNetwork.less"></style>

config.ts

@@ -191,4 +191,7 @@ export const Config = {
     android: 10836, // lowest android value, some phones can handle more
     electron: 11180, // including for completeness sake
   },
+  modal: {
+    errorNetworkActionThrottle: 1000,
+  },
 }

layouts/default.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="app" :class="$store.state.ui.theme.base.class">
+    <UiModal v-if="$store.state.ui.modals.errorNetwork.isOpen" nopad>
+      <UiPopupsErrorNetwork />
+    </UiModal>
     <Nuxt />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>

locales/en-US.js

@@ -127,6 +127,12 @@ export default {
       contact:
         'Oops! Something went wrong! Help us improve your experience by sending an error report',
     },
+    error_network: {
+      title: 'Oops! Please Stand By',
+      subtitle:
+        "We're currently in our Alpha stage and working hard on connecting you to a satellite. It looks like we're having some technical issues at the moment. Please re-enter your pin to connect or try again later.",
+      action: 'Try Again',
+    },
   },
   files: {
     files: 'Files',

pages/auth/register/index.vue

@@ -42,17 +42,30 @@ export default Vue.extend({
   },
   watch: {
     allPrerequisitesReady(nextValue) {
+      console.log(nextValue)
       if (!nextValue) return
       this.$router.replace('/chat/direct')
     },
   },
+  mounted() {
+    if (this.allPrerequisitesReady) {
+      this.$router.replace('/chat/direct')
+    }
+  },
   methods: {
     async confirm(userData: UserRegistrationData) {
-      this.$store.dispatch('accounts/registerUser', {
-        name: userData.username,
-        image: userData.photoHash,
-        status: userData.status,
-      })
+      try {
+        await this.$store.dispatch('accounts/registerUser', {
+          name: userData.username,
+          image: userData.photoHash,
+          status: userData.status,
+        })
+      } catch (error: any) {
+        this.$store.commit('ui/toggleErrorNetworkModal', {
+          state: true,
+          action: () => this.confirm(userData),
+        })
+      }
     },
   },
 })

pages/index.vue

@@ -75,10 +75,17 @@ export default Vue.extend({
       } catch (error: any) {
         if (error.message === AccountsError.USER_NOT_REGISTERED) {
           this.$router.replace('/auth/register')
+          return
         }
         if (error.message === AccountsError.USER_DERIVATION_FAILED) {
           this.$router.replace('/setup/disclaimer')
+          return
         }
+
+        this.$store.commit('ui/toggleErrorNetworkModal', {
+          state: true,
+          action: this.loadAccount,
+        })
       }
     },
   },

store/ui/__snapshots__/state.test.ts.snap

@@ -54,6 +54,10 @@ Object {
     "creategroup": false,
     "crop": false,
     "error": false,
+    "errorNetwork": Object {
+      "action": null,
+      "isOpen": false,
+    },
     "glyph": false,
     "groupInvite": Object {
       "isOpen": false,

store/ui/mutations.ts

@@ -103,6 +103,13 @@ export default {
     // @ts-ignore
     state.modals[modal.name] = modal.state
   },
+  toggleErrorNetworkModal(
+    state: UIState,
+    modal: { state: boolean; action: Function | null },
+  ) {
+    // @ts-ignore
+    state.modals.errorNetwork = { isOpen: modal.state, action: modal.action }
+  },
   setGlyphModalPack(state: UIState, pack: string) {
     state.glyphModalPack = pack
   },

store/ui/state.ts

@@ -38,6 +38,7 @@ const InitialUIState = (): UIState => ({
     callToAction: false,
     renameFile: false,
     crop: false,
+    errorNetwork: { isOpen: false, action: null },
   },
   glyphModalPack: '',
   chatbarContent: '',

store/ui/types.ts

@@ -172,7 +172,7 @@ export interface UIState {
   showSearchResult: boolean
   showSidebar: boolean
   modals: {
-    [key: string]: boolean
+    [key: string]: boolean | object
   }
   glyphModalPack: string
   chatbarContent: string