Merge pull request #979 from InjectiveLabs/chore/liquidity-auto-calcu…

…lation

app/data/grid-strategy.ts

@@ -15,6 +15,10 @@ const mainnetSpotGridMarkets: SpotGridMarket[] = [
   {
     slug: 'atom-usdt',
     contractAddress: 'inj1c5jsz3dk2g6wywygchwrlwxl5gyz2yu7rnxxdr'
+  },
+  {
+    slug: 'tia-usdt',
+    contractAddress: 'inj1ljzjh8tzuvrj7mkhv9mxvv4cedn7kzauargrey'
   }
 ]
 

app/utils/constants/index.ts

@@ -80,7 +80,7 @@ export const GST_MINIMUM_GRIDS = 3
 export const GST_MAXIMUM_GRIDS = 100
 export const GST_MIN_TRADING_SIZE = 1
 export const GST_GRID_THRESHOLD = 10
-export const GST_DEFAULT_AUTO_GRIDS = 25
+export const GST_DEFAULT_AUTO_GRIDS = 75
 export const GST_DEFAULT_PRICE_TICK_SIZE = '0.001'
 
 export const GST_ROUTE = 'trading-bots-grid-spot'

components/Layout/Nav/Index.vue

@@ -6,7 +6,7 @@ import {
   getDefaultPerpetualMarketRouteParams,
   getDefaultSpotMarketRouteParams
 } from '@/app/utils/market'
-import { IS_MAINNET } from '@/app/utils/constants'
+import { IS_MAINNET, IS_STAGING } from 'app/utils/constants'
 
 const walletStore = useWalletStore()
 
