From d5eb835260c53e7f3479e29edab0abfd10305460 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 24 Oct 2024 11:08:19 +0200
Subject: [PATCH] feat(explorer): reverse objects link and amount in address
 objects list (#3548)

---
 .../src/components/owned-coins/CoinItem.tsx      |  1 +
 .../atoms/key-value-info/KeyValueInfo.tsx        | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/explorer/src/components/owned-coins/CoinItem.tsx b/apps/explorer/src/components/owned-coins/CoinItem.tsx
index a79d7cdf12f..d745b9202c3 100644
--- 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
index c484febd047..569054372f2 100644
--- 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', {