From f2d10853f1916133768f748cf46dca6df72f6c99 Mon Sep 17 00:00:00 2001 From: kien-ngo Date: Sat, 19 Oct 2024 08:52:15 +0000 Subject: [PATCH] [Dashboard] Remove AddressCopyButton (#5077) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR focuses on removing the `AddressCopyButton` component from various files and replacing it with `CopyTextButton` and `CopyAddressButton` components to optimize bundle size and improve code consistency. ### Detailed summary - Deleted `AddressCopyButton.tsx` file. - Removed all imports of `AddressCopyButton` from multiple files. - Replaced instances of `AddressCopyButton` with `CopyTextButton` in `webhooks-table.tsx` and `token-id.tsx`. - Replaced `AddressCopyButton` with `CopyAddressButton` in `transaction-timeline.tsx` and `contract-subscriptions-table.tsx`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../nfts/[tokenId]/token-id.tsx | 10 +- .../engine/configuration/webhooks-table.tsx | 12 ++- .../contract-subscriptions-table.tsx | 6 +- .../engine/overview/transaction-timeline.tsx | 7 +- .../src/tw-components/AddressCopyButton.tsx | 99 ------------------- apps/dashboard/src/tw-components/index.ts | 6 -- 6 files changed, 18 insertions(+), 122 deletions(-) delete mode 100644 apps/dashboard/src/tw-components/AddressCopyButton.tsx diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx index 80be8fb3b25..6e6ce86e631 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx @@ -26,7 +26,6 @@ import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155"; import { useReadContract } from "thirdweb/react"; import { resolveScheme } from "thirdweb/storage"; import { Badge, Button, Card, CodeBlock, Heading, Text } from "tw-components"; -import { AddressCopyButton } from "tw-components/AddressCopyButton"; import { NFTMediaWithEmptyState } from "tw-components/nft-media"; import { shortenString } from "utils/usedapp-external"; import { NftProperty } from "../components/nft-property"; @@ -210,10 +209,11 @@ export const TokenIdPage: React.FC = ({ Token ID - diff --git a/apps/dashboard/src/components/engine/configuration/webhooks-table.tsx b/apps/dashboard/src/components/engine/configuration/webhooks-table.tsx index 460359af194..53ba43b5e34 100644 --- a/apps/dashboard/src/components/engine/configuration/webhooks-table.tsx +++ b/apps/dashboard/src/components/engine/configuration/webhooks-table.tsx @@ -1,3 +1,4 @@ +import { CopyTextButton } from "@/components/ui/CopyTextButton"; import { type EngineWebhook, useEngineRevokeWebhook, @@ -23,7 +24,7 @@ import { useTxNotifications } from "hooks/useTxNotifications"; import { Trash2Icon } from "lucide-react"; import { useState } from "react"; import { Button, Card, FormLabel, Text } from "tw-components"; -import { AddressCopyButton } from "tw-components/AddressCopyButton"; +import { shortenString } from "utils/usedapp-external"; export function beautifyString(str: string): string { return str @@ -58,10 +59,11 @@ const columns = [ header: "Secret", cell: (cell) => { return ( - ); }, diff --git a/apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx b/apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx index bb163b3ac4e..b4d7fc29a01 100644 --- a/apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx +++ b/apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx @@ -1,5 +1,6 @@ "use client"; +import { CopyAddressButton } from "@/components/ui/CopyAddressButton"; import { useThirdwebClient } from "@/constants/thirdweb.client"; import { type EngineContractSubscription, @@ -34,7 +35,6 @@ import { useState } from "react"; import { eth_getBlockByNumber, getRpcClient } from "thirdweb"; import { shortenAddress as shortenAddresThrows } from "thirdweb/utils"; import { Button, Card, FormLabel, LinkButton, Text } from "tw-components"; -import { AddressCopyButton } from "../../../tw-components/AddressCopyButton"; function shortenAddress(address: string) { if (!address) { @@ -93,9 +93,9 @@ export const ContractSubscriptionTable: React.FC< const explorer = chain?.explorers?.[0]; if (!explorer) { return ( - ); } diff --git a/apps/dashboard/src/components/engine/overview/transaction-timeline.tsx b/apps/dashboard/src/components/engine/overview/transaction-timeline.tsx index 6bf08dcc2e3..e43db7acfbc 100644 --- a/apps/dashboard/src/components/engine/overview/transaction-timeline.tsx +++ b/apps/dashboard/src/components/engine/overview/transaction-timeline.tsx @@ -1,4 +1,5 @@ import { WalletAddress } from "@/components/blocks/wallet-address"; +import { CopyAddressButton } from "@/components/ui/CopyAddressButton"; import type { Transaction } from "@3rdweb-sdk/react/hooks/useEngine"; import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser"; import { @@ -22,7 +23,6 @@ import { useTxNotifications } from "hooks/useTxNotifications"; import { CheckIcon } from "lucide-react"; import { useRef } from "react"; import { Button, FormLabel, Text } from "tw-components"; -import { AddressCopyButton } from "tw-components/AddressCopyButton"; interface TimelineStep { step: string; @@ -242,10 +242,9 @@ const CancelTransactionButton = ({ To - diff --git a/apps/dashboard/src/tw-components/AddressCopyButton.tsx b/apps/dashboard/src/tw-components/AddressCopyButton.tsx deleted file mode 100644 index e6547967093..00000000000 --- a/apps/dashboard/src/tw-components/AddressCopyButton.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { Tooltip } from "@chakra-ui/react"; -import { useTrack } from "hooks/analytics/useTrack"; -import { useClipboard } from "hooks/useClipboard"; -import { CopyIcon } from "lucide-react"; -import { toast } from "sonner"; -import { - Button, - type ButtonProps, - type PossibleButtonSize, - buttonSizesMap, -} from "./button"; -import { Card } from "./card"; -import { Text } from "./text"; - -interface AddressCopyButtonProps extends Omit { - address?: string; - noIcon?: boolean; - size?: PossibleButtonSize; - title?: string; - shortenAddress?: boolean; -} - -/** - * shorten the string to 13 characters with the format of 6 chars + ... + 4 chars - * does not shorten if string is less than 13 characters - * - * @param str string to shorten - * @returns shortened string to length 13 - */ -const shorten = (str: string) => { - if (str.length > 13) { - return `${str.substring(0, 6)}...${str.substring(str.length - 4)}`; - } - return str; -}; - -export const AddressCopyButton: React.FC = ({ - address, - noIcon, - flexGrow = 0, - size = "sm", - borderRadius = "md", - variant = "outline", - shortenAddress = true, - title = "address", - ...restButtonProps -}) => { - const { onCopy } = useClipboard(address || ""); - - const trackEvent = useTrack(); - - return ( - - Copy {title} to clipboard - - } - > - - - ); -}; diff --git a/apps/dashboard/src/tw-components/index.ts b/apps/dashboard/src/tw-components/index.ts index d931653e3a1..3696a0e0f66 100644 --- a/apps/dashboard/src/tw-components/index.ts +++ b/apps/dashboard/src/tw-components/index.ts @@ -10,9 +10,3 @@ export * from "./link"; export * from "./menu"; export * from "./table-container"; export * from "./text"; - -/** - * ❗️❗️❗️ @DANGER - * Do not export `AddressCopyButton` from here - * It will result in a HUGE bundle size - */