Merge pull request #17 from blockworks-foundation/activity-feed
Activity feed
This commit is contained in:
tjshipe
GitHub
commit
df95e53083
|
|
@ -33,7 +33,10 @@ const MangoAccountsList = ({
|
|||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
if (!group) return
|
||||
|
||||
set((s) => {
|
||||
s.activityFeed.feed = []
|
||||
s.activityFeed.loading = true
|
||||
})
|
||||
try {
|
||||
const reloadedMangoAccount = await retryFn(() =>
|
||||
acc.reload(client, group)
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ const AccountPage = () => {
|
|||
const pubKey = mangoAccount.publicKey.toString()
|
||||
actions.fetchAccountPerformance(pubKey, 1)
|
||||
actions.fetchAccountInterestTotals(pubKey)
|
||||
actions.fetchActivityFeed(pubKey)
|
||||
}
|
||||
}, [actions, mangoAccount])
|
||||
|
||||
|
|
|
|||
|
|
@ -3,15 +3,14 @@ import mangoStore from '@store/mangoStore'
|
|||
import TabButtons from '../shared/TabButtons'
|
||||
import TokenList from '../TokenList'
|
||||
import SwapHistoryTable from '../swap/SwapHistoryTable'
|
||||
import ActivityFeed from './ActivityFeed'
|
||||
|
||||
const TABS = ['balances', 'swap:swap-history']
|
||||
const TABS = ['balances', 'activity:activity', 'swap:swap-history']
|
||||
|
||||
const AccountTabs = () => {
|
||||
const [activeTab, setActiveTab] = useState('balances')
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const tradeHistory = mangoStore((s) => s.mangoAccount.stats.tradeHistory.data)
|
||||
const loading = mangoStore((s) => s.mangoAccount.stats.tradeHistory.loading)
|
||||
|
||||
const tabsWithCount: [string, number][] = useMemo(() => {
|
||||
return TABS.map((t) => [t, 0])
|
||||
|
|
@ -19,7 +18,7 @@ const AccountTabs = () => {
|
|||
|
||||
useEffect(() => {
|
||||
if (mangoAccount) {
|
||||
actions.fetchTradeHistory(mangoAccount.publicKey.toString())
|
||||
actions.fetchSwapHistory(mangoAccount.publicKey.toString())
|
||||
}
|
||||
}, [actions, mangoAccount])
|
||||
|
||||
|
|
@ -31,13 +30,24 @@ const AccountTabs = () => {
|
|||
values={tabsWithCount}
|
||||
showBorders
|
||||
/>
|
||||
{activeTab === 'balances' ? (
|
||||
<TokenList />
|
||||
) : (
|
||||
<SwapHistoryTable tradeHistory={tradeHistory} loading={loading} />
|
||||
)}
|
||||
<TabContent activeTab={activeTab} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const TabContent = ({ activeTab }: { activeTab: string }) => {
|
||||
const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
|
||||
const loading = mangoStore((s) => s.mangoAccount.stats.swapHistory.loading)
|
||||
switch (activeTab) {
|
||||
case 'balances':
|
||||
return <TokenList />
|
||||
case 'activity:activity':
|
||||
return <ActivityFeed />
|
||||
case 'swap:swap-history':
|
||||
return <SwapHistoryTable swapHistory={swapHistory} loading={loading} />
|
||||
default:
|
||||
return <TokenList />
|
||||
}
|
||||
}
|
||||
|
||||
export default AccountTabs
|
||||
|
|
|
|||
|
|
@ -0,0 +1,580 @@
|
|||
import Checkbox from '@components/forms/Checkbox'
|
||||
import MangoDateRangePicker from '@components/forms/DateRangePicker'
|
||||
import Input from '@components/forms/Input'
|
||||
import Label from '@components/forms/Label'
|
||||
import MultiSelectDropdown from '@components/forms/MultiSelectDropdown'
|
||||
import Button, { IconButton, LinkButton } from '@components/shared/Button'
|
||||
import Modal from '@components/shared/Modal'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowPathIcon,
|
||||
ChevronDownIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
|
||||
import dayjs from 'dayjs'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { EXPLORERS } from 'pages/settings'
|
||||
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import ActivityFeedTable from './ActivityFeedTable'
|
||||
|
||||
interface Filters {
|
||||
deposit: boolean
|
||||
liquidate_token_with_token: boolean
|
||||
withdraw: boolean
|
||||
}
|
||||
|
||||
interface AdvancedFilters {
|
||||
symbol: string[]
|
||||
'start-date': string
|
||||
'end-date': string
|
||||
'usd-lower': string
|
||||
'usd-upper': string
|
||||
}
|
||||
|
||||
const DEFAULT_FILTERS = {
|
||||
deposit: true,
|
||||
liquidate_token_with_token: true,
|
||||
withdraw: true,
|
||||
}
|
||||
|
||||
const DEFAULT_ADVANCED_FILTERS = {
|
||||
symbol: [],
|
||||
'start-date': '',
|
||||
'end-date': '',
|
||||
'usd-lower': '',
|
||||
'usd-upper': '',
|
||||
}
|
||||
|
||||
const DEFAULT_PARAMS = ['deposit', 'liquidate_token_with_token', 'withdraw']
|
||||
|
||||
const ActivityFeed = () => {
|
||||
const activityFeed = mangoStore((s) => s.activityFeed.feed)
|
||||
const [showActivityDetail, setShowActivityDetail] = useState(null)
|
||||
const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS)
|
||||
const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>(
|
||||
DEFAULT_ADVANCED_FILTERS
|
||||
)
|
||||
const [params, setParams] = useState<string[]>(DEFAULT_PARAMS)
|
||||
|
||||
const handleShowActivityDetails = (activity: any) => {
|
||||
setShowActivityDetail(activity)
|
||||
}
|
||||
|
||||
const updateFilters = (e: ChangeEvent<HTMLInputElement>, filter: string) => {
|
||||
setFilters({ ...filters, [filter]: e.target.checked })
|
||||
|
||||
let newParams: string[] = DEFAULT_PARAMS
|
||||
|
||||
if (params.includes(filter)) {
|
||||
newParams = params.filter((p) => p !== filter)
|
||||
} else {
|
||||
newParams = [...params, filter]
|
||||
}
|
||||
setParams(newParams)
|
||||
}
|
||||
|
||||
const advancedParamsString = useMemo(() => {
|
||||
let advancedParams: string = ''
|
||||
Object.entries(advancedFilters).map((entry) => {
|
||||
if (entry[1].length) {
|
||||
advancedParams = advancedParams + `&${entry[0]}=${entry[1]}`
|
||||
}
|
||||
})
|
||||
return advancedParams
|
||||
}, [advancedFilters])
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
return params.length === 3
|
||||
? advancedParamsString
|
||||
: `&activity-type=${params.toString()}${advancedParamsString}`
|
||||
}, [advancedParamsString, params])
|
||||
|
||||
return !showActivityDetail ? (
|
||||
<>
|
||||
<ActivityFilters
|
||||
filters={filters}
|
||||
setFilters={setFilters}
|
||||
updateFilters={updateFilters}
|
||||
params={queryParams}
|
||||
advancedFilters={advancedFilters}
|
||||
setAdvancedFilters={setAdvancedFilters}
|
||||
/>
|
||||
<ActivityFeedTable
|
||||
activityFeed={activityFeed}
|
||||
handleShowActivityDetails={handleShowActivityDetails}
|
||||
params={queryParams}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<ActivityDetails
|
||||
activity={showActivityDetail}
|
||||
setShowActivityDetail={setShowActivityDetail}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityFeed
|
||||
|
||||
const ActivityFilters = ({
|
||||
filters,
|
||||
setFilters,
|
||||
updateFilters,
|
||||
params,
|
||||
advancedFilters,
|
||||
setAdvancedFilters,
|
||||
}: {
|
||||
filters: Filters
|
||||
setFilters: (x: Filters) => void
|
||||
updateFilters: (e: ChangeEvent<HTMLInputElement>, filter: string) => void
|
||||
params: string
|
||||
advancedFilters: AdvancedFilters
|
||||
setAdvancedFilters: (x: AdvancedFilters) => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
|
||||
const { connected } = useWallet()
|
||||
const [showAdvancedFiltersModal, setShowAdvancedFiltersModal] =
|
||||
useState(false)
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.lg : false
|
||||
const [showMobileFilters, setShowMobileFilters] = useState(false)
|
||||
const [hasFilters, setHasFilters] = useState(false)
|
||||
|
||||
const handleUpdateResults = useCallback(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
const set = mangoStore.getState().set
|
||||
if (params) {
|
||||
setHasFilters(true)
|
||||
} else {
|
||||
setHasFilters(false)
|
||||
}
|
||||
set((s) => {
|
||||
s.activityFeed.feed = []
|
||||
s.activityFeed.loading = true
|
||||
})
|
||||
if (mangoAccount) {
|
||||
actions.fetchActivityFeed(mangoAccount.publicKey.toString(), 0, params)
|
||||
}
|
||||
}, [actions, params])
|
||||
|
||||
const handleResetFilters = useCallback(async () => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
const set = mangoStore.getState().set
|
||||
setHasFilters(false)
|
||||
set((s) => {
|
||||
s.activityFeed.feed = []
|
||||
s.activityFeed.loading = true
|
||||
})
|
||||
if (mangoAccount) {
|
||||
await actions.fetchActivityFeed(mangoAccount.publicKey.toString())
|
||||
setAdvancedFilters(DEFAULT_ADVANCED_FILTERS)
|
||||
setFilters(DEFAULT_FILTERS)
|
||||
}
|
||||
}, [actions])
|
||||
|
||||
const handleUpdateModalResults = () => {
|
||||
handleUpdateResults()
|
||||
setShowAdvancedFiltersModal(false)
|
||||
}
|
||||
|
||||
const handleUpdateMobileResults = () => {
|
||||
handleUpdateResults()
|
||||
setShowMobileFilters(false)
|
||||
}
|
||||
|
||||
return connected ? (
|
||||
!isMobile ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between border-b border-th-bkg-3 bg-th-bkg-2 pl-6">
|
||||
<h3 className="flex items-center whitespace-nowrap pr-6 text-sm">
|
||||
{t('activity:filter-results')}
|
||||
</h3>
|
||||
<ActivityTypeFiltersForm
|
||||
filters={filters}
|
||||
updateFilters={updateFilters}
|
||||
/>
|
||||
<div className="flex h-12 items-center justify-between border-l border-th-bkg-4 p-6">
|
||||
<LinkButton
|
||||
className="whitespace-nowrap text-sm"
|
||||
onClick={() => setShowAdvancedFiltersModal(true)}
|
||||
>
|
||||
{t('activity:advanced-filters')}
|
||||
</LinkButton>
|
||||
{hasFilters ? (
|
||||
<Tooltip content={t('activity:reset-filters')}>
|
||||
<IconButton
|
||||
className={`ml-4 ${loadActivityFeed ? 'animate-spin' : ''}`}
|
||||
onClick={() => handleResetFilters()}
|
||||
size="small"
|
||||
>
|
||||
<ArrowPathIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
<Button className="h-12 rounded-none" onClick={handleUpdateResults}>
|
||||
{t('activity:update')}
|
||||
</Button>
|
||||
</div>
|
||||
{showAdvancedFiltersModal ? (
|
||||
<Modal
|
||||
isOpen={showAdvancedFiltersModal}
|
||||
onClose={() => setShowAdvancedFiltersModal(false)}
|
||||
>
|
||||
<h2 className="mb-2 text-center">
|
||||
{t('activity:advanced-filters')}
|
||||
</h2>
|
||||
<AdvancedFiltersForm
|
||||
advancedFilters={advancedFilters}
|
||||
setAdvancedFilters={setAdvancedFilters}
|
||||
/>
|
||||
<Button
|
||||
className="w-full"
|
||||
size="large"
|
||||
onClick={handleUpdateModalResults}
|
||||
>
|
||||
{t('activity:update')}
|
||||
</Button>
|
||||
</Modal>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<Disclosure>
|
||||
<div className="relative">
|
||||
{hasFilters ? (
|
||||
<div className="absolute right-14 top-3">
|
||||
<Tooltip content={t('activity:reset-filters')}>
|
||||
<IconButton
|
||||
className={`${loadActivityFeed ? 'animate-spin' : ''}`}
|
||||
onClick={() => handleResetFilters()}
|
||||
size="small"
|
||||
>
|
||||
<ArrowPathIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
onClick={() => setShowMobileFilters(!showMobileFilters)}
|
||||
role="button"
|
||||
className={`default-transition w-full border-b border-th-bkg-3 bg-th-bkg-2 px-6 py-4 hover:bg-th-bkg-3`}
|
||||
>
|
||||
<Disclosure.Button
|
||||
className={`flex h-full w-full items-center justify-between rounded-none`}
|
||||
>
|
||||
<span className="font-bold text-th-fgd-1">
|
||||
{t('activity:filter-results')}
|
||||
</span>
|
||||
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
showMobileFilters ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={showMobileFilters}
|
||||
enter="transition-all ease-in duration-300"
|
||||
enterFrom="opacity-100 max-h-0"
|
||||
enterTo="opacity-100 max-h-full"
|
||||
leave="transition-all ease-out duration-300"
|
||||
leaveFrom="opacity-100 max-h-full"
|
||||
leaveTo="opacity-0 max-h-0"
|
||||
>
|
||||
<Disclosure.Panel className="bg-th-bkg-2 px-6 pb-6">
|
||||
<div className="py-4">
|
||||
<Label text={t('activity:activity-type')} />
|
||||
<ActivityTypeFiltersForm
|
||||
filters={filters}
|
||||
updateFilters={updateFilters}
|
||||
/>
|
||||
</div>
|
||||
<AdvancedFiltersForm
|
||||
advancedFilters={advancedFilters}
|
||||
setAdvancedFilters={setAdvancedFilters}
|
||||
/>
|
||||
<Button
|
||||
className="w-full"
|
||||
size="large"
|
||||
onClick={handleUpdateMobileResults}
|
||||
>
|
||||
{t('activity:update')}
|
||||
</Button>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
const ActivityTypeFiltersForm = ({
|
||||
filters,
|
||||
updateFilters,
|
||||
}: {
|
||||
filters: Filters
|
||||
updateFilters: (e: ChangeEvent<HTMLInputElement>, filter: string) => void
|
||||
}) => {
|
||||
const { t } = useTranslation('activity')
|
||||
return (
|
||||
<div className="flex w-full flex-col space-y-2 md:flex-row md:space-y-0">
|
||||
<div className="flex h-8 flex-1 items-center lg:h-12 lg:border-l lg:border-th-bkg-4 lg:p-4">
|
||||
<Checkbox
|
||||
checked={filters.deposit}
|
||||
onChange={(e) => updateFilters(e, 'deposit')}
|
||||
>
|
||||
<span className="text-sm">{t('deposits')}</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="flex h-8 flex-1 items-center lg:h-12 lg:border-l lg:border-th-bkg-4 lg:p-4">
|
||||
<Checkbox
|
||||
checked={filters.withdraw}
|
||||
onChange={(e) => updateFilters(e, 'withdraw')}
|
||||
>
|
||||
<span className="text-sm">{t('withdrawals')}</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="flex h-8 flex-1 items-center lg:h-12 lg:border-l lg:border-th-bkg-4 lg:p-4">
|
||||
<Checkbox
|
||||
checked={filters.liquidate_token_with_token}
|
||||
onChange={(e) => updateFilters(e, 'liquidate_token_with_token')}
|
||||
>
|
||||
<span className="text-sm">{t('liquidations')}</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface AdvancedFiltersFormProps {
|
||||
advancedFilters: any
|
||||
setAdvancedFilters: (x: any) => void
|
||||
}
|
||||
|
||||
const AdvancedFiltersForm = ({
|
||||
advancedFilters,
|
||||
setAdvancedFilters,
|
||||
}: AdvancedFiltersFormProps) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const group = mangoStore((s) => s.group)
|
||||
const [dateFrom, setDateFrom] = useState<Date | null>(null)
|
||||
const [dateTo, setDateTo] = useState<Date | null>(null)
|
||||
const [valueFrom, setValueFrom] = useState(advancedFilters['usd-lower'] || '')
|
||||
const [valueTo, setValueTo] = useState(advancedFilters['usd-upper'] || '')
|
||||
|
||||
const symbols = useMemo(() => {
|
||||
if (!group) return []
|
||||
return Array.from(group.banksMapByName, ([key, value]) => key)
|
||||
}, [group])
|
||||
|
||||
useEffect(() => {
|
||||
if (advancedFilters['start-date']) {
|
||||
setDateFrom(new Date(advancedFilters['start-date']))
|
||||
}
|
||||
if (advancedFilters['end-date']) {
|
||||
setDateTo(new Date(advancedFilters['end-date']))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const toggleOption = (option: string) => {
|
||||
setAdvancedFilters((prevSelected: any) => {
|
||||
const newSelections = prevSelected.symbol ? [...prevSelected.symbol] : []
|
||||
if (newSelections.includes(option)) {
|
||||
return {
|
||||
...prevSelected,
|
||||
symbol: newSelections.filter((item) => item != option),
|
||||
}
|
||||
} else {
|
||||
newSelections.push(option)
|
||||
return { ...prevSelected, symbol: newSelections }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (dateFrom && dateTo) {
|
||||
setAdvancedFilters({
|
||||
...advancedFilters,
|
||||
'start-date':
|
||||
dayjs(dateFrom).set('hour', 0).format('YYYY-MM-DDTHH:mm:ss.000') +
|
||||
'Z',
|
||||
'end-date':
|
||||
dayjs(dateTo)
|
||||
.set('hour', 23)
|
||||
.set('minute', 59)
|
||||
.format('YYYY-MM-DDTHH:mm:ss.000') + 'Z',
|
||||
})
|
||||
} else {
|
||||
setAdvancedFilters({
|
||||
...advancedFilters,
|
||||
'start-date': '',
|
||||
'end-date': '',
|
||||
})
|
||||
}
|
||||
}, [dateFrom, dateTo])
|
||||
|
||||
useEffect(() => {
|
||||
if (valueFrom && valueTo) {
|
||||
setAdvancedFilters({
|
||||
...advancedFilters,
|
||||
'usd-lower': valueFrom,
|
||||
'usd-upper': valueTo,
|
||||
})
|
||||
} else {
|
||||
setAdvancedFilters({
|
||||
...advancedFilters,
|
||||
'usd-lower': '',
|
||||
'usd-upper': '',
|
||||
})
|
||||
}
|
||||
}, [valueFrom, valueTo])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Label text={t('tokens')} />
|
||||
<MultiSelectDropdown
|
||||
options={symbols}
|
||||
selected={advancedFilters.symbol || []}
|
||||
toggleOption={toggleOption}
|
||||
/>
|
||||
<div className="my-4 w-full">
|
||||
<MangoDateRangePicker
|
||||
startDate={dateFrom}
|
||||
setStartDate={setDateFrom}
|
||||
endDate={dateTo}
|
||||
setEndDate={setDateTo}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pb-6">
|
||||
<div className="w-1/2">
|
||||
<Label text={t('activity:value-from')} />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="0.00"
|
||||
value={valueFrom}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setValueFrom(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<Label text={t('activity:value-to')} />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="0.00"
|
||||
value={valueTo || ''}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setValueTo(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ActivityDetails = ({
|
||||
activity,
|
||||
setShowActivityDetail,
|
||||
}: {
|
||||
activity: LiquidationFeedItem
|
||||
setShowActivityDetail: (x: any) => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'activity', 'settings'])
|
||||
const [preferredExplorer] = useLocalStorageState(
|
||||
PREFERRED_EXPLORER_KEY,
|
||||
EXPLORERS[0]
|
||||
)
|
||||
const { block_datetime } = activity
|
||||
const {
|
||||
asset_amount,
|
||||
asset_price,
|
||||
asset_symbol,
|
||||
liab_amount,
|
||||
liab_price,
|
||||
liab_symbol,
|
||||
signature,
|
||||
} = activity.activity_details
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center p-6">
|
||||
<IconButton
|
||||
className="mr-4"
|
||||
onClick={() => setShowActivityDetail(null)}
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
<h2 className="text-lg">{t('activity:liquidation-details')}</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 px-6 lg:grid-cols-3">
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('date')}</p>
|
||||
<p className="text-th-fgd-1">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatDecimal(asset_amount)}{' '}
|
||||
<span className="font-body tracking-wide">{asset_symbol}</span>
|
||||
<span className="ml-2 font-body tracking-wide text-th-fgd-3">
|
||||
at
|
||||
</span>{' '}
|
||||
{formatFixedDecimals(asset_price, true)}
|
||||
</p>
|
||||
<p className="font-mono text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(asset_price * asset_amount, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatDecimal(liab_amount)}{' '}
|
||||
<span className="font-body tracking-wide">{liab_symbol}</span>
|
||||
<span className="ml-2 font-body tracking-wide text-th-fgd-3">
|
||||
at
|
||||
</span>{' '}
|
||||
{formatFixedDecimals(liab_price, true)}
|
||||
</p>
|
||||
<p className="font-mono text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(liab_price * liab_amount, true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 mt-8 flex justify-center border-y border-th-bkg-3 py-3">
|
||||
<a
|
||||
className="default-transition flex items-center text-th-fgd-1 hover:text-th-fgd-3"
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
<span className="ml-2 text-base">{`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,412 @@
|
|||
import { IconButton, LinkButton } from '@components/shared/Button'
|
||||
import SheenLoader from '@components/shared/SheenLoader'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import {
|
||||
BoltIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
LinkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
|
||||
import dayjs from 'dayjs'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { EXPLORERS } from 'pages/settings'
|
||||
import { Fragment, useCallback, useState } from 'react'
|
||||
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
||||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
|
||||
const ActivityFeedTable = ({
|
||||
activityFeed,
|
||||
handleShowActivityDetails,
|
||||
params,
|
||||
}: {
|
||||
activityFeed: any
|
||||
handleShowActivityDetails: (x: LiquidationFeedItem) => void
|
||||
params: string
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const { connected } = useWallet()
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [preferredExplorer] = useLocalStorageState(
|
||||
PREFERRED_EXPLORER_KEY,
|
||||
EXPLORERS[0]
|
||||
)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
||||
const handleShowMore = useCallback(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
const set = mangoStore.getState().set
|
||||
set((s) => {
|
||||
s.activityFeed.loading = true
|
||||
})
|
||||
if (!mangoAccount) return
|
||||
setOffset(offset + 25)
|
||||
actions.fetchActivityFeed(
|
||||
mangoAccount.publicKey.toString(),
|
||||
offset + 25,
|
||||
params
|
||||
)
|
||||
}, [actions, offset, params])
|
||||
|
||||
const getCreditAndDebit = (activity: any) => {
|
||||
const { activity_type } = activity
|
||||
let credit = { value: '0', symbol: '' }
|
||||
let debit = { value: '0', symbol: '' }
|
||||
if (activity_type === 'liquidate_token_with_token') {
|
||||
const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } =
|
||||
activity.activity_details
|
||||
if (side === 'liqee') {
|
||||
credit = { value: formatDecimal(liab_amount), symbol: liab_symbol }
|
||||
debit = {
|
||||
value: formatDecimal(asset_amount * -1),
|
||||
symbol: asset_symbol,
|
||||
}
|
||||
} else {
|
||||
credit = { value: formatDecimal(asset_amount), symbol: asset_symbol }
|
||||
debit = { value: formatDecimal(liab_amount * -1), symbol: liab_symbol }
|
||||
}
|
||||
}
|
||||
if (activity_type === 'deposit') {
|
||||
const { symbol, quantity } = activity.activity_details
|
||||
credit = { value: formatDecimal(quantity), symbol }
|
||||
debit = { value: '0', symbol: '' }
|
||||
}
|
||||
if (activity_type === 'withdraw') {
|
||||
const { symbol, quantity } = activity.activity_details
|
||||
credit = { value: '0', symbol: '' }
|
||||
debit = { value: formatDecimal(quantity * -1), symbol }
|
||||
}
|
||||
return { credit, debit }
|
||||
}
|
||||
|
||||
const getValue = (activity: any) => {
|
||||
const { activity_type } = activity
|
||||
let value = 0
|
||||
if (activity_type === 'liquidate_token_with_token') {
|
||||
const { side, liab_amount, liab_price, asset_amount, asset_price } =
|
||||
activity.activity_details
|
||||
if (side === 'liqee') {
|
||||
value = asset_amount * asset_price - liab_amount * liab_price
|
||||
} else {
|
||||
value = liab_amount * liab_price - asset_amount * asset_price
|
||||
}
|
||||
}
|
||||
if (activity_type === 'deposit' || activity_type === 'withdraw') {
|
||||
const { usd_equivalent } = activity.activity_details
|
||||
value =
|
||||
activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
return connected ? (
|
||||
activityFeed.length || loadActivityFeed ? (
|
||||
<>
|
||||
{showTableView ? (
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr className="sticky top-0 z-10">
|
||||
<th className="bg-th-bkg-1 text-left">{t('date')}</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:credit')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:debit')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity-value')}
|
||||
</th>
|
||||
<th className="bg-th-bkg-1 text-right">{t('explorer')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activityFeed.map((activity: any, i: number) => {
|
||||
const { activity_type, block_datetime } = activity
|
||||
const { signature } = activity.activity_details
|
||||
const isLiquidation =
|
||||
activity_type === 'liquidate_token_with_token'
|
||||
const activityName = isLiquidation
|
||||
? 'liquidation'
|
||||
: activity_type
|
||||
const amounts = getCreditAndDebit(activity)
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
<tr
|
||||
key={signature}
|
||||
className={`default-transition text-sm hover:bg-th-bkg-2 ${
|
||||
isLiquidation ? 'cursor-pointer' : ''
|
||||
}`}
|
||||
onClick={
|
||||
isLiquidation
|
||||
? () => handleShowActivityDetails(activity)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<td>
|
||||
<p className="font-body tracking-wide">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</td>
|
||||
<td className="text-right">
|
||||
{t(`activity:${activityName}`)}
|
||||
</td>
|
||||
<td className="text-right font-mono">
|
||||
{amounts.credit.value}{' '}
|
||||
<span className="font-body tracking-wide text-th-fgd-3">
|
||||
{amounts.credit.symbol}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-right font-mono">
|
||||
{amounts.debit.value}{' '}
|
||||
<span className="font-body tracking-wide text-th-fgd-3">
|
||||
{amounts.debit.symbol}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-right font-mono">
|
||||
{formatFixedDecimals(value, true)}
|
||||
</td>
|
||||
<td>
|
||||
{activity_type !== 'liquidate_token_with_token' ? (
|
||||
<div className="flex items-center justify-end">
|
||||
<Tooltip
|
||||
content={`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}
|
||||
placement="top-end"
|
||||
>
|
||||
<a
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="h-6 w-6">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-end">
|
||||
<ChevronRightIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div>
|
||||
{activityFeed.map((activity: any, i: number) => (
|
||||
<MobileActivityFeedItem
|
||||
activity={activity}
|
||||
getValue={getValue}
|
||||
key={activity.activity_details.signature}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{loadActivityFeed ? (
|
||||
<div className="mt-2 space-y-0.5">
|
||||
{[...Array(4)].map((i) => (
|
||||
<SheenLoader className="flex flex-1" key={i}>
|
||||
<div className="h-16 w-full bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{activityFeed.length && activityFeed.length % 25 === 0 ? (
|
||||
<div className="flex justify-center pt-6">
|
||||
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center p-8">
|
||||
<BoltIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
<p>No account activity found...</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center p-8">
|
||||
<LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
<p>Connect to view your account activity</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityFeedTable
|
||||
|
||||
const MobileActivityFeedItem = ({
|
||||
activity,
|
||||
getValue,
|
||||
}: {
|
||||
activity: any
|
||||
getValue: (x: any) => number
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const [expandActivityDetails, setExpandActivityDetails] = useState(false)
|
||||
const [preferredExplorer] = useLocalStorageState(
|
||||
PREFERRED_EXPLORER_KEY,
|
||||
EXPLORERS[0]
|
||||
)
|
||||
const { activity_type, block_datetime } = activity
|
||||
const { signature } = activity.activity_details
|
||||
const isLiquidation = activity_type === 'liquidate_token_with_token'
|
||||
const activityName = isLiquidation ? 'liquidation' : activity_type
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
<div key={signature} className="border-b border-th-bkg-3 px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-th-fgd-1">
|
||||
{dayjs(block_datetime).format('ddd D MMM')}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{dayjs(block_datetime).format('h:mma')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<p className="text-right text-xs">
|
||||
{t(`activity:${activityName}`)}
|
||||
</p>
|
||||
<p className="text-right font-mono text-sm text-th-fgd-1">
|
||||
{isLiquidation ? (
|
||||
formatFixedDecimals(value, true)
|
||||
) : (
|
||||
<>
|
||||
<span className="mr-1">
|
||||
{activity.activity_details.quantity}
|
||||
</span>
|
||||
<span className="font-body tracking-wide text-th-fgd-3">
|
||||
{activity.activity_details.symbol}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{isLiquidation ? (
|
||||
<IconButton
|
||||
onClick={() => setExpandActivityDetails((prev) => !prev)}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
expandActivityDetails ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-1`}
|
||||
/>
|
||||
</IconButton>
|
||||
) : (
|
||||
<a
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={expandActivityDetails}
|
||||
as={Fragment}
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
|
||||
<p className="font-mono text-sm text-th-fgd-1">
|
||||
{formatDecimal(activity.activity_details.asset_amount)}{' '}
|
||||
<span className="font-body tracking-wide">
|
||||
{activity.activity_details.asset_symbol}
|
||||
</span>
|
||||
<span className="ml-2 font-body tracking-wide text-th-fgd-3">
|
||||
at
|
||||
</span>{' '}
|
||||
{formatFixedDecimals(activity.activity_details.asset_price, true)}
|
||||
</p>
|
||||
<p className="font-mono text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(
|
||||
activity.activity_details.asset_price *
|
||||
activity.activity_details.asset_amount,
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
|
||||
<p className="font-mono text-sm text-th-fgd-1">
|
||||
{formatDecimal(activity.activity_details.liab_amount)}{' '}
|
||||
<span className="font-body tracking-wide">
|
||||
{activity.activity_details.liab_symbol}
|
||||
</span>
|
||||
<span className="ml-2 font-body tracking-wide text-th-fgd-3">
|
||||
at
|
||||
</span>{' '}
|
||||
{formatFixedDecimals(activity.activity_details.liab_price, true)}
|
||||
</p>
|
||||
<p className="font-mono text-xs text-th-fgd-3">
|
||||
{formatFixedDecimals(
|
||||
activity.activity_details.liab_price *
|
||||
activity.activity_details.liab_amount,
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-2 flex justify-center pt-3">
|
||||
<a
|
||||
className="default-transition flex items-center text-sm text-th-fgd-1 hover:text-th-fgd-3"
|
||||
href={`${preferredExplorer.url}${signature}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/explorer-logos/${preferredExplorer.name}.png`}
|
||||
/>
|
||||
<span className="ml-2 text-base">{`View on ${t(
|
||||
`settings:${preferredExplorer.name}`
|
||||
)}`}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ interface CheckboxProps {
|
|||
onChange: (x: ChangeEvent<HTMLInputElement>) => void
|
||||
disabled?: boolean
|
||||
halfState?: boolean
|
||||
labelClass?: string
|
||||
}
|
||||
|
||||
const Checkbox = ({
|
||||
|
|
@ -14,6 +15,7 @@ const Checkbox = ({
|
|||
children,
|
||||
disabled = false,
|
||||
halfState = false,
|
||||
labelClass,
|
||||
...props
|
||||
}: CheckboxProps) => (
|
||||
<label className="default-transition flex cursor-pointer items-center text-th-fgd-3 hover:text-th-fgd-2">
|
||||
|
|
@ -51,7 +53,7 @@ const Checkbox = ({
|
|||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`ml-2 whitespace-nowrap text-xs ${
|
||||
className={`ml-2 whitespace-nowrap text-xs ${labelClass} ${
|
||||
checked && !disabled ? 'text-th-fgd-2' : ''
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { enUS } from 'date-fns/locale'
|
||||
import { DateRangePicker } from 'react-nice-dates'
|
||||
import Label from './Label'
|
||||
|
||||
const MangoDateRangePicker = ({
|
||||
startDate,
|
||||
setStartDate,
|
||||
endDate,
|
||||
setEndDate,
|
||||
}: {
|
||||
startDate: Date | null
|
||||
setStartDate: any
|
||||
endDate: Date | null
|
||||
setEndDate: any
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
return (
|
||||
<DateRangePicker
|
||||
startDate={startDate!}
|
||||
endDate={endDate!}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
minimumDate={new Date('January 01, 2020 00:00:00')}
|
||||
maximumDate={new Date()}
|
||||
minimumLength={1}
|
||||
format="dd MMM yyyy"
|
||||
locale={enUS}
|
||||
>
|
||||
{({ startDateInputProps, endDateInputProps }) => (
|
||||
<div className="date-range flex items-end">
|
||||
<div className="w-full">
|
||||
<Label text={t('date-from')} />
|
||||
<input
|
||||
className="default-transition h-12 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
|
||||
{...startDateInputProps}
|
||||
placeholder="Start Date"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex h-12 items-center justify-center">
|
||||
<ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Label text={t('date-to')} />
|
||||
<input
|
||||
className="default-transition h-12 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-3 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
|
||||
{...endDateInputProps}
|
||||
placeholder="End Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DateRangePicker>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoDateRangePicker
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import { Fragment } from 'react'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import Checkbox from './Checkbox'
|
||||
|
||||
const MultiSelectDropdown = ({
|
||||
options,
|
||||
selected,
|
||||
toggleOption,
|
||||
}: {
|
||||
options: string[]
|
||||
selected: string[]
|
||||
toggleOption: (x: string) => void
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
return (
|
||||
<Popover className="relative w-full min-w-[120px]">
|
||||
{({ open }) => (
|
||||
<div className="flex flex-col">
|
||||
<Popover.Button
|
||||
className={`default-transition h-12 rounded-md bg-th-bkg-1 px-3 text-th-fgd-1 ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 ${
|
||||
open ? 'ring-th-fgd-4' : 'ring-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
<div className={`flex items-center justify-between`}>
|
||||
{selected.length ? (
|
||||
<span>{selected.toString().replace(/,/g, ', ')}</span>
|
||||
) : (
|
||||
<span className="text-th-fgd-4">
|
||||
{t('activity:select-tokens')}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
className={`default-transition ml-0.5 h-6 w-6 ${
|
||||
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in duration-200"
|
||||
enterFrom="opacity-0 transform scale-75"
|
||||
enterTo="opacity-100 transform scale-100"
|
||||
leave="transition ease-out duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel className="absolute top-14 z-10 h-72 w-full overflow-y-auto">
|
||||
<div className="relative space-y-2.5 rounded-md bg-th-bkg-3 p-3">
|
||||
{options.map((option: string) => {
|
||||
const isSelected = selected.includes(option)
|
||||
return (
|
||||
<Checkbox
|
||||
labelClass="text-sm"
|
||||
checked={isSelected}
|
||||
key={option}
|
||||
onChange={() => toggleOption(option)}
|
||||
>
|
||||
{option}
|
||||
</Checkbox>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
|
||||
export default MultiSelectDropdown
|
||||
|
|
@ -9,13 +9,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
|
|||
import Decimal from 'decimal.js'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import React, {
|
||||
ChangeEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import NumberFormat, { NumberFormatValues } from 'react-number-format'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ function Modal({
|
|||
<span className="inline-block h-screen align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div className="my-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl">
|
||||
<div className="my-8 inline-block w-full max-w-md transform rounded-lg border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl">
|
||||
{!hideClose ? (
|
||||
<button
|
||||
onClick={onClose}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
rounded ? 'rounded-md' : 'rounded-none'
|
||||
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
|
||||
label === activeValue
|
||||
? 'bg-th-bkg-2 text-th-primary'
|
||||
? 'bg-th-bkg-3 text-th-primary'
|
||||
: 'hover:cursor-pointer hover:text-th-fgd-2'
|
||||
}`}
|
||||
key={`${label}${i}`}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ import { IconButton } from '../shared/Button'
|
|||
import { Transition } from '@headlessui/react'
|
||||
import SheenLoader from '../shared/SheenLoader'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore, { TradeHistoryItem } from '@store/mangoStore'
|
||||
import { SwapHistoryItem } from '@store/mangoStore'
|
||||
import mangoStore, { TradeHistoryItem, SwapHistoryItem } from '@store/mangoStore'
|
||||
import {
|
||||
countLeadingZeros,
|
||||
formatFixedDecimals,
|
||||
|
|
@ -28,10 +29,10 @@ import Tooltip from '@components/shared/Tooltip'
|
|||
import { formatTokenSymbol } from 'utils/tokens'
|
||||
|
||||
const SwapHistoryTable = ({
|
||||
tradeHistory,
|
||||
swapHistory,
|
||||
loading,
|
||||
}: {
|
||||
tradeHistory: Array<TradeHistoryItem>
|
||||
swapHistory: Array<SwapHistoryItem>
|
||||
loading: boolean
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'settings'])
|
||||
|
|
@ -51,7 +52,7 @@ const SwapHistoryTable = ({
|
|||
|
||||
return connected ? (
|
||||
!loading ? (
|
||||
tradeHistory.length ? (
|
||||
swapHistory.length ? (
|
||||
showTableView ? (
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
|
|
@ -64,7 +65,7 @@ const SwapHistoryTable = ({
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tradeHistory.map((h, index) => {
|
||||
{swapHistory.map((h, index) => {
|
||||
const {
|
||||
block_datetime,
|
||||
signature,
|
||||
|
|
@ -222,7 +223,7 @@ const SwapHistoryTable = ({
|
|||
</table>
|
||||
) : (
|
||||
<div>
|
||||
{tradeHistory.map((h) => {
|
||||
{swapHistory.map((h) => {
|
||||
const {
|
||||
block_datetime,
|
||||
signature,
|
||||
|
|
@ -406,18 +407,11 @@ const SwapHistoryTable = ({
|
|||
)
|
||||
) : (
|
||||
<div className="mt-8 space-y-2">
|
||||
<SheenLoader className="flex flex-1">
|
||||
<div className="h-8 w-full rounded bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
<SheenLoader className="flex flex-1">
|
||||
<div className="h-16 w-full rounded bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
<SheenLoader className="flex flex-1">
|
||||
<div className="h-16 w-full rounded bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
<SheenLoader className="flex flex-1">
|
||||
<div className="h-16 w-full rounded bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
{[...Array(4)].map((i) => (
|
||||
<SheenLoader className="flex flex-1" key={i}>
|
||||
<div className="h-8 w-full rounded bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@types/lodash": "^4.14.185",
|
||||
"assert": "^2.0.0",
|
||||
"big.js": "^6.2.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"dayjs": "^1.11.3",
|
||||
"decimal.js": "^10.4.0",
|
||||
"immer": "^9.0.12",
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
"react-dom": "18.0.0",
|
||||
"react-flip-numbers": "^3.0.5",
|
||||
"react-grid-layout": "^1.3.4",
|
||||
"react-nice-dates": "^3.1.0",
|
||||
"react-number-format": "^4.9.2",
|
||||
"react-tsparticles": "^2.2.4",
|
||||
"react-window": "^1.8.7",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import '../styles/globals.css'
|
||||
import 'react-nice-dates/build/style.css'
|
||||
import '../styles/datepicker.css'
|
||||
import type { AppProps } from 'next/app'
|
||||
import { useMemo } from 'react'
|
||||
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
|
|||
'profile',
|
||||
'onboarding-tours',
|
||||
'swap',
|
||||
'activity',
|
||||
])),
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"activity": "Activity",
|
||||
"activity-type": "Activity Type",
|
||||
"activity-value": "Activity Value",
|
||||
"advanced-filters": "Advanced Filters",
|
||||
"asset-liquidated": "Asset Liquidated",
|
||||
"asset-returned": "Asset Returned",
|
||||
"credit": "Credit",
|
||||
"debit": "Debit",
|
||||
"deposit": "Deposit",
|
||||
"deposits": "Deposits",
|
||||
"filter-results": "Filter Results",
|
||||
"liquidation": "Liquidation",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"update": "Update",
|
||||
"value-from": "Value From",
|
||||
"value-to": "Value To",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawals": "Withdrawals"
|
||||
}
|
||||
|
|
@ -32,12 +32,15 @@
|
|||
"cumulative-interest-value": "Cumulative Interest Value",
|
||||
"daily-volume": "24h Volume",
|
||||
"date": "Date",
|
||||
"date-from": "Date From",
|
||||
"date-to": "Date To",
|
||||
"deposit": "Deposit",
|
||||
"deposit-rate": "Deposit Rate (APR)",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"edit-account": "Edit Account",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
"explorer": "Explorer",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"free-collateral": "Free Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"activity": "Activity",
|
||||
"activity-type": "Activity Type",
|
||||
"activity-value": "Activity Value",
|
||||
"advanced-filters": "Advanced Filters",
|
||||
"asset-liquidated": "Asset Liquidated",
|
||||
"asset-returned": "Asset Returned",
|
||||
"credit": "Credit",
|
||||
"debit": "Debit",
|
||||
"deposit": "Deposit",
|
||||
"deposits": "Deposits",
|
||||
"filter-results": "Filter Results",
|
||||
"liquidation": "Liquidation",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"update": "Update",
|
||||
"value-from": "Value From",
|
||||
"value-to": "Value To",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawals": "Withdrawals"
|
||||
}
|
||||
|
|
@ -32,12 +32,15 @@
|
|||
"cumulative-interest-value": "Cumulative Interest Value",
|
||||
"daily-volume": "24h Volume",
|
||||
"date": "Date",
|
||||
"date-from": "Date From",
|
||||
"date-to": "Date To",
|
||||
"deposit": "Deposit",
|
||||
"deposit-rate": "Deposit Rate (APR)",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"edit-account": "Edit Account",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
"explorer": "Explorer",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"free-collateral": "Free Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"activity": "Activity",
|
||||
"activity-type": "Activity Type",
|
||||
"activity-value": "Activity Value",
|
||||
"advanced-filters": "Advanced Filters",
|
||||
"asset-liquidated": "Asset Liquidated",
|
||||
"asset-returned": "Asset Returned",
|
||||
"credit": "Credit",
|
||||
"debit": "Debit",
|
||||
"deposit": "Deposit",
|
||||
"deposits": "Deposits",
|
||||
"filter-results": "Filter Results",
|
||||
"liquidation": "Liquidation",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"update": "Update",
|
||||
"value-from": "Value From",
|
||||
"value-to": "Value To",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawals": "Withdrawals"
|
||||
}
|
||||
|
|
@ -32,12 +32,15 @@
|
|||
"cumulative-interest-value": "Cumulative Interest Value",
|
||||
"daily-volume": "24h Volume",
|
||||
"date": "Date",
|
||||
"date-from": "Date From",
|
||||
"date-to": "Date To",
|
||||
"deposit": "Deposit",
|
||||
"deposit-rate": "Deposit Rate (APR)",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"edit-account": "Edit Account",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
"explorer": "Explorer",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"free-collateral": "Free Collateral",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"activity": "Activity",
|
||||
"activity-type": "Activity Type",
|
||||
"activity-value": "Activity Value",
|
||||
"advanced-filters": "Advanced Filters",
|
||||
"asset-liquidated": "Asset Liquidated",
|
||||
"asset-returned": "Asset Returned",
|
||||
"credit": "Credit",
|
||||
"debit": "Debit",
|
||||
"deposit": "Deposit",
|
||||
"deposits": "Deposits",
|
||||
"filter-results": "Filter Results",
|
||||
"liquidation": "Liquidation",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"update": "Update",
|
||||
"value-from": "Value From",
|
||||
"value-to": "Value To",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawals": "Withdrawals"
|
||||
}
|
||||
|
|
@ -32,12 +32,15 @@
|
|||
"cumulative-interest-value": "Cumulative Interest Value",
|
||||
"daily-volume": "24h Volume",
|
||||
"date": "Date",
|
||||
"date-from": "Date From",
|
||||
"date-to": "Date To",
|
||||
"deposit": "Deposit",
|
||||
"deposit-rate": "Deposit Rate (APR)",
|
||||
"deposit-value": "Deposit Value",
|
||||
"disconnect": "Disconnect",
|
||||
"edit-account": "Edit Account",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
"explorer": "Explorer",
|
||||
"fee": "Fee",
|
||||
"fees": "Fees",
|
||||
"free-collateral": "Free Collateral",
|
||||
|
|
|
|||
|
|
@ -72,7 +72,41 @@ export interface PerformanceDataItem {
|
|||
transfer_balance: number
|
||||
}
|
||||
|
||||
export interface TradeHistoryItem {
|
||||
export interface DepositWithdrawFeedItem {
|
||||
activity_details: {
|
||||
block_datetime: string
|
||||
mango_account: string
|
||||
quantity: number
|
||||
signature: string
|
||||
symbol: string
|
||||
usd_equivalent: number
|
||||
wallet_pk: string
|
||||
}
|
||||
activity_type: string
|
||||
block_datetime: string
|
||||
symbol: string
|
||||
}
|
||||
|
||||
export interface LiquidationFeedItem {
|
||||
activity_details: {
|
||||
asset_amount: number
|
||||
asset_price: number
|
||||
asset_symbol: string
|
||||
block_datetime: string
|
||||
liab_amount: number
|
||||
liab_price: number
|
||||
liab_symbol: string
|
||||
mango_account: string
|
||||
mango_group: string
|
||||
side: string
|
||||
signature: string
|
||||
}
|
||||
activity_type: string
|
||||
block_datetime: string
|
||||
symbol: string
|
||||
}
|
||||
|
||||
export interface SwapHistoryItem {
|
||||
block_datetime: string
|
||||
mango_account: string
|
||||
signature: string
|
||||
|
|
@ -122,6 +156,10 @@ interface TourSettings {
|
|||
// }
|
||||
|
||||
export type MangoStore = {
|
||||
activityFeed: {
|
||||
feed: Array<DepositWithdrawFeedItem | LiquidationFeedItem>
|
||||
loading: boolean
|
||||
}
|
||||
coingeckoPrices: {
|
||||
data: any[]
|
||||
loading: boolean
|
||||
|
|
@ -142,7 +180,7 @@ export type MangoStore = {
|
|||
stats: {
|
||||
interestTotals: { data: TotalInterestDataItem[]; loading: boolean }
|
||||
performance: { data: PerformanceDataItem[]; loading: boolean }
|
||||
tradeHistory: { data: TradeHistoryItem[]; loading: boolean }
|
||||
swapHistory: { data: SwapHistoryItem[]; loading: boolean }
|
||||
}
|
||||
}
|
||||
mangoAccounts: { accounts: MangoAccount[] }
|
||||
|
|
@ -192,6 +230,11 @@ export type MangoStore = {
|
|||
}
|
||||
actions: {
|
||||
fetchAccountInterestTotals: (mangoAccountPk: string) => Promise<void>
|
||||
fetchActivityFeed: (
|
||||
mangoAccountPk: string,
|
||||
offset?: number,
|
||||
params?: string
|
||||
) => Promise<void>
|
||||
fetchAccountPerformance: (
|
||||
mangoAccountPk: string,
|
||||
range: number
|
||||
|
|
@ -204,6 +247,7 @@ export type MangoStore = {
|
|||
fetchNfts: (connection: Connection, walletPk: PublicKey) => void
|
||||
fetchSerumOpenOrders: (ma?: MangoAccount) => Promise<void>
|
||||
fetchProfileDetails: (walletPk: string) => void
|
||||
fetchSwapHistory: (mangoAccountPk: string) => Promise<void>
|
||||
fetchTourSettings: (walletPk: string) => void
|
||||
fetchTradeHistory: (mangoAccountPk: string) => Promise<void>
|
||||
fetchWalletTokens: (wallet: Wallet) => Promise<void>
|
||||
|
|
@ -215,6 +259,10 @@ export type MangoStore = {
|
|||
const mangoStore = create<MangoStore>()(
|
||||
subscribeWithSelector((_set, get) => {
|
||||
return {
|
||||
activityFeed: {
|
||||
feed: [],
|
||||
loading: true,
|
||||
},
|
||||
coingeckoPrices: {
|
||||
data: [],
|
||||
loading: false,
|
||||
|
|
@ -235,7 +283,7 @@ const mangoStore = create<MangoStore>()(
|
|||
stats: {
|
||||
interestTotals: { data: [], loading: false },
|
||||
performance: { data: [], loading: false },
|
||||
tradeHistory: { data: [], loading: false },
|
||||
swapHistory: { data: [], loading: false },
|
||||
},
|
||||
},
|
||||
mangoAccounts: { accounts: [] },
|
||||
|
|
@ -365,6 +413,54 @@ const mangoStore = create<MangoStore>()(
|
|||
})
|
||||
}
|
||||
},
|
||||
fetchActivityFeed: async (
|
||||
mangoAccountPk: string,
|
||||
offset = 0,
|
||||
params = ''
|
||||
) => {
|
||||
const set = get().set
|
||||
const currentFeed = mangoStore.getState().activityFeed.feed
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
|
||||
params ? params : ''
|
||||
}`
|
||||
)
|
||||
const parsedResponse = await response.json()
|
||||
const entries: any = Object.entries(parsedResponse).sort((a, b) =>
|
||||
b[0].localeCompare(a[0])
|
||||
)
|
||||
|
||||
const feed = currentFeed.concat(
|
||||
entries
|
||||
.map(([key, value]: Array<{ key: string; value: number }>) => {
|
||||
return { ...value, symbol: key }
|
||||
})
|
||||
.filter((x: string) => x)
|
||||
.sort(
|
||||
(
|
||||
a: DepositWithdrawFeedItem | LiquidationFeedItem,
|
||||
b: DepositWithdrawFeedItem | LiquidationFeedItem
|
||||
) =>
|
||||
dayjs(b.block_datetime).unix() -
|
||||
dayjs(a.block_datetime).unix()
|
||||
)
|
||||
)
|
||||
|
||||
set((state) => {
|
||||
state.activityFeed.feed = feed
|
||||
})
|
||||
} catch {
|
||||
notify({
|
||||
title: 'Failed to account activity feed',
|
||||
type: 'error',
|
||||
})
|
||||
} finally {
|
||||
set((state) => {
|
||||
state.activityFeed.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
fetchCoingeckoPrices: async () => {
|
||||
const set = get().set
|
||||
set((state) => {
|
||||
|
|
@ -564,10 +660,10 @@ const mangoStore = create<MangoStore>()(
|
|||
console.error('Failed loading open orders ', e)
|
||||
}
|
||||
},
|
||||
fetchTradeHistory: async (mangoAccountPk: string) => {
|
||||
fetchSwapHistory: async (mangoAccountPk: string) => {
|
||||
const set = get().set
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.tradeHistory.loading = true
|
||||
state.mangoAccount.stats.swapHistory.loading = true
|
||||
})
|
||||
try {
|
||||
const history = await fetch(
|
||||
|
|
@ -577,19 +673,19 @@ const mangoStore = create<MangoStore>()(
|
|||
const sortedHistory =
|
||||
parsedHistory && parsedHistory.length
|
||||
? parsedHistory.sort(
|
||||
(a: TradeHistoryItem, b: TradeHistoryItem) =>
|
||||
(a: SwapHistoryItem, b: SwapHistoryItem) =>
|
||||
dayjs(b.block_datetime).unix() -
|
||||
dayjs(a.block_datetime).unix()
|
||||
)
|
||||
: []
|
||||
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.tradeHistory.data = sortedHistory
|
||||
state.mangoAccount.stats.tradeHistory.loading = false
|
||||
state.mangoAccount.stats.swapHistory.data = sortedHistory
|
||||
state.mangoAccount.stats.swapHistory.loading = false
|
||||
})
|
||||
} catch {
|
||||
set((state) => {
|
||||
state.mangoAccount.stats.tradeHistory.loading = false
|
||||
state.mangoAccount.stats.swapHistory.loading = false
|
||||
})
|
||||
notify({
|
||||
title: 'Failed to load account performance data',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
/* Range Picker */
|
||||
|
||||
.nice-dates .nice-dates-popover {
|
||||
@apply z-20 max-w-[384px] bg-th-bkg-4;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-navigation {
|
||||
@apply font-bold text-th-fgd-1;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-navigation_next:before {
|
||||
@apply border-th-fgd-2 hover:border-th-primary;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-navigation_next:hover:before {
|
||||
@apply border-th-primary;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-navigation_previous:before {
|
||||
@apply border-th-fgd-2 hover:border-th-primary;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-navigation_previous:hover:before {
|
||||
@apply border-th-primary;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-week-header_day {
|
||||
@apply text-th-fgd-2;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-day_date {
|
||||
@apply text-th-fgd-3;
|
||||
}
|
||||
|
||||
.nice-dates .-outside .nice-dates-day_date {
|
||||
@apply text-th-fgd-4;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-day_month {
|
||||
@apply text-th-fgd-4;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-day:after {
|
||||
@apply border-th-fgd-4;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-day:before {
|
||||
@apply bg-th-bkg-1;
|
||||
}
|
||||
|
||||
.nice-dates .nice-dates-day.-selected:hover:after {
|
||||
@apply bg-th-bkg-3;
|
||||
}
|
||||
17
yarn.lock
17
yarn.lock
|
|
@ -2761,6 +2761,11 @@ classnames@^2.2.5:
|
|||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
|
||||
classnames@^2.2.6:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
|
||||
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
|
||||
|
||||
cliui@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
|
||||
|
|
@ -3002,6 +3007,11 @@ data-uri-to-buffer@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
|
||||
integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
|
||||
|
||||
date-fns@^2.29.3:
|
||||
version "2.29.3"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
|
||||
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
|
||||
|
||||
dateformat@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
||||
|
|
@ -5580,6 +5590,13 @@ react-native-url-polyfill@^1.3.0:
|
|||
dependencies:
|
||||
whatwg-url-without-unicode "8.0.0-3"
|
||||
|
||||
react-nice-dates@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-nice-dates/-/react-nice-dates-3.1.0.tgz#1be7dc18397a54a81e6b37bae460a34c058e5a14"
|
||||
integrity sha512-tOsA7tB2E9q+47nZwrk2ncK2rOUublNOWPVnY/N2HFDLO8slexGaAfOTKpej2KzPxCN3gcvOKeE2/9vua2LAjQ==
|
||||
dependencies:
|
||||
classnames "^2.2.6"
|
||||
|
||||
react-number-format@^4.9.2:
|
||||
version "4.9.3"
|
||||
resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.9.3.tgz#338500fe9c61b1ac73c8d6dff4ec97dd13fd2b50"
|
||||
|
|
|
|||
Loading…
Reference in New Issue