Avoid avoid wordbazzar errors adn fix css

fix lint: Expected newline after ","

fix lint

backendFetchSilent to avoid wordbazzar errors

backendFetchSilent

common button for popups

condition for net::ERR_CONNECTION_REFUSED

avoid worbazzar responce error handling

Update src/components/Button.vue

Co-authored-by: Denis Davidyuk <denis_davidyuk@hotmail.com>

remove js from button

fix modal css

src/components/AlertModal.vue

@@ -16,12 +16,11 @@
         >
           {{ row }}
         </p>
-        <button
-          class="button"
+        <Button
           @click="resolve"
         >
           {{ primaryButtonText }}
-        </button>
+        </Button>
       </div>
     </div>
   </div>
@@ -30,8 +29,12 @@
 <script>
 import SuccessIcon from '../assets/verifiedUrl.svg';
 import FailureIcon from '../assets/iconError.svg';
+import Button from './Button.vue';
 
 export default {
+  components: {
+    Button,
+  },
   props: {
     title: { type: String, required: true },
     body: { type: [String, Array], required: true },
@@ -91,18 +94,6 @@ export default {
       font-size: 1rem;
       font-weight: 500;
     }
-
-    .button {
-      background-color: $secondary_color;
-      border: none;
-      border-radius: 0.25rem;
-      color: $standard_font_color;
-      font-size: 0.75rem;
-      font-weight: 700;
-      justify-self: center;
-      line-height: 1.125;
-      padding: 0.65rem 1rem;
-    }
   }
 }
 </style>

src/components/Button.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    class="button"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  background-color: $secondary_color;
+  border: none;
+  border-radius: 0.25rem;
+  color: $standard_font_color;
+  font-size: 0.75rem;
+  font-weight: 700;
+  justify-self: center;
+  line-height: 1.125;
+  padding: 0.65rem 1.3rem;
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+}
+</style>

src/components/ErrorModal.vue

@@ -33,18 +33,17 @@
           class="report-text"
           :placeholder="$t('reportBug.Placeholder')"
         />
-        <button
-          class="button cancel"
+        <Button
+          class="cancel"
           @click="resolve"
         >
           {{ $t('reportBug.Cancel') }}
-        </button>
-        <button
-          class="button"
+        </Button>
+        <Button
           @click="send"
         >
           {{ $t('reportBug.Send') }}
-        </button>
+        </Button>
       </template>
       <template v-else>
         <IconOK />
@@ -57,12 +56,11 @@
         <p class="successDescription">
           {{ $t('reportBug.Success.Description') }}
         </p>
-        <button
-          class="button"
+        <Button
           @click="resolve"
         >
           {{ $t('reportBug.Success.Return') }}
-        </button>
+        </Button>
       </template>
     </div>
   </div>
@@ -76,6 +74,7 @@ import IconEye from '../assets/iconEye.svg?icon-component';
 import IconOK from '../assets/iconOK.svg?icon-component';
 import ButtonPlain from './ButtonPlain.vue';
 import { issueReport } from '../utils/backend';
+import Button from './Button.vue';
 
 export default {
   components: {
@@ -84,6 +83,7 @@ export default {
     IconEye,
     IconOK,
     ButtonPlain,
+    Button,
   },
   props: {
     resolve: { type: Function, required: true },
@@ -120,26 +120,28 @@ export default {
 
 <style lang="scss" scoped>
 .error-modal {
-  vertical-align: middle;
   padding-top: 5rem;
   position: fixed;
+  justify-content: center;
+  align-items: center;
   z-index: 9998;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  display: table;
+  display: flex;
   background-color: rgba(0, 0, 0, 0.5);
 
   .modal-body {
     text-align: center;
     margin: 0 auto;
-    padding: 2.5rem 1.6em 3.5rem 1.6em;
+    padding: 2.5rem 1.6em 2.5rem 1.6em;
     background: #131313;
     border-radius: 0.25rem;
     border: 1px solid $card_border_color;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
-    width: 448px;
+    height: auto;
+    max-width: 448px;
 
     @include smallest {
       width: 100%;
@@ -257,7 +259,8 @@ export default {
     margin-bottom: 40px;
   }
 
-  .APIError, .iconOK {
+  .APIError,
+  .iconOK {
     height: 48px;
   }
 }

src/styles/_variables.scss

@@ -19,7 +19,7 @@ $thumbnail_background_color: #0f0f0f;
 $thumbnail_background_color_alt: #272727;
 $preview_description_font_color: #90909c;
 $buttons_background: #141414;
-$card_border_color: #2f2f2f;
+$card_border_color: #131313;
 $card_hover_color: #191919;
 
 $super_dark: #0f0f0f;

src/utils/backend.js

@@ -116,7 +116,11 @@ export default class Backend {
     if (ordering) queryParams.set('ordering', ordering);
     if (direction) queryParams.set('direction', direction);
     if (search) queryParams.set('search', search);
-    return backendFetch(`tokenCache/wordRegistry?${queryParams.toString()}`);
+    return backendFetch(`tokenCache/wordRegistry?${queryParams.toString()}`)
+      .catch((err) => {
+        console.log(`tokenCache/wordRegistry response with: ${err}`);
+        return [];
+      });
   }
 
   static getWordSaleVotesDetails = async (address) => backendFetch(`tokenCache/wordSaleVotesDetails/${address}`);

src/utils/index.js

@@ -95,6 +95,7 @@ export const wrapTry = async (promise) => {
   // eslint-disable-next-line no-useless-catch
   try {
     return promise.then((res) => {
+      if (!res) throw new Error('Responce object is undefined');
       if (!res.ok) throw new Error(`Request failed with status ${res.status}`);
       return res.json();
     });