diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx index fc9b7a91ac3..5993b1a6845 100644 --- a/apps/dashboard/src/@/components/blocks/wallet-address.tsx +++ b/apps/dashboard/src/@/components/blocks/wallet-address.tsx @@ -5,7 +5,6 @@ import { HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler"; import { useClipboard } from "hooks/useClipboard"; import { CheckIcon, CopyIcon, XIcon } from "lucide-react"; @@ -24,8 +23,8 @@ export function WalletAddress(props: { shortenAddress?: boolean; className?: string; iconClassName?: string; + client: ThirdwebClient; }) { - const thirdwebClient = useThirdwebClient(); // default back to zero address if no address provided const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]); @@ -40,7 +39,7 @@ export function WalletAddress(props: { const profiles = useSocialProfiles({ address: address, - client: thirdwebClient, + client: props.client, }); const { onCopy, hasCopied } = useClipboard(address, 2000); @@ -78,7 +77,7 @@ export function WalletAddress(props: { )} @@ -122,7 +121,7 @@ export function WalletAddress(props: { ) : ( profiles.data?.map((profile) => { const walletAvatarLink = resolveSchemeWithErrorHandler({ - client: thirdwebClient, + client: props.client, uri: profile.avatar, }); diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx index 9aff949d262..3e0a886b3e4 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx @@ -92,7 +92,10 @@ export const ListingDrawer: React.FC = ({

Seller

- +

Listing ID

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx index 910a0a4358f..811698da09b 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx @@ -40,49 +40,6 @@ import { min } from "thirdweb/utils"; import { ListingDrawer } from "./listing-drawer"; import { LISTING_STATUS } from "./types"; -const tableColumns: Column[] = [ - { - Header: "Listing Id", - accessor: (row) => row.id.toString(), - }, - { - Header: "Media", - accessor: (row) => row.asset.metadata, - // biome-ignore lint/suspicious/noExplicitAny: FIXME - Cell: (cell: any) => , - }, - { - Header: "Name", - accessor: (row) => row.asset.metadata.name ?? "N/A", - }, - { - Header: "Creator", - accessor: (row) => row.creatorAddress, - // biome-ignore lint/suspicious/noExplicitAny: FIXME - Cell: ({ cell }: { cell: Cell }) => ( - - ), - }, - { - Header: "Price", - accessor: (row) => - (row as DirectListing)?.currencyValuePerToken || - (row as EnglishAuction)?.buyoutCurrencyValue, - // biome-ignore lint/suspicious/noExplicitAny: FIXME - Cell: ({ cell }: { cell: Cell }) => { - return ( -

- {cell.value.displayValue} {cell.value.symbol} -

- ); - }, - }, - { - Header: "Status", - accessor: (row) => LISTING_STATUS[row.status], - }, -]; - interface MarketplaceTableProps { contract: ThirdwebContract; getAllQueryResult: UseQueryResult; @@ -132,6 +89,51 @@ export const MarketplaceTable: React.FC = ({ return getValidQueryResult?.data || prevData; }, [getAllQueryResult, getValidQueryResult, listingsToShow, prevData]); + const tableColumns: Column[] = useMemo(() => { + return [ + { + Header: "Listing Id", + accessor: (row) => row.id.toString(), + }, + { + Header: "Media", + accessor: (row) => row.asset.metadata, + // biome-ignore lint/suspicious/noExplicitAny: FIXME + Cell: (cell: any) => , + }, + { + Header: "Name", + accessor: (row) => row.asset.metadata.name ?? "N/A", + }, + { + Header: "Creator", + accessor: (row) => row.creatorAddress, + // biome-ignore lint/suspicious/noExplicitAny: FIXME + Cell: ({ cell }: { cell: Cell }) => ( + + ), + }, + { + Header: "Price", + accessor: (row) => + (row as DirectListing)?.currencyValuePerToken || + (row as EnglishAuction)?.buyoutCurrencyValue, + // biome-ignore lint/suspicious/noExplicitAny: FIXME + Cell: ({ cell }: { cell: Cell }) => { + return ( +

+ {cell.value.displayValue} {cell.value.symbol} +

+ ); + }, + }, + { + Header: "Status", + accessor: (row) => LISTING_STATUS[row.status], + }, + ]; + }, [contract.client]); + const { getTableProps, getTableBodyProps, 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 2bcd28c4926..2e427da432f 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 @@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge"; import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react"; import { formatDistance } from "date-fns/formatDistance"; import { useAllChainsData } from "hooks/chains/allChains"; +import type { ThirdwebClient } from "thirdweb"; import { useActiveAccount } from "thirdweb/react"; import { Card, Heading, Text } from "tw-components"; @@ -16,11 +17,13 @@ export type AccountSignerType = { interface AccountSignerProps { item: AccountSignerType; contractChainId: number; + client: ThirdwebClient; } export const AccountSigner: React.FC = ({ item, contractChainId, + client, }) => { const address = useActiveAccount()?.address; const { idToChain } = useAllChainsData(); @@ -43,7 +46,11 @@ export const AccountSigner: React.FC = ({ flexDir={{ base: "column", lg: "row" }} > - +
{isAdmin ? Admin Key : Scoped key} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx index 7a399afe917..f11481b3e24 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signers.tsx @@ -40,6 +40,7 @@ export const AccountSigners: React.FC = ({ contract }) => { ))} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx index 521b889ee1c..fed908fd112 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx @@ -94,6 +94,7 @@ function BatchMetadataModule(props: ModuleInstanceProps) { uploadMetadata={uploadMetadata} isOwnerAccount={!!ownerAccount} contractChainId={contract.chain.id} + client={contract.client} /> ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx index f57c141d8c9..ca5cfade396 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx @@ -271,6 +271,7 @@ function ClaimableModule(props: ModuleInstanceProps) { return ( ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx index 35efab4553a..fb31843e0da 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx @@ -73,6 +73,7 @@ function OpenEditionMetadataModule(props: ModuleInstanceProps) { setSharedMetadata={setSharedMetadata} isOwnerAccount={!!props.ownerAccount} contractChainId={props.contract.chain.id} + client={props.contract.client} /> ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx index ef5a031a434..c30121366dc 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx @@ -150,6 +150,7 @@ function RoyaltyModule(props: ModuleInstanceProps) { setRoyaltyInfoForToken={setRoyaltyInfoForToken} isOwnerAccount={!!ownerAccount} contractChainId={props.contract.chain.id} + client={props.contract.client} /> ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx index a15bb24f8c0..8234d4f76ac 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx @@ -123,6 +123,7 @@ function TransferableModule(props: ModuleInstanceProps) { update={update} isOwnerAccount={!!props.ownerAccount} contractChainId={props.contract.chain.id} + client={props.contract.client} /> ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx index 21e33d0229f..7fe64004e88 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx @@ -87,6 +87,7 @@ function Component() { contractInfo={contractInfo} moduleAddress="0x0000000000000000000000000000000000000000" uploadMetadata={uploadMetadataStub} + client={storybookThirdwebClient} uninstallButton={{ onClick: async () => removeMutation.mutateAsync(), isPending: removeMutation.isPending, diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx index 406ae5d0379..f5be549f130 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx @@ -147,6 +147,7 @@ function Component() {
removeMutation.mutateAsync(), isPending: removeMutation.isPending, }} - isOwnerAccount={isOwner} /> @@ -76,6 +77,7 @@ function Component() { removeMutation.mutateAsync(), isPending: removeMutation.isPending, @@ -93,6 +95,7 @@ function Component() { removeMutation.mutateAsync(), isPending: removeMutation.isPending, diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx index 14fd4e52513..7d79b2f2aa3 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx @@ -22,6 +22,7 @@ import { Suspense, useEffect, useState } from "react"; import { ErrorBoundary, type FallbackProps } from "react-error-boundary"; import { toast } from "sonner"; import { + type ThirdwebClient, type ThirdwebContract, getContract, sendTransaction, @@ -180,6 +181,7 @@ export function ModuleCard(props: ModuleCardProps) { export type ModuleCardUIProps = { children?: React.ReactNode; + client: ThirdwebClient; contractInfo: { name: string; description?: string; @@ -249,7 +251,10 @@ export function ModuleCardUI(props: ModuleCardUIProps) {

Published By

- + )} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx index ea4975055e9..6a2588c952b 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx @@ -14,7 +14,7 @@ const OpenEditionMetadataModule = lazy(() => import("./OpenEditionMetadata")); export type ModuleInstanceProps = Omit< ModuleCardUIProps, - "children" | "updateButton" | "isOwnerAccount" + "children" | "updateButton" | "isOwnerAccount" | "client" > & { contract: ThirdwebContract; ownerAccount: Account | undefined; @@ -52,5 +52,11 @@ export function ModuleInstance(props: ModuleInstanceProps) { return ; } - return ; + return ( + + ); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx index 91ecf0d1138..474309ecf44 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx @@ -84,6 +84,7 @@ function Component() { isPending: removeMutation.isPending, }} isOwnerAccount={isOwner} + client={storybookThirdwebClient} contractChainId={1} isLoggedIn={true} /> diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx index 38e9b03e9be..8eb7c5d27fb 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx @@ -83,6 +83,7 @@ function Component() { diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx index e047028ff2e..51f8962524f 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx @@ -79,6 +79,7 @@ function Component() { diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx index c22947cbd53..1800214d45b 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx @@ -225,6 +225,7 @@ function NFTDetailsTab(props: {

Owner

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx index 396c108d83e..981e13bfa77 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx @@ -133,7 +133,7 @@ export const NFTGetAllTable: React.FC = ({ Header: "Owner", accessor: (row) => row.owner, Cell: (cell: CellProps) => ( - + ), }); } @@ -153,7 +153,7 @@ export const NFTGetAllTable: React.FC = ({ }); } return cols; - }, [isErc721, isErc1155]); + }, [isErc721, isErc1155, contract.client]); const [queryParams, setQueryParams] = useState({ count: 50, start: 0 }); diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx index e38cf078a10..5ea63ec8fa4 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx @@ -7,7 +7,11 @@ import { SkeletonContainer } from "@/components/ui/skeleton"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; import { ArrowRightIcon } from "lucide-react"; import { useMemo } from "react"; -import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb"; +import { + type ThirdwebClient, + type ThirdwebContract, + ZERO_ADDRESS, +} from "thirdweb"; import { type DirectListing, type EnglishAuction, @@ -120,6 +124,7 @@ const DirectListingCards: React.FC = ({ chainSlug={chainSlug} contractAddress={contract.address} projectMeta={projectMeta} + client={contract.client} />
@@ -193,6 +198,7 @@ const EnglishAuctionCards: React.FC = ({
= ({ listings, @@ -302,6 +309,7 @@ const ListingCards: React.FC = ({ chainSlug, contractAddress, projectMeta, + client, }) => { const contractLayout = buildContractPagePath({ projectMeta, @@ -394,6 +402,7 @@ const ListingCards: React.FC = ({
)} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx index a55ce866362..c1b5667bb36 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx @@ -17,7 +17,11 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link"; import { getAllRoleMembers } from "contract-ui/hooks/permissions"; import { ArrowRightIcon } from "lucide-react"; import { useMemo } from "react"; -import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb"; +import { + type ThirdwebClient, + type ThirdwebContract, + ZERO_ADDRESS, +} from "thirdweb"; import { useReadContract } from "thirdweb/react"; import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types"; import { buildContractPagePath } from "../../_utils/contract-page-path"; @@ -65,6 +69,7 @@ export function PermissionsTable(props: { isPending={allRoleMembers.isPending} viewMoreLink={permissionsHref} trackingCategory={props.trackingCategory} + client={props.contract.client} /> ); } @@ -74,6 +79,7 @@ export function PermissionsTableUI(props: { trackingCategory: string; members: { member: string; roles: string[] }[]; isPending: boolean; + client: ThirdwebClient; }) { return (
@@ -106,7 +112,7 @@ export function PermissionsTableUI(props: { {props.members.map((data) => ( - +
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx index c861e72345a..02c7eb1d589 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx @@ -19,7 +19,7 @@ import { ExternalLinkIcon, } from "lucide-react"; import { useEffect, useState } from "react"; -import { type ThirdwebContract, toTokens } from "thirdweb"; +import { type ThirdwebClient, type ThirdwebContract, toTokens } from "thirdweb"; import type { ChainMetadata } from "thirdweb/chains"; import { type TokenTransfersData, @@ -43,6 +43,7 @@ function RecentTransfersUI(props: { page: number; setPage: (page: number) => void; explorerUrl: string; + client: ThirdwebClient; }) { return (
@@ -84,10 +85,16 @@ function RecentTransfersUI(props: { } > - + - +
@@ -228,6 +235,7 @@ export function RecentTransfers(props: { data={tokenQuery.data ?? []} isPending={tokenQuery.isPending && !hasFetchedOnce} rowsPerPage={rowsPerPage} + client={props.clientContract.client} tokenMetadata={{ decimals: props.decimals, symbol: props.tokenSymbol, diff --git a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx index 97f8cac6377..1a8f7f02f42 100644 --- a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx +++ b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletUI.tsx @@ -27,15 +27,18 @@ import { formatDate } from "date-fns"; import { MinusIcon } from "lucide-react"; import { useState } from "react"; import { toast } from "sonner"; +import type { ThirdwebClient } from "thirdweb"; import { SearchInput } from "../components/SearchInput"; export function LinkWallet(props: { wallets: LinkedWallet[]; accountEmail: string | undefined; + client: ThirdwebClient; }) { const router = useDashboardRouter(); return ( { @@ -59,6 +62,7 @@ export function LinkWalletUI(props: { wallets: LinkedWallet[]; unlinkWallet: (walletId: string) => Promise; accountEmail: string | undefined; + client: ThirdwebClient; }) { const [deletedWalletIds, setDeletedWalletIds] = useState([]); const [searchValue, setSearchValue] = useState(""); @@ -98,6 +102,7 @@ export function LinkWalletUI(props: { @@ -105,6 +110,7 @@ export function LinkWalletUI(props: { Promise; onUnlinkSuccess: () => void; accountEmail: string | undefined; + client: ThirdwebClient; }) { const [open, setOpen] = useState(false); const unlinkWallet = useMutation({ @@ -181,6 +188,7 @@ function UnlinkButton(props: {
diff --git a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx index db858028325..453bc875aa7 100644 --- a/apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx +++ b/apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx @@ -1,6 +1,10 @@ import type { LinkedWallet } from "@/api/linked-wallets"; import type { Meta, StoryObj } from "@storybook/react"; -import { BadgeContainer, mobileViewport } from "stories/utils"; +import { + BadgeContainer, + mobileViewport, + storybookThirdwebClient, +} from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; import { LinkWalletUI } from "./LinkWalletUI"; @@ -72,6 +76,7 @@ function Variants() { accountEmail="team@example.com" unlinkWallet={unlinkWalletSuccessStub} wallets={accountWalletsStub} + client={storybookThirdwebClient} /> @@ -80,6 +85,7 @@ function Variants() { accountEmail="team@example.com" unlinkWallet={unlinkWalletFailureStub} wallets={accountWalletsStub} + client={storybookThirdwebClient} /> @@ -88,6 +94,7 @@ function Variants() { wallets={[]} unlinkWallet={unlinkWalletSuccessStub} accountEmail="team@example.com" + client={storybookThirdwebClient} />
diff --git a/apps/dashboard/src/app/(app)/account/wallets/page.tsx b/apps/dashboard/src/app/(app)/account/wallets/page.tsx index 4d9eb082e59..e99257b71c8 100644 --- a/apps/dashboard/src/app/(app)/account/wallets/page.tsx +++ b/apps/dashboard/src/app/(app)/account/wallets/page.tsx @@ -1,13 +1,26 @@ import { getLinkedWallets } from "@/api/linked-wallets"; +import { getClientThirdwebClient } from "../../../../@/constants/thirdweb-client.client"; +import { getAuthToken } from "../../api/lib/getAuthToken"; +import { loginRedirect } from "../../login/loginRedirect"; import { getValidAccount } from "../settings/getAccount"; import { LinkWallet } from "./LinkWalletUI"; export default async function Page() { - const [wallets, account] = await Promise.all([ + const [wallets, account, authToken] = await Promise.all([ getLinkedWallets(), - getValidAccount(), + getValidAccount("/account/wallets"), + getAuthToken(), ]); + if (!authToken) { + loginRedirect("/account/wallets"); + } + + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: undefined, + }); + return (
@@ -22,6 +35,7 @@ export default async function Page() {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx index ab69f20d26b..65eee10eec4 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx @@ -157,7 +157,10 @@ export function SponsoredTransactionsTableUI( {/* Wallet */} - + {/* Time */} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx index 18f0c5dc326..093558b4a71 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/in-app-wallets/users/page.tsx @@ -1,4 +1,5 @@ import { getProject } from "@/api/projects"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { InAppWalletUsersPageContent } from "components/embedded-wallets/Users"; import { redirect } from "next/navigation"; import { getAuthToken } from "../../../../../../../api/lib/getAuthToken"; @@ -24,13 +25,17 @@ export default async function Page(props: { redirect(`/team/${params.team_slug}`); } + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: project.teamId, + }); + return ( - <> - - + ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx index 17093f05a40..6aa0c1ab0ab 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/page.tsx @@ -1,5 +1,6 @@ import { getProject } from "@/api/projects"; import { Spinner } from "@/components/ui/Spinner/Spinner"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { PayAnalytics } from "components/pay/PayAnalytics/PayAnalytics"; import { PayAnalyticsFilter } from "components/pay/PayAnalytics/components/PayAnalyticsFilter"; import { getUniversalBridgeFiltersFromSearchParams } from "lib/time"; @@ -9,6 +10,8 @@ import { ResponsiveSearchParamsProvider, ResponsiveSuspense, } from "responsive-rsc"; +import { getAuthToken } from "../../../../../../api/lib/getAuthToken"; +import { loginRedirect } from "../../../../../../login/loginRedirect"; export default async function Page(props: { params: Promise<{ @@ -21,9 +24,16 @@ export default async function Page(props: { interval?: string | undefined | string[]; }>; }) { - const params = await props.params; + const [params, authToken] = await Promise.all([props.params, getAuthToken()]); + const project = await getProject(params.team_slug, params.project_slug); + if (!authToken) { + loginRedirect( + `/team/${params.team_slug}/${params.project_slug}/connect/universal-bridge`, + ); + } + if (!project) { redirect(`/team/${params.team_slug}`); } @@ -36,6 +46,11 @@ export default async function Page(props: { defaultRange: "last-30", }); + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: project.teamId, + }); + return (
@@ -51,7 +66,8 @@ export default async function Page(props: { } > @@ -36,6 +38,7 @@ export function TransactionsAnalyticsPageContent(props: { project={props.project} wallets={props.wallets} teamSlug={props.teamSlug} + client={props.client} />
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx index 0c28301a18a..5f8fe9a31ba 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/send-test-tx.client.tsx @@ -198,7 +198,10 @@ export function SendTestTransaction(props: {
- + {selectedWallet.metadata.label} @@ -209,7 +212,10 @@ export function SendTestTransaction(props: { {props.wallets.map((wallet, index) => (
- + {wallet.metadata.label} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx index 78816b1bf78..863ef305e44 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table-ui.tsx @@ -38,6 +38,7 @@ import { useAllChainsData } from "hooks/chains/allChains"; import { ExternalLinkIcon, InfoIcon } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import type { Wallet } from "../../server-wallets/wallet-table/types"; import type { Transaction, @@ -51,6 +52,7 @@ export function TransactionsTableUI(props: { project: Project; teamSlug: string; wallets?: Wallet[]; + client: ThirdwebClient; }) { const router = useDashboardRouter(); const [autoUpdate, setAutoUpdate] = useState(true); @@ -164,7 +166,14 @@ export function TransactionsTableUI(props: { {/* From Address */} - {tx.from ? : "N/A"} + {tx.from ? ( + + ) : ( + "N/A" + )} {/* Tx Hash */} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx index c19c4addab5..cc3ede7eecc 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/analytics/tx-table/tx-table.tsx @@ -2,6 +2,7 @@ import { engineCloudProxy } from "@/actions/proxies"; import type { Project } from "@/api/projects"; +import type { ThirdwebClient } from "thirdweb"; import type { Wallet } from "../../server-wallets/wallet-table/types"; import { TransactionsTableUI } from "./tx-table-ui"; import type { TransactionsResponse } from "./types"; @@ -10,6 +11,7 @@ export function TransactionsTable(props: { project: Project; wallets?: Wallet[]; teamSlug: string; + client: ThirdwebClient; }) { return ( ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx index e9585da0a9d..9a184cd991c 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/page.tsx @@ -1,5 +1,6 @@ import { getProject } from "@/api/projects"; import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk"; import { notFound, redirect } from "next/navigation"; import { getAuthToken } from "../../../../../../api/lib/getAuthToken"; @@ -77,6 +78,11 @@ export default async function TransactionsAnalyticsPage(props: { } const hasTransactions = initialData ? initialData.totalCount > 0 : false; + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: project.teamId, + }); + return (
); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx index 4909e7e03d1..517dfb692eb 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/page.tsx @@ -2,6 +2,7 @@ import { getProject } from "@/api/projects"; import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs"; import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk"; import { notFound } from "next/navigation"; +import { getClientThirdwebClient } from "../../../../../../../../../@/constants/thirdweb-client.client"; import { getAuthToken } from "../../../../../../../api/lib/getAuthToken"; import type { Wallet } from "./wallet-table/types"; import { ServerWalletsTable } from "./wallet-table/wallet-table"; @@ -25,6 +26,11 @@ export default async function TransactionsServerWalletsPage(props: { notFound(); } + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: project.teamId, + }); + const projectEngineCloudService = project.services.find( (service) => service.name === "engineCloud", ); @@ -57,6 +63,7 @@ export default async function TransactionsServerWalletsPage(props: { ) : (
{showSigners ? ( - + ) : ( - + )} {wallet.metadata.label || "none"} @@ -194,10 +196,15 @@ export function ServerWalletsTableUI({ ); } -export function SmartAccountCell({ wallet }: { wallet: Wallet }) { +export function SmartAccountCell({ + wallet, + client, +}: { + wallet: Wallet; + client: ThirdwebClient; +}) { const chainId = 1; // TODO: add chain switcher for balance + smart account address const chain = useV5DashboardChain(chainId); - const client = useThirdwebClient(); const smartAccountAddressQuery = useQuery({ queryKey: ["smart-account-address", wallet.address], @@ -216,7 +223,10 @@ export function SmartAccountCell({ wallet }: { wallet: Wallet }) {
{smartAccountAddressQuery.data ? (
- + Smart Account
) : ( diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx index 2ce07f52645..bd2bc6194be 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/server-wallets/wallet-table/wallet-table.tsx @@ -1,4 +1,5 @@ import type { Project } from "@/api/projects"; +import type { ThirdwebClient } from "thirdweb"; import type { Wallet } from "./types"; import { ServerWalletsTableUI } from "./wallet-table-ui.client"; @@ -10,6 +11,7 @@ export function ServerWalletsTable({ totalPages, totalRecords, managementAccessToken, + client, }: { wallets: Wallet[]; project: Project; @@ -18,6 +20,7 @@ export function ServerWalletsTable({ totalRecords: number; currentPage: number; totalPages: number; + client: ThirdwebClient; }) { return ( ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx index 88c9fdb5b41..85d5001fd0c 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/page.tsx @@ -1,5 +1,8 @@ import { getProject } from "@/api/projects"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { notFound, redirect } from "next/navigation"; +import { getAuthToken } from "../../../../../../../../api/lib/getAuthToken"; +import { loginRedirect } from "../../../../../../../../login/loginRedirect"; import { getSingleTransaction } from "../../lib/analytics"; import { TransactionDetailsUI } from "./transaction-details-ui"; @@ -10,7 +13,14 @@ export default async function TransactionPage({ }) { const { team_slug, project_slug, id } = await params; - const project = await getProject(team_slug, project_slug); + const [authToken, project] = await Promise.all([ + getAuthToken(), + getProject(team_slug, project_slug), + ]); + + if (!authToken) { + loginRedirect(`/team/${team_slug}/${project_slug}/engine/cloud/tx/${id}`); + } if (!project) { redirect(`/team/${team_slug}`); @@ -22,6 +32,11 @@ export default async function TransactionPage({ transactionId: id, }); + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: project.teamId, + }); + if (!transactionData) { notFound(); } @@ -31,6 +46,7 @@ export default async function TransactionPage({
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx index 38e86e2a952..9a6ed294e79 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/cloud/tx/[id]/transaction-details-ui.tsx @@ -8,24 +8,24 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { CodeClient } from "@/components/ui/code/code.client"; import { ToolTipLabel } from "@/components/ui/tooltip"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; import { ChainIconClient } from "components/icons/ChainIcon"; import { format, formatDistanceToNowStrict } from "date-fns"; import { useAllChainsData } from "hooks/chains/allChains"; import { ExternalLinkIcon, InfoIcon } from "lucide-react"; import Link from "next/link"; -import { toEther } from "thirdweb"; +import { type ThirdwebClient, toEther } from "thirdweb"; import { statusDetails } from "../../analytics/tx-table/tx-table-ui"; import type { Transaction } from "../../analytics/tx-table/types"; export function TransactionDetailsUI({ transaction, + client, }: { transaction: Transaction; teamSlug: string; + client: ThirdwebClient; project: Project; }) { - const thirdwebClient = useThirdwebClient(); const { idToChain } = useAllChainsData(); // Extract relevant data from transaction @@ -181,7 +181,7 @@ export function TransactionDetailsUI({
{chain.name} @@ -203,7 +203,7 @@ export function TransactionDetailsUI({ Sender Address
- +
@@ -212,7 +212,7 @@ export function TransactionDetailsUI({ Signer Address
- +
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx index 82451fea4d1..054510e404b 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx @@ -23,7 +23,8 @@ import { TWTable } from "components/shared/TWTable"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; import { PencilIcon, Trash2Icon } from "lucide-react"; -import { useState } from "react"; +import { useMemo, useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import { Button, FormLabel, Text } from "tw-components"; import { toDateTimeLocal } from "utils/date-utils"; @@ -33,60 +34,64 @@ interface AccessTokensTableProps { isPending: boolean; isFetched: boolean; authToken: string; + client: ThirdwebClient; } const columnHelper = createColumnHelper(); -const columns = [ - columnHelper.accessor("tokenMask", { - header: "Access Token", - cell: (cell) => { - return ( -

{cell.getValue()}

- ); - }, - }), - columnHelper.accessor("label", { - header: "Label", - cell: (cell) => { - return ( - - {cell.getValue()} - - ); - }, - }), - columnHelper.accessor("walletAddress", { - header: "Created By", - cell: (cell) => { - const address = cell.getValue(); - return ; - }, - }), - columnHelper.accessor("createdAt", { - header: "Created At", - cell: (cell) => { - const value = cell.getValue(); - - if (!value) { - return; - } - return {toDateTimeLocal(value)}; - }, - }), -]; - export const AccessTokensTable: React.FC = ({ instanceUrl, accessTokens, isPending, isFetched, authToken, + client, }) => { const editDisclosure = useDisclosure(); const removeDisclosure = useDisclosure(); const [selectedAccessToken, setSelectedAccessToken] = useState(); + const columns = useMemo(() => { + return [ + columnHelper.accessor("tokenMask", { + header: "Access Token", + cell: (cell) => { + return ( +

{cell.getValue()}

+ ); + }, + }), + columnHelper.accessor("label", { + header: "Label", + cell: (cell) => { + return ( + + {cell.getValue()} + + ); + }, + }), + columnHelper.accessor("walletAddress", { + header: "Created By", + cell: (cell) => { + const address = cell.getValue(); + return ; + }, + }), + columnHelper.accessor("createdAt", { + header: "Created At", + cell: (cell) => { + const value = cell.getValue(); + + if (!value) { + return; + } + return {toDateTimeLocal(value)}; + }, + }), + ]; + }, [client]); + return ( <> = ({ instanceUrl, + client, authToken, }) => { const [selected, setSelected] = useState("standard"); @@ -71,6 +74,7 @@ export const EngineAccessTokens: React.FC = ({ ) : selected === "keypair" ? ( = ({ const StandardAccessTokensPanel = ({ instanceUrl, authToken, + client, }: { instanceUrl: string; + client: ThirdwebClient; authToken: string; }) => { const accessTokens = useEngineAccessTokens({ @@ -109,6 +115,7 @@ const StandardAccessTokensPanel = ({ + ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx index ef7fb39f964..877fe0fd5ee 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx @@ -24,7 +24,8 @@ import { TWTable } from "components/shared/TWTable"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; import { PencilIcon, Trash2Icon } from "lucide-react"; -import { useState } from "react"; +import { useMemo, useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import { Button, FormLabel, Text } from "tw-components"; interface AdminsTableProps { @@ -33,47 +34,51 @@ interface AdminsTableProps { isPending: boolean; isFetched: boolean; authToken: string; + client: ThirdwebClient; } const columnHelper = createColumnHelper(); -const columns = [ - columnHelper.accessor("walletAddress", { - header: "Address", - cell: (cell) => { - const address = cell.getValue(); - return ; - }, - }), - columnHelper.accessor("label", { - header: "Label", - cell: (cell) => { - return ( - - {cell.getValue()} - - ); - }, - }), - columnHelper.accessor("permissions", { - header: "Role", - cell: (cell) => { - return {cell.getValue()}; - }, - }), -]; - export const AdminsTable: React.FC = ({ instanceUrl, admins, isPending, isFetched, authToken, + client, }) => { const editDisclosure = useDisclosure(); const removeDisclosure = useDisclosure(); const [selectedAdmin, setSelectedAdmin] = useState(); + const columns = useMemo(() => { + return [ + columnHelper.accessor("walletAddress", { + header: "Address", + cell: (cell) => { + const address = cell.getValue(); + return ; + }, + }), + columnHelper.accessor("label", { + header: "Label", + cell: (cell) => { + return ( + + {cell.getValue()} + + ); + }, + }), + columnHelper.accessor("permissions", { + header: "Role", + cell: (cell) => { + return {cell.getValue()}; + }, + }), + ]; + }, [client]); + return ( <> = ({ instanceUrl, authToken, + client, }) => { const admins = useEnginePermissions({ instanceUrl, @@ -41,6 +44,7 @@ export const EngineAdmins: React.FC = ({ isPending={admins.isPending} isFetched={admins.isFetched} authToken={authToken} + client={client} /> diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx index b62cfee33f2..6ae7cc1b30a 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/admins/page.tsx @@ -4,11 +4,17 @@ import { EngineAdmins } from "./components/engine-admins"; export default async function Page(props: EngineInstancePageProps) { const params = await props.params; - const { instance, authToken } = await engineInstancePageHandler({ + const { instance, authToken, client } = await engineInstancePageHandler({ engineId: params.engineId, teamSlug: params.team_slug, projectSlug: params.project_slug, }); - return ; + return ( + + ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx index 2237602b7a1..0a5950038bb 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx @@ -148,7 +148,9 @@ export const BackendWalletsTable: React.FC = ({ header: "Address", cell: (cell) => { const address = cell.getValue(); - return ; + return ( + + ); }, }), columnHelper.accessor("label", { @@ -266,12 +268,14 @@ export const BackendWalletsTable: React.FC = ({ disclosure={editDisclosure} instanceUrl={instanceUrl} authToken={authToken} + client={client} /> )} {selectedBackendWallet && receiveDisclosure.isOpen && ( )} {selectedBackendWallet && sendDisclosure.isOpen && ( @@ -291,6 +295,7 @@ export const BackendWalletsTable: React.FC = ({ disclosure={deleteDisclosure} instanceUrl={instanceUrl} authToken={authToken} + client={client} /> )} @@ -302,11 +307,13 @@ const EditModal = ({ disclosure, instanceUrl, authToken, + client, }: { backendWallet: BackendWallet; disclosure: UseDisclosureReturn; instanceUrl: string; authToken: string; + client: ThirdwebClient; }) => { const updateBackendWallet = useEngineUpdateBackendWallet({ instanceUrl, @@ -363,6 +370,7 @@ const EditModal = ({ @@ -393,9 +401,11 @@ const EditModal = ({ const ReceiveFundsModal = ({ backendWallet, disclosure, + client, }: { backendWallet: BackendWallet; disclosure: UseDisclosureReturn; + client: ThirdwebClient; }) => { const qrCodeBase64Query = useQuery({ queryKey: ["engine", "receive-funds-qr-code", backendWallet.address], @@ -434,6 +444,7 @@ const ReceiveFundsModal = ({ {/* eslint-disable-next-line @next/next/no-img-element */} @@ -618,11 +630,13 @@ function DeleteModal({ disclosure, instanceUrl, authToken, + client, }: { backendWallet: BackendWallet; disclosure: UseDisclosureReturn; instanceUrl: string; authToken: string; + client: ThirdwebClient; }) { const deleteBackendWallet = useEngineDeleteBackendWallet({ instanceUrl, @@ -688,6 +702,7 @@ function DeleteModal({ diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx index 3900ef08c7f..d19541ab4f5 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx @@ -22,6 +22,7 @@ import { format } from "date-fns"; import { CheckIcon } from "lucide-react"; import { useRef } from "react"; import { toast } from "sonner"; +import type { ThirdwebClient } from "thirdweb"; import { Button, FormLabel, Text } from "tw-components"; interface TimelineStep { @@ -36,9 +37,11 @@ export const TransactionTimeline = ({ transaction, instanceUrl, authToken, + client, }: { transaction: Transaction; instanceUrl: string; + client: ThirdwebClient; authToken: string; }) => { let timeline: TimelineStep[]; @@ -55,6 +58,7 @@ export const TransactionTimeline = ({ transaction={transaction} instanceUrl={instanceUrl} authToken={authToken} + client={client} /> ), }, @@ -75,6 +79,7 @@ export const TransactionTimeline = ({ transaction={transaction} instanceUrl={instanceUrl} authToken={authToken} + client={client} /> ), }, @@ -183,10 +188,12 @@ const CancelTransactionButton = ({ transaction, instanceUrl, authToken, + client, }: { transaction: Transaction; instanceUrl: string; authToken: string; + client: ThirdwebClient; }) => { const { isOpen, onOpen, onClose } = useDisclosure(); const closeButtonRef = useRef(null); @@ -246,6 +253,7 @@ const CancelTransactionButton = ({ diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx index 8a29343825f..a935ecd765b 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx @@ -234,7 +234,10 @@ export function TransactionsTable(props: { {/* From Address */} {tx.fromAddress ? ( - + ) : ( "N/A" )} @@ -725,6 +728,7 @@ const TransactionDetailsDrawer = ({ diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts index e9b538ad19f..c3bb89bee27 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/_utils/getEngineInstancePageMeta.ts @@ -1,3 +1,5 @@ +import { getTeamBySlug } from "@/api/team"; +import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { notFound } from "next/navigation"; import { getValidAccount } from "../../../../../../../account/settings/getAccount"; import { getAuthToken } from "../../../../../../../api/lib/getAuthToken"; @@ -11,9 +13,10 @@ export async function engineInstancePageHandler(params: { }) { const pagePath = `/team/${params.teamSlug}/${params.projectSlug}/engine/dedicated/${params.engineId}/access-tokens`; - const [authToken, account] = await Promise.all([ + const [authToken, account, team] = await Promise.all([ getAuthToken(), getValidAccount(pagePath), + getTeamBySlug(params.teamSlug), ]); if (!authToken) { @@ -27,10 +30,15 @@ export async function engineInstancePageHandler(params: { accountId: account.id, }); - if (!instance) { + if (!instance || !team) { // this case is already handled in layout notFound(); } - return { instance, authToken, account }; + const client = getClientThirdwebClient({ + jwt: authToken, + teamId: team.id, + }); + + return { instance, authToken, account, client }; } diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx index c8ee420b827..6d92fcb0464 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx @@ -69,6 +69,7 @@ export function ExecuteTransactionCardLayout(props: { ) : ( @@ -84,6 +85,7 @@ export function ExecuteTransactionCardLayout(props: { diff --git a/apps/dashboard/src/components/embedded-wallets/Users/index.tsx b/apps/dashboard/src/components/embedded-wallets/Users/index.tsx index 773937df1fd..1ecdbc5f54e 100644 --- a/apps/dashboard/src/components/embedded-wallets/Users/index.tsx +++ b/apps/dashboard/src/components/embedded-wallets/Users/index.tsx @@ -18,7 +18,8 @@ import { TWTable } from "components/shared/TWTable"; import { format } from "date-fns/format"; import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"; import Papa from "papaparse"; -import { useCallback, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; +import type { ThirdwebClient } from "thirdweb"; import type { WalletUser } from "thirdweb/wallets"; import { SearchInput } from "./SearchInput"; @@ -33,81 +34,87 @@ const getUserIdentifier = (accounts: WalletUser["linkedAccounts"]) => { }; const columnHelper = createColumnHelper(); -const columns = [ - columnHelper.accessor("linkedAccounts", { - header: "User Identifier", - enableColumnFilter: true, - cell: (cell) => { - const identifier = getUserIdentifier(cell.getValue()); - return {identifier}; - }, - id: "user_identifier", - }), - columnHelper.accessor("wallets", { - header: "Address", - cell: (cell) => { - const address = cell.getValue()[0]?.address; - return address ? : null; - }, - id: "address", - }), - columnHelper.accessor("wallets", { - header: "Created", - cell: (cell) => { - const value = cell.getValue()[0]?.createdAt; - - if (!value) { - return; - } - return ( - - {format(new Date(value), "MMM dd, yyyy")} - - ); - }, - id: "created_at", - }), - columnHelper.accessor("linkedAccounts", { - header: "Login Methods", - cell: (cell) => { - const value = cell.getValue(); - const loginMethodsDisplay = value.reduce((acc, curr) => { - if (acc.length === 2) { - acc.push("..."); - } - if (acc.length < 2) { - acc.push(curr.type); - } - return acc; - }, [] as string[]); - const loginMethods = value.map((v) => v.type).join(", "); - return ( - - - - {loginMethodsDisplay.join(", ")} - - - {loginMethods} - - - - ); - }, - id: "login_methods", - }), -]; export function InAppWalletUsersPageContent(props: { - clientId: string; trackingCategory: string; authToken: string; + projectClientId: string; + client: ThirdwebClient; }) { + const columns = useMemo(() => { + return [ + columnHelper.accessor("linkedAccounts", { + header: "User Identifier", + enableColumnFilter: true, + cell: (cell) => { + const identifier = getUserIdentifier(cell.getValue()); + return {identifier}; + }, + id: "user_identifier", + }), + columnHelper.accessor("wallets", { + header: "Address", + cell: (cell) => { + const address = cell.getValue()[0]?.address; + return address ? ( + + ) : null; + }, + id: "address", + }), + columnHelper.accessor("wallets", { + header: "Created", + cell: (cell) => { + const value = cell.getValue()[0]?.createdAt; + + if (!value) { + return; + } + return ( + + {format(new Date(value), "MMM dd, yyyy")} + + ); + }, + id: "created_at", + }), + columnHelper.accessor("linkedAccounts", { + header: "Login Methods", + cell: (cell) => { + const value = cell.getValue(); + const loginMethodsDisplay = value.reduce((acc, curr) => { + if (acc.length === 2) { + acc.push("..."); + } + if (acc.length < 2) { + acc.push(curr.type); + } + return acc; + }, [] as string[]); + const loginMethods = value.map((v) => v.type).join(", "); + return ( + + + + {loginMethodsDisplay.join(", ")} + + + {loginMethods} + + + + ); + }, + id: "login_methods", + }), + ]; + }, [props.client]); + const [activePage, setActivePage] = useState(1); const [searchValue, setSearchValue] = useState(""); const walletsQuery = useEmbeddedWallets({ authToken: props.authToken, - clientId: props.clientId, + clientId: props.projectClientId, page: activePage, }); const wallets = walletsQuery?.data?.users || []; @@ -146,7 +153,7 @@ export function InAppWalletUsersPageContent(props: { return; } const usersWallets = await getAllEmbeddedWallets({ - clientId: props.clientId, + clientId: props.projectClientId, }); const csv = Papa.unparse( usersWallets.map((row) => { @@ -167,7 +174,7 @@ export function InAppWalletUsersPageContent(props: { tempLink.href = csvUrl; tempLink.setAttribute("download", "download.csv"); tempLink.click(); - }, [wallets, props.clientId, getAllEmbeddedWallets]); + }, [wallets, props.projectClientId, getAllEmbeddedWallets]); return (
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx index 56beaa1a8ee..139f44beb29 100644 --- a/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx +++ b/apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx @@ -2,6 +2,7 @@ import { getUniversalBridgeUsage, getUniversalBridgeWalletUsage, } from "@/api/analytics"; +import type { ThirdwebClient } from "thirdweb"; import type { Range } from "../../analytics/date-range-selector"; import { PayCustomersTable } from "./components/PayCustomersTable"; import { PayNewCustomers } from "./components/PayNewCustomers"; @@ -12,7 +13,8 @@ import { TotalPayVolume } from "./components/TotalPayVolume"; import { TotalVolumePieChart } from "./components/TotalVolumePieChart"; export async function PayAnalytics(props: { - clientId: string; + projectClientId: string; + client: ThirdwebClient; projectId: string; teamId: string; range: Range; @@ -84,10 +86,14 @@ export async function PayAnalytics(props: {
- + - +
); diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx index 87b0f0f031f..3a42637bcbe 100644 --- a/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx +++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx @@ -4,6 +4,7 @@ import { WalletAddress } from "@/components/blocks/wallet-address"; import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow"; import { SkeletonContainer } from "@/components/ui/skeleton"; import { useMemo } from "react"; +import type { ThirdwebClient } from "thirdweb"; import type { UniversalBridgeWalletStats } from "types/analytics"; import { toUSD } from "../../../../utils/number"; import { @@ -20,6 +21,7 @@ type PayTopCustomersData = Array<{ export function PayCustomersTable(props: { data: UniversalBridgeWalletStats[]; + client: ThirdwebClient; }) { const tableData = useMemo(() => { return getTopCustomers(props.data); @@ -62,6 +64,7 @@ export function PayCustomersTable(props: { key={customer.walletAddress} customer={customer} rowIndex={i} + client={props.client} /> ); })} @@ -82,6 +85,7 @@ function CustomerTableRow(props: { walletAddress: string; totalSpendUSDCents: number; }; + client: ThirdwebClient; rowIndex: number; }) { const delayAnim = { @@ -96,7 +100,7 @@ function CustomerTableRow(props: { style={delayAnim} loadedData={props.customer?.walletAddress} skeletonData="0x0000000000000000000000000000000000000000" - render={(v) => } + render={(v) => } /> diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx index eb0cbd78872..6e6a629ebbd 100644 --- a/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx +++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx @@ -14,7 +14,7 @@ import { cn } from "@/lib/utils"; import { useQuery } from "@tanstack/react-query"; import { format } from "date-fns"; import { useMemo, useState } from "react"; -import { toTokens } from "thirdweb"; +import { type ThirdwebClient, toTokens } from "thirdweb"; import { CardHeading, TableData, @@ -25,7 +25,8 @@ import { const pageSize = 50; export function PaymentHistory(props: { - clientId: string; + client: ThirdwebClient; + projectClientId: string; teamId: string; }) { const [page, setPage] = useState(1); @@ -33,10 +34,10 @@ export function PaymentHistory(props: { PaymentsResponse, Error >({ - queryKey: ["payments", props.clientId, page], + queryKey: ["payments", props.projectClientId, page], queryFn: async () => { const res = await getPayments({ - clientId: props.clientId, + clientId: props.projectClientId, teamId: props.teamId, limit: pageSize, offset: (page - 1) * pageSize, @@ -82,7 +83,13 @@ export function PaymentHistory(props: { (payPurchaseData && !isLoading ? ( <> {payPurchaseData.data.map((purchase) => { - return ; + return ( + + ); })} ) : ( @@ -115,7 +122,7 @@ export function PaymentHistory(props: { ); } -function TableRow(props: { purchase: Payment }) { +function TableRow(props: { purchase: Payment; client: ThirdwebClient }) { const { purchase } = props; const originAmount = toTokens( purchase.originAmount, @@ -181,7 +188,7 @@ function TableRow(props: { purchase: Payment }) { {/* Address */} - + {/* Date */}