From 542360cc6997450ac35191c183e783852e94bb52 Mon Sep 17 00:00:00 2001 From: MananTank Date: Tue, 29 Jul 2025 17:36:25 +0000 Subject: [PATCH] Dashboard: Migrate contract/account from chakra to tailwind (#7741) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on enhancing the UI and refactoring components in the dashboard, specifically in the `account` section. It improves the display of error messages, balances, and NFT ownership, while also updating component structures for better readability and maintainability. ### Detailed summary - Updated error messages in `nfts-owned.tsx` with improved styling. - Refactored `AccountBalance` to use props directly and changed layout to a grid. - Simplified the `AccountPage` component, enhancing readability and structure. - Refactored `DepositNative` to streamline props and improve input handling. - Enhanced `AccountSigner` layout for better visual presentation and clarity. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../components/account-signer.tsx | 106 ++++++++---------- .../[contractAddress]/account/AccountPage.tsx | 58 +++++----- .../account/components/account-balance.tsx | 41 ++++--- .../account/components/deposit-native.tsx | 86 ++++++-------- .../account/components/nfts-owned.tsx | 8 +- 5 files changed, 137 insertions(+), 162 deletions(-) diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx index 64dd5ba01c0..668ff1e44c0 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx @@ -1,7 +1,3 @@ -import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react"; -import { Card } from "chakra/card"; -import { Heading } from "chakra/heading"; -import { Text } from "chakra/text"; import { formatDistance } from "date-fns"; import type { ThirdwebClient } from "thirdweb"; import { useActiveAccount } from "thirdweb/react"; @@ -22,15 +18,14 @@ interface AccountSignerProps { client: ThirdwebClient; } -export const AccountSigner: React.FC = ({ +export function AccountSigner({ item, contractChainId, client, -}) => { +}: AccountSignerProps) { const address = useActiveAccount()?.address; const { idToChain } = useAllChainsData(); const chain = contractChainId ? idToChain.get(contractChainId) : undefined; - const isMobile = useBreakpointValue({ base: true, md: false }); const { isAdmin, signer, @@ -39,58 +34,49 @@ export const AccountSigner: React.FC = ({ endTimestamp, } = item; return ( - - - - - - - -
- {isAdmin ? Admin Key : Scoped key} - {signer === address && ( - Currently connected - )} -
- - +
+
+ +
+ {isAdmin ? Admin Key : Scoped key} + {signer === address && ( + Currently connected + )} +
+
- {isAdmin ? null : ( - -
- Maximum value per transaction - - {nativeTokenLimitPerTransaction.toString()}{" "} - {chain?.nativeCurrency.symbol} - -
-
- Approved targets - {approvedTargets.length} -
-
- Expiration - - {formatDistance( - new Date(new Date(Number(endTimestamp * 1000n))), - new Date(), - { - addSuffix: true, - }, - )} - -
- - )} - - +
+
+
Maximum value per transaction
+
+ {nativeTokenLimitPerTransaction.toString()}{" "} + {chain?.nativeCurrency.symbol} +
+
+ +
+
Approved targets
+
{approvedTargets.length}
+
+ +
+
Expiration
+
+ {formatDistance( + new Date(new Date(Number(endTimestamp * 1000n))), + new Date(), + { + addSuffix: true, + }, + )} +
+
+
+
); -}; +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx index c139d666ac6..c4a0843c3d3 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/AccountPage.tsx @@ -1,6 +1,5 @@ "use client"; -import { Heading } from "chakra/heading"; import type { ThirdwebContract } from "thirdweb"; import type { ChainMetadata } from "thirdweb/chains"; import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types"; @@ -8,34 +7,33 @@ import { AccountBalance } from "./components/account-balance"; import { DepositNative } from "./components/deposit-native"; import { NftsOwned } from "./components/nfts-owned"; -interface AccountPageProps { +export function AccountPage(props: { contract: ThirdwebContract; chainMetadata: ChainMetadata; isLoggedIn: boolean; isInsightSupported: boolean; projectMeta: ProjectMeta | undefined; -} - -export const AccountPage: React.FC = ({ - contract, - chainMetadata, - isLoggedIn, - isInsightSupported, - projectMeta, -}) => { - const symbol = chainMetadata.nativeCurrency.symbol || "Native Token"; +}) { + const { + contract, + chainMetadata, + isLoggedIn, + isInsightSupported, + projectMeta, + } = props; + const symbol = chainMetadata.nativeCurrency.symbol; return ( -
-
- Balances -
- -
- Deposit {symbol} +
+
+

