add openbook to activity filters
This commit is contained in:
parent
13c5d48ae7
commit
fb7f4a7cf0
|
@ -1,4 +1,3 @@
|
|||
import Checkbox from '@components/forms/Checkbox'
|
||||
import MangoDateRangePicker from '@components/forms/DateRangePicker'
|
||||
import Input from '@components/forms/Input'
|
||||
import Label from '@components/forms/Label'
|
||||
|
@ -26,14 +25,6 @@ import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
|
|||
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import ActivityFeedTable from './ActivityFeedTable'
|
||||
|
||||
interface Filters {
|
||||
deposit: boolean
|
||||
liquidate_token_with_token: boolean
|
||||
perp_trade: boolean
|
||||
swap: boolean
|
||||
withdraw: boolean
|
||||
}
|
||||
|
||||
interface AdvancedFilters {
|
||||
symbol: string[]
|
||||
'start-date': string
|
||||
|
@ -42,14 +33,6 @@ interface AdvancedFilters {
|
|||
'usd-upper': string
|
||||
}
|
||||
|
||||
const DEFAULT_FILTERS = {
|
||||
deposit: true,
|
||||
liquidate_token_with_token: true,
|
||||
perp_trade: true,
|
||||
swap: true,
|
||||
withdraw: true,
|
||||
}
|
||||
|
||||
const DEFAULT_ADVANCED_FILTERS = {
|
||||
symbol: [],
|
||||
'start-date': '',
|
||||
|
@ -60,9 +43,10 @@ const DEFAULT_ADVANCED_FILTERS = {
|
|||
|
||||
const DEFAULT_PARAMS = [
|
||||
'deposit',
|
||||
'liquidate_token_with_token',
|
||||
'swap',
|
||||
'perp_trade',
|
||||
'liquidate_token_with_token',
|
||||
'openbook_trade',
|
||||
'swap',
|
||||
'withdraw',
|
||||
]
|
||||
|
||||
|
@ -71,7 +55,6 @@ const ActivityFeed = () => {
|
|||
const actions = mangoStore.getState().actions
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const [showActivityDetail, setShowActivityDetail] = useState(null)
|
||||
const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS)
|
||||
const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>(
|
||||
DEFAULT_ADVANCED_FILTERS
|
||||
)
|
||||
|
@ -88,19 +71,6 @@ const ActivityFeed = () => {
|
|||
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 = ''
|
||||
Object.entries(advancedFilters).map((entry) => {
|
||||
|
@ -112,7 +82,7 @@ const ActivityFeed = () => {
|
|||
}, [advancedFilters])
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
return params.length === 5
|
||||
return !params.length || params.length === 6
|
||||
? advancedParamsString
|
||||
: `&activity-type=${params.toString()}${advancedParamsString}`
|
||||
}, [advancedParamsString, params])
|
||||
|
@ -120,11 +90,9 @@ const ActivityFeed = () => {
|
|||
return !showActivityDetail ? (
|
||||
<>
|
||||
<ActivityFilters
|
||||
filters={filters}
|
||||
setFilters={setFilters}
|
||||
updateFilters={updateFilters}
|
||||
filters={params}
|
||||
setFilters={setParams}
|
||||
params={queryParams}
|
||||
setParams={setParams}
|
||||
advancedFilters={advancedFilters}
|
||||
setAdvancedFilters={setAdvancedFilters}
|
||||
/>
|
||||
|
@ -147,17 +115,13 @@ export default ActivityFeed
|
|||
const ActivityFilters = ({
|
||||
filters,
|
||||
setFilters,
|
||||
updateFilters,
|
||||
params,
|
||||
setParams,
|
||||
advancedFilters,
|
||||
setAdvancedFilters,
|
||||
}: {
|
||||
filters: Filters
|
||||
setFilters: (x: Filters) => void
|
||||
updateFilters: (e: ChangeEvent<HTMLInputElement>, filter: string) => void
|
||||
filters: string[]
|
||||
setFilters: (x: string[]) => void
|
||||
params: string
|
||||
setParams: (x: string[]) => void
|
||||
advancedFilters: AdvancedFilters
|
||||
setAdvancedFilters: (x: AdvancedFilters) => void
|
||||
}) => {
|
||||
|
@ -196,8 +160,7 @@ const ActivityFilters = ({
|
|||
if (mangoAccount) {
|
||||
await actions.fetchActivityFeed(mangoAccount.publicKey.toString())
|
||||
setAdvancedFilters(DEFAULT_ADVANCED_FILTERS)
|
||||
setFilters(DEFAULT_FILTERS)
|
||||
setParams(DEFAULT_PARAMS)
|
||||
setFilters(DEFAULT_PARAMS)
|
||||
}
|
||||
}, [actions])
|
||||
|
||||
|
@ -245,16 +208,11 @@ const ActivityFilters = ({
|
|||
</div>
|
||||
</div>
|
||||
<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
|
||||
<FiltersForm
|
||||
advancedFilters={advancedFilters}
|
||||
setAdvancedFilters={setAdvancedFilters}
|
||||
filters={filters}
|
||||
setFilters={setFilters}
|
||||
/>
|
||||
<Button
|
||||
className="w-full md:w-auto"
|
||||
|
@ -268,69 +226,19 @@ const ActivityFilters = ({
|
|||
) : 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-3 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.swap}
|
||||
onChange={(e) => updateFilters(e, 'swap')}
|
||||
>
|
||||
<span className="text-sm">{t('swaps')}</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.perp_trade}
|
||||
onChange={(e) => updateFilters(e, 'perp_trade')}
|
||||
>
|
||||
<span className="text-sm">{t('perps')}</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 {
|
||||
interface FiltersFormProps {
|
||||
advancedFilters: any
|
||||
setAdvancedFilters: (x: any) => void
|
||||
filters: string[]
|
||||
setFilters: (x: string[]) => void
|
||||
}
|
||||
|
||||
const AdvancedFiltersForm = ({
|
||||
const FiltersForm = ({
|
||||
advancedFilters,
|
||||
setAdvancedFilters,
|
||||
}: AdvancedFiltersFormProps) => {
|
||||
filters,
|
||||
setFilters,
|
||||
}: FiltersFormProps) => {
|
||||
const { t } = useTranslation(['common', 'activity'])
|
||||
const { group } = useMangoGroup()
|
||||
const [dateFrom, setDateFrom] = useState<Date | null>(null)
|
||||
|
@ -352,13 +260,21 @@ const AdvancedFiltersForm = ({
|
|||
}
|
||||
}, [])
|
||||
|
||||
const toggleOption = (option: string) => {
|
||||
const toggleTypeOption = (option: string) => {
|
||||
if (filters.includes(option)) {
|
||||
setFilters(filters.filter((opt) => opt !== option))
|
||||
} else {
|
||||
setFilters(filters.concat(option))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSymbolOption = (option: string) => {
|
||||
setAdvancedFilters((prevSelected: any) => {
|
||||
const newSelections = prevSelected.symbol ? [...prevSelected.symbol] : []
|
||||
if (newSelections.includes(option)) {
|
||||
return {
|
||||
...prevSelected,
|
||||
symbol: newSelections.filter((item) => item != option),
|
||||
symbol: newSelections.filter((item) => item !== option),
|
||||
}
|
||||
} else {
|
||||
newSelections.push(option)
|
||||
|
@ -390,8 +306,8 @@ const AdvancedFiltersForm = ({
|
|||
if (valueFrom && valueTo) {
|
||||
setAdvancedFilters({
|
||||
...advancedFilters,
|
||||
'usd-lower': valueFrom,
|
||||
'usd-upper': valueTo,
|
||||
'usd-lower': Math.floor(valueFrom),
|
||||
'usd-upper': Math.ceil(valueTo),
|
||||
})
|
||||
} else {
|
||||
setAdvancedFilters({
|
||||
|
@ -404,14 +320,24 @@ const AdvancedFiltersForm = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-x-8 pt-4">
|
||||
<div className="col-span-2 lg:col-span-1">
|
||||
<Label text={t('activity:activity-type')} />
|
||||
<MultiSelectDropdown
|
||||
options={DEFAULT_PARAMS}
|
||||
selected={filters}
|
||||
toggleOption={toggleTypeOption}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 lg:col-span-1">
|
||||
<Label text={t('tokens')} />
|
||||
<div className="w-full lg:w-1/2 lg:pr-4">
|
||||
<MultiSelectDropdown
|
||||
options={symbols}
|
||||
selected={advancedFilters.symbol || []}
|
||||
toggleOption={toggleOption}
|
||||
toggleOption={toggleSymbolOption}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-4 w-full">
|
||||
<MangoDateRangePicker
|
||||
startDate={dateFrom}
|
||||
|
@ -424,7 +350,7 @@ const AdvancedFiltersForm = ({
|
|||
<div className="w-full">
|
||||
<Label text={t('activity:value-from')} />
|
||||
<Input
|
||||
type="text"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={valueFrom}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
|
@ -438,7 +364,7 @@ const AdvancedFiltersForm = ({
|
|||
<div className="w-full">
|
||||
<Label text={t('activity:value-to')} />
|
||||
<Input
|
||||
type="text"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={valueTo || ''}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
|
|
|
@ -179,11 +179,6 @@ const ActivityFeedTable = ({
|
|||
const isLiquidation =
|
||||
activity_type === 'liquidate_token_with_token'
|
||||
const isOpenbook = activity_type === 'openbook_trade'
|
||||
const activityName = isLiquidation
|
||||
? 'spot-liquidation'
|
||||
: isOpenbook
|
||||
? 'spot-trade'
|
||||
: activity_type
|
||||
const amounts = getCreditAndDebit(activity)
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
|
@ -207,7 +202,7 @@ const ActivityFeedTable = ({
|
|||
</p>
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
{t(`activity:${activityName}`)}
|
||||
{t(`activity:${activity_type}`)}
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
{amounts.credit.value}{' '}
|
||||
|
@ -223,8 +218,8 @@ const ActivityFeedTable = ({
|
|||
</Td>
|
||||
<Td
|
||||
className={`text-right font-mono ${
|
||||
activityName === 'swap' ||
|
||||
activityName === 'perp_trade' ||
|
||||
activity_type === 'swap' ||
|
||||
activity_type === 'perp_trade' ||
|
||||
isOpenbook
|
||||
? 'text-th-fgd-2'
|
||||
: value >= 0
|
||||
|
@ -233,8 +228,8 @@ const ActivityFeedTable = ({
|
|||
}`}
|
||||
>
|
||||
{value > 0 &&
|
||||
activityName !== 'swap' &&
|
||||
activityName !== 'perp_trade' &&
|
||||
activity_type !== 'swap' &&
|
||||
activity_type !== 'perp_trade' &&
|
||||
!isOpenbook
|
||||
? '+'
|
||||
: ''}
|
||||
|
@ -330,7 +325,6 @@ const MobileActivityFeedItem = ({
|
|||
const isLiquidation = activity_type === 'liquidate_token_with_token'
|
||||
const isSwap = activity_type === 'swap'
|
||||
const isPerp = activity_type === 'perp_trade'
|
||||
const activityName = isLiquidation ? 'spot-liquidation' : activity_type
|
||||
const value = getValue(activity)
|
||||
return (
|
||||
<div key={signature} className="border-b border-th-bkg-3 p-4">
|
||||
|
@ -346,7 +340,7 @@ const MobileActivityFeedItem = ({
|
|||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<p className="text-right text-xs">
|
||||
{t(`activity:${activityName}`)}
|
||||
{t(`activity:${activity_type}`)}
|
||||
</p>
|
||||
<p className="text-right font-mono text-sm text-th-fgd-1">
|
||||
{isLiquidation ? (
|
||||
|
|
|
@ -8,12 +8,14 @@ const MultiSelectDropdown = ({
|
|||
options,
|
||||
selected,
|
||||
toggleOption,
|
||||
placeholder,
|
||||
}: {
|
||||
options: string[]
|
||||
selected: string[]
|
||||
toggleOption: (x: string) => void
|
||||
placeholder?: string
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
const { t } = useTranslation(['activity', 'common'])
|
||||
return (
|
||||
<Popover className="relative w-full min-w-[120px]">
|
||||
{({ open }) => (
|
||||
|
@ -25,10 +27,15 @@ const MultiSelectDropdown = ({
|
|||
>
|
||||
<div className={`flex items-center justify-between`}>
|
||||
{selected.length ? (
|
||||
<span>{selected.toString().replace(/,/g, ', ')}</span>
|
||||
<span>
|
||||
{selected
|
||||
.map((v) => t(v))
|
||||
.toString()
|
||||
.replace(/,/g, ', ')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-th-fgd-4">
|
||||
{t('activity:select-tokens')}
|
||||
{placeholder || t('common:select')}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
|
@ -61,7 +68,7 @@ const MultiSelectDropdown = ({
|
|||
key={option}
|
||||
onChange={() => toggleOption(option)}
|
||||
>
|
||||
{option}
|
||||
{t(option)}
|
||||
</Checkbox>
|
||||
)
|
||||
})}
|
||||
|
|
|
@ -15,12 +15,13 @@
|
|||
"liquidation-type": "Liquidation Type",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"liquidate_token_with_token": "Spot Liquidation",
|
||||
"no-activity": "No account activity",
|
||||
"openbook_trade": "Spot Trade",
|
||||
"perps": "Perps",
|
||||
"perp_trade": "Perp Trade",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"spot-liquidation": "Spot Liquidation",
|
||||
"spot-trade": "Spot Trade",
|
||||
"swap": "Swap",
|
||||
"swaps": "Swaps",
|
||||
|
|
|
@ -98,6 +98,7 @@
|
|||
"repayment-amount": "Repayment Amount",
|
||||
"rolling-change": "24h Change",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
"select-deposit-token": "Select Deposit Token",
|
||||
"select-repay-token": "Select Repay Token",
|
||||
|
|
|
@ -15,12 +15,13 @@
|
|||
"liquidation-type": "Liquidation Type",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"liquidate_token_with_token": "Spot Liquidation",
|
||||
"no-activity": "No account activity",
|
||||
"openbook_trade": "Spot Trade",
|
||||
"perps": "Perps",
|
||||
"perp_trade": "Perp Trade",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"spot-liquidation": "Spot Liquidation",
|
||||
"spot-trade": "Spot Trade",
|
||||
"swap": "Swap",
|
||||
"swaps": "Swaps",
|
||||
|
|
|
@ -98,6 +98,7 @@
|
|||
"repayment-amount": "Repayment Amount",
|
||||
"rolling-change": "24h Change",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
"select-deposit-token": "Select Deposit Token",
|
||||
"select-repay-token": "Select Repay Token",
|
||||
|
|
|
@ -15,12 +15,13 @@
|
|||
"liquidation-type": "Liquidation Type",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"liquidate_token_with_token": "Spot Liquidation",
|
||||
"no-activity": "No account activity",
|
||||
"openbook_trade": "Spot Trade",
|
||||
"perps": "Perps",
|
||||
"perp_trade": "Perp Trade",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"spot-liquidation": "Spot Liquidation",
|
||||
"spot-trade": "Spot Trade",
|
||||
"swap": "Swap",
|
||||
"swaps": "Swaps",
|
||||
|
|
|
@ -98,6 +98,7 @@
|
|||
"repayment-amount": "Repayment Amount",
|
||||
"rolling-change": "24h Change",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
"select-deposit-token": "Select Deposit Token",
|
||||
"select-repay-token": "Select Repay Token",
|
||||
|
|
|
@ -15,12 +15,13 @@
|
|||
"liquidation-type": "Liquidation Type",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"liquidate_token_with_token": "Spot Liquidation",
|
||||
"no-activity": "No account activity",
|
||||
"openbook_trade": "Spot Trade",
|
||||
"perps": "Perps",
|
||||
"perp_trade": "Perp Trade",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"spot-liquidation": "Spot Liquidation",
|
||||
"spot-trade": "Spot Trade",
|
||||
"swap": "Swap",
|
||||
"swaps": "Swaps",
|
||||
|
|
|
@ -98,6 +98,7 @@
|
|||
"repayment-amount": "Repayment Amount",
|
||||
"rolling-change": "24h Change",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
"select-deposit-token": "Select Deposit Token",
|
||||
"select-repay-token": "Select Repay Token",
|
||||
|
|
|
@ -15,12 +15,13 @@
|
|||
"liquidation-type": "Liquidation Type",
|
||||
"liquidations": "Liquidations",
|
||||
"liquidation-details": "Liquidation Details",
|
||||
"liquidate_token_with_token": "Spot Liquidation",
|
||||
"no-activity": "No account activity",
|
||||
"openbook_trade": "Spot Trade",
|
||||
"perps": "Perps",
|
||||
"perp_trade": "Perp Trade",
|
||||
"reset-filters": "Reset Filters",
|
||||
"select-tokens": "Select Tokens",
|
||||
"spot-liquidation": "Spot Liquidation",
|
||||
"spot-trade": "Spot Trade",
|
||||
"swap": "Swap",
|
||||
"swaps": "Swaps",
|
||||
|
|
|
@ -98,6 +98,7 @@
|
|||
"repayment-amount": "Repayment Amount",
|
||||
"rolling-change": "24h Change",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
"select-deposit-token": "Select Deposit Token",
|
||||
"select-repay-token": "Select Repay Token",
|
||||
|
|
Loading…
Reference in New Issue