Feat/umbrella

package.json

@@ -31,8 +31,8 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.33.1",
-    "@aave/math-utils": "1.33.1",
+    "@aave/contract-helpers": "1.33.2-5d41c2b71aef3dc0142968e2c61bb997a1daef78.0+bbfe1c8",
+    "@aave/math-utils": "1.33.2-5d41c2b71aef3dc0142968e2c61bb997a1daef78.0+bbfe1c8",
     "@bgd-labs/aave-address-book": "^4.17.1",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",

pages/umbrella.page.tsx

@@ -0,0 +1,60 @@
+import dynamic from 'next/dynamic';
+import { ContentContainer } from 'src/components/ContentContainer';
+import { MainLayout } from 'src/layouts/MainLayout';
+import { UmbrellaAssetsListContainer } from 'src/modules/umbrella/StakeAssets/UmbrellaAssetsListContainer';
+import { UmrellaAssetsDefaultListContainer } from 'src/modules/umbrella/UmbrellaAssetsDefault';
+import { UmbrellaHeader } from 'src/modules/umbrella/UmbrellaHeader';
+
+import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
+
+const UmbrellaStakeModal = dynamic(() =>
+  import('../src/modules/umbrella/UmbrellaModal').then((module) => module.UmbrellaModal)
+);
+const StakeCooldownModal = dynamic(() =>
+  import('../src/modules/umbrella/StakeCooldownModal').then((module) => module.StakeCooldownModal)
+);
+const StakeRewardClaimModal = dynamic(() =>
+  import('../src/components/transactions/StakeRewardClaim/StakeRewardClaimModal').then(
+    (module) => module.StakeRewardClaimModal
+  )
+);
+const StakeRewardClaimRestakeModal = dynamic(() =>
+  import(
+    '../src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeModal'
+  ).then((module) => module.StakeRewardClaimRestakeModal)
+);
+const UnStakeModal = dynamic(() =>
+  import('../src/modules/umbrella/UnstakeModal').then((module) => module.UnStakeModal)
+);
+const UmbrellaClaimModal = dynamic(() =>
+  import('../src/modules/umbrella/UmbrellaClaimModal').then((module) => module.UmbrellaClaimModal)
+);
+
+export default function UmbrellaStaking() {
+  const { currentAccount } = useWeb3Context();
+
+  return (
+    <>
+      <UmbrellaHeader />
+      <ContentContainer>
+        {currentAccount ? <UmbrellaAssetsListContainer /> : <UmrellaAssetsDefaultListContainer />}
+      </ContentContainer>
+    </>
+  );
+}
+
+UmbrellaStaking.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <MainLayout>
+      {page}
+      {/** Modals */}
+      <UmbrellaStakeModal />
+      <StakeCooldownModal />
+      <UnStakeModal />
+      <StakeRewardClaimModal />
+      <StakeRewardClaimRestakeModal />
+      <UmbrellaClaimModal />
+      {/** End of modals */}
+    </MainLayout>
+  );
+};

src/components/Warnings/CooldownWarning.tsx

@@ -1,12 +1,17 @@
 import { Trans } from '@lingui/macro';
 import { Typography } from '@mui/material';
+import { SecondsToString } from 'src/modules/staking/StakingPanel';
 import { useRootStore } from 'src/store/root';
 import { GENERAL } from 'src/utils/mixPanelEvents';
 
 import { Link } from '../primitives/Link';
 import { Warning } from '../primitives/Warning';
 
