Skip to content

Commit

Permalink
fix(tx receipt): responsiveness (#135)
Browse files Browse the repository at this point in the history 
Co-authored-by: nguyenlejoe <joe_le.1@hotmail.com>
  • Loading branch information
@jagnani73 @nguyenlejoe
jagnani73 and nguyenlejoe authored Feb 29, 2024
1 parent 0e81fd7 commit d0881a9
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 10 deletions.
19 changes: 11 additions & 8 deletions src/components/Molecules/DecodedTransaction/DecodedTransaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,13 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
<p>No decoded Events.</p>
) : (
events.map(
({ name, details, nfts, protocol, tokens }) => (
(
{ name, details, nfts, protocol, tokens },
i
) => (
<article
key={name}
className="flex w-full flex-col gap-y-4 border-t py-4 first:border-t-0 first:pt-0 last:pb-0"
key={name + i}
className="flex w-full flex-col border-t py-4 last:border-b md:gap-y-4"
>
<header className="flex w-full justify-between">
<h3 className="font-medium">
Expand All @@ -135,7 +138,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
collection_address +
token_identifier
}
className="flex gap-x-4"
className="flex flex-col gap-x-4 sm:flex-row"
>
<figure>
<Card className="w-32 overflow-hidden rounded border">
Expand Down Expand Up @@ -164,7 +167,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
</Card>
</figure>

<div className="flex flex-col gap-y-2 truncate text-ellipsis py-2 text-sm text-muted-foreground">
<div className="flex flex-col gap-y-2 truncate text-ellipsis py-1 text-sm text-muted-foreground">
<div className="flex whitespace-break-spaces font-medium">
{handleHashInString(
heading
Expand Down Expand Up @@ -212,7 +215,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
)}

{tokens?.length ? (
<div className="mt-2 grid grid-cols-3 gap-x-4 gap-y-2">
<div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
{tokens.map(
({
heading,
Expand Down Expand Up @@ -268,7 +271,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
<figure className="ml-2">
<TokenAvatar
size={
GRK_SIZES.EXTRA_SMALL
GRK_SIZES.EXTRA_EXTRA_SMALL
}
chain_color={
CHAIN
Expand Down Expand Up @@ -304,7 +307,7 @@ export const DecodedTransaction: React.FC<DecodedTransactionProps> = ({
)}

{details?.length ? (
<div className="mt-2 grid grid-cols-3 gap-x-4 gap-y-2">
<div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
{details.map(
({
heading,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Organisms/TransactionReceiptView/TransactionReceiptView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const TransactionReceiptView: React.FC<TransactionReceiptViewProps> = ({
</CardDescription>
</div>

<div className="flex gap-x-8 border-b pb-4">
<div className="flex flex-col gap-x-8 gap-y-2 md:flex-row">
<div className="flex flex-col">
<CardDescription>
Address
Expand Down Expand Up @@ -137,7 +137,7 @@ export const TransactionReceiptView: React.FC<TransactionReceiptViewProps> = ({
<></>
) : (
<>
<div className="flex flex-col gap-y-2 border-t pt-4">
<div className="flex flex-col gap-y-2">
<div>
<CardDescription>
Transaction Fee
Expand Down

0 comments on commit d0881a9

Please sign in to comment.