Merge pull request #982 from InjectiveLabs/dev

#PR982

components/Modals/NewFeature/Index.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { getMarketRoute } from '@/app/utils/market'
+import { Modal } from 'types'
+
+const spotStore = useSpotStore()
+
+const TWITTER_URL = 'https://twitter.com/search?q=%24TIA&src=cashtag_click'
+const BLOG_POST_URL =
+  'https://helixapp.zendesk.com/hc/en-us/articles/8258846181647-Share-30-000-TIA-in-TIA-Spot-Trading-Challenge-'
+
+const market = computed(() => {
+  const MARKET_SLUG = 'tia-usdt'
+
+  return spotStore.markets.find(({ slug }) => slug === MARKET_SLUG)
+})
+
+const route = computed(() => {
+  if (!market.value) {
+    return {
+      name: 'index'
+    }
+  }
+
+  return getMarketRoute(market.value)
+})
+</script>
+
+<template>
+  <ModalsNewFeatureWrapper v-bind="{ to: route }" :modal="Modal.NewFeature">
+    <template #image>
+      <img src="/newFeatures/tia-campaign.webp" alt="Tia Spot Campaign" />
+    </template>
+
+    <template #title>
+      <i18n-t tag="div" keypath="banners.newFeature.title">
+        <template #link>
+          <NuxtLink
+            :to="TWITTER_URL"
+            target="_blank"
+            class="text-blue-500 hover:text-blue-400"
+          >
+            {{ $t('banners.newFeature.tia') }}
+          </NuxtLink>
+        </template>
+      </i18n-t>
+    </template>
+
+    <template #description>
+      <i18n-t tag="div" keypath="banners.newFeature.description1">
+        <template #link>
+          <NuxtLink
+            :to="BLOG_POST_URL"
+            target="_blank"
+            class="text-blue-500 hover:text-blue-400"
+          >
+            {{ $t('banners.newFeature.here') }}
+          </NuxtLink>
+        </template>
+      </i18n-t>
+    </template>
+
+    <template #cta>
+      <span>{{ $t('banners.newFeature.cta') }}</span>
+    </template>
+  </ModalsNewFeatureWrapper>
+</template>

layouts/default.vue

@@ -103,7 +103,7 @@ function onCloseSideBar() {
 
                 <!-- hide survey for now but can be resurrected and modified for future surveys -->
                 <!-- <ModalsUserFeedback /> -->
-                <ModalsNewFeaturePrelaunchFutures />
+                <ModalsNewFeature />
                 <ModalsDevMode />
                 <AppConfetti />
                 <div id="modals" />

locales/banners/en.ts

@@ -35,17 +35,21 @@ export default {
     newFeature: {
       close: 'Close',
       blogPost: 'blog post',
-      title: 'Celestia Pre-Launch Futures Trading Competition',
-      description1:
-        'Helix is excited to announce the launch of a special trading competition with 5,000 Celestia (TIA) tokens as rewards.',
-      description2:
-        'It is a volume trading competition in which the Top 100 volume traders will each receive 50 TIA tokens as the reward. The competition starts on October 26, 2023 at 2PM UTC, and ends on November 5, 2023 at 2PM UTC. The trading competition will offer users the opportunity to trade on Helix in order to not only win prizes exclusive to this competition, but also to enjoy market leading rebates, zero gas fees, lightning fast speeds and best-in-class security.',
-      description3: ({ interpolate, named }: I18nMessageFunction) =>
+      tia: '$TIA',
+      here: 'here',
+      title: ({ interpolate, named }: I18nMessageFunction) =>
         interpolate([
-          'For more information, please visit our ',
+          'Celestia now live on Helix with 30,000 ',
           named('link'),
-          '.'
-        ])
+          ' in rewards up for grabs!'
+        ]),
+      description1: ({ interpolate, named }: I18nMessageFunction) =>
+        interpolate([
+          'Helix is the world’s first exchange to list TIA. To celebrate the addition of TIA/USDT Spot on Helix, Helix is giving away 30,000 TIA tokens to Helix traders. Enjoy gas free trading and the best rewards now! Read ',
+          named('link'),
+          ' for more details.'
+        ]),
+      cta: 'Go to TIA/USDT'
     }
   }
 }

types/enums.ts

@@ -75,7 +75,7 @@ export enum Modal {
   AddMarginToPosition = 'add-margin-to-position',
   CreateSpotGridStrategy = 'create-spot-grid-strategy',
   FuturesMarketRestricted = 'futures-market-restricted',
-  PreLaunchFutures = 'pre-launch-futures'
+  NewFeature = 'new-feature'
 }
 
 export enum Breakpoint {