fix: requested fixes and features

components/ConnectWalletBlock.vue

@@ -1,6 +1,8 @@
 <template>
   <CommonContentBlock>
-    <p class="text-center">Connect your wallet to view balances, bridge, and send assets with zkSync.</p>
+    <p class="text-center">
+      <slot />
+    </p>
     <CommonButton variant="primary" class="mt-block-gap w-full" @click="onboardStore.openModal()">
       Connect wallet
     </CommonButton>

components/header/MobileNavigation.vue

@@ -1,14 +1,16 @@
 <template>
   <Dialog as="template" :open="modalOpened">
     <DialogPanel class="mobile-navigation-container">
-      <div class="navigation-header">
-        <PageTitle :as="DialogTitle" class="navigation-title">{{ title }}</PageTitle>
-        <CommonButton @click="close()">
-          <XMarkIcon class="h-6 w-6" aria-hidden="true" />
-        </CommonButton>
-      </div>
-      <div class="navigation-body">
-        <slot />
+      <div class="mx-auto max-w-[600px]">
+        <div class="navigation-header">
+          <PageTitle :as="DialogTitle" class="navigation-title">{{ title }}</PageTitle>
+          <CommonButton @click="close()">
+            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+          </CommonButton>
+        </div>
+        <div class="navigation-body">
+          <slot />
+        </div>
       </div>
     </DialogPanel>
   </Dialog>
