feat: bridge

components/bridge/Navigation.vue

@@ -1,18 +1,9 @@
 <template>
-  <div>
-    <PageTitle>Bridge</PageTitle>
-    <div class="flex items-center justify-between">
-      <CommonButton v-if="!account.address" class="-my-1" variant="primary" @click="onboardStore.openModal">
-        Connect wallet
-      </CommonButton>
-      <BridgeAccountButton v-else />
-    </div>
-    <CommonTabs :modelValue="activeTab" :options="tabs" class="my-4">
-      <template #tab="{ item }: { item: NavigationTab }">
-        <NuxtLink class="block h-full w-full" :to="{ name: item.routeName }" replace>{{ item.label }}</NuxtLink>
-      </template>
-    </CommonTabs>
-  </div>
+  <CommonTabs :modelValue="activeTab" :options="tabs" class="mb-4">
+    <template #tab="{ item }: { item: NavigationTab }">
+      <NuxtLink class="block h-full w-full" :to="{ name: item.routeName }" replace>{{ item.label }}</NuxtLink>
+    </template>
+  </CommonTabs>
 </template>
 
 <script lang="ts">
@@ -34,17 +25,11 @@ export const tabs: NavigationTab[] = [
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import { storeToRefs } from "pinia";
-
 import type { TabsOption } from "@/components/common/Tabs.vue";
 
 import { useRoute } from "#app";
-import { useOnboardStore } from "@/store/onboard";
 
 const route = useRoute();
 
-const onboardStore = useOnboardStore();
-const { account } = storeToRefs(onboardStore);
-
 const activeTab = computed(() => tabs.find((tab) => tab.routeName === route.name)?.key);
 </script>

components/common/Alert.vue

@@ -34,7 +34,7 @@ defineProps({
   }
 }
 .alert-container {
-  @apply w-full rounded-[1.24rem] p-4 wrap-balance;
+  @apply w-full rounded-[1.24rem] p-4;
   &.has-icon {
     @apply grid grid-cols-[1.25rem_1fr] gap-3;
   }

components/common/ContentBlock.vue

@@ -1,11 +1,22 @@
 <template>
-  <div class="content-block-container">
+  <component class="content-block-container" :is="as">
     <slot />
-  </div>
+  </component>
 </template>
 
+<script lang="ts" setup>
+import type { Component, PropType } from "vue";
+
+defineProps({
+  as: {
+    type: [String, Object] as PropType<string | Component>,
+    default: "label",
+  },
+});
+</script>
+
 <style lang="scss" scoped>
 .content-block-container {
-  @apply h-max w-full rounded-3xl bg-white px-block-padding-1/2 py-block-padding dark:bg-neutral-900 sm:px-block-padding;
+  @apply block h-max w-full rounded-3xl bg-white px-block-padding-1/2 py-block-padding dark:bg-neutral-900 sm:px-block-padding;
 }
 </style>

components/common/button/Button.vue

@@ -20,7 +20,7 @@ defineProps({
     default: "default",
   },
   size: {
-    type: String as PropType<"sm" | "md">,
+    type: String as PropType<"xs" | "sm" | "md">,
     default: "md",
   },
 });

components/common/button/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <CommonButton class="dropdown-button-container">
+  <CommonButton class="dropdown-button">
     <div v-if="$slots['left-icon']" class="left-icon-container">
       <slot name="left-icon" />
     </div>
@@ -28,7 +28,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-.dropdown-button-container {
+.dropdown-button {
   @apply flex items-center justify-start gap-2;
 
   .left-icon-container {
@@ -48,7 +48,7 @@ defineProps({
 </style>
 
 <style lang="scss">
-.dropdown-button-container {
+.dropdown-button {
   .left-icon-container,
   .right-icon-container {
     img,

components/common/input/TransactionAddress.vue

@@ -1,16 +1,31 @@
 <template>
-  <CommonInputContainer for="transaction-address-input">
-    <div class="font-bold">{{ label }}</div>
+  <CommonContentBlock for="transaction-address-input">
+    <div class="flex items-center gap-4">
+      <div class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+        <div class="font-bold">{{ label }}</div>
+        <slot name="dropdown" />
+      </div>
+      <div v-if="defaultLabel" class="ml-auto text-right">
+        <span class="font-bold">{{ inputVisible ? "To another account" : defaultLabel }}</span>
+        <button
+          class="ml-1 text-neutral-800 underline underline-offset-2 transition hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
+          @click="toggleCustomValue()"
+        >
+          Change
+        </button>
+      </div>
+    </div>
     <CommonInputLine
+      v-if="inputVisible"
+      v-model.trim="inputted"
       :has-error="!!addressError"
       id="transaction-address-input"
-      class="mt-4 text-lg"
-      v-model.trim="inputted"
       placeholder="Address or ENS"
       type="text"
       maxlength="42"
       spellcheck="false"
       autocomplete="off"
+      class="mt-4 text-lg"
     />
     <CommonInputError>
       <transition v-bind="TransitionOpacity()">
@@ -19,11 +34,11 @@
         </span>
       </transition>
     </CommonInputError>
-  </CommonInputContainer>
+  </CommonContentBlock>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
 import { isAddress } from "viem";
 
@@ -38,6 +53,9 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  defaultLabel: {
+    type: String,
+  },
 });
 
 const emit = defineEmits<{
@@ -50,6 +68,23 @@ const inputted = computed({
   set: (value: string) => emit("update:modelValue", value),
 });
 
+const usingCustomValue = ref(false);
+const toggleCustomValue = () => {
+  usingCustomValue.value = !usingCustomValue.value;
+  if (usingCustomValue.value) {
+    nextTick(() => {
+      const inputElement = document?.getElementById("transaction-address-input");
+      inputElement?.focus?.();
+    });
+  } else {
+    inputted.value = "";
+  }
+};
+
+const inputVisible = computed(() => {
+  return !props.defaultLabel || usingCustomValue.value || inputted.value;
+});
+
 const isAddressValid = computed(() => isAddress(inputted.value));
 const addressError = computed(() => {
   if (inputted.value && !isAddressValid.value) {

components/common/input/TransactionAmount.vue

@@ -11,14 +11,17 @@
         <slot name="token-dropdown-bottom" />
       </template>
     </TokenSelectDropdown>
-    <CommonInputContainer for="transaction-amount-input">
+    <CommonContentBlock for="transaction-amount-input">
       <div class="flex items-center gap-4">
-        <div class="font-bold">{{ label }}</div>
+        <div class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+          <div class="font-bold">{{ label }}</div>
+          <slot name="dropdown" />
+        </div>
         <transition v-bind="TransitionOpacity()">
           <button
             v-if="displayedMaxAmount && displayedMaxAmount !== '0'"
             type="button"
-            class="ml-auto text-neutral-800 dark:text-neutral-400"
+            class="ml-auto text-right text-neutral-800 transition hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
             :class="{ 'is-max': isMaxAmountSet }"
             :title="isMaxAmountSet ? 'Max amount is set' : `Your max amount is ${maxDecimalAmount}`"
             @click.prevent="setMaxAmount()"
@@ -73,7 +76,7 @@
           </span>
         </transition>
       </CommonInputError>
-    </CommonInputContainer>
+    </CommonContentBlock>
   </div>
 </template>
 

components/destination/IconContainer.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="aspect-square h-full w-full rounded-full bg-gray-100 p-3 text-neutral-950 dark:bg-neutral-50">
+    <slot />
+  </div>
+</template>

components/modal/contacts/Contact.vue

@@ -16,11 +16,7 @@
 
       <TypographyCategoryLabel>Actions</TypographyCategoryLabel>
       <CommonButtonGroup>
-        <CommonButton
-          variant="primary"
-          as="RouterLink"
-          :to="{ name: 'transaction-zksync-era-send', query: { address: contact.address } }"
-        >
+        <CommonButton variant="primary" as="RouterLink" :to="{ name: 'send', query: { address: contact.address } }">
           <template #icon>
             <PaperAirplaneIcon aria-hidden="true" />
           </template>

components/transaction/EthereumTransactionFooter.vue

@@ -89,7 +89,7 @@ const continueInWalletTipDisplayed = computed(() => {
 
 <style lang="scss" scoped>
 .transaction-footer {
-  @apply sticky bottom-0 z-10 mt-auto flex flex-col items-center bg-gray bg-opacity-60 pb-2 pt-4 backdrop-blur-sm dark:bg-neutral-950;
+  @apply sticky bottom-0 z-10 flex flex-col items-center bg-neutral-50/60 bg-opacity-60 pb-2 pt-4 backdrop-blur-sm dark:bg-black dark:bg-opacity-60;
 
   .transaction-footer-row {
     @apply flex w-full flex-col items-center;

components/transaction/FeeDetails.vue

@@ -91,6 +91,6 @@ const totalPrice = computed(() => {
 
 <style lang="scss" scoped>
 .fee-details-container {
-  @apply flex items-center text-neutral-700 dark:text-neutral-500;
+  @apply flex items-center whitespace-nowrap text-neutral-700 dark:text-neutral-500;
 }
 </style>

components/transaction/zksync/era/EraTransferLineItem.vue

@@ -21,7 +21,7 @@
       <TokenAmount v-if="token" :token="token" :amount="computeAmount" :direction="direction" />
     </template>
     <template #bottom-right>
-      <TotalPrice v-if="token" :token="token" :amount="computeAmount" :direction="direction" :loading="priceLoading" />
+      <TotalPrice v-if="token" :token="token" :amount="computeAmount" :direction="direction" />
     </template>
   </TransactionLineItem>
 </template>
@@ -131,9 +131,6 @@ const computeAmount = computed(() => {
 const token = computed(() => {
   return props.transfer.token;
 });
-const priceLoading = computed(() => {
-  return token.value?.price === "loading";
-});
 const icon = computed(() => {
   switch (props.transfer.type) {
     case "transfer":

components/transaction/zksync/era/EraTransferSuccessfulModal.vue

@@ -52,7 +52,7 @@
       </CommonAlert>
 
       <TransactionConfirmModalFooter>
-        <CommonButtonTopLink as="RouterLink" :to="{ name: 'transaction-zksync-era' }">
+        <CommonButtonTopLink as="RouterLink" :to="{ name: 'send-methods' }">
           Make another transaction
         </CommonButtonTopLink>
         <CommonButton as="RouterLink" :to="{ name: 'index' }" class="w-full" variant="primary">

components/transaction/zksync/era/EraWithdrawalSuccessfulModal.vue

@@ -34,7 +34,7 @@
 
       <TransactionConfirmModalFooter>
         <template v-if="layout === 'default'">
-          <CommonButtonTopLink as="RouterLink" :to="{ name: 'transaction-zksync-era' }">
+          <CommonButtonTopLink as="RouterLink" :to="{ name: 'send-methods' }">
             Make another transaction
           </CommonButtonTopLink>
           <CommonButton as="RouterLink" :to="{ name: 'index' }" class="w-full" variant="primary">

composables/zksync/era/deposit/useTransaction.ts

@@ -1,5 +1,5 @@
-import type { ConfirmationModalTransaction } from "@/components/transaction/zksync/era/deposit/ConfirmTransactionModal.vue";
 import type { DepositFeeValues } from "@/composables/zksync/era/deposit/useFee";
+import type { BigNumberish } from "ethers";
 import type { L1Signer } from "zksync-web3";
 
 import { formatError } from "@/utils/formatters";
@@ -9,7 +9,14 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
   const error = ref<Error | undefined>();
   const ethTransactionHash = ref<string | undefined>();
 
-  const commitTransaction = async (transaction: ConfirmationModalTransaction, fee: DepositFeeValues) => {
+  const commitTransaction = async (
+    transaction: {
+      to: string;
+      tokenAddress: string;
+      amount: BigNumberish;
+    },
+    fee: DepositFeeValues
+  ) => {
     try {
       error.value = undefined;
 
@@ -29,7 +36,7 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
       }
       const depositResponse = await wallet.deposit({
         to: transaction.to,
-        token: transaction.token.address,
+        token: transaction.tokenAddress,
         amount: transaction.amount,
         l2GasLimit: fee.l2GasLimit,
         overrides,

layouts/default.vue

@@ -29,7 +29,7 @@ const { isConnectingWallet } = storeToRefs(useOnboardStore());
   grid-template-rows: auto 1fr;
 
   .app-layout-main {
-    @apply flex min-h-0 w-full min-w-0 max-w-[700px] flex-col justify-self-center p-2 md:px-0 md:py-4;
+    @apply flex min-h-0 w-full min-w-0 max-w-[640px] flex-col justify-self-center p-2 md:px-0 md:py-4;
   }
 }
 </style>

pages/balances.vue

@@ -24,7 +24,7 @@
               v-for="item in group.balances"
               as="div"
               :key="item.address"
-              :send-route-name="eraNetwork.l1Network ? 'transaction-zksync-era' : 'transaction-zksync-era-send'"
+              :send-route-name="eraNetwork.l1Network ? 'send-methods' : 'send'"
               v-bind="item"
             />
           </CommonCardWithLineButtons>