[Dashboard] Feature: Add initial insight UI #5435

AmineAfia · 2024-11-15T14:39:08Z

Problem solved

BLOCK-436

This PR adds an initial UI for insight to give visibility to insight in the platform. The first three blueprints are Data APIs available for all users. The next iteration will add the ability to create a new blueprint.

PR-Codex overview

This PR introduces a new Insight page under the project structure, adding components for displaying blueprints, including a header and an explorer. It also implements authentication redirection and a loading state for better user experience.

Detailed summary

Added a new route for Insight in layout.tsx.
Created BlueprintsPageHeader component for the Insight page.
Implemented Page component with authentication check and redirection logic.
Developed BlueprintsPage component to display blueprints with a loading state.
Created getProjectBlueprints function to fetch blueprint data.
Added BlueprintsExplorer component to list blueprints with a fallback message.
Implemented BlueprintCard for individual blueprint display.
Included loading spinner in Loading component.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui

PR-Codex overview

This PR introduces a new Insight page within the project dashboard, allowing users to view and manage blueprints. It includes authentication checks, a header component, and displays a list of available blueprints with relevant information.

Detailed summary

Added route for Insight page.
Implemented authentication check in Page component.
Created BlueprintsPageHeader for the Insight page.
Developed BlueprintsPage to render header and blueprints.
Added getProjectBlueprints function to fetch blueprint data.
Implemented BlueprintsExplorer to display blueprints.
Created BlueprintCard for individual blueprint representation.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui

PR-Codex overview

This PR introduces a new Insight page in the application, featuring blueprints for transaction data, events, and tokens. It includes authentication checks, a header component, and a display for available blueprints.

Detailed summary

Added Insight route to the application.
Created Page component with authentication redirection.
Introduced BlueprintsPageHeader for the Insight page.
Implemented BlueprintsPage to display BillingAlerts and blueprints.
Added BlueprintsExplorer to list blueprints with a card interface.
Defined getProjectBlueprints function to retrieve mock blueprint data.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

vercel · 2024-11-15T14:39:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
thirdweb-www	✅ Ready (Inspect)	Visit Preview	✅ 3 resolved	Nov 20, 2024 1:44pm

3 Skipped Deployments

Name	Status	Updated (UTC)
docs-v2	⬜️ Skipped (Inspect)	Nov 20, 2024 1:44pm
thirdweb_playground	⬜️ Skipped (Inspect)	Nov 20, 2024 1:44pm
wallet-ui	⬜️ Skipped (Inspect)	Nov 20, 2024 1:44pm

changeset-bot · 2024-11-15T14:39:13Z

⚠️ No Changeset found

Latest commit: 4c8333d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

graphite-app · 2024-11-15T14:39:15Z

Your org has enabled the Graphite merge queue for merging into main

Add the label “merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

AmineAfia · 2024-11-15T14:39:24Z

[Dashboard] Feature: Add initial insight UI #5435 👈 (View in Graphite)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPage.tsx

codecov · 2024-11-15T14:40:53Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 45.49%. Comparing base (f368793) to head (c170b81).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5435   +/-   ##
=======================================
  Coverage   45.49%   45.49%           
=======================================
  Files        1070     1070           
  Lines       55770    55770           
  Branches     4034     4034           
=======================================
  Hits        25372    25372           
  Misses      29711    29711           
  Partials      687      687

Flag	Coverage Δ		*Carryforward flag
legacy_packages	`65.68% <ø> (ø)`		Carriedforward from f368793
packages	`40.60% <ø> (ø)`

*This pull request uses carry forward flags. Click here to find out more.

---- 🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

github-actions · 2024-11-15T14:42:45Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	44.97 KB (0%)	900 ms (0%)	2.8 s (+30.07% 🔺)	3.7 s
thirdweb (cjs)	105.01 KB (0%)	2.2 s (0%)	7.2 s (+37.46% 🔺)	9.3 s
thirdweb (minimal + tree-shaking)	5.6 KB (0%)	113 ms (0%)	178 ms (-9.5% 🔽)	290 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	41 ms (-45.99% 🔽)	51 ms
thirdweb/react (minimal + tree-shaking)	18.38 KB (0%)	368 ms (0%)	357 ms (+0.74% 🔺)	724 ms

