add openbook to activity filters

2023-01-04 23:10:36 +11:00 · 2023-01-04 23:10:36 +11:00 · fb7f4a7cf0
parent 13c5d48ae7
commit fb7f4a7cf0
13 changed files with 82 additions and 145 deletions
--- a/components/account/ActivityFeed.tsx
+++ b/components/account/ActivityFeed.tsx
@ -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,13 +320,23 @@ const AdvancedFiltersForm = ({

  return (
    <>
-      <Label text={t('tokens')} />
-      <div className="w-full lg:w-1/2 lg:pr-4">
-        <MultiSelectDropdown
-          options={symbols}
-          selected={advancedFilters.symbol || []}
-          toggleOption={toggleOption}
-        />
+      <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')} />
+          <MultiSelectDropdown
+            options={symbols}
+            selected={advancedFilters.symbol || []}
+            toggleOption={toggleSymbolOption}
+          />
+        </div>
      </div>
      <div className="my-4 w-full">
        <MangoDateRangePicker
@ -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>) =>
--- a/components/account/ActivityFeedTable.tsx
+++ b/components/account/ActivityFeedTable.tsx
@ -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 ? (
--- a/components/forms/MultiSelectDropdown.tsx
+++ b/components/forms/MultiSelectDropdown.tsx
@ -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>
                  )
                })}
--- a/public/locales/en/activity.json
+++ b/public/locales/en/activity.json
@ -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",
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -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",
--- a/public/locales/es/activity.json
+++ b/public/locales/es/activity.json
@ -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",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -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",
--- a/public/locales/ru/activity.json
+++ b/public/locales/ru/activity.json
@ -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",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -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",
--- a/public/locales/zh/activity.json
+++ b/public/locales/zh/activity.json
@ -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",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -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",
--- a/public/locales/zh_tw/activity.json
+++ b/public/locales/zh_tw/activity.json
@ -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",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -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",