OK-17844: update market top header (#2656)

* chore: tweak styles * OK-17844: update market top header * fix: swap actual received token
OneKeyHQ · Mar 6, 2023 · a427951 · a427951
1 parent 85b10ab
commit a427951
Show file tree

Hide file tree

Showing 14 changed files with 286 additions and 145 deletions.
diff --git a/packages/kit-bg/src/services/ServiceAccount.ts b/packages/kit-bg/src/services/ServiceAccount.ts
@@ -90,6 +90,32 @@ class ServiceAccount extends ServiceBase {
     return REFRESH_ACCOUNT_IMPL.includes(parseNetworkId(networkId).impl ?? '');
   }
 
+  @backgroundMethod()
+  changeCurrrentAccount({
+    accountId,
+    networkId,
+  }: {
+    accountId: string;
+    networkId: string;
+  }) {
+    const { appSelector, dispatch } = this.backgroundApi;
+    const wallets = appSelector((s) => s.runtime.wallets);
+    for (let i = 0; i < wallets.length; i += 1) {
+      const wallet = wallets[i];
+      const { accounts } = wallet;
+      if (accounts.includes(accountId)) {
+        dispatch(
+          setActiveIds({
+            activeAccountId: accountId,
+            activeWalletId: wallet.id,
+            activeNetworkId: networkId,
+          }),
+        );
+        break;
+      }
+    }
+  }
+
   @backgroundMethod()
   async changeActiveAccount({
     accountId,

diff --git a/packages/kit-bg/src/services/ServiceSwap.ts b/packages/kit-bg/src/services/ServiceSwap.ts
@@ -392,7 +392,7 @@ export default class ServiceSwap extends ServiceBase {
     const { appSelector } = this.backgroundApi;
     const wallets = appSelector((s) => s.runtime.wallets);
     for (let i = 0; i < wallets.length; i += 1) {
-      const wallet = wallets[0];
+      const wallet = wallets[i];
       const { accounts } = wallet;
       if (accounts.includes(accountId)) {
         return wallet;

diff --git a/packages/kit/src/store/reducers/market.ts b/packages/kit/src/store/reducers/market.ts
@@ -184,7 +184,7 @@ const initialState: MarketInitialState = {
   charts: {},
   details: {},
   searchTokens: {},
-  marktTobTapName: MARKET_TAB_NAME,
+  marktTobTapName: SWAP_TAB_NAME,
 };
 
 function equalStringArr(arr1: string[], arr2: string[]) {

diff --git a/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx b/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx
@@ -70,30 +70,30 @@ const HeaderSmall: FC<{ onPressSearch: () => void }> = ({ onPressSearch }) => {
     >
       <Box flexDirection="row">
         <Pressable
+          mr="3"
           onPress={() => {
-            backgroundApiProxy.serviceMarket.switchMarketTopTab(
-              MARKET_TAB_NAME,
-            );
+            backgroundApiProxy.serviceMarket.switchMarketTopTab(SWAP_TAB_NAME);
           }}
         >
           <Typography.DisplayMedium
-            color={
-              tabName === MARKET_TAB_NAME ? 'text-default' : 'text-disabled'
-            }
+            color={tabName === SWAP_TAB_NAME ? 'text-default' : 'text-disabled'}
           >
-            {intl.formatMessage({ id: 'title__market' })}
+            {intl.formatMessage({ id: 'title__Swap_Bridge' })}
           </Typography.DisplayMedium>
         </Pressable>
         <Pressable
-          ml="3"
           onPress={() => {
-            backgroundApiProxy.serviceMarket.switchMarketTopTab(SWAP_TAB_NAME);
+            backgroundApiProxy.serviceMarket.switchMarketTopTab(
+              MARKET_TAB_NAME,
+            );
           }}
         >
           <Typography.DisplayMedium
-            color={tabName === SWAP_TAB_NAME ? 'text-default' : 'text-disabled'}
+            color={
+              tabName === MARKET_TAB_NAME ? 'text-default' : 'text-disabled'
+            }
           >
-            {intl.formatMessage({ id: 'title__Swap_Bridge' })}
+            {intl.formatMessage({ id: 'title__market' })}
           </Typography.DisplayMedium>
         </Pressable>
       </Box>

diff --git a/packages/kit/src/views/Swap/SwapButton.tsx b/packages/kit/src/views/Swap/SwapButton.tsx
@@ -436,6 +436,7 @@ const ExchangeButton = () => {
             providers: newQuote?.sources ?? quote.providers,
             arrivalTime: quote.arrivalTime,
             percentageFee: quote.percentageFee,
+            protocalFees: quote.protocolFees,
             networkFee,
             tokens: {
               from,

diff --git a/packages/kit/src/views/Swap/SwapQuote.tsx b/packages/kit/src/views/Swap/SwapQuote.tsx
@@ -28,11 +28,14 @@ import TransactionFee from './components/TransactionFee';
 import {
   usePriceImpact,
   useSwapMinimumReceivedAmount,
-  useSwapProtocalsFee,
   useSwapSlippage,
 } from './hooks/useSwapUtils';
 import { SwapRoutes } from './typings';
-import { getTokenAmountValue, normalizeProviderName } from './utils';
+import {
+  calculateProtocalsFee,
+  getTokenAmountValue,
+  normalizeProviderName,
+} from './utils';
 
 const SwapProviders = () => {
   const intl = useIntl();
@@ -321,8 +324,9 @@ const SwapPriceImpact = () => {
 
 const SwapProtocalsFees = () => {
   const intl = useIntl();
-  const protocalsFee = useSwapProtocalsFee();
-  if (protocalsFee) {
+  const protocolFees = useAppSelector((s) => s.swap.quote?.protocolFees);
+  if (protocolFees) {
+    const result = calculateProtocalsFee(protocolFees);
     return (
       <Box
         display="flex"
@@ -338,7 +342,7 @@ const SwapProtocalsFees = () => {
         </Box>
         <Box flex="1" flexDirection="row" justifyContent="flex-end">
           <Typography.Body2 color="text-subdued">
-            {`${protocalsFee.value}${protocalsFee.symbol.toUpperCase()}`}
+            {`${result.value} ${result.symbol.toUpperCase()}`}
           </Typography.Body2>
         </Box>
       </Box>

diff --git a/packages/kit/src/views/Swap/components/PendingTransaction/index.tsx b/packages/kit/src/views/Swap/components/PendingTransaction/index.tsx
@@ -75,8 +75,9 @@ const PendingTransaction: FC<PendingTransactionProps> = ({
         );
       }
       if (status === 'sucesss') {
-        tx.destinationTransactionHash = destinationTransactionHash;
-        const actualReceived = await SwapQuoter.client.getActualReceived(tx);
+        const txObj = { ...tx };
+        txObj.destinationTransactionHash = destinationTransactionHash;
+        const actualReceived = await SwapQuoter.client.getActualReceived(txObj);
         backgroundApiProxy.dispatch(
           updateTransaction({
             accountId: tx.accountId,

diff --git a/packages/kit/src/views/Swap/components/Transaction/MoreMenus.tsx b/packages/kit/src/views/Swap/components/Transaction/MoreMenus.tsx
@@ -0,0 +1,119 @@
+import type { FC } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import backgroundApiProxy from '../../../../background/instance/backgroundApiProxy';
+import { useAccount, useNavigationActions } from '../../../../hooks';
+import { useClipboard } from '../../../../hooks/useClipboard';
+import { useNetwork } from '../../../../hooks/useNetwork';
+import useOpenBlockBrowser from '../../../../hooks/useOpenBlockBrowser';
+import BaseMenu from '../../../Overlay/BaseMenu';
+
+import type { IBaseMenuOptions, IMenu } from '../../../Overlay/BaseMenu';
+
+type ReceiptProps = {
+  accountId?: string;
+  networkId?: string;
+  address?: string;
+};
+
+type AccountMoreMenusProps = {
+  accountId?: string;
+  networkId?: string;
+};
+
+export const AccountMoreMenus: FC<IMenu & AccountMoreMenusProps> = ({
+  accountId,
+  networkId,
+  ...rest
+}) => {
+  const { copyText } = useClipboard();
+  const { network } = useNetwork({ networkId });
+  const { account } = useAccount({
+    accountId: accountId ?? '',
+    networkId: networkId ?? '',
+  });
+  const openBlockBrowser = useOpenBlockBrowser(network);
+  const { openRootHome } = useNavigationActions();
+
+  const onOpenAccount = useCallback(() => {
+    if (account && networkId) {
+      backgroundApiProxy.serviceAccount.changeCurrrentAccount({
+        accountId: account.id,
+        networkId,
+      });
+      openRootHome();
+    }
+  }, [openRootHome, account, networkId]);
+
+  const options = useMemo(() => {
+    const baseOptions: IBaseMenuOptions = [
+      Boolean(account) && {
+        id: 'action__view_account',
+        onPress: () => onOpenAccount(),
+        icon: 'UserOutline',
+      },
+      {
+        id: 'action__copy_address',
+        onPress: () => copyText(account?.address ?? ''),
+        icon: 'Square2StackOutline',
+      },
+      openBlockBrowser.hasAvailable && {
+        id: 'action__view_in_browser',
+        onPress: () => openBlockBrowser.openAddressDetails(account?.address),
+        icon: 'ArrowTopRightOnSquareOutline',
+      },
+    ];
+    return baseOptions;
+  }, [copyText, openBlockBrowser, onOpenAccount, account]);
+
+  return <BaseMenu options={options} {...rest} />;
+};
+
+export const ReceiptMoreMenus: FC<IMenu & ReceiptProps> = ({
+  accountId,
+  address,
+  networkId,
+  ...rest
+}) => {
+  const { copyText } = useClipboard();
+  const { network } = useNetwork({ networkId });
+  const { account } = useAccount({
+    accountId: accountId ?? '',
+    networkId: networkId ?? '',
+  });
+  const openBlockBrowser = useOpenBlockBrowser(network);
+  const { openRootHome } = useNavigationActions();
+
+  const onOpenAccount = useCallback(() => {
+    if (account && networkId) {
+      backgroundApiProxy.serviceAccount.changeCurrrentAccount({
+        accountId: account.id,
+        networkId,
+      });
+      openRootHome();
+    }
+  }, [openRootHome, account, networkId]);
+
+  const options = useMemo(() => {
+    const baseOptions: IBaseMenuOptions = [
+      Boolean(account) && {
+        id: 'action__view_account',
+        onPress: () => onOpenAccount(),
+        icon: 'UserOutline',
+      },
+      {
+        id: 'action__copy_address',
+        onPress: () => copyText(address ?? ''),
+        icon: 'Square2StackOutline',
+      },
+      openBlockBrowser.hasAvailable && {
+        id: 'action__view_in_browser',
+        onPress: () => openBlockBrowser.openAddressDetails(address),
+        icon: 'ArrowTopRightOnSquareOutline',
+      },
+    ];
+    return baseOptions;
+  }, [copyText, openBlockBrowser, onOpenAccount, address, account]);
+
+  return <BaseMenu options={options} {...rest} />;
+};
diff --git a/packages/kit/src/views/Swap/components/Transaction/ReceiptMoreMenus.tsx b/packages/kit/src/views/Swap/components/Transaction/ReceiptMoreMenus.tsx