From 4a8a2afde224d97cfabad67da53c58bd21995603 Mon Sep 17 00:00:00 2001
From: Yehor Podporinov <50983498+yehor-podporinov@users.noreply.github.com>
Date: Wed, 10 Jan 2024 16:41:52 +0200
Subject: [PATCH] Fix/UI (#6)

Co-authored-by: Yehor Podporinov <yehor.podporinov@Yehors-MacBook-Pro.local>
---
 package.json                                  |  1 +
 src/App.vue                                   | 14 ++++++--
 src/common/AppNavbar.vue                      |  8 ++++-
 src/common/AppNavbarMobile.vue                |  5 ++-
 src/common/ConnectWalletButton.vue            | 14 ++++++++
 src/common/InfoBar.vue                        |  9 +++++-
 src/common/index.ts                           |  1 +
 src/common/modals/compositions/ClaimModal.vue |  4 ++-
 .../modals/compositions/WithdrawModal.vue     |  9 +++---
 src/composables/use-nav-links.ts              |  2 +-
 src/localization/resources/en.json            |  6 ++--
 src/main.ts                                   |  8 ++++-
 src/pages/HomePage/views/CommunityView.vue    |  3 ++
 src/store/index.ts                            |  1 +
 src/store/modules/index.ts                    |  1 +
 src/store/modules/web3-providers.module.ts    |  9 ++++++
 src/styles/app.scss                           |  2 ++
 src/styles/reset.scss                         |  4 +++
 yarn.lock                                     | 32 +++++++++++++++++++
 19 files changed, 117 insertions(+), 16 deletions(-)
 create mode 100644 src/common/ConnectWalletButton.vue
 create mode 100644 src/store/modules/index.ts
 create mode 100644 src/store/modules/web3-providers.module.ts

diff --git a/package.json b/package.json
index cfe6444..2ee28a1 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.1.2",
+    "floating-vue": "^5.0.3",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
     "pinia": "^2.0.28",
diff --git a/src/App.vue b/src/App.vue
index d211f83..c950039 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,14 +19,17 @@
 <script lang="ts" setup>
 import { AppNavbar, AppNavbarMobile, InvalidNetworkModal } from '@/common'
 
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useNotifications } from '@/composables'
+import { useWeb3ProvidersStore } from '@/store'
 import { config } from '@config'
 import { bus, BUS_EVENTS, ErrorHandler } from '@/helpers'
 import { NotificationPayload } from '@/types'
 
+const web3ProvidersStore = useWeb3ProvidersStore()
+
 const isAppInitialized = ref(false)
-const isShownInvalidNetworkModal = ref(true)
+const isShownInvalidNetworkModal = ref(false)
 
 const { showToast } = useNotifications()
 
@@ -57,6 +60,13 @@ const initNotifications = () => {
 }
 
 init()
