feat(tooling-explorer): Rebrand network activity on homepage (#1987)

* feat(tooling-explorer): Rebrand OnTheNetwork.tsx * feat(tooling-explorer): Adjust paddings in OnTheNetwork.tsx * feat(tooling-explorer): Honour PR comments (remove extra div, use constant gap, add flex-wrap to LabelText component) * feat(tooling-explorer): Just paste what Eva gave you --------- Co-authored-by: Marc Espin <[email protected]>
iotaledger · Aug 23, 2024 · 8218a74 · 8218a74
1 parent f51d32c
commit 8218a74
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 63 deletions.
diff --git a/apps/explorer/src/components/home-metrics/OnTheNetwork.tsx b/apps/explorer/src/components/home-metrics/OnTheNetwork.tsx
@@ -4,11 +4,9 @@
 
 import { CoinFormat, formatBalance } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-import { Heading } from '@iota/ui';
+import { Panel, Divider, LabelText, LabelTextSize, Title, TitleSize } from '@iota/apps-ui-kit';
 
-import { Card, Divider } from '~/components/ui';
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
-import { FormattedStatsAmount, StatsWrapper } from './FormattedStatsAmount';
 import { IOTA_DECIMALS, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 export function OnTheNetwork(): JSX.Element {
@@ -22,72 +20,82 @@ export function OnTheNetwork(): JSX.Element {
             ? formatBalance(referenceGasPrice, 0, CoinFormat.FULL)
             : null;
     const totalSupplyFormatted = totalSupply?.value
-        ? formatBalance(totalSupply.value, IOTA_DECIMALS, CoinFormat.FULL)
+        ? formatBalance(totalSupply.value, IOTA_DECIMALS, CoinFormat.ROUNDED)
         : null;
     return (
-        <Card bg="white/80" spacing="lg" height="full">
-            <div className="flex flex-col gap-4">
-                <Heading variant="heading4/semibold" color="steel-darker">
-                    Network Activity
-                </Heading>
-                <div className="flex gap-6">
-                    <FormattedStatsAmount
-                        label="TPS now"
-                        amount={
-                            networkMetrics?.currentTps
-                                ? Math.floor(networkMetrics.currentTps)
-                                : undefined
-                        }
-                        size="md"
-                    />
-                    <FormattedStatsAmount
-                        label="Peak 30d TPS"
-                        tooltip="Peak TPS in the past 30 days excluding this epoch"
-                        amount={
-                            networkMetrics?.tps30Days
-                                ? Math.floor(networkMetrics?.tps30Days)
-                                : undefined
-                        }
-                        size="md"
-                    />
+        <Panel>
+            <Title title="Network Activity" size={TitleSize.Medium} />
+            <div className="flex flex-col gap-md p-md--rs">
+                <div className="flex gap-md">
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="TPS Now"
+                            text={
+                                networkMetrics?.currentTps
+                                    ? Math.floor(networkMetrics.currentTps).toString()
+                                    : '-'
+                            }
+                            showSupportingLabel={false}
+                        />
+                    </div>
+
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Peak 30d TPS"
+                            text={
+                                networkMetrics?.tps30Days
+                                    ? Math.floor(networkMetrics?.tps30Days).toString()
+                                    : '-'
+                            }
+                            showSupportingLabel={false}
+                        />
+                    </div>
                 </div>
-                <Divider color="hero/10" />
 
-                <StatsWrapper
-                    orientation="horizontal"
-                    label="Reference Gas Price"
-                    tooltip="The reference gas price of the current epoch"
-                    postfix={gasPriceFormatted !== null ? 'nano' : null}
-                    size="sm"
-                >
-                    {gasPriceFormatted}
-                </StatsWrapper>
+                <Divider />
 
-                <Divider color="hero/10" />
+                <div className="flex gap-x-md">
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Total Packages"
+                            text={networkMetrics?.totalPackages ?? '-'}
+                            showSupportingLabel={false}
+                        />
+                    </div>
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Objects"
+                            text={networkMetrics?.totalObjects ?? '-'}
+                            showSupportingLabel={false}
+                        />
+                    </div>
+                </div>
 
-                <div className="flex flex-1 flex-col gap-2">
-                    <FormattedStatsAmount
-                        orientation="horizontal"
-                        label="Total Packages"
-                        amount={networkMetrics?.totalPackages}
-                        size="sm"
-                    />
-                    <FormattedStatsAmount
-                        orientation="horizontal"
-                        label="Objects"
-                        amount={networkMetrics?.totalObjects}
-                        size="sm"
-                    />
-                    <StatsWrapper
-                        orientation="horizontal"
-                        label="Total Supply"
-                        size="sm"
-                        postfix={totalSupplyFormatted !== null ? 'IOTA' : null}
-                    >
-                        {totalSupplyFormatted}
-                    </StatsWrapper>
+                <div className="flex gap-md">
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Reference Gas Price"
+                            text={gasPriceFormatted ?? '-'}
+                            showSupportingLabel={gasPriceFormatted !== null}
+                            supportingLabel="IOTA"
+                        />
+                    </div>
+                    <div className="flex-1">
+                        <LabelText
+                            size={LabelTextSize.Large}
+                            label="Total Supply"
+                            text={totalSupplyFormatted ?? '-'}
+                            showSupportingLabel={totalSupplyFormatted !== null}
+                            supportingLabel="IOTA"
+                        />
+                    </div>
                 </div>
             </div>
-        </Card>
+        </Panel>
     );
 }
diff --git a/apps/ui-kit/package.json b/apps/ui-kit/package.json
@@ -31,6 +31,7 @@
         },
         "./styles": "./dist/style.css"
     },
+    "types": "./dist/index.d.ts",
     "dependencies": {
         "@fontsource/inter": "^5.0.17",
         "@iota/ui-icons": "workspace:*",

diff --git a/apps/ui-kit/src/lib/components/atoms/label-text/LabelText.tsx b/apps/ui-kit/src/lib/components/atoms/label-text/LabelText.tsx
@@ -48,7 +48,7 @@ export function LabelText({
     const gapClass = size === LabelTextSize.Small ? 'gap-0.5' : 'gap-1';
     return (
         <div className={cx('flex flex-col', centeredClasses, gapClass)}>
-            <div className="flex flex-row items-center gap-0.5">
+            <div className="flex flex-row flex-wrap items-center gap-0.5">
                 <span
                     className={cx('font-inter text-neutral-10 dark:text-neutral-92', textClasses)}
                 >