fix: mobile improvements

matter-labs · Jan 3, 2024 · 83cf7e5 · 83cf7e5
1 parent 8eb42c6
commit 83cf7e5
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 19 deletions.
diff --git a/components/common/input/TransactionAddress.vue b/components/common/input/TransactionAddress.vue
@@ -1,11 +1,11 @@
 <template>
   <CommonContentBlock for="transaction-address-input" as="label" class="transaction-address-input">
-    <div class="flex items-center gap-4">
-      <div class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+    <div class="flex flex-wrap items-center justify-between gap-4">
+      <div class="flex items-center gap-2 overflow-hidden">
         <div class="font-bold">{{ label }}</div>
         <slot name="dropdown" />
       </div>
-      <div v-if="defaultLabel && isConnected" class="ml-auto text-right">
+      <div v-if="defaultLabel && isConnected">
         <span class="font-bold">{{ inputVisible ? "To another account" : defaultLabel }}</span>
         <CommonButtonLabel variant="light" class="ml-1" @click="toggleCustomValue()">
           {{ inputVisible ? "Use my account" : "Change" }}

diff --git a/components/common/input/TransactionAmount.vue b/components/common/input/TransactionAmount.vue
@@ -12,14 +12,14 @@
       </template>
     </TokenSelectModal>
     <CommonContentBlock for="transaction-amount-input" as="label">
-      <div class="flex items-center gap-4">
-        <div class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div class="flex items-center gap-2 overflow-hidden">
           <div class="font-bold">{{ label }}</div>
           <slot name="dropdown" />
         </div>
         <transition v-bind="TransitionOpacity()">
           <template v-if="displayedMaxAmount && displayedMaxAmount !== '0'">
-            <span class="ml-auto text-right">
+            <span>
               <CommonButtonLabel variant="light" as="span">Max:&nbsp;</CommonButtonLabel>
               <CommonButtonLabel
                 variant="light"

diff --git a/components/header/Header.vue b/components/header/Header.vue
@@ -12,12 +12,16 @@
       <NuxtLink
         class="link-item"
         :to="{ name: 'index' }"
-        :class="{ 'router-link-exact-active': route.name === 'withdraw' }"
+        :class="{ 'router-link-exact-active': routes.bridge.includes(route.name?.toString() || '') }"
       >
         <ArrowsUpDownIcon class="link-icon" aria-hidden="true" />
         Bridge
       </NuxtLink>
-      <NuxtLink class="link-item" :to="{ name: 'assets' }">
+      <NuxtLink
+        class="link-item"
+        :to="{ name: 'assets' }"
+        :class="{ 'router-link-exact-active': routes.assets.includes(route.name?.toString() || '') }"
+      >
         <WalletIcon class="link-icon" aria-hidden="true" />
         Assets
       </NuxtLink>
@@ -70,6 +74,11 @@ import { useOnboardStore } from "@/store/onboard";
 
 const route = useRoute();
 
+const routes = {
+  bridge: ["index", "withdraw"],
+  assets: ["assets", "balances", "receive-methods", "receive", "send-methods", "send"],
+};
+
 const onboardStore = useOnboardStore();
 const { isConnected } = storeToRefs(onboardStore);
 
@@ -95,11 +104,15 @@ const { selectedColorMode, switchColorMode } = useColorMode();
     .link-item {
       @apply flex items-center gap-1 text-lg text-neutral-600 dark:text-neutral-500;
       &.router-link-exact-active {
-        @apply text-neutral-950 dark:text-white;
+        @apply text-black dark:text-white;
+
+        .link-icon {
+          @apply text-black dark:text-white;
+        }
       }
 
       .link-icon {
-        @apply h-6 w-6;
+        @apply h-6 w-6 text-neutral-400 dark:text-neutral-500;
       }
     }
   }

diff --git a/components/token/TokenBalance.vue b/components/token/TokenBalance.vue
@@ -6,7 +6,6 @@
     :decimals="decimals"
     :icon-url="iconUrl"
     :as="sendRouteName ? 'RouterLink' : as"
