diff --git a/src/assets/icons/lp-lg.svg b/src/assets/icons/lp-lg.svg
new file mode 100644
index 000000000..ce831b3c6
--- /dev/null
+++ b/src/assets/icons/lp-lg.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/assets/icons/reward-lg.svg b/src/assets/icons/reward-lg.svg
new file mode 100644
index 000000000..e4f37749b
--- /dev/null
+++ b/src/assets/icons/reward-lg.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/views/Rewards/Rewards.tsx b/src/views/Rewards/Rewards.tsx
index 428ad0645..361382f6b 100644
--- a/src/views/Rewards/Rewards.tsx
+++ b/src/views/Rewards/Rewards.tsx
@@ -1,7 +1,4 @@
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";
@@ -10,28 +7,11 @@ 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();
@@ -41,23 +21,6 @@ const Rewards = () => {
-
- {isConnected && address ? (
-
- ) : (
-
- )}
-
{isConnected && (areStakingPoolsLoading || myPoolData.length > 0) && (
{
/>
)}
-
{(areStakingPoolsLoading || allPoolData.length > 0) && (
{
/>
)}
-
+
diff --git a/src/views/Rewards/components/ConnectedReferralBox.tsx b/src/views/Rewards/components/ConnectedReferralBox.tsx
deleted file mode 100644
index 34f31f72b..000000000
--- a/src/views/Rewards/components/ConnectedReferralBox.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import styled from "@emotion/styled";
-import CopyReferralLink from "components/CopyReferralLink";
-import { ReactComponent as WalletIcon } from "assets/icons/wallet-24.svg";
-import { ReactComponent as TransferIcon } from "assets/icons/transfer-24.svg";
-import { ReactComponent as GraphIcon } from "assets/icons/graph-24.svg";
-import { ReactComponent as IncreaseIcon } from "assets/icons/increase-24.svg";
-import { ReactComponent as TrophyIcon } from "assets/icons/trophy-24.svg";
-import React from "react";
-import { formatNumberMaxFracDigits, QUERIESV2 } from "utils";
-import { BigNumberish } from "ethers";
-
-type ConnectedReferralBoxType = {
- walletCount?: number;
- transferCount?: number;
- volume?: number;
- referralRate?: number;
- rewards?: string;
- formatter: (wei: BigNumberish) => string;
-};
-
-const ConnectedReferralBox = ({
- walletCount,
- transferCount,
- volume,
- referralRate,
- rewards,
- formatter,
-}: ConnectedReferralBoxType) => {
- const referralElements = [
- {
- Icon: WalletIcon,
- title: "Wallets",
- value: walletCount,
- },
- {
- Icon: TransferIcon,
- title: "Transfers",
- value: transferCount,
- },
- {
- Icon: GraphIcon,
- title: "Volume",
- value: volume ? `$${formatNumberMaxFracDigits(volume)}` : undefined,
- },
- {
- Icon: IncreaseIcon,
- title: "Rate",
- value: referralRate ? (
- <>
- {referralRate * 100 * 0.75}%{" "}
- {referralRate * 100 * 0.25}% for referee
-
- ) : undefined,
- },
- {
- Icon: TrophyIcon,
- title: "Rewards",
- value: rewards ? `${formatter(rewards)} ACX` : undefined,
- },
- ];
-
- return (
-
-
- {referralElements.map((val, ind, arr) => (
-
-
-
-
-
- {val.title}
-
-
- {val.value ?? "-"}
-
-
-
- {ind !== arr.length - 1 && (
-
-
-
- )}
-
- ))}
-
-
-
- );
-};
-
-export default ConnectedReferralBox;
-
-const Wrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 0px;
-
- width: 100%;
-
- border: 1px solid #3e4047;
- border-radius: 10px;
-
- overflow: clip;
-`;
-
-const CardWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding: 0px;
- width: 100%;
- gap: 0;
-
- background: #34353b;
-
- @media ${QUERIESV2.tb.andDown} {
- flex-direction: column;
- }
-`;
-
-const ReferralInfoCard = styled.div`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding: 24px;
- gap: 12px;
- width: 100%;
-
- @media ${QUERIESV2.sm.andDown} {
- padding: 16px;
- }
-`;
-
-const ReferralInfoCardInnerWrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 0px;
- gap: 8px;
-
- @media ${QUERIESV2.tb.andDown} {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- }
-`;
-
-const ReferralInfoCardTitleWrapper = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 0px;
- gap: 12px;
-
- font-size: 16px;
- line-height: 20px;
- color: #9daab2;
-
- @media ${QUERIESV2.sm.andDown} {
- font-size: 14px;
- & svg {
- height: 16px;
- width: 16px;
- }
- }
-`;
-
-const ReferralInfoCardDataWrapper = styled.div`
- font-size: 18px;
- line-height: 26px;
- color: #e0f3ff;
-
- @media ${QUERIESV2.tb.andDown} {
- font-size: 16px;
- }
-
- @media ${QUERIESV2.sm.andDown} {
- font-size: 14px;
- }
-`;
-
-const Divider = styled.div`
- width: 1px;
- height: 56px;
- background: #3e4047;
-
- @media ${QUERIESV2.tb.andDown} {
- width: 100%;
- height: 1px;
- }
-`;
-
-const DividerWrapper = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- background: #34353b;
-
- padding: 24px 0;
-
- @media ${QUERIESV2.tb.andDown} {
- padding: 0 24px;
- width: 100%;
- }
-
- @media ${QUERIESV2.sm.andDown} {
- padding: 0 16px;
- }
-`;
-
-const ReferreeText = styled.span`
- color: #9daab2;
-`;
diff --git a/src/views/Rewards/components/DisconnectedReferralBox.tsx b/src/views/Rewards/components/DisconnectedReferralBox.tsx
deleted file mode 100644
index cbeb1d1e2..000000000
--- a/src/views/Rewards/components/DisconnectedReferralBox.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as ReferralIcon } from "assets/icons/rewards/referral-within-star.svg";
-import { ReactComponent as ExternalLinkIcon } from "assets/icons/external-link-12.svg";
-import { SecondaryButton } from "components/Button";
-import { QUERIESV2 } from "utils";
-
-type DisconnectedReferralBoxType = {
- connectHandler: () => void;
-};
-
-const DisconnectedReferralBox = ({
- connectHandler,
-}: DisconnectedReferralBoxType) => (
-
-
-
-
-
- Join the referral program and earn a portion of fees in ACX for
- transfers made from your unique referral link.
-
-
-
-
- Learn more
-
-
- Connect to get started
-
-
-
-
-);
-
-export default DisconnectedReferralBox;
-
-const Wrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 24px;
- gap: 24px;
-
- background: #34353b;
- border: 1px solid #3e4047;
- border-radius: 12px;
-
- width: 100%;
-`;
-
-const InnerWrapper = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- padding: 0px;
- gap: 48px;
-
- width: 100%;
-
- @media ${QUERIESV2.tb.andDown} {
- flex-direction: column;
- gap: 24px;
- }
-`;
-
-const IconTextWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 0px;
- gap: 24px;
-
- @media ${QUERIESV2.tb.andDown} {
- flex-direction: column;
- gap: 20px;
- text-align: center;
- }
-`;
-
-const CTAText = styled.p`
- max-width: 414px;
- width: 100%;
-
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 20px;
-
- color: #c5d5e0;
-`;
-
-const ButtonWrapper = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 0px;
- gap: 24px;
-
- @media ${QUERIESV2.sm.andDown} {
- flex-direction: column-reverse;
- }
-`;
-
-const ConnectButton = styled(SecondaryButton)``;
-
-const MoreInfoLink = styled.a`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding: 0px;
- gap: 6px;
-
- font-weight: 500;
- font-size: 16px;
- line-height: 20px;
- color: #e0f3ff;
-
- text-decoration: none;
-
- & svg path {
- fill: #e0f3ff;
- }
-`;
diff --git a/src/views/Rewards/components/OverviewRewardSection.tsx b/src/views/Rewards/components/OverviewRewardSection.tsx
deleted file mode 100644
index 2bbed507c..000000000
--- a/src/views/Rewards/components/OverviewRewardSection.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { ReactComponent as AcrossWithStar } from "assets/icons/rewards/logo-within-star.svg";
-import { ReactComponent as ReferralWithStar } from "assets/icons/rewards/referral-within-star.svg";
-import { ReactComponent as GraphWithStar } from "assets/icons/rewards/graph-within-star.svg";
-import { ReactComponent as BlueBanner } from "assets/bg-banners/blue-card-banner.svg";
-import { ReactComponent as GreenBanner } from "assets/bg-banners/green-card-banner.svg";
-import { ReactComponent as PurpleBanner } from "assets/bg-banners/purple-card-banner.svg";
-import styled from "@emotion/styled";
-import { formatEther, QUERIESV2 } from "utils";
-import { BigNumber } from "ethers";
-
-type OverviewRewardSectionType = {
- totalRewards?: BigNumber;
- stakedTokens?: BigNumber;
- referralTier?: number;
-};
-
-const referralValue = ["Copper", "Bronze", "Silver", "Gold", "Platinum"];
-
-const OverviewRewardSection = ({
- totalRewards,
- stakedTokens,
- referralTier,
-}: OverviewRewardSectionType) => {
- const referralStage = referralValue[(referralTier ?? 0) - 1];
- const cardInformation = [
- {
- title: "Total Rewards",
- value:
- totalRewards && totalRewards.gt(0)
- ? `${formatEther(totalRewards)} ACX`
- : undefined,
- Icon: AcrossWithStar,
- Banner: GreenBanner,
- },
- {
- title: "In Staked LP Tokens",
- value:
- stakedTokens && stakedTokens.gt(0)
- ? `$${formatEther(stakedTokens)}`
- : undefined,
- Icon: GraphWithStar,
- Banner: BlueBanner,
- },
- {
- title: "Referral Tier",
- value:
- referralTier && referralStage ? (
- <>
- {referralStage} {referralTier}{" "}
-
- ) : undefined,
- Icon: ReferralWithStar,
- Banner: PurpleBanner,
- },
- ];
- return (
-
- {cardInformation.map((card) => (
-
-
-
-
-
-
-
-
- {card.value ? (
- {card.value}
- ) : (
- -
- )}
- {card.title}
-
-
- ))}
-
- );
-};
-
-export default OverviewRewardSection;
-
-const Wrapper = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 0px;
- gap: 24px;
-
- width: 100%;
-
- @media ${QUERIESV2.tb.andDown} {
- flex-direction: column;
- gap: 16px;
- }
-`;
-
-const CardWrapper = styled.div`
- box-sizing: border-box;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 24px 0px;
- gap: 8px;
- isolation: isolate;
- background: #34353b;
- border: 1px solid #3e4047;
- border-radius: 12px;
-
- width: 100%;
-
- position: relative;
-
- overflow: clip;
-
- @media ${QUERIESV2.sm.andDown} {
- flex-direction: row;
- align-items: flex-start;
- padding: 24px 16px;
- gap: 16px;
- }
-`;
-
-const CardTextWrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
-
- width: 100%;
-
- @media ${QUERIESV2.sm.andDown} {
- align-items: flex-start;
- }
-`;
-
-const CardText = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 0px;
- gap: 8px;
-
- font-weight: 400;
- font-size: 26px;
- line-height: 31px;
- color: #e0f3ff;
-`;
-
-const CardTextGray = styled(CardText)`
- color: #9daab2;
-`;
-
-const CardTitle = styled.h3`
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 20px;
- color: #9daab2;
-
- @media ${QUERIESV2.sm.andDown} {
- font-size: 14px;
- }
-`;
-
-const BannerWrapper = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
-`;
-
-const StepIcon = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding: 8px 10px 10px;
- gap: 6px;
-
- width: 24px;
- height: 24px;
-
- background: #e0f3ff;
- border: 1px solid #e0f3ff;
- border-radius: 6px;
- font-style: normal;
- font-weight: 600;
- font-size: 12px;
- line-height: 14px;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- color: #2d2e33;
-`;
-
-const IconWrapper = styled.div`
- width: 64px;
- height: 64px;
- padding: 0;
- flex-shrink: 0;
-`;
diff --git a/src/views/Rewards/components/RewardProgramCard.tsx b/src/views/Rewards/components/RewardProgramCard.tsx
new file mode 100644
index 000000000..12ee13b1b
--- /dev/null
+++ b/src/views/Rewards/components/RewardProgramCard.tsx
@@ -0,0 +1,96 @@
+import styled from "@emotion/styled";
+import { COLORS, QUERIESV2, TokenInfo, formatUnits } from "utils";
+import CloudBackground from "assets/bg-banners/cloud-staking.svg";
+import { PrimaryButton, Text } from "components";
+import { useReferralSummary } from "hooks/useReferralSummary";
+import { useConnection } from "hooks";
+
+type RewardProgramCardProps = {
+ token: TokenInfo;
+};
+
+const RewardProgramCard = ({ token }: RewardProgramCardProps) => {
+ const { account } = useConnection();
+ // For now, we can only assume that the token is ACX
+ const {
+ summary: { rewardsAmount },
+ } = useReferralSummary(account);
+ const programName =
+ token.symbol === "ACX" ? "Across Referral Program" : "OP Rewards Program";
+
+ return (
+
+
+ 
+
+
+
+ {programName}
+
+
+ {formatUnits(rewardsAmount, token.decimals)} {token.symbol} earned
+
+
+ {}}
+ size="md"
+ backgroundColor="black-700"
+ textColor="aqua"
+ >
+ >
+
+
+ );
+};
+
+export default RewardProgramCard;
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1 0 0;
+ align-self: stretch;
+ padding: 24px 16px;
+ border-radius: 8px;
+ border: 1px solid ${COLORS["aqua-15"]};
+ background: url(${CloudBackground}) no-repeat;
+ @media ${QUERIESV2.sm.andDown} {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ align-self: stretch;
+ padding: 16px;
+ }
+`;
+
+const LogoContainer = styled.div`
+ // Layout
+ display: flex;
+ padding: 8px;
+ align-items: flex-start;
+ // Colors
+ border-radius: 32px;
+ border: 1px solid ${COLORS["grey-400"]};
+ background: ${COLORS["grey-400"]};
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08),
+ 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
+ @media ${QUERIESV2.sm.andDown} {
+ display: none;
+ }
+`;
+
+const TextStack = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ flex: 1 0 0;
+`;
+
+const StyledCopyButton = styled(PrimaryButton)`
+ border: 1px solid ${COLORS["aqua-15"]};
+ @media ${QUERIESV2.sm.andDown} {
+ display: none;
+ }
+`;
diff --git a/src/views/Rewards/components/RewardProgramSection.tsx b/src/views/Rewards/components/RewardProgramSection.tsx
new file mode 100644
index 000000000..ee1f1b7a4
--- /dev/null
+++ b/src/views/Rewards/components/RewardProgramSection.tsx
@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+import SectionWrapper from "components/SectionTitleWrapperV2/SectionWrapperV2";
+
+import RewardProgramCard from "./RewardProgramCard";
+import { getToken } from "utils";
+
+const RewardProgramSection = () => {
+ const tokens = ["ACX", "OP"];
+ return (
+
+
+ {tokens.map((token) => (
+
+ ))}
+
+
+ );
+};
+
+export default RewardProgramSection;
+
+const InnerWrapper = styled.div`
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
+ width: 100%;
+`;