Merge branch 'james/acx-1624-update-rewards-page' into james/acx-1627…

…-add-acx-rebate-fee-preview-to-bridge-page

.github/workflows/lint-test.yaml

@@ -54,6 +54,7 @@ jobs:
           REACT_APP_CHAIN_42161_PROVIDER_URL: ${{ secrets.CYPRESS_CHAIN_42161_PROVIDER_URL }}
           REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.CYPRESS_WALLET_CONNECT_PROJECT_ID }}
           REACT_APP_MOCK_SERVERLESS: true
+          REACT_APP_REBATE_PROGRAMS_AVAILABLE: "op-rebate"
         run: yarn build
       - name: Run hardhat mainnet fork
         env:

src/components/RewardTable/RewardTables.styles.tsx

@@ -112,6 +112,17 @@ export const RewardsCell = styled(TableCell)`
   min-width: 120px;
 `;
 
+export const RewardCellLogoTextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const RewardCellLogo = styled.img`
+  height: 16px;
+  width: 16px;
+`;
+
 export const RewardsHeadCell = styled(HeadCell)`
   min-width: 202px;
 `;
@@ -265,9 +276,11 @@ export const ReferralIconContainer = styled.div`
 `;
 
 export const StyledETHIcon = styled(ETHLogo)``;
-export const StyledPoolIcon = styled.img`
+export const StyledPoolIcon = styled.img<{ greyscale?: boolean }>`
   width: 32px;
   height: 32px;
