refactor: use prices api for llamma trades

curvefi · Jan 25, 2025 · e492fa5 · e492fa5
1 parent d0406e2
commit e492fa5
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 84 deletions.
diff --git a/apps/main/src/lend/components/ChartOhlcWrapper/TradesData.tsx b/apps/main/src/lend/components/ChartOhlcWrapper/TradesData.tsx
@@ -17,21 +17,21 @@ const TradesData: React.FC<TradesDataProps> = ({ lendTradesData, chainId }) => {
   return (
     <>
       {lendTradesData.map((transaction, index) => (
-        <TransactionRow key={`${transaction.transaction_hash}-${transaction.sold_id}-trade-${index}`}>
-          <Event href={networks[chainId].scanTxPath(transaction.transaction_hash)} rel="noopener" target="_blank">
+        <TransactionRow key={`${transaction.txHash}-${transaction.idSold}-trade-${index}`}>
+          <Event href={networks[chainId].scanTxPath(transaction.txHash)} rel="noopener" target="_blank">
             <TradeFrom>
               <StyledTokenIcon
                 size="sm"
                 imageBaseUrl={imageBaseUrl}
-                token={transaction.token_sold.address}
-                address={transaction.token_sold.address}
+                token={transaction.tokenSold.address}
+                address={transaction.tokenSold.address}
               />
               <Box flex flexColumn>
-                <TradeFromSymbol>{transaction.token_sold.symbol}</TradeFromSymbol>
+                <TradeFromSymbol>{transaction.tokenSold.symbol}</TradeFromSymbol>
                 <TradeFromAmount>
                   <Chip isBold isNumber>
-                    {formatNumber(transaction.amount_sold, {
-                      ...getFractionDigitsOptions(transaction.amount_sold, 2),
+                    {formatNumber(transaction.amountSold, {
+                      ...getFractionDigitsOptions(transaction.amountSold, 2),
                     })}
                   </Chip>
                 </TradeFromAmount>
@@ -40,11 +40,11 @@ const TradesData: React.FC<TradesDataProps> = ({ lendTradesData, chainId }) => {
             <Arrow>→</Arrow>
             <TradeTo>
               <Box flex flexColumn>
-                <TradeToSymbol>{transaction.token_bought.symbol}</TradeToSymbol>
+                <TradeToSymbol>{transaction.tokenBought.symbol}</TradeToSymbol>
                 <TradeToAmount>
                   <Chip isBold isNumber>
-                    {formatNumber(transaction.amount_bought, {
-                      ...getFractionDigitsOptions(transaction.amount_bought, 2),
+                    {formatNumber(transaction.amountBought, {
+                      ...getFractionDigitsOptions(transaction.amountBought, 2),
                     })}
                   </Chip>
                 </TradeToAmount>
@@ -53,8 +53,8 @@ const TradesData: React.FC<TradesDataProps> = ({ lendTradesData, chainId }) => {
                 className="bought"
                 size="sm"
                 imageBaseUrl={imageBaseUrl}
-                token={transaction.token_bought.address}
-                address={transaction.token_bought.address}
+                token={transaction.tokenBought.address}
+                address={transaction.tokenBought.address}
               />
             </TradeTo>
           </Event>

diff --git a/apps/main/src/lend/components/ChartOhlcWrapper/types.ts b/apps/main/src/lend/components/ChartOhlcWrapper/types.ts
@@ -1,5 +1,6 @@
-import type { LlammaControllerEvent, LlammaTradeEvent } from '@ui/Chart/types'
+import type { LlammaControllerEvent } from '@ui/Chart/types'
 import { ChainId } from '@lend/types/lend.types'
+import type { LlammaTrade } from '@curvefi/prices-api/llamma'
 
 export type LendingMarketTokens = {
   borrowedToken: {
@@ -25,7 +26,7 @@ export interface LiquidityDataProps {
 }
 
 export interface TradesDataProps {
-  lendTradesData: LlammaTradeEvent[]
+  lendTradesData: LlammaTrade[]
   chainId: ChainId
 }
 

diff --git a/apps/main/src/lend/store/createOhlcChartSlice.ts b/apps/main/src/lend/store/createOhlcChartSlice.ts
@@ -8,14 +8,12 @@ import type {
   VolumeData,
   LlamaBaselinePriceData,
   OraclePriceData,
-  LlammaTradesApiResponse,
   LlammaControllerApiResponse,
-  LlammaTradeEvent,
   LlammaControllerEvent,
 } from 'ui/src/Chart/types'
 import type { UTCTimestamp } from 'lightweight-charts'
 import type { Address, Chain } from '@curvefi/prices-api'
-import { getOHLC } from '@curvefi/prices-api/llamma'
+import { getOHLC, getTrades } from '@curvefi/prices-api/llamma'
 
 import produce from 'immer'
 
@@ -52,7 +50,7 @@ type SliceState = {
     // flag for disabling oracle pool data if no oracle pools are found for the market on the api
     dataDisabled: boolean
   }
-  lendTradesData: LlammaTradeEvent[]
+  lendTradesData: Awaited<ReturnType<typeof getTrades>>['trades']
   lendControllerData: LlammaControllerEvent[]
   activityFetchStatus: FetchingStatus
   timeOption: TimeOptions
@@ -665,17 +663,16 @@ const createOhlcChart = (set: SetState<State>, get: GetState<State>) => ({
       const network = networks[chainId].id.toLowerCase()
 
       try {
-        const tradesFetch = await fetch(
-          `https://prices.curve.fi/v1/lending/llamma_trades/${network}/${poolAddress}?page=1&per_page=100
-          `,
-        )
-        const lpTradesRes: LlammaTradesApiResponse = await tradesFetch.json()
-        const sortedData = lpTradesRes.data.sort((a: LlammaTradeEvent, b: LlammaTradeEvent) => {
-          const timestampA = new Date(a.timestamp).getTime()
-          const timestampB = new Date(b.timestamp).getTime()
-          return timestampB - timestampA
+        const { trades } = await getTrades({
+          endpoint: 'lending',
+          chain: network as Chain,
+          llamma: poolAddress as Address,
+          page: 1,
+          perPage: 100,
         })
 
+        const sortedData = trades.sort((a, b) => b.timestamp - a.timestamp)
+
         if (sortedData) {
           set(
             produce((state: State) => {

diff --git a/apps/main/src/loan/components/ChartOhlcWrapper/TradesData.tsx b/apps/main/src/loan/components/ChartOhlcWrapper/TradesData.tsx
@@ -15,21 +15,21 @@ import Tooltip from '@ui/Tooltip'
 const TradesData: React.FC<TradesDataProps> = ({ llammaTradesData, chainId }) => (
   <>
     {llammaTradesData.map((transaction, index) => (
-      <TransactionRow key={`${transaction.transaction_hash}-${transaction.sold_id}-trade-${index}`}>
-        <Event href={networks[chainId].scanTxPath(transaction.transaction_hash)} rel="noopener" target="_blank">
+      <TransactionRow key={`${transaction.txHash}-${transaction.idSold}-trade-${index}`}>
+        <Event href={networks[chainId].scanTxPath(transaction.txHash)} rel="noopener" target="_blank">
           <TradeFrom>
             <StyledTokenIcon
               size="sm"
               imageBaseUrl={getImageBaseUrl(chainId)}
-              token={transaction.token_sold.address}
-              address={transaction.token_sold.address}
+              token={transaction.tokenSold.address}
+              address={transaction.tokenSold.address}
             />
             <Box flex flexColumn>
-              <TradeFromSymbol>{transaction.token_sold.symbol}</TradeFromSymbol>
+              <TradeFromSymbol>{transaction.tokenSold.symbol}</TradeFromSymbol>
               <TradeFromAmount>
                 <Chip isBold isNumber>
-                  {formatNumber(transaction.amount_sold, {
-                    ...getFractionDigitsOptions(transaction.amount_sold, 2),
+                  {formatNumber(transaction.amountSold, {
+                    ...getFractionDigitsOptions(transaction.amountSold, 2),
                   })}
                 </Chip>
               </TradeFromAmount>
@@ -38,11 +38,11 @@ const TradesData: React.FC<TradesDataProps> = ({ llammaTradesData, chainId }) =>
           <Arrow>→</Arrow>
           <TradeTo>
             <Box flex flexColumn>
-              <TradeToSymbol>{transaction.token_bought.symbol}</TradeToSymbol>
+              <TradeToSymbol>{transaction.tokenBought.symbol}</TradeToSymbol>
               <TradeToAmount>
                 <Chip isBold isNumber>
-                  {formatNumber(transaction.amount_bought, {
-                    ...getFractionDigitsOptions(transaction.amount_bought, 2),
+                  {formatNumber(transaction.amountBought, {
+                    ...getFractionDigitsOptions(transaction.amountBought, 2),
                   })}
                 </Chip>
               </TradeToAmount>
@@ -51,8 +51,8 @@ const TradesData: React.FC<TradesDataProps> = ({ llammaTradesData, chainId }) =>
               className="bought"
               size="sm"
               imageBaseUrl={getImageBaseUrl(chainId)}
-              token={transaction.token_bought.address}
-              address={transaction.token_bought.address}
+              token={transaction.tokenBought.address}
+              address={transaction.tokenBought.address}
             />
           </TradeTo>
         </Event>

diff --git a/apps/main/src/loan/components/ChartOhlcWrapper/types.ts b/apps/main/src/loan/components/ChartOhlcWrapper/types.ts
@@ -1,5 +1,6 @@
-import type { LlammaControllerEvent, LlammaTradeEvent } from '@ui/Chart/types'
+import type { LlammaControllerEvent } from '@ui/Chart/types'
 import { ChainId, Llamma } from '@loan/types/loan.types'
+import { LlammaTrade } from '@curvefi/prices-api/llamma'
 
 export type LlammaLiquidityCoins = {
   crvusd: {
@@ -25,6 +26,6 @@ export interface LiqudityDataProps {
 }
 
 export interface TradesDataProps {
-  llammaTradesData: LlammaTradeEvent[]
+  llammaTradesData: LlammaTrade[]
   chainId: ChainId
 }
diff --git a/apps/main/src/loan/store/createOhlcChartSlice.ts b/apps/main/src/loan/store/createOhlcChartSlice.ts
@@ -7,14 +7,12 @@ import type {
   VolumeData,
   LlamaBaselinePriceData,
   OraclePriceData,
-  LlammaTradesApiResponse,
   LlammaControllerApiResponse,
-  LlammaTradeEvent,
   LlammaControllerEvent,
 } from 'ui/src/Chart/types'
 import type { UTCTimestamp } from 'lightweight-charts'
 import type { Address, Chain } from '@curvefi/prices-api'
-import { getOHLC } from '@curvefi/prices-api/llamma'
+import { getOHLC, getTrades } from '@curvefi/prices-api/llamma'
 
 import produce from 'immer'
 
@@ -26,7 +24,7 @@ type SliceState = {
   volumeData: VolumeData[]
   oraclePriceData: OraclePriceData[]
   baselinePriceData: LlamaBaselinePriceData[]
-  llammaTradesData: LlammaTradeEvent[]
+  llammaTradesData: Awaited<ReturnType<typeof getTrades>>['trades']
   llammaControllerData: LlammaControllerEvent[]
   chartFetchStatus: FetchingStatus
   activityFetchStatus: FetchingStatus
@@ -292,17 +290,16 @@ const createOhlcChart = (set: SetState<State>, get: GetState<State>) => ({
       const network = networks[chainId].id.toLowerCase()
 
       try {
-        const tradesFetch = await fetch(
-          `https://prices.curve.fi/v1/crvusd/llamma_trades/${network}/${poolAddress}?page=1&per_page=100
-          `,
-        )
-        const lpTradesRes: LlammaTradesApiResponse = await tradesFetch.json()
-        const sortedData = lpTradesRes.data.sort((a: LlammaTradeEvent, b: LlammaTradeEvent) => {
-          const timestampA = new Date(a.timestamp).getTime()
-          const timestampB = new Date(b.timestamp).getTime()
-          return timestampB - timestampA
+        const { trades } = await getTrades({
+          endpoint: 'crvusd',
+          chain: network as Chain,
+          llamma: poolAddress as Address,
+          page: 1,
+          perPage: 100,
         })
 
+        const sortedData = trades.sort((a, b) => b.timestamp - a.timestamp)
+
         if (sortedData) {
           set(
             produce((state: State) => {

diff --git a/packages/prices-api/src/llamma/api.ts b/packages/prices-api/src/llamma/api.ts
@@ -17,10 +17,26 @@ export async function getEvents(endpoint: Endpoint, chain: Chain, llamma: string
   }
 }
 
-export async function getTrades(endpoint: Endpoint, chain: Chain, llamma: string, page: number, options?: Options) {
+type GetTradesParams = {
+  endpoint: Endpoint
+  chain: Chain
+  llamma: Address
+  page?: number
+  perPage?: number
+}
+
+export async function getTrades(
+  { endpoint, chain, llamma, page = 1, perPage = 10 }: GetTradesParams,
+  options?: Options,
+) {
   const host = await getHost(options)
+  const params = new URLSearchParams({
+    page: page.toString(),
+    per_page: perPage.toString(),
+  })
+
   const resp = await fetch<Responses.GetLlammaTradesResponse>(
-    `${host}/v1/${endpoint}/llamma_trades/${chain}/${llamma}?page=${page}&per_page=10`,
+    `${host}/v1/${endpoint}/llamma_trades/${chain}/${llamma}?${params.toString()}`,
   )
 
   return {

diff --git a/packages/ui/src/Chart/types.ts b/packages/ui/src/Chart/types.ts
@@ -135,28 +135,6 @@ export interface LpTradeToken {
   event_index: number
 }
 
-export interface LlammaTradeEvent {
-  sold_id: number
-  bought_id: number
-  token_sold: {
-    symbol: string
-    address: string
-  }
-  token_bought: {
-    symbol: string
-    address: string
-  }
-  amount_sold: number
-  amount_bought: number
-  price: number
-  buyer: string
-  fee_x: number
-  fee_y: number
-  block_number: number
-  timestamp: number
-  transaction_hash: string
-}
-
 export interface LlammaControllerEvent {
   provider: string
   deposit: {
@@ -170,12 +148,6 @@ export interface LlammaControllerEvent {
   transaction_hash: string
 }
 
-export interface LlammaTradesApiResponse {
-  chain: string
-  address: string
-  data: LlammaTradeEvent[]
-}
-
 export interface LlammaControllerApiResponse {
   chain: string
   address: string