prefetch exchange prices

renegade-fi · Apr 3, 2024 · 1147bc5 · 1147bc5
1 parent 3f8603b
commit 1147bc5
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 66 deletions.
diff --git a/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx b/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx
@@ -1,10 +1,12 @@
+import { PriceReporterWs } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { Main } from "@/app/(desktop)/[base]/[quote]/main"
 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
@@ -1,10 +1,12 @@
+import { PriceReporterWs } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { DepositBody } from "@/app/(desktop)/[base]/[quote]/deposit"
 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
@@ -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
@@ -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
@@ -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
@@ -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,23 +502,23 @@ 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 />
               <ExchangeConnectionTriple
                 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 />
               <ExchangeConnectionTriple
                 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 /> */}

diff --git a/trade.renegade.fi/package.json b/trade.renegade.fi/package.json
@@ -21,7 +21,7 @@
     "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@renegade-fi/renegade-js": "^0.4.26",
+    "@renegade-fi/renegade-js": "^0.4.27",
     "@t3-oss/env-nextjs": "^0.6.0",
     "@tanstack/react-query": "^5.24.1",
     "connectkit": "^1.7.2",

diff --git a/trade.renegade.fi/yarn.lock b/trade.renegade.fi/yarn.lock
@@ -1910,10 +1910,10 @@
   dependencies:
     merge-options "^3.0.4"
 
-"@renegade-fi/renegade-js@^0.4.26":
-  version "0.4.26"
-  resolved "https://registry.yarnpkg.com/@renegade-fi/renegade-js/-/renegade-js-0.4.26.tgz#d7088dd7f9065c637cb9eabc8c11a8513455193d"
-  integrity sha512-Bcygr9zE+bU8rerJlgRc91/XspVpBBeW6RG4tcHkQI2h9K5ohMU256Wh4sVpfg7b4abxMkNWU1e+kFbddUnlSQ==
+"@renegade-fi/renegade-js@^0.4.27":
+  version "0.4.27"
+  resolved "https://registry.yarnpkg.com/@renegade-fi/renegade-js/-/renegade-js-0.4.27.tgz#78e35e91a8d2049248c8eaf25d0d49de3c3740b4"
+  integrity sha512-8QGdJtO/h7MGfw1We/UzYk5sdMev6J6gWwxtzm3dYZ4xzoQWfMPuXkbosiTnRASf15/tsclwFDlj1HTIhyme6A==
   dependencies:
     "@noble/hashes" "^1.3.0"
     axios "^1.3.5"