Skip to content

feat(webhook-log): Add responsive mobile card view for webhook log entries#170

Open
NUMBER72857 wants to merge 1 commit into
Tx-wat:mainfrom
NUMBER72857:feat/104-webhook-log-mobile-cards
Open

feat(webhook-log): Add responsive mobile card view for webhook log entries#170
NUMBER72857 wants to merge 1 commit into
Tx-wat:mainfrom
NUMBER72857:feat/104-webhook-log-mobile-cards

Conversation

@NUMBER72857
Copy link
Copy Markdown

Summary

Replaces the overflowing horizontal table on narrow screens with a stacked card layout. Desktop keeps the existing table; mobile (sm:hidden) renders WebhookLogCard per entry.

Changes

  • components/WebhookLogCard.tsx:
    • Status badge (green/red/yellow, dark-mode safe Tailwind tokens)
    • Locale-aware timestamp via Intl.DateTimeFormat
    • Contract address and tx hash truncated with leading/trailing chars
    • Stellar Explorer link on tx hash — opens in new tab, noopener
  • __tests__/WebhookLogCard.test.tsx: 8 tests covering render, conditional sections, link attrs

Integration (2-line change in WebhookLog.tsx)

// Wrap existing table:
<div className="hidden sm:block">{ /* existing <table> */ }</div>

// Add below it:
<div className="sm:hidden space-y-3">
  {entries.map(entry => <WebhookLogCard key={entry.id} entry={entry} />)}
</div>

Closes #104

…reens (Tx-wat#104)

- WebhookLogCard: stacked card layout with event, status badge, timestamp,
  contract address (truncated), amount+asset, and Stellar Explorer tx link
- STATUS_STYLES: green/red/yellow colour tokens via Tailwind dark-mode safe classes
- truncateHash(): 8-char prefix/suffix with ellipsis for long hashes
- formatTimestamp(): locale-aware medium date + short time via Intl.DateTimeFormat
- 8 rendering tests: event, status classes, conditional sections, explorer link attrs

Integration (WebhookLog.tsx):
  <div className='hidden sm:block'>  <-- existing table -->  </div>
  <div className='sm:hidden space-y-3'>
    {entries.map(e => <WebhookLogCard key={e.id} entry={e} />)}
  </div>

Closes Tx-wat#104
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 30, 2026

@NUMBER72857 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add mobile card view for webhook log

2 participants