@@ -51,10 +51,6 @@ function handlePerpetualTradeClickedTrack() {
             <LayoutNavItemDummy id="trade-dropdown" class="hidden lg:block">
               {{ $t('navigation.trade') }}
             </LayoutNavItemDummy>
-
-            <div
-              class="bg-blue-500 rounded-full w-2 h-2 absolute right-3.5 top-2.5 hidden lg:block"
-            />
           </div>
         </template>
 
@@ -68,12 +64,6 @@ function handlePerpetualTradeClickedTrack() {
               <p class="font-semibold text-base text-white">
                 {{ $t('navigation.swap') }}
               </p>
-
-              <div
-                class="bg-blue-500 text-gray-100 rounded-[4px] px-1.5 py-0.5 uppercase text-[8px]"
-              >
-                {{ $t('navigation.new') }}
-              </div>
             </div>
 
             <p class="text-sm text-gray-500 group-hover:text-gray-100 mt-1">
@@ -133,36 +123,25 @@ function handlePerpetualTradeClickedTrack() {
               {{ $t('navigation.tradingBotsDescription') }}
             </p>
           </BaseNuxtLink>
-
-          <BaseNuxtLink
-            v-if="!IS_MAINNET"
-            :to="{
-              name: 'trading-bots-liquidity-bots-spot'
-            }"
-            class="p-4 block rounded-b group hover:bg-gray-700 relative z-50 bg-gray-850"
-            data-cy="grid-spot-trading-link"
-          >
-            <div class="flex items-center gap-2.5">
-              <p class="font-semibold text-base text-white">
-                {{ $t('navigation.liquidityBots') }}
-              </p>
-
-              <div
-                class="bg-blue-500 text-gray-100 rounded-[4px] px-1.5 py-0.5 uppercase text-[8px]"
-              >
-                {{ $t('navigation.new') }}
-              </div>
-            </div>
-
-            <p class="text-sm text-gray-500 group-hover:text-gray-100 mt-1">
-              {{ $t('navigation.liquidityBotsDescription') }}
-            </p>
-          </BaseNuxtLink>
         </template>
       </LayoutNavHoverMenu>
 
       <LayoutNavMobile />
 
+      <LayoutNavItem
+        v-if="!IS_MAINNET || IS_STAGING"
+        :to="{
+          name: 'trading-bots-liquidity-bots-spot'
+        }"
+        class="block relative"
+        data-cy="header-markets-link"
+      >
+        <span>{{ $t('navigation.liquidity') }}</span>
+        <div
+          class="bg-blue-500 rounded-full w-2 h-2 absolute right-3.5 top-2.5 hidden lg:block"
+        />
+      </LayoutNavItem>
+
       <LayoutNavHoverMenu>
         <template #default>
           <div class="relative">
@@ -190,7 +169,7 @@ function handlePerpetualTradeClickedTrack() {
           </NuxtLink>
 
           <NuxtLink
-            v-if="!IS_MAINNET"
+            v-if="!IS_MAINNET || IS_STAGING"
             :to="{ name: 'lp-rewards' }"
             class="p-4 block rounded-t group relative z-50 bg-gray-850 hover:bg-gray-700"
           >

components/Partials/LiquidityBots/Spot/Create/Auto/Index.vue

@@ -1,17 +1,45 @@
 <script setup lang="ts">
+import { UiSpotMarketWithToken } from '@injectivelabs/sdk-ui-ts'
 import { GST_DEFAULT_AUTO_GRIDS } from 'app/utils/constants'
-import { SpotGridTradingField } from 'types'
+import {
+  InvestmentTypeGst,
+  SpotGridTradingField,
+  SpotGridTradingForm
+} from '@/types'
 
 const walletStore = useWalletStore()
 const exchangeStore = useExchangeStore()
 const gridStrategyStore = useGridStrategyStore()
 const { lastTradedPrice: spotLastTradedPrice } = useSpotLastPrice(
-  computed(() => gridStrategyStore.spotMarket!)
+  computed(() => gridStrategyStore.spotMarket as UiSpotMarketWithToken)
 )
 
 const setFormValues = useSetFormValues()
+const liquidityFormValues = useFormValues<SpotGridTradingForm>()
 
 const upperPrice = computed(() => {
+  const isSingleSided =
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] !==
+    InvestmentTypeGst.BaseAndQuote
+
+  if (
+    isSingleSided &&
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Base
+  ) {
+    return spotLastTradedPrice.value.times(2).toFixed(2)
+  }
+
+  if (
+    isSingleSided &&
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Quote
+  ) {
+    return spotLastTradedPrice.value
+      .minus(spotLastTradedPrice.value.times(0.06))
+      .toFixed(2)
+  }
+
   const marketHistory = exchangeStore.marketsHistory.find(
     (market) => market.marketId === gridStrategyStore.spotMarket!.marketId
   )
@@ -33,6 +61,28 @@ const upperPrice = computed(() => {
 })
 
 const lowerPrice = computed(() => {
+  const isSingleSided =
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] !==
+    InvestmentTypeGst.BaseAndQuote
+
+  if (
+    isSingleSided &&
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Base
+  ) {
+    return spotLastTradedPrice.value
+      .plus(spotLastTradedPrice.value.times(0.06))
+      .toFixed(2)
+  }
+
+  if (
+    isSingleSided &&
+    liquidityFormValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Quote
+  ) {
+    return spotLastTradedPrice.value.times(0.5).toFixed(2)
+  }
+
   const marketHistory = exchangeStore.marketsHistory.find(
     (market) => market.marketId === gridStrategyStore.spotMarket!.marketId
   )
@@ -65,19 +115,24 @@ function setValuesFromAuto() {
 </script>
 
 <template>
-  <div>
+  <div v-if="gridStrategyStore.spotMarket">
     <PartialsLiquidityBotsSpotCreateAutoParameters
       v-bind="{
-        market: gridStrategyStore.spotMarket!,
+        market: gridStrategyStore.spotMarket,
         upperPrice,
         lowerPrice,
+
         grids: grids.toFixed()
       }"
       class="mb-4"
     />
 
+    <PartialsLiquidityBotsSpotCreateCommonInvestmentType
+      v-bind="{ market: gridStrategyStore.spotMarket }"
+    />
+
     <PartialsLiquidityBotsSpotCreateCommonInvestmentAmount
-      v-bind="{ market: gridStrategyStore.spotMarket! }"
+      v-bind="{ market: gridStrategyStore.spotMarket }"
       class="mb-4"
       is-auto
     />
@@ -86,7 +141,7 @@ function setValuesFromAuto() {
 
     <PartialsLiquidityBotsSpotCreateCommonCreateStrategy
       v-else
-      v-bind="{ market: gridStrategyStore.spotMarket! }"
+      v-bind="{ market: gridStrategyStore.spotMarket }"
       @strategy:create="setValuesFromAuto"
     />
   </div>

components/Partials/LiquidityBots/Spot/Create/Common/InvestmentAmount.vue

@@ -119,14 +119,21 @@ const {
       props.market.baseToken.symbol
     }`
 
-    const rules = [
+    const rules = [insuficientRule, minBaseAndQuoteAmountRule]
+
+    if (
       formValues.value[SpotGridTradingField.InvestmentType] ===
       InvestmentTypeGst.BaseAndQuote
-        ? requiredIfFieldEmptyRule
-        : 'requiredSgt',
-      insuficientRule,
-      minBaseAndQuoteAmountRule
-    ]
+    ) {
+      rules.push(requiredIfFieldEmptyRule)
+    }
+
+    if (
+      formValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Quote
+    ) {
+      rules.push('requiredSgt')
+    }
 
     return rules.join('|')
   })
@@ -156,14 +163,21 @@ const {
       props.market.baseToken.symbol
     }`
 
-    const rules = [
+    const rules = [insuficientRule, minBaseAndQuoteAmountRule]
+
+    if (
       formValues.value[SpotGridTradingField.InvestmentType] ===
       InvestmentTypeGst.BaseAndQuote
-        ? requiredIfFieldEmptyRule
-        : 'requiredSgt',
-      insuficientRule,
-      minBaseAndQuoteAmountRule
-    ]
+    ) {
+      rules.push(requiredIfFieldEmptyRule)
+    }
+
+    if (
+      formValues.value[SpotGridTradingField.InvestmentType] ===
+      InvestmentTypeGst.Base
+    ) {
+      rules.push('requiredSgt')
+    }
 
     return rules.join('|')
   })

components/Partials/LiquidityBots/Spot/Create/Index.vue

@@ -7,7 +7,7 @@ import {
 
 useForm<SpotGridTradingForm>({
   keepValuesOnUnmount: true,
-  initialValues: { investmentType: InvestmentTypeGst.BaseAndQuote }
+  initialValues: { investmentType: InvestmentTypeGst.Base }
 })
 
 const activeTab = ref(GridStrategyType.Auto)

components/Partials/LiquidityBots/Spot/Create/Manual/Index.vue

@@ -10,8 +10,8 @@ const setFormValues = useSetFormValues()
 const setUpperPriceField = useSetFieldValue(SpotGridTradingField.UpperPrice)
 const setLowerPriceField = useSetFieldValue(SpotGridTradingField.LowerPrice)
 
-const min = ref('10')
-const max = ref('0')
+const min = ref('0')
+const max = ref('10')
 
 const { lastTradedPrice } = useSpotLastPrice(
   computed(() => gridStrategyStore.spotMarket!)
@@ -32,24 +32,34 @@ const lowerPriceValue = computed({
 })
 
 onMounted(() => {
-  setFormValues(
-    {
-      [SpotGridTradingField.LowerPrice]: lastTradedPrice.value
-        .minus(lastTradedPrice.value.times(0.06))
-        .toFixed(2),
-      [SpotGridTradingField.UpperPrice]: lastTradedPrice.value
-        .plus(lastTradedPrice.value.times(0.06))
-        .toFixed(2)
-    },
-    false
-  )
-
-  min.value = lastTradedPrice.value
-    .minus(lastTradedPrice.value.times(0.2))
-    .toFixed(2)
-  max.value = lastTradedPrice.value
-    .plus(lastTradedPrice.value.times(0.2))
-    .toFixed(2)
+  if (lastTradedPrice.value.gt(0)) {
+    setFormValues(
+      {
+        [SpotGridTradingField.LowerPrice]: lastTradedPrice.value
+          .minus(lastTradedPrice.value.times(0.06))
+          .toFixed(2),
+        [SpotGridTradingField.UpperPrice]: lastTradedPrice.value
+          .plus(lastTradedPrice.value.times(0.06))
+          .toFixed(2)
+      },
+      false
+    )
+
+    min.value = lastTradedPrice.value
+      .minus(lastTradedPrice.value.times(0.2))
+      .toFixed(2)
+    max.value = lastTradedPrice.value
+      .plus(lastTradedPrice.value.times(0.2))
+      .toFixed(2)
+  } else {
+    setFormValues(
+      {
+        [SpotGridTradingField.UpperPrice]: '2',
+        [SpotGridTradingField.LowerPrice]: '1'
+      },
+      false
+    )
+  }
 })
 
 function zoomIn() {

components/Partials/LiquidityBots/Spot/MarketSelector.vue

@@ -5,6 +5,8 @@ const gridStrategyStore = useGridStrategyStore()
 
 const spotStore = useSpotStore()
 
+const marketSlugQuery = useQueryRef('market', 'tia-usdt')
+
 const liquidityBotsMarkets = computed(() =>
   spotStore.markets.filter((market) =>
     spotGridMarkets.find((m) => m.slug === market.slug)
@@ -14,6 +16,7 @@ const liquidityBotsMarkets = computed(() =>
 const value = computed({
   get: () => gridStrategyStore.spotMarket?.slug,
   set: (marketSlug) => {
+    marketSlugQuery.value = marketSlug as string
     gridStrategyStore.$patch({
       spotMarket: spotStore.markets.find((m) => m.slug === marketSlug)
     })

composables/useQueryRef.ts

@@ -0,0 +1,19 @@
+export default function useQueryRef(name: string, defaultValue: string) {
+  const route = useRoute()
+  const router = useRouter()
+  const value = computed({
+    get: () => route.query[name] || defaultValue,
+    set: (value) => {
+      router.push({
+        name: route.name!,
+        params: route.params,
+        query: {
+          ...route.query,
+          [name]: value
+        }
+      })
+    }
+  })
+
+  return value
+}