feat(wallet): rebrand tx details page (#2350)

* feat: rework Validator Logo * fix: update stake amount and key value info on stak tx card * feat: rework TxnAmount component * feat: rework GasSummary and add StakeTxnInfo panel * fix: remove unused components * feat: adjust stlying of stakeTxCard * fix: styling of the unstake transaction * fix: rename receipt components * fix: add panel to unstakeTx component * feat: update transaction status component * fix: rebrand Balance Changes component * fix: rebrand Object Changes component * fix: resolve comments * fix: add full width to stake/unstake panel * fix: rebrand ObjectChangeDisplay component * fix: Delegation Details styling * fix: revert number hash in Epoch string * fix: remove stale comment * fix: typo * fix: rebrand gas fees component * fix: add missing keys to the for loops in templates * fix: rework gas component * fix: show gas only if sent transaction recepit * fix: rebrand show more/less button in expandable list * fix: remove unused components * fix: undefined timestamp * fix: extract elxporer link card to const * fix: styling and add InfoBox component * fix: remove unused imports
iotaledger · Sep 13, 2024 · 4cd4876 · 4cd4876
1 parent c6c4d54
commit 4cd4876
Show file tree

Hide file tree

Showing 18 changed files with 356 additions and 686 deletions.
diff --git a/apps/wallet/src/ui/app/components/receipt-card/StatusIcon.tsx b/apps/wallet/src/ui/app/components/receipt-card/StatusIcon.tsx
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -3,30 +3,42 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRecognizedPackages } from '_src/ui/app/hooks/useRecognizedPackages';
-import { useTransactionSummary, STAKING_REQUEST_EVENT, UNSTAKING_REQUEST_EVENT } from '@iota/core';
+import {
+    useTransactionSummary,
+    STAKING_REQUEST_EVENT,
+    UNSTAKING_REQUEST_EVENT,
+    formatDate,
+} from '@iota/core';
 import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 
-import { DateCard } from '../../shared/date-card';
 import { TransactionSummary } from '../../shared/transaction-summary';
 import { StakeTxn } from './StakeTxn';
-import { StatusIcon } from './StatusIcon';
 import { UnStakeTxn } from './UnstakeTxn';
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { CheckmarkFilled } from '@iota/ui-icons';
+import cl from 'clsx';
 import { ExplorerLinkCard } from '../../shared/transaction-summary/cards/ExplorerLink';
+import { GasFees } from '../../pages/approval-request/transaction-request/GasFees';
 
 interface TransactionStatusProps {
     success: boolean;
     timestamp?: string;
 }
 
 function TransactionStatus({ success, timestamp }: TransactionStatusProps) {
+    const txnDate = timestamp ? formatDate(Number(timestamp)) : '';
     return (
-        <div className="mb-4 flex flex-col items-center justify-center gap-3">
-            <StatusIcon status={success} />
-            <span data-testid="transaction-status" className="sr-only">
-                {success ? 'Transaction Success' : 'Transaction Failed'}
-            </span>
-            {timestamp && <DateCard timestamp={Number(timestamp)} size="md" />}
-        </div>
+        <InfoBox
+            type={success ? InfoBoxType.Default : InfoBoxType.Warning}
+            style={InfoBoxStyle.Elevated}
+            title={success ? 'Successfully sent' : 'Transaction Failed'}
+            supportingText={timestamp ? txnDate : ''}
+            icon={
+                <CheckmarkFilled
+                    className={cl('h-5 w-5', success ? 'text-primary-30' : 'text-neutral-10')}
+                />
+            }
+        ></InfoBox>
     );
 }
 
@@ -43,33 +55,39 @@ export function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
         currentAddress: activeAddress,
         recognizedPackagesList,
     });
+    const isSender = txn.transaction?.data.sender === activeAddress;
 
     if (!summary) return null;
 
     const stakedTxn = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
 
     const unstakeTxn = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
 