-export const CooldownWarning = () => {
+const TWENTY_DAYS = 20 * 24 * 60 * 60;
+
+export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds?: number }) => {
+  const cooldownTime = cooldownSeconds || TWENTY_DAYS;
+
   const trackEvent = useRootStore((store) => store.trackEvent);
   return (
     <Warning severity="warning" sx={{ '.MuiAlert-message': { p: 0 }, mb: 6 }}>
@@ -15,9 +20,10 @@ export const CooldownWarning = () => {
       </Typography>
       <Typography variant="caption">
         <Trans>
-          The cooldown period is the time required prior to unstaking your tokens (20 days). You can
-          only withdraw your assets from the Security Module after the cooldown period and within
-          the unstake window.
+          The cooldown period is the time required prior to unstaking your tokens (
+          <SecondsToString seconds={cooldownTime} />
+          ). You can only withdraw your assets from the Security Module after the cooldown period
+          and within the unstake window.{' '}
           <Link
             href="https://docs.aave.com/faq/migration-and-staking"
             fontWeight={500}

src/components/infoTooltips/TokenContractTooltip.tsx

@@ -0,0 +1,15 @@
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import { IconButton, SvgIcon } from '@mui/material';
+
+import { Link } from '../primitives/Link';
+import { DarkTooltip } from './DarkTooltip';
+
+export const TokenContractTooltip = ({ explorerUrl }: { explorerUrl: string }) => (
+  <DarkTooltip title="View token contract" sx={{ display: { xsm: 'none' } }}>
+    <IconButton LinkComponent={Link} href={explorerUrl} sx={{ height: '24px', width: '24px' }}>
+      <SvgIcon sx={{ fontSize: '14px' }}>
+        <ExternalLinkIcon />
+      </SvgIcon>
+    </IconButton>
+  </DarkTooltip>
+);

src/components/primitives/Link.tsx

@@ -134,4 +134,5 @@ export const ROUTES = {
     `/reserve-overview/?underlyingAsset=${underlyingAsset}&marketName=${marketName}`,
   history: '/history',
   bridge: '/bridge',
+  umbrella: '/umbrella',
 };

src/components/primitives/TokenIcon.tsx

@@ -2,10 +2,6 @@ import { Badge, Box, Icon, IconProps } from '@mui/material';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import LazyLoad from 'react-lazy-load';
 
-interface ATokenIconProps {
-  symbol?: string;
-}
-
 /**
  * To save some bundle size we stopped base64 encoding & inlining svgs as base encoding increases size by up to 30%
  * and most users will never need all token icons.
@@ -21,22 +17,30 @@ interface ATokenIconProps {
  * This component is probably hugely over engineered & unnecessary.
  * I'm looking forward for the pr which evicts it.
  */
+interface ATokenIconProps {
+  symbol?: string;
+  waToken?: boolean; // Add waToken prop
+}
+
+// Modified Base64Token to support waToken
 export function Base64Token({
   symbol,
   onImageGenerated,
   aToken,
+  waToken,
 }: {
   symbol: string;
   aToken?: boolean;
+  waToken?: boolean;
   onImageGenerated: (base64: string) => void;
 }) {
   const ref = useRef<HTMLObjectElement>(null);
-  const aRef = useRef<SVGSVGElement>(null);
+  const tokenRef = useRef<SVGSVGElement>(null);
 
   const [loading, setLoading] = useState(true);
   useEffect(() => {
     if (!loading && ref.current && ref.current?.contentDocument) {
-      if (aToken) {
+      if (aToken || waToken) {
         // eslint-disable-next-line
         const inner = ref.current?.contentDocument?.childNodes?.[0] as any;
         const oldWidth = inner.getAttribute('width');
@@ -50,8 +54,8 @@ export function Base64Token({
           inner.setAttribute('viewBox', `0 0 ${oldWidth} ${oldHeight}`);
         }
 
-        aRef.current?.appendChild(inner);
-        const s = new XMLSerializer().serializeToString(aRef.current as unknown as Node);
+        tokenRef.current?.appendChild(inner);
+        const s = new XMLSerializer().serializeToString(tokenRef.current as unknown as Node);
 
         onImageGenerated(
           `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(s)))}`
@@ -63,7 +67,7 @@ export function Base64Token({
         );
       }
     }
-  }, [loading, aToken]);
+  }, [loading, aToken, waToken]);
   return (
     <div
       style={{
@@ -80,12 +84,13 @@ export function Base64Token({
         data={`/icons/tokens/${symbol.toLowerCase()}.svg`}
         onLoad={() => setLoading(false)}
       />
-      {aToken && <ATokenIcon ref={aRef} />}
+      {(aToken || waToken) && <TokenRing ref={tokenRef} waToken={waToken} />}
     </div>
   );
 }
 
-export const ATokenIcon = forwardRef<SVGSVGElement, ATokenIconProps>(({ symbol }, ref) => {
+// Renamed from ATokenIcon to TokenRing to better reflect its purpose
+export const TokenRing = forwardRef<SVGSVGElement, ATokenIconProps>(({ symbol, waToken }, ref) => {
   return (
     <svg
       style={{
@@ -113,14 +118,26 @@ export const ATokenIcon = forwardRef<SVGSVGElement, ATokenIconProps>(({ symbol }
           <stop offset="0" stopColor="#b6509e" id="stop2" />
           <stop offset="1" stopColor="#2ebac6" id="stop4" />
         </linearGradient>
-        <linearGradient id="linear-gradient-2" x1=".907" x2=".163" y1=".227" y2=".853" />
       </defs>
       <g id="Group_29109">
-        <path
-          id="Subtraction_108"
-          fill="url(#linear-gradient)"
-          d="M128 256a128.976 128.976 0 0 1-25.8-2.6 127.309 127.309 0 0 1-45.77-19.261 128.366 128.366 0 0 1-46.375-56.315A127.357 127.357 0 0 1 2.6 153.8a129.251 129.251 0 0 1 0-51.593 127.31 127.31 0 0 1 19.26-45.77 128.372 128.372 0 0 1 56.317-46.378A127.33 127.33 0 0 1 102.2 2.6a129.244 129.244 0 0 1 51.593 0 127.308 127.308 0 0 1 45.77 19.26 128.367 128.367 0 0 1 46.375 56.316A127.343 127.343 0 0 1 253.4 102.2a129.248 129.248 0 0 1 0 51.593 127.3 127.3 0 0 1-19.26 45.77 128.382 128.382 0 0 1-56.316 46.375A127.4 127.4 0 0 1 153.8 253.4 128.977 128.977 0 0 1 128 256zm0-242.287a115.145 115.145 0 0 0-23.033 2.322A113.657 113.657 0 0 0 64.1 33.232a114.622 114.622 0 0 0-41.4 50.283 113.7 113.7 0 0 0-6.659 21.452 115.4 115.4 0 0 0 0 46.065 113.66 113.66 0 0 0 17.2 40.866 114.627 114.627 0 0 0 50.282 41.407 113.75 113.75 0 0 0 21.453 6.658 115.381 115.381 0 0 0 46.065 0 113.609 113.609 0 0 0 40.866-17.2 114.622 114.622 0 0 0 41.393-50.278 113.741 113.741 0 0 0 6.659-21.453 115.4 115.4 0 0 0 0-46.065 113.662 113.662 0 0 0-17.2-40.865A114.619 114.619 0 0 0 172.485 22.7a113.74 113.74 0 0 0-21.453-6.659A115.145 115.145 0 0 0 128 13.714z"
-        />
+        {waToken ? (
+          // Dotted border path for waToken
+          <path
+            id="Subtraction_108"
+            fill="none"
+            stroke="url(#linear-gradient)"
+            strokeWidth="13.713"
+            strokeDasharray="8,8"
+            d="M128 256a128.976 128.976 0 0 1-25.8-2.6 127.309 127.309 0 0 1-45.77-19.261 128.366 128.366 0 0 1-46.375-56.315A127.357 127.357 0 0 1 2.6 153.8a129.251 129.251 0 0 1 0-51.593 127.31 127.31 0 0 1 19.26-45.77 128.372 128.372 0 0 1 56.317-46.378A127.33 127.33 0 0 1 102.2 2.6a129.244 129.244 0 0 1 51.593 0 127.308 127.308 0 0 1 45.77 19.26 128.367 128.367 0 0 1 46.375 56.316A127.343 127.343 0 0 1 253.4 102.2a129.248 129.248 0 0 1 0 51.593 127.3 127.3 0 0 1-19.26 45.77 128.382 128.382 0 0 1-56.316 46.375A127.4 127.4 0 0 1 153.8 253.4 128.977 128.977 0 0 1 128 256z"
+          />
+        ) : (
+          // Original filled path for aToken
+          <path
+            id="Subtraction_108"
+            fill="url(#linear-gradient)"
+            d="M128 256a128.976 128.976 0 0 1-25.8-2.6 127.309 127.309 0 0 1-45.77-19.261 128.366 128.366 0 0 1-46.375-56.315A127.357 127.357 0 0 1 2.6 153.8a129.251 129.251 0 0 1 0-51.593 127.31 127.31 0 0 1 19.26-45.77 128.372 128.372 0 0 1 56.317-46.378A127.33 127.33 0 0 1 102.2 2.6a129.244 129.244 0 0 1 51.593 0 127.308 127.308 0 0 1 45.77 19.26 128.367 128.367 0 0 1 46.375 56.316A127.343 127.343 0 0 1 253.4 102.2a129.248 129.248 0 0 1 0 51.593 127.3 127.3 0 0 1-19.26 45.77 128.382 128.382 0 0 1-56.316 46.375A127.4 127.4 0 0 1 153.8 253.4 128.977 128.977 0 0 1 128 256zm0-242.287a115.145 115.145 0 0 0-23.033 2.322A113.657 113.657 0 0 0 64.1 33.232a114.622 114.622 0 0 0-41.4 50.283 113.7 113.7 0 0 0-6.659 21.452 115.4 115.4 0 0 0 0 46.065 113.66 113.66 0 0 0 17.2 40.866 114.627 114.627 0 0 0 50.282 41.407 113.75 113.75 0 0 0 21.453 6.658 115.381 115.381 0 0 0 46.065 0 113.609 113.609 0 0 0 40.866-17.2 114.622 114.622 0 0 0 41.393-50.278 113.741 113.741 0 0 0 6.659-21.453 115.4 115.4 0 0 0 0-46.065 113.662 113.662 0 0 0-17.2-40.865A114.619 114.619 0 0 0 172.485 22.7a113.74 113.74 0 0 0-21.453-6.659A115.145 115.145 0 0 0 128 13.714z"
+          />
+        )}
         {symbol && (
           <image
             x="25"
@@ -134,20 +151,17 @@ export const ATokenIcon = forwardRef<SVGSVGElement, ATokenIconProps>(({ symbol }
     </svg>
   );
 });
-ATokenIcon.displayName = 'ATokenIcon';
+TokenRing.displayName = 'TokenRing';
 
 interface TokenIconProps extends IconProps {
   symbol: string;
   aToken?: boolean;
+  waToken?: boolean;
+  aTokens?: boolean[];
+  waTokens?: boolean[];
 }
 
-/**
- * Renders a tokenIcon specified by symbol.
- * TokenIcons are expected to be located at /public/icons/tokens and lowercase named <symbol>.svg
- * @param param0
- * @returns
- */
-function SingleTokenIcon({ symbol, aToken, ...rest }: TokenIconProps) {
+function SingleTokenIcon({ symbol, aToken, waToken, ...rest }: TokenIconProps) {
   const [tokenSymbol, setTokenSymbol] = useState(symbol.toLowerCase());
 
   useEffect(() => {
@@ -156,10 +170,9 @@ function SingleTokenIcon({ symbol, aToken, ...rest }: TokenIconProps) {
 
   return (
     <Icon {...rest} sx={{ display: 'flex', position: 'relative', borderRadius: '50%', ...rest.sx }}>
-      {aToken ? (
-        <ATokenIcon symbol={tokenSymbol} />
+      {aToken || waToken ? (
+        <TokenRing symbol={tokenSymbol} waToken={waToken} />
       ) : (
-        // eslint-disable-next-line
         <img
           src={`/icons/tokens/${tokenSymbol}.svg`}
           onError={() => setTokenSymbol('default')}
@@ -205,9 +218,23 @@ interface MultiTokenIconProps extends IconProps {
   symbols: string[];
   badgeSymbol?: string;
   aToken?: boolean;
+  waToken?: boolean;
+  aTokens?: boolean[];
+  waTokens?: boolean[];
 }
 
-export function MultiTokenIcon({ symbols, badgeSymbol, ...rest }: MultiTokenIconProps) {
+export function MultiTokenIcon({
+  symbols,
+  badgeSymbol,
+  aToken = false,
+  waToken = false,
+  aTokens: providedATokens,
+  waTokens: providedWaTokens,
+  ...rest
+}: MultiTokenIconProps) {
+  const aTokens = providedATokens || symbols.map((_, index) => (index === 0 ? aToken : false));
+  const waTokens = providedWaTokens || symbols.map((_, index) => (index === 0 ? waToken : false));
+
   if (!badgeSymbol)
     return (
       <Box sx={{ display: 'inline-flex', position: 'relative' }}>
@@ -216,6 +243,8 @@ export function MultiTokenIcon({ symbols, badgeSymbol, ...rest }: MultiTokenIcon
             {...rest}
             key={symbol}
             symbol={symbol}
+            aToken={aTokens[ix]}
+            waToken={waTokens[ix]}
             sx={{ ml: ix === 0 ? 0 : `calc(-1 * 0.5em)`, ...rest.sx }}
           />
         ))}
@@ -233,18 +262,33 @@ export function MultiTokenIcon({ symbols, badgeSymbol, ...rest }: MultiTokenIcon
           {...rest}
           key={symbol}
           symbol={symbol}
+          aToken={aTokens[ix]}
+          waToken={waTokens[ix]}
           sx={{ ml: ix === 0 ? 0 : 'calc(-1 * 0.5em)', ...rest.sx }}
         />
       ))}
     </Badge>
   );
 }
 
-export function TokenIcon({ symbol, ...rest }: TokenIconProps) {
+export function TokenIcon({ symbol, aToken, waToken, aTokens, waTokens, ...rest }: TokenIconProps) {
   const symbolChunks = symbol.split('_');
   if (symbolChunks.length > 1) {
-    const [badge, ...symbols] = symbolChunks;
-    return <MultiTokenIcon {...rest} symbols={symbols} badgeSymbol={'/pools/' + badge} />;
+    if (symbolChunks[0].startsWith('pools/')) {
+      const [badge, ...symbols] = symbolChunks;
+      return <MultiTokenIcon {...rest} symbols={symbols} badgeSymbol={'/pools/' + badge} />;
+    }
+    return (
+      <MultiTokenIcon
+        {...rest}
+        symbols={symbolChunks}
+        aToken={aToken}
+        waToken={waToken}
+        aTokens={aTokens}
+        waTokens={waTokens}
+      />
+    );
   }
-  return <SingleTokenIcon symbol={symbol} {...rest} />;
+
+  return <SingleTokenIcon symbol={symbol} aToken={aToken} waToken={waToken} {...rest} />;
 }

src/components/transactions/ClaimRewards/RewardsSelect.tsx

@@ -9,8 +9,10 @@ import { Reward } from 'src/helpers/types';
 import { FormattedNumber } from '../../primitives/FormattedNumber';
 import { TokenIcon } from '../../primitives/TokenIcon';
 
+export type RewardSelect = Pick<Reward, 'symbol' | 'balanceUsd'>;
+
 export type RewardsSelectProps = {
-  rewards: Reward[];
+  rewards: RewardSelect[];
   setSelectedReward: (key: string) => void;
   selectedReward: string;
 };