## Problem solved BLOCK-436 This PR adds an initial UI for insight to give visibility to insight in the platform. The first three blueprints are Data APIs available for all users. The next iteration will add the ability to create a new blueprint. ![CleanShot 2024-11-15 at [email protected]](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dGj3ureqJk84bcvq1s10/8d0fb6d9-f80b-414a-925d-e6ed68aa6bfb.png) --- ## PR-Codex overview This PR introduces a new `Insight` page under the project structure, adding components for displaying blueprints, including a header and an explorer. It also implements authentication redirection and a loading state for better user experience. ### Detailed summary - Added a new route for `Insight` in `layout.tsx`. - Created `BlueprintsPageHeader` component for the `Insight` page. - Implemented `Page` component with authentication check and redirection logic. - Developed `BlueprintsPage` component to display blueprints with a loading state. - Created `getProjectBlueprints` function to fetch blueprint data. - Added `BlueprintsExplorer` component to list blueprints with a fallback message. - Implemented `BlueprintCard` for individual blueprint display. - Included loading spinner in `Loading` component. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR introduces a new `Insight` page to the dashboard, enhancing the team project features with insights into blueprints. It includes user authentication, a header component, and displays blueprints with relevant data. ### Detailed summary - Added `Insight` route in `layout.tsx`. - Created `Page` component in `page.tsx` for rendering insights. - Implemented user authentication redirect if not logged in. - Developed `BlueprintsPageHeader` for page title and button. - Added `BlueprintsPage` to display billing alerts and blueprints. - Defined `getProjectBlueprints` to fetch blueprint data. - Created `BlueprintsExplorer` to list blueprints with a card layout. - Implemented `BlueprintCard` for individual blueprint display. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR introduces a new `Insight` page for a project within a team dashboard, featuring a header and blueprint exploration components. It includes user authentication redirection and displays available blueprints with relevant information. ### Detailed summary - Added a new route for `Insight` in `layout.tsx`. - Created `BlueprintsPageHeader` component for the `Insight` page. - Implemented `Page` function to handle user authentication and redirection. - Developed `BlueprintsPage` to display blueprints and alerts. - Created `getProjectBlueprints` function to fetch blueprint data. - Added `BlueprintsExplorer` component to list blueprints. - Implemented `BlueprintCard` to display individual blueprint details. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

## Problem solved BLOCK-436 This PR adds an initial UI for insight to give visibility to insight in the platform. The first three blueprints are Data APIs available for all users. The next iteration will add the ability to create a new blueprint. ![CleanShot 2024-11-15 at [email protected]](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dGj3ureqJk84bcvq1s10/8d0fb6d9-f80b-414a-925d-e6ed68aa6bfb.png) --- ## PR-Codex overview This PR introduces a new `Insight` page under the project structure, adding components for displaying blueprints, including a header and an explorer. It also implements authentication redirection and a loading state for better user experience. ### Detailed summary - Added a new route for `Insight` in `layout.tsx`. - Created `BlueprintsPageHeader` component for the `Insight` page. - Implemented `Page` component with authentication check and redirection logic. - Developed `BlueprintsPage` component to display blueprints with a loading state. - Created `getProjectBlueprints` function to fetch blueprint data. - Added `BlueprintsExplorer` component to list blueprints with a fallback message. - Implemented `BlueprintCard` for individual blueprint display. - Included loading spinner in `Loading` component. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR introduces a new `Insight` feature to the dashboard, which includes a dedicated page for insights with blueprints and a header component. It also implements authentication checks and displays billing alerts. ### Detailed summary - Added a new route for `Insight`. - Created `Page` component with authentication check and redirection. - Introduced `BlueprintsPage` component displaying billing alerts and blueprints. - Implemented `BlueprintsPageHeader` with a disabled button. - Added `BlueprintsExplorer` for listing blueprints. - Defined `BlueprintCard` for individual blueprint display. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR introduces a new `Insight` page to the dashboard, enhancing the team project features with insights into blueprints. It includes user authentication, a header component, and displays blueprints with relevant data. ### Detailed summary - Added `Insight` route in `layout.tsx`. - Created `Page` component in `page.tsx` for rendering insights. - Implemented user authentication redirect if not logged in. - Developed `BlueprintsPageHeader` for page title and button. - Added `BlueprintsPage` to display billing alerts and blueprints. - Defined `getProjectBlueprints` to fetch blueprint data. - Created `BlueprintsExplorer` to list blueprints with a card layout. - Implemented `BlueprintCard` for individual blueprint display. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

