Fix loading of filtered contract events

ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui.stellar.expert",
   "private": true,
-  "version": "0.32.1",
+  "version": "0.32.4",
   "author": "StellarExpertTeam<info@stellar.expert>",
   "description": "Block explorer with analytics platform for Stellar Network that features granular historical statistics, detailed assets dashboard, and advanced payment locator.",
   "main": "app.js",
@@ -31,7 +31,7 @@
     "@stellar-expert/navigation": "^1.1.0",
     "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
     "@stellar-expert/tx-signers-inspector": "^1.8.2",
-    "@stellar-expert/ui-framework": "1.19.0",
+    "@stellar-expert/ui-framework": "1.19.1",
     "@stellar/stellar-base": "15.0.0",
     "@stellar/stellar-sdk": "15.0.1",
     "classnames": "^2.3.2",

ui/views/explorer/asset/asset-history-tabs-view.js

@@ -9,7 +9,7 @@ import AssetMarkets from './asset-markets-view'
 
 export default function AssetHistoryTabsView({asset}) {
     const {query} = navigation
-    const [operationsFilter, setOpFilter] = useState(query.filter || 'all')
+    const [operationsFilter, setOpFilter] = useState(query.filter || 'history')
 
     const operationsHistoryProps = {
         endpoint: `asset/${asset.descriptor.toString()}/history/${operationsFilter}`,

ui/views/explorer/contract/contract-events-view.js

@@ -5,14 +5,13 @@ import {
     useExplorerPaginatedApi,
     UtcTimestamp,
     ScVal,
-    formatExplorerLink,
-    parseFiltersFromQuery
+    formatExplorerLink
 } from '@stellar-expert/ui-framework'
 import GridDataActionsView from '../../components/grid-data-actions'
-import ContractFilterView from './contract-filter-view'
+import ContractFilterView, {parseContractFiltersFromQuery} from './contract-filter-view'
 
 export default withErrorBoundary(function ContractEventsView({contract}) {
-    const [filters, setFilters] = useState(parseFiltersFromQuery() || {})
+    const [filters, setFilters] = useState(parseContractFiltersFromQuery())
     const contractEvents = useExplorerPaginatedApi(
         {
             path: `contract/${contract}/events`,
@@ -23,8 +22,10 @@ export default withErrorBoundary(function ContractEventsView({contract}) {
             limit: 20,
             defaultQueryParams: {order: 'desc'}
         })
+    const {data, loading} = contractEvents
 
     return <div className="relative segment blank">
+        {!!loading && data.length > 0 && <div className="loader cover"/>}
         <ContractFilterView onChange={setFilters}/>
         <table className="table exportable micro-space">
             <thead>
@@ -36,7 +37,7 @@ export default withErrorBoundary(function ContractEventsView({contract}) {
             </tr>
             </thead>
             <tbody className="condensed">
-            {contractEvents.data.map(entry => {
+            {data.map(entry => {
                 const [operationId] = entry.id.split('-')
                 return <tr key={entry.paging_token}>
                 <td data-header="Topics: " style={{verticalAlign: 'top', minWidth: '15em'}}>
@@ -54,10 +55,8 @@ export default withErrorBoundary(function ContractEventsView({contract}) {
             </tr>})}
             </tbody>
         </table>
-        {!contractEvents.loaded && <div className="loader"/>}
-        {contractEvents.loaded && !contractEvents.data.length && <div className="dimmed text-center text-small">
-            (No event entries)
-        </div>}
-        {!!contractEvents.data.length && <GridDataActionsView model={contractEvents}/>}
+        {!!loading && <div className="loader"/>}
+        {!loading && !data.length && <div className="dimmed text-center text-small">(No event entries)</div>}
+        {!!data.length && <GridDataActionsView model={contractEvents}/>}
     </div>
 })

ui/views/explorer/contract/contract-filter-view.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {FilterView} from '@stellar-expert/ui-framework'
+import {FilterView, parseFiltersFromQuery} from '@stellar-expert/ui-framework'
 
 const fieldDescriptionMapping = {
     topic: {
@@ -21,6 +21,10 @@ const fieldDescriptionMapping = {
     }
 }
 
-export default function ContractFilterView({presetFilter, onChange}) {
-    return <FilterView presetFilter={presetFilter} fields={fieldDescriptionMapping} onChange={onChange}/>
+export function parseContractFiltersFromQuery() {
+    return parseFiltersFromQuery(fieldDescriptionMapping)
+}
+
+export default function ContractFilterView({onChange}) {
+    return <FilterView fields={fieldDescriptionMapping} onChange={onChange}/>
 }

ui/views/explorer/tx/tx-filter-view.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import {FilterView} from '@stellar-expert/ui-framework'
+import {FilterView, parseFiltersFromQuery} from '@stellar-expert/ui-framework'
+import deepMerge from 'deepmerge'
 
 const fieldDescriptionMapping = {
     account: {
@@ -66,6 +67,12 @@ const fieldDescriptionMapping = {
     }
 }
 
+export function parseTxFiltersFromQuery(presetFilter) {
+    return presetFilter ?
+        deepMerge(parseFiltersFromQuery(fieldDescriptionMapping), presetFilter) :
+        parseFiltersFromQuery(fieldDescriptionMapping)
+}
+
 export default function TxFilterView({presetFilter, onChange}) {
     return <FilterView presetFilter={presetFilter} fields={fieldDescriptionMapping} onChange={onChange}/>
 }

ui/views/explorer/tx/tx-history-view.js

@@ -1,21 +1,19 @@
 import React, {useCallback, useState} from 'react'
-import deepMerge from 'deepmerge'
 import {
     TxOperationsList,
     UtcTimestamp,
     ErrorBoundary,
     useTxHistory,
     parseTxDetails,
-    parseFiltersFromQuery,
     formatExplorerLink,
     withErrorBoundary
 } from '@stellar-expert/ui-framework'
 import appSettings from '../../../app-settings'
 import GridDataActionsView from '../../components/grid-data-actions'
-import TxFilterView from './tx-filter-view'
+import TxFilterView, {parseTxFiltersFromQuery} from './tx-filter-view'
 
 export default withErrorBoundary(function TxHistoryView({presetFilter}) {
-    const [filters, setFilters] = useState(presetFilter ? deepMerge(parseFiltersFromQuery(), presetFilter) : (parseFiltersFromQuery() || {}))
+    const [filters, setFilters] = useState(parseTxFiltersFromQuery(presetFilter))
     const updateLocation = useCallback(function (params) {
         const res = {...params}
         for (let [key, value] of Object.entries(params)) {