blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add setting for number scroll

This commit is contained in:
saml33 2022-11-24 13:30:20 +11:00
parent 147b3c77bd
commit c355c3c13a
11 changed files with 165 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/account/AccountPage.tsx
View File

@ -30,11 +30,12 @@ import AccountChart from './AccountChart'
import useMangoAccount from '../../hooks/useMangoAccount'
import Change from '../shared/Change'
import Tooltip from '@components/shared/Tooltip'
import { IS_ONBOARDED_KEY } from 'utils/constants'
import { ANIMATION_SETTINGS_KEY, IS_ONBOARDED_KEY } from 'utils/constants'
import { useWallet } from '@solana/wallet-adapter-react'
import useLocalStorageState from 'hooks/useLocalStorageState'
import AccountOnboardingTour from '@components/tours/AccountOnboardingTour'
import dayjs from 'dayjs'
import { INITIAL_ANIMATION_SETTINGS } from 'pages/settings'
export async function getStaticProps({ locale }: { locale: string }) {
return {
@ -75,6 +76,10 @@ const AccountPage = () => {
const { theme } = useTheme()
const tourSettings = mangoStore((s) => s.settings.tours)
const [isOnBoarded] = useLocalStorageState(IS_ONBOARDED_KEY)
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
)
const leverage = useMemo(() => {
if (!group || !mangoAccount) return 0
@ -230,24 +235,28 @@ const AccountPage = () => {
</p>
</Tooltip>
<div className="mb-2 flex items-center text-5xl font-bold text-th-fgd-1">
{group && mangoAccount ? (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(accountValue, true)}
/>
{animationSettings['number-scroll'] ? (
group && mangoAccount ? (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(accountValue, true)}
/>
) : (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={'$0.00'}
/>
)
) : (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={'$0.00'}
/>
<span>{formatFixedDecimals(accountValue, true)}</span>
)}
</div>
<div className="flex items-center space-x-1.5">

52
components/shared/DetailedAreaChart.tsx
View File

@ -21,6 +21,10 @@ import { ArrowLeftIcon } from '@heroicons/react/20/solid'
import { FadeInFadeOut } from './Transitions'
import ChartRangeButtons from './ChartRangeButtons'
import Change from './Change'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { INITIAL_ANIMATION_SETTINGS } from 'pages/settings'
import { formatFixedDecimals } from 'utils/numbers'
dayjs.extend(relativeTime)
@ -59,6 +63,10 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
}) => {
const [mouseData, setMouseData] = useState<any>(null)
const { theme } = useTheme()
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
)
const handleMouseMove = (coords: any) => {
if (coords.activePayload) {
@ -105,13 +113,18 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
{mouseData ? (
<div>
<div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
$
<FlipNumbers
height={40}
width={26}
play
numbers={mouseData[yKey].toFixed(2)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={40}
width={26}
play
numbers={formatFixedDecimals(mouseData[yKey], true)}
/>
) : (
<span>
{formatFixedDecimals(mouseData[yKey], true)}
</span>
)}
{!hideChange ? (
<span className="ml-3">
<Change
@ -128,13 +141,24 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
) : (
<div>
<div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
$
<FlipNumbers
height={40}
width={26}
play
numbers={data[data.length - 1][yKey].toFixed(2)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={40}
width={26}
play
numbers={formatFixedDecimals(
data[data.length - 1][yKey],
true
)}
/>
) : (
<span>
{formatFixedDecimals(
data[data.length - 1][yKey],
true
)}
</span>
)}
{!hideChange ? (
<span className="ml-3">
<Change

53
components/stats/TokenStats.tsx
View File

@ -20,6 +20,9 @@ import { useRouter } from 'next/router'
import useJupiterMints from 'hooks/useJupiterMints'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { INITIAL_ANIMATION_SETTINGS } from 'pages/settings'
const TokenStats = () => {
const { t } = useTranslation(['common', 'token'])
@ -29,6 +32,10 @@ const TokenStats = () => {
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const router = useRouter()
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
)
const banks = useMemo(() => {
if (group) {
@ -67,35 +74,43 @@ const TokenStats = () => {
return (
<ContentBox hideBorder hidePadding>
<div className="grid grid-cols-2 gap-x-6 border-b border-th-bkg-3 text-[40px]">
<div className="grid grid-cols-2 gap-x-6 border-b border-th-bkg-3 text-5xl">
<div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-t-0 ">
<p className="mb-2.5 text-base leading-none">
<p className="mb-2 text-base leading-none">
{t('total-deposit-value')}
</p>
<div className="flex items-center font-bold">
<FlipNumbers
height={40}
width={24}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(totalDepositValue || 0.0, true)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(totalDepositValue || 0.0, true)}
/>
) : (
<p>{formatFixedDecimals(totalDepositValue || 0.0, true)}</p>
)}
</div>
</div>
<div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
<p className="mb-2.5 text-base leading-none">
<p className="mb-2 text-base leading-none">
{t('total-borrow-value')}
</p>
<div className="flex items-center font-bold">
<FlipNumbers
height={40}
width={24}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(totalBorrowValue || 0.0, true)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(totalBorrowValue || 0.0, true)}
/>
) : (
<span>{formatFixedDecimals(totalBorrowValue || 0.0, true)}</span>
)}
</div>
</div>
</div>

49
components/swap/SwapTokenChart.tsx
View File

@ -26,6 +26,9 @@ import { useQuery } from '@tanstack/react-query'
import { fetchChartData } from 'apis/coingecko'
import mangoStore from '@store/mangoStore'
import useJupiterSwapData from './useJupiterSwapData'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { INITIAL_ANIMATION_SETTINGS } from 'pages/settings'
dayjs.extend(relativeTime)
@ -75,6 +78,10 @@ const SwapTokenChart = () => {
const [mouseData, setMouseData] = useState<any>(null)
const [daysToShow, setDaysToShow] = useState(1)
const { theme } = useTheme()
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
)
const chartDataQuery = useQuery(
['chart-data', baseTokenId, quoteTokenId, daysToShow],
@ -178,13 +185,17 @@ const SwapTokenChart = () => {
) : null}
{mouseData ? (
<>
<div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
<FlipNumbers
height={48}
width={32}
play
numbers={formatFixedDecimals(mouseData['price'])}
/>
<div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
play
numbers={formatFixedDecimals(mouseData['price'])}
/>
) : (
<span>{formatFixedDecimals(mouseData['price'])}</span>
)}
<span
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
>
@ -198,14 +209,22 @@ const SwapTokenChart = () => {
) : (
<>
<div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
<FlipNumbers
height={48}
width={32}
play
numbers={formatFixedDecimals(
chartData[chartData.length - 1]['price']
)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
play
numbers={formatFixedDecimals(
chartData[chartData.length - 1]['price']
)}
/>
) : (
<span>
{formatFixedDecimals(
chartData[chartData.length - 1]['price']
)}
</span>
)}
<span
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
>

12
pages/settings.tsx
View File

@ -63,6 +63,7 @@ const NOTIFICATION_POSITIONS = [
]
export const INITIAL_ANIMATION_SETTINGS = {
'number-scroll': false,
'orderbook-flash': false,
'swap-success': false,
}
@ -154,7 +155,6 @@ const Settings: NextPage = () => {
activeValue={theme}
onChange={(t) => setTheme(t)}
values={themes}
// large={!isMobile}
/>
</div>
</div>
@ -166,7 +166,6 @@ const Settings: NextPage = () => {
onChange={(l) => handleLangChange(l)}
values={LANGS.map((val) => val.locale)}
names={LANGS.map((val) => t(`settings:${val.name}`))}
// large={!isMobile}
/>
</div>
</div>
@ -182,7 +181,6 @@ const Settings: NextPage = () => {
names={NOTIFICATION_POSITIONS.map((val) =>
t(`settings:${val}`)
)}
// large={!isMobile}
/>
</div>
</div>
@ -195,7 +193,6 @@ const Settings: NextPage = () => {
activeValue={tradeFormUi}
onChange={(v) => setTradeFormUi(v)}
values={[t('settings:slider'), t('settings:buttons')]}
// large={!isMobile}
/>
</div>
</div>
@ -208,6 +205,13 @@ const Settings: NextPage = () => {
onChange={() => handleToggleAnimationSetting('all')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:number-scroll')}</p>
<Switch
checked={animationSettings['number-scroll']}
onChange={() => handleToggleAnimationSetting('number-scroll')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:orderbook-flash')}</p>
<Switch

28
pages/token/[token].tsx
View File

@ -29,6 +29,9 @@ import useMangoAccount from 'hooks/useMangoAccount'
import useMangoGroup from 'hooks/useMangoGroup'
import useJupiterMints from 'hooks/useJupiterMints'
import { useCoingecko } from 'hooks/useCoingecko'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { INITIAL_ANIMATION_SETTINGS } from 'pages/settings'
const PriceChart = dynamic(() => import('@components/token/PriceChart'), {
ssr: false,
})
@ -84,6 +87,10 @@ const Token: NextPage = () => {
const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)
const [loadChartData, setLoadChartData] = useState(true)
const [daysToShow, setDaysToShow] = useState<number>(1)
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
INITIAL_ANIMATION_SETTINGS
)
const bank = useMemo(() => {
if (group && token) {
@ -224,15 +231,18 @@ const Token: NextPage = () => {
)}
</div>
<div className="flex items-end space-x-3 text-5xl font-bold text-th-fgd-1">
$
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatDecimal(bank.uiPrice, 2)}
/>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
play
delay={0.05}
duration={1}
numbers={formatFixedDecimals(bank.uiPrice, true)}
/>
) : (
<span>{formatFixedDecimals(bank.uiPrice, true)}</span>
)}
{coingeckoData ? (
<Change change={price_change_percentage_24h} />
) : null}

1
public/locales/en/settings.json
View File

@ -12,6 +12,7 @@
"light": "Light",
"mango": "Mango",
"notification-position": "Notification Position",
"number-scroll": "Number Scroll",
"orderbook-flash": "Orderbook Flash",
"preferred-explorer": "Preferred Explorer",
"russian": "Русский",

1
public/locales/es/settings.json
View File

@ -12,6 +12,7 @@
"light": "Light",
"mango": "Mango",
"notification-position": "Notification Position",
"number-scroll": "Number Scroll",
"orderbook-flash": "Orderbook Flash",
"preferred-explorer": "Preferred Explorer",
"russian": "Русский",

1
public/locales/ru/settings.json
View File

@ -12,6 +12,7 @@
"light": "Light",
"mango": "Mango",
"notification-position": "Notification Position",
"number-scroll": "Number Scroll",
"orderbook-flash": "Orderbook Flash",
"preferred-explorer": "Preferred Explorer",
"russian": "Русский",

1
public/locales/zh/settings.json
View File

@ -12,6 +12,7 @@
"light": "Light",
"mango": "Mango",
"notification-position": "Notification Position",
"number-scroll": "Number Scroll",
"orderbook-flash": "Orderbook Flash",
"preferred-explorer": "Preferred Explorer",
"russian": "Русский",

1
public/locales/zh_tw/settings.json
View File

@ -12,6 +12,7 @@
"light": "Light",
"mango": "Mango",
"notification-position": "Notification Position",
"number-scroll": "Number Scroll",
"orderbook-flash": "Orderbook Flash",
"preferred-explorer": "Preferred Explorer",
"russian": "Русский",