@@ -65,16 +67,12 @@ const close = () => {
 
 <style scoped lang="scss">
 .mobile-navigation-container {
-  @apply fixed left-0 top-0 z-[60] w-full overflow-y-auto overflow-x-hidden;
+  @apply fixed left-0 top-0 z-[60] w-full overflow-y-auto overflow-x-hidden bg-neutral-50 dark:bg-black;
   height: 100vh;
   height: 100dvh;
-  &,
-  .navigation-header {
-    @apply bg-neutral-50 dark:bg-black;
-  }
 
   .navigation-header {
-    @apply sticky top-0 flex items-center justify-between p-2;
+    @apply sticky top-0 flex items-center justify-between p-2 sm:p-4;
 
     .navigation-title {
       @apply mb-0;

components/network/NetworkSelectModal.vue

@@ -24,6 +24,7 @@
               :key="itemIndex"
               :icon="item.key === selectedNetworkKey ? CheckIcon : undefined"
               variant="light"
+              size="sm"
               @click="selectedNetworkKey = item.key!"
             />
           </div>

components/transaction/TransactionProgress.vue

@@ -57,7 +57,7 @@
       <AnimationsTransactionProgress :completed="completed" class="transaction-animation" />
     </div>
     <CommonButton
-      size="sm"
+      size="xs"
       variant="light"
       as="a"
       :href="transactionLink"
@@ -67,13 +67,13 @@
       Explorer
       <ArrowTopRightOnSquareIcon class="ml-2 h-6 w-6" aria-hidden="true" />
     </CommonButton>
-    <div class="mt-block-padding flex items-center justify-center">
+    <div class="mt-block-padding-1/2 flex items-center justify-center">
       <span class="text-neutral-400">Value:</span>
-      <span class="ml-1">
+      <span class="ml-1 flex items-center">
         {{ parseTokenAmount(token.amount, token.decimals) }}
-        {{ token.symbol }}</span
-      >
-      <TokenImage class="ml-1.5 mr-1 h-5 w-5" v-bind="token" />
+        <TokenImage class="mx-1 h-5 w-5" v-bind="token" />
+        {{ token.symbol }}
+      </span>
     </div>
   </CommonContentBlock>
 </template>

components/transaction/TransferLineItem.vue

@@ -90,15 +90,15 @@ const label = computed(() => {
     return `Sent to ${formatAddress(props.transfer.to)}`;
   } else if (props.transfer.type === "withdrawal") {
     if (props.transfer.to === account.value.address) {
-      return "Withdrawal";
+      return "Bridged";
     }
-    return `Withdrawal to ${formatAddress(props.transfer.to)}`;
+    return `Bridged to ${formatAddress(props.transfer.to)}`;
   } else if (props.transfer.type === "deposit") {
     if (direction.value === "in") {
       if (props.transfer.from === account.value.address) {
-        return "Deposit";
+        return "Bridged";
       }
-      return `Deposit from ${formatAddress(props.transfer.from)}`;
+      return `Bridged from ${formatAddress(props.transfer.from)}`;
     } else {
       return `Sent to ${formatAddress(props.transfer.to)}`;
     }

composables/transaction/useAllowance.ts

@@ -51,6 +51,7 @@ export default (
   const setAllowanceStatus = ref<"not-started" | "processing" | "waiting-for-signature" | "sending" | "done">(
     "not-started"
   );
+  const setAllowanceTransactionHash = ref<Hash | undefined>();
   const {
     result: setAllowanceReceipt,
     inProgress: setAllowanceInProgress,
@@ -69,7 +70,7 @@ export default (
         const wallet = await getWallet();
 
         setAllowanceStatus.value = "waiting-for-signature";
-        let txHash = await wallet.writeContract({
+        setAllowanceTransactionHash.value = await wallet.writeContract({
           address: tokenAddress.value as Hash,
           abi: IERC20.abi,
           functionName: "approve",
@@ -78,9 +79,9 @@ export default (
 
         setAllowanceStatus.value = "sending";
         const receipt = await getPublicClient().waitForTransactionReceipt({
-          hash: txHash,
+          hash: setAllowanceTransactionHash.value!,
           onReplaced: (replacement) => {
-            txHash = replacement.transaction.hash;
+            setAllowanceTransactionHash.value = replacement.transaction.hash;
           },
         });
         await requestAllowance();
@@ -101,6 +102,7 @@ export default (
   const resetSetAllowance = () => {
     approvalAmount = undefined;
     setAllowanceStatus.value = "not-started";
+    setAllowanceTransactionHash.value = undefined;
     resetExecuteSetAllowance();
   };
 
@@ -119,6 +121,7 @@ export default (
     error: computed(() => error.value),
     requestAllowance,
 
+    setAllowanceTransactionHash,
     setAllowanceReceipt,
     setAllowanceStatus,
     setAllowanceInProgress,

data/meta.ts

@@ -1,16 +1,16 @@
 export const portal = {
-  title: "zkSync Portal | Wallet and Bridge for zkSync",
+  title: "zkSync Portal - view balances, transfer and bridge tokens",
   description:
-    "zkSync Portal provides all the required tools for working with Era and Lite networks such as Wallet, Bridge & Faucet functionality.",
+    "zkSync Portal allows you to view your balances, transfer tokens and bridge assets between zkSync and Ethereum",
   previewImg: {
     src: "https://portal.zksync.io/preview.jpg",
     alt: "zkSync Portal",
   },
 };
 export const bridge = {
-  title: "zkSync Era Bridge | Transfer funds between zkSync Era Network and Ethereum Mainnet",
+  title: "zkSync Bridge | Transfer funds between zkSync and Ethereum",
   description:
-    "With the zkSync Era Bridge you can easily transfer funds between Ethereum Mainnet and zkSync Era Network. Enjoy faster, cheaper and more efficient transactions with the future proof zkEVM scaling Ethereum's security and values.",
+    "With the zkSync Bridge you can easily deposit tokens to zkSync. Enjoy faster, cheaper and more efficient transactions with the future proof zkEVM scaling Ethereum's security and values.",
   previewImg: {
     src: "https://portal.zksync.io/preview-bridge.jpg",
     alt: "zkSync Bridge",

data/networks.ts

@@ -16,10 +16,6 @@ export const l1Networks = {
   sepolia: {
     ...sepolia,
     name: "Ethereum Sepolia Testnet",
-    rpcUrls: {
-      public: { http: ["https://rpc.ankr.com/eth_sepolia"] },
-      default: { http: ["https://rpc.ankr.com/eth_sepolia"] },
-    },
   },
 } as const;
 export type L1Network = Chain;