diff --git a/apps/extension/src/languages/en.json b/apps/extension/src/languages/en.json index aba491aa49..20b35e307f 100644 --- a/apps/extension/src/languages/en.json +++ b/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}", diff --git a/apps/extension/src/languages/ko.json b/apps/extension/src/languages/ko.json index 529a6a3a3e..3b8f80e7b4 100644 --- a/apps/extension/src/languages/ko.json +++ b/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}", diff --git a/apps/extension/src/languages/zh-cn.json b/apps/extension/src/languages/zh-cn.json index 8b3abdb26d..9140080dce 100644 --- a/apps/extension/src/languages/zh-cn.json +++ b/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}", diff --git a/apps/extension/src/pages/ibc-swap/index.tsx b/apps/extension/src/pages/ibc-swap/index.tsx index c6fe40865e..03806a0b49 100644 --- a/apps/extension/src/pages/ibc-swap/index.tsx +++ b/apps/extension/src/pages/ibc-swap/index.tsx @@ -1785,6 +1785,36 @@ export const IBCSwapPage: FunctionComponent = observer(() => { { + 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 ( {/* 별 차이는 없기는한데 gutter와 실제 컴포넌트의 트랜지션을 분리하는게 아주 약간 더 자연스러움 */} @@ -1940,21 +1983,9 @@ const WarningGuideBox: FunctionComponent<{ { - 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} />