feat: Replace name<>label

covalenthq · May 16, 2024 · 7e35bd8 · 7e35bd8
1 parent 957a757
commit 7e35bd8
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 60 deletions.
diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 
 export const Address: React.FC<AddressProps> = ({
     address,
+    label = null,
     show_copy_icon = true,
 }) => {
     const [showCopy, setShowCopy] = useState(false);
@@ -23,9 +24,9 @@ export const Address: React.FC<AddressProps> = ({
 
     return (
         <p className="flex items-center gap-x-2">
-            {truncate(address)}
+            {label?.trim() || truncate(address)}
 
-            {show_copy_icon ? (
+            {show_copy_icon && (
                 <button
                     className="cursor-pointer"
                     onClick={() => {
@@ -36,19 +37,17 @@ export const Address: React.FC<AddressProps> = ({
                         <IconWrapper
                             icon_class_name="done"
                             icon_size="text-sm"
-                            class_name="text-secondary-light dark:text-secondary-dark"
+                            class_name="text-foreground-light dark:text-foreground-dark opacity-75"
                         />
                     ) : (
                         <IconWrapper
                             icon_class_name="content_copy"
                             icon_size="text-sm"
-                            class_name="text-secondary-light dark:text-secondary-dark"
+                            class_name="text-foreground-light dark:text-foreground-dark opacity-75"
                             on_click={() => handleCopyClick()}
                         />
                     )}
                 </button>
-            ) : (
-                <></>
             )}
         </p>
     );

diff --git a/src/components/Atoms/AddressCard/AddressCard.tsx b/src/components/Atoms/AddressCard/AddressCard.tsx
@@ -1,22 +1,23 @@
-import { copyToClipboard, truncate } from "@/utils/functions";
+import { useState } from "react";
+import { useToast } from "../../../utils/hooks";
+import { Address, AddressAvatar } from "../../Atoms";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import { type AddressCardProps } from "@/utils/types/atoms.types";
 import {
     Dialog,
     DialogContent,
     DialogHeader,
     DialogTrigger,
 } from "@/components/ui/dialog";
 import QRCode from "react-qr-code";
-import { useState } from "react";
-import { useToast } from "../../../utils/hooks";
-import { AddressAvatar } from "../../Atoms";
-import { IconWrapper } from "../../Shared";
-import { GRK_SIZES } from "@/utils/constants/shared.constants";
-import { type AddressCardProps } from "@/utils/types/atoms.types";
+import { IconWrapper } from "@/components/Shared";
 
 export const AddressCard: React.FC<AddressCardProps> = ({
     address,
     type = "effigy",
-    name = "Unnamed Wallet",
+    label = "Unnamed Wallet",
+    show_copy_icon = true,
+    show_qr_code = true,
 }) => {
     const [showCopy, setShowCopy] = useState(false);
     const { toast } = useToast();
@@ -41,30 +42,15 @@ export const AddressCard: React.FC<AddressCardProps> = ({
             />
             <div className="flex h-full flex-col justify-center">
                 <h2 className="text-base font-semibold text-primary-light dark:text-primary-dark">
-                    {name}
+                    {label}
                 </h2>
-                <div className="flex items-center gap-x-2">
-                    <p className="text-base">{truncate(address)}</p>
-                    <div
-                        className="duration-400 h-5 w-5 cursor-pointer items-center justify-center rounded-full transition-all"
-                        onClick={() => copyToClipboard(address)}
-                    >
-                        {showCopy ? (
-                            <IconWrapper
-                                icon_class_name="done"
-                                icon_size="text-sm"
-                                class_name="text-secondary-light dark:text-secondary-dark"
-                            />
-                        ) : (
-                            <IconWrapper
-                                icon_class_name="content_copy"
-                                icon_size="text-sm"
-                                class_name="text-secondary-light dark:text-secondary-dark"
-                                on_click={() => handleCopyClick()}
-                            />
-                        )}
-                    </div>
-
+                <div className="flex gap-1">
+                <Address
+                    address={address}
+                    label={null}
+                    show_copy_icon={show_copy_icon}
+                />
+                {show_qr_code && (
                     <Dialog>
                         <DialogTrigger>
                             <div className="h-5 w-5 items-center justify-center rounded-full">
@@ -94,6 +80,7 @@ export const AddressCard: React.FC<AddressCardProps> = ({
                             </p>
                         </DialogContent>
                     </Dialog>
+                )}
                 </div>
             </div>
         </div>

diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
@@ -92,6 +92,8 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                                 block_signed_at,
                                 tx_hash,
                                 from_address,
+                                from_address_label,
+                                to_address_label,
                                 to_address,
                                 value,
                                 gas_metadata,
@@ -121,6 +123,7 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                                             heading={<div>FROM</div>}
                                             content={
                                                 <Address
+                                                    label={from_address_label}
                                                     address={from_address}
                                                 />
                                             }
@@ -129,7 +132,9 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                                         <CardDetail
                                             heading={<div>TO</div>}
                                             content={
-                                                <Address address={to_address} />
+                                                <Address 
+                                                label={to_address_label}
+                                                address={to_address} />
                                             }
                                             wrapperClassName="flex gap-x-2"
                                         />

diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
@@ -108,14 +108,18 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                                     heading: "FROM",
                                     content: (
                                         <Address
+                                            label={result.from_address_label}
                                             address={result.from_address}
                                         />
                                     ),
                                 },
                                 {
                                     heading: "TO",
                                     content: (
-                                        <Address address={result.to_address} />
+                                        <Address
+                                            label={result.to_address_label}
+                                            address={result.to_address}
+                                        />
                                     ),
                                 },
                                 {

diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx
@@ -173,7 +173,7 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
                                             address={
                                                 result.tx_metadata.from_address
                                             }
-                                            name={
+                                            label={
                                                 result.tx_metadata
                                                     .from_address_label
                                             }
@@ -188,7 +188,7 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
                                             address={
                                                 result.tx_metadata.to_address
                                             }
-                                            name={
+                                            label={
                                                 result.tx_metadata
                                                     .to_address_label
                                             }

diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx
@@ -70,15 +70,12 @@ export const Transactions: React.FC<TransactionsProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <p>
-                        {row.original.from_address_label || (
-                            <Address address={row.original.from_address} />
-                        )}
-                    </p>
-                );
-            },
+            cell: ({ row }) => (
+                <Address
+                    label={row.original.from_address_label}
+                    address={row.original.from_address}
+                />
+            ),
         },
         {
             id: "to_address",
@@ -90,15 +87,12 @@ export const Transactions: React.FC<TransactionsProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <p>
-                        {row.original.to_address_label || (
-                            <Address address={row.original.to_address} />
-                        )}
-                    </p>
-                );
-            },
+            cell: ({ row }) => (
+                <Address
+                    label={row.original.to_address_label}
+                    address={row.original.to_address}
+                />
+            ),
         },
         {
             id: "value",

diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts
@@ -5,13 +5,16 @@ import {
 import { type GRK_SIZES } from "../constants/shared.constants";
 
 export interface AddressCardProps {
-    name?: string;
+    label?: string | null;
     address: string;
     type?: "fingerprint" | "effigy" | "wallet";
+    show_copy_icon?: boolean;
+    show_qr_code?: boolean;
 }
 
 export interface AddressProps {
     address: string;
+    label?: string | null;
     show_copy_icon?: boolean;
 }