Match to figma

osmosis-labs · Aug 9, 2024 · 67b3ae3 · 67b3ae3
1 parent 7e9596f
commit 67b3ae3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 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
@@ -12,14 +12,11 @@ export const RecentActivityRow: FunctionComponent<{
   title: { [key in TransactionStatus]: string };
   leftComponent: JSX.Element | null;
   rightComponent: JSX.Element | null;
-}> = ({ status, title, leftComponent, rightComponent }) => {
+}> = ({ leftComponent, rightComponent }) => {
   return (
-    <div className="-mx-2 flex justify-between gap-4 rounded-2xl p-2">
-      <div className="flex flex-col">
-        <p className="subtitle1 text-osmoverse-100">{title[status]}</p>
-        {leftComponent}
-      </div>
-      <div className="flex items-center justify-end">{rightComponent}</div>
+    <div className="-mx-2 flex justify-between gap-4 p-2">
+      {leftComponent}
+      {rightComponent}
     </div>
   );
 };
@@ -32,19 +29,22 @@ export const SwapRow: FunctionComponent<TransactionRowTransaction> = ({
   const { t } = useTranslation();
 
   const leftComponent = tokenConversion ? (
-    <div className="caption flex gap-1 text-osmoverse-300">
-      {displayFiatPrice(tokenConversion.tokenIn?.value, "", t)}{" "}
-      {tokenConversion.tokenOut.amount.denom}{" "}
-      <Icon id="arrow-right" width={14} height={14} />{" "}
-      {tokenConversion.tokenIn.amount.denom}
+    <div className="flex flex-col gap-0.5">
+      <p className="body2 text-white-full">{title[status]}</p>
+      <div className="caption flex items-center gap-1 text-osmoverse-300">
+        {displayFiatPrice(tokenConversion.tokenIn?.value, "", t)}{" "}
+        {tokenConversion.tokenOut.amount.denom}{" "}
+        <Icon id="arrow-right" width={14} height={14} />{" "}
+        {tokenConversion.tokenIn.amount.denom}
+      </div>
     </div>
   ) : null;
 
   const rightComponent = tokenConversion ? (
     <div className="flex items-center justify-end">
       <FallbackImg
-        alt={tokenConversion.tokenIn.amount.denom}
-        src={tokenConversion.tokenIn.amount.currency.coinImageUrl}
+        alt={tokenConversion.tokenOut.amount.denom}
+        src={tokenConversion.tokenOut.amount.currency.coinImageUrl}
         fallbacksrc="/icons/question-mark.svg"
         height={32}
         width={32}
@@ -56,8 +56,8 @@ export const SwapRow: FunctionComponent<TransactionRowTransaction> = ({
         className="my-[8px] mx-[4px] text-osmoverse-500"
       />
       <FallbackImg
-        alt={tokenConversion.tokenOut.amount.denom}
-        src={tokenConversion.tokenOut.amount.currency.coinImageUrl}
+        alt={tokenConversion.tokenIn.amount.denom}
+        src={tokenConversion.tokenIn.amount.currency.coinImageUrl}
         fallbacksrc="/icons/question-mark.svg"
         height={32}
         width={32}

diff --git a/packages/web/components/transactions/recent-activity/recent-activity.tsx b/packages/web/components/transactions/recent-activity/recent-activity.tsx
@@ -4,7 +4,7 @@ import { FunctionComponent } from "react";
 import { LinkButton } from "~/components/buttons/link-button";
 import { NoTransactionsSplash } from "~/components/transactions/no-transactions-splash";
 import { Skeleton } from "~/components/ui/skeleton";
-import { useTranslation, useWalletSelect } from "~/hooks";
+import { useTranslation } from "~/hooks";
 import { useStore } from "~/stores";
 import { api } from "~/utils/trpc";
 
@@ -28,7 +28,6 @@ const RecentActivitySkeleton = () => {
 // v1 includes top 5 transactions from transaction history
 export const RecentActivity: FunctionComponent = observer(() => {
   const { accountStore } = useStore();
-  const { isLoading: isWalletLoading } = useWalletSelect();
 
   const wallet = accountStore.getWallet(accountStore.osmosisChainId);
 
@@ -54,17 +53,17 @@ export const RecentActivity: FunctionComponent = observer(() => {
 
   return (
     <div className="flex w-full flex-col py-3">
-      <div className="flex cursor-pointer items-center justify-between py-3">
+      <div className="flex cursor-pointer items-center justify-between gap-3 py-3">
         <h6>{t("portfolio.recentActivity")}</h6>
         <LinkButton
           href="/transactions"
-          className="text-osmoverse-400"
+          className="-mx-2 text-osmoverse-400"
           label={t("portfolio.seeAll")}
           ariaLabel={t("portfolio.seeAll")}
           size="md"
         />
       </div>
-      <div className="flex w-full flex-col">
+      <div className="flex flex-col justify-between self-stretch py-2">
         {isGetTransactionsLoading ? (
           <RecentActivitySkeleton />
         ) : topActivity?.length === 0 ? (