feat: enable op rewards claim (#949)

src/hooks/useUnclaimedProofs.ts

@@ -0,0 +1,95 @@
+import { useQuery } from "react-query";
+import { BigNumber } from "ethers";
+import { utils } from "@across-protocol/sdk-v2";
+
+import { useConnection } from "hooks";
+import { fetchIsClaimed, fetchAirdropProofs } from "utils/merkle-distributor";
+import { getUnclaimedProofsQueryKey, rewardProgramTypes } from "utils";
+
+export function useUnclaimedProofs(rewardsType: rewardProgramTypes) {
+  const { isConnected, account } = useConnection();
+
+  return useQuery(
+    getUnclaimedProofsQueryKey(rewardsType, account),
+    () => fetchUnclaimedProofs(rewardsType, account),
+    {
+      enabled: isConnected && !!account,
+    }
+  );
+}
+
+export function useUnclaimedReferralProofs() {
+  const { isConnected, account } = useConnection();
+
+  return useQuery(
+    getUnclaimedProofsQueryKey("referrals", account),
+    () => fetchUnclaimedProofs("referrals", account),
+    {
+      enabled: isConnected && !!account,
+    }
+  );
+}
+
+export function useUnclaimedOpRewardsProofs() {
+  const { isConnected, account } = useConnection();
+
+  return useQuery(
+    getUnclaimedProofsQueryKey("op-rebates", account),
+    () => fetchUnclaimedProofs("op-rebates", account),
+    {
+      enabled: isConnected && !!account,
+    }
+  );
+}
+
+async function fetchUnclaimedProofs(
+  rewardsType: rewardProgramTypes,
+  account?: string
+) {
+  const allProofs = await fetchAirdropProofs(rewardsType, account);
+  const isClaimedResults = await fetchIsClaimedForIndices(
+    allProofs,
+    rewardsType
+  );
+
+  const unclaimed = allProofs.filter(
+    (proof) =>
+      isClaimedResults.findIndex(
+        (isClaimedResult) =>
+          !isClaimedResult.isClaimed &&
+          proof.accountIndex === isClaimedResult.accountIndex &&
+          proof.windowIndex === isClaimedResult.windowIndex
+      ) >= 0
+  );
+  const claimableAmount = unclaimed.reduce(
+    (sum, { amount }) => sum.add(amount),
+    BigNumber.from(0)
+  );
+  return {
+    claimableAmount,
+    unclaimed,
+  };
+}
+
+async function fetchIsClaimedForIndices(
+  indices: { accountIndex: number; windowIndex: number }[],
+  rewardsType: rewardProgramTypes
+) {
+  const isClaimedResults = await utils.mapAsync(
+    indices,
+    async ({ accountIndex, windowIndex }) => {
+      const isClaimed = await fetchIsClaimed(
+        windowIndex,
+        accountIndex,
+        rewardsType
+      );
+      return {
+        isClaimed,
+        windowIndex,
+        accountIndex,
+      };
+    }
+  );
+
+  return isClaimedResults;
+}

src/hooks/useWalletTokenImport.ts

@@ -4,17 +4,25 @@ import { useCallback } from "react";
 import { ERC20__factory } from "utils/typechain";
 
 import { useConnection } from "./useConnection";
+import { useIsWrongNetwork } from "./useIsWrongNetwork";
+import { ChainId } from "utils";
 
-export function useWalletTokenImport() {
+export function useWalletTokenImport(chainId?: ChainId) {
   const { signer } = useConnection();
+  const { isWrongNetwork, isWrongNetworkHandler } = useIsWrongNetwork(chainId);
   const importTokenIntoWallet = useCallback(
     (address: string, symbol: string, decimals: number) =>
       importTokenToWallet(signer)(address, symbol, decimals),
     [signer]
   );
   const importTokenIntoWalletFromLookup = useCallback(
-    (address: string) => importTokenToWalletFromLookup(signer)(address),
-    [signer]
+    async (address: string) => {
+      if (isWrongNetwork) {
+        await isWrongNetworkHandler();
+      }
+      await importTokenToWalletFromLookup(signer)(address);
+    },
+    [signer, isWrongNetwork, isWrongNetworkHandler]
   );
   return { importTokenIntoWallet, importTokenIntoWalletFromLookup };
 }

src/utils/config.ts

@@ -154,13 +154,27 @@ export class ConfigClient {
       "0xE50b2cEAC4f60E840Ae513924033E753e2366487"
     );
   }
+  getOpRewardsMerkleDistributorAddress(): string {
+    return (
+      process.env.REACT_APP_OP_REWARDS_MERKLE_DISTRIBUTOR_ADDRESS ||
+      "0xc8b31410340d57417bE62672f6B53dfB9de30aC2"
+    );
+  }
+  getOpRewardsMerkleDistributorChainId(): number {
+    return parseInt(
+      process.env.REACT_APP_OP_REWARDS_MERKLE_DISTRIBUTOR_CHAIN_ID || "10"
+    );
+  }
   getAcrossTokenAddress(): string {
     return (
       process.env.REACT_APP_ACROSS_TOKEN_ADDRESS ||
       this.config.acrossTokenAddress ||
       "0x44108f0223A3C3028F5Fe7AEC7f9bb2E66beF82F"
     );
   }
+  getOpTokenAddress(): string {
+    return "0x4200000000000000000000000000000000000042";
+  }
   getClaimAndStakeAddress(): string {
     return (
       process.env.REACT_APP_CLAIM_AND_STAKE_ADDRESS ||
@@ -186,10 +200,23 @@ export class ConfigClient {
       signer ?? providerUtils.getProvider(this.getHubPoolChainId());
     return AcceleratingDistributor__factory.connect(address, provider);
   }
-  getMerkleDistributor(signer?: Signer): AcrossMerkleDistributor {
-    const address = this.getMerkleDistributorAddress();
-    const provider =
-      signer ?? providerUtils.getProvider(this.getHubPoolChainId());
+  getMerkleDistributor(
+    rewardsType: constants.rewardProgramTypes,
+    signer?: Signer
+  ): AcrossMerkleDistributor {
+    let address =
+      rewardsType === "referrals"
+        ? this.getMerkleDistributorAddress()
+        : this.getOpRewardsMerkleDistributorAddress();
+
+    let provider =
+      signer?.provider ??
+      providerUtils.getProvider(
+        rewardsType === "referrals"
+          ? this.getHubPoolChainId()
+          : this.getOpRewardsMerkleDistributorChainId()
+      );
+
     return AcrossMerkleDistributor__factory.connect(address, provider);
   }
   getClaimAndStake(signer?: Signer): ClaimAndStake {

src/utils/merkle-distributor.ts

@@ -5,6 +5,7 @@ import {
   airdropWindowIndex,
   rewardsApiUrl,
   referralsStartWindowIndex,
+  rewardProgramTypes,
 } from "utils/constants";
 
 export type AmountBreakdown = {
@@ -36,9 +37,10 @@ const config = getConfig();
 
 export async function fetchIsClaimed(
   windowIndex: number,
-  accountIndex: number
+  accountIndex: number,
+  rewardsType: rewardProgramTypes
 ) {
-  const merkleDistributor = config.getMerkleDistributor();
+  const merkleDistributor = config.getMerkleDistributor(rewardsType);
   return merkleDistributor.isClaimed(windowIndex, accountIndex);
 }
 
@@ -60,17 +62,30 @@ export async function fetchAirdropProof(account?: string) {
   return Object.keys(data).length ? (data as AirdropRecipient) : undefined;
 }
 
-export async function fetchReferralProofs(account?: string) {
+export async function fetchAirdropProofs(
+  rewardsType: rewardProgramTypes,
+  account?: string
+) {
   if (!account) {
     return [];
   }
 
+  const startWindowIndex =
+    rewardsType === "referrals" ? referralsStartWindowIndex : 0;
+  let rewardsTypeQuery = "";
+
+  if (rewardsType === "referrals") {
+    rewardsTypeQuery = "referral-rewards";
+  } else if (rewardsType === "op-rebates") {
+    rewardsTypeQuery = "op-rewards";
+  }
   const { data } = await axios.get<AirdropRecipient[]>(
     `${rewardsApiUrl}/airdrop/merkle-distributor-proofs`,
     {
       params: {
         address: account,
-        startWindowIndex: referralsStartWindowIndex,
+        startWindowIndex,
+        rewardsType: rewardsTypeQuery,
       },
     }
   );

src/utils/query-keys.ts

@@ -154,3 +154,10 @@ export function isAirdropClaimedQueryKey(
 ) {
   return ["is-airdrop-claimed", account, airdropWindowIndex];
 }
+
+export function getUnclaimedProofsQueryKey(
+  rewardsType: rewardProgramTypes,
+  account?: string
+) {
+  return [rewardsType, "unclaimed", account];
+}

src/views/Airdrop/hooks/useIsAirdropClaimed.tsx

@@ -19,7 +19,8 @@ export function useIsAirdropClaimed() {
       if (airdropRecipientQuery.data) {
         return fetchIsClaimed(
           airdropWindowIndex,
-          airdropRecipientQuery.data.accountIndex
+          airdropRecipientQuery.data.accountIndex,
+          "referrals"
         );
       }
     },

src/views/RewardsProgram/GenericRewardsProgram/ClaimRewardsModal.tsx

@@ -15,18 +15,12 @@ type Props = {
 };
 
 export function ClaimRewardsModal({ isOpen, onExit, program }: Props) {
-  const {
-    importTokenHandler,
-    unclaimedReferralProofsQuery,
-    claimMutation,
-    token,
-  } = useClaimModal(program);
+  const { importTokenHandler, unclaimedProofsQuery, claimMutation, token } =
+    useClaimModal(program);
 
   const disableButton =
-    unclaimedReferralProofsQuery.isLoading ||
-    BigNumber.from(
-      unclaimedReferralProofsQuery.data?.claimableAmount ?? 0
-    ).isZero() ||
+    unclaimedProofsQuery.isLoading ||
+    BigNumber.from(unclaimedProofsQuery.data?.claimableAmount ?? 0).isZero() ||
     claimMutation.isLoading;
 
   return (
@@ -43,23 +37,25 @@ export function ClaimRewardsModal({ isOpen, onExit, program }: Props) {
         mobile: "bottom",
       }}
     >
-      <Alert status="warn">
-        Claiming your ACX will reset your tier to Copper and referral rate to{" "}
-        {rewardTiers[0].referralRate * 100}%.
-      </Alert>
+      {program === "referrals" && (
+        <Alert status="warn">
+          Claiming your ACX will reset your tier to Copper and referral rate to{" "}
+          {rewardTiers[0].referralRate * 100}%.
+        </Alert>
+      )}
       <ClaimableBoxInnerWrapper>
         <ClaimableBox>
           <Text size="lg" color="white-70">
             Claimable rewards
           </Text>
           <Text color="white-100">
-            {unclaimedReferralProofsQuery.isLoading ? (
+            {unclaimedProofsQuery.isLoading ? (
               "Loading..."
             ) : (
               <IconText>
                 {formatEther(
-                  unclaimedReferralProofsQuery.data?.claimableAmount || "0"
-                ) + " ACX"}
+                  unclaimedProofsQuery.data?.claimableAmount || "0"
+                ) + ` ${token.symbol}`}
                 <Icon src={token.logoURI} />
               </IconText>
             )}
@@ -78,7 +74,7 @@ export function ClaimRewardsModal({ isOpen, onExit, program }: Props) {
       </ClaimableBoxInnerWrapper>
       <AddToWalletWrapper>
         <Text size="md" color="white-70">
-          Can't find the ACX token in your wallet? &nbsp;
+          Can't find the {token.symbol} token in your wallet? &nbsp;
         </Text>
         <AddToWalletLink onClick={importTokenHandler}>
           Click here to add it.

src/views/RewardsProgram/hooks/useACXReferralsProgram.ts

@@ -9,7 +9,7 @@ import {
   rewardTiers,
 } from "utils";
 import { useMemo } from "react";
-import { useUnclaimedReferralProofs } from "hooks/useUnclaimedReferralProofs";
+import { useUnclaimedReferralProofs } from "hooks/useUnclaimedProofs";
 import { BigNumber } from "ethers";
 
 export function useACXReferralsProgram() {