Skip to content

Commit

Permalink
LIVE-3254 - LLM - Wallet connect as live app feature flag
Browse files Browse the repository at this point in the history
replaced scan: true by mode: "scan"

tweaked react-native webview

prevent undefined params to be passed to the live app (dangerous)

fix: wallet connect deeplink update uri instead of pushing a new screen

fix: handle wallet connect invalid links
  • Loading branch information
Justkant committed Sep 7, 2022
1 parent 0f4a12a commit 6d48688
Show file tree
Hide file tree
Showing 18 changed files with 365 additions and 89 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-planets-whisper.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"live-mobile": minor
---

feat(LLM): Wallet connect as live app feature flag [LIVE-3254]
4 changes: 4 additions & 0 deletions apps/ledger-live-mobile/src/actions/walletconnect.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const setWallectConnectUri = (uri?: string) => ({
type: "WALLET_CONNECT_SET_URI",
uri,
});
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Props = {
withConfirmation?: boolean;
confirmationTitle?: React.ReactNode;
confirmationDesc?: React.ReactNode;
onClose: (..._: Array<any>) => any;
onClose?: (..._: Array<any>) => any;
};

// eslint-disable-next-line @typescript-eslint/no-empty-function
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ import OperationDetails, {
import PairDevices from "../../screens/PairDevices";
import EditDeviceName from "../../screens/EditDeviceName";
import ScanRecipient from "../../screens/SendFunds/ScanRecipient";
import WalletConnectScan from "../../screens/WalletConnect/Scan";
import WalletConnectConnect from "../../screens/WalletConnect/Connect";
import WalletConnectDeeplinkingSelectAccount from "../../screens/WalletConnect/DeeplinkingSelectAccount";
// eslint-disable-next-line import/no-unresolved
import FallbackCameraSend from "../FallbackCamera/FallbackCameraSend";
// eslint-disable-next-line import/no-cycle
Expand Down Expand Up @@ -89,6 +86,8 @@ import Learn from "../../screens/Learn";
// eslint-disable-next-line import/no-cycle
import { useNoNanoBuyNanoWallScreenOptions } from "../../context/NoNanoBuyNanoWall";
import PostBuyDeviceSetupNanoWallScreen from "../../screens/PostBuyDeviceSetupNanoWallScreen";
import WalletConnectNavigator from "./WalletConnectNavigator";
import WalletConnectLiveAppNavigator from "./WalletConnectLiveAppNavigator";
import CustomImageNavigator from "./CustomImageNavigator";

import {
Expand Down Expand Up @@ -119,6 +118,7 @@ export default function BaseNavigator() {
const learn = useFeature("learn");
// PTX smart routing feature flag - buy sell live app flag
const ptxSmartRoutingMobile = useFeature("ptxSmartRoutingMobile");
const walletConnectLiveApp = useFeature("walletConnectLiveApp");
const noNanoBuyNanoWallScreenOptions = useNoNanoBuyNanoWallScreenOptions();

return (
Expand Down Expand Up @@ -158,7 +158,7 @@ export default function BaseNavigator() {
cardStyle: { opacity: 1 },
gestureEnabled: true,
headerTitle: null,
headerRight: null,
headerRight: () => null,
headerBackTitleVisible: false,
title: null,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
Expand All @@ -169,8 +169,8 @@ export default function BaseNavigator() {
component={PostBuyDeviceScreen}
options={{
title: t("postBuyDevice.headerTitle"),
headerLeft: null,
headerRight: null,
headerLeft: () => null,
headerRight: () => null,
}}
/>
<Stack.Screen
Expand Down Expand Up @@ -229,7 +229,7 @@ export default function BaseNavigator() {
component={SwapNavigator}
options={{
...stackNavigationConfig,
headerLeft: null,
headerLeft: () => null,
title: t("transfer.swap.form.tab"),
}}
/>
Expand All @@ -246,23 +246,23 @@ export default function BaseNavigator() {
}
/>
),
headerRight: null,
headerRight: () => null,
})}
/>
<Stack.Screen
name={ScreenName.SwapOperationDetails}
component={SwapOperationDetails}
options={{
title: t("transfer.swap.form.tab"),
headerRight: null,
headerRight: () => null,
}}
/>
<Stack.Screen
name={ScreenName.SwapV2FormSelectCurrency}
component={SwapFormSelectCurrency}
options={{
headerTitle: () => <StepHeader title={t("transfer.swap.form.to")} />,
headerRight: null,
headerRight: () => null,
}}
/>
<Stack.Screen
Expand All @@ -272,7 +272,7 @@ export default function BaseNavigator() {
headerTitle: () => (
<StepHeader title={t("transfer.swap.form.summary.method")} />
),
headerRight: null,
headerRight: () => null,
}}
/>
<Stack.Screen
Expand All @@ -282,7 +282,7 @@ export default function BaseNavigator() {
headerTitle: () => (
<StepHeader title={t("transfer.swap.form.summary.fees")} />
),
headerRight: null,
headerRight: () => null,
}}
/>
<Stack.Screen
Expand All @@ -291,7 +291,7 @@ export default function BaseNavigator() {
options={{
...stackNavigationConfig,
headerStyle: styles.headerNoShadow,
headerLeft: null,
headerLeft: () => null,
title: t("transfer.lending.title"),
}}
/>
Expand Down Expand Up @@ -363,7 +363,7 @@ export default function BaseNavigator() {
name={ScreenName.VerifyAccount}
component={VerifyAccount}
options={{
headerLeft: null,
headerLeft: () => null,
title: t("transfer.receive.headerTitle"),
}}
listeners={({ route }) => ({
Expand Down Expand Up @@ -391,7 +391,7 @@ export default function BaseNavigator() {
options={
ptxSmartRoutingMobile?.enabled
? { headerShown: false }
: { headerStyle: styles.headerNoShadow, headerLeft: null }
: { headerStyle: styles.headerNoShadow, headerLeft: () => null }
}
{...noNanoBuyNanoWallScreenOptions}
/>
Expand Down Expand Up @@ -462,7 +462,7 @@ export default function BaseNavigator() {
/>
),
headerLeft: () => <BackButton navigation={navigation} />,
headerRight: null,
headerRight: () => null,
};
}}
/>
Expand Down Expand Up @@ -497,7 +497,7 @@ export default function BaseNavigator() {
component={EditDeviceName}
options={{
title: t("EditDeviceName.title"),
headerLeft: null,
headerLeft: () => null,
...TransitionPresets.ModalPresentationIOS,
}}
/>
Expand All @@ -521,7 +521,7 @@ export default function BaseNavigator() {
component={AnalyticsNavigator}
options={{
title: t("analytics.title"),
headerRight: null,
headerRight: () => null,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
}}
/>
Expand All @@ -530,7 +530,7 @@ export default function BaseNavigator() {
component={MarketCurrencySelect}
options={{
title: t("market.filters.currency"),
headerLeft: null,
headerLeft: () => null,
unmountOnBlur: true,
}}
/>
Expand All @@ -539,7 +539,7 @@ export default function BaseNavigator() {
component={PortfolioHistory}
options={{
headerTitle: t("analytics.operations.title"),
headerRight: null,
headerRight: () => null,
}}
/>
<Stack.Screen
Expand All @@ -560,55 +560,39 @@ export default function BaseNavigator() {
...TransparentHeaderNavigationOptions,
title: t("send.scan.title"),
headerRight: () => (
<HeaderRightClose color={colors.white} preferDismiss={false} />
),
headerLeft: null,
}}
/>
<Stack.Screen
name={ScreenName.WalletConnectScan}
component={WalletConnectScan}
options={{
...TransparentHeaderNavigationOptions,
title: "Wallet Connect",
headerRight: () => (
<HeaderRightClose color={colors.white} preferDismiss={false} />
<HeaderRightClose
color={colors.constant.white}
preferDismiss={false}
/>
),
headerLeft: null,
headerLeft: () => null,
}}
/>
<Stack.Screen
name={ScreenName.WalletConnectDeeplinkingSelectAccount}
component={WalletConnectDeeplinkingSelectAccount}
options={{
title: t("walletconnect.deeplinkingTitle"),
headerRight: () => <HeaderRightClose preferDismiss={false} />,
headerLeft: null,
}}
/>
<Stack.Screen
name={ScreenName.WalletConnectConnect}
component={WalletConnectConnect}
name={NavigatorName.WalletConnect}
component={
walletConnectLiveApp?.enabled
? WalletConnectLiveAppNavigator
: WalletConnectNavigator
}
options={{
title: "Wallet Connect",
headerLeft: null,
gestureEnabled: false,
headerShown: false,
}}
/>
<Stack.Screen
name={ScreenName.FallbackCameraSend}
component={FallbackCameraSend}
options={{
title: t("send.scan.fallback.header"),
headerLeft: null,
headerLeft: () => null,
}}
/>
<Stack.Screen
name={NavigatorName.NotificationCenter}
component={NotificationCenterNavigator}
options={({ navigation }) => ({
title: t("notificationCenter.title"),
headerLeft: null,
headerLeft: () => null,
headerRight: () => <CloseButton navigation={navigation} />,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
})}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { useEffect, useMemo } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { useTheme } from "styled-components/native";
import { useDispatch, useSelector } from "react-redux";

import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
import { Flex, Icons } from "@ledgerhq/native-ui";
import { ScreenName } from "../../const";
import { getStackNavigatorConfig } from "../../navigation/navigatorConfig";
import styles from "../../navigation/styles";

import PlatformApp from "../../screens/Platform/App";
import { uriSelector } from "../../reducers/walletconnect";
import { setWallectConnectUri } from "../../actions/walletconnect";

const options = {
headerBackImage: () => (
<Flex pl="16px">
<Icons.CloseMedium color="neutral.c100" size="20px" />
</Flex>
),
headerStyle: styles.headerNoShadow,
headerTitle: () => null,
};

export default function WalletConnectLiveAppNavigator({ route }: any) {
const dispatch = useDispatch();
const { colors } = useTheme();
const walletConnectLiveApp = useFeature("walletConnectLiveApp");
const stackNavigationConfig = useMemo(
() => getStackNavigatorConfig(colors, true),
[colors],
);

const uri = useSelector(uriSelector);

useEffect(() => {
return () => {
dispatch(setWallectConnectUri());
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const { params: routeParams } = route;

const platform = walletConnectLiveApp?.params?.liveAppId || "wallet-connect";

return (
<Stack.Navigator screenOptions={stackNavigationConfig}>
<Stack.Screen name={ScreenName.WalletConnectScan} options={options}>
{(_props: any) => (
<PlatformApp
{..._props}
{...routeParams}
route={{
..._props.route,
params: {
platform,
mode: "scan",
uri: uri || _props.route.params?.uri,
account: _props.route.params?.accountId,
},
}}
/>
)}
</Stack.Screen>
<Stack.Screen
name={ScreenName.WalletConnectDeeplinkingSelectAccount}
options={options}
>
{(_props: any) => (
<PlatformApp
{..._props}
{...routeParams}
route={{
..._props.route,
params: {
platform,
uri: uri || _props.route.params?.uri,
account: _props.route.params?.accountId,
},
}}
/>
)}
</Stack.Screen>
<Stack.Screen name={ScreenName.WalletConnectConnect} options={options}>
{(_props: any) => (
<PlatformApp
{..._props}
{...routeParams}
route={{
..._props.route,
params: {
platform,
uri: uri || _props.route.params?.uri,
account: _props.route.params?.accountId,
},
}}
/>
)}
</Stack.Screen>
</Stack.Navigator>
);
}

const Stack = createStackNavigator();
Loading

0 comments on commit 6d48688

Please sign in to comment.