filter transactions

radixdlt · Oct 21, 2024 · b5be8fc · b5be8fc
1 parent ed792ae
commit b5be8fc
Show file tree

Hide file tree

Showing 19 changed files with 716 additions and 98 deletions.
diff --git a/apps/dashboard/src/lib/recent-transactions/EntityFilterCard.svelte b/apps/dashboard/src/lib/recent-transactions/EntityFilterCard.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import InputNew from '@components/_base/input/InputNew.svelte'
+  import FilterCard from './FilterCard.svelte'
+  import ButtonNew from '@components/_base/button/ButtonNew.svelte'
+  import { shortenAddress } from '@utils'
+
+  export let title: string
+  export let description: string
+  export let values: string[]
+
+  let input = ''
+</script>
+
+<FilterCard {title} {description} appliedFilters={values.map(shortenAddress)}>
+  <div class="input">
+    <div class="textinput">
+      <InputNew border bind:value={input} />
+    </div>
+
+    <div class="button">
+      <ButtonNew
+        on:click={() => {
+          values = [...values, input]
+          input = ''
+        }}>Add</ButtonNew
+      >
+    </div>
+
+    <div class="button">
+      <ButtonNew
+        on:click={() => {
+          values = []
+        }}>Clear All</ButtonNew
+      >
+    </div>
+  </div>
+</FilterCard>
+
+<style lang="scss">
+  .input {
+    display: flex;
+    margin-top: var(--spacing-xl);
+    gap: var(--spacing-xl);
+
+    .textinput {
+      width: 100%;
+    }
+
+    .button {
+      width: 5rem;
+    }
+  }
+</style>
diff --git a/apps/dashboard/src/lib/recent-transactions/EventFilterCard.svelte b/apps/dashboard/src/lib/recent-transactions/EventFilterCard.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type {
+    StreamTransactionsRequestEventFilterItem,
+    StreamTransactionsRequestEventFilterItemEventEnum
+  } from '@radixdlt/babylon-gateway-api-sdk'
+  import FilterCard from './FilterCard.svelte'
+  import InputNew from '@components/_base/input/InputNew.svelte'
+  import SimplePicker from '@components/_base/picker/simple-picker/SimplePicker.svelte'
+  import ButtonNew from '@components/_base/button/ButtonNew.svelte'
+  import { shortenAddress } from '@utils'
+
+  export let title: string
+  export let description: string
+  export let events: StreamTransactionsRequestEventFilterItem[] = []
+
+  let emitterAddress = ''
+  let resourceAddress = ''
+
+  let selected: {
+    label: string
+    value: StreamTransactionsRequestEventFilterItemEventEnum
+  }
+</script>
+
+<FilterCard
+  {title}
+  {description}
+  appliedFilters={events.map(
+    (event) =>
+      `${event.event} ${shortenAddress(event.emitter_address)} ${shortenAddress(
+        event.resource_address
+      )}`
+  )}
+>
+  <div class="input">
+    <SimplePicker
+      bind:selected
+      options={[
+        {
+          label: 'Withdrawal',
+          value: 'Withdrawal',
+          default: true
+        },
+        {
+          label: 'Deposit',
+          value: 'Deposit'
+        }
+      ]}
+    />
+
+    <div class="textinput">
+      <InputNew border bind:value={emitterAddress} placeholder="Emitter" />
+    </div>
+
+    <div class="textinput">
+      <InputNew border bind:value={resourceAddress} placeholder="Resource" />
+    </div>
+  </div>
+  <div>
+    <div class="buttons">
+      <ButtonNew
+        on:click={() => {
+          events = [
+            ...events,
+            {
+              event: selected.value,
+              emitter_address: emitterAddress,
+              resource_address: resourceAddress
+            }
+          ]
+          emitterAddress = ''
+          resourceAddress = ''
+        }}
+      >
+        Add
+      </ButtonNew>
+
+      <ButtonNew
+        on:click={() => {
+          events = []
+        }}>Clear All</ButtonNew
+      >
+    </div>
+  </div>
+</FilterCard>
+
+<style lang="scss">
+  .input {
+    display: flex;
+    margin: var(--spacing-xl) 0;
+    gap: var(--spacing-xl);
+  }
+
+  .buttons {
+    display: flex;
+    gap: var(--spacing-md);
+  }
+</style>
diff --git a/apps/dashboard/src/lib/recent-transactions/FilterCard.svelte b/apps/dashboard/src/lib/recent-transactions/FilterCard.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Pill from '@components/_base/pills-menu/Pill.svelte'
+
+  export let title: string
+  export let description: string
+  export let appliedFilters: string[] = []
+</script>
+
+<div class="card">
+  <div class="text">
+    <div class="title">
+      {title}
+    </div>
+    <div class="description">
+      {description}
+    </div>
+    <slot />
+
+    <div class="pills">
+      {#each appliedFilters as filter}
+        <Pill disabled={Promise.resolve(true)}>{filter}</Pill>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .card {
+    border-radius: var(--border-radius-lg);
+    border: var(--border) var(--theme-border);
+    width: 100%;
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow);
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+
+    .title {
+      font-size: var(--text-lg);
+      font-weight: var(--font-weight-bold-3);
+    }
+
+    .description {
+      font-size: var(--text-md);
+      font-weight: var(--font-weight-bold-1);
+      color: var(--theme-subtext);
+    }
+  }
+
+  .pills {
+    margin-top: var(--spacing-xl);
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+
+    :global(.pill) {
+      background: var(--theme-surface-3);
+    }
+  }
+</style>
diff --git a/apps/dashboard/src/lib/recent-transactions/OptionsFilter.svelte b/apps/dashboard/src/lib/recent-transactions/OptionsFilter.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import SimplePicker from '@components/_base/picker/simple-picker/SimplePicker.svelte'
+  import FilterCard from './FilterCard.svelte'
+  import ButtonNew from '@components/_base/button/ButtonNew.svelte'
+
+  export let title: string
+  export let description: string
+  export let options: { label: string; value: string }[] = []
+  export let selected: { label: string; value: string } | undefined
+</script>
+
+<FilterCard {title} {description}>
+  <div class="picker">
+    <SimplePicker bind:selected {options} />
+  </div>
+  <ButtonNew
+    on:click={() => {
+      selected = undefined
+    }}>Clear</ButtonNew
+  >
+</FilterCard>
+
+<style>
+  .picker {
+    margin: var(--spacing-xl) 0;
+  }
+</style>
diff --git a/apps/dashboard/src/lib/recent-transactions/RecentNetworkTransactions.svelte b/apps/dashboard/src/lib/recent-transactions/RecentNetworkTransactions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getRecentNetworkTransactions } from '@api/_deprecated/gateway'
   import PaginatedTable from '@components/_base/table/basic-table/PaginatedTable.svelte'
