Feat/use system browser to open onramper link, OK-24191 (#3750)

* feat: use system browser to open onramper link * fix: close modal when onramper link opened
OneKeyHQ · Nov 2, 2023 · edb9253 · edb9253
1 parent f9c3cc5
commit edb9253
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 102 deletions.
diff --git a/packages/kit/src/routes/Root/Modal/FiatPay.tsx b/packages/kit/src/routes/Root/Modal/FiatPay.tsx
@@ -1,6 +1,5 @@
 import { useIsVerticalLayout } from '@onekeyhq/components';
 
-import MoonpayWebView from '../../../views/FiatPay/MoonpayWebView';
 import SupportTokenList from '../../../views/FiatPay/SupportTokenList';
 import { FiatPayModalRoutes } from '../../routesEnum';
 
@@ -15,7 +14,6 @@ export type FiatPayModalRoutesParams = {
     accountId: string;
     type?: FiatPayModeType;
   };
-  [FiatPayModalRoutes.MoonpayWebViewModal]: { url: string };
 };
 
 const BuyNavigator = createStackNavigator<FiatPayModalRoutesParams>();
@@ -24,10 +22,6 @@ const modalRoutes = [
     name: FiatPayModalRoutes.SupportTokenListModal,
     component: SupportTokenList,
   },
-  {
-    name: FiatPayModalRoutes.MoonpayWebViewModal,
-    component: MoonpayWebView,
-  },
 ];
 
 const FiatPayModalStack = () => {

diff --git a/packages/kit/src/routes/routesEnum.ts b/packages/kit/src/routes/routesEnum.ts
@@ -294,7 +294,6 @@ export enum CollectiblesModalRoutes {
 
 export enum FiatPayModalRoutes {
   SupportTokenListModal = 'SupportTokenList',
-  MoonpayWebViewModal = 'MoonpayWebViewModal',
 }
 
 export enum BackupWalletModalRoutes {

diff --git a/packages/kit/src/views/FiatPay/MoonpayWebView/index.tsx b/packages/kit/src/views/FiatPay/MoonpayWebView/index.tsx
diff --git a/packages/kit/src/views/FiatPay/SupportTokenList/index.tsx b/packages/kit/src/views/FiatPay/SupportTokenList/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { useNavigation, useRoute } from '@react-navigation/native';
+import { useRoute } from '@react-navigation/native';
 import Fuse from 'fuse.js';
 import { useIntl } from 'react-intl';
 
@@ -21,15 +21,19 @@ import {
 } from '@onekeyhq/components';
 import type { Network } from '@onekeyhq/engine/src/types/network';
 import type { Token } from '@onekeyhq/engine/src/types/token';
-import type { ModalScreenProps } from '@onekeyhq/kit/src/routes/types';
 
 import backgroundApiProxy from '../../../background/instance/backgroundApiProxy';
 import { FormatBalance } from '../../../components/Format';
-import { useActiveSideAccount, useTokenBalance } from '../../../hooks';
-import { FiatPayModalRoutes } from '../../../routes/routesEnum';
+import {
+  useActiveSideAccount,
+  useNavigation,
+  useTokenBalance,
+} from '../../../hooks';
+import { openUrlExternal } from '../../../utils/openUrl';
 import { useFiatPayTokens } from '../../ManageTokens/hooks';
 
 import type { FiatPayModalRoutesParams } from '../../../routes/Root/Modal/FiatPay';
+import type { FiatPayModalRoutes } from '../../../routes/routesEnum';
 import type { FiatPayModeType } from '../types';
 import type { RouteProp } from '@react-navigation/native';
 import type { ListRenderItem } from 'react-native';
@@ -56,8 +60,6 @@ export function searchTokens(tokens: Token[], terms: string): Token[] {
   return searchResult.map((item) => item.item);
 }
 
-type NavigationProps = ModalScreenProps<FiatPayModalRoutesParams>;
-
 type ListCellProps = {
   token: Token;
   address?: string;
@@ -74,6 +76,7 @@ const TokenListCell: FC<ListCellProps> = ({
   networkId,
   network,
 }) => {
+  const navigation = useNavigation();
   const balance = useTokenBalance({
     accountId,
     networkId,
@@ -105,7 +108,6 @@ const TokenListCell: FC<ListCellProps> = ({
     );
   }, [balance, decimal]);
 
-  const navigation = useNavigation<NavigationProps['navigation']>();
   const { serviceFiatPay } = backgroundApiProxy;
 
   const goToWebView = useCallback(async () => {
@@ -116,11 +118,10 @@ const TokenListCell: FC<ListCellProps> = ({
       networkId,
     });
     if (signedUrl.length > 0) {
-      navigation.navigate(FiatPayModalRoutes.MoonpayWebViewModal, {
-        url: signedUrl,
-      });
+      openUrlExternal(signedUrl);
+      navigation?.goBack();
     }
-  }, [address, navigation, networkId, serviceFiatPay, token.address, type]);
+  }, [address, networkId, serviceFiatPay, token.address, type, navigation]);
 
   return (
     <Pressable

diff --git a/packages/kit/src/views/Market/MarketDetail.tsx b/packages/kit/src/views/Market/MarketDetail.tsx
@@ -17,12 +17,8 @@ import { SCREEN_SIZE } from '@onekeyhq/components/src/Provider/device';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import backgroundApiProxy from '../../background/instance/backgroundApiProxy';
-import {
-  FiatPayModalRoutes,
-  ModalRoutes,
-  RootRoutes,
-  TabRoutes,
-} from '../../routes/routesEnum';
+import { TabRoutes } from '../../routes/routesEnum';
+import { openUrlExternal } from '../../utils/openUrl';
 import { coingeckoId2StakingTypes } from '../Staking/utils';
 import { MarketStakeButton } from '../Staking/Widgets/MarketStakingButton';
 import { SwapPlugins } from '../Swap/Plugins/Swap';
@@ -245,13 +241,7 @@ const MarketDetailLayout: FC<MarketDetailLayoutProps> = ({
               {signedUrl.length > 0 && !platformEnv.isAppleStoreEnv ? (
                 <PurchaseButton
                   onPress={() => {
-                    navigation.navigate(RootRoutes.Modal, {
-                      screen: ModalRoutes.FiatPay,
-                      params: {
-                        screen: FiatPayModalRoutes.MoonpayWebViewModal,
-                        params: { url: signedUrl },
-                      },
-                    });
+                    openUrlExternal(signedUrl);
                   }}
                 />
               ) : null}

diff --git a/packages/kit/src/views/TokenDetail/TokenDetailHeader/ButtonsSections.tsx b/packages/kit/src/views/TokenDetail/TokenDetailHeader/ButtonsSections.tsx
@@ -28,13 +28,13 @@ import backgroundApiProxy from '../../../background/instance/backgroundApiProxy'
 import { useNavigation, useNetwork, useWallet } from '../../../hooks';
 import { useAllNetworksSelectNetworkAccount } from '../../../hooks/useAllNetwoks';
 import {
-  FiatPayModalRoutes,
   MainRoutes,
   ModalRoutes,
   ReceiveTokenModalRoutes,
   RootRoutes,
   TabRoutes,
 } from '../../../routes/routesEnum';
+import { openUrlExternal } from '../../../utils/openUrl';
 import BaseMenu from '../../Overlay/BaseMenu';
 import { SendModalRoutes } from '../../Send/enums';
 import { TokenDetailContext } from '../context';
@@ -188,21 +188,6 @@ export const ButtonsSection: FC = () => {
     [navigation],
   );
 
-  const goToWebView = useCallback(
-    (signedUrl: string) => {
-      navigation.navigate(RootRoutes.Modal, {
-        screen: ModalRoutes.FiatPay,
-        params: {
-          screen: FiatPayModalRoutes.MoonpayWebViewModal,
-          params: {
-            url: signedUrl,
-          },
-        },
-      });
-    },
-    [navigation],
-  );
-
   const onBuy = useCallback(
     async ({ token, account, network }: ISingleChainInfo) => {
       const signedUrl = await backgroundApiProxy.serviceFiatPay.getFiatPayUrl({
@@ -211,9 +196,9 @@ export const ButtonsSection: FC = () => {
         tokenAddress: token?.address,
         networkId: network?.id,
       });
-      goToWebView(signedUrl);
+      openUrlExternal(signedUrl);
     },
-    [goToWebView],
+    [],
   );
 
   const onSell = useCallback(
@@ -224,9 +209,9 @@ export const ButtonsSection: FC = () => {
         tokenAddress: token?.address,
         networkId: network?.id,
       });
-      goToWebView(signedUrl);
+      openUrlExternal(signedUrl);
     },
-    [goToWebView],
+    [],
   );
 
   const handlePress = useCallback(