Fix/swap pro add sell for select OK-48285 OK-48318

packages/kit/src/views/Swap/pages/components/SwapProActionButton.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 import { useIntl } from 'react-intl';
 
-import { Button, SizableText } from '@onekeyhq/components';
+import { Button, SizableText, YStack } from '@onekeyhq/components';
 import { useCurrency } from '@onekeyhq/kit/src/components/Currency';
 import { useDebouncedCallback } from '@onekeyhq/kit/src/hooks/useDebounce';
 import {
@@ -263,15 +263,21 @@ const SwapProActionButton = ({
 
   const actionButtonText = useMemo(() => {
     if (!hasEnoughBalance) {
-      return intl.formatMessage({
-        id: ETranslations.swap_page_button_insufficient_balance,
-      });
+      return {
+        resValue: intl.formatMessage({
+          id: ETranslations.swap_page_button_insufficient_balance,
+        }),
+        subValue: '',
+      };
     }
 
     if (!swapProAccount?.result?.addressDetail.address) {
-      return intl.formatMessage({
-        id: ETranslations.global_select_wallet,
-      });
+      return {
+        resValue: intl.formatMessage({
+          id: ETranslations.global_select_wallet,
+        }),
+        subValue: '',
+      };
     }
 
     // Format: "Buy {amount} {fromToken} ({Value})"
@@ -316,12 +322,13 @@ const SwapProActionButton = ({
       amountFromDirection,
       availableForAmount,
     );
-
+    const resValue = `${directionText} ${formattedAmount} ${tokenSymbol}`;
+    const subValue = formattedValue;
     // Build final text
-    if (formattedValue) {
-      return `${directionText} ${formattedAmount} ${tokenSymbol} ${formattedValue}`;
-    }
-    return `${directionText} ${formattedAmount} ${tokenSymbol}`;
+    return {
+      resValue,
+      subValue,
+    };
   }, [
     hasEnoughBalance,
     swapProAccount?.result?.addressDetail.address,
@@ -350,9 +357,24 @@ const SwapProActionButton = ({
           : '$bgCriticalStrong'
       }
     >
-      <SizableText size="$bodyMdMedium" color="$textOnColor" textAlign="center">
-        {actionButtonText}
-      </SizableText>
+      <YStack alignItems="center">
+        <SizableText
+          size="$bodyMdMedium"
+          color="$textOnColor"
+          textAlign="center"
+        >
+          {actionButtonText.resValue}
+        </SizableText>
+        {actionButtonText.subValue ? (
+          <SizableText
+            size="$bodyMdMedium"
+            color="$textOnColor"
+            textAlign="center"
+          >
+            {actionButtonText.subValue}
+          </SizableText>
+        ) : null}
+      </YStack>
     </Button>
   );
 };

packages/kit/src/views/Swap/pages/components/SwapProTradeInfoGroup.tsx

@@ -1,21 +1,31 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import BigNumber from 'bignumber.js';
 import { useIntl } from 'react-intl';
 
-import { NumberSizeableText, SizableText, YStack } from '@onekeyhq/components';
+import {
+  Icon,
+  NumberSizeableText,
+  SizableText,
+  XStack,
+  YStack,
+} from '@onekeyhq/components';
 import {
   useSwapLimitPriceUseRateAtom,
   useSwapProDirectionAtom,
+  useSwapProSelectTokenAtom,
+  useSwapProSellToTokenAtom,
   useSwapProTradeTypeAtom,
   useSwapQuoteCurrentSelectAtom,
   useSwapSpeedQuoteFetchingAtom,
   useSwapSpeedQuoteResultAtom,
   useSwapToTokenAmountAtom,
 } from '@onekeyhq/kit/src/states/jotai/contexts/swap';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
+import type { ISwapTokenBase } from '@onekeyhq/shared/types/swap/types';
 import { ESwapProTradeType } from '@onekeyhq/shared/types/swap/types';
 
+import { TokenSelectorPopover } from '../../../Market/MarketDetailV2/components/SwapPanel/components/TokenInputSection/TokenSelectorPopover';
 import { ESwapDirection } from '../../../Market/MarketDetailV2/components/SwapPanel/hooks/useTradeType';
 import SwapCommonInfoItem from '../../components/SwapCommonInfoItem';
 import {
@@ -26,26 +36,44 @@ import { useSwapQuoteLoading } from '../../hooks/useSwapState';
 
 import { ITEM_TITLE_PROPS, ITEM_VALUE_PROPS } from './SwapProTokenDetailGroup';
 
+import type { IToken } from '../../../Market/MarketDetailV2/components/SwapPanel/types';
+
 interface ISwapProTradeInfoGroupProps {
   balanceLoading: boolean;
+  defaultTokens: ISwapTokenBase[];
+  defaultLimitTokens: ISwapTokenBase[];
+  cleanInputAmount: () => void;
   onBalanceMax: () => void;
 }
 
 const SwapProTradeInfoGroup = ({
   balanceLoading,
   onBalanceMax,
+  defaultTokens,
+  cleanInputAmount,
+  defaultLimitTokens,
 }: ISwapProTradeInfoGroupProps) => {
   const intl = useIntl();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const inputToken = useSwapProInputToken();
   const toToken = useSwapProToToken();
+  const [swapProSelectToken] = useSwapProSelectTokenAtom();
   const [swapProQuoteResultPro] = useSwapSpeedQuoteResultAtom();
   const [swapProQuoteFetchingPro] = useSwapSpeedQuoteFetchingAtom();
   const [swapCurrentQuoteResult] = useSwapQuoteCurrentSelectAtom();
   const [toTokenAmount] = useSwapToTokenAmountAtom();
   const [swapProTradeType] = useSwapProTradeTypeAtom();
   const [swapProDirection] = useSwapProDirectionAtom();
   const swapQuoteLoading = useSwapQuoteLoading();
+  const [swapProSellToToken, setSwapProSellToToken] =
+    useSwapProSellToTokenAtom();
   const [swapLimitPriceUseRate] = useSwapLimitPriceUseRateAtom();
+  const defaultTokensFromType = useMemo(() => {
+    if (swapProTradeType === ESwapProTradeType.MARKET) {
+      return defaultTokens;
+    }
+    return defaultLimitTokens;
+  }, [swapProTradeType, defaultTokens, defaultLimitTokens]);
   const limitPriceValue = useMemo(() => {
     const swapLimitPriceUseRateBN = new BigNumber(
       swapLimitPriceUseRate.rate || 0,
@@ -128,6 +156,15 @@ const SwapProTradeInfoGroup = ({
     return `${tradingFee}%`;
   }, [swapProQuoteResult?.fee?.percentageFee]);
 
+  const handleTokenSelect = useCallback(
+    (token: IToken) => {
+      cleanInputAmount();
+      setSwapProSellToToken(token);
+      setIsPopoverOpen(false);
+    },
+    [cleanInputAmount, setSwapProSellToToken],
+  );
+
   return (
     <YStack>
       <SwapCommonInfoItem
@@ -217,6 +254,43 @@ const SwapProTradeInfoGroup = ({
           py: '$1',
         }}
       />
+      {swapProDirection === ESwapDirection.SELL ? (
+        <SwapCommonInfoItem
+          title={intl.formatMessage({
+            id: ETranslations.promode_limit_sell_for,
+          })}
+          valueComponent={
+            <XStack
+              alignItems="center"
+              gap="$1"
+              {...(defaultTokensFromType.length > 1
+                ? {
+                    cursor: 'pointer',
+                    onPress: () => setIsPopoverOpen(true),
+                    hoverStyle: { opacity: 0.7 },
+                    pressStyle: { opacity: 0.5 },
+                  }
+                : {})}
+            >
+              <SizableText size={ITEM_VALUE_PROPS.size}>
+                {swapProSellToToken?.symbol ?? '-'}
+              </SizableText>
+              {defaultTokensFromType.length > 1 ? (
+                <Icon
+                  name="ChevronDownSmallOutline"
+                  size="$4"
+                  color="$iconSubdued"
+                />
+              ) : null}
+            </XStack>
+          }
+          titleProps={ITEM_TITLE_PROPS}
+          isLoading={swapProQuoteFetching}
+          containerProps={{
+            py: '$1',
+          }}
+        />
+      ) : null}
       <SwapCommonInfoItem
         title={intl.formatMessage({
           id: ETranslations.provider_ios_popover_wallet_fee,
@@ -229,6 +303,14 @@ const SwapProTradeInfoGroup = ({
           py: '$1',
         }}
       />
+      <TokenSelectorPopover
+        currentSelectToken={swapProSelectToken}
+        isOpen={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        tokens={defaultTokensFromType as IToken[]}
+        onTokenPress={handleTokenSelect}
+        disabledOnSwitchToTrade
+      />
     </YStack>
   );
 };

packages/kit/src/views/Swap/pages/components/SwapProTradingPanel.tsx

@@ -136,6 +136,9 @@ const SwapProTradingPanel = ({
         <SwapProTradeInfoGroup
           balanceLoading={balanceLoading}
           onBalanceMax={onBalanceMax}
+          cleanInputAmount={cleanInputAmount}
+          defaultTokens={swapProConfig.defaultTokens}
+          defaultLimitTokens={swapProConfig.defaultLimitTokens}
         />
         <SwapProAccountSelect onSelectAccountClick={handleSelectAccountClick} />
         {swapProTradeType === ESwapProTradeType.MARKET ? (

packages/shared/src/locale/enum/translations.ts

@@ -457,9 +457,64 @@
   date_today = 'date.today',
   date_yesterday = 'date.yesterday',
   defi_apr_apy = 'defi.apr_apy',
+  defi_asset_borrowed = 'defi.asset_borrowed',
+  defi_asset_can_be_collateral = 'defi.asset_can_be_collateral',
+  defi_asset_supplied = 'defi.asset_supplied',
+  defi_assets_to_borrow = 'defi.assets_to_borrow',
+  defi_assets_to_supply = 'defi.assets_to_supply',
+  defi_available_liquidity = 'defi.available_liquidity',
+  defi_available_to_borrow = 'defi.available_to_borrow',
+  defi_borrow_apy = 'defi.borrow_apy',
+  defi_borrowed = 'defi.borrowed',
+  defi_borrowed_balance = 'defi.borrowed_balance',
+  defi_claim_all = 'defi.claim_all',
+  defi_claimable_rewards = 'defi.claimable_rewards',
+  defi_from_wallet_balance = 'defi.from_wallet_balance',
+  defi_health_factor = 'defi.health_factor',
   defi_liquidation_acknowledge = 'defi.liquidation_acknowledge',
+  defi_liquidation_at_less_than_1_00 = 'defi.liquidation_at_less_than_1_00',
   defi_liquidation_borrow_desc = 'defi.liquidation_borrow_desc',
   defi_liquidation_withdraw_desc = 'defi.liquidation_withdraw_desc',
+  defi_manage_position = 'defi.manage_position',
+  defi_my_borrow = 'defi.my_borrow',
+  defi_my_info = 'defi.my_info',
+  defi_my_supply = 'defi.my_supply',
+  defi_net_apy = 'defi.net_apy',
+  defi_net_worth = 'defi.net_worth',
+  defi_no_assets_to_borrow = 'defi.no_assets_to_borrow',
+  defi_no_assets_to_supply = 'defi.no_assets_to_supply',
+  defi_nothing_supplied_yet = 'defi.nothing_supplied_yet',
+  defi_oracle_price = 'defi.oracle_price',
+  defi_platform_bonus = 'defi.platform_bonus',
+  defi_refundable_fee = 'defi.refundable_fee',
+  defi_repay = 'defi.repay',
+  defi_reserve_size = 'defi.reserve_size',
+  defi_show_assets_with_0_balance = 'defi.show_assets_with_0_balance',
+  defi_supplied = 'defi.supplied',
+  defi_supplied_balance = 'defi.supplied_balance',
+  defi_supply = 'defi.supply',
+  defi_supply_apy = 'defi.supply_apy',
+  defi_supply_assets_as_collateral_before_borrowing = 'defi.supply_assets_as_collateral_before_borrowing',
+  defi_use_as_collateral = 'defi.use_as_collateral',
+  defi_utilization_ratio = 'defi.utilization_ratio',
+  defi_with_collateral = 'defi.with_collateral',
+  defi_borrow_cap_usage = 'defi_borrow_cap_usage',
+  defi_borrowable = 'defi_borrowable',
+  defi_borrowable_today = 'defi_borrowable_today',
+  defi_can_be_collateral = 'defi_can_be_collateral',
+  defi_current_utilization = 'defi_current_utilization',
+  defi_daily_borrow_cap = 'defi_daily_borrow_cap',
+  defi_daily_cap_resets_in = 'defi_daily_cap_resets_in',
+  defi_daily_caps = 'defi_daily_caps',
+  defi_daily_withdraw_cap = 'defi_daily_withdraw_cap',
+  defi_interest_rate_model = 'defi_interest_rate_model',
+  defi_liquidation_ltv = 'defi_liquidation_ltv',
+  defi_max_ltv = 'defi_max_ltv',
+  defi_select_an_asset_to_borrow = 'defi_select_an_asset_to_borrow',
+  defi_select_an_asset_to_supply = 'defi_select_an_asset_to_supply',
+  defi_soft_liquidations = 'defi_soft_liquidations',
+  defi_supply_cap_usage = 'defi_supply_cap_usage',
+  defi_withdrawable_today = 'defi_withdrawable_today',
   derivation_path = 'derivation_path',
   description_403 = 'description_403',
   device_btc_only_coming_soon = 'device.btc_only_coming_soon',
@@ -1167,6 +1222,7 @@
   global_approvals = 'global.approvals',
   global_approve = 'global.approve',
   global_apr = 'global.apr',
+  global_apy = 'global.apy',
   global_asset = 'global.asset',
   global_at_least_variable_characters = 'global.at_least_variable_characters',
   global_auto = 'global.auto',
@@ -1187,6 +1243,7 @@
   global_bluetooth = 'global.bluetooth',
   global_bluetooth_firmware = 'global.bluetooth_firmware',
   global_bootloader = 'global.bootloader',
+  global_borrow = 'global.borrow',
   global_brightness = 'global.brightness',
   global_browser = 'global.browser',
   global_bulk = 'global.bulk',
@@ -1816,6 +1873,7 @@
   global_wallet = 'global.wallet',
   global_wallet_activity = 'global.wallet_activity',
   global_wallet_avatar = 'global.wallet_avatar',
+  global_wallet_balance = 'global.wallet_balance',
   global_wallet_history_notification_banner = 'global.wallet_history_notification_banner',
   global_wallets = 'global.wallets',
   global_wallpaper = 'global.wallpaper',
@@ -1956,6 +2014,7 @@
   history_switch_account_dialog_title = 'history.switch_account_dialog_title',
   homescreen_format_supported = 'homescreen.format_supported',
   hw_banner_description = 'hw_banner_description',
+  i_have_done_these_steps = 'i_have_done_these_steps',
   id_delete_double_check = 'id.delete_double_check',
   id_delete_onekey_id = 'id.delete_onekey_id',
   id_delete_onekey_id_desc = 'id.delete_onekey_id_desc',
@@ -2055,6 +2114,7 @@
   market_24h_txns = 'market.24h_txns',
   market_24h_vol_usd = 'market.24h_vol_usd',
   market_30d = 'market.30d',
+  market_3m = 'market.3m',
   market_7d = 'market.7d',
   market_add_number_tokens = 'market.add_number_tokens',
   market_add_to_favorites = 'market.add_to_favorites',
@@ -2169,6 +2229,8 @@
   network_selector_unavailable_networks = 'network_selector.unavailable_networks',
   network_show_enabled_only = 'network_show_enabled_only',
   network_visible_in_all_network_tooltip_title = 'network_visible_in_all_network_tooltip_title',
+  new_pin_created = 'new_pin_created',
+  new_pin_created_desc = 'new_pin_created_desc',
   nft_already_collected = 'nft.already_collected',
   nft_attributes = 'nft.attributes',
   nft_collect_failed = 'nft.collect_failed',
@@ -2598,6 +2660,8 @@
   perps_token_selector_stocks = 'perps.token_selector_stocks',
   perps_trade_reward = 'perps.trade_reward',
   pick_your_device = 'pick_your_device',
+  pin_attempts_cooldown = 'pin_attempts_cooldown',
+  pin_attempts_remaining = 'pin_attempts_remaining',
   preparing_backup_desc = 'preparing_backup_desc',
   preparing_backup_title = 'preparing_backup_title',
   prime_about_cloud_sync = 'prime.about_cloud_sync',
@@ -2783,6 +2847,7 @@
   private_key_imported_feedback_desc = 'private_key_imported_feedback_desc',
   private_key_imported_feedback_title = 'private_key_imported_feedback_title',
   private_key_staty_on_device = 'private_key_staty_on_device',
+  promode_limit_sell_for = 'promode.limit_sell_for',
   promode_swap_unsupported_message = 'promode.swap_unsupported_message',
   promode_swap_unsupported_title = 'promode.swap_unsupported_title',
   promode_value_ws = 'promode.value_ws',
@@ -3054,6 +3119,15 @@
   remove_wallet_desc = 'remove_wallet_desc',
   remove_wallet_double_confirm_message = 'remove_wallet_double_confirm_message',
   reset_app_desc = 'reset_app_desc',
+  reset_pin = 'reset_pin',
+  reset_pin_go_to_settings = 'reset_pin_go_to_settings',
+  reset_pin_go_to_settings_desc = 'reset_pin_go_to_settings_desc',
+  reset_pin_open_other_device = 'reset_pin_open_other_device',
+  reset_pin_open_other_device_desc = 'reset_pin_open_other_device_desc',
+  reset_pin_set_your_new_pin = 'reset_pin_set_your_new_pin',
+  reset_pin_set_your_new_pin_desc = 'reset_pin_set_your_new_pin_desc',
+  reset_pin_using_another_device = 'reset_pin_using_another_device',
+  reset_pin_using_another_device_desc = 'reset_pin_using_another_device_desc',
   scan_camera_access_denied = 'scan.camera_access_denied',
   scan_enable_camera_permissions = 'scan.enable_camera_permissions',
   scan_grant_camera_access_in_expand_view = 'scan.grant_camera_access_in_expand_view',