From edb9253f3eb438819a05b9d8056e28f3268f8c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?qwang1113=20=28=E7=8E=8B=E5=BC=BA=29?= <15064266+qwang1113@users.noreply.github.com> Date: Thu, 2 Nov 2023 09:28:31 +0800 Subject: [PATCH] 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 --- .../kit/src/routes/Root/Modal/FiatPay.tsx | 6 --- packages/kit/src/routes/routesEnum.ts | 1 - .../views/FiatPay/MoonpayWebView/index.tsx | 51 ------------------- .../views/FiatPay/SupportTokenList/index.tsx | 23 +++++---- .../kit/src/views/Market/MarketDetail.tsx | 16 ++---- .../TokenDetailHeader/ButtonsSections.tsx | 25 ++------- 6 files changed, 20 insertions(+), 102 deletions(-) delete mode 100644 packages/kit/src/views/FiatPay/MoonpayWebView/index.tsx diff --git a/packages/kit/src/routes/Root/Modal/FiatPay.tsx b/packages/kit/src/routes/Root/Modal/FiatPay.tsx index 737072da714..82dd55a50b9 100644 --- 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(); @@ -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 index 3706d53d042..7e4994e1fa1 100644 --- 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 deleted file mode 100644 index f0f651dd0d2..00000000000 --- a/packages/kit/src/views/FiatPay/MoonpayWebView/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { FC } from 'react'; -import { useEffect, useLayoutEffect } from 'react'; - -import { useNavigation, useRoute } from '@react-navigation/core'; - -import { Box, Modal } from '@onekeyhq/components'; -import WebView from '@onekeyhq/kit/src/components/WebView'; - -import type { FiatPayModalRoutesParams } from '../../../routes/Root/Modal/FiatPay'; -import type { FiatPayModalRoutes } from '../../../routes/routesEnum'; -import type { RouteProp } from '@react-navigation/core'; - -type RouteProps = RouteProp< - FiatPayModalRoutesParams, - FiatPayModalRoutes.MoonpayWebViewModal ->; - -const MoonpayWebView: FC = () => { - const route = useRoute(); - const { url } = route?.params || {}; - const navigation = useNavigation(); - - useLayoutEffect(() => { - // navigation.setOptions({ title: '123' }); - }, [navigation]); - useEffect(() => {}, []); - - return ( - - - { - console.log('onSrcChange', res); - }} - /> - - - ); -}; - -export default MoonpayWebView; diff --git a/packages/kit/src/views/FiatPay/SupportTokenList/index.tsx b/packages/kit/src/views/FiatPay/SupportTokenList/index.tsx index 48ec3fbc253..1f19ce76260 100644 --- 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; - type ListCellProps = { token: Token; address?: string; @@ -74,6 +76,7 @@ const TokenListCell: FC = ({ networkId, network, }) => { + const navigation = useNavigation(); const balance = useTokenBalance({ accountId, networkId, @@ -105,7 +108,6 @@ const TokenListCell: FC = ({ ); }, [balance, decimal]); - const navigation = useNavigation(); const { serviceFiatPay } = backgroundApiProxy; const goToWebView = useCallback(async () => { @@ -116,11 +118,10 @@ const TokenListCell: FC = ({ 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 ( = ({ {signedUrl.length > 0 && !platformEnv.isAppleStoreEnv ? ( { - 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 index 41383a1126f..34e4943ca2a 100644 --- 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(