Update design of type select

oasisprotocol · Jan 10, 2025 · 08d4392 · 08d4392
1 parent 3529d17
commit 08d4392
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 37 deletions.
diff --git a/src/app/components/Transactions/RuntimeTransactions.tsx b/src/app/components/Transactions/RuntimeTransactions.tsx
@@ -4,10 +4,7 @@ import Box from '@mui/material/Box'
 import LockIcon from '@mui/icons-material/Lock'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { StatusIcon } from '../StatusIcon'
-import {
-  getRuntimeTxMethodOptions,
-  RuntimeTransactionMethod,
-} from '../../components/RuntimeTransactionMethod'
+import { RuntimeTransactionMethod } from '../../components/RuntimeTransactionMethod'
 import { RoundedBalance } from '../../components/RoundedBalance'
 import { RuntimeTransaction } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
@@ -19,8 +16,6 @@ import { doesAnyOfTheseLayersSupportEncryptedTransactions } from '../../../types
 import { TransactionEncryptionStatus } from '../TransactionEncryptionStatus'
 import { Age } from '../Age'
 import { TransferIcon } from '../TransferIcon'
-import { Select } from '../Select'
-import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 
 type TableRuntimeTransaction = RuntimeTransaction & {
   markAsNew?: boolean
@@ -39,31 +34,6 @@ type TransactionsProps = {
   limit: number
   pagination: false | TablePaginationProps
   verbose?: boolean
-  withMethodFilter?: boolean
-}
-
-const FilteringTypeHeader: FC = () => {
-  const { t } = useTranslation()
-  const [wantedType, setWantedType] = useTypedSearchParam<string>('method', 'any', {
-    deleteParams: ['page'],
-  })
-  return (
-    <Box
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 10,
-      }}
-    >
-      {t('common.type')}
-      <Select
-        options={[{ value: 'any', label: 'Any type' }, ...getRuntimeTxMethodOptions(t)]}
-        defaultValue={wantedType}
-        handleChange={setWantedType as any}
-      />
-    </Box>
-  )
 }
 
 export const RuntimeTransactions: FC<TransactionsProps> = ({
@@ -73,7 +43,6 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
   transactions,
   ownAddress,
   verbose = true,
-  withMethodFilter = false,
 }) => {
   const { t } = useTranslation()
   // We only want to show encryption status of we are listing transactions
@@ -91,7 +60,7 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
     { key: 'age', content: t('common.age'), align: TableCellAlign.Right },
     ...(verbose
       ? [
-          { key: 'type', content: withMethodFilter ? <FilteringTypeHeader /> : t('common.type') },
+          { key: 'type', content: t('common.type') },
           { key: 'from', content: t('common.from'), width: '150px' },
           { key: 'to', content: t('common.to'), width: '150px' },
           { key: 'value', align: TableCellAlign.Right, content: t('common.amount'), width: '250px' },

diff --git a/src/app/components/Transactions/TransactionTypeFilter.tsx b/src/app/components/Transactions/TransactionTypeFilter.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
+import { getRuntimeTxMethodOptions } from '../RuntimeTransactionMethod'
+import { useTranslation } from 'react-i18next'
+import { Select } from '../Select'
+import Typography from '@mui/material/Typography'
+
+const FilterLabel: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Typography
+      component={'span'}
+      sx={{
+        fontStyle: 'normal',
+        fontWeight: 700,
+        fontSize: 16,
+        lineHeight: '150%',
+        marginRight: 4,
+      }}
+    >
+      {t('transactions.filterByType')}
+    </Typography>
+  )
+}
+
+export const TransactionTypeFilter: FC = () => {
+  const { t } = useTranslation()
+  const [wantedType, setWantedType] = useTypedSearchParam<string>('method', 'all', {
+    deleteParams: ['page'],
+  })
+  return (
+    <Select
+      light={true}
+      label={<FilterLabel />}
+      options={[{ value: 'all', label: 'All' }, ...getRuntimeTxMethodOptions(t)]}
+      defaultValue={wantedType}
+      handleChange={setWantedType as any}
+    />
+  )
+}
diff --git a/src/app/pages/RuntimeTransactionsPage/index.tsx b/src/app/pages/RuntimeTransactionsPage/index.tsx
@@ -19,6 +19,7 @@ import { VerticalList } from '../../components/VerticalList'
 import { getFiatCurrencyForScope } from '../../../config'
 import { useRuntimeListBeforeDate } from '../../hooks/useListBeforeDate'
 import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
+import { TransactionTypeFilter } from '../../components/Transactions/TransactionTypeFilter'
 
 const limit = NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
 
@@ -27,7 +28,7 @@ export const RuntimeTransactionsPage: FC = () => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const pagination = useSearchParamsPagination('page')
-  const [wantedMethod] = useTypedSearchParam('method', 'any')
+  const [wantedMethod] = useTypedSearchParam('method', 'all')
   const offset = (pagination.selectedPage - 1) * limit
   const scope = useRequiredScopeParam()
   const enablePolling = offset === 0
@@ -54,7 +55,7 @@ export const RuntimeTransactionsPage: FC = () => {
       limit: tableView === TableLayout.Vertical ? offset + limit : limit,
       offset: tableView === TableLayout.Vertical ? 0 : offset,
       before: enablePolling ? undefined : beforeDate,
-      method: wantedMethod === 'any' ? undefined : wantedMethod,
+      method: wantedMethod === 'all' ? undefined : wantedMethod,
     },
     {
       query: {
@@ -103,13 +104,18 @@ export const RuntimeTransactionsPage: FC = () => {
       {!isMobile && <Divider variant="layout" />}
       <SubPageCard
         title={t('transactions.latest')}
-        action={isMobile && <TableLayoutButton tableView={tableView} setTableView={setTableView} />}
+        action={
+          isMobile ? (
+            <TableLayoutButton tableView={tableView} setTableView={setTableView} />
+          ) : (
+            <TransactionTypeFilter />
+          )
+        }
         noPadding={tableView === TableLayout.Vertical}
         mainTitle
       >
         {tableView === TableLayout.Horizontal && (
           <RuntimeTransactions
-            withMethodFilter={true}
             transactions={data?.data.transactions}
             isLoading={isLoading}
             limit={limit}

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -419,6 +419,7 @@
       "publicKey": "Public Key",
       "resultNonce": "Result Nonce"
     },
+    "filterByType": "Filter by type",
     "latest": "Latest Transactions",
     "method": {
       "stakingTransfer": "Transfer",