✨ HLS: Add info modal (#573)
This commit is contained in:
parent
a630cf07ff
commit
bcd840150d
@ -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')
|
||||
|
@ -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)
|
||||
|
@ -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[]>([])
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 (
|
||||
|
@ -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'>
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
onClick={() => props.onChange(props.checked)}
|
||||
role='checkbox'
|
||||
aria-checked={props.checked}
|
||||
className={classNames(
|
||||
'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',
|
||||
<label className='flex gap-2 items-center cursor-pointer'>
|
||||
<input
|
||||
onChange={() => props.onChange(props.checked)}
|
||||
checked={props.checked}
|
||||
type='checkbox'
|
||||
className='opacity-0 absolute'
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'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>
|
||||
)}
|
||||
>
|
||||
{props.checked && <Check />}
|
||||
</button>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
@ -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)
|
||||
|
@ -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()
|
||||
|
@ -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({
|
||||
|
@ -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
|
||||
|
@ -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(),
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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.
|
||||
</>
|
||||
|
@ -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.',
|
||||
},
|
||||
]
|
||||
|
@ -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),
|
||||
|
@ -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,
|
||||
)
|
||||
|
||||
|
@ -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: (
|
||||
<div className='flex w-full h-full p-3'>
|
||||
<InfoCircle />
|
||||
</div>
|
||||
),
|
||||
icon: <InfoCircle />,
|
||||
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
|
||||
}
|
||||
|
@ -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.
|
||||
|
@ -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'>
|
||||
{icon ?? <ExclamationMarkCircled width={18} />}
|
||||
<div className='flex flex-col'>
|
||||
{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 description === 'string' ? (
|
||||
<Text className='mt-2 text-white/60'>{description}</Text>
|
||||
{typeof content === 'string' ? (
|
||||
<Text className='mt-2 text-white/60'>{content}</Text>
|
||||
) : (
|
||||
description
|
||||
content
|
||||
)}
|
||||
<div
|
||||
className={classNames('mt-10 flex justify-between', positiveButton && 'flex-row-reverse')}
|
||||
>
|
||||
{positiveButton && (
|
||||
<Button
|
||||
text={positiveButton.text ?? 'Yes'}
|
||||
color='primary'
|
||||
className='px-6'
|
||||
rightIcon={positiveButton.icon ?? <YesIcon />}
|
||||
onClick={() => handleButtonClick(positiveButton)}
|
||||
/>
|
||||
)}
|
||||
<div className='flex flex-row-reverse gap-4'>
|
||||
{positiveButton && (
|
||||
<Button
|
||||
text={positiveButton.text ?? 'Yes'}
|
||||
color='tertiary'
|
||||
className='px-6'
|
||||
rightIcon={positiveButton.icon ?? <YesIcon />}
|
||||
onClick={() => handleButtonClick(positiveButton)}
|
||||
/>
|
||||
)}
|
||||
{checkbox && (
|
||||
<Checkbox checked={toggle} onChange={handleCheckboxClick} text={checkbox.text} />
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
text={negativeButton?.text ?? 'No'}
|
||||
color='secondary'
|
||||
|
@ -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 {
|
||||
DISPLAY_CURRENCY_KEY,
|
||||
LEND_ASSETS_KEY,
|
||||
PREFERRED_ASSET_KEY,
|
||||
REDUCE_MOTION_KEY,
|
||||
SLIPPAGE_KEY,
|
||||
TUTORIAL_KEY,
|
||||
} from 'constants/localStore'
|
||||
import { LocalStorageKeys } from 'constants/localStorageKeys'
|
||||
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',
|
||||
|
@ -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)
|
||||
|
@ -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 })
|
||||
|
@ -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(() => {
|
||||
|
@ -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)
|
||||
|
@ -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()
|
||||
|
||||
|
@ -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')
|
||||
|
@ -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)
|
||||
|
@ -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()
|
||||
|
@ -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, {
|
||||
recent: [],
|
||||
})
|
||||
const [transactions, setTransactions] = useLocalStorage<ToastStore>(
|
||||
LocalStorageKeys.TRANSACTIONS,
|
||||
{
|
||||
recent: [],
|
||||
},
|
||||
)
|
||||
const recentTransactions = transactions.recent
|
||||
.filter((tx) => tx.address === address)
|
||||
.sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1))
|
||||
|
@ -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 />
|
||||
|
14
src/constants/localStorageKeys.ts
Normal file
14
src/constants/localStorageKeys.ts
Normal file
@ -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',
|
||||
}
|
@ -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'
|
@ -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)),
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
import { ASSETS } from 'constants/assets'
|
||||
import { FAVORITE_ASSETS_KEY } from 'constants/localStore'
|
||||
import { getEnabledMarketAssets } from 'utils/assets'
|
||||
import { LocalStorageKeys } from 'constants/localStorageKeys'
|
||||
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()
|
||||
|
@ -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,
|
||||
[],
|
||||
)
|
||||
|
||||
|
@ -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,
|
||||
)
|
||||
|
||||
|
@ -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,
|
||||
)
|
||||
|
||||
|
@ -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, {
|
||||
recent: [],
|
||||
})
|
||||
const [transactions, setTransactions] = useLocalStorage<ToastStore>(
|
||||
LocalStorageKeys.TRANSACTIONS,
|
||||
{
|
||||
recent: [],
|
||||
},
|
||||
)
|
||||
const recentTransactions = transactions.recent
|
||||
const addTransaction = (transaction: ToastSuccess) => {
|
||||
recentTransactions.push(transaction)
|
||||
|
@ -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[]>([])
|
||||
|
@ -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()
|
||||
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
11
src/types/interfaces/store/modals.d.ts
vendored
11
src/types/interfaces/store/modals.d.ts
vendored
@ -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
|
||||
description: JSX.Element | string
|
||||
checkbox?: {
|
||||
text: string
|
||||
onClick: (isChecked: boolean) => void
|
||||
}
|
||||
content: JSX.Element | string
|
||||
negativeButton?: AlertDialogButton
|
||||
positiveButton?: AlertDialogButton
|
||||
title: string
|
||||
}
|
||||
|
||||
interface BorrowModal {
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user