feat: add migrate support style

src/i18n/en-US/index.ts

@@ -330,6 +330,13 @@ export default {
     uaw: 'Unique Active Wallets',
     cantClaimWihtoutError:
       'You cannot claim with automatic re-stake because it is been a while since you claimed your rewards. Please turn off the Auto Re-Stake feature to be able to claim. After you claimed rewards you can turn on re-stake again. The UI team is working to fix this issue.',
+    migrationSupport: {
+      actionRequired: 'Action Required',
+      yourTokensAreLocked:
+        'Your tokens are locked in dAppStaking V2. Please migrate your funds to V3 today and start participating.',
+      balanceFromV2: 'Balance from V2 (locked)',
+      migrateNow: 'Migrate Now',
+    },
     stakePage: {
       backToDappList: 'Back to dApps list',
       whereFundsFrom: 'Where would you like to bring your funds from?',

src/staking-v3/components/my-staking/MigrationSupport.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="wrapper--migration-support">
+    <div class="wrapper--migration-support__inter">
+      <div class="row--header">
+        {{ $t('dappStaking.migrationSupport.actionRequired') }}
+      </div>
+      <div class="row--body">
+        <div class="text">
+          {{ $t('dappStaking.migrationSupport.yourTokensAreLocked') }}
+        </div>
+        <div class="row--locked-tokens">
+          <div>{{ $t('dappStaking.migrationSupport.balanceFromV2') }}</div>
+          <div>-- ASTR</div>
+          <div class="column--migrate">
+            <button type="button" class="button--migrate">
+              {{ $t('dappStaking.migrationSupport.migrateNow') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {},
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper--migration-support {
+  border-radius: 16px;
+  background: linear-gradient(270deg, rgba(#fc008f, 41%), #e6007a 100%);
+  padding: 1px;
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+
+.wrapper--migration-support__inter {
+  background-color: white;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.row--header {
+  background: linear-gradient(270deg, rgba(#fc008f, 41%) 26.04%, #e6007a 100%);
+  padding: 16px;
+  color: white;
+  font-weight: 700;
+}
+
+.row--body {
+  gap: 24px;
+  padding: 24px 16px;
+  background: linear-gradient(270deg, rgba(255, 148, 205, 0.1) 26.04%, rgba(230, 0, 122, 0.1) 100%);
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.text {
+  color: $navy-4;
+}
+
+.row--locked-tokens {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: $navy-1;
+  font-weight: 600;
+  @media (min-width: $md) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  }
+}
+
+.column--migrate {
+  align-self: center;
+  margin-top: 12px;
+  @media (min-width: $md) {
+    margin-top: 0;
+  }
+}
+
+.button--migrate {
+  width: 240px;
+  padding: 8px;
+  border-radius: 9999px;
+  background: linear-gradient(270deg, rgba(#fc008f, 41%) 26.04%, #e6007a 100%);
+  font-weight: 700;
+  color: white;
+  transition: all 0.2s ease;
+  &:hover {
+    filter: brightness(1.2);
+  }
+}
+
+.body--dark {
+  .wrapper--migration-support__inter {
+    background-color: $navy-1;
+  }
+  .text {
+    color: $gray-2;
+  }
+  .row--locked-tokens {
+    color: $gray-1;
+  }
+}
+</style>

src/staking-v3/components/my-staking/Staking.vue

@@ -13,6 +13,9 @@
 
       <div class="separator" />
 
+      <!-- TODO: add logic -->
+      <migration-support />
+
       <tab-component :tabs="tabs" :tab-selected="(tabIndex) => (currentTabIndex = tabIndex)" />
       <my-staking v-if="currentTabIndex === 0" />
       <my-dapps v-if="currentTabIndex === 1" :staked-dapps="stakerInfo" />
@@ -30,6 +33,7 @@ import MyStaking from './MyStaking.vue';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 import MyDapps from './MyDapps.vue';
 import Unbonding from './Unbonding.vue';
+import MigrationSupport from './MigrationSupport.vue';
 
 export default defineComponent({
   components: {
@@ -38,6 +42,7 @@ export default defineComponent({
     MyStaking,
     MyDapps,
     Unbonding,
+    MigrationSupport,
   },
   setup() {
     const { t } = useI18n();