fix(ticker): allow query other ticker option (#1568)

src/commands/ticker/index/processor.ts

@@ -13,7 +13,10 @@ import { InternalError } from "errors"
 import { Coin } from "types/defi"
 import { getChartColorConfig } from "ui/canvas/color"
 import { composeEmbedMessage } from "ui/discord/embed"
-import { composeDaysSelectMenu } from "ui/discord/select-menu"
+import {
+  composeDaysSelectMenu,
+  composeOtherTickerSelectMenu,
+} from "ui/discord/select-menu"
 import {
   emojis,
   EmojiKey,
@@ -70,6 +73,7 @@ type Context = {
   type: ChartType
   baseCoin: Coin
   targetCoin?: Coin
+  listCoins?: Coin[]
 }
 
 export function renderTokenComparisonFields(baseCoin: Coin, targetCoin: Coin) {
@@ -111,9 +115,30 @@ export function renderTokenComparisonFields(baseCoin: Coin, targetCoin: Coin) {
   ]
 }
 
+export async function renderOtherTicker(
+  interaction: CommandInteraction | ButtonInteraction | SelectMenuInteraction,
+  { baseCoin: coin, listCoins }: Context,
+) {
+  const remainingCoins = listCoins?.filter((c) => c.id !== coin.id)
+
+  const selectOtherTickerRow = composeOtherTickerSelectMenu(
+    "change_ticker_option",
+    remainingCoins as any[],
+  )
+
+  return {
+    context: {
+      isOtherTicker: true,
+    },
+    msgOpts: {
+      components: [selectOtherTickerRow],
+    },
+  }
+}
+
 export async function renderSingle(
   interaction: CommandInteraction | ButtonInteraction | SelectMenuInteraction,
-  { days, baseCoin: coin, type }: Context,
+  { days, baseCoin: coin, type, listCoins }: Context,
 ) {
   days = days ?? (type === ChartType.Dominance ? 365 : 30)
   const {
@@ -203,6 +228,17 @@ export async function renderSingle(
 
   const wlAdded = await isTickerAddedToWl(coin.id, interaction.user.id)
   const buttonRow = buildSwitchViewActionRow("ticker", wlAdded)
+  const basicComponents = [selectRow, buttonRow]
+  const showOtherTickerRow = new MessageActionRow().addComponents(
+    new MessageButton({
+      label: "Not the token you're looking for?",
+      customId: "show_other_ticker",
+      style: "SECONDARY",
+    }),
+  )
+  const finalComponents = listCoins
+    ? [...basicComponents, showOtherTickerRow]
+    : basicComponents
 
   return {
     initial: "ticker",
@@ -211,11 +247,12 @@ export async function renderSingle(
       type,
       days,
       toId: coin.id,
+      listCoins,
     },
     msgOpts: {
       ...(chart && { files: [chart] }),
       embeds: [embed],
-      components: [selectRow, buttonRow],
+      components: finalComponents,
     },
   }
 }
@@ -599,7 +636,7 @@ export async function run(
       days: ChartViewTimeOption.M1,
     })
 
-  const [baseCoin, targetCoin] = await Promise.all(
+  const [baseCoinRaw, targetCoin] = await Promise.all(
     [baseQ, targetQ].filter(Boolean).map(async (symbol) => {
       const { ticker, isDominanceChart } = parseQuery(symbol)
       const { data: coins } = await CacheManager.get({
@@ -628,6 +665,8 @@ export async function run(
         coin = coins.at(0)
       }
 
+      const listCoins = coins
+
       let data, status
       ;({ data, status } = await CacheManager.get({
         pool: "ticker",
@@ -672,10 +711,13 @@ export async function run(
         }
       }
 
-      return data
+      return [data, listCoins]
     }),
   )
 
+  const baseCoin = baseCoinRaw[0]
+  const listCoins = baseCoinRaw[1]
+
   const type = parseQuery(baseQ).isDominanceChart
     ? ChartType.Dominance
     : ChartType.Single
@@ -707,5 +749,6 @@ export async function run(
     baseCoin,
     type,
     days,
+    listCoins,
   })
 }

src/commands/ticker/index/slash.ts

@@ -5,10 +5,13 @@ import {
   renderPair,
   renderSingle,
   renderFiatPair,
+  renderOtherTicker,
 } from "./processor"
 import { MachineConfig, route } from "utils/router"
 import { machineConfig as swapMachineConfig } from "commands/swap"
 import { addToWatchlistFromTicker } from "../../watchlist/add/processor"
+import defi from "adapters/defi"
+import CacheManager from "cache/node-cache"
 
 export const machineConfig: (
   swapTo: string,
@@ -21,7 +24,26 @@ export const machineConfig: (
     initial,
     context: {
       select: {
-        ticker: (interaction, _ev, ctx) => {
+        ticker: async (interaction, _ev, ctx) => {
+          if (ctx.isOtherTicker) {
+            const baseCoinRaw = ctx.listCoins.find(
+              (c: any) => c.id === interaction.values.at(0),
+            )
+            let data
+            ;({ data } = await CacheManager.get({
+              pool: "ticker",
+              key: `ticker-getcoin-${baseCoinRaw.id}`,
+              ttl: 30,
+              call: () => defi.getCoin(baseCoinRaw.id, false),
+            }))
+
+            return renderSingle(interaction, {
+              baseCoin: data,
+              type: ctx.type,
+              days: ctx.days,
+              listCoins: ctx.listCoins,
+            })
+          }
           // this is show all token, in this case coins =[...] baseCoin == undefined
           // coins = list defi.getCoin() of all token, baseCoin = defi.GetCoin() of 1 token
           if (ctx.coins && !ctx.baseCoin) {
@@ -79,6 +101,14 @@ export const machineConfig: (
             ctx.baseCoin.id,
           )
         },
+        showOtherTicker: (interaction, _ev, ctx) => {
+          return renderOtherTicker(interaction, {
+            baseCoin: ctx.baseCoin,
+            type: ctx.type,
+            days: ctx.days,
+            listCoins: ctx.listCoins,
+          })
+        },
       },
       ...tickerCtx,
     },
@@ -89,6 +119,7 @@ export const machineConfig: (
           CHANGE_TIME_OPTION: "ticker",
           VIEW_INFO: "tickerInfo",
           ADD_TO_WATCHLIST: "addWatchList",
+          SHOW_OTHER_TICKER: "showOtherTicker",
         },
       },
       tickerPair: {
@@ -118,6 +149,12 @@ export const machineConfig: (
           VIEW_CHART: "ticker",
         },
       },
+      showOtherTicker: {
+        on: {
+          VIEW_CHART: "showOtherTicker",
+          CHANGE_TICKER_OPTION: "ticker",
+        },
+      },
     },
   }
 }

src/ui/discord/select-menu.ts

@@ -170,3 +170,19 @@ export function composeDaysSelectMenu(
   })
   return selectRow
 }
+
+export function composeOtherTickerSelectMenu(
+  customId: string,
+  remainingCoins: any[],
+) {
+  const opt = (coin: any): MessageSelectOptionData => ({
+    label: coin.id + " - " + coin.current_price,
+    value: coin.id,
+  })
+  const selectRow = composeDiscordSelectionRow({
+    customId,
+    placeholder: "Make a selection",
+    options: remainingCoins.map((c) => opt(c)),
+  })
+  return selectRow
+}