## Problem solved BLOCK-436 This PR adds an initial UI for insight to give visibility to insight in the platform. The first three blueprints are Data APIs available for all users. The next iteration will add the ability to create a new blueprint. ![CleanShot 2024-11-15 at [email protected]](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dGj3ureqJk84bcvq1s10/8d0fb6d9-f80b-414a-925d-e6ed68aa6bfb.png) --- ## PR-Codex overview This PR introduces a new `Insight` page under the project structure, adding components for displaying blueprints, including a header and an explorer. It also implements authentication redirection and a loading state for better user experience. ### Detailed summary - Added a new route for `Insight` in `layout.tsx`. - Created `BlueprintsPageHeader` component for the `Insight` page. - Implemented `Page` component with authentication check and redirection logic. - Developed `BlueprintsPage` component to display blueprints with a loading state. - Created `getProjectBlueprints` function to fetch blueprint data. - Added `BlueprintsExplorer` component to list blueprints with a fallback message. - Implemented `BlueprintCard` for individual blueprint display. - Included loading spinner in `Loading` component. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR adds a new `Insight` page to the dashboard for a project, featuring a `BlueprintsPage` that displays blueprints and a header. It includes authentication checks and a redirect to the login page if the user is not authenticated. ### Detailed summary - Added a new route for `Insight` in `layout.tsx`. - Created `Page` component in `page.tsx` with authentication check. - Added `BlueprintsPageHeader` component for the `Insight` page. - Implemented `BlueprintsPage` to display billing alerts and blueprints. - Created `getProjectBlueprints` function to fetch blueprint data. - Developed `BlueprintsExplorer` component to list blueprints. - Added `BlueprintCard` component to display individual blueprints. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  Linear Ticket: https://linear.app/thirdweb/issue/BLOCK-436/implement-initial-insight-ui  --- ## PR-Codex overview This PR introduces a new `Insight` feature to the dashboard, which includes a dedicated page for insights with blueprints and a header component. It also implements authentication checks and displays billing alerts. ### Detailed summary - Added a new route for `Insight`. - Created `Page` component with authentication check and redirection. - Introduced `BlueprintsPage` component displaying billing alerts and blueprints. - Implemented `BlueprintsPageHeader` with a disabled button. - Added `BlueprintsExplorer` for listing blueprints. - Defined `BlueprintCard` for individual blueprint display. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

vercel bot temporarily deployed to Preview – thirdweb_playground November 15, 2024 14:39 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 15, 2024 14:39 Inactive

vercel bot temporarily deployed to Preview – wallet-ui November 15, 2024 14:39 Inactive

github-actions bot added the Dashboard Involves changes to the Dashboard. label Nov 15, 2024

graphite-app bot reviewed Nov 15, 2024

View reviewed changes

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/components/BlueprintsPage.tsx Outdated Show resolved Hide resolved

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from 3541cc2 to bb3fe0b Compare November 15, 2024 14:46

vercel bot temporarily deployed to Preview – docs-v2 November 15, 2024 14:46 Inactive

vercel bot temporarily deployed to Preview – wallet-ui November 15, 2024 14:46 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground November 15, 2024 14:46 Inactive

vercel bot deployed to Preview – thirdweb-www November 15, 2024 15:01 View deployment

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from bb3fe0b to 06c3700 Compare November 15, 2024 16:00

vercel bot temporarily deployed to Preview – wallet-ui November 15, 2024 16:00 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 15, 2024 16:00 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground November 15, 2024 16:00 Inactive

vercel bot deployed to Preview – thirdweb-www November 15, 2024 16:09 View deployment

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from 06c3700 to be13fe7 Compare November 15, 2024 16:09

