1
- import { fixed } from "@delvtech/fixed-point-wasm" ;
1
+ import { fixed , parseFixed } from "@delvtech/fixed-point-wasm" ;
2
2
import {
3
3
getYieldSource ,
4
4
HyperdriveConfig ,
5
+ PointMultiplierReward ,
5
6
} from "@delvtech/hyperdrive-appconfig" ;
6
7
import { Link , useSearch } from "@tanstack/react-router" ;
7
8
import { ReactElement , ReactNode } from "react" ;
9
+ import Skeleton from "react-loading-skeleton" ;
10
+ import { formatRate } from "src/base/formatRate" ;
11
+ import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier" ;
8
12
import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain" ;
9
13
import { Well } from "src/ui/base/components/Well/Well" ;
14
+ import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice" ;
10
15
import { useLpApy } from "src/ui/hyperdrive/lp/hooks/useLpApy" ;
11
16
import { AssetStack } from "src/ui/markets/AssetStack" ;
12
17
import { usePoolsList } from "src/ui/markets/hooks/usePoolsList" ;
13
18
import {
14
19
MARKET_DETAILS_ROUTE ,
15
20
POINTS_MARKETS_ROUTE ,
16
21
} from "src/ui/markets/routes" ;
22
+ import { useRewards } from "src/ui/rewards/useRewards" ;
17
23
import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate" ;
18
24
import { useAccount } from "wagmi" ;
19
25
@@ -110,7 +116,27 @@ function PointsMarketCardBanner({
110
116
} : {
111
117
hyperdrive : HyperdriveConfig ;
112
118
} ) {
113
- const multipliers = [ { multiplier : "64x" , label : "SPIN Rewards" } ] ;
119
+ const { rewards } = useRewards ( hyperdrive ) ;
120
+ const { longPrice } = useCurrentLongPrice ( {
121
+ chainId : hyperdrive . chainId ,
122
+ hyperdriveAddress : hyperdrive . address ,
123
+ } ) ;
124
+ const pointRewards = rewards ?. filter (
125
+ ( { type } ) => type === "pointMultiplier" ,
126
+ ) as PointMultiplierReward [ ] | undefined ;
127
+
128
+ const multipliers =
129
+ longPrice && pointRewards
130
+ ? pointRewards . map ( ( { pointMultiplier, pointTokenLabel } ) => {
131
+ const capitalMultiplier = calculateMarketYieldMultiplier ( longPrice ) ;
132
+ return {
133
+ multiplier : capitalMultiplier
134
+ . mul ( parseFixed ( pointMultiplier ) )
135
+ . format ( { decimals : 0 } ) ,
136
+ label : pointTokenLabel ,
137
+ } ;
138
+ } )
139
+ : [ ] ;
114
140
return (
115
141
< div className = "flex w-full items-center justify-between rounded-xl bg-base-200 p-5" >
116
142
< div className = "flex w-full flex-col items-center justify-center gap-1.5" >
@@ -124,7 +150,7 @@ function PointsMarketCardBanner({
124
150
className = "flex w-full flex-col items-center justify-center gap-1.5"
125
151
>
126
152
< div className = "font-chakraPetch text-h4 font-medium" >
127
- { multiplier }
153
+ { multiplier } x
128
154
</ div >
129
155
< p className = "font-medium text-neutral-content sm:text-sm" >
130
156
{ label }
@@ -139,11 +165,11 @@ function PointsMarketCardBanner({
139
165
140
166
function PointsMarketTable ( { hyperdrive } : { hyperdrive : HyperdriveConfig } ) {
141
167
const { address : account } = useAccount ( ) ;
142
- const { lpApy } = useLpApy ( {
168
+ const { lpApy, lpApyStatus } = useLpApy ( {
143
169
chainId : hyperdrive . chainId ,
144
170
hyperdriveAddress : hyperdrive . address ,
145
171
} ) ;
146
- const { vaultRate } = useYieldSourceRate ( {
172
+ const { vaultRate, vaultRateStatus } = useYieldSourceRate ( {
147
173
chainId : hyperdrive . chainId ,
148
174
hyperdriveAddress : hyperdrive . address ,
149
175
} ) ;
@@ -212,8 +238,24 @@ function PointsMarketTable({ hyperdrive }: { hyperdrive: HyperdriveConfig }) {
212
238
col1 = {
213
239
< span className = "text-sm text-neutral-content" > Variable APY</ span >
214
240
}
215
- col2 = { < span className = "mr-5 text-sm" > 13.84%</ span > }
216
- col3 = { < span className = "mr-3 text-sm" > 13.84%</ span > }
241
+ col2 = {
242
+ < span className = "mr-5 text-sm" >
243
+ { vaultRateStatus !== "success" ? (
244
+ < Skeleton width = { 100 } />
245
+ ) : (
246
+ formatRate ( { rate : vaultRate ! . netVaultRate } )
247
+ ) }
248
+ </ span >
249
+ }
250
+ col3 = {
251
+ < span className = "mr-3 text-sm" >
252
+ { lpApyStatus !== "success" ? (
253
+ < Skeleton width = { 100 } />
254
+ ) : (
255
+ formatRate ( { rate : lpApy ! . netLpApy ! } )
256
+ ) }
257
+ </ span >
258
+ }
217
259
/>
218
260
< PointsMarketRow
219
261
col1 = {
0 commit comments