+
+watch(
+  () => web3ProvidersStore.isConnectedProvider,
+  () => {
+    isShownInvalidNetworkModal.value = true
+  },
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/common/AppNavbar.vue b/src/common/AppNavbar.vue
index 0595d59..9c91db7 100644
--- a/src/common/AppNavbar.vue
+++ b/src/common/AppNavbar.vue
@@ -8,12 +8,17 @@
         :text="link.text"
         :href="link.href"
         :route="link.route"
+        :target="link.href ? '_blank' : undefined"
+        :rel="link.href ? 'noopener noreferrer' : undefined"
         scheme="link"
         color="none"
         class="app-navbar__link"
       />
     </nav>
-    <app-button color="secondary" :text="$t('app-navbar.connect-wallet-btn')" />
+    <connect-wallet-button
+      color="secondary"
+      :text="$t('app-navbar.connect-wallet-btn')"
+    />
   </div>
 </template>
 
@@ -21,6 +26,7 @@
 import { useContext, useNavLinks } from '@/composables'
 import AppButton from './AppButton.vue'
 import AppLogo from './AppLogo.vue'
+import ConnectWalletButton from './ConnectWalletButton.vue'
 
 const { $t } = useContext()
 const { links } = useNavLinks()
diff --git a/src/common/AppNavbarMobile.vue b/src/common/AppNavbarMobile.vue
index 46aed63..c962706 100644
--- a/src/common/AppNavbarMobile.vue
+++ b/src/common/AppNavbarMobile.vue
@@ -24,13 +24,15 @@
                 :text="link.text"
                 :href="link.href"
                 :route="link.route"
+                :target="link.href ? '_blank' : undefined"
+                :rel="link.href ? 'noopener noreferrer' : undefined"
                 scheme="link"
                 color="none"
                 class="app-navbar-mobile__link"
                 @click="closeExt"
               />
             </nav>
-            <app-button
+            <connect-wallet-button
               class="app-navbar-mobile__connect-wallet-btn"
               color="secondary"
               :text="$t('app-navbar.connect-wallet-btn')"
@@ -51,6 +53,7 @@
 import { useContext, useNavLinks } from '@/composables'
 import AppButton from './AppButton.vue'
 import AppLogo from './AppLogo.vue'
+import ConnectWalletButton from './ConnectWalletButton.vue'
 import Icon from './Icon.vue'
 import { ref } from 'vue'
 
diff --git a/src/common/ConnectWalletButton.vue b/src/common/ConnectWalletButton.vue
new file mode 100644
index 0000000..89aca85
--- /dev/null
+++ b/src/common/ConnectWalletButton.vue
@@ -0,0 +1,14 @@
+<template>
+  <app-button @click="connect" />
+</template>
+
+<script lang="ts" setup>
+import { useWeb3ProvidersStore } from '@/store'
+import AppButton from './AppButton.vue'
+
+const web3ProvidersStore = useWeb3ProvidersStore()
+
+const connect = () => {
+  web3ProvidersStore.isConnectedProvider = true
+}
+</script>
diff --git a/src/common/InfoBar.vue b/src/common/InfoBar.vue
index 403184c..046da4f 100644
--- a/src/common/InfoBar.vue
+++ b/src/common/InfoBar.vue
@@ -24,6 +24,7 @@
           </h5>
           <icon
             v-if="indicator.note"
+            v-tooltip="indicator.note"
             class="info-bar__indicator-note"
             :name="$icons.exclamationCircle"
           />
@@ -137,12 +138,18 @@ defineProps<{
   @include body-4-regular;
 }
 
-.info-bar__indicator-note {
+.info-bar .info-bar__indicator-note {
   $color: #cccccc;
 
   color: $color;
   height: toRem(20);
   width: toRem(20);
+  pointer-events: unset;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
+
+  &:hover {
+    color: var(--text-secondary-light);
+  }
 }
 
 .info-bar__indicator-value {
diff --git a/src/common/index.ts b/src/common/index.ts
index 930589c..2696c41 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,6 +1,7 @@
 export { default as Icon } from '@/common/Icon.vue'
 export { default as AppButton } from '@/common/AppButton.vue'
 export { default as Collapse } from '@/common/Collapse.vue'
+export { default as ConnectWalletButton } from './ConnectWalletButton.vue'
 export { default as Accordion } from '@/common/Accordion.vue'
 export { default as NoDataMessage } from '@/common/NoDataMessage.vue'
 export { default as ErrorMessage } from '@/common/ErrorMessage.vue'
diff --git a/src/common/modals/compositions/ClaimModal.vue b/src/common/modals/compositions/ClaimModal.vue
index e5cf868..6d21cfd 100644
--- a/src/common/modals/compositions/ClaimModal.vue
+++ b/src/common/modals/compositions/ClaimModal.vue
@@ -37,8 +37,8 @@
 </template>
 
 <script lang="ts" setup>
-import BasicModal from '../BasicModal.vue'
 import { AppButton } from '@/common'
+import BasicModal from '../BasicModal.vue'
 
 const emit = defineEmits<{
   (e: 'update:is-shown', v: boolean): void
@@ -62,6 +62,8 @@ withDefaults(
 }
 
 .claim-modal__reward {
+  white-space: nowrap;
+
   @include body-1-semi-bold;
 }
 
diff --git a/src/common/modals/compositions/WithdrawModal.vue b/src/common/modals/compositions/WithdrawModal.vue
index eaeebf8..0f74a77 100644
--- a/src/common/modals/compositions/WithdrawModal.vue
+++ b/src/common/modals/compositions/WithdrawModal.vue
@@ -62,11 +62,6 @@ const props = withDefaults(
 const { $t } = useContext()
 
 const mockIndicators: Indicator[] = [
-  {
-    iconName: ICON_NAMES.arbitrum,
-    title: $t('withdraw-modal.available-to-claim-title'),
-    value: '36.748 MOR',
-  },
   {
     iconName: ICON_NAMES.ethereum,
     title: $t('withdraw-modal.available-to-withdraw-title'),
@@ -80,6 +75,10 @@ const mockIndicators: Indicator[] = [
   margin-top: toRem(24);
   display: grid;
   grid-gap: toRem(16);
+
+  @include respond-to(medium) {
+    margin-top: toRem(20);
+  }
 }
 
 .withdraw-modal__indicator {
diff --git a/src/composables/use-nav-links.ts b/src/composables/use-nav-links.ts
index 82dbe2a..e720d38 100644
--- a/src/composables/use-nav-links.ts
+++ b/src/composables/use-nav-links.ts
@@ -11,7 +11,7 @@ export const useNavLinks = () => {
     },
     {
       text: $t('app-navbar.chat-app-link'),
-      href: '',
+      href: 'https://mor.org/',
     },
   ]
 
diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
index fe1ef84..9a9ea30 100644
--- a/src/localization/resources/en.json
+++ b/src/localization/resources/en.json
@@ -6,7 +6,7 @@
   },
   "claim-modal": {
     "title": "Claim rewards",
-    "subtitle": "You are about to Claim Rewards. Please check the information below and confirm action. Your current reward - {reward}",
+    "subtitle": "You are about to Claim Rewards. Your current reward - {reward}",
     "reward": "{amount} MOR.",
     "close-btn": "Cancel",
     "claim-btn": "Claim"
@@ -19,7 +19,7 @@
   },
   "deposit-modal": {
     "title": "Deposit",
-    "subtitle": "Lorem ipsum dolor sit amet consectetur. Habitasse sed dignissim in laoreet quam ipsum nisl. In viverra quam urna in amet erat et."
+    "subtitle": "Your funds will be redirected to the platform. Enter the desired amount, in case of the first transaction, you will need to authorize the transfer of funds."
   },
   "home-page": {
     "community-tab": "Community",
@@ -92,7 +92,7 @@
   },
   "withdraw-modal": {
     "title": "Withdraw funds",
-    "subtitle": "Lorem ipsum dolor sit amet consectetur. Habitasse sed dignissim in laoreet quam ipsum nisl. In viverra quam urna in amet erat et.",
+    "subtitle": "Specify the amount to be withdrawn. The funds will be sent to your wallet.",
     "available-to-claim-title": "Will be claimed",
     "available-to-withdraw-title": "Available to withdraw"
   },
diff --git a/src/main.ts b/src/main.ts
index 4409699..ad40f86 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import 'virtual:svg-icons-register'
 import App from '@/App.vue'
 import log from 'loglevel'
 
+import FloatingVue from 'floating-vue'
 import VueToastificationPlugin from 'vue-toastification'
 import { ICON_NAMES, ROUTE_NAMES } from '@/enums'
 import { createApp, getCurrentInstance, h } from 'vue'
@@ -29,7 +30,12 @@ const initApp = async () => {
   try {
     log.setDefaultLevel(config.LOG_LEVEL)
 
-    app.use(router).use(store).use(i18n).use(VueToastificationPlugin)
+    app
+      .use(router)
+      .use(store)
+      .use(i18n)
+      .use(VueToastificationPlugin)
+      .use(FloatingVue)
 
     app.config.globalProperties.$routes = ROUTE_NAMES
     app.config.globalProperties.$config = config
diff --git a/src/pages/HomePage/views/CommunityView.vue b/src/pages/HomePage/views/CommunityView.vue
index 8a7ff9e..66b2f26 100644
--- a/src/pages/HomePage/views/CommunityView.vue
+++ b/src/pages/HomePage/views/CommunityView.vue
@@ -17,6 +17,9 @@
           class="community-view__bar-button"
           scheme="link"
           color="none"
+          href="https://help.lido.fi/en/articles/5232811-how-do-i-get-steth"
+          target="_blank"
+          rel="noopener noreferrer"
           :text="$t('home-page.community-view.external-link')"
           :icon-right="$icons.externalLink"
         />
diff --git a/src/store/index.ts b/src/store/index.ts
index 1db098b..e608234 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,3 +3,4 @@ import { createPinia } from 'pinia'
 const store = createPinia()
 
 export { store }
+export * from './modules'
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
new file mode 100644
index 0000000..c9c42b9
--- /dev/null
+++ b/src/store/modules/index.ts
@@ -0,0 +1 @@
+export * from './web3-providers.module'
diff --git a/src/store/modules/web3-providers.module.ts b/src/store/modules/web3-providers.module.ts
new file mode 100644
index 0000000..61bf22d
--- /dev/null
+++ b/src/store/modules/web3-providers.module.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+const STORE_NAME = 'web3-providers-store'
+
+export const useWeb3ProvidersStore = defineStore(STORE_NAME, {
+  state: () => ({
+    isConnectedProvider: false,
+  }),
+})
diff --git a/src/styles/app.scss b/src/styles/app.scss
index fae7a02..01768b9 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -4,4 +4,6 @@
 
 @import 'global';
 
+@import 'floating-vue/dist/style.css';
+
 @import 'vue-toastification/dist/index.css';
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 66b8569..88cfe3f 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -57,3 +57,7 @@ table {
     outline: none;
   }
 }
+
+svg:focus {
+  outline: none;
+}
diff --git a/yarn.lock b/yarn.lock
index 8bf741a..64d0765 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -222,6 +222,25 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
+"@floating-ui/core@^1.1.0":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
+  integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@~1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.1.tgz#66aa747e15894910869bf9144fc54fc7d6e9f975"
+  integrity sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==
+  dependencies:
+    "@floating-ui/core" "^1.1.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -2155,6 +2174,14 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+floating-vue@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-5.0.3.tgz#aa6643c7080408cfdd6ad392d7a016c2f3dede05"
+  integrity sha512-AM7yczIuFACI6T2l8z0ozpTSqHDagcxiQCCanUqvm7Zxtk4CUJNyF6nSuBkkeEYX6hDyTAcmNHe2NJ5x54qnnw==
+  dependencies:
+    "@floating-ui/dom" "~1.1.1"
+    vue-resize "^2.0.0-alpha.1"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -4697,6 +4724,11 @@ vue-i18n@^9.2.2:
     "@intlify/vue-devtools" "9.2.2"
     "@vue/devtools-api" "^6.2.1"
 
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@^4.1.6:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.4.tgz#382467a7e2923e6a85f015d081e1508052c191b9"