From 12c0970fc5f73042e94079dd37436a6e8b4bf90f Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 20 Jun 2024 15:08:08 -0700 Subject: [PATCH] feat: update to use proxy for staking apr (#702) --- public/configs/v1/env.json | 13 ++++++++- src/hooks/useEndpointsConfig.ts | 2 ++ src/hooks/useStakingAPR.ts | 35 ++++++++++++++++++++++++ src/hooks/useStakingAPY.ts | 28 ------------------- src/pages/token/rewards/StakingPanel.tsx | 21 ++++++++------ src/views/dialogs/StakeDialog.tsx | 11 +++++--- 6 files changed, 68 insertions(+), 42 deletions(-) create mode 100644 src/hooks/useStakingAPR.ts delete mode 100644 src/hooks/useStakingAPY.ts diff --git a/public/configs/v1/env.json b/public/configs/v1/env.json index b7399ba86..fdf210854 100644 --- a/public/configs/v1/env.json +++ b/public/configs/v1/env.json @@ -295,6 +295,7 @@ "0xsquid": "https://testnet.api.0xsquid.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4dev.dydx.exchange" }, "stakingValidators": [], @@ -368,6 +369,7 @@ "0xsquid": "https://testnet.api.0xsquid.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "http://dev3-faucet-lb-public-1644791410.us-east-2.elb.amazonaws.com" }, "stakingValidators": [], @@ -405,6 +407,7 @@ "0xsquid": "https://testnet.api.0xsquid.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4dev4.dydx.exchange" }, "stakingValidators": [], @@ -605,6 +608,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [ @@ -645,6 +649,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -681,6 +686,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -718,6 +724,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -754,6 +761,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -791,6 +799,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -828,6 +837,7 @@ "0xsquid": "https://testnet.api.squidrouter.com", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/", "geo": "https://api.dydx.exchange/v4/geo", + "stakingAPR": "https://apybara-proxy.infrastructure-34d.workers.dev/v0/protocols/dydx", "faucet": "https://faucet.v4testnet.dydx.exchange" }, "stakingValidators": [], @@ -865,7 +875,8 @@ ], "0xsquid": "[0xSquid endpoint for mainnet]", "nobleValidator": "[noble validator endpoint for mainnet]", - "geo": "[geo endpoint for mainnet]" + "geo": "[geo endpoint for mainnet]", + "stakingAPR": "[staking APR endpoint for mainnet]" }, "stakingValidators": [], "featureFlags": { diff --git a/src/hooks/useEndpointsConfig.ts b/src/hooks/useEndpointsConfig.ts index a47ccc417..87fe17f04 100644 --- a/src/hooks/useEndpointsConfig.ts +++ b/src/hooks/useEndpointsConfig.ts @@ -12,6 +12,7 @@ interface EndpointsConfig { '0xsquid': string; nobleValidator: string; faucet?: string; + stakingAPR?: string; } export const useEndpointsConfig = () => { @@ -24,5 +25,6 @@ export const useEndpointsConfig = () => { '0xsquid': endpointsConfig['0xsquid'], nobleValidator: endpointsConfig.nobleValidator, faucet: endpointsConfig.faucet, + stakingAPR: endpointsConfig.stakingAPR, }; }; diff --git a/src/hooks/useStakingAPR.ts b/src/hooks/useStakingAPR.ts new file mode 100644 index 000000000..886a006e5 --- /dev/null +++ b/src/hooks/useStakingAPR.ts @@ -0,0 +1,35 @@ +import { useQuery } from '@tanstack/react-query'; + +import { PERCENT_DECIMALS } from '@/constants/numbers'; + +import { useEndpointsConfig } from './useEndpointsConfig'; + +export const useStakingAPR = () => { + const { stakingAPR: stakingAPREndpoint } = useEndpointsConfig(); + + const queryFn = async () => { + if (!stakingAPREndpoint) { + return undefined; + } + const response = await fetch(stakingAPREndpoint, { + headers: { + 'content-type': 'application/json', + }, + }); + + const data = await response.json(); + return data?.[0].rewardRate as number | undefined; + }; + + const { data } = useQuery({ + queryKey: ['stakingAPR'], + queryFn, + enabled: true, + refetchOnWindowFocus: false, + refetchOnReconnect: false, + }); + + const formattedAPR = data ? (data * 100).toFixed(PERCENT_DECIMALS) : undefined; + + return formattedAPR; +}; diff --git a/src/hooks/useStakingAPY.ts b/src/hooks/useStakingAPY.ts deleted file mode 100644 index 89f41aa7a..000000000 --- a/src/hooks/useStakingAPY.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { useCallback } from 'react'; - -import { useQuery } from '@tanstack/react-query'; - -// TODO: This api doesn't work due to cors, need to contact protocolstaking.info -export const useStakingAPY = () => { - const queryFn = useCallback(async () => { - const response = await fetch('https://api.protocolstaking.info/v0/protocols/dydx', { - headers: { - accept: 'application/json', - 'x-access-key': import.meta.env.VITE_PROTOCOL_STAKING_API_KEY, - }, - }); - - const data = await response.json(); - return data; - }, []); - - const { data } = useQuery({ - queryKey: ['stakingAPY'], - queryFn, - enabled: true, - refetchOnWindowFocus: false, - refetchOnReconnect: false, - }); - - return data; -}; diff --git a/src/pages/token/rewards/StakingPanel.tsx b/src/pages/token/rewards/StakingPanel.tsx index a90b74a53..c092835da 100644 --- a/src/pages/token/rewards/StakingPanel.tsx +++ b/src/pages/token/rewards/StakingPanel.tsx @@ -8,6 +8,7 @@ import { STRING_KEYS } from '@/constants/localization'; import { useAccountBalance } from '@/hooks/useAccountBalance'; import { useComplianceState } from '@/hooks/useComplianceState'; +import { useStakingAPR } from '@/hooks/useStakingAPR'; import { useStringGetter } from '@/hooks/useStringGetter'; import { useTokenConfigs } from '@/hooks/useTokenConfigs'; @@ -35,9 +36,7 @@ export const StakingPanel = ({ className }: { className?: string }) => { const { complianceState } = useComplianceState(); const { nativeTokenBalance, nativeStakingBalance } = useAccountBalance(); const { chainTokenLabel } = useTokenConfigs(); - - const unstakedApr = 16.94; /* OTE-406: Hardcoded for now until I get the APY endpoint working */ - const stakedApr = 16.94; /* OTE-406: Hardcoded for now until I get the APY endpoint working */ + const stakingApr = useStakingAPR(); return ( { {stringGetter({ key: STRING_KEYS.UNSTAKED, })} - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: unstakedApr } })} - + {stakingApr && ( + + {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} + + )} <$BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} /> @@ -97,9 +98,11 @@ export const StakingPanel = ({ className }: { className?: string }) => { {stringGetter({ key: STRING_KEYS.STAKED, })} - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakedApr } })} - + {stakingApr && ( + + {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} + + )} <$BalanceOutput type={OutputType.Asset} value={nativeStakingBalance} /> diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx index 42b528622..09fd1f93b 100644 --- a/src/views/dialogs/StakeDialog.tsx +++ b/src/views/dialogs/StakeDialog.tsx @@ -2,6 +2,7 @@ import styled from 'styled-components'; import { STRING_KEYS } from '@/constants/localization'; +import { useStakingAPR } from '@/hooks/useStakingAPR'; import { useStringGetter } from '@/hooks/useStringGetter'; import { useTokenConfigs } from '@/hooks/useTokenConfigs'; @@ -20,7 +21,7 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => { const stringGetter = useStringGetter(); const { chainTokenLabel } = useTokenConfigs(); - const apr = 16.94; /* OTE-406: Hardcoded for now until I get the APY endpoint working */ + const stakingApr = useStakingAPR(); return ( <$Dialog @@ -30,9 +31,11 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => { title={ <$Title> {stringGetter({ key: STRING_KEYS.STAKE })} - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: apr } })} - + {stakingApr && ( + + {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} + + )} } >