Update

Author: kien-ngo

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<TokenIdPageProps> = ({
                   <Heading size="label.md">Token ID</Heading>
                 </GridItem>
                 <GridItem colSpan={8}>
-                  <AddressCopyButton
-                    size="xs"
-                    address={nft.id?.toString()}
-                    title="Token ID"
+                  <CopyTextButton
+                    textToCopy={nft.id?.toString()}
+                    textToShow={nft.id?.toString()}
+                    tooltip="Token ID"
+                    copyIconPosition="right"
                   />
                 </GridItem>
 

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,6 @@ 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";
 
 export function beautifyString(str: string): string {
   return str
@@ -58,10 +58,11 @@ const columns = [
     header: "Secret",
     cell: (cell) => {
       return (
-        <AddressCopyButton
-          address={cell.getValue() || ""}
-          title="secret"
-          size="xs"
+        <CopyTextButton
+          textToCopy={cell.getValue() || ""}
+          textToShow={cell.getValue() || ""}
+          tooltip="Secret"
+          copyIconPosition="right"
         />
       );
     },

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 (
-            <AddressCopyButton
+            <CopyAddressButton
               address={cell.getValue()}
-              title="Contract address"
+              copyIconPosition="right"
             />
           );
         }

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 = ({
               </FormControl>
               <FormControl>
                 <FormLabel>To</FormLabel>
-                <AddressCopyButton
+                <CopyAddressButton
                   address={transaction.toAddress ?? ""}
-                  size="xs"
-                  shortenAddress={false}
+                  copyIconPosition="right"
                 />
               </FormControl>
               <FormControl>

apps/dashboard/src/tw-components/AddressCopyButton.tsx

@@ -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
- */