+    const renderExplorerLinkCard = () => (
+        <ExplorerLinkCard digest={summary?.digest} timestamp={summary?.timestamp ?? undefined} />
+    );
+
     // todo: re-using the existing staking cards for now
     if (stakedTxn || unstakeTxn)
         return (
             <div className="flex h-full w-full flex-col justify-between">
                 {stakedTxn ? <StakeTxn event={stakedTxn} gasSummary={summary?.gas} /> : null}
                 {unstakeTxn ? <UnStakeTxn event={unstakeTxn} gasSummary={summary?.gas} /> : null}
-                <ExplorerLinkCard
-                    digest={summary?.digest}
-                    timestamp={summary?.timestamp ?? undefined}
-                />
+                {renderExplorerLinkCard()}
             </div>
         );
 
     return (
-        <div className="relative block h-full w-full">
-            <TransactionStatus
-                success={summary.status === 'success'}
-                timestamp={txn.timestampMs ?? undefined}
-            />
-            <TransactionSummary showGasSummary summary={summary} />
+        <div className="flex h-full w-full flex-col">
+            <div className="-mr-3 flex flex-col gap-md overflow-y-auto overflow-x-hidden">
+                <TransactionStatus
+                    success={summary.status === 'success'}
+                    timestamp={txn.timestampMs ?? undefined}
+                />
+                <TransactionSummary summary={summary} />
+                {isSender && <GasFees gasSummary={summary?.gas} />}
+            </div>
+            <div className="pt-sm">{renderExplorerLinkCard()}</div>
         </div>
     );
 }
diff --git a/apps/wallet/src/ui/app/components/transactions-card/TxnImage.tsx b/apps/wallet/src/ui/app/components/transactions-card/TxnImage.tsx
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx
@@ -2,56 +2,52 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useTransactionData, useTransactionGasBudget } from '_src/ui/app/hooks';
-import { GAS_SYMBOL } from '_src/ui/app/redux/slices/iota-objects/Coin';
-import { type TransactionBlock } from '@iota/iota-sdk/transactions';
-import { formatAddress } from '@iota/iota-sdk/utils';
-
-import { DescriptionItem, DescriptionList } from './DescriptionList';
-import { SummaryCard } from './SummaryCard';
+import { TitleSize, Badge, BadgeType, Title, Panel } from '@iota/apps-ui-kit';
+import { Collapsible } from '_src/ui/app/shared/collapse';
+import { GasSummary } from '_src/ui/app/shared/transaction-summary/cards/GasSummary';
+import { type GasSummaryType } from '@iota/core';
 
 interface GasFeesProps {
     sender?: string;
-    transaction: TransactionBlock;
+    gasSummary?: GasSummaryType;
+    isEstimate?: boolean;
+    isPending?: boolean;
+    isError?: boolean;
 }
+const DEFAULT_TITLE = 'Gas Fees';
 
