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 = ({
address,
+ label = null,
show_copy_icon = true,
}) => {
const [showCopy, setShowCopy] = useState(false);
@@ -23,9 +24,9 @@ export const Address: React.FC = ({
return (
- {truncate(address)}
+ {label?.trim() || truncate(address)}
- {show_copy_icon ? (
+ {show_copy_icon && (
- ) : (
- <>>
)}
);
diff --git a/src/components/Atoms/AddressCard/AddressCard.tsx b/src/components/Atoms/AddressCard/AddressCard.tsx
index a68ba950..4ec02878 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 = ({
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 = ({
/>
- {name}
+ {label}
-
-
{truncate(address)}
-
copyToClipboard(address)}
- >
- {showCopy ? (
-
- ) : (
- handleCopyClick()}
- />
- )}
-
-
+
+
+ {show_qr_code && (
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
index 9ef7952f..96c6c927 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
= ({
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 = ({
heading={FROM
}
content={
}
@@ -129,7 +132,9 @@ export const LatestTransactions: React.FC = ({
TO }
content={
-
+
}
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 = ({
heading: "FROM",
content: (
),
@@ -115,7 +116,10 @@ export const TransactionDetails: React.FC = ({
{
heading: "TO",
content: (
-
+
),
},
{
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 = ({
address={
result.tx_metadata.from_address
}
- name={
+ label={
result.tx_metadata
.from_address_label
}
@@ -188,7 +188,7 @@ export const TransactionReceipt: React.FC = ({
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 = ({
column={column}
/>
),
- cell: ({ row }) => {
- return (
-
- {row.original.from_address_label || (
-
- )}
-
- );
- },
+ cell: ({ row }) => (
+
+ ),
},
{
id: "to_address",
@@ -90,15 +87,12 @@ export const Transactions: React.FC = ({
column={column}
/>
),
- cell: ({ row }) => {
- return (
-
- {row.original.to_address_label || (
-
- )}
-
- );
- },
+ cell: ({ row }) => (
+
+ ),
},
{
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;
}