From e454c098be7ec6adb17beee81cbcc26122dcc8c6 Mon Sep 17 00:00:00 2001
From: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Date: Wed, 10 May 2023 08:25:41 -0700
Subject: [PATCH] feat: added 'help' button on header (#772)

* fix: display EVM withdraw when users have balance in withdrawal

* fix: added help button on header

* fix: removed release note on the template.md

* fix: test

* fix: test (2)

* fix: display ModalConectionTrouble when app is loading
---
 .github/PULL_REQUEST_TEMPLATE.md              |   5 -
 src/components/assets/NativeAssetList.vue     |   2 +-
 src/components/common/ConnectionTrouble.vue   |  64 -------
 .../common/ModalConnectionTrouble.vue         |   1 +
 src/components/header/AccountButton.vue       |   3 +-
 src/components/header/Header.vue              |   3 +
 src/components/header/NetworkButton.vue       |   5 -
 src/components/header/TroubleHelp.vue         | 157 ++++++++++++++++++
 src/components/sidenav/SidebarDesktop.vue     |   3 -
 src/components/sidenav/SidebarOption.vue      |   3 -
 src/i18n/en-US/index.ts                       |   2 +-
 tests/dappstaking.spec.ts                     |   4 +-
 tests/header.spec.ts                          |  16 ++
 tests/sidebar.spec.ts                         |   9 -
 14 files changed, 182 insertions(+), 95 deletions(-)
 delete mode 100644 src/components/common/ConnectionTrouble.vue
 create mode 100644 src/components/header/TroubleHelp.vue
 create mode 100644 tests/header.spec.ts

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 1d2f0423f..a4cc6efa7 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -11,11 +11,6 @@
 - [ ] documentation changes
 - [ ] tested on mobile devices
 
-**Release notes:**
-
-- (ex: feat: updated dApp staking to V2)
-- (ex: fix: modified styling bugs on the Assets page)
-
 **This pull request makes the following changes:**
 
 **Adds**
diff --git a/src/components/assets/NativeAssetList.vue b/src/components/assets/NativeAssetList.vue
index 1577e53de..5dc73edac 100644
--- a/src/components/assets/NativeAssetList.vue
+++ b/src/components/assets/NativeAssetList.vue
@@ -106,7 +106,7 @@
               </div>
             </div>
 
-            <div class="row--bg--extend row--details-native bg--accent">
+            <div v-if="numEvmDeposit" class="row--bg--extend row--details-native bg--accent">
               <div class="row__left">
                 <span class="text--md">{{ $t('assets.yourEvmDeposit') }}</span>
               </div>
diff --git a/src/components/common/ConnectionTrouble.vue b/src/components/common/ConnectionTrouble.vue
deleted file mode 100644
index ea823bf0f..000000000
--- a/src/components/common/ConnectionTrouble.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="wrapper--connection-trouble">
-    <div class="row--connection-trouble" @click="setShowModal(true)">
-      <span class="text--connection-trouble">{{ $t('sidenavi.connectionTrouble') }}</span>
-    </div>
-    <modal-connection-trouble v-if="showModal" :set-is-open="setShowModal" :show="showModal" />
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import ModalConnectionTrouble from 'src/components/common/ModalConnectionTrouble.vue';
-
-export default defineComponent({
-  components: { ModalConnectionTrouble },
-  setup() {
-    const showModal = ref<boolean>(false);
-    const setShowModal = (isOpen: boolean): void => {
-      showModal.value = isOpen;
-    };
-    return { showModal, setShowModal };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import 'src/css/quasar.variables.scss';
-
-.wrapper--connection-trouble {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  padding: 0 16px;
-  @media (min-width: $lg) {
-    margin-top: 0px;
-    padding: 0;
-  }
-}
-.row--connection-trouble {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #fff;
-  border-radius: 100px;
-  padding: 8px;
-  cursor: pointer;
-  width: 100%;
-  transition: all 0.3s ease 0s;
-  &:hover {
-    border: 1px solid #fff;
-    .text--connection-trouble {
-      color: #fff;
-    }
-  }
-}
-
-.text--connection-trouble {
-  font-weight: 400;
-  font-size: 14px;
-  color: #fff;
-  transition: all 0.3s ease 0s;
-}
-</style>
diff --git a/src/components/common/ModalConnectionTrouble.vue b/src/components/common/ModalConnectionTrouble.vue
index cb940ff4d..e64d6892d 100644
--- a/src/components/common/ModalConnectionTrouble.vue
+++ b/src/components/common/ModalConnectionTrouble.vue
@@ -4,6 +4,7 @@
     :title="$t('assets.modals.connectionTroubles.connectionTroubles')"
     :is-closing="isClosingModal"
     :close-modal="closeModal"
+    class-name="highest-z-index"
   >
     <div class="wrapper--modal-connection-trouble">
       <div class="row--description">
diff --git a/src/components/header/AccountButton.vue b/src/components/header/AccountButton.vue
index c467b6458..9c2cc8094 100644
--- a/src/components/header/AccountButton.vue
+++ b/src/components/header/AccountButton.vue
@@ -7,7 +7,7 @@
       <img class="icon" width="16" :src="iconWallet" />
       <template v-if="width >= screenSize.sm">
         <span class="text--address">
-          {{ getShortenAddress(account) }}
+          {{ getShortenAddress(account, 4) }}
         </span>
       </template>
     </button>
@@ -51,7 +51,6 @@ export default defineComponent({
   align-items: center;
   padding: 8px 16px 8px 12px;
   border-radius: 16px;
-  margin-left: 16px;
   transition: all 0.3s ease 0s;
   background: transparent;
   color: #fff;
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 88a24b0e6..1c87a1c49 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -4,6 +4,7 @@
       <template #left>
         <div class="icon"><logo /></div>
       </template>
+      <trouble-help />
       <template v-if="!currentAccount">
         <connect-button @click="openSelectModal">
           <astar-icon-wallet />
@@ -61,6 +62,7 @@ import { useStore } from 'src/store';
 import { useRoute } from 'vue-router';
 import { getHeaderName } from 'src/router/routes';
 import { useBreakpoints } from 'src/hooks';
+import TroubleHelp from 'src/components/header/TroubleHelp.vue';
 import ConnectButton from 'src/components/header/ConnectButton.vue';
 import AccountButton from 'src/components/header/AccountButton.vue';
 import NetworkButton from 'src/components/header/NetworkButton.vue';
@@ -89,6 +91,7 @@ export default defineComponent({
     Logo,
     ModalUpdateWallet,
     HeaderComp,
+    TroubleHelp,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();
diff --git a/src/components/header/NetworkButton.vue b/src/components/header/NetworkButton.vue
index 04c64c081..c41d22152 100644
--- a/src/components/header/NetworkButton.vue
+++ b/src/components/header/NetworkButton.vue
@@ -21,11 +21,6 @@
         <img v-show="currentLogo" class="icon" width="16" :src="currentLogo" />
         <div class="column--network-name">
           <template v-if="width >= screenSize.md">
-            <span class="text--network">
-              {{ currentNetworkName }}
-            </span>
-          </template>
-          <template v-else-if="width >= screenSize.sm">
             <span class="text--network">
               {{ currentNetworkName.replace('Network', '') }}
             </span>
diff --git a/src/components/header/TroubleHelp.vue b/src/components/header/TroubleHelp.vue
new file mode 100644
index 000000000..0c856e90e
--- /dev/null
+++ b/src/components/header/TroubleHelp.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="wrapper--trouble-help">
+    <button
+      type="button"
+      :class="width >= screenSize.sm ? 'btn--help' : 'm-btn--help'"
+      @click="setShowModal(true)"
+    >
+      <div class="icon--help">
+        <astar-icon-help size="20" />
+      </div>
+      <template v-if="width >= screenSize.sm">
+        {{ $t('help') }}
+      </template>
+    </button>
+    <modal-connection-trouble v-if="showModal" :set-is-open="setShowModal" :show="showModal" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useBreakpoints } from 'src/hooks';
+import ModalConnectionTrouble from 'src/components/common/ModalConnectionTrouble.vue';
+
+export default defineComponent({
+  components: { ModalConnectionTrouble },
+  setup() {
+    const { width, screenSize } = useBreakpoints();
+    const showModal = ref<boolean>(false);
+    const setShowModal = (isOpen: boolean): void => {
+      showModal.value = isOpen;
+    };
+    return {
+      width,
+      screenSize,
+      showModal,
+      setShowModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+@import 'src/css/utils.scss';
+
+.wrapper--trouble-help {
+  margin-right: 8px;
+  @media (min-width: $lg) {
+    margin-right: 16px;
+  }
+}
+
+.btn--help {
+  display: flex;
+  height: 32px;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 16px 8px 16px;
+  background: transparent;
+  border-radius: 16px;
+  margin-left: 8px;
+  transition: all 0.3s ease 0s;
+  color: #fff;
+  border: 1px solid $gray-4;
+
+  @media (min-width: $lg) {
+    color: $navy-1;
+    border: 1px solid $navy-3;
+  }
+}
+.btn--help:hover {
+  background: $astar-blue;
+  border: 1px solid transparent;
+  .icon--help {
+    color: $gray-1;
+  }
+
+  @media (min-width: $lg) {
+    background: #fff;
+    border: 1px solid $gray-4;
+    .icon--help {
+      color: $navy-1;
+    }
+  }
+}
+
+.m-btn--help {
+  padding-left: 10px;
+  width: 32px;
+  height: 32px;
+  border: 1px solid $navy-3;
+  border-radius: 16px;
+  margin-left: 16px;
+  transition: all 0.3s ease 0s;
+
+  background: transparent;
+  color: $gray-3;
+  border: 1px solid $gray-4;
+
+  @media (min-width: $lg) {
+    border: 1px solid $navy-3;
+  }
+}
+
+.m-btn--help:hover {
+  background: $astar-blue;
+  border: 1px solid transparent;
+  .icon--help {
+    color: $gray-1;
+  }
+  @media (min-width: $lg) {
+    background: #fff;
+  }
+}
+
+.icon--help {
+  margin-right: 4px;
+  transition: all 0.3s ease 0s;
+  color: $gray-3;
+  margin-left: -6px;
+  margin-top: -1px;
+  @media (min-width: $lg) {
+    color: $navy-3;
+  }
+}
+
+.body--dark {
+  .btn--help {
+    background: transparent;
+    color: #fff;
+    border: 1px solid $gray-4;
+  }
+  .btn--help:hover {
+    background: $astar-blue;
+    border: 1px solid transparent;
+    .icon--help {
+      color: $gray-1;
+    }
+  }
+  .icon--help {
+    color: $gray-3;
+  }
+
+  .m-btn--help {
+    background: transparent;
+    color: $gray-3;
+    border: 1px solid $gray-4;
+  }
+  .m-btn--help:hover {
+    background: $astar-blue;
+    border: 1px solid transparent;
+    .icon--help {
+      color: $gray-1;
+    }
+  }
+}
+</style>
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
index b96d1b202..c464fb06f 100644
--- a/src/components/sidenav/SidebarDesktop.vue
+++ b/src/components/sidenav/SidebarDesktop.vue
@@ -95,7 +95,6 @@
     </nav>
 
     <div class="wrapper--bottom">
-      <connection-trouble />
       <social-media-links />
       <div class="wrapper--option">
         <light-dark-mode />
@@ -114,7 +113,6 @@ import LocaleChanger from '../common/LocaleChanger.vue';
 import SocialMediaLinks from '../common/SocialMediaLinks.vue';
 import LightDarkMode from '../common/LightDarkMode.vue';
 import Logo from '../common/Logo.vue';
-import ConnectionTrouble from 'src/components/common/ConnectionTrouble.vue';
 import { useRouter } from 'vue-router';
 import { Path as RoutePath } from 'src/router/routes';
 import IconSideNft from './components/IconSideNFT.vue';
@@ -127,7 +125,6 @@ export default defineComponent({
     LightDarkMode,
     LocaleChanger,
     Logo,
-    ConnectionTrouble,
     IconSideNft,
     IconEcosystem,
     Balloon,
diff --git a/src/components/sidenav/SidebarOption.vue b/src/components/sidenav/SidebarOption.vue
index b96dadeea..170aec185 100644
--- a/src/components/sidenav/SidebarOption.vue
+++ b/src/components/sidenav/SidebarOption.vue
@@ -168,7 +168,6 @@
           </div>
         </div>
       </q-expansion-item>
-      <connection-trouble />
       <div class="button--close" @click="closeMobileNavi">X {{ $t('sidenavi.close') }}</div>
     </q-list>
   </div>
@@ -181,12 +180,10 @@ import { useStore } from 'src/store';
 import { socialUrl, docsUrl } from 'src/links';
 import { languagesSelector } from 'src/i18n';
 import { i18n } from 'src/boot/i18n';
-import ConnectionTrouble from 'src/components/common/ConnectionTrouble.vue';
 
 export default defineComponent({
   components: {
     LightDarkMode,
-    ConnectionTrouble,
   },
   emits: ['closeNavi'],
   setup(props, { emit }) {
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 58e4c66e0..5142023e7 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -37,6 +37,7 @@ export default {
   isComingSoon: '{value} is coming soon',
   amountToken: '{amount} {token}',
   select: 'Select',
+  help: 'Help',
   sort: {
     sortBy: 'Sort by',
     amountHightToLow: 'Amount: High to Low',
@@ -116,7 +117,6 @@ export default {
     language: 'Language',
     theme: 'Theme',
     close: 'Close',
-    connectionTrouble: 'Connection Trouble?',
     comingsoon: 'Something ink!redible coming soon',
   },
   drawer: {
diff --git a/tests/dappstaking.spec.ts b/tests/dappstaking.spec.ts
index 8994edda6..8b97d3a42 100644
--- a/tests/dappstaking.spec.ts
+++ b/tests/dappstaking.spec.ts
@@ -40,8 +40,8 @@ test.describe('init screen', () => {
     await expect(page.getByRole('button', { name: 'box icon Connect' })).toBeVisible();
   });
 
-  test('should display the Astar Network button', async ({ page }) => {
-    await expect(page.getByRole('button', { name: 'Astar Network' })).toBeVisible();
+  test('should display the Astar button', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Astar' })).toBeVisible();
   });
 
   test('should display install extension popup when click Talisman button', async ({ page }) => {
diff --git a/tests/header.spec.ts b/tests/header.spec.ts
new file mode 100644
index 000000000..5c778387f
--- /dev/null
+++ b/tests/header.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+import { clickPolicyButton } from 'src/modules/playwright';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/astar/assets');
+});
+
+test.describe('init screen', () => {
+  test('has connection trouble', async ({ page }) => {
+    await clickPolicyButton(page);
+    const connectionTroubleButton = page.locator('.btn--help');
+    await connectionTroubleButton.click();
+    const connectionTroubleModal = page.locator('.wrapper--modal-connection-trouble');
+    await expect(connectionTroubleModal).toBeVisible();
+  });
+});
diff --git a/tests/sidebar.spec.ts b/tests/sidebar.spec.ts
index 3e25d0d2b..80d8dab18 100644
--- a/tests/sidebar.spec.ts
+++ b/tests/sidebar.spec.ts
@@ -1,19 +1,10 @@
 import { test, expect } from '@playwright/test';
-import { clickPolicyButton } from 'src/modules/playwright';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/astar/assets');
 });
 
 test.describe('init screen', () => {
-  test('has connection trouble', async ({ page }) => {
-    await clickPolicyButton(page);
-    const connectionTroubleButton = page.getByText('Connection Trouble');
-    await connectionTroubleButton.click();
-    const connectionTroubleModal = page.locator('.wrapper--modal-connection-trouble');
-    await expect(connectionTroubleModal).toBeVisible();
-  });
-
   test('click the dapp staking page', async ({ page }) => {
     const dappStakingButton = page.locator('a:has-text("dApp Staking")');
     await dappStakingButton.click();