Address price warning feedback

src/components/AssetInput.tsx

@@ -185,7 +185,9 @@ const AssetInput: FC<Props> = ({
             <p className="text-neutral-400 text-sm">
               {amountUSD ? formatUSD(amountUSD) : null}
             </p>
-            {amountUSD !== undefined && context === "dest" ? (
+            {amountUSD !== undefined &&
+            diffPercentage !== 0 &&
+            context === "dest" ? (
               <p
                 className={clsx(
                   "text-sm",

src/components/PriceImpactWarning.tsx

@@ -2,16 +2,18 @@ import { useDisclosureKey } from "@/context/disclosures";
 
 interface Props {
   onGoBack: () => void;
-  warningMessage?: string;
+  message?: string;
+  title?: string;
 }
 
 export const PriceImpactWarning = ({
   onGoBack,
-  warningMessage = "",
+  message = "",
+  title = "",
 }: Props) => {
   const [isOpen, control] = useDisclosureKey("priceImpactWarning");
 
-  if (!isOpen) return null;
+  if (!isOpen || title === "") return null;
 
   return (
     <div className="absolute inset-0 bg-white rounded-3xl z-[999]">
@@ -33,28 +35,28 @@ export const PriceImpactWarning = ({
               </svg>
             </div>
             <p className="font-bold text-lg text-center text-red-500 mb-2">
-              Price Impact Warning
+              {title}
             </p>
             <p className="text-center text-lg px-4 leading-snug text-gray-500">
-              {warningMessage} Do you want to continue?
+              {message} Do you want to continue?
             </p>
           </div>
           <div className="flex items-end gap-2">
             <button
               className="bg-[#FF486E] hover:bg-[#ed1149] transition-colors text-white font-semibold py-4 rounded-md w-full"
-              onClick={() => control.close()}
-            >
-              Continue
-            </button>
-            <button
-              className="border border-gray-400 text-gray-500 font-semibold py-4 rounded-md w-full transition-colors hover:bg-gray-50"
               onClick={() => {
                 control.close();
                 onGoBack();
               }}
             >
               Go Back
             </button>
+            <button
+              className="border border-gray-400 text-gray-500 font-semibold py-4 rounded-md w-full transition-colors hover:bg-gray-50"
+              onClick={() => control.close()}
+            >
+              Continue
+            </button>
           </div>
         </div>
       </div>

src/components/SwapWidget/SwapWidget.tsx

@@ -23,7 +23,7 @@ import TransactionDialog from "../TransactionDialog";
 import { UsdDiff } from "../UsdValue";
 import { useWalletModal, WalletModal } from "../WalletModal";
 import { SwapDetails } from "./SwapDetails";
-import { PRICE_IMPACT_THRESHOLD, useSwapWidget } from "./useSwapWidget";
+import { useSwapWidget } from "./useSwapWidget";
 
 export const SwapWidget: FC = () => {
   const { openWalletModal } = useWalletModal();
@@ -50,7 +50,8 @@ export const SwapWidget: FC = () => {
     swapPriceImpactPercent,
     priceImpactThresholdReached,
     routeError,
-    routeWarning,
+    routeWarningTitle,
+    routeWarningMessage,
   } = useSwapWidget();
 
   let usdDiffPercent = 0.0;
@@ -267,10 +268,10 @@ export const SwapWidget: FC = () => {
                 transactionCount={numberOfTransactions}
                 insufficientBalance={insufficientBalance}
                 shouldShowPriceImpactWarning={
-                  priceImpactThresholdReached ||
-                  Math.abs(usdDiffPercent * 100) > PRICE_IMPACT_THRESHOLD
+                  !!routeWarningTitle && !!routeWarningMessage
                 }
-                routeWarning={routeWarning}
+                routeWarningTitle={routeWarningTitle}
+                routeWarningMessage={routeWarningMessage}
               />
               {insufficientBalance && (
                 <p className="text-center font-semibold text-sm text-red-500">

src/components/SwapWidget/useSwapWidget.ts

@@ -201,16 +201,19 @@ export function useSwapWidget() {
     return (usdAmountOut - usdAmountIn) / usdAmountIn;
   }, [routeResponse]);
 
-  const routeWarning = useMemo(() => {
+  const [routeWarningTitle, routeWarningMessage] = useMemo(() => {
     if (!routeResponse) {
-      return undefined;
+      return [undefined, undefined];
     }
 
     if (
       !routeResponse.swapPriceImpactPercent &&
       (!routeResponse.usdAmountIn || !routeResponse.usdAmountOut)
     ) {
-      return "We were unable to calculate the price impact of this route.";
+      return [
+        "Low Information Trade",
+        "We were unable to calculate the price impact of this route.",
+      ];
     }
 
     if (usdDiffPercent && Math.abs(usdDiffPercent) > PRICE_IMPACT_THRESHOLD) {
@@ -228,7 +231,10 @@ export function useSwapWidget() {
         style: "percent",
         maximumFractionDigits: 2,
       }).format(Math.abs(usdDiffPercent));
-      return `Your estimated output value (${amountOutUSD}) is ${formattedUsdDiffPercent} lower than your estimated input value (${amountInUSD}).`;
+      return [
+        "Bad Trade Warning",
+        `Your estimated output value (${amountOutUSD}) is ${formattedUsdDiffPercent} lower than your estimated input value (${amountInUSD}).`,
+      ];
     }
 
     if (
@@ -239,8 +245,13 @@ export function useSwapWidget() {
         style: "percent",
         maximumFractionDigits: 2,
       }).format(swapPriceImpactPercent);
-      return `Your swap is expected to execute at a ${formattedPriceImpact} worse price than the current estimated on-chain price. It's likely there's not much liquidity available for this swap.`;
+      return [
+        "Bad Trade Warning",
+        `Your swap is expected to execute at a ${formattedPriceImpact} worse price than the current estimated on-chain price. It's likely there's not much liquidity available for this swap.`,
+      ];
     }
+
+    return [undefined, undefined];
   }, [routeResponse, swapPriceImpactPercent, usdDiffPercent]);
 
   return {
@@ -264,7 +275,8 @@ export function useSwapWidget() {
     routeError: errorMessage,
     swapPriceImpactPercent,
     priceImpactThresholdReached,
-    routeWarning,
+    routeWarningTitle,
+    routeWarningMessage,
   };
 }
 

src/components/TransactionDialog/index.tsx

@@ -14,7 +14,8 @@ interface Props {
   transactionCount: number;
   insufficientBalance?: boolean;
   shouldShowPriceImpactWarning?: boolean;
-  routeWarning?: string;
+  routeWarningMessage?: string;
+  routeWarningTitle?: string;
 }
 
 const TransactionDialog: FC<Props> = ({
@@ -23,7 +24,8 @@ const TransactionDialog: FC<Props> = ({
   insufficientBalance,
   transactionCount,
   shouldShowPriceImpactWarning,
-  routeWarning,
+  routeWarningMessage,
+  routeWarningTitle,
 }) => {
   const [hasDisplayedWarning, setHasDisplayedWarning] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -77,7 +79,8 @@ const TransactionDialog: FC<Props> = ({
       </div>
       <PriceImpactWarning
         onGoBack={() => setIsOpen(false)}
-        warningMessage={routeWarning}
+        message={routeWarningMessage}
+        title={routeWarningTitle}
       />
     </Fragment>
   );