diff --git a/src/routes/trades.tsx b/src/routes/trades.tsx
index f77aa83..f1e4a83 100644
--- a/src/routes/trades.tsx
+++ b/src/routes/trades.tsx
@@ -37,6 +37,7 @@ import {
IconCheck,
IconArrowsUpDown,
IconArrowLeft,
+ IconArrowsDownUp,
} from "@tabler/icons-react";
import { numberDisplay } from "../number-display";
import BigDecimal from "js-big-decimal";
@@ -302,6 +303,7 @@ type TokenAmountCellProps = {
amountRaw: StringifiedNumber;
tokenMintData: MintData | undefined;
isDeposit: boolean;
+ onNumberClick?: () => void;
};
function TokenAmountCell({
@@ -309,6 +311,7 @@ function TokenAmountCell({
amountRaw,
tokenMintData,
isDeposit,
+ onNumberClick,
}: TokenAmountCellProps) {
const explorerLink = `https://explorer.solana.com/address/${address}`;
@@ -325,7 +328,9 @@ function TokenAmountCell({
{isDeposit && Deposited}
- {formattedAmount}{" "}
+
+ {formattedAmount}
+ {" "}
{tokenMintData.symbol}
@@ -366,6 +371,7 @@ type RateCellProps = {
inputMintData: MintData | undefined;
outputMintData: MintData | undefined;
rateType: RateType;
+ onNumberClick: () => void;
};
function RateCell({
@@ -374,6 +380,7 @@ function RateCell({
inputMintData,
outputMintData,
rateType,
+ onNumberClick,
}: RateCellProps) {
if (!inputMintData || !outputMintData) {
return Unknown;
@@ -400,7 +407,7 @@ function RateCell({
? `${rateInputOverOutput.getPrettyValue()} ${inputMintData.symbol} per ${outputMintData.symbol}`
: `${rateOutputOverInput.getPrettyValue()} ${outputMintData.symbol} per ${inputMintData.symbol}`;
- return {text};
+ return {text};
}
function TransactionLinkCell({ txId }: { txId: string }) {
@@ -521,12 +528,13 @@ function TradeRow({
isDeposit={false}
/>
-
+
@@ -536,6 +544,7 @@ function TradeRow({
inputMintData={inputMintData}
outputMintData={outputMintData}
rateType={rateType}
+ onNumberClick={switchRateType}
/>
@@ -657,10 +666,17 @@ export default function Fills() {
variant="subtle"
aria-label="Switch rate type"
>
-
+ {rateType === RateType.OUTPUT_PER_INPUT ? (
+
+ ) : (
+
+ )}