Skip to content

Commit

Permalink
feat: Replace name<>label (#175)
Browse files Browse the repository at this point in the history
  • Loading branch information
@karanpargal
karanpargal authored May 16, 2024
1 parent 957a757 commit 3f1315b
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 87 deletions.
11 changes: 5 additions & 6 deletions src/components/Atoms/Address/Address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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={() => {
Expand All @@ -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>
);
Expand Down
103 changes: 45 additions & 58 deletions src/components/Atoms/AddressCard/AddressCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -121,6 +123,7 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
heading={<div>FROM</div>}
content={
<Address
label={from_address_label}
address={from_address}
/>
}
Expand All @@ -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"
/>
Expand Down
6 changes: 5 additions & 1 deletion src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
),
},
{
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
address={
result.tx_metadata.from_address
}
name={
label={
result.tx_metadata
.from_address_label
}
Expand All @@ -188,7 +188,7 @@ export const TransactionReceipt: React.FC<TransactionReceiptProps> = ({
address={
result.tx_metadata.to_address
}
name={
label={
result.tx_metadata
.to_address_label
}
Expand Down
30 changes: 12 additions & 18 deletions src/components/Shared/Transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion src/utils/types/atoms.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down

0 comments on commit 3f1315b

Please sign in to comment.