vercel bot temporarily deployed to Preview – docs-v2 November 15, 2024 16:09 Inactive

vercel bot temporarily deployed to Preview – wallet-ui November 15, 2024 16:09 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground November 15, 2024 16:09 Inactive

AmineAfia marked this pull request as ready for review November 15, 2024 16:11

AmineAfia requested review from MananTank, jnsdls and joaquim-verges as code owners November 15, 2024 16:11

AmineAfia changed the title ~~Add initial insight UI~~ [BLOCK-436] Add initial insight UI Nov 15, 2024

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from a61f0db to 9128553 Compare November 19, 2024 22:04

vercel bot temporarily deployed to Preview – wallet-ui November 19, 2024 22:04 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground November 19, 2024 22:04 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 19, 2024 22:04 Inactive

vercel bot deployed to Preview – thirdweb-www November 19, 2024 22:20 View deployment

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from 9128553 to c170b81 Compare November 19, 2024 23:34

vercel bot temporarily deployed to Preview – thirdweb_playground November 19, 2024 23:34 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 19, 2024 23:34 Inactive

vercel bot temporarily deployed to Preview – wallet-ui November 19, 2024 23:34 Inactive

vercel bot deployed to Preview – thirdweb-www November 19, 2024 23:56 View deployment

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from c170b81 to 37b9b37 Compare November 20, 2024 10:51

vercel bot temporarily deployed to Preview – wallet-ui November 20, 2024 10:51 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 20, 2024 10:51 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground November 20, 2024 10:51 Inactive

vercel bot had a problem deploying to Preview – thirdweb-www November 20, 2024 10:54 Failure

AmineAfia force-pushed the 11-15-add_initial_insight_ui branch from 37b9b37 to 4c8333d Compare November 20, 2024 13:34

vercel bot temporarily deployed to Preview – thirdweb_playground November 20, 2024 13:34 Inactive

vercel bot temporarily deployed to Preview – docs-v2 November 20, 2024 13:34 Inactive

vercel bot temporarily deployed to Preview – wallet-ui November 20, 2024 13:34 Inactive

vercel bot deployed to Preview – thirdweb-www November 20, 2024 13:44 View deployment

graphite-app bot merged commit 4c8333d into main Nov 20, 2024
29 checks passed

graphite-app bot deleted the 11-15-add_initial_insight_ui branch November 20, 2024 15:16

vercel bot temporarily deployed to Production – wallet-ui November 20, 2024 15:17 Inactive

vercel bot temporarily deployed to Production – docs-v2 November 20, 2024 15:17 Inactive

vercel bot temporarily deployed to Production – thirdweb_playground November 20, 2024 15:17 Inactive

vercel bot deployed to Production – thirdweb-www November 20, 2024 15:25 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Dashboard] Feature: Add initial insight UI #5435

[Dashboard] Feature: Add initial insight UI #5435

AmineAfia commented Nov 15, 2024 •

edited by pr-codex bot

Loading

Uh oh!

vercel bot commented Nov 15, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 15, 2024 •

edited

Loading

Uh oh!

graphite-app bot commented Nov 15, 2024

Uh oh!

AmineAfia commented Nov 15, 2024

Uh oh!

Uh oh!

codecov bot commented Nov 15, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Nov 15, 2024 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Dashboard] Feature: Add initial insight UI #5435

[Dashboard] Feature: Add initial insight UI #5435

Conversation

AmineAfia commented Nov 15, 2024 • edited by pr-codex bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem solved

PR-Codex overview

Detailed summary

PR-Codex overview

Detailed summary

PR-Codex overview

Detailed summary

Uh oh!

vercel bot commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

graphite-app bot commented Nov 15, 2024

Your org has enabled the Graphite merge queue for merging into main

Uh oh!

AmineAfia commented Nov 15, 2024

Uh oh!

Uh oh!

codecov bot commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AmineAfia commented Nov 15, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Nov 15, 2024 •

edited

Loading

changeset-bot bot commented Nov 15, 2024 •

edited

Loading

codecov bot commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading