fix: percentage btn opt for mobile (#6361)

packages/components/src/hocs/PageType/index.tsx

@@ -40,5 +40,5 @@ export const PageTypeHOC = (
 
 export const usePageType = () => {
   const pageTypeContext = useContext(PageTypeContext);
-  return pageTypeContext.pageType;
+  return pageTypeContext.pageType as EPageType;
 };

packages/kit/src/views/Swap/components/SwapPercentageStageBadge.tsx

@@ -0,0 +1,36 @@
+import { Badge } from '@onekeyhq/components';
+
+const SwapPercentageStageBadge = ({
+  stage,
+  onSelectStage,
+  key,
+  badgeSize,
+}: {
+  stage: number;
+  badgeSize?: 'sm' | 'lg';
+  onSelectStage?: (stage: number) => void;
+  key: string;
+}) => (
+  <Badge
+    key={key}
+    role="button"
+    badgeSize={badgeSize ?? 'sm'}
+    onPress={() => {
+      onSelectStage?.(stage);
+    }}
+    px="$1.5"
+    bg="$bgSubdued"
+    borderRadius="$2"
+    userSelect="none"
+    hoverStyle={{
+      bg: '$bgStrongHover',
+    }}
+    pressStyle={{
+      bg: '$bgStrongActive',
+    }}
+  >
+    <Badge.Text>{stage}%</Badge.Text>
+  </Badge>
+);
+
+export default SwapPercentageStageBadge;

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

@@ -1,6 +1,7 @@
 import { memo, useCallback, useMemo, useRef } from 'react';
 
 import { useIntl } from 'react-intl';
+import { Keyboard } from 'react-native';
 
 import type { IKeyOfIcons } from '@onekeyhq/components';
 import {
@@ -13,6 +14,7 @@ import {
   SizableText,
   Stack,
   XStack,
+  useIsKeyboardShown,
   useMedia,
   usePageType,
 } from '@onekeyhq/components';
@@ -26,8 +28,12 @@ import {
 import { useSettingsPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import { openUrlExternal } from '@onekeyhq/shared/src/utils/openUrlUtils';
-import { ESwapDirectionType } from '@onekeyhq/shared/types/swap/types';
+import {
+  ESwapDirectionType,
+  SwapPercentageInputStageForNative,
+} from '@onekeyhq/shared/types/swap/types';
 
+import SwapPercentageStageBadge from '../../components/SwapPercentageStageBadge';
 import {
   useSwapAddressInfo,
   useSwapRecipientAddressInfo,
@@ -46,13 +52,71 @@ interface ISwapActionsStateProps {
     shoutResetApprove?: boolean,
   ) => void;
   onOpenRecipientAddress: () => void;
+  onSelectPercentageStage?: (stage: number) => void;
+}
+
+function PageFooter({
+  onSelectPercentageStage,
+  actionComponent,
+  pageType,
+  md,
+}: {
+  onSelectPercentageStage?: (stage: number) => void;
+  pageType: EPageType;
+  md: boolean;
+  actionComponent: React.JSX.Element;
+}) {
+  const isShow = useIsKeyboardShown();
+  const intl = useIntl();
+  return (
+    <Page.Footer>
+      <Page.FooterActions
+        {...(pageType === EPageType.modal && !md
+          ? { buttonContainerProps: { flex: 1 } }
+          : {})}
+        confirmButton={actionComponent}
+      />
+      {isShow ? (
+        <XStack
+          alignItems="center"
+          gap="$1"
+          justifyContent="space-around"
+          bg="$bgSubdued"
+          h="$10"
+        >
+          <>
+            {SwapPercentageInputStageForNative.map((stage) => (
+              <SwapPercentageStageBadge
+                badgeSize="lg"
+                key={`swap-percentage-input-stage-${stage}`}
+                stage={stage}
+                onSelectStage={onSelectPercentageStage}
+              />
+            ))}
+            <Button
+              size="small"
+              variant="tertiary"
+              onPress={() => {
+                Keyboard.dismiss();
+              }}
+            >
+              {intl.formatMessage({
+                id: ETranslations.global_confirm,
+              })}
+            </Button>
+          </>
+        </XStack>
+      ) : null}
+    </Page.Footer>
+  );
 }
 
 const SwapActionsState = ({
   onBuildTx,
   onApprove,
   onWrapped,
   onOpenRecipientAddress,
+  onSelectPercentageStage,
 }: ISwapActionsStateProps) => {
   const intl = useIntl();
   const [fromToken] = useSwapSelectFromTokenAtom();
@@ -375,11 +439,11 @@ const SwapActionsState = ({
       {pageType !== EPageType.modal && !md ? (
         actionComponent
       ) : (
-        <Page.Footer
-          {...(pageType === EPageType.modal && !md
-            ? { buttonContainerProps: { flex: 1 } }
-            : {})}
-          confirmButton={actionComponent}
+        <PageFooter
+          onSelectPercentageStage={onSelectPercentageStage}
+          actionComponent={actionComponent}
+          pageType={pageType}
+          md={md}
         />
       )}
     </>

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

@@ -4,8 +4,6 @@ import { useIntl } from 'react-intl';
 
 import {
   AnimatePresence,
-  Badge,
-  Button,
   Icon,
   SizableText,
   XStack,
@@ -18,6 +16,7 @@ import type { ISwapToken } from '@onekeyhq/shared/types/swap/types';
 import { SwapPercentageInputStage } from '@onekeyhq/shared/types/swap/types';
 
 import ActionBuy from '../../../AssetDetails/pages/TokenDetails/ActionBuy';
+import SwapPercentageStageBadge from '../../components/SwapPercentageStageBadge';
 
 const SwapInputActions = ({
   showPercentageInput,
@@ -61,6 +60,7 @@ const SwapInputActions = ({
             height="$5"
             px="$1.5"
             py="$0"
+            pt="$1"
             bg="$bgSubdued"
             size="small"
             label={
@@ -77,29 +77,14 @@ const SwapInputActions = ({
             tokenAddress={fromToken?.contractAddress ?? ''}
           />
         ) : null}
-        {showPercentageInput ? (
+        {!platformEnv.isNative && showPercentageInput ? (
           <>
             {needSwapPercentageInputStage.map((stage) => (
-              <Badge
+              <SwapPercentageStageBadge
                 key={`swap-percentage-input-stage-${stage}`}
-                role="button"
-                badgeSize="sm"
-                onPress={() => {
-                  onSelectStage?.(stage);
-                }}
-                px="$1.5"
-                bg="$bgSubdued"
-                borderRadius="$2"
-                userSelect="none"
-                hoverStyle={{
-                  bg: '$bgStrongHover',
-                }}
-                pressStyle={{
-                  bg: '$bgStrongActive',
-                }}
-              >
-                <Badge.Text>{stage}%</Badge.Text>
-              </Badge>
+                stage={stage}
+                onSelectStage={onSelectStage}
+              />
             ))}
           </>
         ) : null}

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

@@ -18,6 +18,7 @@ import type { ISwapToken } from '@onekeyhq/shared/types/swap/types';
 import {
   ESwapDirectionType,
   ESwapRateDifferenceUnit,
+  SwapAmountInputAccessoryViewID,
 } from '@onekeyhq/shared/types/swap/types';
 
 import { useSwapAddressInfo } from '../../hooks/useSwapAccount';
@@ -206,6 +207,13 @@ const SwapInputContainer = ({
                   caretColor: 'transparent',
                 } as any)
               : undefined,
+          inputAccessoryViewID:
+            direction === ESwapDirectionType.FROM && platformEnv.isNativeIOS
+              ? SwapAmountInputAccessoryViewID
+              : undefined,
+          autoCorrect: false,
+          spellCheck: false,
+          autoComplete: 'off',
         }}
         tokenSelectorTriggerProps={{
           loading: selectTokenLoading,

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

@@ -1,5 +1,7 @@
 import { useCallback, useRef } from 'react';
 
+import BigNumber from 'bignumber.js';
+
 import type { IPageNavigationProp } from '@onekeyhq/components';
 import { EPageType, ScrollView, YStack } from '@onekeyhq/components';
 import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
@@ -9,6 +11,8 @@ import {
   useSwapFromTokenAmountAtom,
   useSwapQuoteCurrentSelectAtom,
   useSwapQuoteIntervalCountAtom,
+  useSwapSelectFromTokenAtom,
+  useSwapSelectedFromTokenBalanceAtom,
 } from '@onekeyhq/kit/src/states/jotai/contexts/swap';
 import {
   EJotaiContextStoreNames,
@@ -35,6 +39,7 @@ import {
   useSwapSlippagePercentageModeInfo,
 } from '../../hooks/useSwapState';
 import { useSwapInit } from '../../hooks/useSwapTokens';
+import { validateAmountInput } from '../../utils/utils';
 import { SwapProviderMirror } from '../SwapProviderMirror';
 
 import SwapActionsState from './SwapActionsState';
@@ -61,10 +66,12 @@ const SwapMainLoad = ({ swapInitParams, pageType }: ISwapMainLoadProps) => {
   const quoteLoading = useSwapQuoteLoading();
   const quoteEventFetching = useSwapQuoteEventFetching();
   const [{ swapRecentTokenPairs }] = useInAppNotificationAtom();
-  const [fromTokenAmount] = useSwapFromTokenAmountAtom();
+  const [fromTokenAmount, setFromInputAmount] = useSwapFromTokenAmountAtom();
   const [, setSwapQuoteIntervalCount] = useSwapQuoteIntervalCountAtom();
   const { selectFromToken, selectToToken, quoteAction } =
     useSwapActions().current;
+  const [fromTokenBalance] = useSwapSelectedFromTokenBalanceAtom();
+  const [fromSelectToken] = useSwapSelectFromTokenAtom();
   const { slippageItem } = useSwapSlippagePercentageModeInfo();
   const swapSlippageRef = useRef(slippageItem);
   if (swapSlippageRef.current !== slippageItem) {
@@ -169,6 +176,27 @@ const SwapMainLoad = ({ swapInitParams, pageType }: ISwapMainLoadProps) => {
     await wrappedTx();
   }, [wrappedTx]);
 
+  const onSelectPercentageStage = useCallback(
+    (stage: number) => {
+      const fromTokenBalanceBN = new BigNumber(fromTokenBalance ?? 0);
+      const amountBN = fromTokenBalanceBN.multipliedBy(stage / 100);
+      const amountAfterDecimal = amountBN.decimalPlaces(
+        fromSelectToken?.decimals ?? 6,
+        BigNumber.ROUND_DOWN,
+      );
+      if (
+        !amountAfterDecimal.isNaN() &&
+        validateAmountInput(
+          amountAfterDecimal.toFixed(),
+          fromSelectToken?.decimals,
+        )
+      ) {
+        setFromInputAmount(amountAfterDecimal.toFixed());
+      }
+    },
+    [fromTokenBalance, fromSelectToken?.decimals, setFromInputAmount],
+  );
+
   return (
     <ScrollView>
       <YStack
@@ -196,12 +224,14 @@ const SwapMainLoad = ({ swapInitParams, pageType }: ISwapMainLoadProps) => {
           <SwapQuoteInput
             onSelectToken={onSelectToken}
             selectLoading={fetchLoading}
+            onSelectPercentageStage={onSelectPercentageStage}
           />
           <SwapActionsState
             onBuildTx={onBuildTx}
             onApprove={onApprove}
             onWrapped={onWrapped}
             onOpenRecipientAddress={onToAnotherAddressModal}
+            onSelectPercentageStage={onSelectPercentageStage}
           />
           <SwapQuoteResult
             refreshAction={refreshAction}
@@ -221,11 +251,6 @@ const SwapMainLoad = ({ swapInitParams, pageType }: ISwapMainLoadProps) => {
             fromTokenAmount={fromTokenAmount}
           />
         </YStack>
-        {/* <SwapActionsState
-          onBuildTx={onBuildTx}
-          onApprove={onApprove}
-          onWrapped={onWrapped}
-        /> */}
       </YStack>
     </ScrollView>
   );