From 62bef53d163e82a99bc2b86b3dd23e37ab3b04c0 Mon Sep 17 00:00:00 2001
From: Matt Upham <30577966+mattupham@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:06:46 -0700
Subject: [PATCH] Clean up

---
 .../recent-activity-transaction-row.tsx       | 77 ++++++++-----------
 1 file changed, 30 insertions(+), 47 deletions(-)

diff --git a/packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx b/packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx
index 58c9af4e37..ae306225f0 100644
--- a/packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx
+++ b/packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx
@@ -87,59 +87,42 @@ export const TransferRow: FunctionComponent<Activity> = ({
     </div>
   ) : null;
 
-  const rightComponent =
-    transfer?.direction === "withdraw" ? (
-      <>
-        <FallbackImg
-          alt={transfer?.amount.denom}
-          src={transfer?.amount.currency.coinImageUrl}
-          fallbacksrc="/icons/question-mark.svg"
-          height={32}
-          width={32}
-        />
-        <Icon
-          id="arrow-right"
-          width={16}
-          height={16}
-          className="my-[8px] mx-[4px] text-osmoverse-500"
-        />
-        <ChainLogo
-          prettyName={chainData?.prettyName}
-          color={chainData?.color}
-          logoUri={chainData?.relativeLogoUrl}
-          size="md"
-        />
-      </>
-    ) : (
-      <>
-        <ChainLogo
-          prettyName={chainData?.prettyName}
-          color={chainData?.color}
-          logoUri={chainData?.relativeLogoUrl}
-          size="md"
-        />
-        <Icon
-          id="arrow-right"
-          width={16}
-          height={16}
-          className="my-[8px] mx-[4px] text-osmoverse-500"
-        />
-        <FallbackImg
-          alt={transfer?.amount.denom}
-          src={transfer?.amount.currency.coinImageUrl}
-          fallbacksrc="/icons/question-mark.svg"
-          height={32}
-          width={32}
-        />
-      </>
-    );
+  const rightComponent = [
+    <FallbackImg
+      key="fallback-img"
+      alt={transfer?.amount.denom}
+      src={transfer?.amount.currency.coinImageUrl}
+      fallbacksrc="/icons/question-mark.svg"
+      height={32}
+      width={32}
+    />,
+    <Icon
+      key="icon-arrow-right"
+      id="arrow-right"
+      width={16}
+      height={16}
+      className="my-[8px] mx-[4px] text-osmoverse-500"
+    />,
+    <ChainLogo
+      key="chain-logo"
+      prettyName={chainData?.prettyName}
+      color={chainData?.color}
+      logoUri={chainData?.relativeLogoUrl}
+      size="md"
+    />,
+  ];
+
+  const orderedRightComponent =
+    transfer?.direction === "withdraw"
+      ? rightComponent
+      : rightComponent.reverse();
 
   return (
     <RecentActivityRow
       status={status}
       title={title}
       leftComponent={leftComponent}
-      rightComponent={rightComponent}
+      rightComponent={<>{orderedRightComponent}</>}
     />
   );
 };