Show Luna price chart again

src/data/Terra/TerraAPI.ts

@@ -36,16 +36,16 @@ export const useIsTerraAPIAvailable = () => {
   return !!url
 }
 
-export const useTerraAPI = <T>(path: string, fallback?: T) => {
+export const useTerraAPI = <T>(path: string, params?: object, fallback?: T) => {
   const baseURL = useTerraAPIURL()
   const available = useIsTerraAPIAvailable()
   const shouldFallback = !available && fallback
 
   return useQuery<T, AxiosError>(
-    [queryKey.TerraAPI, baseURL, path],
+    [queryKey.TerraAPI, baseURL, path, params],
     async () => {
       if (shouldFallback) return fallback
-      const { data } = await axios.get(path, { baseURL })
+      const { data } = await axios.get(path, { baseURL, params })
       return data
     },
     { ...RefetchOptions.INFINITY, enabled: !!(baseURL || shouldFallback) }
@@ -72,6 +72,19 @@ export const useGasPrices = () => {
 }
 
 /* charts */
+export enum ChartInterval {
+  "1m" = "1m",
+  "5m" = "5m",
+  "15m" = "15m",
+  "30m" = "30m",
+  "1h" = "1h",
+  "1d" = "1d",
+}
+
+export const useLunaPriceChart = (denom: Denom, interval: ChartInterval) => {
+  return useTerraAPI<ChartDataItem[]>(`chart/price/${denom}`, { interval })
+}
+
 export const useTxVolume = (denom: Denom, type: Aggregate) => {
   return useTerraAPI<ChartDataItem[]>(`chart/tx-volume/${denom}/${type}`)
 }
@@ -90,7 +103,7 @@ export const useWallets = (walletsType: AggregateWallets, type: Aggregate) => {
 
 /* validators */
 export const useTerraValidators = () => {
-  return useTerraAPI<TerraValidator[]>("validators", [])
+  return useTerraAPI<TerraValidator[]>("validators", undefined, [])
 }
 
 export const useTerraValidator = (address: ValAddress) => {

src/pages/charts/LunaPriceChart.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react"
+import { formatNumber } from "@terra.kitchen/utils"
+import { useCurrency } from "data/settings/Currency"
+import { useThemeAnimation } from "data/settings/Theme"
+import { ChartInterval, useLunaPriceChart } from "data/Terra/TerraAPI"
+import { Flex, Grid } from "components/layout"
+import { Read } from "components/token"
+import { convert, LOADING } from "../charts/components/ChartContainer"
+import ButtonGroup from "./components/ButtonGroup"
+import Chart from "./components/Chart"
+
+const LunaPriceChart = () => {
+  const currency = useCurrency()
+  const denom = currency === "uluna" ? "uusd" : currency
+  const [chartInterval, setChartInterval] = useState(ChartInterval["15m"])
+  const { data, isLoading } = useLunaPriceChart(denom, chartInterval)
+  const animation = useThemeAnimation()
+
+  const formatValue = (value: string) => (
+    <Read amount={value} denom={denom} decimals={0} auto />
+  )
+
+  const tickFormat = {
+    "1m": "h:mm a",
+    "5m": "h:mm a",
+    "15m": "h:mm a",
+    "30m": "h:mm a",
+    "1h": "d MMM h a",
+    "1d": "d MMM",
+  }[chartInterval]
+
+  const render = () => {
+    if (isLoading) return <img src={animation} alt="" {...LOADING} />
+    if (!data) return null
+    return (
+      <Chart
+        type="area"
+        data={data.map(convert(formatValue))}
+        formatY={(value) => formatNumber(value, { comma: true, integer: true })}
+        formatTooltipDate={
+          chartInterval === "1d" ? undefined : (date) => date.toLocaleString()
+        }
+        tickFormat={tickFormat}
+        padding={data.find(({ value }) => Number(value) > 1000) ? 48 : 20}
+      />
+    )
+  }
+
+  return (
+    <Grid gap={28}>
+      <ButtonGroup
+        value={chartInterval}
+        onChange={setChartInterval}
+        options={Object.values(ChartInterval).map((value) => {
+          return { value, label: value }
+        })}
+      />
+
+      <Flex>{render()}</Flex>
+    </Grid>
+  )
+}
+
+export default LunaPriceChart

src/pages/charts/components/Chart.tsx

@@ -19,9 +19,12 @@ export interface ChartPoint {
 export interface ChartProps {
   type: "bar" | "area"
   formatY: (value: string) => string
+  formatTooltipDate?: (date: Date) => string
 
   /* customize */
   ticks?: number[]
+  tickFormat?: string
+  padding?: number
 
   /* filled bar */
   filled?: boolean
@@ -31,7 +34,9 @@ interface Props extends ChartProps {
   data: ChartPoint[]
 }
 
-const Chart = ({ type = "area", data, formatY, filled, ticks }: Props) => {
+const Chart = ({ type = "area", data, formatY, filled, ...props }: Props) => {
+  const { ticks, tickFormat, formatTooltipDate, padding } = props
+
   const COLORS = {
     // Call this fn inside the component to get the latest theme
     STROKE: variable("--chart"),
@@ -78,7 +83,7 @@ const Chart = ({ type = "area", data, formatY, filled, ticks }: Props) => {
             minTickGap={30} // Margin between each text
             tick={{ fill: COLORS.MUTED }} // Text color
             tickFormatter={(t) =>
-              format(t, data.length > 30 ? "yyyy QQQ" : "MMM d")
+              format(t, tickFormat ?? (data.length > 30 ? "yyyy QQQ" : "MMM d"))
             }
             tickMargin={8} // Padding between text and chart
             tickSize={0} // Line between text and chart
@@ -94,11 +99,11 @@ const Chart = ({ type = "area", data, formatY, filled, ticks }: Props) => {
             tickFormatter={formatY}
             tickMargin={4} // Padding between text and chart
             tickSize={0} // Line between text and chart
-            width={40} // Space including padding
+            width={padding ?? 40} // Space including padding
           />
           <Tooltip
             cursor={{ fill: COLORS.BORDER, stroke: COLORS.BORDER }}
-            content={<ChartTooltip />}
+            content={<ChartTooltip formatDate={formatTooltipDate} />}
           />
           <CartesianGrid stroke={COLORS.BORDER} vertical={false} />
         </>

src/pages/charts/components/ChartContainer.tsx

@@ -7,7 +7,7 @@ import { Wrong } from "components/feedback"
 import Chart, { ChartProps, CHART_HEIGHT } from "./Chart"
 import styles from "./ChartContainer.module.scss"
 
-const LOADING = {
+export const LOADING = {
   width: CHART_HEIGHT / 2,
   height: CHART_HEIGHT / 2,
   style: { margin: CHART_HEIGHT / 4 },
@@ -62,7 +62,7 @@ const ChartContainer = (props: Props) => {
 export default ChartContainer
 
 /* utils */
-const convert = (formatValue: Props["formatValue"]) => {
+export const convert = (formatValue: Props["formatValue"]) => {
   return ({ datetime, value }: ChartDataItem) => {
     return {
       t: new Date(datetime),

src/pages/charts/components/ChartTooltip.module.scss

@@ -3,7 +3,7 @@
   border-radius: var(--border-radius);
   color: var(--button-primary-text);
   padding: 5px 12px;
-  width: 140px;
+  min-width: 140px;
   white-space: nowrap;
 }
 

src/pages/charts/components/ChartTooltip.tsx

@@ -1,14 +1,25 @@
 import { ChartPoint } from "./Chart"
 import styles from "./ChartTooltip.module.scss"
 
-const ChartTooltip = ({ label, payload, active }: any) => {
+interface Props {
+  label: Date
+  payload: { payload: ChartPoint }[]
+  active: boolean
+  formatDate?: (date: Date) => string
+}
+
+const ChartTooltip = (props: any) => {
+  const { label, payload, active } = props as Props
+  const { formatDate = (date) => date.toLocaleDateString() } = props as Props
+
   if (!active) return null
-  const { y } = payload[0].payload as ChartPoint
+
+  const { y } = payload[0].payload
 
   return (
     <article className={styles.tooltip}>
       <h1 className={styles.value}>{y}</h1>
-      <p className={styles.date}>{label.toDateString()}</p>
+      <p className={styles.date}>{formatDate(label)}</p>
     </article>
   )
 }

src/pages/dashboard/LunaPrice.tsx

@@ -3,6 +3,8 @@ import { useCurrency } from "data/settings/Currency"
 import { useMemoizedPrices } from "data/queries/oracle"
 import { Card } from "components/layout"
 import { Read } from "components/token"
+import { ModalButton } from "components/feedback"
+import LunaPriceChart from "../charts/LunaPriceChart"
 import DashboardContent from "./components/DashboardContent"
 import styles from "./Dashboard.module.scss"
 
@@ -17,8 +19,16 @@ const LunaPrice = () => {
     const { uluna: price } = prices
     return (
       <DashboardContent
-        value={
-          <Read amount={String(price)} denom={denom} decimals={0} fixed={2} />
+        value={<Read amount={String(price)} denom={denom} decimals={0} auto />}
+        footer={
+          <ModalButton
+            title={t("Luna price")}
+            renderButton={(open) => (
+              <button onClick={open}>{t("Show chart")}</button>
+            )}
+          >
+            <LunaPriceChart />
+          </ModalButton>
         }
       />
     )

src/pages/dashboard/components/DashboardContent.module.scss

@@ -2,3 +2,12 @@
   font-size: 20px;
   font-weight: var(--bold);
 }
+
+.footer button {
+  cursor: zoom-in;
+  font-size: 12px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/pages/dashboard/components/SelectDenom.tsx

@@ -3,7 +3,6 @@ import { isDenomTerraNative } from "@terra.kitchen/utils"
 import { WithTokenItem } from "data/token"
 import { ModalButton } from "components/feedback"
 import { TokenCard, TokenCardGrid } from "components/token"
-import styles from "./SelectDenom.module.scss"
 
 interface Item extends CoinData {
   value?: Value
@@ -20,11 +19,7 @@ const SelectDenom = ({ title, list }: Props) => {
   return (
     <ModalButton
       title={title}
-      renderButton={(open) => (
-        <button className={styles.button} onClick={open}>
-          {t("Show all")}
-        </button>
-      )}
+      renderButton={(open) => <button onClick={open}>{t("Show all")}</button>}
     >
       <TokenCardGrid maxHeight>
         {list