-  import type { ComponentProps } from 'svelte'
+  import { createEventDispatcher, type ComponentProps } from 'svelte'
   import {
     chevronColumnDefinition,
     dateAndTxIdColumnDefinition,
@@ -19,11 +19,10 @@
   import ResponsiveTableCell from '@components/_base/table/basic-table/ResponsiveTableCell.svelte'
   import InfoBar from '@components/info-bar/InfoBar.svelte'
 
-  const queryFunction = (cursor?: string) => {
-    return getRecentNetworkTransactions(cursor).unwrapOr({
+  export let queryFunction = (cursor?: string) =>
+    getRecentNetworkTransactions(cursor).unwrapOr({
       items: []
     })
-  }
 
   const feeColumnDefinition = getFeeColumnDefinition()
 

diff --git a/apps/dashboard/src/lib/recent-transactions/RecentTransactions.svelte b/apps/dashboard/src/lib/recent-transactions/RecentTransactions.svelte
@@ -7,7 +7,6 @@
     recentTransactionsTableConfig
   } from './ColumnDefinition.svelte'
   import BalanceChangesColumn from './BalanceChangesColumn.svelte'
-  import ExportCsvButton from '@dashboard-pages/search-pages/export-csv-button/ExportCsvButton.svelte'
   import { getRecentTransactions } from '@api/_deprecated/gateway'
   import PaginatedTable from '@components/_base/table/basic-table/PaginatedTable.svelte'
   import type { ComponentProps } from 'svelte'
@@ -29,12 +28,17 @@
   import InfoBar from '@components/info-bar/InfoBar.svelte'
 
   export let entityAddress: string
+  export let filters: Parameters<typeof getRecentTransactions>[2] = undefined
 
-  const queryFunction = (cursor?: string) =>
+  let queryFunction: (
+    cursor?: string
+  ) => ReturnType<typeof createBalanceChanges>
+
+  $: queryFunction = (cursor?: string) =>
     createBalanceChanges(
       entityAddress,
       createManifestClassProperty(
-        getRecentTransactions(entityAddress, cursor).then((data) => {
+        getRecentTransactions(entityAddress, cursor, filters).then((data) => {
           fillResourceCacheWithTransactionsData(data)
           return data
         })
@@ -76,10 +80,6 @@
     (entry.withdrawals.length === 0 && entry.deposits.length === 0)
 </script>
 
-<div class="export-button">
-  <ExportCsvButton {entityAddress} />
-</div>
-
 <PaginatedTable
   --table-row-cell-vertical-padding="25px"
   config={recentTransactionsTableConfig}
@@ -120,18 +120,3 @@
     {/if}
   </svelte:fragment>
 </PaginatedTable>
-
-<style lang="scss">
-  .export-button {
-    text-align: right;
-    margin-bottom: var(--spacing-xl);
-
-    @include mixins.minWidthMedia(820px) {
-      transform: translateY(-1rem);
-      position: absolute;
-      right: 0;
-      transform: none;
-      top: 90px;
-    }
-  }
-</style>