useActivity
(Available from v1.2.15)
A hook that fetches and manages transaction activity (fund, send, receive, etc.) from the Glyph widget. Supports filtering by transaction type and pagination.
Import
tsx
import {
useActivity,
ActivityType,
DB_OFFCHAIN_TX_TYPE,
DB_ONCHAIN_TX_TYPE,
} from "@use-glyph/sdk-react";Usage
tsx
import { useEffect } from "react";
function ActivityList() {
const {
transactionGroups,
fetchTransactions,
loadMore,
reset,
hasMore,
isLoading,
} = useActivity(10);
useEffect(() => {
fetchTransactions(true);
}, []);
return (
<div>
{transactionGroups.map((group) => (
<div key={group.label}>
<h3>{group.label}</h3>
{group.transactions.map((tx) => (
<div key={tx.id}>
{tx.type_text}: {tx.amount} {tx.amount_currency}
</div>
))}
</div>
))}
{hasMore && (
<button onClick={loadMore} disabled={isLoading}>
Load more
</button>
)}
</div>
);
}Filtering by Transaction Type
Pass an optional filter as the second argument to restrict activity to specific transaction types:
tsx
// Only show funding transactions
const { transactionGroups, fetchTransactions } = useActivity(10, {
types: [DB_OFFCHAIN_TX_TYPE.FUND],
});
// Only show send and receive
const { transactionGroups } = useActivity(10, {
types: [DB_ONCHAIN_TX_TYPE.SEND, DB_ONCHAIN_TX_TYPE.RECEIVE],
});Return Type
| Property | Type | Description |
|---|---|---|
| transactionGroups | ActivityGroup[] | Groups of transactions, typically grouped by date. |
| fetchTransactions | (reset?: boolean) => Promise<ActivityGroup[] | null> | Fetches transactions. Pass true to reset and fetch from the beginning. |
| loadMore | () => Promise<boolean> | Loads the next page of transactions. Returns true if more were loaded. |
| reset | () => Promise<void> | Resets and refetches from the beginning. |
| hasMore | boolean | Whether more transactions are available to load. |
| isLoading | boolean | Whether a fetch is in progress. |
Types
ActivityType
Transaction types from DB_OFFCHAIN_TX_TYPE and DB_ONCHAIN_TX_TYPE:
Offchain: FUND, SWAP, WITHDRAW
Onchain: SEND, RECEIVE, TRANSFER, PAY
ActivityItem
| Property | Type | Description |
|---|---|---|
| id | string | Unique transaction ID. |
| type | ActivityType | Transaction type. |
| type_text | string | Human-readable type label. |
| status | string | Transaction status. |
| status_text | string | null | Human-readable status. |
| status_color | string | Color hint for the status badge. |
| symbol | string | Token symbol. |
| value | string | Display value. |
| amount | string | Amount. |
| amount_currency | string | Currency/symbol for amount. |
| name_on_list | string | null | Display name for the transaction. |
| allowIdCopy | boolean | Whether the transaction ID can be copied. |
| detail_rows | string[] | Additional detail lines. |
| blockExplorerTxns | ActivityBlockExplorerItem[] | undefined | Links to block explorer. |
ActivityBlockExplorerItem
| Property | Type | Description |
|---|---|---|
| url | string | URL to the block explorer transaction. |
| text | string | Display text for the link. |
ActivityGroup
| Property | Type | Description |
|---|---|---|
| label | string | Group label (e.g. date). |
| transactions | ActivityItem[] | Transactions in this group. |
Notes
- This hook must be used within a
GlyphProvider. - Activity is fetched for the current chain.
- The hook supports both grouped and legacy (ungrouped) API response formats.
