feat(explorer): reverse objects link and amount in address objects li…

…st (#3548)
iotaledger · Oct 24, 2024 · d5eb835 · d5eb835
1 parent babee23
commit d5eb835
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/apps/explorer/src/components/owned-coins/CoinItem.tsx b/apps/explorer/src/components/owned-coins/CoinItem.tsx
@@ -17,6 +17,7 @@ export default function CoinItem({ coin }: CoinItemProps): JSX.Element {
     return (
         <KeyValueInfo
             keyText={`${formattedBalance} ${symbol}`}
+            isReverse
             value={
                 <ObjectLink objectId={coin.coinObjectId} label={formatAddress(coin.coinObjectId)} />
             }

diff --git a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
@@ -53,6 +53,10 @@ interface KeyValueProps {
      * Full width KeyValue (optional).
      */
     fullwidth?: boolean;
+    /**
+     * Reverse the KeyValue (optional).
+     */
+    isReverse?: boolean;
 }
 
 export function KeyValueInfo({
@@ -67,7 +71,9 @@ export function KeyValueInfo({
     onCopySuccess,
     onCopyError,
     fullwidth,
+    isReverse = false,
 }: KeyValueProps): React.JSX.Element {
+    const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
     async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
         if (!navigator.clipboard) {
             return;
@@ -86,9 +92,13 @@ export function KeyValueInfo({
 
     return (
         <div
-            className={cx('flex w-full flex-row items-baseline gap-xs py-xxs font-inter', {
-                'justify-between': fullwidth,
-            })}
+            className={cx(
+                'flex w-full items-baseline gap-xs py-xxs font-inter',
+                flexDirectionClass,
+                {
+                    'justify-between': fullwidth,
+                },
+            )}
         >
             <div
                 className={cx('flex shrink-0 flex-row items-center gap-x-0.5', {