From bc467f1474fc807c42b9a8e4f64d3170cf79a5d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sehyun=20Chung=20=E2=9C=8C=EF=B8=8E?=
 <41171808+sehyunc@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:53:38 -0700
Subject: [PATCH] prefetch exchange prices

---
 .../app/(desktop)/[base]/[quote]/page.tsx     | 21 +++--------
 .../app/(desktop)/[base]/page.tsx             | 20 +++-------
 trade.renegade.fi/app/(desktop)/layout.tsx    |  1 -
 trade.renegade.fi/app/(mobile)/m/body.tsx     |  4 +-
 trade.renegade.fi/app/(mobile)/m/page.tsx     |  9 ++---
 .../components/banners/median-banner.tsx      | 37 +++++++------------
 6 files changed, 31 insertions(+), 61 deletions(-)

diff --git a/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx b/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx
index 7de897b2..e2ac584f 100644
--- a/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx
+++ b/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx
@@ -1,3 +1,4 @@
+import { PriceReporterWs } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { Main } from "@/app/(desktop)/[base]/[quote]/main"
@@ -5,6 +6,7 @@ import { MedianBanner } from "@/components/banners/median-banner"
 import { RelayerStatusData } from "@/components/banners/relayer-status-data"
 import { OrdersAndCounterpartiesPanel } from "@/components/panels/orders-panel"
 import { WalletsPanel } from "@/components/panels/wallets-panel"
+import { env } from "@/env.mjs"
 import backgroundPattern from "@/icons/background_pattern.png"
 
 // export function generateStaticParams() {
@@ -18,25 +20,14 @@ import backgroundPattern from "@/icons/background_pattern.png"
 //   )
 // }
 
