cd5ec3ee3b
* tidy: refactor text
* tidy: refactor text
* fix display of vaults table
* feat: added unstyled select
* tidy: useToggle
* tidy: useToggle
* add vaults to types
* MP-2344: first unstyled version of Select
* fix: fixed the build
* MP-2344: progress on the Select
* MP-2344: almost finished the Select
* implement basic vault modal (no logic)
* 🍱 max + displaycur for token input
* Convert to BN for TokenInputs
* env: update wallet-connector
* fix: fixed build errors and relative imports
* fix: updated TokenInput
* tidy: format
* fix: BN instead of new BigNumber
---------
Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from 'components/Button'
|
|
import { Gear } from 'components/Icons'
|
|
import Overlay from 'components/Overlay/Overlay'
|
|
import Switch from 'components/Switch'
|
|
import Text from 'components/Text'
|
|
import { Tooltip } from 'components/Tooltip'
|
|
import { ASSETS } from 'constants/assets'
|
|
import { DISPLAY_CURRENCY_KEY, ENABLE_ANIMATIONS_KEY } from 'constants/localStore'
|
|
import { useAnimations } from 'hooks/useAnimations'
|
|
import useToggle from 'hooks/useToggle'
|
|
import useStore from 'store'
|
|
import { getDisplayCurrencies } from 'utils/assets'
|
|
|
|
export default function Settings() {
|
|
useAnimations()
|
|
|
|
const [showMenu, setShowMenu] = useToggle()
|
|
const enableAnimations = useStore((s) => s.enableAnimations)
|
|
const displayCurrency = useStore((s) => s.displayCurrency)
|
|
const displayCurrencies = getDisplayCurrencies()
|
|
|
|
const storageDisplayCurrency = localStorage.getItem(DISPLAY_CURRENCY_KEY)
|
|
if (storageDisplayCurrency) {
|
|
const storedDisplayCurrency = ASSETS.find(
|
|
(asset) => asset.symbol === JSON.parse(storageDisplayCurrency).symbol,
|
|
)
|
|
if (storedDisplayCurrency && storedDisplayCurrency !== displayCurrency) {
|
|
setDisplayCurrency(storedDisplayCurrency)
|
|
}
|
|
}
|
|
|
|
function handleReduceMotion() {
|
|
useStore.setState({ enableAnimations: !enableAnimations })
|
|
if (typeof window !== 'undefined')
|
|
window.localStorage.setItem(ENABLE_ANIMATIONS_KEY, enableAnimations ? 'false' : 'true')
|
|
}
|
|
|
|
function handleCurrencyChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
|
const displayCurrency = displayCurrencies.find((c) => c.symbol === e.target.value)
|
|
if (!displayCurrency) return
|
|
|
|
setDisplayCurrency(displayCurrency)
|
|
}
|
|
|
|
function setDisplayCurrency(displayCurrency: Asset) {
|
|
useStore.setState({ displayCurrency: displayCurrency })
|
|
localStorage.setItem(DISPLAY_CURRENCY_KEY, JSON.stringify(displayCurrency))
|
|
}
|
|
|
|
return (
|
|
<div className='relative'>
|
|
<Button
|
|
variant='solid'
|
|
color='tertiary'
|
|
leftIcon={<Gear />}
|
|
onClick={() => setShowMenu(!showMenu)}
|
|
hasFocus={showMenu}
|
|
/>
|
|
<Overlay className='right-0 mt-2 w-[240px]' show={showMenu} setShow={setShowMenu}>
|
|
<div className='flex w-full flex-wrap p-4'>
|
|
<Text size='sm' uppercase={true} className='w-full pb-4'>
|
|
Settings
|
|
</Text>
|
|
<div className='flex w-full'>
|
|
<div className='flex flex-1'>
|
|
<Text size='sm' className='mr-2'>
|
|
Reduce Motion
|
|
</Text>
|
|
<Tooltip
|
|
content={
|
|
<Text size='sm'>
|
|
Turns off all animations inside the dApp. Turning animations off can increase
|
|
the overall performance on lower-end hardware.
|
|
</Text>
|
|
}
|
|
/>
|
|
</div>
|
|
<Switch name='reduceMotion' checked={!enableAnimations} onChange={handleReduceMotion} />
|
|
</div>
|
|
<div className='mt-4 flex w-full flex-col'>
|
|
<div className='flex'>
|
|
<Text size='sm' className='mr-2'>
|
|
Display Currency
|
|
</Text>
|
|
<Tooltip
|
|
content={
|
|
<Text size='sm'>
|
|
Sets the denomination of values to a different currency. While OSMO is the
|
|
currency the TWAP oracles return. All other values are fetched from liquidity
|
|
pools.
|
|
</Text>
|
|
}
|
|
/>
|
|
</div>
|
|
<select
|
|
value={displayCurrency.symbol}
|
|
onChange={handleCurrencyChange}
|
|
className='mt-2 w-full rounded-sm border border-white/20 bg-transparent p-1 text-sm'
|
|
>
|
|
{displayCurrencies.map((currency) => (
|
|
<option key={currency.denom}>{currency.symbol}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</Overlay>
|
|
</div>
|
|
)
|
|
}
|