From 66b39c4f5defed3b8762b2e71cc6a513d4eb3cfc Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Tue, 19 Dec 2023 21:11:12 +0200
Subject: [PATCH] feat: lot more things

---
 assets/css/_mixins.scss                       |   7 +
 assets/css/style.scss                         |  12 +-
 components/address/AddressAvatar.vue          |   2 +-
 components/animations/ProgressBlocks.vue      |  23 --
 components/common/Alert.vue                   |   6 +-
 components/common/AmountInput.vue             | 330 ------------------
 components/common/ContentBlock.vue            |   4 +-
 components/common/ContentLoader.vue           |   2 +-
 components/common/InfoContent.vue             |   4 +-
 components/common/LabelButton.vue             |  28 --
 components/common/Modal.vue                   |  59 +++-
 components/common/QrCodeStyled.vue            |   2 +-
 components/common/button/Button.vue           |   9 +-
 components/common/button/Label.vue            |  46 +++
 components/common/button/Line.vue             |   4 +-
 components/common/button/LineBodyInfo.vue     |   2 +-
 components/common/input/InputLine.vue         |   5 +-
 .../common/input/TransactionAddress.vue       |  12 +-
 components/common/input/TransactionAmount.vue |  35 +-
 components/destination/DestinationItem.vue    |   8 +-
 components/destination/IconContainer.vue      |   2 +-
 components/header/AccountDropdown.vue         |   2 +-
 components/header/NetworkDropdown.vue         |   2 +-
 components/modal/contacts/AddContact.vue      | 115 ------
 components/modal/contacts/Contact.vue         |  66 ----
 .../modal/transaction/AllowanceInfo.vue       |  22 ++
 .../modal/zksync/lite/AccountActivation.vue   |  19 -
 .../modal/zksync/lite/WalletAuthorization.vue |  21 --
 components/token/TokenImage.vue               |   6 +-
 components/token/TokenLine.vue                |   5 +-
 components/transaction/Header.vue             |  69 ----
 .../transaction/TransactionItemIcon.vue       |  31 --
 .../transaction/TransactionProgress.vue       | 168 +++++++++
 .../lineItem/TransactionLineItem.vue          |  19 +-
 components/transaction/summary/TokenEntry.vue |   4 +-
 composables/transaction/useAllowance.ts       |  78 ++++-
 nuxt.config.ts                                |  10 +
 package-lock.json                             |  66 +---
 package.json                                  |   1 -
 pages/index.vue                               |   2 +-
 pages/send-methods.vue                        |   6 +-
 tailwind.config.js                            |  80 ++---
 views/zksync/era/transactions/Deposit.vue     | 146 +++++---
 views/zksync/era/transactions/Transfer.vue    |  79 ++---
 44 files changed, 576 insertions(+), 1043 deletions(-)
 create mode 100644 assets/css/_mixins.scss
 delete mode 100644 components/animations/ProgressBlocks.vue
 delete mode 100644 components/common/AmountInput.vue
 delete mode 100644 components/common/LabelButton.vue
 create mode 100644 components/common/button/Label.vue
 delete mode 100644 components/modal/contacts/AddContact.vue
 delete mode 100644 components/modal/contacts/Contact.vue
 create mode 100644 components/modal/transaction/AllowanceInfo.vue
 delete mode 100644 components/modal/zksync/lite/AccountActivation.vue
 delete mode 100644 components/modal/zksync/lite/WalletAuthorization.vue
 delete mode 100644 components/transaction/Header.vue
 delete mode 100644 components/transaction/TransactionItemIcon.vue
 create mode 100644 components/transaction/TransactionProgress.vue

diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss
new file mode 100644
index 000000000..a9f760f91
--- /dev/null
+++ b/assets/css/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin interactiveStyles {
+  &:enabled,
+  &[interactive="true"]:not([aria-disabled="true"]),
+  &:is(a, label):not([aria-disabled="true"]) {
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 491f6859c..7e0effabc 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -3,19 +3,9 @@ html.dark {
 }
 html,
 body {
-  @apply min-h-full w-full bg-gray font-sans antialiased dark:bg-black dark:text-white;
+  @apply min-h-full text-neutral-950 w-full bg-neutral-50 font-sans antialiased dark:bg-black dark:text-white;
   -webkit-text-size-adjust: 100%;
 
-  .link {
-    @apply font-medium text-primary-400 transition-colors dark:text-primary-200;
-    &:enabled,
-    &:is(a) {
-      &:not([aria-disabled="true"]) {
-        @apply hover:text-primary-300;
-      }
-    }
-  }
-
   .tippy-box {
     @apply rounded-lg text-sm;
     &[data-theme~="light"] {
diff --git a/components/address/AddressAvatar.vue b/components/address/AddressAvatar.vue
index 6a862cf89..8bb779020 100644
--- a/components/address/AddressAvatar.vue
+++ b/components/address/AddressAvatar.vue
@@ -26,7 +26,7 @@ defineProps({
     @apply h-full w-full;
   }
   .address-avatar-icon {
-    @apply absolute -bottom-1 -right-1 aspect-square h-[60%] w-[60%] rounded-full bg-white bg-opacity-90 shadow backdrop-blur-sm;
+    @apply absolute -bottom-1 -right-1 aspect-square h-[60%] w-[60%] rounded-full bg-neutral-100 bg-opacity-90 shadow backdrop-blur-sm;
 
     img,
     svg {
diff --git a/components/animations/ProgressBlocks.vue b/components/animations/ProgressBlocks.vue
deleted file mode 100644
index 66715464d..000000000
--- a/components/animations/ProgressBlocks.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <Vue3Lottie class="progress-blocks-animation" :animation-data="ProgressBlocks" loop />
-</template>
-
-<script lang="ts" setup>
-import ProgressBlocks from "@/assets/lottie/progress-blocks.json";
-</script>
-
-<style lang="scss">
-.progress-blocks-animation {
-  .primary-colored-cube g {
-    &:nth-child(2) path {
-      @apply fill-[#8FACFD] lite:fill-primary-200;
-    }
-    &:nth-child(3) path {
-      @apply fill-primary-800 lite:fill-primary-600;
-    }
-    &:nth-child(4) path {
-      @apply fill-primary-700 lite:fill-[#6668C7];
-    }
-  }
-}
-</style>
diff --git a/components/common/Alert.vue b/components/common/Alert.vue
index dfa960429..e1e8f1b9e 100644
--- a/components/common/Alert.vue
+++ b/components/common/Alert.vue
@@ -40,15 +40,15 @@ defineProps({
   }
   &.variant- {
     &info {
-      @apply border bg-primary-100 text-primary-700;
-      @apply dark:border-primary-200/50 dark:bg-primary-200/10 dark:text-white;
+      @apply border bg-primary-300 text-primary-700;
+      @apply dark:border-primary-300/50 dark:bg-primary-300/10 dark:text-white;
 
       .alert-icon {
         @apply dark:text-primary-300;
       }
       .alert-body {
         .alert-link {
-          @apply hover:text-primary-600 dark:hover:text-primary-200;
+          @apply hover:text-primary-400 dark:hover:text-primary-300;
         }
       }
     }
diff --git a/components/common/AmountInput.vue b/components/common/AmountInput.vue
deleted file mode 100644
index 6656ec373..000000000
--- a/components/common/AmountInput.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<template>
-  <div>
-    <TokenSelectDropdown
-      v-model:opened="selectTokenModalOpened"
-      v-model:token-address="selectedTokenAddress"
-      :loading="loading"
-      :tokens="tokens"
-      :balances="balances"
-    >
-      <template #body-bottom v-if="$slots['token-dropdown-bottom']">
-        <slot name="token-dropdown-bottom" />
-      </template>
-    </TokenSelectDropdown>
-    <label for="amount-input" class="amount-input-container" :class="{ focused, loading, 'has-error': !!amountError }">
-      <div class="amount-input-token">
-        <CommonContentLoader v-if="loading" :length="14" />
-        <template v-else-if="selectedToken">
-          <button
-            type="button"
-            class="flex w-max items-center space-x-1.5"
-            @click.prevent="selectTokenModalOpened = true"
-            data-testid="token-dropDown"
-          >
-            <TokenImage class="-ml-0.5 h-5 w-5" v-bind="selectedToken" />
-            <span class="inline-block">{{ selectedToken.symbol }}</span>
-            <ChevronDownIcon class="h-4 w-4 text-gray-secondary dark:text-neutral-400" aria-hidden="true" />
-          </button>
-        </template>
-      </div>
-      <div class="amount-input-field-container">
-        <input
-          id="amount-input"
-          ref="inputElement"
-          v-model="inputted"
-          class="amount-input-field"
-          placeholder="0"
-          type="text"
-          maxlength="25"
-          spellcheck="false"
-          autocomplete="off"
-          :style="{ width: `${inputWidth}px` }"
-          @keyup.enter="emit('enter')"
-        />
-        <transition v-bind="TransitionOpacity(250, 150)">
-          <button
-            v-if="maxDecimalAmount && maxAmount !== '0'"
-            type="button"
-            class="amount-input-max-button"
-            :class="{ 'is-max': isMaxAmount }"
-            :title="isMaxAmount ? 'Max amount is set' : `Your max amount is ${maxDecimalAmount}`"
-            @click.prevent="setMax"
-          >
-            Max
-          </button>
-        </transition>
-      </div>
-      <div class="amount-input-select-asset">
-        <CommonContentLoader v-if="loading" :length="35" />
-        <span v-else class="text-left leading-tight wrap-balance" @click="selectTokenModalOpened = true">
-          <template v-if="tokenBalance">
-            Balance:
-            <span class="break-all" :title="formattedTokenBalance">
-              {{
-                typeof tokenBalance.price === "number"
-                  ? removeSmallAmount(tokenBalance.amount, tokenBalance.decimals, tokenBalance.price)
-                  : formattedTokenBalance
-              }}
-            </span>
-          </template>
-          <template v-else-if="!selectedToken">Select token</template>
-          <template v-else>Connect wallet to see balance</template>
-        </span>
-      </div>
-      <transition v-bind="TransitionOpacity()">
-        <div v-if="amountError" class="amount-input-error">
-          <template v-if="amountError === 'insufficient_balance' || maxDecimalAmount === '0'">
-            Insufficient balance
-          </template>
-          <template v-else-if="amountError === 'exceeds_balance' && !maxAmount">Amount exceeds balance</template>
-          <template v-else-if="amountError === 'exceeds_max_amount' || amountError === 'exceeds_balance'">
-            Max amount is
-            <button
-              type="button"
-              class="cursor-pointer font-medium underline underline-offset-2"
-              @click.prevent="setMax"
-            >
-              {{ maxDecimalAmount }}
-            </button>
-          </template>
-          <template v-else-if="amountError === 'exceeds_decimals'">
-            Max decimal length for {{ selectedToken?.symbol }} is {{ selectedToken?.decimals }}
-          </template>
-        </div>
-        <div v-else-if="inputted" class="amount-input-note">
-          <template v-if="selectedToken?.price === 'loading'">
-            <CommonContentLoader class="shadow-sm" :length="15" />
-          </template>
-          <template v-else>
-            {{ totalAmountPrice }}
-          </template>
-        </div>
-      </transition>
-    </label>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, nextTick, ref, watch } from "vue";
-
-import { ChevronDownIcon } from "@heroicons/vue/24/outline";
-import { useFocus } from "@vueuse/core";
-import { BigNumber } from "ethers";
-
-import type { Token, TokenAmount } from "@/types";
-import type { BigNumberish } from "ethers";
-import type { PropType } from "vue";
-
-import { decimalToBigNumber, formatTokenPrice, parseTokenAmount } from "@/utils/formatters";
-import { TransitionOpacity } from "@/utils/transitions";
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  tokens: {
-    type: Array as PropType<Token[]>,
-    default: () => [],
-  },
-  balances: {
-    type: Array as PropType<TokenAmount[]>,
-    default: () => [],
-    required: true,
-  },
-  tokenAddress: {
-    type: String,
-  },
-  maxAmount: {
-    type: String as PropType<BigNumberish>,
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: String,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits<{
-  (eventName: "enter"): void;
-  (eventName: "update:error", error?: string): void;
-  (eventName: "update:modelValue", amount: string): void;
-  (eventName: "update:tokenAddress", tokenAddress?: string): void;
-}>();
-
-const selectedTokenAddress = computed({
-  get: () => props.tokenAddress,
-  set: (value?: string) => emit("update:tokenAddress", value),
-});
-const selectedToken = computed(() => {
-  const tokens = props.balances.length ? props.balances : props.tokens;
-  if (!tokens) {
-    return undefined;
-  }
-  return tokens.find((e) => e.address === props.tokenAddress);
-});
-const tokenBalance = computed(() => {
-  if (!props.balances.length || !selectedToken.value) {
-    return undefined;
-  }
-  return props.balances.find((e) => e.address === selectedToken.value?.address);
-});
-const formattedTokenBalance = computed(() => {
-  if (!tokenBalance.value) {
-    return undefined;
-  }
-  return parseTokenAmount(tokenBalance.value.amount, tokenBalance.value.decimals);
-});
-const selectTokenModalOpened = ref(false);
-
-const inputElement = ref<HTMLInputElement | null>(null);
-const { focused } = useFocus(inputElement, { initialValue: !!props.autofocus });
-const inputWidth = ref(0);
-
-const inputted = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit("update:modelValue", value.replace(/[^0-9.,]/g, "").replace(",", ".")),
-});
-watch([inputted, inputElement], () => {
-  recalculateInputWidth();
-});
-
-const totalComputeAmount = computed(() => {
-  try {
-    if (!inputted.value || !selectedToken.value) {
-      return BigNumber.from("0");
-    }
-    return decimalToBigNumber(inputted.value, selectedToken.value.decimals);
-  } catch (error) {
-    return BigNumber.from("0");
-  }
-});
-const totalAmountPrice = computed(() => {
-  if (!selectedToken.value || !selectedToken.value.price || selectedToken.value.price === "loading") {
-    return "";
-  }
-  return formatTokenPrice(totalComputeAmount.value, selectedToken.value.decimals, selectedToken.value.price);
-});
-const maxDecimalAmount = computed(() => {
-  if (!props.maxAmount || !selectedToken.value) {
-    return;
-  }
-  return parseTokenAmount(props.maxAmount, selectedToken.value.decimals);
-});
-const isMaxAmount = computed(() => {
-  if (!props.maxAmount) {
-    return false;
-  }
-  return totalComputeAmount.value.eq(props.maxAmount);
-});
-const setMax = () => {
-  if (!maxDecimalAmount.value) return;
-  inputted.value = maxDecimalAmount.value;
-};
-
-const amountError = computed(() => {
-  if (!selectedToken.value) {
-    return;
-  }
-  if (tokenBalance.value && totalComputeAmount.value.gt(tokenBalance.value.amount)) {
-    return "exceeds_balance";
-  }
-  if (props.maxAmount && totalComputeAmount.value.gt(props.maxAmount)) {
-    if (BigNumber.from(props.maxAmount).isZero()) {
-      return "insufficient_balance";
-    }
-    return "exceeds_max_amount";
-  }
-  if (inputted.value) {
-    const [, decimal] = inputted.value.split(".");
-    if (decimal && decimal.length > selectedToken.value.decimals) {
-      return "exceeds_decimals";
-    }
-  }
-  return undefined;
-});
-watch(
-  amountError,
-  (value) => {
-    emit("update:error", value);
-  },
-  { immediate: true }
-);
-
-const recalculateInputWidth = () => {
-  inputWidth.value = 0;
-  nextTick(() => {
-    if (!inputElement.value) return;
-    inputWidth.value = inputElement.value.scrollWidth;
-  });
-};
-</script>
-
-<style lang="scss" scoped>
-.amount-input-container {
-  @apply grid w-full gap-x-4 rounded-3xl bg-gray-input p-4 transition-colors dark:bg-neutral-900;
-  grid-template-areas:
-    "a b b b"
-    "c c d d";
-  &:not(.loading) {
-    &.focused {
-      @apply bg-gray-input-focus dark:bg-neutral-800;
-    }
-  }
-  &.has-error {
-    @apply ring-1 ring-inset ring-red-500;
-  }
-
-  .amount-input-token {
-    @apply text-xl font-medium leading-[1.4] text-gray-900 dark:text-white;
-    grid-area: a / a / a / a;
-  }
-  .amount-input-field-container {
-    grid-area: b / b / b / b;
-    @apply flex flex-row-reverse items-center justify-start gap-2 overflow-hidden pl-2;
-
-    .amount-input-max-button {
-      @apply rounded bg-primary-100/50 px-1.5 py-1 text-xs font-medium uppercase text-primary-400 transition-all dark:bg-neutral-700 dark:text-neutral-400;
-      &:not(.is-max) {
-        @apply cursor-pointer hover:bg-primary-100 dark:hover:bg-neutral-600;
-      }
-      &.is-max {
-        @apply cursor-default bg-primary-600 text-white dark:bg-primary-300;
-      }
-    }
-    .amount-input-field {
-      @apply block w-max min-w-[15px] overflow-hidden border-none bg-transparent text-right text-xl font-medium outline-none placeholder:text-gray-secondary dark:placeholder:text-neutral-400;
-    }
-  }
-  .amount-input-select-asset,
-  .amount-input-note,
-  .amount-input-error {
-    @apply mt-1 text-sm leading-tight;
-  }
-  .amount-input-select-asset,
-  .amount-input-note {
-    @apply text-gray-secondary dark:text-neutral-400;
-  }
-  .amount-input-select-asset {
-    @apply flex cursor-pointer items-start whitespace-pre-line transition-colors hover:text-gray-400 xs:w-max;
-    grid-area: c / c / c / c;
-  }
-  .amount-input-note {
-    @apply break-all;
-  }
-  .amount-input-note,
-  .amount-input-error {
-    @apply justify-self-end text-right;
-    grid-area: d / d / d / d;
-  }
-  .amount-input-error {
-    @apply break-words text-red-500;
-  }
-}
-</style>
diff --git a/components/common/ContentBlock.vue b/components/common/ContentBlock.vue
index da1bd19bf..6a3242eac 100644
--- a/components/common/ContentBlock.vue
+++ b/components/common/ContentBlock.vue
@@ -10,13 +10,13 @@ import type { Component, PropType } from "vue";
 defineProps({
   as: {
     type: [String, Object] as PropType<string | Component>,
-    default: "label",
+    default: "div",
   },
 });
 </script>
 
 <style lang="scss" scoped>
 .content-block-container {
-  @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;
+  @apply block h-max w-full rounded-3xl bg-neutral-100 px-block-padding-1/2 py-block-padding dark:bg-neutral-900 sm:px-block-padding;
 }
 </style>
diff --git a/components/common/ContentLoader.vue b/components/common/ContentLoader.vue
index a9276c66d..b084f1011 100644
--- a/components/common/ContentLoader.vue
+++ b/components/common/ContentLoader.vue
@@ -22,6 +22,6 @@ defineProps({
 
 <style lang="scss" scoped>
 .content-loader {
-  @apply rounded-xl bg-gray-200 dark:bg-neutral-800;
+  @apply rounded-xl bg-neutral-50 dark:bg-neutral-700;
 }
 </style>
diff --git a/components/common/InfoContent.vue b/components/common/InfoContent.vue
index cc6cdbdcb..798a20dad 100644
--- a/components/common/InfoContent.vue
+++ b/components/common/InfoContent.vue
@@ -48,7 +48,7 @@ const { copy, copied } = useCopy(content);
   }
 }
 .info-content {
-  @apply w-full rounded-xl bg-white p-3 dark:bg-neutral-900;
+  @apply w-full rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900;
 
   .info-content-inner {
     @apply flex justify-between;
@@ -57,7 +57,7 @@ const { copy, copied } = useCopy(content);
       @apply text-sm text-gray-secondary dark:text-neutral-400;
     }
     .info-content-copy-button {
-      @apply text-sm font-medium text-primary-400 dark:text-primary-500;
+      @apply text-sm font-medium text-primary-400;
     }
   }
 }
diff --git a/components/common/LabelButton.vue b/components/common/LabelButton.vue
deleted file mode 100644
index f8d1e5a40..000000000
--- a/components/common/LabelButton.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <component :is="as" type="button" class="label-button">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts" setup>
-import type { Component, PropType } from "vue";
-
-defineProps({
-  as: {
-    type: [String, Object] as PropType<string | Component>,
-    default: "button",
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.label-button {
-  @apply underline underline-offset-2 opacity-70 transition-opacity;
-  &:enabled,
-  &:is(a) {
-    &:not([aria-disabled="true"]) {
-      @apply hover:opacity-100;
-    }
-  }
-}
-</style>
diff --git a/components/common/Modal.vue b/components/common/Modal.vue
index 55e81e003..2f7004a7e 100644
--- a/components/common/Modal.vue
+++ b/components/common/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="isModalOpened" @after-leave="afterLeave">
-    <Dialog as="div" class="relative z-10" @close="closeOnBackgroundClick">
+    <Dialog as="div" class="modal-container" @close="closeOnBackgroundClick">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"
@@ -10,11 +10,11 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-black dark:bg-opacity-80" />
+        <div class="modal-background" />
       </TransitionChild>
 
-      <div class="fixed inset-0 z-10 overflow-y-auto">
-        <div class="flex h-full items-end justify-center p-2 text-center sm:items-center sm:p-0">
+      <div class="modal-card-y-container">
+        <div class="modal-card-container">
           <TransitionChild
             as="template"
             enter="ease-out duration-300"
@@ -34,18 +34,12 @@
               @trigger="closeOnBackgroundClick"
               @keydown.esc="closeOnBackgroundClick"
             >
-              <div class="mb-4 flex items-center justify-between">
-                <DialogTitle as="div" class="h2 py-0">{{ title }}</DialogTitle>
+              <div class="modal-header">
+                <DialogTitle as="div" class="modal-title">{{ title }}</DialogTitle>
                 <button v-if="closable" @click="closeModal" data-testid="close-button">
-                  <XMarkIcon class="h-6 w-6 text-neutral-700 dark:text-white" aria-hidden="true" />
+                  <XMarkIcon class="modal-close-icon" aria-hidden="true" />
                 </button>
               </div>
-              <div
-                v-if="$slots.animation"
-                class="pointer-events-none flex h-36 w-full items-center justify-center overflow-visible"
-              >
-                <slot name="animation" />
-              </div>
               <slot />
             </DialogPanel>
           </TransitionChild>
@@ -111,12 +105,41 @@ const afterLeave = () => {
 };
 </script>
 
+<style lang="scss">
+.modal-container {
+  // can not apply styles to this block in scoped style
+  @apply relative z-[1000];
+}
+</style>
+
 <style lang="scss" scoped>
-.modal-card {
-  @apply relative max-h-[570px] w-full max-w-[500px] transform overflow-hidden rounded-3xl bg-gray p-3 text-left shadow-xl transition-all xs:p-5 xs:pb-6;
-  @apply dark:bg-neutral-950;
-  @media screen and (max-height: 640px) {
-    @apply max-h-[90vh];
+.modal-container {
+  .modal-background {
+    @apply fixed inset-0 bg-black bg-opacity-70 transition-opacity;
+  }
+  .modal-card-y-container {
+    @apply fixed inset-0 z-10 overflow-y-auto;
+  }
+  .modal-card-container {
+    @apply flex h-full items-end justify-center p-3 pb-0 text-center sm:items-center sm:p-[72px];
+
+    .modal-card {
+      @apply relative max-h-[600px] w-full max-w-[600px] transform overflow-hidden rounded-3xl rounded-b-none bg-gray p-block-padding-1/2 text-left shadow-xl transition-all dark:bg-neutral-900 sm:rounded-b-3xl sm:p-block-padding;
+      @media screen and (max-height: 640px) {
+        max-height: calc(100vh - 96px);
+        max-height: calc(100dvh - 96px);
+      }
+      .modal-header {
+        @apply mb-4 flex items-center justify-between;
+
+        .modal-title {
+          @apply text-2xl;
+        }
+        .modal-close-icon {
+          @apply h-6 w-6 text-neutral-700 dark:text-white;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/components/common/QrCodeStyled.vue b/components/common/QrCodeStyled.vue
index 2fd43b0d0..e63a38e7e 100644
--- a/components/common/QrCodeStyled.vue
+++ b/components/common/QrCodeStyled.vue
@@ -18,7 +18,7 @@ defineProps({
 <style lang="scss">
 .qr-code-styles-container {
   .qr-code-container {
-    @apply mx-auto aspect-square h-48 w-48 rounded-xl bg-white p-3 shadow-sm;
+    @apply mx-auto aspect-square h-48 w-48 rounded-xl bg-neutral-100 p-3 shadow-sm;
 
     & > * {
       width: 100% !important;
diff --git a/components/common/button/Button.vue b/components/common/button/Button.vue
index 644228a24..acf1e1c5d 100644
--- a/components/common/button/Button.vue
+++ b/components/common/button/Button.vue
@@ -45,7 +45,7 @@ defineProps({
   }
   &.variant- {
     &default {
-      @apply whitespace-nowrap bg-neutral-100 dark:bg-neutral-900;
+      @apply bg-neutral-100 dark:bg-neutral-900;
       &:enabled,
       &:is(a, label) {
         &:not([aria-disabled="true"]) {
@@ -54,7 +54,7 @@ defineProps({
       }
     }
     &light {
-      @apply whitespace-nowrap bg-neutral-200 dark:bg-neutral-800;
+      @apply bg-neutral-200 dark:bg-neutral-800;
       &:enabled,
       &:is(a, label) {
         &:not([aria-disabled="true"]) {
@@ -63,12 +63,11 @@ defineProps({
       }
     }
     &primary {
-      @apply whitespace-nowrap bg-primary-100/50 px-6 text-primary-400;
-      @apply dark:bg-primary-300 dark:text-white;
+      @apply bg-primary-400 px-6 text-white;
       &:enabled,
       &:is(a, label) {
         &:not([aria-disabled="true"]) {
-          @apply hover:bg-primary-100/75 dark:hover:bg-primary-200;
+          @apply hover:bg-primary-300;
         }
       }
       &:disabled,
diff --git a/components/common/button/Label.vue b/components/common/button/Label.vue
new file mode 100644
index 000000000..9414eb0dd
--- /dev/null
+++ b/components/common/button/Label.vue
@@ -0,0 +1,46 @@
+<template>
+  <component :is="as" type="button" class="label-button" :class="`variant-${variant}`" :interactive="interactive">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import type { Component, PropType } from "vue";
+
+defineProps({
+  as: {
+    type: [String, Object] as PropType<string | Component>,
+    default: "button",
+  },
+  variant: {
+    type: String as PropType<"default" | "light">,
+    default: "default",
+  },
+  interactive: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.label-button {
+  @include interactiveStyles {
+    @apply underline underline-offset-2 transition;
+  }
+  &.variant- {
+    &default {
+      @apply text-neutral-600 dark:text-neutral-500;
+      @include interactiveStyles {
+        @apply hover:text-neutral-950 dark:hover:text-white;
+      }
+    }
+    &light {
+      @apply text-neutral-700 dark:text-neutral-400;
+      @include interactiveStyles {
+        @apply hover:text-neutral-950 dark:hover:text-white;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/common/button/Line.vue b/components/common/button/Line.vue
index 4ff092020..827c317d3 100644
--- a/components/common/button/Line.vue
+++ b/components/common/button/Line.vue
@@ -40,12 +40,12 @@ defineProps({
 
   &.variant- {
     &default {
-      @apply bg-white dark:bg-neutral-900;
+      @apply bg-neutral-100 dark:bg-neutral-900;
 
       &:enabled,
       &:is(a) {
         &:not([aria-disabled="true"]) {
-          @apply hover:bg-gray-50 dark:hover:bg-neutral-800;
+          @apply hover:bg-white dark:hover:bg-neutral-800;
         }
       }
     }
diff --git a/components/common/button/LineBodyInfo.vue b/components/common/button/LineBodyInfo.vue
index 7940b5c57..31a1f6ad1 100644
--- a/components/common/button/LineBodyInfo.vue
+++ b/components/common/button/LineBodyInfo.vue
@@ -23,7 +23,7 @@
     @apply inline min-h-[1.5rem] overflow-hidden text-ellipsis align-middle;
   }
   .button-line-body-info-underline {
-    @apply text-gray-secondary opacity-70 dark:text-white;
+    @apply text-neutral-700 dark:text-neutral-400;
   }
 }
 </style>
diff --git a/components/common/input/InputLine.vue b/components/common/input/InputLine.vue
index a146c8945..60052c072 100644
--- a/components/common/input/InputLine.vue
+++ b/components/common/input/InputLine.vue
@@ -28,8 +28,9 @@ const inputted = computed({
 
 <style lang="scss" scoped>
 .input-line {
-  @apply block w-full overflow-hidden border-b-2 bg-transparent leading-snug outline-none transition placeholder:text-gray-secondary dark:placeholder:text-neutral-400;
-  @apply border-neutral-800 hover:border-neutral-600 focus:border-white;
+  @apply block w-full overflow-hidden border-b-2 bg-transparent leading-snug outline-none transition placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
+  @apply border-neutral-200 hover:border-neutral-300 focus:border-neutral-950;
+  @apply dark:border-neutral-800 dark:hover:border-neutral-600 dark:focus:border-white;
   &.has-error {
     @apply border-error-300;
   }
diff --git a/components/common/input/TransactionAddress.vue b/components/common/input/TransactionAddress.vue
index 21c932ece..ed3dccf92 100644
--- a/components/common/input/TransactionAddress.vue
+++ b/components/common/input/TransactionAddress.vue
@@ -1,5 +1,5 @@
 <template>
-  <CommonContentBlock for="transaction-address-input">
+  <CommonContentBlock for="transaction-address-input" as="label">
     <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>
@@ -7,13 +7,9 @@
       </div>
       <div v-if="defaultLabel" class="ml-auto text-right">
         <span class="font-bold">{{ inputVisible ? "To another account" : defaultLabel }}</span>
-        <button
-          type="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>
+        <CommonButtonLabel variant="light" class="ml-1" @click="toggleCustomValue()">
+          {{ inputVisible ? "Use my account" : "Change" }}
+        </CommonButtonLabel>
       </div>
     </div>
     <CommonInputLine
diff --git a/components/common/input/TransactionAmount.vue b/components/common/input/TransactionAmount.vue
index 15125aade..cf9671d55 100644
--- a/components/common/input/TransactionAmount.vue
+++ b/components/common/input/TransactionAmount.vue
@@ -11,23 +11,26 @@
         <slot name="token-dropdown-bottom" />
       </template>
     </TokenSelectDropdown>
-    <CommonContentBlock for="transaction-amount-input">
+    <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="font-bold">{{ label }}</div>
           <slot name="dropdown" />
         </div>
         <transition v-bind="TransitionOpacity()">
-          <button
-            v-if="displayedMaxAmount && displayedMaxAmount !== '0'"
-            type="button"
-            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()"
-          >
-            Max: <span class="underline underline-offset-2">{{ displayedMaxAmount }}</span>
-          </button>
+          <template v-if="displayedMaxAmount && displayedMaxAmount !== '0'">
+            <span class="ml-auto text-right">
+              <CommonButtonLabel variant="light" as="span">Max:&nbsp;</CommonButtonLabel>
+              <CommonButtonLabel
+                variant="light"
+                :class="{ 'is-max': isMaxAmountSet }"
+                :title="isMaxAmountSet ? 'Max amount is set' : `Your max amount is ${maxDecimalAmount}`"
+                @click.prevent="setMaxAmount()"
+              >
+                {{ displayedMaxAmount }}
+              </CommonButtonLabel>
+            </span>
+          </template>
         </transition>
       </div>
       <div class="mt-4 flex items-center gap-2">
@@ -44,6 +47,11 @@
           autofocus
         />
 
+        <transition v-bind="TransitionOpacity(300)">
+          <div v-if="approveRequired" v-tooltip="'Allowance approval required'">
+            <LockClosedIcon class="h-6 w-6 text-warning-400" aria-hidden="true" />
+          </div>
+        </transition>
         <CommonButtonDropdown :toggled="selectTokenModalOpened" variant="light" @click="selectTokenModalOpened = true">
           <template #left-icon>
             <CommonContentLoader v-if="loading" class="block h-full w-full rounded-full" />
@@ -83,6 +91,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 
+import { LockClosedIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 
 import type { Token, TokenAmount } from "@/types";
@@ -109,6 +118,10 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
+  approveRequired: {
+    type: Boolean,
+    default: false,
+  },
   tokenAddress: {
     type: String,
   },
diff --git a/components/destination/DestinationItem.vue b/components/destination/DestinationItem.vue
index dca1482e5..dce4b1ec9 100644
--- a/components/destination/DestinationItem.vue
+++ b/components/destination/DestinationItem.vue
@@ -7,8 +7,12 @@
     </template>
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
-        <template #label v-if="label">{{ label }} </template>
-        <template #underline v-if="description">{{ description }}</template>
+        <template #label v-if="label || $slots['label']">
+          <slot name="label">{{ label }}</slot>
+        </template>
+        <template #underline v-if="description || $slots['underline']">
+          <slot name="underline">{{ description }}</slot>
+        </template>
       </CommonButtonLineBodyInfo>
     </template>
     <template #right v-if="$slots.right">
diff --git a/components/destination/IconContainer.vue b/components/destination/IconContainer.vue
index e8737a791..809f75a59 100644
--- a/components/destination/IconContainer.vue
+++ b/components/destination/IconContainer.vue
@@ -1,5 +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">
+  <div class="aspect-square h-full w-full rounded-full bg-white p-3 text-black">
     <slot />
   </div>
 </template>
diff --git a/components/header/AccountDropdown.vue b/components/header/AccountDropdown.vue
index e25c8c82b..2921e263b 100644
--- a/components/header/AccountDropdown.vue
+++ b/components/header/AccountDropdown.vue
@@ -107,7 +107,7 @@ watch(
   @apply relative;
 
   .account-options-container {
-    @apply absolute right-0 top-full z-10 mt-0.5 grid h-max w-max min-w-full rounded-3xl bg-white p-1 shadow-lg dark:bg-neutral-900;
+    @apply absolute right-0 top-full z-10 mt-0.5 grid h-max w-max min-w-full rounded-3xl bg-neutral-100 p-1 shadow-lg dark:bg-neutral-900;
   }
 }
 </style>
diff --git a/components/header/NetworkDropdown.vue b/components/header/NetworkDropdown.vue
index 3b6987a18..efcd6a7d7 100644
--- a/components/header/NetworkDropdown.vue
+++ b/components/header/NetworkDropdown.vue
@@ -65,7 +65,7 @@ const buttonClicked = (network: L2Network) => {
   @apply relative;
 
   .network-options-container {
-    @apply absolute right-0 top-full z-10 mt-0.5 grid h-max w-max min-w-full rounded-3xl bg-white p-1 shadow-lg dark:bg-neutral-900;
+    @apply absolute right-0 top-full z-10 mt-0.5 grid h-max w-max min-w-full rounded-3xl bg-neutral-100 p-1 shadow-lg dark:bg-neutral-900;
   }
 }
 </style>
diff --git a/components/modal/contacts/AddContact.vue b/components/modal/contacts/AddContact.vue
deleted file mode 100644
index 502fbf4d1..000000000
--- a/components/modal/contacts/AddContact.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <CommonModal
-    v-model:opened="isModalOpened"
-    :title="contactPreset ? 'Edit contact' : 'Add contact'"
-    @after-leave="clearFields"
-  >
-    <form @submit.prevent="addContact">
-      <CommonInput
-        v-model="name"
-        autofocus
-        placeholder="Name of the contact"
-        :error="v$.name.$error ? v$.name.$errors[0] && v$.name.$errors[0].$message.toString() : undefined"
-        @keydown.enter="addContact"
-      />
-      <CommonInput
-        v-model="address"
-        placeholder="Ethereum address"
-        class="mt-2"
-        :error="v$.address.$error ? v$.address.$errors[0] && v$.address.$errors[0].$message.toString() : undefined"
-        @keydown.enter="addContact"
-      />
-      <div v-if="error">
-        <CommonErrorBlock :retry-button="false" class="mt-3">
-          {{ error }}
-        </CommonErrorBlock>
-      </div>
-      <CommonButton type="submit" variant="primary" class="mt-5 w-full">Save contact</CommonButton>
-    </form>
-  </CommonModal>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-
-import { useVuelidate } from "@vuelidate/core";
-import { helpers, required } from "@vuelidate/validators";
-import { isAddress } from "ethers/lib/utils";
-
-import type { Contact } from "@/store/contacts";
-import type { PropType } from "vue";
-
-import { checksumAddress } from "@/utils/formatters";
-
-const props = defineProps({
-  opened: {
-    type: Boolean,
-    default: false,
-  },
-  contactPreset: {
-    type: Object as PropType<Contact>,
-  },
-  error: {
-    type: String,
-  },
-});
-const emit = defineEmits<{
-  (eventName: "update:opened", value: boolean): void;
-  (eventName: "update:contactPreset", value?: Contact): void;
-  (eventName: "update:error", value: string): void;
-  (eventName: "addContact", contact: Contact): void;
-}>();
-
-const name = ref(props.contactPreset?.name || "");
-const address = ref(props.contactPreset?.address || "");
-
-const isModalOpened = computed({
-  get: () => props.opened,
-  set: (value: boolean) => emit("update:opened", value),
-});
-watch(isModalOpened, (opened) => {
-  if (opened && props.contactPreset) {
-    name.value = props.contactPreset.name;
-    address.value = props.contactPreset.address;
-  }
-});
-
-const v$ = useVuelidate(
-  {
-    name: {
-      required,
-    },
-    address: {
-      required,
-      isAddress: helpers.withMessage("Valid 0x Ethereum address required", (value: string) => {
-        try {
-          return isAddress(value);
-        } catch (e) {
-          return false;
-        }
-      }),
-    },
-  },
-  { name, address },
-  { $stopPropagation: true }
-);
-const addContact = async () => {
-  emit("update:error", "");
-  const validationResult = await v$.value.$validate();
-  if (!validationResult) {
-    return;
-  }
-
-  emit("addContact", {
-    name: name.value,
-    address: checksumAddress(address.value),
-  });
-};
-const clearFields = () => {
-  emit("update:error", "");
-  emit("update:contactPreset", undefined);
-  name.value = "";
-  address.value = "";
-  v$.value.$reset();
-};
-</script>
diff --git a/components/modal/contacts/Contact.vue b/components/modal/contacts/Contact.vue
deleted file mode 100644
index 180b97037..000000000
--- a/components/modal/contacts/Contact.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <CommonModal v-bind="$attrs" title="" @after-leave="confirmRemove = false">
-    <template #animation v-if="contact">
-      <div class="flex w-full flex-col items-center">
-        <AddressAvatar :address="contact.address" class="h-20 w-20" />
-        <div class="h1 mt-2 w-full overflow-hidden text-ellipsis whitespace-nowrap p-0 text-center">
-          {{ contact.name }}
-        </div>
-      </div>
-    </template>
-    <template #default v-if="contact">
-      <TypographyCategoryLabel>Information</TypographyCategoryLabel>
-      <CommonInfoContent label="Address" :copy-content="contact.address">
-        {{ shortenAddress(contact.address, 5) }}
-      </CommonInfoContent>
-
-      <TypographyCategoryLabel>Actions</TypographyCategoryLabel>
-      <CommonButtonGroup>
-        <CommonButton variant="primary" as="RouterLink" :to="{ name: 'send', query: { address: contact.address } }">
-          <template #icon>
-            <PaperAirplaneIcon aria-hidden="true" />
-          </template>
-          <template #default>Send</template>
-        </CommonButton>
-        <CommonButton variant="primary" @click="emit('edit')">
-          <template #icon>
-            <PencilIcon aria-hidden="true" />
-          </template>
-          <template #default>Edit</template>
-        </CommonButton>
-        <CommonButton variant="primary" @click="confirmRemove ? removeContact() : (confirmRemove = true)">
-          <template #icon>
-            <TrashIcon aria-hidden="true" />
-          </template>
-          <template #default>{{ !confirmRemove ? "Remove" : "Are you sure?" }}</template>
-        </CommonButton>
-      </CommonButtonGroup>
-    </template>
-  </CommonModal>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-import { PaperAirplaneIcon, PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
-
-import type { Contact } from "@/store/contacts";
-import type { PropType } from "vue";
-
-import { shortenAddress } from "@/utils/formatters";
-
-defineProps({
-  contact: {
-    type: Object as PropType<Contact | undefined>,
-  },
-});
-const emit = defineEmits<{
-  (eventName: "remove"): void;
-  (eventName: "edit"): void;
-}>();
-
-const confirmRemove = ref(false);
-const removeContact = () => {
-  emit("remove");
-};
-</script>
diff --git a/components/modal/transaction/AllowanceInfo.vue b/components/modal/transaction/AllowanceInfo.vue
new file mode 100644
index 000000000..66b8386ea
--- /dev/null
+++ b/components/modal/transaction/AllowanceInfo.vue
@@ -0,0 +1,22 @@
+<template>
+  <CommonModal title="Allowance approval">
+    <p class="leading-normal">
+      Allowance approval authorizes our bridge to move set amount of your
+      <span class="font-medium">{{ token?.symbol || "ERC-20" }}</span>
+      token. It's a necessary step to ensure that only the amount you specify can be transferred. This will not deduct
+      any funds from your balance, except for a approval transaction fee.
+      <a :href="TOKEN_ALLOWANCE" target="_blank" class="underline underline-offset-2">Learn more</a>
+    </p>
+  </CommonModal>
+</template>
+
+<script lang="ts" setup>
+import type { Token } from "@/types";
+import type { PropType } from "vue";
+
+defineProps({
+  token: {
+    type: Object as PropType<Token>,
+  },
+});
+</script>
diff --git a/components/modal/zksync/lite/AccountActivation.vue b/components/modal/zksync/lite/AccountActivation.vue
deleted file mode 100644
index ec9b5602a..000000000
--- a/components/modal/zksync/lite/AccountActivation.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <CommonModal v-bind="$attrs" title="Account activation">
-    <p class="leading-normal">
-      The account activation is a <span class="font-medium">one-time</span> procedure to register your account with
-      zkSync Lite. It includes a <span class="font-medium">one-time fee</span> that will only apply to your first zkSync
-      Lite transaction. You can read more about it in the
-      <a class="link inline-flex items-center" :href="LITE_ACCOUNT_ACTIVATION" target="_blank">
-        official documentation
-        <ArrowUpRightIcon class="ml-1 mt-0.5 h-3.5 w-3.5" />
-      </a>
-    </p>
-  </CommonModal>
-</template>
-
-<script lang="ts" setup>
-import { ArrowUpRightIcon } from "@heroicons/vue/24/outline";
-
-import { LITE_ACCOUNT_ACTIVATION } from "@/utils/doc-links";
-</script>
diff --git a/components/modal/zksync/lite/WalletAuthorization.vue b/components/modal/zksync/lite/WalletAuthorization.vue
deleted file mode 100644
index 8682a734d..000000000
--- a/components/modal/zksync/lite/WalletAuthorization.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <CommonModal v-bind="$attrs" title="Wallet authorization">
-    <div>
-      <p class="leading-normal">
-        Wallet authorization is a security procedure of re-generating your zkSync Lite private key. This is necessary to
-        perform transactions on zkSync Lite network. You will only need to do this once per session or if you switch to
-        a different wallet or account. This process <span class="font-medium">does not</span> involve deducting any
-        funds from your account.
-      </p>
-      <div class="-mx-1 -mb-1 mt-4 xs:-mx-3 xs:-mb-3.5">
-        <CommonAlert variant="neutral" :icon="InformationCircleIcon">
-          Remember, it is good practice to read the messages you sign
-        </CommonAlert>
-      </div>
-    </div>
-  </CommonModal>
-</template>
-
-<script lang="ts" setup>
-import { InformationCircleIcon } from "@heroicons/vue/24/outline";
-</script>
diff --git a/components/token/TokenImage.vue b/components/token/TokenImage.vue
index 99f0f75e0..4d478838f 100644
--- a/components/token/TokenImage.vue
+++ b/components/token/TokenImage.vue
@@ -23,11 +23,7 @@ defineProps({
   @apply aspect-square;
 
   .token-placeholder {
-    @apply h-full w-full rounded-full border border-dashed dark:border-neutral-600;
-    &::before {
-      content: "";
-      @apply absolute inset-0 m-[3px] rounded-full bg-gray-100 dark:bg-neutral-700;
-    }
+    @apply h-full w-full rounded-full border border-neutral-400 bg-neutral-200 dark:border-neutral-500 dark:bg-neutral-700;
   }
 }
 </style>
diff --git a/components/token/TokenLine.vue b/components/token/TokenLine.vue
index 786cd9888..4e72e8e0d 100644
--- a/components/token/TokenLine.vue
+++ b/components/token/TokenLine.vue
@@ -9,9 +9,10 @@
           <div class="truncate">{{ symbol }}</div>
         </template>
         <template v-if="name" #underline>
-          <CommonLabelButton
+          <CommonButtonLabel
             v-if="eraNetwork.blockExplorerUrl"
             as="a"
+            variant="light"
             :href="`${eraNetwork.blockExplorerUrl}/address/${address}`"
             target="_blank"
             class="flex gap-1"
@@ -19,7 +20,7 @@
           >
             <span class="truncate">{{ name }}</span>
             <ArrowTopRightOnSquareIcon class="h-6 w-6 flex-shrink-0" />
-          </CommonLabelButton>
+          </CommonButtonLabel>
           <div v-else class="truncate">{{ name }}</div>
         </template>
       </CommonButtonLineBodyInfo>
diff --git a/components/transaction/Header.vue b/components/transaction/Header.vue
deleted file mode 100644
index 6fc4e9926..000000000
--- a/components/transaction/Header.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div class="transaction-header">
-    <div class="transaction-header-info">
-      <h1 class="transaction-header-title h1">{{ title }}</h1>
-      <div class="transaction-header-address hidden xs:block" :title="address">{{ address }}</div>
-      <div class="transaction-header-address xs:hidden" :title="address">
-        {{ shortenAddress(address, 5) }}
-      </div>
-    </div>
-    <AddressAvatar class="transaction-header-avatar" :address="address">
-      <template #icon>
-        <img v-tooltip="destinationTooltip" :src="destination.iconUrl" :alt="destination.label" />
-      </template>
-    </AddressAvatar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { TransactionDestination } from "@/store/destinations";
-import type { PropType } from "vue";
-
-import { shortenAddress } from "@/utils/formatters";
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  address: {
-    type: String,
-    required: true,
-  },
-  destination: {
-    type: Object as PropType<TransactionDestination>,
-    required: true,
-  },
-  destinationTooltip: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.lite.dark {
-  .transaction-header {
-    .transaction-header-info {
-      .transaction-header-address {
-        @apply text-primary-300;
-      }
-    }
-  }
-}
-.transaction-header {
-  @apply flex items-center justify-between pb-6;
-
-  .transaction-header-info {
-    .transaction-header-title {
-      @apply pb-1;
-    }
-    .transaction-header-address {
-      @apply text-sm font-semibold text-primary-400 dark:text-primary-200;
-    }
-  }
-  .transaction-header-avatar {
-    @apply mt-5 h-14 w-14;
-  }
-}
-</style>
diff --git a/components/transaction/TransactionItemIcon.vue b/components/transaction/TransactionItemIcon.vue
deleted file mode 100644
index b4d1ebff8..000000000
--- a/components/transaction/TransactionItemIcon.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="transaction-item-icon-container">
-    <div class="transaction-item-icon-bg"></div>
-    <div class="transaction-item-icon">
-      <component :is="icon" class="h-5 w-5" aria-hidden="true" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { Component, PropType } from "vue";
-
-defineProps({
-  icon: {
-    type: [String, Object, Function] as PropType<string | Component>,
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.transaction-item-icon-container {
-  @apply pointer-events-none relative z-10 -my-2.5 h-max w-full;
-
-  .transaction-item-icon-bg {
-    @apply absolute inset-0 -z-[1] mx-auto my-auto h-4 w-12 bg-white dark:bg-neutral-900;
-  }
-  .transaction-item-icon {
-    @apply mx-auto h-9 w-9 rounded-lg bg-gray p-2 dark:bg-neutral-800 dark:shadow-[0_0_8px_1px_rgba(0,0,0,0.2)];
-  }
-}
-</style>
diff --git a/components/transaction/TransactionProgress.vue b/components/transaction/TransactionProgress.vue
new file mode 100644
index 000000000..4d090ef7b
--- /dev/null
+++ b/components/transaction/TransactionProgress.vue
@@ -0,0 +1,168 @@
+<template>
+  <CommonContentBlock>
+    <div class="transaction-progress">
+      <template v-if="isSameAddressDifferentDestination">
+        <div class="info-column left">
+          <div class="flex flex-col items-center justify-center gap-1 md:flex-row">
+            <span>From</span>
+            <img
+              v-tooltip="fromDestination.label"
+              :src="fromDestination.iconUrl"
+              :alt="fromDestination.label"
+              class="h-6 w-6"
+            />
+          </div>
+          <div>Your account {{ shortenAddress(fromAddress) }}</div>
+        </div>
+        <div class="info-column right">
+          <div class="flex flex-col items-center justify-center gap-1 md:flex-row">
+            <span>To</span>
+            <img
+              v-tooltip="toDestination.label"
+              :src="toDestination.iconUrl"
+              :alt="toDestination.label"
+              class="h-6 w-6"
+            />
+          </div>
+          <div>{{ isSameAddress ? "Your account" : "Another account" }} {{ shortenAddress(toAddress) }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="info-column left">
+          <AddressAvatar class="mx-auto h-12 w-12" :address="fromAddress">
+            <template #icon>
+              <img v-tooltip="fromDestination.label" :src="fromDestination.iconUrl" :alt="fromDestination.label" />
+            </template>
+          </AddressAvatar>
+          <div>
+            From your account
+            <br />
+            {{ shortenAddress(fromAddress) }}
+          </div>
+        </div>
+        <div class="info-column right">
+          <AddressAvatar class="mx-auto h-12 w-12" :address="toAddress">
+            <template #icon>
+              <img v-tooltip="toDestination.label" :src="toDestination.iconUrl" :alt="toDestination.label" />
+            </template>
+          </AddressAvatar>
+          <div>
+            {{ isSameAddress ? "To your account" : "To another account" }}
+            <br />
+            {{ shortenAddress(toAddress) }}
+          </div>
+        </div>
+      </template>
+
+      <div class="divider">
+        <PaperAirplaneIcon class="airplane" aria-hidden="true" />
+      </div>
+    </div>
+    <CommonButton
+      size="sm"
+      variant="light"
+      as="a"
+      :href="transactionLink"
+      target="_blank"
+      class="mx-auto mt-block-gap w-max"
+    >
+      Explorer
+      <ArrowTopRightOnSquareIcon class="ml-2 h-6 w-6" aria-hidden="true" />
+    </CommonButton>
+    <div class="mt-block-padding flex items-center justify-center">
+      <span class="text-neutral-400">Value:</span>
+      <span class="ml-1">
+        {{ parseTokenAmount(token.amount, token.decimals) }}
+        {{ token.symbol }}</span
+      >
+      <TokenImage class="ml-1.5 mr-1 h-5 w-5" v-bind="token" />
+    </div>
+  </CommonContentBlock>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { ArrowTopRightOnSquareIcon, PaperAirplaneIcon } from "@heroicons/vue/24/outline";
+
+import type { TransactionDestination } from "@/store/destinations";
+import type { TokenAmount } from "@/types";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  fromAddress: {
+    type: String,
+    required: true,
+  },
+  fromDestination: {
+    type: Object as PropType<TransactionDestination>,
+    required: true,
+  },
+  toAddress: {
+    type: String,
+    required: true,
+  },
+  toDestination: {
+    type: Object as PropType<TransactionDestination>,
+    required: true,
+  },
+  transactionLink: {
+    type: String,
+    required: true,
+  },
+  token: {
+    type: Object as PropType<TokenAmount>,
+    required: true,
+  },
+});
+
+const isSameAddress = computed(() => props.fromAddress === props.toAddress);
+const isSameAddressDifferentDestination = computed(
+  () => isSameAddress.value && props.fromDestination.label !== props.toDestination.label
+);
+</script>
+
+<style lang="scss" scoped>
+.transaction-progress {
+  @apply grid grid-cols-[1fr_1.5fr_1fr] items-center gap-x-4 text-center;
+  grid-template-areas: "info-col-left divider info-col-right";
+
+  .info-column {
+    @apply flex flex-col items-center justify-center gap-2;
+    &.left {
+      grid-area: info-col-left;
+    }
+    &.right {
+      grid-area: info-col-right;
+    }
+  }
+  .divider {
+    @apply relative border-t border-dashed border-neutral-500;
+    grid-area: divider;
+
+    .airplane {
+      @apply absolute h-8 w-8;
+      // create animation from left opacity 0 to center opacity 100 to right opacity 0
+      // it should also scale from 0 to 1 to 0
+      animation: airplane 3s linear infinite;
+      @keyframes airplane {
+        0% {
+          left: 0;
+          transform: translate(0, -50%) scale(0);
+          opacity: 0;
+        }
+        30%,
+        60% {
+          transform: translate(-50%, -50%) scale(1);
+          opacity: 1;
+        }
+        100% {
+          left: 100%;
+          transform: translate(-100%, -50%) scale(0);
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/transaction/lineItem/TransactionLineItem.vue b/components/transaction/lineItem/TransactionLineItem.vue
index b9fcab180..a7148886d 100644
--- a/components/transaction/lineItem/TransactionLineItem.vue
+++ b/components/transaction/lineItem/TransactionLineItem.vue
@@ -8,10 +8,10 @@
     @click="!transactionUrl && copy()"
   >
     <template #image>
-      <div class="transaction-line-item-icon-container">
-        <XMarkIcon v-if="failed" class="transaction-line-item-icon failed-badge-icon" aria-hidden="true" />
-        <component v-else-if="icon" :is="icon" class="transaction-line-item-icon" aria-hidden="true" />
-      </div>
+      <DestinationIconContainer>
+        <XMarkIcon v-if="failed" class="failed-badge-icon" aria-hidden="true" />
+        <component v-else-if="icon" :is="icon" aria-hidden="true" />
+      </DestinationIconContainer>
     </template>
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
@@ -102,15 +102,8 @@ const transactionUrl = computed(() => {
 
 <style lang="scss">
 .transaction-line-item {
-  .transaction-line-item-icon-container {
-    @apply relative flex aspect-square h-auto w-full items-center justify-center rounded-full border border-primary-100 bg-primary-100/10 dark:border-none;
-
-    .transaction-line-item-icon {
-      @apply h-4 w-4 text-primary-500 dark:text-white;
-      &.failed-badge-icon {
-        @apply h-5 w-5 text-red-500;
-      }
-    }
+  .failed-badge-icon {
+    @apply text-red-500;
   }
   .failed-underline {
     @apply text-red-500;
diff --git a/components/transaction/summary/TokenEntry.vue b/components/transaction/summary/TokenEntry.vue
index 806c40c62..8614dceb5 100644
--- a/components/transaction/summary/TokenEntry.vue
+++ b/components/transaction/summary/TokenEntry.vue
@@ -3,7 +3,7 @@
     <div class="entry-label">{{ label }}</div>
     <div class="entry-info">
       <div class="entry-text-info">
-        <div class="token-amount">{{ displayedAmount }}</div>
+        <div class="token-amount">{{ displayedAmount }} {{ token.symbol }}</div>
         <div v-if="token.price && displayedAmount !== '0'" class="token-price">
           {{ formatTokenPrice(token.amount, token.decimals, token.price) }}
         </div>
@@ -46,7 +46,7 @@ const displayedAmount = computed(() => parseTokenAmount(props.token.amount, prop
     @apply ml-auto flex gap-4;
 
     .entry-text-info {
-      @apply text-right;
+      @apply flex flex-col justify-center text-right;
 
       .token-price {
         @apply text-neutral-600 dark:text-neutral-400;
diff --git a/composables/transaction/useAllowance.ts b/composables/transaction/useAllowance.ts
index 01f4bad58..790272fd5 100644
--- a/composables/transaction/useAllowance.ts
+++ b/composables/transaction/useAllowance.ts
@@ -41,22 +41,6 @@ export default (
     { cache: false }
   );
 
-  const setAllowance = async (amount: BigNumberish) => {
-    if (!accountAddress.value) throw new Error("Account address is not available");
-
-    const contractAddress = await getContractAddress();
-    if (!contractAddress) throw new Error("Contract address is not available");
-
-    const wallet = await getWallet();
-    const txHash = await wallet.writeContract({
-      address: tokenAddress.value as Hash,
-      abi: IERC20.abi,
-      functionName: "approve",
-      args: [contractAddress, amount.toString()],
-    });
-    return txHash;
-  };
-
   const requestAllowance = async () => {
     if (accountAddress.value && tokenAddress.value && tokenAddress.value !== ETH_L1_ADDRESS) {
       await getAllowance();
@@ -65,10 +49,68 @@ export default (
     }
   };
 
+  let approvalAmount: BigNumberish | undefined;
+  const setAllowanceStatus = ref<"not-started" | "processing" | "waiting-for-signature" | "sending" | "done">(
+    "not-started"
+  );
+  const {
+    result: setAllowanceReceipt,
+    inProgress: setAllowanceInProgress,
+    error: setAllowanceError,
+    execute: executeSetAllowance,
+    reset: resetExecuteSetAllowance,
+  } = usePromise(
+    async () => {
+      try {
+        setAllowanceStatus.value = "processing";
+        if (!accountAddress.value) throw new Error("Account address is not available");
+
+        const contractAddress = await getContractAddress();
+        if (!contractAddress) throw new Error("Contract address is not available");
+
+        const wallet = await getWallet();
+
+        setAllowanceStatus.value = "waiting-for-signature";
+        let txHash = await wallet.writeContract({
+          address: tokenAddress.value as Hash,
+          abi: IERC20.abi,
+          functionName: "approve",
+          args: [contractAddress, approvalAmount!.toString()],
+        });
+
+        setAllowanceStatus.value = "sending";
+        const receipt = await getPublicClient().waitForTransactionReceipt({
+          hash: txHash,
+          onReplaced: (replacement) => {
+            txHash = replacement.transaction.hash;
+          },
+        });
+        await requestAllowance();
+
+        setAllowanceStatus.value = "done";
+        return receipt;
+      } catch (err) {
+        setAllowanceStatus.value = "not-started";
+        throw err;
+      }
+    },
+    { cache: false }
+  );
+  const setAllowance = async (amount: BigNumberish) => {
+    approvalAmount = amount;
+    await executeSetAllowance();
+  };
+  const resetSetAllowance = () => {
+    approvalAmount = undefined;
+    setAllowanceStatus.value = "not-started";
+    resetExecuteSetAllowance();
+  };
+
   watch(
     [accountAddress, tokenAddress],
     () => {
       requestAllowance();
+      resetSetAllowance();
     },
     { immediate: true }
   );
@@ -79,6 +121,10 @@ export default (
     error: computed(() => error.value),
     requestAllowance,
 
+    setAllowanceReceipt,
+    setAllowanceStatus,
+    setAllowanceInProgress,
+    setAllowanceError,
     setAllowance,
   };
 };
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 19ba3b1fc..0ebcd1518 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -77,7 +77,17 @@ export default defineNuxtConfig({
       "storeToRefs",
     ],
   },
+  styleResources: {
+    scss: ["./assets/css/_mixins.scss"],
+  },
   vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@use "@/assets/css/_mixins.scss" as *;',
+        },
+      },
+    },
     build: {
       target: "es2020",
     },
diff --git a/package-lock.json b/package-lock.json
index 0a7a4b4a8..a00e24160 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,7 +71,6 @@
         "prettier-plugin-tailwindcss": "^0.2.2",
         "semantic-release": "^22.0.10",
         "tailwindcss": "^3.2.4",
-        "tailwindcss-themer": "^3.1.0",
         "ts-node": "^10.9.1",
         "typescript": "^5.1.6",
         "zksync-web3": "^0.14.4-beta.5"
@@ -7687,19 +7686,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7716,16 +7702,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -12213,9 +12189,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.19.3",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
-      "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12498,12 +12474,6 @@
       "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
       "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
     },
-    "node_modules/just-unique": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/just-unique/-/just-unique-4.2.0.tgz",
-      "integrity": "sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==",
-      "dev": true
-    },
     "node_modules/keccak": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.4.tgz",
@@ -21082,21 +21052,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
-    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -21732,21 +21687,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/tailwindcss-themer": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss-themer/-/tailwindcss-themer-3.1.0.tgz",
-      "integrity": "sha512-IfgxpCxWm5rRK3Q7aTvVyhQ/7tyyn8EJl5tFak5tS+/n8oXT7OGfv8praYepR7+IsM92waAuBDZng1HgnstrYA==",
-      "dev": true,
-      "dependencies": {
-        "color": "^4.1.0",
-        "just-unique": "^4.2.0",
-        "lodash.merge": "^4.6.2",
-        "lodash.mergewith": "^4.6.2"
-      },
-      "peerDependencies": {
-        "tailwindcss": "^3.1.0"
-      }
-    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
diff --git a/package.json b/package.json
index b42944ab9..476c68415 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "prettier-plugin-tailwindcss": "^0.2.2",
     "semantic-release": "^22.0.10",
     "tailwindcss": "^3.2.4",
-    "tailwindcss-themer": "^3.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
     "zksync-web3": "^0.14.4-beta.5"
diff --git a/pages/index.vue b/pages/index.vue
index f69782cf7..992640c82 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,7 +40,7 @@
         <TypographyCategoryLabel>
           <span>Balance</span>
           <template #right>
-            <CommonLabelButton as="RouterLink" :to="{ name: 'balances' }">View all</CommonLabelButton>
+            <CommonButtonLabel as="RouterLink" variant="light" :to="{ name: 'balances' }">View all</CommonButtonLabel>
           </template>
         </TypographyCategoryLabel>
         <CommonCardWithLineButtons>
diff --git a/pages/send-methods.vue b/pages/send-methods.vue
index 26aa74869..175cb2e71 100644
--- a/pages/send-methods.vue
+++ b/pages/send-methods.vue
@@ -13,7 +13,7 @@
       <CommonCardWithLineButtons>
         <DestinationItem
           v-bind="destinations.era"
-          :label="`Send do another account on ${destinations.era.label}`"
+          :label="`Send to another account on ${destinations.era.label}`"
           as="RouterLink"
           :to="{ name: 'send', query: $route.query }"
         />
@@ -38,9 +38,9 @@
           target="_blank"
         >
           <template #image>
-            <div class="aspect-square h-full w-full rounded-full bg-gray-100 p-3 text-neutral-950 dark:bg-neutral-50">
+            <DestinationIconContainer>
               <Squares2X2Icon aria-hidden="true" />
-            </div>
+            </DestinationIconContainer>
           </template>
         </DestinationItem>
       </CommonCardWithLineButtons>
diff --git a/tailwind.config.js b/tailwind.config.js
index e6e58bb6d..c0020cfbc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,12 +20,34 @@ module.exports = {
         sans: [`'Inter'`, ...defaultTheme.fontFamily.sans],
       },
       colors: {
+        primary: {
+          300: "#4075FF",
+          400: "#1755F4",
+          700: "#1347CC",
+        },
+        neutral: {
+          50: "#F7F9FC",
+          100: "#E8ECF2",
+          200: "#DADDE5",
+          300: "#BEC2CC",
+          400: "#A1A7B3",
+          500: "#858C99",
+          600: "#6C7380",
+          700: "#555A66",
+          800: "#3D424D",
+          900: "#262B33",
+          950: "#11141A",
+        },
         gray: {
           DEFAULT: "#f7f7f7",
           secondary: "#75808a",
           input: "#edeff2",
           "input-focus": "#dfe3e7",
         },
+        error: {
+          300: "#FF6666",
+          500: "#FF0000",
+        },
         warning: {
           400: "#FFC81A",
           600: "#E5AF00",
@@ -83,63 +105,5 @@ module.exports = {
         },
       });
     }),
-    require("tailwindcss-themer")({
-      defaultTheme: {
-        extend: {
-          colors: {
-            primary: {
-              50: "#D9E3FF",
-              100: "#D9E3FF",
-              200: "#4075FF",
-              300: "#1755F4",
-              400: "#1650E5",
-              500: "#2663FF",
-              600: "#1347CC",
-              700: "#113EB2",
-              800: "#0C2C80",
-              900: "#071B4D",
-            },
-            error: {
-              300: "#FF6666",
-              600: "#CC0000",
-            },
-            neutral: {
-              50: "#F7F9FC",
-              100: "#E8ECF2",
-              200: "#DADDE5",
-              300: "#BEC2CC",
-              400: "#A1A7B3",
-              500: "#858C99",
-              600: "#6C7380",
-              700: "#555A66",
-              800: "#3D424D",
-              900: "#262B33",
-              950: "#11141A",
-            },
-          },
-        },
-      },
-      themes: [
-        {
-          name: "lite",
-          extend: {
-            colors: {
-              primary: {
-                50: "#F3F5FF",
-                100: "#D9D9F9",
-                200: "#CBCBFF",
-                300: "#8C8DFC",
-                400: "#5D65B9",
-                500: "#53579f",
-                600: "#4E529A",
-                700: "#32325D",
-                800: "#27274E",
-                900: "#11142B",
-              },
-            },
-          },
-        },
-      ],
-    }),
   ],
 };
diff --git a/views/zksync/era/transactions/Deposit.vue b/views/zksync/era/transactions/Deposit.vue
index 18f5babb2..6577a4c42 100644
--- a/views/zksync/era/transactions/Deposit.vue
+++ b/views/zksync/era/transactions/Deposit.vue
@@ -31,6 +31,7 @@
           :tokens="availableTokens"
           :balances="availableBalances"
           :max-amount="maxAmount"
+          :approve-required="!enoughAllowance"
           :loading="tokensRequestInProgress || balanceInProgress"
         >
           <template #dropdown>
@@ -60,7 +61,7 @@
       </template>
       <template v-else-if="step === 'confirm'">
         <CommonCardWithLineButtons>
-          <TransactionSummaryTokenEntry label="You send" :token="transaction!.token" />
+          <TransactionSummaryTokenEntry label="You bridge" :token="transaction!.token" />
           <TransactionSummaryAddressEntry
             label="From"
             :address="transaction!.from.address"
@@ -74,7 +75,7 @@
         </CommonCardWithLineButtons>
       </template>
       <template v-else-if="step === 'submitted'">
-        <h1 class="h1 mt-block-gap text-center">Transaction submitted</h1>
+        <h1 class="h1 mt-block-gap-1/2 text-center">Transaction submitted</h1>
         <p class="text-center">
           Your funds will be available after the transaction is committed on
           <span class="font-medium">{{ destinations.ethereum.label }}</span> and then processed on
@@ -155,7 +156,7 @@
           </span>
         </div>
         <transition v-bind="TransitionAlertScaleInOutTransition">
-          <CommonAlert v-if="!enoughBalanceToCoverFee" class="mt-1" variant="error" :icon="ExclamationTriangleIcon">
+          <CommonAlert v-if="!enoughBalanceToCoverFee" class="mt-4" variant="error" :icon="ExclamationTriangleIcon">
             <p>
               Insufficient <span class="font-medium">{{ feeToken?.symbol }}</span> balance on
               <span class="font-medium">{{ destinations.ethereum.label }}</span> to cover the fee
@@ -165,7 +166,7 @@
         <transition v-bind="TransitionAlertScaleInOutTransition">
           <CommonAlert
             v-if="recommendedBalance && feeToken"
-            class="mt-1"
+            class="mt-4"
             variant="error"
             :icon="ExclamationTriangleIcon"
           >
@@ -177,44 +178,91 @@
             </p>
           </CommonAlert>
         </transition>
-        <transition v-bind="TransitionAlertScaleInOutTransition">
-          <CommonAlert
-            v-if="!enoughAllowance && !allowance?.isZero()"
-            class="mt-1"
-            variant="info"
-            :icon="InformationCircleIcon"
-          >
-            <p>
-              Your current allowance for <span class="font-medium">{{ selectedToken!.symbol }}</span> is
-              <button type="button" class="link inline underline underline-offset-2" @click="setAmountToAllowance">
-                {{ parseTokenAmount(allowance!, selectedToken!.decimals) }}
-              </button>
-              <span class="block wrap-balance">
-                Depositing more than that will require you to approve a new allowance.
-              </span>
-            </p>
-            <a :href="TOKEN_ALLOWANCE" target="_blank" class="alert-link">
-              Learn more
-              <ArrowUpRightIcon class="ml-1 h-3 w-3" />
-            </a>
-          </CommonAlert>
-        </transition>
         <CommonErrorBlock v-if="allowanceRequestError" class="mt-2" @try-again="requestAllowance">
           Checking allowance error: {{ allowanceRequestError.message }}
         </CommonErrorBlock>
+        <CommonErrorBlock v-else-if="setAllowanceError" class="mt-2" @try-again="setTokenAllowance">
+          Allowance approval error: {{ setAllowanceError.message }}
+        </CommonErrorBlock>
+        <CommonHeightTransition
+          v-if="step === 'form'"
+          :opened="(!enoughAllowance && !continueButtonDisabled) || !!setAllowanceReceipt"
+        >
+          <CommonCardWithLineButtons class="mt-4">
+            <DestinationItem
+              v-if="enoughAllowance && setAllowanceReceipt"
+              as="div"
+              :label="`${selectedToken?.symbol} allowance approved`"
+              :description="`You can now proceed to deposit`"
+            >
+              <template #image>
+                <div class="aspect-square h-full w-full rounded-full bg-success-400 p-3 text-black">
+                  <CheckIcon aria-hidden="true" />
+                </div>
+              </template>
+            </DestinationItem>
+            <DestinationItem v-else as="div" :label="`Approve ${selectedToken?.symbol} allowance`">
+              <template #underline>
+                Before depositing you need to give our bridge permission to spend specified amount of
+                {{ selectedToken?.symbol }}.
+                <span v-if="allowance && !allowance.isZero()"
+                  >You can deposit up to
+                  <CommonButtonLabel variant="light" @click="setAmountToCurrentAllowance()">
+                    {{ parseTokenAmount(allowance!, selectedToken!.decimals) }}
+                  </CommonButtonLabel>
+                  {{ selectedToken!.symbol }} without approving a new allowance.
+                </span>
+                <CommonButtonLabel variant="light" as="a" :href="TOKEN_ALLOWANCE" target="_blank">
+                  Learn more
+                </CommonButtonLabel>
+              </template>
+              <template #image>
+                <div class="aspect-square h-full w-full rounded-full bg-warning-400 p-3 text-black">
+                  <LockClosedIcon aria-hidden="true" />
+                </div>
+              </template>
+            </DestinationItem>
+          </CommonCardWithLineButtons>
+        </CommonHeightTransition>
 
         <EthereumTransactionFooter>
           <template #after-checks>
-            <CommonButton
-              v-if="step === 'form'"
-              type="submit"
-              :disabled="continueButtonDisabled"
-              variant="primary"
-              class="w-full"
-              @click="buttonContinue()"
-            >
-              Continue
-            </CommonButton>
+            <template v-if="step === 'form'">
+              <template v-if="!enoughAllowance && !continueButtonDisabled">
+                <CommonButton
+                  type="submit"
+                  :disabled="continueButtonDisabled || setAllowanceInProgress"
+                  variant="primary"
+                  class="w-full"
+                  @click="setTokenAllowance()"
+                >
+                  <transition v-bind="TransitionPrimaryButtonText" mode="out-in">
+                    <span v-if="setAllowanceStatus === 'processing'">Processing...</span>
+                    <span v-else-if="setAllowanceStatus === 'waiting-for-signature'"
+                      >Waiting for allowance approval confirmation</span
+                    >
+                    <span class="flex items-center" v-else-if="setAllowanceStatus === 'sending'">
+                      <CommonSpinner class="mr-2 h-6 w-6" />
+                      Approving allowance...
+                    </span>
+                    <span v-else>Approve {{ selectedToken?.symbol }} allowance</span>
+                  </transition>
+                </CommonButton>
+                <TransactionButtonUnderlineConfirmTransaction
+                  :opened="setAllowanceStatus === 'waiting-for-signature'"
+                />
+              </template>
+              <CommonButton
+                v-else
+                type="submit"
+                :disabled="continueButtonDisabled"
+                variant="primary"
+                class="w-full"
+                @click="buttonContinue()"
+              >
+                Continue
+              </CommonButton>
+            </template>
             <template v-else-if="step === 'confirm'">
               <transition v-bind="TransitionAlertScaleInOutTransition">
                 <div v-if="!enoughBalanceForTransaction" class="mb-4">
@@ -265,9 +313,9 @@ import { computed, onBeforeUnmount, ref, watch } from "vue";
 
 import {
   ArrowTopRightOnSquareIcon,
-  ArrowUpRightIcon,
+  CheckIcon,
   ExclamationTriangleIcon,
-  InformationCircleIcon,
+  LockClosedIcon,
 } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 import { isAddress } from "ethers/lib/utils";
@@ -361,14 +409,17 @@ const tokenBalance = computed<BigNumberish | undefined>(() => {
   return balance.value?.find((e) => e.address === selectedToken.value?.address)?.amount;
 });
 
-const transactionKey = ref(0);
 const {
   result: allowance,
   inProgress: allowanceRequestInProgress,
   error: allowanceRequestError,
   requestAllowance,
 
-  /* setAllowance, */
+  setAllowanceReceipt,
+  setAllowanceStatus,
+  setAllowanceInProgress,
+  setAllowanceError,
+  setAllowance,
 } = useAllowance(
   computed(() => account.value.address),
   computed(() => selectedToken.value?.address),
@@ -380,15 +431,19 @@ const enoughAllowance = computed(() => {
   if (!allowance.value || !selectedToken.value) {
     return true;
   }
-  return BigNumber.from(allowance.value).gte(totalComputeAmount.value);
+  return !allowance.value.isZero() && allowance.value.gte(totalComputeAmount.value);
 });
-const setAmountToAllowance = () => {
+const setAmountToCurrentAllowance = () => {
   if (!allowance.value || !selectedToken.value) {
     return;
   }
   amount.value = parseTokenAmount(allowance.value, selectedToken.value.decimals);
 };
-/* const setTokenAllowance = async () => await setAllowance(totalComputeAmount.value); */
+const setTokenAllowance = async () => {
+  await setAllowance(totalComputeAmount.value);
+  await new Promise((resolve) => setTimeout(resolve, 2000)); // Wait for balances to be updated on API side
+  await fetchBalances(true);
+};
 
 const unsubscribe = onboardStore.subscribeOnAccountChange(() => {
   step.value = "form";
@@ -495,8 +550,8 @@ const continueButtonDisabled = computed(() => {
     BigNumber.from(transaction.value.token.amount).isZero()
   )
     return true;
-  if (allowanceRequestInProgress.value || allowanceRequestError.value) return true;
-  if (!enoughAllowance.value) return false; // We can proceed to allowance modal even if fee is not loaded
+  if ((allowanceRequestInProgress.value && !allowance.value) || allowanceRequestError.value) return true;
+  if (!enoughAllowance.value) return false; // When allowance approval is required we can proceed to approve stage even if deposit fee is not loaded
   if (feeLoading.value || !fee.value) return true;
   return false;
 });
@@ -557,7 +612,6 @@ const makeTransaction = async () => {
 const resetForm = () => {
   address.value = "";
   amount.value = "";
-  transactionKey.value += 1;
   step.value = "form";
   status.value = "not-started";
 };
diff --git a/views/zksync/era/transactions/Transfer.vue b/views/zksync/era/transactions/Transfer.vue
index 55ae5b953..27ef3ed5e 100644
--- a/views/zksync/era/transactions/Transfer.vue
+++ b/views/zksync/era/transactions/Transfer.vue
@@ -38,9 +38,9 @@
           <template #dropdown v-if="isBridgeWithdrawal">
             <CommonButtonDropdown :toggled="false" size="xs" variant="light">
               <template #left-icon>
-                <img :src="destinations.ethereum.iconUrl" class="h-full w-full" />
+                <img :src="destinations.era.iconUrl" class="h-full w-full" />
               </template>
-              <span>{{ destinations.ethereum.label }}</span>
+              <span>{{ destinations.era.label }}</span>
             </CommonButtonDropdown>
           </template>
         </CommonInputTransactionAmount>
@@ -80,7 +80,7 @@
       </template>
       <template v-else-if="step === 'submitted'">
         <template v-if="transactionCommitted">
-          <h1 class="h1 mt-block-gap text-center">Transaction completed</h1>
+          <h1 class="h1 mt-block-gap-1/2 text-center">Transaction completed</h1>
           <p class="text-center">
             Your funds should now be available at the
             <a
@@ -94,7 +94,7 @@
           </p>
         </template>
         <template v-else>
-          <h1 class="h1 mt-block-gap text-center">Transaction submitted</h1>
+          <h1 class="h1 mt-block-gap-1/2 text-center">Transaction submitted</h1>
           <p class="text-center">
             Your funds will be available at the
             <a
@@ -109,52 +109,15 @@
             >. You are free to close this page.
           </p>
         </template>
-        <CommonContentBlock class="mt-block-gap">
-          <div class="grid grid-cols-[max-content_1fr_max-content] items-center gap-x-4 gap-y-2">
-            <AddressAvatar class="mx-auto h-12 w-12" :address="transaction!.from.address">
-              <template #icon>
-                <img
-                  v-tooltip="transaction!.from.destination.label"
-                  :src="transaction!.from.destination.iconUrl"
-                  :alt="transaction!.from.destination.label"
-                />
-              </template>
-            </AddressAvatar>
-            <div class="border-t border-dashed border-neutral-500"></div>
-            <AddressAvatar class="mx-auto h-12 w-12" :address="transaction!.to.address">
-              <template #icon>
-                <img
-                  v-tooltip="transaction!.to.destination.label"
-                  :src="transaction!.to.destination.iconUrl"
-                  :alt="transaction!.to.destination.label"
-                />
-              </template>
-            </AddressAvatar>
-
-            <div>{{ shortenAddress(transaction!.from.address) }}</div>
-            <div></div>
-            <div>{{ shortenAddress(transaction!.to.address) }}</div>
-          </div>
-          <CommonButton
-            size="sm"
-            variant="light"
-            as="a"
-            :href="`${blockExplorerUrl}/tx/${transactionHash}`"
-            target="_blank"
-            class="mx-auto mt-block-gap w-max"
-          >
-            Explorer
-            <ArrowTopRightOnSquareIcon class="ml-2 h-6 w-6" aria-hidden="true" />
-          </CommonButton>
-          <div class="mt-block-padding flex items-center justify-center">
-            <span class="text-neutral-400">Value:</span>
-            <span class="ml-1">
-              {{ parseTokenAmount(transaction!.token.amount, transaction!.token.decimals) }}
-              {{ transaction!.token.symbol }}</span
-            >
-            <TokenImage class="ml-1.5 mr-1 h-5 w-5" v-bind="transaction!.token" />
-          </div>
-        </CommonContentBlock>
+        <TransactionProgress
+          :from-address="transaction!.from.address"
+          :from-destination="transaction!.from.destination"
+          :to-address="transaction!.to.address"
+          :to-destination="transaction!.to.destination"
+          :transaction-link="`${blockExplorerUrl}/tx/${transactionHash}`"
+          :token="transaction!.token"
+          class="mt-block-gap"
+        />
 
         <CommonButton as="RouterLink" :to="{ name: 'index' }" class="mt-block-gap" variant="primary">
           Go to Assets page
@@ -178,21 +141,21 @@
               @update="feeAutoUpdateEstimate"
             />
           </transition>
-          <a
+          <CommonButtonLabel
             v-if="type === 'withdrawal' && !isCustomNode"
             as="a"
             :href="ERA_WITHDRAWAL_DELAY"
             target="_blank"
-            class="ml-auto text-right text-neutral-700 underline underline-offset-2 dark:text-neutral-500"
+            class="ml-auto text-right"
           >
             Up to 24 hours
-          </a>
-          <span v-else-if="type === 'transfer'" class="ml-auto text-right text-neutral-700 dark:text-neutral-500">
+          </CommonButtonLabel>
+          <CommonButtonLabel v-else-if="type === 'transfer'" as="span" class="ml-auto text-right">
             Almost instant
-          </span>
+          </CommonButtonLabel>
         </div>
         <transition v-bind="TransitionAlertScaleInOutTransition">
-          <CommonAlert v-if="!enoughBalanceToCoverFee" class="mt-1" variant="error" :icon="ExclamationTriangleIcon">
+          <CommonAlert v-if="!enoughBalanceToCoverFee" class="mt-4" variant="error" :icon="ExclamationTriangleIcon">
             <p>
               Insufficient <span class="font-medium">{{ feeToken?.symbol }}</span> balance on
               {{ destinations.era.label }} to cover the fee
@@ -252,7 +215,7 @@
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 
-import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { ExclamationTriangleIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 import { isAddress } from "ethers/lib/utils";
 import { storeToRefs } from "pinia";
@@ -279,7 +242,7 @@ import { useEraTransfersHistoryStore } from "@/store/zksync/era/transfersHistory
 import { useEraWalletStore } from "@/store/zksync/era/wallet";
 import { ETH_L2_ADDRESS } from "@/utils/constants";
 import { ERA_WITHDRAWAL_DELAY } from "@/utils/doc-links";
-import { checksumAddress, decimalToBigNumber, formatRawTokenPrice, parseTokenAmount } from "@/utils/formatters";
+import { checksumAddress, decimalToBigNumber, formatRawTokenPrice } from "@/utils/formatters";
 import { calculateFee } from "@/utils/helpers";
 import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/transitions";