feat: update to use proxy for staking apr (#702)

dydxprotocol · Jun 20, 2024 · 12c0970 · 12c0970
1 parent a43f2a3
commit 12c0970
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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 (
     <Panel
@@ -74,9 +73,11 @@ export const StakingPanel = ({ className }: { className?: string }) => {
               {stringGetter({
                 key: STRING_KEYS.UNSTAKED,
               })}
-              <Tag sign={TagSign.Positive}>
-                {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: unstakedApr } })}
-              </Tag>
+              {stakingApr && (
+                <Tag sign={TagSign.Positive}>
+                  {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
+                </Tag>
+              )}
             </$label>
             <$BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} />
           </div>
@@ -97,9 +98,11 @@ export const StakingPanel = ({ className }: { className?: string }) => {
               {stringGetter({
                 key: STRING_KEYS.STAKED,
               })}
-              <Tag>
-                {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakedApr } })}
-              </Tag>
+              {stakingApr && (
+                <Tag>
+                  {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
+                </Tag>
+              )}
             </$label>
             <$BalanceOutput type={OutputType.Asset} value={nativeStakingBalance} />
           </div>

diff --git 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 })}
-          <Tag sign={TagSign.Positive}>
-            {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: apr } })}
-          </Tag>
+          {stakingApr && (
+            <Tag sign={TagSign.Positive}>
+              {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
+            </Tag>
+          )}
         </$Title>
       }
     >