trade: integrate price reporter

renegade-fi · Mar 28, 2024 · 31e3e68 · 31e3e68
1 parent 65a7a44
commit 31e3e68
Show file tree

Hide file tree

Showing 22 changed files with 389 additions and 245 deletions.
diff --git a/.github/workflows/eslint.yaml b/.github/workflows/eslint.yaml
@@ -38,11 +38,12 @@ jobs:
           dir: "trade.renegade.fi"
         env:
           NEXT_PUBLIC_DARKPOOL_CONTRACT: ${{ secrets.NEXT_PUBLIC_DARKPOOL_CONTRACT }}
+          NEXT_PUBLIC_INTERCOM_APP_ID: ${{ secrets.NEXT_PUBLIC_INTERCOM_APP_ID }}
+          NEXT_PUBLIC_NODE_ENV: ${{ secrets.NEXT_PUBLIC_NODE_ENV }}
           NEXT_PUBLIC_PERMIT2_CONTRACT: ${{ secrets.NEXT_PUBLIC_PERMIT2_CONTRACT }}
+          NEXT_PUBLIC_PRICE_REPORTER_URL: ${{ secrets.NEXT_PUBLIC_PRICE_REPORTER_URL }}
           NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME: ${{ secrets.NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME }}
           NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID }}
-          NEXT_PUBLIC_NODE_ENV: ${{ secrets.NEXT_PUBLIC_NODE_ENV }}
-          NEXT_PUBLIC_INTERCOM_APP_ID: ${{ secrets.NEXT_PUBLIC_INTERCOM_APP_ID }}
       - name: Type check (trade.renegade.fi)
         uses: borales/actions-yarn@v4.2.0
         with:

diff --git a/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx b/trade.renegade.fi/app/(desktop)/[base]/[quote]/page.tsx
@@ -1,14 +1,11 @@
-import { Renegade } 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"
-import { getToken } from "@/lib/utils"
 
 // export function generateStaticParams() {
 //   return DISPLAYED_TICKERS.filter(([base]) => base !== "USDC").map(
@@ -21,24 +18,25 @@ import { getToken } from "@/lib/utils"
 //   )
 // }
 
-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,
-})
+// 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(
-    getToken({ input: base }),
-    getToken({ input: quote })
-  )
+  // const report = await renegade.queryPriceReporter(
+  //   getToken({ input: base }),
+  //   getToken({ input: quote })
+  // )
+  // console.log("🚀 ~ report:", report)
   return (
     <div
       style={{
@@ -56,7 +54,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]/[quote]/trading.tsx b/trade.renegade.fi/app/(desktop)/[base]/[quote]/trading.tsx
@@ -10,6 +10,7 @@ import { PlaceOrderButton } from "@/components/place-order-button"
 import { OrderProvider, useOrder } from "@/contexts/Order/order-context"
 import { Direction } from "@/contexts/Order/types"
 import { useUSDPrice } from "@/hooks/use-usd-price"
+import { formatPrice } from "@/lib/utils"
 
 interface SelectableProps {
   text: string
@@ -181,6 +182,7 @@ function TradingInner() {
 
 function HelperText({ baseTicker }: { baseTicker: string }) {
   const usdPrice = useUSDPrice(baseTicker, 1)
+  const formattedUsdPrice = formatPrice(usdPrice)
   return (
     <HStack
       marginTop="5px"
@@ -192,7 +194,7 @@ function HelperText({ baseTicker }: { baseTicker: string }) {
     >
       <Text marginRight="4px">
         Trades are end-to-end encrypted and always clear at the real-time
-        midpoint of ${usdPrice}
+        midpoint of ${formattedUsdPrice}
       </Text>
     </HStack>
   )

diff --git a/trade.renegade.fi/app/(desktop)/[base]/page.tsx b/trade.renegade.fi/app/(desktop)/[base]/page.tsx
@@ -1,12 +1,10 @@
-import { Renegade, Token } 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() {
@@ -18,24 +16,24 @@ 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,
-})
+// 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 renegade.queryExchangeHealthStates(
+  //   new Token({ ticker: base === "USDC" ? "WETH" : base }),
+  //   new Token({ ticker: "USDC" })
+  // )
   return (
     <div
       style={{
@@ -53,7 +51,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,6 +39,7 @@ 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, PriceReport } from "@renegade-fi/renegade-js"
+import { ExchangeHealthState } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 
 import { TokensBanner } from "@/app/(mobile)/m/tokens-banner"
@@ -74,7 +74,7 @@ export function MobileBody({
   prices,
   report,
 }: {
-  prices: (PriceReport | undefined)[]
+  prices: number[]
   report: ExchangeHealthState
 }) {
   return (

diff --git a/trade.renegade.fi/app/(mobile)/m/tokens-banner.tsx b/trade.renegade.fi/app/(mobile)/m/tokens-banner.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Box, Stack, Text } from "@chakra-ui/react"
-import { Exchange, PriceReport } from "@renegade-fi/renegade-js"
+import { Exchange } from "@renegade-fi/renegade-js"
 
 import { LivePrices } from "@/components/live-price"
 
@@ -15,11 +15,7 @@ const DISPLAYED_TICKERS = [
   ["LDO", "USDC"],
 ]
 
-export function TokensBanner({
-  prices,
-}: {
-  prices: (PriceReport | undefined)[]
-}) {
+export function TokensBanner({ prices }: { prices: number[] }) {
   return (
     <Box
       width="calc(0.75 * var(--banner-height))"
@@ -48,7 +44,7 @@ export function TokensBanner({
               baseTicker={baseTicker}
               quoteTicker={quoteTicker}
               exchange={Exchange.Median}
-              price={prices[i]?.midpointPrice}
+              initialPrice={prices[i]}
             />
           </Stack>
         )

diff --git a/trade.renegade.fi/app/providers.tsx b/trade.renegade.fi/app/providers.tsx
@@ -21,6 +21,7 @@ import { WagmiProvider, createConfig } from "wagmi"
 
 import { AppProvider } from "@/contexts/App/app-context"
 import { ExchangeProvider } from "@/contexts/Exchange/exchange-context"
+import { PriceProvider } from "@/contexts/PriceContext/price-context"
 import { RenegadeProvider } from "@/contexts/Renegade/renegade-context"
 import { env } from "@/env.mjs"
 import { stylusDevnetEc2 } from "@/lib/viem"
@@ -247,10 +248,12 @@ export function Providers({
                 >
                   <RenegadeProvider>
                     <ExchangeProvider>
-                      <AppProvider tokenIcons={icons}>
-                        <Toaster position="bottom-center" />
-                        {children}
-                      </AppProvider>
+                      <PriceProvider>
+                        <AppProvider tokenIcons={icons}>
+                          <Toaster position="bottom-center" />
+                          {children}
+                        </AppProvider>
+                      </PriceProvider>
                     </ExchangeProvider>
                   </RenegadeProvider>
                 </ConnectKitProvider>