Enhance high price impact warning

apps/extension/src/languages/en.json

@@ -393,7 +393,8 @@
   "page.ibc-swap.button.next": "Next",
   "page.ibc-swap.error.no-route-found": "No routes found for this swap",
   "page.ibc-swap.warning.unable-to-populate-price": "Unable to retrieve {assets} price from Coingecko. Check the fiat values of input and output from other sources before clicking \"Next\".",
-  "page.ibc-swap.warning.high-price-impact": "Due to a lack of liquidity, there is a significant difference in the USD value between the assets before and after the swap. Click \"Next\" if you still want to proceed.",
+  "page.ibc-swap.warning.high-price-impact-title": "{inPrice} on {srcChain} → {outPrice} on {dstChain}",
+  "page.ibc-swap.warning.high-price-impact": "Big drop in USD value detected due to low liquidity. Review your trade, or click \"Next\" to continue.",
   "page.ibc-swap.components.swap-asset-info.from": "From",
   "page.ibc-swap.components.swap-asset-info.to": "To",
   "page.ibc-swap.components.swap-asset-info.max-asset": "Max: {asset}",

apps/extension/src/languages/ko.json

@@ -388,7 +388,8 @@
   "page.ibc-swap.button.next": "다음",
   "page.ibc-swap.error.no-route-found": "이 교환에 맞는 경로가 검색되지 않습니다.",
   "page.ibc-swap.warning.unable-to-populate-price": "{assets}의 가격을 알 수 없습니다. \"다음\"을 누르기 전에 각각 통화 가치를 확인하십시오.",
-  "page.ibc-swap.warning.high-price-impact": "유동성 부족으로 인해 교환 전과 후 자산의 USD 가치가 상당한 차이를 보이고 있습니다. 그래도 계속 진행하시려면 \"다음\"을 클릭하세요.",
+  "page.ibc-swap.warning.high-price-impact-title": "{inPrice} ({srcChain}) → {outPrice} ({dstChain})",
+  "page.ibc-swap.warning.high-price-impact": "교환 후 자산의 USD 가치가 유동성 부족으로 인해 크게 하락합니다. 그래도 계속 진행하시려면 \"다음\"을 클릭하세요.",
   "page.ibc-swap.components.swap-asset-info.from": "교환할 자산",
   "page.ibc-swap.components.swap-asset-info.to": "교환 후 받을 자산",
   "page.ibc-swap.components.swap-asset-info.max-asset": "최대: {asset}",

apps/extension/src/languages/zh-cn.json

@@ -374,7 +374,8 @@
   "page.ibc-swap.button.next": "下一步",
   "page.ibc-swap.error.no-route-found": "找不到此兑换的路线",
   "page.ibc-swap.warning.unable-to-populate-price": "无法从Coingecko检索到{assets}的价格。在点击“下一步”之前从其他来源检查输入和输出的法定价值。",
-  "page.ibc-swap.warning.high-price-impact": "由于缺乏流动性，兑换前后资产的美元价值存在显着差异。如果你仍想继续，请点击“下一步”。",
+  "page.ibc-swap.warning.high-price-impact-title": "{inPrice} ({srcChain}) → {outPrice} ({dstChain})",
+  "page.ibc-swap.warning.high-price-impact": "由于流动性不足，兑换后的资产美元价值将大幅下降。若仍要继续，请点击\"下一步\"。",
   "page.ibc-swap.components.swap-asset-info.from": "从",
   "page.ibc-swap.components.swap-asset-info.to": "到",
   "page.ibc-swap.components.swap-asset-info.max-asset": "最多：{asset}",

apps/extension/src/pages/ibc-swap/index.tsx

@@ -1785,6 +1785,36 @@ export const IBCSwapPage: FunctionComponent = observer(() => {
 
         <WarningGuideBox
           amountConfig={ibcSwapConfigs.amountConfig}
+          title={
+            isHighPriceImpact &&
+            !calculatingTxError &&
+            !ibcSwapConfigs.amountConfig.uiProperties.error &&
+            !ibcSwapConfigs.amountConfig.uiProperties.warning
+              ? (() => {
+                  const inPrice = priceStore.calculatePrice(
+                    ibcSwapConfigs.amountConfig.amount[0],
+                    "usd"
+                  );
+                  const outPrice = priceStore.calculatePrice(
+                    ibcSwapConfigs.amountConfig.outAmount,
+                    "usd"
+                  );
+                  return intl.formatMessage(
+                    {
+                      id: "page.ibc-swap.warning.high-price-impact-title",
+                    },
+                    {
+                      inPrice: inPrice?.toString(),
+                      srcChain: ibcSwapConfigs.amountConfig.chainInfo.chainName,
+                      outPrice: outPrice?.toString(),
+                      dstChain: chainStore.getChain(
+                        ibcSwapConfigs.amountConfig.outChainId
+                      ).chainName,
+                    }
+                  );
+                })()
+              : undefined
+          }
           forceError={calculatingTxError}
           forceWarning={(() => {
             if (unablesToPopulatePrice.length > 0) {
@@ -1864,7 +1894,8 @@ const WarningGuideBox: FunctionComponent<{
 
   forceError?: Error;
   forceWarning?: Error;
-}> = observer(({ amountConfig, forceError, forceWarning }) => {
+  title?: string;
+}> = observer(({ amountConfig, forceError, forceWarning, title }) => {
   const error: string | undefined = (() => {
     if (forceError) {
       return forceError.message || forceError.toString();
@@ -1931,6 +1962,18 @@ const WarningGuideBox: FunctionComponent<{
 
   const intl = useIntl();
 
+  const errorText = (() => {
+    const err = error || lastError;
+
+    if (err && err === "could not find a path to execute the requested swap") {
+      return intl.formatMessage({
+        id: "page.ibc-swap.error.no-route-found",
+      });
+    }
+
+    return err;
+  })();
+
   return (
     <React.Fragment>
       {/* 별 차이는 없기는한데 gutter와 실제 컴포넌트의 트랜지션을 분리하는게 아주 약간 더 자연스러움 */}
@@ -1940,21 +1983,9 @@ const WarningGuideBox: FunctionComponent<{
       <VerticalCollapseTransition collapsed={collapsed}>
         <GuideBox
           color="warning"
-          title={(() => {
-            const err = error || lastError;
-
-            if (
-              err &&
-              err === "could not find a path to execute the requested swap"
-            ) {
-              return intl.formatMessage({
-                id: "page.ibc-swap.error.no-route-found",
-              });
-            }
-
-            return err;
-          })()}
-          hideInformationIcon={true}
+          title={title || errorText}
+          paragraph={title ? errorText : undefined}
+          hideInformationIcon={!title}
         />
       </VerticalCollapseTransition>
     </React.Fragment>