-export function GasFees({ sender, transaction }: GasFeesProps) {
-    const { data: transactionData } = useTransactionData(sender, transaction);
-    const { data: gasBudget, isPending, isError } = useTransactionGasBudget(sender, transaction);
-    const isSponsored =
-        transactionData?.gasConfig.owner &&
-        transactionData.sender !== transactionData.gasConfig.owner;
+export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }: GasFeesProps) {
+    const title = isEstimate ? `Est. ${DEFAULT_TITLE}` : DEFAULT_TITLE;
+    const trailingElement =
+        gasSummary?.isSponsored && gasSummary.owner ? (
+            <div className="ml-1 flex">
+                <Badge type={BadgeType.PrimarySoft} label="Sponsored" />
+            </div>
+        ) : null;
     return (
-        <SummaryCard
-            header="Estimated Gas Fees"
-            badge={
-                isSponsored ? (
-                    <div className="text-success rounded-full bg-white px-1.5 py-0.5 text-captionSmallExtra font-medium uppercase">
-                        Sponsored
+        <Panel hasBorder>
+            <div className="flex flex-col gap-y-sm overflow-hidden rounded-xl">
+                <Collapsible
+                    hideBorder
+                    defaultOpen
+                    render={() => (
+                        <Title
+                            size={TitleSize.Small}
+                            title={title}
+                            trailingElement={trailingElement}
+                        />
+                    )}
+                >
+                    <div className="flex flex-col gap-y-sm p-md">
+                        <GasSummary
+                            sender={sender}
+                            gasSummary={gasSummary}
+                            isPending={isPending}
+                            isError={isError}
+                        />
                     </div>
-                ) : null
-            }
-            initialExpanded
-        >
-            <DescriptionList>
-                <DescriptionItem title="You Pay">
-                    {isPending
-                        ? 'Estimating...'
-                        : isError
-                          ? 'Gas estimation failed'
-                          : `${isSponsored ? 0 : gasBudget} ${GAS_SYMBOL}`}
-                </DescriptionItem>
-                {isSponsored && (
-                    <>
-                        <DescriptionItem title="Sponsor Pays">
-                            {gasBudget ? `${gasBudget} ${GAS_SYMBOL}` : '-'}
-                        </DescriptionItem>
-                        <DescriptionItem title="Sponsor">
-                            {formatAddress(transactionData!.gasConfig.owner!)}
-                        </DescriptionItem>
-                    </>
-                )}
-            </DescriptionList>
-        </SummaryCard>
+                </Collapsible>
+            </div>
+        </Panel>
     );
 }
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
@@ -100,13 +100,18 @@ export function TransactionRequest({ txRequest }: TransactionRequestProps) {
                             isDryRun
                             isLoading={isDryRunLoading}
                             isError={isDryRunError}
-                            showGasSummary={false}
                             summary={summary}
                         />
                     </div>
                     <section className=" -mx-6 bg-white">
                         <div className="flex flex-col gap-4 p-6">
-                            <GasFees sender={addressForTransaction} transaction={transaction} />
+                            <GasFees
+                                sender={addressForTransaction}
+                                gasSummary={summary?.gas}
+                                isEstimate
+                                isError={isError}
+                                isPending={isDryRunLoading}
+                            />
                             <TransactionDetails
                                 sender={addressForTransaction}
                                 transaction={transaction}

diff --git a/apps/wallet/src/ui/app/shared/ExpandableList.tsx b/apps/wallet/src/ui/app/shared/ExpandableList.tsx
@@ -2,12 +2,11 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ChevronDown12 } from '@iota/icons';
 import clsx from 'clsx';
 import { useMemo, useState, type ReactNode } from 'react';
 
-import { Link } from './Link';
-import { Text } from './text';
+import { TriangleDown } from '@iota/ui-icons';
+import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 
 interface ExpandableListProps {
     items: ReactNode[];
@@ -30,21 +29,27 @@ export function ExpandableList({ items, defaultItemsToShow }: ExpandableListProp
                 <div key={index}>{item}</div>
             ))}
             {items.length > defaultItemsToShow && (
-                <div className="flex w-full cursor-pointer items-center">
-                    <Link
-                        onClick={handleShowAllClick}
-                        after={
-                            <ChevronDown12
-                                height={12}
-                                width={12}
-                                className={clsx('text-steel hover:text-steel-dark', {
-                                    'rotate-180': showAll,
-                                })}
+                <div className="flex w-full cursor-pointer items-center justify-center">
+                    <Button
+                        size={ButtonSize.Small}
+                        type={ButtonType.Ghost}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            handleShowAllClick();
+                        }}
+                        text={showAll ? 'Show Less' : 'Show All'}
+                        iconAfterText
+                        icon={
+                            <TriangleDown
+                                className={clsx(
+                                    'ml-xxxs h-5 w-5 text-neutral-60',
+                                    showAll
+                                        ? 'rotate-180 transition-transform ease-linear'
+                                        : 'rotate-0 transition-transform ease-linear',
+                                )}
                             />
                         }
-                    >
-                        <Text variant="bodySmall">{showAll ? 'Show Less' : 'Show All'}</Text>
-                    </Link>
+                    />
                 </div>
             )}
         </>

diff --git a/apps/wallet/src/ui/app/shared/collapse/index.tsx b/apps/wallet/src/ui/app/shared/collapse/index.tsx
@@ -9,7 +9,6 @@ interface CollapsibleProps {
     title?: string;
     defaultOpen?: boolean;
     children: ReactNode | ReactNode[];
-    shade?: 'lighter' | 'darker';
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     titleSize?: TitleSize;
@@ -24,7 +23,6 @@ export function Collapsible({
     defaultOpen,
     isOpen,
     onOpenChange,
-    shade = 'lighter',
     titleSize = TitleSize.Small,
     render,
     hideArrow,

diff --git a/apps/wallet/src/ui/app/shared/date-card/index.tsx b/apps/wallet/src/ui/app/shared/date-card/index.tsx