feat: add HAL Notification Icon on supported market (aave#324)

Co-authored-by: Alex <[email protected]>

src/components/DepositBorrowTopPanel/index.tsx

@@ -272,6 +272,7 @@ export default function DepositBorrowTopPanel() {
                         isColumn={true}
                         titleColor="white"
                         titleLightWeight={true}
+                        withHALLink={true}
                       />
                     </div>
 

src/components/HealthFactor/index.tsx

@@ -24,6 +24,7 @@ interface HealthFactorProps {
   titleLightWeight?: boolean;
   isColumn?: boolean;
   onWhiteBackground?: boolean;
+  withHALLink?: boolean;
 }
 
 export default function HealthFactor({
@@ -39,6 +40,7 @@ export default function HealthFactor({
   titleLightWeight,
   isColumn,
   onWhiteBackground,
+  withHALLink,
 }: HealthFactorProps) {
   const intl = useIntl();
   const { currentTheme } = useThemeContext();
@@ -76,6 +78,7 @@ export default function HealthFactor({
           color={titleColor}
           lightWeight={titleLightWeight}
           onWhiteBackground={onWhiteBackground}
+          withSecondaryIcon={withHALLink}
         />
       )}
 

src/components/HelpModal/HealthFactorHelpModal/HALNotificationIcon.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { CustomTooltip } from '@aave/aave-ui-kit';
+
+import { useUserWalletDataContext } from '../../../libs/web3-data-provider';
+import { useProtocolDataContext } from '../../../libs/protocol-data-provider';
+import { CustomMarket } from '../../../ui-config/markets';
+import { AdditionalItemProps } from '../../TextWithModal';
+
+import messages from './messages';
+import staticStyles from './style';
+
+import bellGrayDark from './images/bellGrayDark.svg';
+import bellGray from './images/bellGray.svg';
+import bell from './images/bell.svg';
+
+const marketToHALAaveVersionUrlParam = (market: CustomMarket): string | undefined => {
+  const exhaustCases = (_: never) => undefined;
+  switch (market) {
+    case CustomMarket.proto_matic:
+      return 'aavepolygon';
+    case CustomMarket.proto_avalanche:
+      return 'aaveavalanche';
+    case CustomMarket.proto_mainnet:
+      return 'aavev2';
+
+    case CustomMarket.proto_kovan:
+    case CustomMarket.proto_mumbai:
+    case CustomMarket.proto_fuji:
+    case CustomMarket.amm_kovan:
+    case CustomMarket.amm_mainnet:
+      return undefined;
+
+    default:
+      return exhaustCases(market);
+  }
+};
+
+export default function HALNotificationIcon({
+  height,
+  width,
+  containerClassName,
+  containerStyle,
+  iconTheme,
+}: AdditionalItemProps) {
+  const intl = useIntl();
+  const { currentAccount } = useUserWalletDataContext();
+  const { currentMarket } = useProtocolDataContext();
+
+  const supportedAaveVersion = marketToHALAaveVersionUrlParam(currentMarket);
+  const urlString = React.useMemo(() => {
+    const url = new URL('https://9000.hal.xyz/recipes/aave-track-your-health-factor');
+    url.searchParams.set('user', currentAccount);
+
+    const aaveVersionParam = supportedAaveVersion;
+    if (aaveVersionParam !== undefined) {
+      url.searchParams.set('aaveversion', aaveVersionParam);
+    }
+
+    return url.toString();
+  }, [currentAccount, supportedAaveVersion]);
+
+  const tooltipId = `${currentAccount}__healthFactor`;
+
+  // Do not show the HAL Noticiation icon on unsupported markets.
+  if (supportedAaveVersion === undefined) {
+    return null;
+  }
+
+  return (
+    <a
+      href={urlString}
+      target="_blank"
+      rel="noreferrer"
+      className={classNames(containerClassName, 'HALNotificationIcon')}
+      style={containerStyle}
+      data-tip={true}
+      data-for={tooltipId}
+    >
+      <img
+        src={iconTheme === 'dark' ? bellGrayDark : iconTheme === 'gray' ? bellGray : bell}
+        alt="Notify Me"
+        height={height + 2}
+        width={width + 2}
+      />
+
+      <CustomTooltip
+        tooltipId={tooltipId}
+        text={intl.formatMessage(messages.notificationIconTooltipText)}
+      />
+
+      <style jsx={true}>{staticStyles}</style>
+    </a>
+  );
+}

src/components/HelpModal/HealthFactorHelpModal/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 
 import HelpModalWrapper from '../HelpModalWrapper';
+import HALNotificationIcon from './HALNotificationIcon';
 import { HelpModalProps } from '../types';
 
 import messages from './messages';
@@ -13,8 +14,10 @@ export default function HealthFactorHelpModal({
   color,
   lightWeight,
   onWhiteBackground,
+  withSecondaryIcon,
 }: HelpModalProps) {
   const intl = useIntl();
+
   return (
     <HelpModalWrapper
       text={text}
@@ -25,6 +28,7 @@ export default function HealthFactorHelpModal({
       color={color}
       lightWeight={lightWeight}
       onWhiteBackground={onWhiteBackground}
+      secondaryIcon={withSecondaryIcon ? (props) => <HALNotificationIcon {...props} /> : undefined}
     />
   );
 }

src/components/HelpModal/HealthFactorHelpModal/messages.ts

@@ -4,4 +4,6 @@ export default defineMessages({
   caption: 'Health factor',
   description:
     'The health factor represents the safety of your loan derived from the proportion of collateral versus amount borrowed. Keep it above 1 to avoid liquidation.',
+
+  notificationIconTooltipText: 'Set up notification when your Health Factor is getting low.',
 });

src/components/HelpModal/HealthFactorHelpModal/style.ts

@@ -0,0 +1,13 @@
+import css from 'styled-jsx/css';
+
+/*language=SCSS*/
+const staticStyles = css`
+  @import 'src/_mixins/vars';
+  @import 'src/_mixins/screen-size';
+
+  .HALNotificationIcon {
+    opacity: 1;
+  }
+`;
+
+export default staticStyles;

src/components/HelpModal/HelpModalWrapper/index.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
 
 import HelpItem from '../../HelpItem';
-import TextWithModal from '../../TextWithModal';
+import TextWithModal, { TextWithModalProps } from '../../TextWithModal';
 
-export interface HelpModalWrapperProps {
+export interface HelpModalWrapperProps extends Pick<TextWithModalProps, 'secondaryIcon'> {
   text: string;
   iconSize?: number;
   className?: string;
@@ -31,6 +31,7 @@ export default function HelpModalWrapper({
   clickOnText,
   withGrayIcon,
   captionColor,
+  secondaryIcon,
 }: HelpModalWrapperProps) {
   return (
     <TextWithModal
@@ -43,6 +44,7 @@ export default function HelpModalWrapper({
       modalClassName={modalClassName}
       clickOnText={clickOnText}
       withGrayIcon={withGrayIcon}
+      secondaryIcon={secondaryIcon}
     >
       <HelpItem
         caption={caption}

src/components/HelpModal/types.ts

@@ -8,4 +8,5 @@ export interface HelpModalProps
   caption?: string;
   description?: string;
   withGrayIcon?: boolean;
+  withSecondaryIcon?: boolean;
 }

src/components/TextWithModal/index.tsx

@@ -12,6 +12,14 @@ import info from './images/info.svg';
 import infoGray from './images/infoGray.svg';
 import infoGrayDark from './images/infoGrayDark.svg';
 
+export type AdditionalItemProps = {
+  height: number;
+  width: number;
+  containerClassName: string;
+  containerStyle: React.CSSProperties;
+  iconTheme: 'dark' | 'gray' | 'default';
+};
+
 export type TextWithModalProps = {
   text: string;
   children: ReactNode;
@@ -25,8 +33,13 @@ export type TextWithModalProps = {
   onWhiteBackground?: boolean;
   clickOnText?: boolean;
   withGrayIcon?: boolean;
+  secondaryIcon?: (props: AdditionalItemProps) => JSX.Element;
 };
 
+const PRIMARY_ICON_POSTION = 1;
+const SECONDARY_ICON_POSITION = 2;
+const ICON_PADDING = 4;
+
 export default function TextWithModal({
   text,
   children,
@@ -40,6 +53,7 @@ export default function TextWithModal({
   onWhiteBackground,
   clickOnText,
   withGrayIcon,
+  secondaryIcon,
 }: TextWithModalProps) {
   const intl = useIntl();
   const { currentTheme, xl, lg, md, isCurrentThemeDark } = useThemeContext();
@@ -48,10 +62,27 @@ export default function TextWithModal({
 
   const baseIconSize = !xl ? 14 : lg && !md ? 10 : md ? 12 : 12;
 
+  const iconHeight: number = iconSize || baseIconSize;
+  const iconWidth: number = iconSize || baseIconSize;
+
+  const getIconContainerStyle = (position: number): React.CSSProperties => {
+    const iconWidthOffset = iconWidth * position;
+    const iconOffset = -(iconWidthOffset + ICON_PADDING);
+
+    const isSecondPosition = position === SECONDARY_ICON_POSITION;
+
+    return {
+      height: isSecondPosition ? iconHeight + 2 : iconHeight,
+      width: isSecondPosition ? iconWidth + 2 : iconWidth,
+      right: isSecondPosition ? iconOffset - 4 : iconOffset,
+    };
+  };
+
   return (
     <div
       className={classNames('TextWithModal', className, `TextWithModal__${color}`, {
         TextWithModal__lightWeight: lightWeight,
+        TextWithModal__withDoubleIcons: !!secondaryIcon,
       })}
     >
       <div
@@ -65,26 +96,34 @@ export default function TextWithModal({
       >
         {text}
       </div>
-      <button
-        className="TextWithModal__button"
-        type="button"
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-          e.stopPropagation();
-          setVisible(true);
-        }}
-        style={{
-          height: iconSize || baseIconSize,
-          width: iconSize || baseIconSize,
-          right: -((iconSize || baseIconSize) + 4),
-        }}
-      >
-        <img
-          src={withGrayIcon ? (isCurrentThemeDark ? infoGrayDark : infoGray) : info}
-          alt={text}
-          height={iconSize || baseIconSize}
-          width={iconSize || baseIconSize}
-        />
-      </button>
+
+      <div className="TextWithModal__icons">
+        <button
+          className="TextWithModal__button"
+          type="button"
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            setVisible(true);
+          }}
+          style={getIconContainerStyle(PRIMARY_ICON_POSTION)}
+        >
+          <img
+            src={withGrayIcon ? (isCurrentThemeDark ? infoGrayDark : infoGray) : info}
+            alt={text}
+            height={iconHeight}
+            width={iconWidth}
+          />
+        </button>
+
+        {secondaryIcon &&
+          secondaryIcon({
+            height: iconHeight,
+            width: iconWidth,
+            containerClassName: 'TextWithModal__button',
+            containerStyle: getIconContainerStyle(SECONDARY_ICON_POSITION),
+            iconTheme: withGrayIcon ? (isCurrentThemeDark ? 'dark' : 'gray') : 'default',
+          })}
+      </div>
 
       <BasicModal
         isVisible={visible}

src/components/TextWithModal/style.ts

@@ -12,7 +12,21 @@ const staticStyles = css.global`
     align-items: flex-start;
     position: relative;
 
+    &__withDoubleIcons {
+      .TextWithModal__button {
+        position: relative;
+        top: 2px;
+        transform: unset;
+        margin-left: 4px;
+        right: unset !important;
+        &:active {
+          transform: scale(0.8);
+        }
+      }
+    }
+
     &__text {
+      display: inline-block;
       font-size: $large;
       @include respond-to(xl) {
         font-size: $medium;
@@ -32,6 +46,11 @@ const staticStyles = css.global`
       cursor: pointer;
     }
 
+    &__icons {
+      display: inline-flex;
+      align-items: center;
+    }
+
     &__button {
       background: transparent;
       border: none;

src/modules/dashboard/screens/Dashboard/index.tsx

@@ -292,6 +292,7 @@ export default function Dashboard() {
                   value={user?.healthFactor || '-1'}
                   titleColor="white"
                   titleLightWeight={true}
+                  withHALLink={true}
                 />
               )}
             </>
@@ -323,6 +324,7 @@ export default function Dashboard() {
             value={user?.healthFactor || '-1'}
             titleColor="white"
             titleLightWeight={true}
+            withHALLink={true}
           />
 
           <Row

src/modules/reserve-overview/components/UserInformation/index.tsx

@@ -229,6 +229,7 @@ export default function UserInformation({
                 value={user?.healthFactor || '-1'}
                 titleColor={elementsColor}
                 titleLightWeight={sm}
+                withHALLink={true}
               />
               <Row
                 title={intl.formatMessage(messages.loanToValue)}