✨ HLS: Add info modal (#573)

__tests__/components/CircularProgress.test.tsx

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react'
 
 import { CircularProgress } from 'components/CircularProgress'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 
 describe('<CircularProgress />', () => {
   afterAll(() => {
-    localStorage.removeItem(REDUCE_MOTION_KEY)
+    localStorage.removeItem(LocalStorageKeys.REDUCE_MOTION)
   })
 
   it('should render', () => {
@@ -15,7 +15,7 @@ describe('<CircularProgress />', () => {
   })
 
   it('should render `...` when animations disabled', () => {
-    localStorage.setItem(REDUCE_MOTION_KEY, 'true')
+    localStorage.setItem(LocalStorageKeys.REDUCE_MOTION, 'true')
 
     const { getByText } = render(<CircularProgress />)
     const threeDots = getByText('...')
@@ -24,7 +24,7 @@ describe('<CircularProgress />', () => {
   })
 
   it('should render the component with animation classes when animations enabled', () => {
-    localStorage.setItem(REDUCE_MOTION_KEY, 'false')
+    localStorage.setItem(LocalStorageKeys.REDUCE_MOTION, 'false')
 
     const { container } = render(<CircularProgress />)
     const progressWithAnimations = container.querySelector('.animate-progress')

src/components/Account/AccountDetails/index.tsx

@@ -14,7 +14,7 @@ import { HealthGauge } from 'components/HealthGauge'
 import { ThreeDots } from 'components/Icons'
 import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAccountId from 'hooks/useAccountId'
 import useAccountIds from 'hooks/useAccountIds'
@@ -56,7 +56,10 @@ interface Props {
 
 function AccountDetails(props: Props) {
   const { account } = props
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const updatedAccount = useStore((s) => s.updatedAccount)
   const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded)
   const { health } = useHealthComputer(account)

src/components/Account/AccountFund/AccountFundContent.tsx

@@ -9,7 +9,7 @@ import Text from 'components/Text'
 import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { LEND_ASSETS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
 import useAutoLend from 'hooks/useAutoLend'
 import useLocalStorage from 'hooks/useLocalStorage'
@@ -38,7 +38,7 @@ export default function AccountFundContent(props: Props) {
   const walletAssetModal = useStore((s) => s.walletAssetsModal)
   const [isConfirming, setIsConfirming] = useState(false)
   const [lendAssets, setLendAssets] = useLocalStorage<boolean>(
-    LEND_ASSETS_KEY,
+    LocalStorageKeys.LEND_ASSETS,
     DEFAULT_SETTINGS.lendAssets,
   )
   const [fundingAssets, setFundingAssets] = useState<BNCoin[]>([])

src/components/Account/AccountMenuContent.tsx

@@ -11,7 +11,7 @@ import Overlay from 'components/Overlay'
 import Text from 'components/Text'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { LEND_ASSETS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAccountId from 'hooks/useAccountId'
 import useAccountIds from 'hooks/useAccountIds'
 import useAutoLend from 'hooks/useAutoLend'
@@ -39,7 +39,10 @@ export default function AccountMenuContent() {
   const [showMenu, setShowMenu] = useToggle()
   const [isCreating, setIsCreating] = useToggle()
   const transactionFeeCoinBalance = useCurrentWalletBalance(baseCurrency.denom)
-  const [lendAssets] = useLocalStorage<boolean>(LEND_ASSETS_KEY, DEFAULT_SETTINGS.lendAssets)
+  const [lendAssets] = useLocalStorage<boolean>(
+    LocalStorageKeys.LEND_ASSETS,
+    DEFAULT_SETTINGS.lendAssets,
+  )
   const { enableAutoLendAccountId } = useAutoLend()
 
   const hasCreditAccounts = !!accountIds?.length

src/components/Account/HealthBar.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 
 import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useHealthColorAndLabel from 'hooks/useHealthColorAndLabel'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { getHealthIndicatorColors } from 'utils/healthIndicator'
@@ -30,7 +30,10 @@ function calculateHealth(health: number): number {
 
 export default function HealthBar(props: Props) {
   const { health, updatedHealth } = props
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const width = calculateHealth(health)
   const updatedWidth = calculateHealth(updatedHealth ?? 0)
   const isUpdated = updatedWidth > 0 && updatedWidth !== width

src/components/Account/RiskChart.tsx

@@ -12,13 +12,16 @@ import {
 import { FormattedNumber } from 'components/FormattedNumber'
 import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import { BN_ZERO } from 'constants/math'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { formatValue } from 'utils/formatters'
-import { BN_ZERO } from 'constants/math'
 
 export const RiskChart = ({ data }: RiskChartProps) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const currentRisk = BN_ZERO
 
   return (

src/components/Background.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 export default function Background() {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
 
   return (
     <div className='background pointer-events-none fixed inset-0 h-full w-full overflow-hidden bg-body'>

src/components/BorrowCapacity.tsx

@@ -5,7 +5,7 @@ import { FormattedNumber } from 'components/FormattedNumber'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
@@ -31,7 +31,10 @@ export const BorrowCapacity = ({
   hideValues,
   decimals = 2,
 }: Props) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const [percentOfMaxRound, setPercentOfMaxRound] = useState(0)
   const [percentOfMaxRange, setPercentOfMaxRange] = useState(0)
   const [limitPercentOfMax, setLimitPercentOfMax] = useState(0)

src/components/Button/index.tsx

@@ -17,7 +17,7 @@ import { glowElement } from 'components/Button/utils'
 import { CircularProgress } from 'components/CircularProgress'
 import { ChevronDown } from 'components/Icons'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 const Button = React.forwardRef(function Button(
@@ -44,7 +44,10 @@ const Button = React.forwardRef(function Button(
   }: ButtonProps,
   ref,
 ) {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const isDisabled = disabled || showProgressIndicator
   const shouldShowText = text && !children
   const shouldShowGlowElement = variant === 'solid' && !isDisabled && !reduceMotion

src/components/CheckMark.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 
 import { CheckCircled } from 'components/Icons'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
@@ -12,7 +12,10 @@ interface Props {
 }
 
 export const CheckMark = ({ color = '#FFFFFF', size = 20, className }: Props) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const classes = classNames('inline-block relative', className)
 
   if (reduceMotion)

src/components/Checkbox.tsx

@@ -1,27 +1,39 @@
 import classNames from 'classnames'
 
 import { Check } from 'components/Icons'
+import Text from 'components/Text'
 
 interface Props {
   checked: boolean
   onChange: (checked: boolean) => void
+  text?: string
 }
 
 export default function Checkbox(props: Props) {
   return (
-    <button
+    <label className='flex gap-2 items-center cursor-pointer'>
-      onClick={() => props.onChange(props.checked)}
+      <input
-      role='checkbox'
+        onChange={() => props.onChange(props.checked)}
-      aria-checked={props.checked}
+        checked={props.checked}
-      className={classNames(
+        type='checkbox'
-        'h-5 w-5 rounded-sm p-0.5',
+        className='opacity-0 absolute'
-        props.checked && 'relative isolate overflow-hidden rounded-sm',
+      />
-        props.checked &&
+      <div
-          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+        className={classNames(
-        props.checked ? 'bg-white/20' : 'border border-white/60',
+          'h-5 w-5 rounded-sm p-0.5',
+          props.checked && 'relative isolate overflow-hidden rounded-sm',
+          props.checked &&
+            'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+          props.checked ? 'bg-white/20' : 'border border-white/60',
+        )}
+      >
+        {props.checked && <Check />}
+      </div>
+      {props.text && (
+        <Text size='xs' className='text-white/60'>
+          {props.text}
+        </Text>
       )}
-    >
+    </label>
-      {props.checked && <Check />}
-    </button>
   )
 }

src/components/CircularProgress.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
@@ -11,7 +11,10 @@ interface Props {
 }
 
 export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Props) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const borderWidth = `${size / 10}px`
   const borderColor = `${color} transparent transparent transparent`
   const loaderClasses = classNames('inline-block relative', className)

src/components/DisplayCurrency.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 
 import { FormattedNumber } from 'components/FormattedNumber'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
@@ -22,7 +22,7 @@ interface Props {
 export default function DisplayCurrency(props: Props) {
   const displayCurrencies = getDisplayCurrencies()
   const [displayCurrency] = useLocalStorage<string>(
-    DISPLAY_CURRENCY_KEY,
+    LocalStorageKeys.DISPLAY_CURRENCY,
     DEFAULT_SETTINGS.displayCurrency,
   )
   const { data: prices } = usePrices()

src/components/Earn/Farm/VaultExpanded.tsx

@@ -6,7 +6,7 @@ import Button from 'components/Button'
 import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/Icons'
 import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAccountId from 'hooks/useAccountId'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
@@ -22,7 +22,7 @@ export default function VaultExpanded(props: Props) {
   const accountId = useAccountId()
   const [isConfirming, setIsConfirming] = useState(false)
   const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
-  const [slippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
 
   function depositMoreHandler() {
     useStore.setState({

src/components/Earn/Farm/VaultUnlockBanner.tsx

@@ -4,7 +4,7 @@ import Button from 'components/Button'
 import { ChevronRight } from 'components/Icons'
 import NotificationBanner from 'components/NotificationBanner'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAccountId from 'hooks/useAccountId'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
@@ -17,7 +17,7 @@ export default function VaultUnlockBanner(props: Props) {
   const accountId = useAccountId()
   const [isConfirming, setIsConfirming] = useState(false)
   const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
-  const [slippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
 
   async function handleWithdraw() {
     if (!accountId) return

src/components/Earn/Lend/LendingActionButtons.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { ACCOUNT_MENU_BUTTON_ID } from 'components/Account/AccountMenuContent'
 import Button from 'components/Button'
 import ActionButton from 'components/Button/ActionButton'
-import { ArrowDownLine, ArrowUpLine, Enter } from 'components/Icons'
+import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/Icons'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
@@ -36,8 +36,9 @@ export default function LendingActionButtons(props: Props) {
   const handleUnlend = useCallback(() => {
     if (isAutoLendEnabledForCurrentAccount) {
       showAlertDialog({
+        icon: <ExclamationMarkCircled width={18} />,
         title: 'Disable Automatically Lend Assets',
-        description:
+        content:
           "Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
         positiveButton: {
           onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),

src/components/FormattedNumber.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react'
 import { animated, useSpring } from 'react-spring'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { formatValue } from 'utils/formatters'
 
@@ -19,7 +19,7 @@ interface Props {
 export const FormattedNumber = React.memo(
   (props: Props) => {
     const [reduceMotion] = useLocalStorage<boolean>(
-      REDUCE_MOTION_KEY,
+      LocalStorageKeys.REDUCE_MOTION,
       DEFAULT_SETTINGS.reduceMotion,
     )
     const prevAmountRef = useRef<number>(0)

src/components/Gauge.tsx

@@ -3,7 +3,7 @@ import { ReactElement, ReactNode } from 'react'
 
 import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
@@ -27,7 +27,10 @@ export const Gauge = ({
   icon,
   labelClassName,
 }: Props) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const radius = 16
   const percentageValue = percentage > 100 ? 100 : percentage < 0 ? 0 : percentage
   const circlePercent = 100 - percentageValue

src/components/HLS/Farm/HLSFarmIntro.tsx

@@ -11,7 +11,7 @@ export default function HlsFarmIntro() {
       bg='farm'
       text={
         <>
-          <span className='text-white'>Leverage farming</span> is a strategy where users borrow
+          <span className='text-white'>Leveraged farming</span> is a strategy where users borrow
           funds to increase their yield farming position, aiming to earn more in rewards than the
           cost of the borrowed assets.
         </>

src/components/HLS/Farm/Table/Columns/Deposit.tsx

@@ -1,7 +1,13 @@
-import React from 'react'
+import classNames from 'classnames'
+import React, { useCallback } from 'react'
 
 import ActionButton from 'components/Button/ActionButton'
+import { Enter } from 'components/Icons'
 import Loading from 'components/Loading'
+import Text from 'components/Text'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import useAlertDialog from 'hooks/useAlertDialog'
+import useLocalStorage from 'hooks/useLocalStorage'
 
 export const DEPOSIT_META = { accessorKey: 'deposit', header: 'Deposit' }
 
@@ -13,7 +19,58 @@ interface Props {
 export default function Deposit(props: Props) {
   const { vault } = props
 
+  const [showHlsInfo, setShowHlsInfo] = useLocalStorage<boolean>(
+    LocalStorageKeys.HLS_INFORMATION,
+    true,
+  )
+
+  const { open: openAlertDialog, close } = useAlertDialog()
+
+  const showHlsInfoModal = useCallback(() => {
+    if (!showHlsInfo) return
+    openAlertDialog({
+      title: 'Understanding HLS Positions',
+      content: (
+        <div className='flex flex-col gap-8 pb-8 pt-2 pr-10'>
+          {INFO_ITEMS.map((item) => (
+            <div key={item.title} className='grid grid-cols-[min-content,auto]'>
+              <span
+                className={classNames(
+                  'rounded-sm relative h-10 w-10 p-3 bg-white/10 mr-6 grid place-items-center',
+                  'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:p-[1px] before:border-glas before:-z-1',
+                )}
+              >
+                {item.icon}
+              </span>
+              <span className='flex flex-col'>
+                <Text>{item.title}</Text>
+                <Text className='text-white/60 text-sm'>{item.description}</Text>
+              </span>
+            </div>
+          ))}
+        </div>
+      ),
+      positiveButton: {
+        text: 'Continue',
+        icon: <Enter />,
+        onClick: enterVaultHandler,
+      },
+      negativeButton: {
+        text: 'Cancel',
+        onClick: () => {
+          setShowHlsInfo(true)
+          close()
+        },
+      },
+      checkbox: {
+        text: "Don't show again",
+        onClick: (isChecked: boolean) => setShowHlsInfo(!isChecked),
+      },
+    })
+  }, [close, enterVaultHandler, openAlertDialog, setShowHlsInfo, showHlsInfo])
+
   function enterVaultHandler() {
+    showHlsInfoModal()
     return
   }
 
@@ -25,3 +82,23 @@ export default function Deposit(props: Props) {
     </div>
   )
 }
+
+const INFO_ITEMS = [
+  {
+    icon: <Enter width={16} height={16} />,
+    title: 'One account, one position',
+    description:
+      'A minted HLS account can only have a single position tied to it, in order to limit risk.',
+  },
+  {
+    icon: <Enter />,
+    title: 'Funded from your wallet',
+    description: 'To fund your HLS position, funds will have to come directly from your wallet.',
+  },
+  {
+    icon: <Enter />,
+    title: 'Accounts are reusable',
+    description:
+      'If you exited a position from a minted account, this account can be reused for a new position.',
+  },
+]

src/components/HealthGauge.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import { Heart } from 'components/Icons'
 import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useHealthColorAndLabel from 'hooks/useHealthColorAndLabel'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { computeHealthGaugePercentage } from 'utils/accounts'
@@ -25,7 +25,10 @@ const ROTATION = {
 export const HealthGauge = ({ diameter = 40, health = 0, updatedHealth = 0 }: Props) => {
   const [color, label] = useHealthColorAndLabel(health, 'text')
   const [updatedColor, updatedLabel] = useHealthColorAndLabel(updatedHealth ?? 0, 'text')
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const percentage = useMemo(() => computeHealthGaugePercentage(health), [health])
   const updatedPercentage = useMemo(
     () => computeHealthGaugePercentage(updatedHealth),

src/components/MigrationBanner.tsx

@@ -3,14 +3,14 @@ import { Cross, ExclamationMarkCircled } from 'components/Icons'
 import Text from 'components/Text'
 import { TextLink } from 'components/TextLink'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { MIGRATION_BANNER_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 import { DocURL } from 'types/enums/docURL'
 
 export default function MigrationBanner() {
   const [_, setMigrationBanner] = useLocalStorage<boolean>(
-    MIGRATION_BANNER_KEY,
+    LocalStorageKeys.MIGRATION_BANNER,
     DEFAULT_SETTINGS.migrationBanner,
   )
 

src/components/Modals/Account/AccountDeleteAlertDialog.tsx

@@ -4,25 +4,22 @@ import { Enter, InfoCircle } from 'components/Icons'
 import useAlertDialog from 'hooks/useAlertDialog'
 
 interface Props {
+  content: string | JSX.Element
   title: string
-  description: string | JSX.Element
+  icon?: JSX.Element
   closeHandler: () => void
   positiveButton: AlertDialogButton
 }
 
 export default function AccountDeleteAlertDialog(props: Props) {
   const { open: showAlertDialog } = useAlertDialog()
-  const { title, description, closeHandler, positiveButton } = props
+  const { title, content, closeHandler, positiveButton } = props
 
   useEffect(() => {
     showAlertDialog({
-      icon: (
+      icon: <InfoCircle />,
-        <div className='flex w-full h-full p-3'>
-          <InfoCircle />
-        </div>
-      ),
       title,
-      description,
+      content,
       negativeButton: {
         text: 'Cancel',
         icon: <Enter />,
@@ -30,7 +27,7 @@ export default function AccountDeleteAlertDialog(props: Props) {
       },
       positiveButton,
     })
-  }, [showAlertDialog, title, description, closeHandler, positiveButton])
+  }, [showAlertDialog, closeHandler, positiveButton, title, content])
 
   return null
 }

src/components/Modals/Account/AccountDeleteModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import AssetBalanceRow from 'components/Asset/AssetBalanceRow'
-import { ArrowRight } from 'components/Icons'
+import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
 import AccountDeleteAlertDialog from 'components/Modals/Account/AccountDeleteAlertDialog'
 import Text from 'components/Text'
 import useStore from 'store'
@@ -51,7 +51,8 @@ function AccountDeleteModal(props: Props) {
     return (
       <AccountDeleteAlertDialog
         title='Repay your Debts to delete your account'
-        description='You must repay all borrowings before deleting your account.'
+        icon={<ExclamationMarkCircled width={18} />}
+        content='You must repay all borrowings before deleting your account.'
         closeHandler={closeDeleteAccountModal}
         positiveButton={{
           text: 'Repay Debts',
@@ -68,7 +69,7 @@ function AccountDeleteModal(props: Props) {
     return (
       <AccountDeleteAlertDialog
         title='Close your positions to delete your account'
-        description='You must first close your farming positions before deleting your account.'
+        content='You must first close your farming positions before deleting your account.'
         closeHandler={closeDeleteAccountModal}
         positiveButton={{
           text: 'Close Positions',
@@ -85,7 +86,7 @@ function AccountDeleteModal(props: Props) {
     return (
       <AccountDeleteAlertDialog
         title={`Delete Credit Account ${accountId}`}
-        description='Deleting your Credit Account is irreversible.'
+        content='Deleting your Credit Account is irreversible.'
         closeHandler={closeDeleteAccountModal}
         positiveButton={{
           text: 'Delete Account',
@@ -98,7 +99,7 @@ function AccountDeleteModal(props: Props) {
   return (
     <AccountDeleteAlertDialog
       title={`Delete Credit Account ${accountId}`}
-      description={
+      content={
         <>
           <Text className='mt-2 text-white/50' size='sm'>
             The following assets within your Credit Account will be sent to your wallet.

src/components/Modals/AlertDialog/index.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames'
-import { useState } from 'react'
 
 import Button from 'components/Button'
-import { ExclamationMarkCircled } from 'components/Icons'
+import Checkbox from 'components/Checkbox'
 import Modal from 'components/Modal'
 import { NoIcon, YesIcon } from 'components/Modals/AlertDialog/ButtonIcons'
 import Text from 'components/Text'
 import useAlertDialog from 'hooks/useAlertDialog'
+import useToggle from 'hooks/useToggle'
 
 export default function AlertDialogController() {
   const { config, close } = useAlertDialog()
@@ -22,19 +22,32 @@ interface Props {
 }
 
 function AlertDialog(props: Props) {
-  const { title, icon, description, negativeButton, positiveButton } = props.config
+  const { title, icon, content, negativeButton, positiveButton, checkbox } = props.config
+
+  const [toggle, handleToggle] = useToggle()
+
   const handleButtonClick = (button?: AlertDialogButton) => {
     button?.onClick && button.onClick()
     props.close()
   }
 
+  function handleCheckboxClick() {
+    handleToggle()
+    checkbox?.onClick(!toggle)
+  }
+
   return (
     <Modal
       onClose={props.close}
       hideTxLoader
       header={
-        <div className='grid w-12 h-12 rounded-sm place-items-center bg-white/5'>
+        <div className='flex flex-col'>
-          {icon ?? <ExclamationMarkCircled width={18} />}
+          {icon && (
+            <div className='grid w-12 h-12 rounded-sm place-items-center bg-white/5 mb-4'>
+              {icon}
+            </div>
+          )}
+          <Text size='2xl'>{title}</Text>
         </div>
       }
       modalClassName='max-w-modal-sm'
@@ -42,24 +55,28 @@ function AlertDialog(props: Props) {
       contentClassName='px-8 pb-8'
       hideCloseBtn
     >
-      <Text size='xl'>{title}</Text>
+      {typeof content === 'string' ? (
-      {typeof description === 'string' ? (
+        <Text className='mt-2 text-white/60'>{content}</Text>
-        <Text className='mt-2 text-white/60'>{description}</Text>
       ) : (
-        description
+        content
       )}
       <div
         className={classNames('mt-10 flex justify-between', positiveButton && 'flex-row-reverse')}
       >
-        {positiveButton && (
+        <div className='flex flex-row-reverse gap-4'>
-          <Button
+          {positiveButton && (
-            text={positiveButton.text ?? 'Yes'}
+            <Button
-            color='primary'
+              text={positiveButton.text ?? 'Yes'}
-            className='px-6'
+              color='tertiary'
-            rightIcon={positiveButton.icon ?? <YesIcon />}
+              className='px-6'
-            onClick={() => handleButtonClick(positiveButton)}
+              rightIcon={positiveButton.icon ?? <YesIcon />}
-          />
+              onClick={() => handleButtonClick(positiveButton)}
-        )}
+            />
+          )}
+          {checkbox && (
+            <Checkbox checked={toggle} onChange={handleCheckboxClick} text={checkbox.text} />
+          )}
+        </div>
         <Button
           text={negativeButton?.text ?? 'No'}
           color='secondary'

src/components/Modals/Settings/index.tsx

@@ -12,14 +12,7 @@ import Select from 'components/Select'
 import Text from 'components/Text'
 import { TextLink } from 'components/TextLink'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import {
+import { LocalStorageKeys } from 'constants/localStorageKeys'
-  DISPLAY_CURRENCY_KEY,
-  LEND_ASSETS_KEY,
-  PREFERRED_ASSET_KEY,
-  REDUCE_MOTION_KEY,
-  SLIPPAGE_KEY,
-  TUTORIAL_KEY,
-} from 'constants/localStore'
 import { BN_ZERO } from 'constants/math'
 import useAlertDialog from 'hooks/useAlertDialog'
 import useAutoLend from 'hooks/useAutoLend'
@@ -40,23 +33,29 @@ export default function SettingsModal() {
   const [inputRef, setInputRef] = useState<React.RefObject<HTMLInputElement>>()
   const [isCustom, setIsCustom] = useState(false)
   const [displayCurrency, setDisplayCurrency] = useLocalStorage<string>(
-    DISPLAY_CURRENCY_KEY,
+    LocalStorageKeys.DISPLAY_CURRENCY,
     DEFAULT_SETTINGS.displayCurrency,
   )
   const [preferredAsset, setPreferredAsset] = useLocalStorage<string>(
-    PREFERRED_ASSET_KEY,
+    LocalStorageKeys.PREFERRED_ASSET,
     DEFAULT_SETTINGS.preferredAsset,
   )
   const [reduceMotion, setReduceMotion] = useLocalStorage<boolean>(
-    REDUCE_MOTION_KEY,
+    LocalStorageKeys.REDUCE_MOTION,
     DEFAULT_SETTINGS.reduceMotion,
   )
-  const [tutorial, setTutorial] = useLocalStorage<boolean>(TUTORIAL_KEY, DEFAULT_SETTINGS.tutorial)
+  const [tutorial, setTutorial] = useLocalStorage<boolean>(
+    LocalStorageKeys.TUTORIAL,
+    DEFAULT_SETTINGS.tutorial,
+  )
   const [lendAssets, setLendAssets] = useLocalStorage<boolean>(
-    LEND_ASSETS_KEY,
+    LocalStorageKeys.LEND_ASSETS,
     DEFAULT_SETTINGS.lendAssets,
   )
-  const [slippage, setSlippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage, setSlippage] = useLocalStorage<number>(
+    LocalStorageKeys.SLIPPAGE,
+    DEFAULT_SETTINGS.slippage,
+  )
 
   const displayCurrenciesOptions = useMemo(
     () =>
@@ -195,7 +194,7 @@ export default function SettingsModal() {
         </div>
       ),
       title: 'Are you sure you want to restore to default?',
-      description:
+      content:
         'Once you reset to default settings you can’t revert it, and will result in the permanent loss of your current settings',
       positiveButton: {
         text: 'Yes',

src/components/Modals/Vault/VaultModalContent.tsx

@@ -8,7 +8,7 @@ import VaultDeposit from 'components/Modals/Vault/VaultDeposits'
 import VaultDepositSubTitle from 'components/Modals/Vault/VaultDepositsSubTitle'
 import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
 import useDepositVault from 'hooks/broadcast/useDepositVault'
 import useDisplayAsset from 'hooks/useDisplayAsset'
@@ -36,7 +36,7 @@ export default function VaultModalContent(props: Props) {
 
   const { data: prices } = usePrices()
   const [displayCurrency] = useLocalStorage<string>(
-    DISPLAY_CURRENCY_KEY,
+    LocalStorageKeys.DISPLAY_CURRENCY,
     DEFAULT_SETTINGS.displayCurrency,
   )
   const [isOpen, toggleOpen] = useIsOpenArray(2, false)

src/components/Modals/WithdrawFromVaultsModal.tsx

@@ -6,7 +6,7 @@ import { FormattedNumber } from 'components/FormattedNumber'
 import Modal from 'components/Modal'
 import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAccountId from 'hooks/useAccountId'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
@@ -19,7 +19,7 @@ export default function WithdrawFromVaultsModal() {
   const accountId = useAccountId()
   const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
   const baseCurrency = useStore((s) => s.baseCurrency)
-  const [slippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
 
   function onClose() {
     useStore.setState({ withdrawFromVaultsModal: null })

src/components/Portfolio/Card/index.tsx

@@ -6,7 +6,7 @@ import { FormattedNumber } from 'components/FormattedNumber'
 import Loading from 'components/Loading'
 import Skeleton from 'components/Portfolio/Card/Skeleton'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
 import useAccount from 'hooks/useAccount'
 import useAccountId from 'hooks/useAccountId'
@@ -36,7 +36,10 @@ export default function PortfolioCard(props: Props) {
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
   const { data } = useBorrowMarketAssetsTableData(false)
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const address = useStore((s) => s.address)
 
   const [deposits, lends, debts, vaults] = useMemo(() => {

src/components/TermsOfService.tsx

@@ -5,7 +5,7 @@ import FullOverlayContent from 'components/FullOverlayContent'
 import { Check } from 'components/Icons'
 import Text from 'components/Text'
 import WalletSelect from 'components/Wallet/WalletSelect'
-import { TERMS_OF_SERVICE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 
@@ -36,7 +36,7 @@ function Benefits({ benefits }: BenefitsProps) {
 }
 
 export default function TermsOfService() {
-  const [_, setHasAgreedToTerms] = useLocalStorage(TERMS_OF_SERVICE_KEY, false)
+  const [_, setHasAgreedToTerms] = useLocalStorage(LocalStorageKeys.TERMS_OF_SERVICE, false)
 
   const handleAgreeTermsOfService = useCallback(() => {
     setHasAgreedToTerms(true)

src/components/Toaster/index.tsx

@@ -10,7 +10,7 @@ import Text from 'components/Text'
 import { TextLink } from 'components/TextLink'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { EXPLORER_NAME, EXPLORER_TX_URL } from 'constants/explorer'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useTransactionStore from 'hooks/useTransactionStore'
 import useStore from 'store'
@@ -52,7 +52,10 @@ export function generateToastContent(content: ToastSuccess['content']): ReactNod
 }
 
 export default function Toaster() {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const toast = useStore((s) => s.toast)
   const { addTransaction } = useTransactionStore()
 

src/components/Tooltip/index.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from 'react'
 import { Questionmark } from 'components/Icons'
 import TooltipContent from 'components/Tooltip/TooltipContent'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
@@ -19,7 +19,10 @@ interface Props {
 }
 
 export const Tooltip = (props: Props) => {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
 
   const isInWalletAssetModal = document.getElementById('wallet-assets-modal')
   const isInModal = document.getElementById('modal')

src/components/Trade/TradeModule/AssetSelector/AssetItem.tsx

@@ -3,7 +3,7 @@ import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { StarFilled, StarOutlined } from 'components/Icons'
 import Text from 'components/Text'
-import { FAVORITE_ASSETS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ONE, BN_ZERO, MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -20,7 +20,7 @@ interface Props {
 export default function AssetItem(props: Props) {
   const asset = props.asset
   const [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useLocalStorage<string[]>(
-    FAVORITE_ASSETS_KEY,
+    LocalStorageKeys.FAVORITE_ASSETS,
     [],
   )
   const amount = demagnify(props.balances.find(byDenom(asset.denom))?.amount ?? BN_ZERO, asset)

src/components/Trade/TradeModule/SwapForm/index.tsx

@@ -11,7 +11,7 @@ import OrderTypeSelector from 'components/Trade/TradeModule/SwapForm/OrderTypeSe
 import { AvailableOrderType } from 'components/Trade/TradeModule/SwapForm/OrderTypeSelector/types'
 import TradeSummary from 'components/Trade/TradeModule/SwapForm/TradeSummary'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO, MARGIN_TRADE_BUFFER } from 'constants/math'
 import useAutoLend from 'hooks/useAutoLend'
 import useCurrentAccount from 'hooks/useCurrentAccount'
@@ -38,7 +38,7 @@ export default function SwapForm(props: Props) {
   const useMargin = useStore((s) => s.useMargin)
   const account = useCurrentAccount()
   const swap = useStore((s) => s.swap)
-  const [slippage] = useLocalStorage(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
   const { computeMaxSwapAmount } = useHealthComputer(account)
   const { data: borrowAssets } = useMarketBorrowings()
   const { data: marketAssets } = useMarketAssets()

src/components/Wallet/RecentTransactions.tsx

@@ -7,15 +7,18 @@ import Text from 'components/Text'
 import { TextLink } from 'components/TextLink'
 import { generateToastContent } from 'components/Toaster'
 import { EXPLORER_TX_URL } from 'constants/explorer'
-import { TRANSACTIONS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 
 export default function RecentTransactions() {
   const address = useStore((s) => s.address)
-  const [transactions, setTransactions] = useLocalStorage<ToastStore>(TRANSACTIONS_KEY, {
+  const [transactions, setTransactions] = useLocalStorage<ToastStore>(
-    recent: [],
+    LocalStorageKeys.TRANSACTIONS,
-  })
+    {
+      recent: [],
+    },
+  )
   const recentTransactions = transactions.recent
     .filter((tx) => tx.address === address)
     .sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1))

src/components/Wallet/WalletConnectButton.tsx

@@ -4,7 +4,7 @@ import Button from 'components/Button'
 import { Wallet } from 'components/Icons'
 import TermsOfService from 'components/TermsOfService'
 import WalletSelect from 'components/Wallet/WalletSelect'
-import { TERMS_OF_SERVICE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export default function WalletConnectButton(props: Props) {
-  const [hasAgreedToTerms] = useLocalStorage(TERMS_OF_SERVICE_KEY, false)
+  const [hasAgreedToTerms] = useLocalStorage(LocalStorageKeys.TERMS_OF_SERVICE, false)
 
   const handleClick = useCallback(() => {
     const component = hasAgreedToTerms ? <WalletSelect /> : <TermsOfService />

src/constants/localStorageKeys.ts

@@ -0,0 +1,14 @@
+export enum LocalStorageKeys {
+  PREFERRED_ASSET = 'favouriteAsset',
+  DISPLAY_CURRENCY = 'displayCurrency',
+  REDUCE_MOTION = 'reduceMotion',
+  FAVORITE_ASSETS = 'favoriteAssets',
+  LEND_ASSETS = 'lendAssets',
+  AUTO_LEND_ENABLED_ACCOUNT_IDS = 'autoLendEnabledAccountIds',
+  SLIPPAGE = 'slippage',
+  TERMS_OF_SERVICE = 'termsOfService',
+  TUTORIAL = 'tutorial',
+  TRANSACTIONS = 'transactions',
+  MIGRATION_BANNER = 'migrationBanner',
+  HLS_INFORMATION = 'hlsInformation',
+}

src/constants/localStore.ts

@@ -1,11 +0,0 @@
-export const PREFERRED_ASSET_KEY = 'favouriteAsset'
-export const DISPLAY_CURRENCY_KEY = 'displayCurrency'
-export const REDUCE_MOTION_KEY = 'reduceMotion'
-export const FAVORITE_ASSETS_KEY = 'favoriteAssets'
-export const LEND_ASSETS_KEY = 'lendAssets'
-export const AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY = 'autoLendEnabledAccountIds'
-export const SLIPPAGE_KEY = 'slippage'
-export const TERMS_OF_SERVICE_KEY = 'termsOfService'
-export const TUTORIAL_KEY = 'tutorial'
-export const TRANSACTIONS_KEY = 'transactions'
-export const MIGRATION_BANNER_KEY = 'migrationBanner'

src/hooks/broadcast/useDepositVault.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAutoLend from 'hooks/useAutoLend'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
@@ -26,7 +26,7 @@ export default function useDepositVault(props: Props): {
   totalValue: BigNumber
 } {
   const { data: prices } = usePrices()
-  const [slippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
   const { isAutoLendEnabledForCurrentAccount: isAutoLend } = useAutoLend()
   const borrowings: BNCoin[] = useMemo(
     () => props.borrowings.filter((borrowing) => borrowing.amount.gt(0)),

src/hooks/useAssets.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { ASSETS } from 'constants/assets'
-import { FAVORITE_ASSETS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
-import { getEnabledMarketAssets } from 'utils/assets'
 import useLocalStorage from 'hooks/useLocalStorage'
+import { getEnabledMarketAssets } from 'utils/assets'
 
 export default function useAssets() {
   const [assets, setAssets] = useState<Asset[]>(ASSETS)
-  const [favoriteAssetsDenoms] = useLocalStorage<string[]>(FAVORITE_ASSETS_KEY, [])
+  const [favoriteAssetsDenoms] = useLocalStorage<string[]>(LocalStorageKeys.FAVORITE_ASSETS, [])
 
   const getFavoriteAssets = useCallback(() => {
     const assets = getEnabledMarketAssets()

src/hooks/useAutoLend.ts

@@ -1,4 +1,4 @@
-import { AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
@@ -13,7 +13,7 @@ export default function useAutoLend(): {
   const accounts = useStore((s) => s.accounts)
   const currentAccount = useCurrentAccount()
   const [autoLendEnabledAccountIds, setAutoLendEnabledAccountIds] = useLocalStorage<string[]>(
-    AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY,
+    LocalStorageKeys.AUTO_LEND_ENABLED_ACCOUNT_IDS,
     [],
   )
 

src/hooks/useDisplayAsset.tsx

@@ -1,12 +1,12 @@
 import { ASSETS } from 'constants/assets'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 import { byDenom } from 'utils/array'
 
 export default function useDisplayAsset() {
   const [displayCurrency] = useLocalStorage<string>(
-    DISPLAY_CURRENCY_KEY,
+    LocalStorageKeys.DISPLAY_CURRENCY,
     DEFAULT_SETTINGS.displayCurrency,
   )
 

src/hooks/useDisplayCurrencyPrice.ts

@@ -1,20 +1,19 @@
 import { useCallback, useMemo } from 'react'
 
-import { ASSETS } from 'constants/assets'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import { BN_ZERO } from 'constants/math'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
 import { byDenom } from 'utils/array'
 import { getDisplayCurrencies } from 'utils/assets'
 import { BN } from 'utils/helpers'
-import { BN_ZERO } from 'constants/math'
 
 function useDisplayCurrencyPrice() {
   const { data: prices } = usePrices()
   const displayCurrencies = getDisplayCurrencies()
   const [displayCurrency] = useLocalStorage<string>(
-    DISPLAY_CURRENCY_KEY,
+    LocalStorageKeys.DISPLAY_CURRENCY,
     DEFAULT_SETTINGS.displayCurrency,
   )
 

src/hooks/useTransactionStore.ts

@@ -1,13 +1,16 @@
-import { TRANSACTIONS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
 export default function useTransactionStore(): {
   transactions: ToastStore
   addTransaction: (transaction: ToastSuccess) => void
 } {
-  const [transactions, setTransactions] = useLocalStorage<ToastStore>(TRANSACTIONS_KEY, {
+  const [transactions, setTransactions] = useLocalStorage<ToastStore>(
-    recent: [],
+    LocalStorageKeys.TRANSACTIONS,
-  })
+    {
+      recent: [],
+    },
+  )
   const recentTransactions = transactions.recent
   const addTransaction = (transaction: ToastSuccess) => {
     recentTransactions.push(transaction)

src/hooks/useUpdatedAccount/index.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
 import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
@@ -29,7 +29,7 @@ export function useUpdatedAccount(account?: Account) {
   const [updatedAccount, setUpdatedAccount] = useState<Account | undefined>(
     account ? cloneAccount(account) : undefined,
   )
-  const [slippage] = useLocalStorage<number>(SLIPPAGE_KEY, DEFAULT_SETTINGS.slippage)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
   const [addedDeposits, addDeposits] = useState<BNCoin[]>([])
   const [removedDeposits, removeDeposits] = useState<BNCoin[]>([])
   const [addedDebts, addDebts] = useState<BNCoin[]>([])

src/pages/_layout.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
+import { Suspense } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useLocation } from 'react-router-dom'
-import { Suspense } from 'react'
 
 import AccountDetails from 'components/Account/AccountDetails'
 import Background from 'components/Background'
@@ -11,7 +11,7 @@ import ModalsContainer from 'components/Modals/ModalsContainer'
 import PageMetadata from 'components/PageMetadata'
 import Toaster from 'components/Toaster'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAccountId from 'hooks/useAccountId'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
@@ -42,7 +42,10 @@ function PageContainer(props: Props) {
 export default function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation()
   const focusComponent = useStore((s) => s.focusComponent)
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [reduceMotion] = useLocalStorage<boolean>(
+    LocalStorageKeys.REDUCE_MOTION,
+    DEFAULT_SETTINGS.reduceMotion,
+  )
   const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded)
   const isFullWidth = location.pathname.includes('trade') || location.pathname === '/'
   const accountId = useAccountId()

src/store/slices/modal.ts

@@ -2,12 +2,14 @@ import { GetState, SetState } from 'zustand'
 
 export default function createModalSlice(set: SetState<ModalSlice>, get: GetState<ModalSlice>) {
   return {
-    addVaultBorrowingsModal: null,
     accountDeleteModal: null,
+    addVaultBorrowingsModal: null,
     alertDialog: null,
+    assetOverlayState: 'closed' as OverlayState,
     borrowModal: null,
     fundAndWithdrawModal: null,
     getStartedModal: false,
+    hlsInformationModal: null,
     lendAndReclaimModal: null,
     resetStettingsModal: false,
     settingsModal: false,
@@ -15,6 +17,5 @@ export default function createModalSlice(set: SetState<ModalSlice>, get: GetStat
     vaultModal: null,
     walletAssetsModal: null,
     withdrawFromVaultsModal: null,
-    assetOverlayState: 'closed' as OverlayState,
   }
 }

src/types/interfaces/store/modals.d.ts

@@ -2,16 +2,17 @@ interface ModalSlice {
   accountDeleteModal: Account | null
   addVaultBorrowingsModal: AddVaultBorrowingsModal | null
   alertDialog: AlertDialogConfig | null
+  assetOverlayState: OverlayState
   borrowModal: BorrowModal | null
   fundAndWithdrawModal: 'fund' | 'withdraw' | null
   getStartedModal: boolean
+  hlsInformationModal: boolean | null
   lendAndReclaimModal: LendAndReclaimModalConfig | null
   settingsModal: boolean
   unlockModal: UnlockModal | null
   vaultModal: VaultModal | null
   walletAssetsModal: WalletAssetModal | null
   withdrawFromVaultsModal: DepositedVault[] | null
-  assetOverlayState: OverlayState
 }
 
 interface AlertDialogButton {
@@ -23,10 +24,14 @@ interface AlertDialogButton {
 
 interface AlertDialogConfig {
   icon?: JSX.Element
-  title: JSX.Element | string
+  checkbox?: {
-  description: JSX.Element | string
+    text: string
+    onClick: (isChecked: boolean) => void
+  }
+  content: JSX.Element | string
   negativeButton?: AlertDialogButton
   positiveButton?: AlertDialogButton
+  title: string
 }
 
 interface BorrowModal {

src/utils/checkAutoLendEnabled.ts

@@ -1,7 +1,7 @@
-import { AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY } from 'constants/localStore'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 
 export default function checkAutoLendEnabled(accountId: string) {
-  const storageItem = localStorage.getItem(AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY)
+  const storageItem = localStorage.getItem(LocalStorageKeys.AUTO_LEND_ENABLED_ACCOUNT_IDS)
   const autoLendEnabledAccountIds: string[] = storageItem ? JSON.parse(storageItem) : []
 
   return autoLendEnabledAccountIds.includes(accountId)