-// const renegade = new Renegade({
-//   relayerHostname: env.NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME,
-//   relayerHttpPort: 3000,
-//   relayerWsPort: 4000,
-//   useInsecureTransport:
-//     env.NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME === "localhost",
-//   verbose: false,
-// })
-
 export default async function Page({
   params: { base, quote },
 }: {
   params: { base: string; quote: string }
 }) {
-  // const report = await renegade.queryPriceReporter(
-  //   getToken({ input: base }),
-  //   getToken({ input: quote })
-  // )
-  // console.log("🚀 ~ report:", report)
+  const report = await new PriceReporterWs(
+    env.NEXT_PUBLIC_PRICE_REPORTER_URL
+  ).getExchangePrices(base)
   return (
     <div
       style={{
@@ -54,7 +45,7 @@ export default async function Page({
         style={{ objectFit: "cover", objectPosition: "center", zIndex: -1 }}
       />
       <MedianBanner
-        // report={report}
+        report={report}
         activeBaseTicker={base}
         activeQuoteTicker={quote}
       />
diff --git a/trade.renegade.fi/app/(desktop)/[base]/page.tsx b/trade.renegade.fi/app/(desktop)/[base]/page.tsx
index 5cbacb6d..9ca23d88 100644
--- a/trade.renegade.fi/app/(desktop)/[base]/page.tsx
+++ b/trade.renegade.fi/app/(desktop)/[base]/page.tsx
@@ -1,3 +1,4 @@
+import { PriceReporterWs } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { DepositBody } from "@/app/(desktop)/[base]/[quote]/deposit"
@@ -5,6 +6,7 @@ import { MedianBanner } from "@/components/banners/median-banner"
 import { RelayerStatusData } from "@/components/banners/relayer-status-data"
 import { OrdersAndCounterpartiesPanel } from "@/components/panels/orders-panel"
 import { WalletsPanel } from "@/components/panels/wallets-panel"
+import { env } from "@/env.mjs"
 import backgroundPattern from "@/icons/background_pattern.png"
 
 // export function generateStaticParams() {
@@ -16,24 +18,14 @@ import backgroundPattern from "@/icons/background_pattern.png"
 //   })
 // }
 
-// const renegade = new Renegade({
-//   relayerHostname: env.NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME,
-//   relayerHttpPort: 3000,
-//   relayerWsPort: 4000,
-//   useInsecureTransport:
-//     env.NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME === "localhost",
-//   verbose: false,
-// })
-
 export default async function Page({
   params: { base, quote },
 }: {
   params: { base: string; quote: string }
 }) {
-  // const report = await renegade.queryExchangeHealthStates(
-  //   new Token({ ticker: base === "USDC" ? "WETH" : base }),
-  //   new Token({ ticker: "USDC" })
-  // )
+  const report = await new PriceReporterWs(
+    env.NEXT_PUBLIC_PRICE_REPORTER_URL
+  ).getExchangePrices(base)
   return (
     <div
       style={{
@@ -51,7 +43,7 @@ export default async function Page({
         style={{ objectFit: "cover", objectPosition: "center", zIndex: -1 }}
       />
       <MedianBanner
-        // report={report}
+        report={report}
         activeBaseTicker={base}
         activeQuoteTicker={quote}
       />
diff --git a/trade.renegade.fi/app/(desktop)/layout.tsx b/trade.renegade.fi/app/(desktop)/layout.tsx
index 613742a7..5ec8ed32 100644
--- a/trade.renegade.fi/app/(desktop)/layout.tsx
+++ b/trade.renegade.fi/app/(desktop)/layout.tsx
@@ -39,7 +39,6 @@ export default async function RootLayout({
 }) {
   const icons = await TICKER_TO_LOGO_URL_HANDLE
   const prices = await getTokenBannerData(renegade)
-  console.log("🚀 ~ prices:", prices)
   return (
     <html lang="en">
       <body>
diff --git a/trade.renegade.fi/app/(mobile)/m/body.tsx b/trade.renegade.fi/app/(mobile)/m/body.tsx
index 550d621d..fa47898f 100644
--- a/trade.renegade.fi/app/(mobile)/m/body.tsx
+++ b/trade.renegade.fi/app/(mobile)/m/body.tsx
@@ -2,7 +2,7 @@
 
 import { ArrowForwardIcon } from "@chakra-ui/icons"
 import { Button, Flex, HStack, Text } from "@chakra-ui/react"
-import { ExchangeHealthState } from "@renegade-fi/renegade-js"
+import { Exchange } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { TokensBanner } from "@/app/(mobile)/m/tokens-banner"
@@ -75,7 +75,7 @@ export function MobileBody({
   report,
 }: {
   prices: number[]
-  report: ExchangeHealthState
+  report?: Record<Exchange, number>
 }) {
   return (
     <Flex
diff --git a/trade.renegade.fi/app/(mobile)/m/page.tsx b/trade.renegade.fi/app/(mobile)/m/page.tsx
index 0b199d1c..3cb43265 100644
--- a/trade.renegade.fi/app/(mobile)/m/page.tsx
+++ b/trade.renegade.fi/app/(mobile)/m/page.tsx
@@ -1,4 +1,4 @@
-import { Renegade, Token } from "@renegade-fi/renegade-js"
+import { PriceReporterWs, Renegade } from "@renegade-fi/renegade-js"
 
 import { env } from "@/env.mjs"
 import { getTokenBannerData } from "@/lib/utils"
@@ -18,10 +18,9 @@ const renegade = new Renegade({
 })
 export default async function Page() {
   const prices = await getTokenBannerData(renegade)
-  const report = await renegade.queryExchangeHealthStates(
-    new Token({ ticker: "WBTC" }),
-    new Token({ ticker: "USDC" })
-  )
+  const report = await new PriceReporterWs(
+    env.NEXT_PUBLIC_PRICE_REPORTER_URL
+  ).getExchangePrices("WBTC")
   return (
     <div style={{ height: "100vh", overflowY: "hidden" }}>
       <MobileNav />
diff --git a/trade.renegade.fi/components/banners/median-banner.tsx b/trade.renegade.fi/components/banners/median-banner.tsx
index a0e8ca0c..3cdfe254 100644
--- a/trade.renegade.fi/components/banners/median-banner.tsx
+++ b/trade.renegade.fi/components/banners/median-banner.tsx
@@ -1,12 +1,7 @@
 "use client"
 
 import { Box, Flex, Link, Spacer, Stack, Text } from "@chakra-ui/react"
-import {
-  Exchange,
-  ExchangeHealthState,
-  PriceReport,
-  Token,
-} from "@renegade-fi/renegade-js"
+import { Exchange, Token } from "@renegade-fi/renegade-js"
 import React from "react"
 
 import { BannerSeparator } from "@/components/banner-separator"
@@ -60,7 +55,7 @@ interface ExchangeConnectionTripleProps {
   activeBaseTicker: string
   activeQuoteTicker: string
   exchange: Exchange
-  priceReport?: PriceReport
+  initialPrice?: number
   isMobile?: boolean
 }
 function ExchangeConnectionTriple(props: ExchangeConnectionTripleProps) {
@@ -102,15 +97,9 @@ function ExchangeConnectionTriple(props: ExchangeConnectionTripleProps) {
   )
 
   // let healthState = props.priceReport.healthState
-  let showPrice: boolean = state === "live"
-  let connectionText: string =
-    state === "live" ? "LIVE" : state === "stale" ? "STALE" : "LOADING"
-  let textVariant: string =
-    state === "live"
-      ? "status-green"
-      : state === "stale"
-      ? "status-red"
-      : "status-gray"
+  let showPrice = true
+  let connectionText: string = state === "stale" ? "STALE" : "LIVE"
+  let textVariant: string = state === "stale" ? "status-red" : "status-green"
   // If exchange is not supported, modify accordingly
   // if (props.exchange === Exchange.Uniswapv3) {
   //   showPrice = false
@@ -169,7 +158,7 @@ function ExchangeConnectionTriple(props: ExchangeConnectionTripleProps) {
           quoteTicker={props.activeQuoteTicker}
           exchange={props.exchange}
           isMobile={props.isMobile}
-          // price={props.priceReport.midpointPrice}
+          initialPrice={props.initialPrice}
         />
       )}
       <Stack
@@ -201,7 +190,7 @@ function ExchangeConnectionTriple(props: ExchangeConnectionTripleProps) {
 interface MedianTripleProps {
   activeBaseTicker: string
   activeQuoteTicker: string
-  priceReport?: PriceReport
+  initialPrice?: number
   isMobile?: boolean
 }
 function MedianTriple(props: MedianTripleProps) {
@@ -228,7 +217,7 @@ function MedianTriple(props: MedianTripleProps) {
         activeQuoteTicker={props.activeQuoteTicker}
         exchange={Exchange.Binance}
         isMobile={props.isMobile}
-        priceReport={props.priceReport}
+        initialPrice={props.initialPrice}
       />
       <BannerSeparator flexGrow={4} />
     </Flex>
@@ -239,7 +228,7 @@ interface ExchangeConnectionsBannerProps {
   activeBaseTicker: string
   activeQuoteTicker: string
   isMobile?: boolean
-  report?: ExchangeHealthState
+  report?: Record<Exchange, number>
 }
 interface ExchangeConnectionsBannerState {
   exchangeConnectionsBannerRef: React.RefObject<HTMLDivElement>
@@ -449,7 +438,7 @@ export class MedianBanner extends React.Component<
           activeBaseTicker={this.props.activeBaseTicker}
           activeQuoteTicker={this.props.activeQuoteTicker}
           isMobile={this.props.isMobile}
-          // priceReport={this.props.report.Median}
+          initialPrice={this.props.report?.[Exchange.Binance]}
         />
         <Flex
           position="relative"
@@ -513,7 +502,7 @@ export class MedianBanner extends React.Component<
                 activeBaseTicker={this.props.activeBaseTicker}
                 activeQuoteTicker={this.props.activeQuoteTicker}
                 exchange={Exchange.Coinbase}
-                // priceReport={this.props.report.Coinbase}
+                initialPrice={this.props.report?.[Exchange.Coinbase]}
                 isMobile={this.props.isMobile}
               />
               <BannerSeparator />
@@ -521,7 +510,7 @@ export class MedianBanner extends React.Component<
                 activeBaseTicker={this.props.activeBaseTicker}
                 activeQuoteTicker={this.props.activeQuoteTicker}
                 exchange={Exchange.Kraken}
-                // priceReport={this.props.report.Kraken}
+                initialPrice={this.props.report?.[Exchange.Kraken]}
                 isMobile={this.props.isMobile}
               />
               <BannerSeparator />
@@ -529,7 +518,7 @@ export class MedianBanner extends React.Component<
                 activeBaseTicker={this.props.activeBaseTicker}
                 activeQuoteTicker={this.props.activeQuoteTicker}
                 exchange={Exchange.Okx}
-                // priceReport={this.props.report.Okx}
+                initialPrice={this.props.report?.[Exchange.Okx]}
                 isMobile={this.props.isMobile}
               />
               {/* <BannerSeparator /> */}