feat(tooling-explorer): Rebrand Transaction blocks (#1999)

* feat(tooling-explorer): Rebrand Transaction Blocks * fix layout * adjustements * Update apps/explorer/src/components/TransactionsCardGraph.tsx Co-authored-by: evavirseda <[email protected]> * chore: Remove unnecessary div --------- Co-authored-by: evavirseda <[email protected]>
iotaledger · Aug 29, 2024 · e014a17 · e014a17
1 parent e243567
commit e014a17
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/apps/explorer/src/components/TransactionsCardGraph.tsx b/apps/explorer/src/components/TransactionsCardGraph.tsx
@@ -2,16 +2,14 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatAmount, formatDate } from '@iota/core';
+import { formatAmount, formatBalance, formatDate } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { Heading, Text, LoadingIndicator } from '@iota/ui';
 import { ParentSize } from '@visx/responsive';
-import clsx from 'clsx';
 
 import { AreaGraph } from './AreaGraph';
-import { FormattedStatsAmount } from './home-metrics/FormattedStatsAmount';
 import { ErrorBoundary } from './error-boundary/ErrorBoundary';
-import { Card } from '~/components/ui';
+import { LabelText, LabelTextSize, Panel, Title, TitleSize } from '@iota/apps-ui-kit';
 
 interface TooltipContentProps {
     data: {
@@ -78,32 +76,33 @@ export function TransactionsCardGraph() {
         epochMetrics?.[epochMetrics.length - 1]?.epochTotalTransactions;
 
     return (
-        <Card bg="white/80" spacing={!epochMetrics?.length ? 'lg' : 'lgGraph'} height="full">
-            <div className="flex h-full flex-col gap-4 overflow-hidden">
-                <Heading variant="heading4/semibold" color="steel-darker">
-                    Transaction Blocks
-                </Heading>
-                <div className="flex flex-wrap gap-6">
-                    <FormattedStatsAmount
-                        orientation="vertical"
-                        label="Total"
-                        tooltip="Total transaction blocks"
-                        amount={totalTransactions}
-                        size="md"
-                    />
-                    <FormattedStatsAmount
-                        orientation="vertical"
-                        label="Last Epoch"
-                        amount={lastEpochTotalTransactions}
-                        size="md"
-                    />
+        <Panel>
+            <Title title="Transaction Blocks" size={TitleSize.Medium} />
+            <div className="flex flex-col gap-md p-md--rs">
+                <div className="flex flex-row gap-md">
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Total"
+                            text={totalTransactions ? formatBalance(totalTransactions, 0) : '--'}
+                            showSupportingLabel={false}
+                        />
+                    </div>
+
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Last epoch"
+                            text={
+                                lastEpochTotalTransactions
+                                    ? lastEpochTotalTransactions.toString()
+                                    : '--'
+                            }
+                            showSupportingLabel={false}
+                        />
+                    </div>
                 </div>
-                <div
-                    className={clsx(
-                        'flex min-h-[180px] flex-1 flex-col items-center justify-center rounded-xl transition-colors',
-                        !epochMetrics?.length && 'bg-gray-40',
-                    )}
-                >
+                <div className="flex min-h-[340px] flex-1 flex-col items-center justify-center rounded-xl transition-colors">
                     {isPending ? (
                         <div className="flex flex-col items-center gap-1">
                             <LoadingIndicator />
@@ -139,6 +138,6 @@ export function TransactionsCardGraph() {
                     )}
                 </div>
             </div>
-        </Card>
+        </Panel>
     );
 }