feat: network switch modal, display network in the sidebar

matter-labs · May 26, 2023 · 9bc9b13 · 9bc9b13
1 parent e30d3e2
commit 9bc9b13
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 256 deletions.
diff --git a/components/common/Modal.vue b/components/common/Modal.vue
@@ -78,13 +78,19 @@ const props = defineProps({
 });
 
 const emit = defineEmits<{
+  (eventName: "close"): void;
   (eventName: "update:opened", value: boolean): void;
   (eventName: "after-leave", value: boolean): void;
 }>();
 
 const isModalOpened = computed({
   get: () => props.opened,
-  set: (value) => emit("update:opened", value),
+  set: (value) => {
+    if (!value) {
+      emit("close");
+    }
+    emit("update:opened", value);
+  },
 });
 const closeOnBackgroundClick = () => {
   if (props.closeOnBackgroundClick) {

diff --git a/components/destination/DestinationItem.vue b/components/destination/DestinationItem.vue
@@ -1,7 +1,9 @@
 <template>
   <CommonButtonLineWithImg :as="as" class="destination-item">
     <template #image>
-      <CommonImageLoader class="destination-item-icon" :src="iconUrl" />
+      <slot name="image">
+        <CommonImageLoader class="destination-item-icon" :src="iconUrl" />
+      </slot>
     </template>
     <template #default>
       <div class="destination-item-info">

diff --git a/components/modal/NetworkChange.vue b/components/modal/NetworkChange.vue
@@ -0,0 +1,49 @@
+<template>
+  <CommonModal v-bind="$attrs" title="Change network" @close="closeModal">
+    <CommonCardWithLineButtons>
+      <DestinationItem
+        v-for="item in chains"
+        :key="item.network"
+        :as="isNetworkSelected(item.network) ? 'button' : 'a'"
+        :label="item.name"
+        :href="getNetworkUrl(item, route.path)"
+        :icon="isNetworkSelected(item.network) ? CheckIcon : undefined"
+        :icon-url="item.iconUrl"
+        @click="buttonClicked(item.network)"
+      >
+        <template #image v-if="!item.iconUrl">
+          <div
+            class="flex h-full w-full items-center justify-center rounded-full border bg-white text-lg font-medium text-gray-secondary"
+          >
+            {{ getFirstLetter(item.name) }}
+          </div>
+        </template>
+      </DestinationItem>
+    </CommonCardWithLineButtons>
+  </CommonModal>
+</template>
+
+<script lang="ts" setup>
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
+
+import { useRoute } from "#app";
+import { chains, useNetworkStore } from "@/store/network";
+import { getNetworkUrl } from "@/utils/helpers";
+
+const emit = defineEmits<{
+  (eventName: "update:opened", state: boolean): void;
+}>();
+
+const route = useRoute();
+
+const { selectedEthereumNetwork } = storeToRefs(useNetworkStore());
+const isNetworkSelected = (network: string) => selectedEthereumNetwork.value.network === network;
+const buttonClicked = (network: string) => {
+  if (isNetworkSelected(network)) {
+    closeModal();
+  }
+};
+const closeModal = () => emit("update:opened", false);
+const getFirstLetter = (name: string) => name.slice(0, 1).toUpperCase();
+</script>
diff --git a/components/modal/transaction/WithdrawExchangeWarning.vue b/components/modal/transaction/WithdrawExchangeWarning.vue
@@ -2,23 +2,36 @@
   <CommonModal v-bind="$attrs" title="Withdraw to exchange" @after-leave="checked = false">
     <p class="leading-normal">
       When withdrawing to an exchange account, please make sure that your exchange supports transfers from smart
-      contracts. Otherwise, this can result in <span class="font-medium text-red-600">loss of funds</span>
+      contracts. Otherwise, this can result in <span class="font-medium text-red-600">loss of funds</span>.
+    </p>
+    <p class="leading-normal">
+      If you are unsure, the safest way would be to firstly
+      <NuxtLink :to="buttonLocation" class="link">withdraw to {{ selectedEthereumNetwork.name }} (L1)</NuxtLink> and
+      then send funds to the exchange.
     </p>
 
     <div class="mt-3 flex items-start">
-      <div class="flex h-6 items-center">
-        <input
-          v-model="checked"
-          id="risc"
-          aria-describedby="risc-description"
-          name="risc"
-          type="checkbox"
-          class="h-5 w-5 rounded border-gray-400 text-primary-600 focus:ring-primary-600"
-          @keyup.enter="checked = !checked"
-        />
-      </div>
-      <label id="risc-description" for="risc" class="ml-3 text-sm font-medium leading-6">
-        I understand the risks of losing funds
+      <label for="risc" class="flex cursor-pointer items-center">
+        <div class="relative">
+          <input type="checkbox" id="risc" v-model="checked" class="sr-only" tabindex="-1" />
+          <div
+            class="flex h-6 w-6 items-center justify-center rounded-md border-2 border-gray-300 bg-white outline-none ring-primary-400 ring-offset-2 focus:ring-2"
+            v-bind:class="{ 'bg-primary-600 border-primary-600': checked }"
+            tabindex="0"
+            @keyup.enter="checked = !checked"
+          >
+            <svg v-show="checked" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+        <div id="risc-description" class="ml-3 text-sm font-medium leading-6">
+          I understand the risks of losing funds
+        </div>
       </label>
     </div>
 
@@ -37,15 +50,21 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
+import { storeToRefs } from "pinia";
+
 import type { PropType } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
+import { useNetworkStore } from "@/store/network";
+
 defineProps({
   buttonLocation: {
     type: Object as PropType<RouteLocationRaw>,
     required: true,
   },
 });
 
+const { selectedEthereumNetwork } = storeToRefs(useNetworkStore());
+
 const checked = ref(false);
 </script>
diff --git a/components/sidebar/AccountButton.vue b/components/sidebar/AccountButton.vue
@@ -1,8 +1,10 @@
 <template>
-  <Popover as="div" class="account-button-container">
-    <PopoverButton as="template">
+  <Menu as="div" class="account-button-container">
+    <ModalNetworkChange v-model:opened="networkChangeModalOpened" />
+
+    <MenuButton as="template">
       <SidebarAccountAvatarName hide-name-on-mobile class="main-account-button" />
-    </PopoverButton>
+    </MenuButton>
 
     <transition
       enter-active-class="transition ease-out duration-100"
@@ -12,30 +14,54 @@
       leave-from-class="transform opacity-100"
       leave-to-class="transform opacity-0"
     >
-      <PopoverPanel class="popover-panel">
-        <PopoverButton as="template">
-          <SidebarAccountAvatarName class="popover-account-button" tabindex="-1" title="Click to close popup" />
-        </PopoverButton>
+      <MenuItems class="menu-panel">
+        <MenuButton as="template">
+          <SidebarAccountAvatarName class="menu-account-button" tabindex="-1" title="Click to close popup" />
+        </MenuButton>
 
-        <div class="popover-options">
-          <SidebarNetworkSelect />
-          <button class="account-menu-item has-hover" @click="onboardStore.disconnect">
-            <PowerIcon class="account-menu-item-icon p-2" aria-hidden="true" />
-            Logout
-          </button>
+        <div class="menu-options">
+          <MenuItem v-slot="{ active }" as="template">
+            <button class="account-menu-item" :class="{ active }" @click="networkChangeModalOpened = true">
+              <img
+                v-if="selectedEthereumNetwork.iconUrl"
+                :src="selectedEthereumNetwork.iconUrl"
+                :alt="selectedEthereumNetwork.name"
+                class="account-menu-item-icon p-1"
+              />
+              <div v-else class="account-menu-item-icon">{{ selectedEthereumNetwork.name.slice(0, 1) }}</div>
+              <div class="flex items-center justify-between">
+                <span>{{ selectedEthereumNetwork.name }}</span>
+                <ChevronDownIcon class="mr-1 ml-2 h-4 w-4 transition-transform" aria-hidden="true" />
+              </div>
+            </button>
+          </MenuItem>
+          <MenuItem v-slot="{ active }" as="template">
+            <button class="account-menu-item" :class="{ active }" @click="onboardStore.disconnect">
+              <PowerIcon class="account-menu-item-icon p-2" aria-hidden="true" />
+              Logout
+            </button>
+          </MenuItem>
         </div>
-      </PopoverPanel>
+      </MenuItems>
     </transition>
-  </Popover>
+  </Menu>
 </template>
 
 <script lang="ts" setup>
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+import { ref } from "vue";
+
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/24/outline";
 import { PowerIcon } from "@heroicons/vue/24/solid";
+import { storeToRefs } from "pinia";
 
+import { useNetworkStore } from "@/store/network";
 import { useOnboardStore } from "@/store/onboard";
 
+const { selectedEthereumNetwork } = storeToRefs(useNetworkStore());
 const onboardStore = useOnboardStore();
+
+const networkChangeModalOpened = ref(false);
 </script>
 
 <style lang="scss">
@@ -45,42 +71,40 @@ const onboardStore = useOnboardStore();
   .main-account-button {
     @apply transition-colors hover:bg-gray-200;
   }
-  .popover-panel {
-    @apply absolute left-0 bottom-0 z-10 h-max w-56 rounded-lg bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none md:-left-px md:-top-px md:p-px;
-    display: grid;
+  .menu-panel {
+    @apply absolute left-0 bottom-0 z-10 grid h-max w-56 rounded-lg bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none md:-left-px md:-top-px md:p-px;
     grid-template-areas:
-      "popover-options"
+      "menu-options"
       "account-button";
     grid-template-rows: repeat(2, max-content);
     @media screen and (min-width: 720px) {
       grid-template-areas:
         "account-button"
-        "popover-options";
+        "menu-options";
     }
 
-    .popover-account-button {
+    .menu-account-button {
       grid-area: account-button;
     }
-    .popover-options {
+    .menu-options {
       @apply border-b p-1 md:border-b-0 md:border-t;
-      grid-area: popover-options;
-    }
-  }
-  .account-menu-item {
-    @apply grid w-full grid-cols-[max-content_1fr] items-center gap-3 rounded-lg px-2 py-2 text-left leading-6 text-gray-900 transition-colors xl:px-4;
-    &.has-hover:hover {
-      @apply bg-gray-100 text-primary-400;
+      grid-area: menu-options;
 
-      .account-menu-item-icon {
-        @apply bg-white text-primary-400;
+      .account-menu-item {
+        @apply grid w-full grid-cols-[max-content_1fr] items-center gap-3 rounded-lg px-2 py-2 text-left leading-6 text-gray-900 transition-colors xl:px-4;
+        &.active {
+          @apply bg-gray-100 text-primary-400;
+
+          .account-menu-item-icon {
+            @apply bg-white text-primary-400;
+          }
+        }
+
+        .account-menu-item-icon {
+          @apply flex aspect-square h-auto w-8 items-center justify-center rounded-full bg-gray-50 text-center text-gray-500;
+        }
       }
     }
   }
-  .account-menu-item-icon {
-    @apply flex aspect-square h-auto w-8 items-center justify-center rounded-full bg-gray-50 text-center text-gray-500;
-    &.small {
-      @apply w-6;
-    }
-  }
 }
 </style>