-    :icon="sendRouteName ? PaperAirplaneIcon : undefined"
     :to="sendRouteName ? { name: sendRouteName, query: { token: address } } : undefined"
     class="token-balance"
     :class="{ 'is-zero-amount': isZeroAmount }"
@@ -33,7 +32,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import { PaperAirplaneIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 
 import type { TokenPrice } from "@/types";

diff --git a/components/token/TokenImage.vue b/components/token/TokenImage.vue
@@ -1,7 +1,25 @@
 <template>
   <CommonImageLoader :src="iconUrl" :alt="`${symbol} token icon`" class="token-image-container">
     <template #placeholder>
-      <div class="token-placeholder"></div>
+      <div class="token-placeholder">
+        <svg
+          v-if="!iconUrl"
+          class="no-icon-placeholder"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="xMidYMid meet"
+          aria-hidden="true"
+        >
+          <text
+            x="50%"
+            y="55%"
+            dominant-baseline="middle"
+            text-anchor="middle"
+            style="fill: currentColor; font-size: 50px"
+          >
+            {{ symbol[0] }}
+          </text>
+        </svg>
+      </div>
     </template>
   </CommonImageLoader>
 </template>
@@ -24,6 +42,10 @@ defineProps({
 
   .token-placeholder {
     @apply h-full w-full rounded-full border border-neutral-400 bg-neutral-200 dark:border-neutral-500 dark:bg-neutral-700;
+
+    .no-icon-placeholder {
+      @apply h-full w-full opacity-50;
+    }
   }
 }
 </style>
diff --git a/pages/balances.vue b/pages/balances.vue
@@ -25,7 +25,9 @@
               as="div"
               :key="item.address"
               show-name-link
-              :send-route-name="eraNetwork.l1Network ? 'send-methods' : 'send'"
+              :send-route-name="
+                item.amount === '0' ? 'receive-methods' : eraNetwork.l1Network ? 'send-methods' : 'send'
+              "
               v-bind="item"
             />
           </CommonCardWithLineButtons>
@@ -49,17 +51,17 @@ import { useZkSyncWalletStore } from "@/store/zksync/wallet";
 import { groupBalancesByAmount } from "@/utils/mappers";
 
 const onboardStore = useOnboardStore();
-const walletStore = useZkSyncWalletStore();
+const walletEraStore = useZkSyncWalletStore();
 const { isConnected } = storeToRefs(onboardStore);
-const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
+const { balance, balanceInProgress, balanceError } = storeToRefs(walletEraStore);
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
 const { loading, reset: resetSingleLoading } = useSingleLoading(computed(() => balanceInProgress.value));
 
 const balanceGroups = groupBalancesByAmount(balance);
 
 const fetch = () => {
-  walletStore.requestBalance();
+  walletEraStore.requestBalance();
 };
 fetch();
 

diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
@@ -53,12 +53,13 @@
               :toggled="fromNetworkModalOpened"
               size="xs"
               variant="light"
+              class="overflow-hidden"
               @click="fromNetworkModalOpened = true"
             >
               <template #left-icon>
                 <img :src="destinations.era.iconUrl" class="h-full w-full" />
               </template>
-              <span>{{ destinations.era.label }}</span>
+              <span class="truncate">{{ destinations.era.label }}</span>
             </CommonButtonDropdown>
           </template>
         </CommonInputTransactionAmount>
@@ -75,12 +76,13 @@
               :toggled="toNetworkModalOpened"
               size="xs"
               variant="light"
+              class="overflow-hidden"
               @click="toNetworkModalOpened = true"
             >
               <template #left-icon>
                 <img :src="destination.iconUrl" class="h-full w-full" />
               </template>
-              <span>{{ destination.label }}</span>
+              <span class="truncate">{{ destination.label }}</span>
             </CommonButtonDropdown>
           </template>
         </CommonInputTransactionAddress>