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

Co-authored-by: Alex <argeares97@gmail.com>

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)}