diff --git a/packages/kit/src/views/Swap/pages/components/SwapQuoteResult.tsx b/packages/kit/src/views/Swap/pages/components/SwapQuoteResult.tsx index 006bf1c2c10..67cd1c18b99 100644 --- a/packages/kit/src/views/Swap/pages/components/SwapQuoteResult.tsx +++ b/packages/kit/src/views/Swap/pages/components/SwapQuoteResult.tsx @@ -1,17 +1,20 @@ -import { memo, useCallback, useRef, useState } from 'react'; +import { memo, useCallback, useMemo, useRef, useState } from 'react'; import BigNumber from 'bignumber.js'; import { useIntl } from 'react-intl'; -import type { IDialogInstance } from '@onekeyhq/components'; +import type { IDialogInstance, IImageSourceProps } from '@onekeyhq/components'; import { Accordion, Dialog, Divider, Icon, + Image, NumberSizeableText, SizableText, + Stack, XStack, + YStack, } from '@onekeyhq/components'; import { useDebounce } from '@onekeyhq/kit/src/hooks/useDebounce'; import { @@ -45,6 +48,14 @@ import SwapApproveAllowanceSelectContainer from './SwapApproveAllowanceSelectCon import SwapSlippageContentContainer from './SwapSlippageContentContainer'; import SwapSlippageTriggerContainer from './SwapSlippageTriggerContainer'; +interface IProtocolFeeInfo { + name: string; + fee: number; + color: string; + icon: IImageSourceProps['source']; + maxFee: number; +} + interface ISwapQuoteResultProps { quoteResult?: IFetchQuoteResult; onOpenProviderList?: () => void; @@ -183,6 +194,59 @@ const SwapQuoteResult = ({ slippageOnSave, setSwapSlippageDialogOpening, ]); + const protocolFeeInfoList: IProtocolFeeInfo[] = useMemo( + () => [ + { + maxFee: 0.875, + name: 'metamask', + color: '#F5841F', + icon: { + uri: 'https://uni.onekey-asset.com/static/logo/metamasklogo.png', + }, + fee: 0.875, + }, + { + maxFee: 0.875, + name: 'zerion', + fee: 0.8, + color: '#2461ED', + + icon: { + uri: 'https://uni.onekey-asset.com/static/logo/zerionlogo.png', + }, + }, + { + maxFee: 0.875, + name: 'oneKey', + fee: 0.3, + // color: '#202020', + color: '$bgInverse', + icon: require('@onekeyhq/kit/assets/logo.png'), + }, + ], + [], + ); + const renderProtocolFeeListItem = useCallback( + (item: IProtocolFeeInfo) => ( + + + + + + 0 ? (item.fee / item.maxFee) * 100 : 0}%`} + height="$1" + /> + + + {item.fee}% + + + ), + [], + ); const fromAmountDebounce = useDebounce(fromTokenAmount, 500, { leading: true, }); @@ -311,6 +375,38 @@ const SwapQuoteResult = ({ } /> ) : null} + {quoteResult?.fee?.percentageFee ? ( + + {`${quoteResult?.fee?.percentageFee}%`} + + } + onPress={() => { + Dialog.show({ + icon: 'OnekeyBrand', + title: intl.formatMessage({ + id: ETranslations.provider_ios_popover_onekey_fee, + }), + description: intl.formatMessage({ + id: ETranslations.provider_ios_popover_onekey_fee_content, + }), + showCancelButton: false, + renderContent: ( + + {protocolFeeInfoList.map((item) => + renderProtocolFeeListItem(item), + )} + + ), + }); + }} + /> + ) : null} {swapTokenMetadata?.swapTokenMetadata ? tokenMetadataParse( swapTokenMetadata?.swapTokenMetadata, diff --git a/packages/kit/src/views/Swap/pages/modal/SwapProviderSelectModal.tsx b/packages/kit/src/views/Swap/pages/modal/SwapProviderSelectModal.tsx index ef6dd98a425..11dc8dff0d3 100644 --- a/packages/kit/src/views/Swap/pages/modal/SwapProviderSelectModal.tsx +++ b/packages/kit/src/views/Swap/pages/modal/SwapProviderSelectModal.tsx @@ -51,14 +51,6 @@ enum ESwapProviderStatus { UNAVAILABLE = 'Unavailable', } -interface IProtocolFeeInfo { - name: string; - fee: number; - color: string; - icon: IImageSourceProps['source']; - maxFee: number; -} - const InformationItem = ({ icon, content, @@ -207,62 +199,6 @@ const SwapProviderSelectModal = () => { ], ); - const protocolFeeInfoList: IProtocolFeeInfo[] = useMemo( - () => [ - { - maxFee: 0.875, - name: 'metamask', - icon: { - uri: 'https://uni.onekey-asset.com/static/logo/metamasklogo.png', - }, - fee: 0.875, - color: '#F5841F', - url: 'https://uni.onekey-asset.com/static/logo/metamasklogo.png', - }, - { - maxFee: 0.875, - name: 'zerion', - fee: 0.8, - color: '#2461ED', - - icon: { - uri: 'https://uni.onekey-asset.com/static/logo/zerionlogo.png', - }, - }, - { - maxFee: 0.875, - name: 'oneKey', - fee: 0.3, - // color: '#202020', - color: '$bgInverse', - icon: require('@onekeyhq/kit/assets/logo.png'), - }, - ], - [], - ); - - const renderProtocolFeeListItem = useCallback( - (item: IProtocolFeeInfo) => ( - - - - - - - - - {item.fee}% - - - ), - [], - ); - const rightInfoComponent = useCallback( () => ( { })} /> - - - - {intl.formatMessage({ - id: ETranslations.provider_ios_popover_onekey_fee, - })} - - - {intl.formatMessage({ - id: ETranslations.provider_ios_popover_onekey_fee_content, - })} - - - - - - {intl.formatMessage({ - id: ETranslations.provider_popover_wallet, - })} - - - {intl.formatMessage({ - id: ETranslations.provider_popover_fee_rate, - })} - - - {protocolFeeInfoList.map((item) => - renderProtocolFeeListItem(item), - )} - - } /> ), - [intl, protocolFeeInfoList, renderProtocolFeeListItem], + [intl], ); return ( diff --git a/packages/shared/src/locale/json/pt.json b/packages/shared/src/locale/json/pt.json index 700f5a92264..95ed783d744 100644 --- a/packages/shared/src/locale/json/pt.json +++ b/packages/shared/src/locale/json/pt.json @@ -1413,7 +1413,7 @@ "provider.fee": "$0.16 ", "provider.ios_popover.approval_require_msg": "É necessário aprovar o token antes da troca", "provider.ios_popover.approval_require_title": "Aprovação Necessária", - "provider.ios_popover.onekey_fee": "OneKey fee", + "provider.ios_popover.onekey_fee": "Taxa OneKey", "provider.ios_popover.onekey_fee_content": "A cotação inclui uma taxa de 0,3% da OneKey para garantir que oferecemos um serviço de alta qualidade e uma experiência sem interrupções", "provider.ios_popover.order_info_title": "Informações do Pedido", "provider.ios_popover.title": "Informação", diff --git a/packages/shared/src/locale/json/zh_CN.json b/packages/shared/src/locale/json/zh_CN.json index 376b466d3a2..b5805dcb6ea 100644 --- a/packages/shared/src/locale/json/zh_CN.json +++ b/packages/shared/src/locale/json/zh_CN.json @@ -1413,7 +1413,7 @@ "provider.fee": "$0.16 ", "provider.ios_popover.approval_require_msg": "兑换前需授权代币", "provider.ios_popover.approval_require_title": "授权", - "provider.ios_popover.onekey_fee": "OneKey fee", + "provider.ios_popover.onekey_fee": "OneKey 费用", "provider.ios_popover.onekey_fee_content": "报价包含 0.3% 的 OneKey 费用,以确保我们提供高质量的服务和无缝的体验", "provider.ios_popover.order_info_title": "订单信息", "provider.ios_popover.title": "提示", diff --git a/packages/shared/src/locale/json/zh_HK.json b/packages/shared/src/locale/json/zh_HK.json index 929dd0e08b3..200deb90996 100644 --- a/packages/shared/src/locale/json/zh_HK.json +++ b/packages/shared/src/locale/json/zh_HK.json @@ -1413,7 +1413,7 @@ "provider.fee": "$0.16", "provider.ios_popover.approval_require_msg": "兌換前需要授權代幣", "provider.ios_popover.approval_require_title": "授權", - "provider.ios_popover.onekey_fee": "OneKey fee", + "provider.ios_popover.onekey_fee": "OneKey 費用", "provider.ios_popover.onekey_fee_content": "報價包含 0.3% 的 OneKey 費用,以確保我們提供高質量的服務和無縫的體驗", "provider.ios_popover.order_info_title": "訂單資訊", "provider.ios_popover.title": "提示", diff --git a/packages/shared/src/locale/json/zh_TW.json b/packages/shared/src/locale/json/zh_TW.json index b534796d681..8b4e9cc4737 100644 --- a/packages/shared/src/locale/json/zh_TW.json +++ b/packages/shared/src/locale/json/zh_TW.json @@ -1413,7 +1413,7 @@ "provider.fee": "$0.16 ", "provider.ios_popover.approval_require_msg": "兌換前需要授權代幣", "provider.ios_popover.approval_require_title": "授權", - "provider.ios_popover.onekey_fee": "OneKey fee", + "provider.ios_popover.onekey_fee": "OneKey 費用", "provider.ios_popover.onekey_fee_content": "報價包含 0.3% 的 OneKey 費用,以確保我們提供高品質的服務和無縫的體驗", "provider.ios_popover.order_info_title": "訂單資訊", "provider.ios_popover.title": "提示",