Feat/add onekey fee item (#6121)

* add onekey fee * fix i18n * fix lint * Delete uri & fix i18n * Fix maxFee potentially being 0
OneKeyHQ · Nov 4, 2024 · a497f0d · a497f0d
1 parent 312c194
commit a497f0d
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 106 deletions.
diff --git 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) => (
+      <XStack gap="$3" alignItems="center">
+        <Stack w={20} h={20}>
+          <Image source={item.icon} w={16} h={16} />
+        </Stack>
+        <Stack flex={1}>
+          <Stack
+            backgroundColor={item.color}
+            borderRadius="$full"
+            width={`${item.maxFee > 0 ? (item.fee / item.maxFee) * 100 : 0}%`}
+            height="$1"
+          />
+        </Stack>
+        <SizableText size="$bodySm" color="$text" textAlign="right">
+          {item.fee}%
+        </SizableText>
+      </XStack>
+    ),
+    [],
+  );
   const fromAmountDebounce = useDebounce(fromTokenAmount, 500, {
     leading: true,
   });
@@ -311,6 +375,38 @@ const SwapQuoteResult = ({
                   }
                 />
               ) : null}
+              {quoteResult?.fee?.percentageFee ? (
+                <SwapCommonInfoItem
+                  title={intl.formatMessage({
+                        id: ETranslations.provider_ios_popover_onekey_fee,
+                      })}
+                  isLoading={swapQuoteLoading}
+                  valueComponent={
+                    <NumberSizeableText size="$bodyMdMedium" formatter="value">
+                      {`${quoteResult?.fee?.percentageFee}%`}
+                    </NumberSizeableText>
+                  }
+                  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: (
+                        <YStack>
+                          {protocolFeeInfoList.map((item) =>
+                            renderProtocolFeeListItem(item),
+                          )}
+                        </YStack>
+                      ),
+                    });
+                  }}
+                />
+              ) : 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
@@ -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) => (
-      <XStack gap="$3" alignItems="center">
-        <Stack w={20} h={20}>
-          <Image source={item.icon} w={16} h={16} />
-        </Stack>
-        <Stack flex={1}>
-          <Stack
-            backgroundColor={item.color}
-            borderRadius="$full"
-            width={`${(item.fee / item.maxFee) * 100}%`}
-            height="$1"
-          />
-        </Stack>
-        <SizableText size="$bodySm" color="$text" textAlign="right">
-          {item.fee}%
-        </SizableText>
-      </XStack>
-    ),
-    [],
-  );
-
   const rightInfoComponent = useCallback(
     () => (
       <Popover
@@ -316,46 +252,11 @@ const SwapProviderSelectModal = () => {
                 })}
               />
             </Stack>
-            <Stack gap="$3">
-              <Stack gap="$1">
-                <SizableText size="$headingMd" color="$text">
-                  {intl.formatMessage({
-                    id: ETranslations.provider_ios_popover_onekey_fee,
-                  })}
-                </SizableText>
-                <SizableText size="$bodySm" color="$textSubdued">
-                  {intl.formatMessage({
-                    id: ETranslations.provider_ios_popover_onekey_fee_content,
-                  })}
-                </SizableText>
-              </Stack>
-              <Stack gap="$2">
-                <XStack gap="$3">
-                  <SizableText size="$bodySm" color="$textSubdued" flex={100}>
-                    {intl.formatMessage({
-                      id: ETranslations.provider_popover_wallet,
-                    })}
-                  </SizableText>
-                  <SizableText
-                    size="$bodySm"
-                    color="$textSubdued"
-                    textAlign="right"
-                  >
-                    {intl.formatMessage({
-                      id: ETranslations.provider_popover_fee_rate,
-                    })}
-                  </SizableText>
-                </XStack>
-                {protocolFeeInfoList.map((item) =>
-                  renderProtocolFeeListItem(item),
-                )}
-              </Stack>
-            </Stack>
           </Stack>
         }
       />
     ),
-    [intl, protocolFeeInfoList, renderProtocolFeeListItem],
+    [intl],
   );
   return (
     <Page>

diff --git 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
@@ -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
@@ -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
@@ -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": "提示",