From 3f1315b37fce4617605c7ad76a276ab5ed7cd323 Mon Sep 17 00:00:00 2001
From: Karan Pargal <83785975+karanpargal@users.noreply.github.com>
Date: Fri, 17 May 2024 02:25:37 +0530
Subject: [PATCH] feat: Replace name<>label (#175)

---
 src/components/Atoms/Address/Address.tsx      |  11 +-
 .../Atoms/AddressCard/AddressCard.tsx         | 103 ++++++++----------
 .../LatestTransactions/LatestTransactions.tsx |   8 +-
 .../TransactionDetails/TransactionDetails.tsx |   6 +-
 .../TransactionReceipt/TransactionReceipt.tsx |   4 +-
 src/components/Shared/Transactions.tsx        |  30 ++---
 src/utils/types/atoms.types.ts                |   5 +-
 7 files changed, 80 insertions(+), 87 deletions(-)

diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
index a629111f..30c56c38 100644
--- 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
index a68ba950..18bf950a 100644
--- a/src/components/Atoms/AddressCard/AddressCard.tsx
+++ b/src/components/Atoms/AddressCard/AddressCard.tsx
@@ -1,4 +1,8 @@
-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,
@@ -6,17 +10,14 @@ import {
     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,59 +42,45 @@ 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>
-
-                    <Dialog>
-                        <DialogTrigger>
-                            <div className="h-5 w-5 items-center justify-center rounded-full">
-                                <IconWrapper
-                                    icon_class_name="qr_code_2"
-                                    icon_size="text-sm"
-                                    class_name="text-secondary-light dark:text-secondary-dark"
-                                />
-                            </div>
-                        </DialogTrigger>
+                <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">
+                                    <IconWrapper
+                                        icon_class_name="qr_code_2"
+                                        icon_size="text-sm"
+                                        class_name="text-secondary-light dark:text-secondary-dark"
+                                    />
+                                </div>
+                            </DialogTrigger>
 
-                        <DialogContent className="flex aspect-square flex-col items-center justify-center rounded border-0 bg-background-light text-slate-900 dark:bg-background-dark dark:text-slate-50">
-                            <DialogHeader>
-                                <p className="pb-4 text-center text-lg font-semibold text-slate-900 dark:text-slate-50">
-                                    QR Code
+                            <DialogContent className="flex aspect-square flex-col items-center justify-center rounded border-0 bg-background-light text-slate-900 dark:bg-background-dark dark:text-slate-50">
+                                <DialogHeader>
+                                    <p className="pb-4 text-center text-lg font-semibold text-slate-900 dark:text-slate-50">
+                                        QR Code
+                                    </p>
+                                </DialogHeader>
+                                <div className="border-border dark:border-x-border-dark flex items-center justify-center rounded border-2 bg-white p-6">
+                                    <QRCode
+                                        value={address}
+                                        viewBox="0 0 30 30"
+                                        className="bg-white"
+                                    />
+                                </div>
+                                <p className="p-2 text-xs text-secondary-light dark:text-secondary-dark">
+                                    {address}
                                 </p>
-                            </DialogHeader>
-                            <div className="border-border dark:border-x-border-dark flex items-center justify-center rounded border-2 bg-white p-6">
-                                <QRCode
-                                    value={address}
-                                    viewBox="0 0 30 30"
-                                    className="bg-white"
-                                />
-                            </div>
-                            <p className="p-2 text-xs text-secondary-light dark:text-secondary-dark">
-                                {address}
-                            </p>
-                        </DialogContent>
-                    </Dialog>
+                            </DialogContent>
+                        </Dialog>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
index 9ef7952f..57ba8554 100644
--- 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,10 @@ 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
index 4d9642cc..83b018c4 100644
--- a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
+++ b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
@@ -108,6 +108,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                                     heading: "FROM",
                                     content: (
                                         <Address
+                                            label={result.from_address_label}
                                             address={result.from_address}
                                         />
                                     ),
@@ -115,7 +116,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                                 {
                                     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
index ad200cf1..8a19994a 100644
--- 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
index 67b8902d..96ab9a58 100644
--- 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
index d8e208c4..eee52e3b 100644
--- 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;
 }