Balances

+
- {chainMetadata && ( +
+

+ Deposit {symbol} +

= ({ isLoggedIn={isLoggedIn} symbol={symbol} /> - )} +
-
- NFTs owned +
+

+ NFTs owned +

+
-
); -}; +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx index 546abb699d7..b8779bdc506 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx @@ -1,38 +1,37 @@ "use client"; -import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react"; -import { Card } from "chakra/card"; import type { ThirdwebContract } from "thirdweb"; import { useActiveWalletChain, useWalletBalance } from "thirdweb/react"; import { useSplitBalances } from "@/hooks/useSplit"; +import { StatCard } from "../../overview/components/stat-card"; -interface AccountBalanceProps { - contract: ThirdwebContract; -} - -export const AccountBalance: React.FC = ({ contract }) => { +export function AccountBalance(props: { contract: ThirdwebContract }) { const activeChain = useActiveWalletChain(); const { data: balance } = useWalletBalance({ - address: contract.address, + address: props.contract.address, chain: activeChain, - client: contract.client, + client: props.contract.client, }); - const balanceQuery = useSplitBalances(contract); + + const balanceQuery = useSplitBalances(props.contract); return ( - - - {balance?.symbol} - {balance?.displayValue} - +
+ {balanceQuery?.data ?.filter((bl) => bl.name !== "Native Token") .map((bl) => ( - - {bl.symbol} - {bl.display_balance} - + ))} - +
); -}; +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx index 47ddbab5174..69d4a646f29 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx @@ -1,82 +1,68 @@ "use client"; -import { Card } from "chakra/card"; -import { type ChangeEvent, useState } from "react"; +import { ArrowUpRightIcon } from "lucide-react"; +import { useState } from "react"; +import { toast } from "sonner"; import { prepareTransaction, type ThirdwebClient, toWei } from "thirdweb"; +import type { ChainMetadata } from "thirdweb/chains"; import { useSendAndConfirmTransaction } from "thirdweb/react"; import { TransactionButton } from "@/components/tx-button"; import { Input } from "@/components/ui/input"; -import { useV5DashboardChain } from "@/hooks/chains/v5-adapter"; -import type { StoredChain } from "@/stores/chainStores"; +import { mapV4ChainToV5Chain } from "@/utils/map-chains"; -interface DepositNativeProps { +export function DepositNative(props: { address: string; symbol: string; - chain: StoredChain; + chain: ChainMetadata; isLoggedIn: boolean; client: ThirdwebClient; -} - -export const DepositNative: React.FC = ({ - address, - symbol, - chain, - isLoggedIn, - client, -}) => { - const { mutate: transfer, isPending } = useSendAndConfirmTransaction(); +}) { + const sendTransaction = useSendAndConfirmTransaction(); const [amount, setAmount] = useState(""); - const handleChange = (e: ChangeEvent) => { - setAmount(e.currentTarget.value); - }; - const v5Chain = useV5DashboardChain(chain.chainId); return ( - +
setAmount(e.currentTarget.value)} + placeholder="0.001" type="number" + className="border-r-0 rounded-r-none bg-card" value={amount} /> + { - if (!address) { - throw new Error("Invalid address"); - } - const transaction = prepareTransaction({ - chain: v5Chain, - client, - to: address, + // eslint-disable-next-line no-restricted-syntax + chain: mapV4ChainToV5Chain(props.chain), + client: props.client, + to: props.address, value: toWei(amount), }); - transfer(transaction, { + sendTransaction.mutate(transaction, { onSuccess: () => { + toast.success("Deposit successful"); setAmount(""); }, + onError: (error) => { + toast.error("Deposit failed", { + description: error.message, + }); + }, }); }} - style={{ minWidth: 160 }} - transactionCount={1} - txChainID={v5Chain.id} + transactionCount={undefined} + txChainID={props.chain.chainId} > Deposit + - +
); -}; +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx index 9d779a405b2..b88f9e40dc6 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx @@ -44,8 +44,12 @@ export const NftsOwned: React.FC = ({ projectMeta={projectMeta} /> ) : isWalletNFTsLoading ? null : error ? ( -

Failed to fetch NFTs for this account: {error}

+

+ Failed to fetch NFTs for this account: {error} +

) : ( -

This account doesn't own any NFTs.

+

+ This account doesn't own any NFTs +

); };