+
+  filter: ${({ greyscale }) => (greyscale ? "grayscale(100%)" : "none")};
 `;
 
 export const StyledUNILogo = styled(UNILogo)``;

src/hooks/index.ts

@@ -18,3 +18,5 @@ export * from "./useRouteTrace";
 export * from "./useWalletTrace";
 export * from "./useQueue";
 export * from "./useAmplitude";
+export * from "./useReferralSummary";
+export * from "./useSimplifiedReferralSummary";

src/hooks/useRewardToken.ts

@@ -1,13 +1,13 @@
 import { useConnection } from "hooks";
 import { useMemo } from "react";
 import { useQuery } from "react-query";
-import { getToken, rebateTokensAvailable } from "utils";
+import { getToken, rewardProgramsAvailable } from "utils";
 import useReferrer from "./useReferrer";
 import { useSimplifiedReferralSummary } from "./useSimplifiedReferralSummary";
 
 export function useRewardToken(destinationChainId: number) {
   const rewardToken = useMemo(() => {
-    if (rebateTokensAvailable.includes("OP")) {
+    if (rewardProgramsAvailable.includes("op-rebate")) {
       return getToken(destinationChainId === 10 ? "OP" : "ACX");
     }
     return getToken("ACX");

src/utils/constants.ts

@@ -333,6 +333,31 @@ export const tokenList = [
   ...externalLPsForStaking[hubPoolChainId],
 ];
 
+export type rewardProgramTypes = "referrals" | "op-rebate";
+
+export const rewardPrograms: Record<
+  rewardProgramTypes,
+  {
+    programName: string;
+    primaryColor: keyof typeof COLORS;
+    url: string;
+    rewardTokenSymbol: string;
+  }
+> = {
+  referrals: {
+    programName: "Across Referral Program",
+    primaryColor: "aqua",
+    url: "/rewards/referrals",
+    rewardTokenSymbol: "ACX",
+  },
+  "op-rebate": {
+    programName: "OP Rewards Program",
+    primaryColor: "op-red",
+    url: "/rewards/op-rewards",
+    rewardTokenSymbol: "OP",
+  },
+};
+
 // process.env variables
 export const rewardsApiUrl =
   process.env.REACT_APP_REWARDS_API_URL || "https://api.across.to";
@@ -357,12 +382,15 @@ export const debug = Boolean(process.env.REACT_APP_DEBUG);
 export const isProductionBuild = process.env.NODE_ENV === "production";
 export const isAmplitudeLoggingEnabled =
   process.env.REACT_APP_AMPLITUDE_DEBUG_LOGGING === "true";
-export const rebateTokensAvailable = String(
-  process.env.REACT_APP_EXTERNAL_REBATE_TOKENS_AVAILABLE || ""
-)
-  .toUpperCase()
-  .split(",");
-
+export const rewardProgramsAvailable: (keyof typeof rewardPrograms)[] = [
+  // Our referrals program is always available
+  "referrals",
+  ...(
+    String(process.env.REACT_APP_REBATE_PROGRAMS_AVAILABLE || "")
+      .toLowerCase()
+      .split(",") as (keyof typeof rewardPrograms)[]
+  ).filter((v) => v),
+];
 export const rewardsBannerWarning =
   process.env.REACT_APP_REWARDS_BANNER_WARNING;
 

src/views/Referrals/comp/RewardTable/createMyReferralsTableJSX.tsx

@@ -1,5 +1,5 @@
 import { DateTime } from "luxon";
-import { getChainInfo, shortenAddress } from "utils";
+import { getChainInfo, getToken, shortenAddress } from "utils";
 import { ethers } from "ethers";
 import { ICell, IRow } from "components/Table/Table.d";
 import { Referral } from "hooks/useReferrals";
@@ -32,6 +32,8 @@ import {
   RewardsCell,
   RewardsHeadCell,
   ExplorerLinkContainer,
+  RewardCellLogoTextWrapper,
+  RewardCellLogo,
 } from "components/RewardTable/RewardTables.styles";
 import { ReactComponent as ExternalLink16 } from "assets/icons/external-link-16.svg";
 import { ReactComponent as RefereeIcon } from "assets/icons/referree.svg";
@@ -201,9 +203,12 @@ function formatMyReferralsRows(referrals: Referral[], account: string): IRow[] {
         {
           value: (
             <RewardsCell>
-              {`${Number(ethers.utils.formatUnits(r.acxRewards, 18)).toFixed(
-                4
-              )} ACX`}
+              <RewardCellLogoTextWrapper>
+                <RewardCellLogo src={getToken("ACX").logoURI} />
+                {`${Number(ethers.utils.formatUnits(r.acxRewards, 18)).toFixed(
+                  4
+                )} ACX`}
+              </RewardCellLogoTextWrapper>
             </RewardsCell>
           ),
         },

src/views/Rewards/Rewards.tsx

@@ -1,36 +1,17 @@
 import BreadcrumbV2 from "components/BreadcrumbV2";
-import ConnectedReferralBox from "./components/ConnectedReferralBox";
-import DisconnectedReferralBox from "./components/DisconnectedReferralBox";
-import OverviewRewardSection from "./components/OverviewRewardSection";
 import SectionWrapper from "../../components/SectionTitleWrapperV2/SectionWrapperV2";
 import { useRewards } from "./hooks/useRewards";
 import { InnerSectionWrapper, Wrapper } from "./Rewards.style";
 import GenericStakingPoolTable from "./components/GenericStakingPoolTable/GenericStakingPoolTable";
 import { LayoutV2 } from "components";
 import useScrollElementByHashIntoView from "hooks/useScrollElementByHashIntoView";
 import AdditionalQuestionCTA from "./components/AdditionalQuestionCTA";
+import OverviewSection from "./components/OverviewSection";
+import RewardProgramSection from "./components/RewardProgramSection";
 
 const Rewards = () => {
-  const {
-    isConnected,
-    connectHandler,
-    address,
-    totalRewards,
-    stakedTokens,
-
-    referralTier,
-    referralRate,
-    referralRewards,
-    referralTransfers,
-    referralVolume,
-    referralWallets,
-
-    areStakingPoolsLoading,
-    myPoolData,
-    allPoolData,
-
-    formatterFn,
-  } = useRewards();
+  const { isConnected, areStakingPoolsLoading, myPoolData, allPoolData } =
+    useRewards();
 
   useScrollElementByHashIntoView();
 
@@ -39,30 +20,7 @@ const Rewards = () => {
       <Wrapper>
         <BreadcrumbV2 />
         <InnerSectionWrapper>
-          <SectionWrapper title="Overview">
-            <OverviewRewardSection
-              totalRewards={totalRewards}
-              stakedTokens={stakedTokens}
-              referralTier={referralTier}
-            />
-          </SectionWrapper>
-          <SectionWrapper
-            title="Referrals"
-            link={{ name: "View all data", href: "/rewards/referrals" }}
-          >
-            {isConnected && address ? (
-              <ConnectedReferralBox
-                walletCount={referralWallets}
-                transferCount={referralTransfers}
-                volume={referralVolume}
-                formatter={formatterFn}
-                referralRate={referralRate}
-                rewards={referralRewards}
-              />
-            ) : (
-              <DisconnectedReferralBox connectHandler={connectHandler} />
-            )}
-          </SectionWrapper>
+          <OverviewSection />
           {isConnected && (areStakingPoolsLoading || myPoolData.length > 0) && (
             <SectionWrapper title="My pools" id="my-pools">
               <GenericStakingPoolTable
@@ -71,16 +29,16 @@ const Rewards = () => {
               />
             </SectionWrapper>
           )}
-
           {(areStakingPoolsLoading || allPoolData.length > 0) && (
             <SectionWrapper title="All pools">
               <GenericStakingPoolTable
+                greyscaleTokenLogo={isConnected}
                 poolData={allPoolData}
                 isLoading={areStakingPoolsLoading}
               />
             </SectionWrapper>
           )}
-
+          <RewardProgramSection />
           <AdditionalQuestionCTA />
         </InnerSectionWrapper>
       </Wrapper>