hotfix: merge the release-hotfix to main branch (#1108)

* add claim warning banner (#1104)

* add claim warning banner

* update style

* fix: removed estimatedGas from sendEvmTransaction (#1107)

* hotfix: update claim warning banner text (#1110)

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

src/components/header/ClaimWarningBanner.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="banner" :class="`banner--${network}`">
+    {{ $t('warning.claimRewards') }}
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    network: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.banner {
+  color: $gray-2;
+  font-weight: 600;
+  padding: 4px 16px 8px 16px;
+  line-height: 1.25;
+  font-size: 12px;
+  @media (min-width: $sm) {
+    font-size: 14px;
+  }
+
+  // shibuya, zKatana, local
+  background: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+
+  // astar native
+  &.banner--0 {
+    background: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
+  }
+
+  // shiden
+  &.banner--1 {
+    background: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
+  }
+
+  // zkEVM
+  &.banner--3 {
+    background: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
+  }
+}
+</style>

src/components/header/Header.vue

@@ -24,6 +24,8 @@
       <mobile-nav v-if="width <= screenSize.lg" />
     </header-comp>
 
+    <claim-warning-banner :network="currentNetworkIdx" />
+
     <!-- Modals -->
     <modal-network
       v-if="modalNetwork"
@@ -108,6 +110,7 @@ import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { Symbols } from 'src/v2/symbols';
 import { isValidAddressPolkadotAddress } from '@astar-network/astar-sdk-core';
+import ClaimWarningBanner from './ClaimWarningBanner.vue';
 
 interface Modal {
   modalNetwork: boolean;
@@ -127,6 +130,7 @@ export default defineComponent({
     ModalPolkasafe,
     ModalAccountUnification,
     MobileNav,
+    ClaimWarningBanner,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();

src/components/header/HeaderComp.vue

@@ -46,40 +46,30 @@ export default defineComponent({
   padding-left: 16px;
   padding-right: 16px;
   border-bottom: 3px solid transparent;
-  border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
-  border-image-slice: 1;
   @media (min-width: $lg) {
     padding: 40px 40px 25px 40px;
     height: 6rem;
   }
 
+  // shibuya, zKatana, local
+  border-image: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
+  border-image-slice: 1;
+
   // astar native
   &.header__border-0 {
-    border-image: linear-gradient(270deg, #e6007a 25%, #ff9dd1 100%);
+    border-image: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
     border-image-slice: 1;
   }
 
   // shiden
   &.header__border-1 {
-    border-image: linear-gradient(270deg, #5928b1 25%, #b092ea 100%);
-    border-image-slice: 1;
-  }
-
-  // shibuya
-  &.header__border-2 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
     border-image-slice: 1;
   }
 
   // zkEVM
   &.header__border-3 {
-    border-image: linear-gradient(270deg, #703ac2 25%, #226dff 100%);
-    border-image-slice: 1;
-  }
-
-  // zKatana
-  &.header__border-4 {
-    border-image: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
+    border-image: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
     border-image-slice: 1;
   }
 }

src/i18n/en-US/index.ts

@@ -67,6 +67,8 @@ export default {
       'Account balances in {network} network is below than the existential deposit amount',
     withdrawalNotSupport: "The portal doesn't support withdrawing to {chain} at this moment",
     ledgerNotOpened: 'Ledger has not opened Astar App. Please open it and refresh this page.',
+    claimRewards:
+      'DApp Staking V3 is coming early 2024! Make sure to claim your rewards and stay tuned for the release date.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',

src/layouts/DashboardLayout.vue

@@ -67,7 +67,8 @@ export default defineComponent({
   height: 100%;
   @media (min-width: $lg) {
     padding: 0 40px;
-    padding-top: 12px;
+    padding-top: 42px;
+    // padding-top: 12px; without the header warning banner
   }
 }
 </style>

src/v2/services/implementations/MetamaskWalletService.ts

@@ -124,9 +124,12 @@ export class MetamaskWalletService extends WalletService implements IWalletServi
     try {
       const web3 = new Web3(this.provider as any);
       const rawTx = await getRawEvmTransaction(web3, from, to, data, value);
+
+      // Memo: passing this variable (estimatedGas) to `sendTransaction({gas: estimatedGas})` causes an error when sending `withdrawal` transactions.
+      // the function goes the catch statement if something goes wrong while getting the estimatedGas. This way, the UI prevents sending invalid transactions which could cause loss of assets.
       const estimatedGas = await web3.eth.estimateGas(rawTx);
       const transactionHash = await web3.eth
-        .sendTransaction({ ...rawTx, gas: estimatedGas })
+        .sendTransaction({ ...rawTx })
         .once('transactionHash', (transactionHash) => {
           this.eventAggregator.publish(new BusyMessage(true));
         })