Smart Contract Tracking Dashboard Implementation

[JosueBrenes]

Overview

Implementation of a responsive Smart Contract Tracking dashboard following the provided Figma design. The dashboard should display contract metrics, recent contracts, and provide contract management capabilities.

Requirements

UI Components

• Implement dark theme using shadcn/ui components
• Create responsive layout with grid system for metrics cards
• Build data table for recent contracts using shadcn Table component
• Add status badges for contract states (Active, Pending, Disputed)

Features

1. Dashboard Metrics Cards:

   • Total Value Locked with percentage change
   • Active Contracts count with pending execution
   • Contract Events count with attention required
   • Disputes count with critical reviews

2. Recent Contracts Table:

   • Contract ID
   • Deposit Amount
   • Status (with color-coded badges)
   • Created Date
   • Last Event

3. Actions:

   • Create Contract button in header
   • Clickable contract rows for details

Design Specifications

Metrics Cards

interface MetricsData {
  totalValueLocked: {
    value: number;
    change: string;
  };
  activeContracts: {
    count: number;
    pending: number;
  };
  contractEvents: {
    count: number;
    requireAttention: number;
  };
  disputes: {
    count: number;
    criticalReviews: number;
  };
}


const mockContracts = [
  {
    id: "SC-2401",
    deposit: 2500.00,
    status: "active",
    createdDate: "2024-01-20",
    lastEvent: "Deposit Confirmed"
  },
  {
    id: "SC-2400",
    deposit: 1800.00,
    status: "pending",
    createdDate: "2024-01-19",
    lastEvent: "Awaiting Signature"
  },
  {
    id: "SC-2399",
    deposit: 3200.00,
    status: "disputed",
    createdDate: "2024-01-18",
    lastEvent: "Dispute Filed"
  }
];

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

[pragmaticAweds]

May I be assigned to this?

[Supa-mega]

Can I take this from here?

[CollinsC1O]

Could I take on this issue?

[JamesVictor-O]

My name is James Victor, and I am a frontend developer with years of experience in TypeScript, Next.js, React.js, Tailwind CSS, and Shadcn UI. I specialize in building responsive and user-friendly interfaces for dApps. My background includes working on complex projects that require attention to detail and adherence to design specifications.

For this task, I plan to implement the responsive Smart Contract Tracking Dashboard by closely following the provided Figma design. The dashboard will include features to display contract metrics, showcase recent contracts, and provide contract management capabilities. I will use my expertise in frontend technologies, including Shadcn UI and Tailwind CSS, to ensure the dashboard is both visually appealing and fully functional across devices, with an ETA of 14 hours max.

[Kingsuite]

Let me try this one!

[sanieni6]

Hi there, Luis here, i am a frontend dev, 2 years experience, i think i can be a good match for this issue, please check my github and my portfolio and let me know if i can help with this

[No-bodyq]

Let me try this one!

[Wendyalbert]

May I pick this up?

[armandocodecr]

Hey Team,

I’d love to take on the implementation of the Smart Contract Tracking Dashboard, focusing on a responsive and visually consistent design aligned with the Figma specifications. Here’s my plan:

🛠️ Proposed Implementation

1. UI Components
   • Dark Theme: Leverage shadcn/ui components to implement a dark theme consistent with the application’s design.
   • Responsive Grid Layout: Use a grid system for metrics cards to ensure responsiveness on all screen sizes.
   • Data Table: Build the recent contracts table with shadcn Table and include sortable columns for key fields like Contract ID, Deposit Amount, and Status.
   • Status Badges: Add color-coded badges to represent contract states (Active, Pending, Disputed).

2. Features
   • Dashboard Metrics Cards: Display key metrics such as:
   • Total Value Locked (with percentage change).
   • Active Contracts Count (including pending execution).
   • Contract Events (with attention-required count).
   • Disputes Count (with critical reviews).
   • Recent Contracts Table:
   • Display mock contract data (e.g., ID, Deposit, Status, Created Date, Last Event).
   • Implement clickable rows for viewing contract details.
   • Actions:
   • Add a “Create Contract” button in the header for quick access.
   • Make table rows interactive for contract management.

✅ Deliverables

• A responsive Smart Contract Tracking Dashboard with:
• Metrics cards and a recent contracts table.
• Color-coded status badges and actionable rows.
• Full adherence to the Figma design and shadcn/ui standards.
• Compliance with Git Guidelines for atomic commits and the required pull request format.

⏳ Timeline

I estimate completing this feature in 5 days, including review and adjustments.

Looking forward to your feedback and approval to start this task! 🚀

[Jagadeeshftw]

Proposal to Work on the Issue

I am eager to contribute to this issue and believe I am well-suited for the task, given my extensive experience in Cairo programming and building decentralized applications on StarkNet. My expertise spans across multiple domains crucial for this implementation:

• Smart Contracts & Blockchain Development: Proven expertise in StarkNet, Stellar, and Rust, with hands-on experience in developing secure and efficient smart contracts, blockchain integrations, and high-performance backend systems.
• Backend Engineering: Strong background in designing and managing scalable APIs, handling server-side operations, and ensuring robust backend performance for blockchain applications.
• Frontend Development: Proficient in building intuitive and responsive frontend interfaces using React and Next.js, ensuring seamless interaction between users and blockchain-based applications.

Why Assign This to Me?

I have a track record of delivering high-quality solutions efficiently, with a deep understanding of smart contract security, decentralized architectures, and full-stack development. My ability to bridge frontend, backend, and blockchain components ensures a well-rounded, optimized solution.

Estimated Timeline

I anticipate delivering a fully functional solution within 3 days. Please let me know if I can proceed.

I am excited about the opportunity to contribute and look forward to collaborating!

Best regards,
Jagadeesh B

[1nonlypiece]

Application for Contribution

I am excited about the opportunity to contribute to this issue and am confident that my expertise aligns well with the requirements. With a strong background in Cairo programming and decentralized application development on StarkNet, I bring a well-rounded skill set to deliver an effective solution.

ETA

I expect to have a working solution ready within 48 hours. Please let me know if I can proceed with the implementation.

[ShantelPeters]

Can I contribute to this one?

[B-uchi]

Can I take this issue?