Skip to content

Feature/create transaction card component#291

Open
QuiqueCode wants to merge 3 commits into
Kaizenode:mainfrom
QuiqueCode:feature/create-transaction-card-component
Open

Feature/create transaction card component#291
QuiqueCode wants to merge 3 commits into
Kaizenode:mainfrom
QuiqueCode:feature/create-transaction-card-component

Conversation

@QuiqueCode

Copy link
Copy Markdown

📝feat: implement TransactionCard component

🛠️ Issue

📖 Description

Implemented the TransactionCard component for displaying transaction information, including seller details, pricing, limits, payment methods, and purchase actions.

✅ Changes made

  • Built the TransactionCard component using Tailwind CSS with a fully responsive layout.
  • Added wallet address truncation for improved readability.
  • As an added enhancement, implemented copy-to-clipboard functionality with visual feedback to improve the user experience.
  • Generated avatar initials dynamically from the user prop.
  • Added the formatNumber utility to display values with thousands separators (5000 → 5.000).
  • As an added enhancement, introduced the lang prop ("es" | "en") to support label internationalization, with English as the default language.
  • Improved code organization by introducing dedicated types/ and utils/ directories.

🖼️ Media (screenshots/videos)

image image

📜 Additional Notes

Example Usage

<TransactionCard
  user="Dylan"
  address="GCB4YVQ7Z2M3K8R5N9T1W6X4A7B2C8D5E1F9G3H7J2K6L4M8N5P1Q9R"
  rating={4.95}
  operationCount={612}
  price={0.9201}
  available={5000}
  minLimit={200}
  maxLimit={3000}
  windowMinutes={20}
  paymentMethods={["SEPA", "Wise"]}
  onBuy={() => console.log("BUY")}
  lang="en"
/>

Important: The wallet address shown above is a fictitious example used for demonstration purposes only and does not belong to any individual or entity.

@QuiqueCode QuiqueCode marked this pull request as ready for review June 16, 2026 17:45
@diegoTech14

diegoTech14 commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Hello sir @QuiqueCode we need to wait this PR #289 because you need to use that button component. Then I'll merge it.

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.

Create transaction card component

2 participants