From 27d72e5d3eaba3d1f0659f58eaff77776ed2a5a8 Mon Sep 17 00:00:00 2001 From: MananTank Date: Mon, 15 Dec 2025 17:44:00 +0000 Subject: [PATCH] [PRO-124] Dashboard: Project Wallet UI tweaks (#8559) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on refining the user interface and functionality of the `ProjectWallet` component in the dashboard application. It includes style adjustments, component updates, and the introduction of new dropdown menu options for better user interaction. ### Detailed summary - Adjusted the size of `ChevronDownIcon` in `select-with-search.tsx`. - Removed `XIcon` from `project-wallet.tsx` and updated the heading style. - Renamed `projectWallet` variables to `serverWallet` in `project-wallet.stories.tsx`. - Introduced a new `Variant` function for rendering `ProjectWalletSectionUI`. - Added new icons in `project-wallet-details.tsx` and refined the dropdown menu. - Enhanced wallet detail presentation with better layout and added new dropdown options for actions like Deposit, Withdraw, and Change Project Wallet. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit ## Release Notes * **New Features** * Added dropdown menu with wallet action options: Deposit Funds, Withdraw Funds, Swap Tokens, View Transactions, and Change Project Wallet. * Added copy-address button in the wallet header. * **Style** * Redesigned wallet header layout with improved visual structure. * Refined icon sizing and spacing throughout the wallet interface. ✏️ Tip: You can customize this high-level summary in your review settings. --- .../components/blocks/select-with-search.tsx | 2 +- .../project-wallet/project-wallet-details.tsx | 153 +++++++++--------- .../project-wallet/project-wallet.stories.tsx | 34 ++-- .../project-wallet/project-wallet.tsx | 9 +- 4 files changed, 102 insertions(+), 96 deletions(-) diff --git a/apps/dashboard/src/@/components/blocks/select-with-search.tsx b/apps/dashboard/src/@/components/blocks/select-with-search.tsx index b95dff55fc8..e19026d9f43 100644 --- a/apps/dashboard/src/@/components/blocks/select-with-search.tsx +++ b/apps/dashboard/src/@/components/blocks/select-with-search.tsx @@ -125,7 +125,7 @@ export const SelectWithSearch = React.forwardRef< ? renderOption(selectedOption) : selectedOption?.label || placeholder} - + diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx index b04b80126e6..a5958f3c097 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx @@ -3,13 +3,14 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { + ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftRightIcon, + ArrowUpFromLineIcon, EllipsisVerticalIcon, + ListCollapseIcon, RefreshCcwIcon, - SendIcon, - ShuffleIcon, - WalletIcon, + Settings2Icon, } from "lucide-react"; import { useTheme } from "next-themes"; import { useCallback, useMemo, useState } from "react"; @@ -49,6 +50,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { @@ -228,9 +230,12 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) { return (
-
-
-

Wallet Address

+
+
+

+ {projectWallet.label || "Project Wallet"} +

+
-
-

Wallet Label

-
-

- {projectWallet.label || "N/A"} -

-
-
+ + + + + + setIsReceiveOpen(true)} + > + + Deposit Funds + + setIsSendOpen(true)} + > + + Withdraw Funds + + setIsSwapOpen(true)} + > + + Swap Tokens + + {/* add line */} + + + router.push( + `/team/${props.teamSlug}/${props.project.slug}/transactions`, + ) + } + > + + View Transactions + + {canChangeWallet && ( + setIsChangeWalletOpen(true)} + > + + Change Project Wallet + + )} + +
@@ -280,10 +337,10 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
-
+
- -
- - - - - - - - setIsReceiveOpen(true)} - > - - Deposit - - - router.push( - `/team/${props.teamSlug}/${props.project.slug}/transactions`, - ) - } - > - - Transactions - - {canChangeWallet && ( - setIsChangeWalletOpen(true)} - > - - Change Wallet - - )} - - -
{ await new Promise((resolve) => setTimeout(resolve, 1000)); - return [projectWallet1, projectWallet2]; + return [serverWallet1, serverWallet2]; }, }, }; @@ -98,7 +98,7 @@ export const NoProjectWalletSetLoading: Story = { projectWallet: undefined, getProjectServerWallets: async () => { await new Promise((resolve) => setTimeout(resolve, 100000)); - return [projectWallet1, projectWallet2]; + return [serverWallet1, serverWallet2]; }, }, }; @@ -109,10 +109,10 @@ export const ProjectWalletSetMultipleServerWallets: Story = { project: projectWithManagedAccessToken, teamSlug: "bar", client: storybookThirdwebClient, - projectWallet: projectWallet1, + projectWallet: serverWallet1, getProjectServerWallets: async () => { await new Promise((resolve) => setTimeout(resolve, 1000)); - return [projectWallet1, projectWallet2]; + return [serverWallet1, serverWallet2]; }, }, }; @@ -122,11 +122,23 @@ export const ProjectWalletSetSingleServerWallet: Story = { layout: "column", project: projectWithManagedAccessToken, teamSlug: "bar", - projectWallet: projectWallet1, + projectWallet: serverWallet1, client: storybookThirdwebClient, getProjectServerWallets: async () => { await new Promise((resolve) => setTimeout(resolve, 1000)); - return [projectWallet1]; + return [serverWallet1]; }, }, }; + +function Variant(props: Parameters[0]) { + return ( +
+ + +
+ +
+
+ ); +} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx index 8175644e889..4d3ab97ba0f 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx @@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { UnderlineLink } from "@workspace/ui/components/UnderlineLink"; -import { ArrowUpRightIcon, ChevronDownIcon, XIcon } from "lucide-react"; +import { ArrowUpRightIcon, ChevronDownIcon } from "lucide-react"; import Link from "next/link"; import { useMemo, useState } from "react"; import { toast } from "sonner"; @@ -134,11 +134,8 @@ function CreateProjectWalletSection(props: { return (
-
- -
-

- No Project Wallet set +

+ No project wallet set

Set a project wallet to set the default sender in thirdweb API.