Fix/UI (#6)

Co-authored-by: Yehor Podporinov <[email protected]>

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",

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>

src/common/AppNavbar.vue

@@ -8,19 +8,25 @@
         :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>
 
 <script lang="ts" setup>
 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()

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'
 

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>

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 {

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'

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;
 }
 

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 {

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/',
     },
   ]
 

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"
   },

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

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"
         />

src/store/index.ts

@@ -3,3 +3,4 @@ import { createPinia } from 'pinia'
 const store = createPinia()
 
 export { store }
+export * from './modules'

src/store/modules/index.ts

@@ -0,0 +1 @@
+export * from './web3-providers.module'

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,
+  }),
+})

src/styles/app.scss

@@ -4,4 +4,6 @@
 
 @import 'global';
 
+@import 'floating-vue/dist/style.css';
+
 @import 'vue-toastification/dist/index.css';

src/styles/reset.scss

@@ -57,3 +57,7 @@ table {
     outline: none;
   }
 }
+
+svg:focus {
+  outline: none;
+}

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"