Skip to content

Commit

Permalink
feat: migrate all entry screen, ctas to new add account (uncompleted …
Browse files Browse the repository at this point in the history
…v2) flow
  • Loading branch information
themooneer committed Dec 18, 2024
1 parent b8f7abb commit 7b2b7f3
Show file tree
Hide file tree
Showing 37 changed files with 1,688 additions and 486 deletions.
6 changes: 6 additions & 0 deletions .changeset/moody-mugs-grin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"live-mobile": minor
"@ledgerhq/live-common": minor
---

When llmNetworkBasedAddAccount feature flag is enabled, all the ctas that open an add account process will be redirected to the new flow and support currency and related route params.
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,28 @@ import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
import useAssetActions from "../../hooks/useAssetActions";
import { FabButtonBarProvider } from "../../index";
import FabButtonBar from "../../FabButtonBar";
import { CurrenciesByProviderId } from "@ledgerhq/live-common/deposit/type";

type Props = {
defaultAccount?: AccountLike;
parentAccount?: Account;
currency?: CryptoCurrency | TokenCurrency;
accounts?: AccountLike[];
eventProperties?: { [key: string]: unknown };
currencyNetworkProviders?: CurrenciesByProviderId;
};

const FabMarketActionsComponent: React.FC<Props> = ({
currency,
accounts,
defaultAccount,
eventProperties,
currencyNetworkProviders,
}) => {
const { mainActions } = useAssetActions({
currency,
accounts,
currencyNetworkProviders,
});

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/i
import { flattenAccountsSelector } from "~/reducers/accounts";
import { PtxToast } from "../../Toast/PtxToast";
import { getStakeLabelLocaleBased } from "~/helpers/getStakeLabelLocaleBased";
import { CurrenciesByProviderId } from "@ledgerhq/live-common/deposit/type";

type useAssetActionsProps = {
currency?: CryptoCurrency | TokenCurrency;
accounts?: AccountLikeArray;
currencyNetworkProviders?: CurrenciesByProviderId;
};

const iconBuy = IconsLegacy.PlusMedium;
Expand All @@ -31,13 +33,18 @@ const iconSend = IconsLegacy.ArrowTopMedium;
const iconAddAccount = IconsLegacy.WalletMedium;
const iconStake = IconsLegacy.CoinsMedium;

export default function useAssetActions({ currency, accounts }: useAssetActionsProps): {
export default function useAssetActions({
currency,
accounts,
currencyNetworkProviders,
}: useAssetActionsProps): {
mainActions: ActionButtonEvent[];
} {
const route = useRoute();
const { data: currenciesAll } = useFetchCurrencyAll();

const ptxServiceCtaScreens = useFeature("ptxServiceCtaScreens");
const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");

const { t } = useTranslation();
const stakeLabel = getStakeLabelLocaleBased();
Expand Down Expand Up @@ -69,6 +76,68 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
? getParentAccount(defaultAccount, totalAccounts)
: undefined;

const addAccountNavigationConfig = useMemo(() => {
if (llmNetworkBasedAddAccountFlow?.enabled) {
const context = "addAccounts";
// if it's a token
if (currency?.type === "TokenCurrency") {
if (!currencyNetworkProviders)
return [
NavigatorName.AssetSelection,
{
screen: ScreenName.AddAccountsSelectCrypto,
params: {
filterCurrencyIds: currency ? [currency.parentCurrency.id] : undefined,
context,
},
},
] as const;
// if it's a token and it has only one parent currency
if (currencyNetworkProviders && currencyNetworkProviders?.currenciesByNetwork.length === 1)
return [
NavigatorName.DeviceSelection,
{
screen: ScreenName.SelectDevice,
params: {
currency: currency.parentCurrency,
createTokenAccount: true,
context,
},
},
] as const;
else if (
currencyNetworkProviders &&
currencyNetworkProviders?.currenciesByNetwork.length > 1
)
return [
NavigatorName.AssetSelection,
{
screen: ScreenName.SelectNetwork,
currency: currency.id,
context,
},
] as const;
} else
return [
NavigatorName.DeviceSelection,
{
currency: currency?.id,
context,
},
] as const;
} else {
return [
NavigatorName.AddAccounts,
{
screen: ScreenName.AddAccountsSelectCrypto,
params: {
filterCurrencyIds: currency ? [currency.id] : undefined,
},
},
] as const;
}
}, [llmNetworkBasedAddAccountFlow?.enabled, currency, currencyNetworkProviders]);

const actions = useMemo<ActionButtonEvent[]>(() => {
const isPtxServiceCtaScreensDisabled = !(ptxServiceCtaScreens?.enabled ?? true);

Expand Down Expand Up @@ -225,15 +294,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
id: "add_account",
label: t("addAccountsModal.ctaAdd"),
Icon: iconAddAccount,
navigationParams: [
NavigatorName.AddAccounts,
{
screen: ScreenName.AddAccountsSelectCrypto,
params: {
filterCurrencyIds: currency ? [currency.id] : undefined,
},
},
] as const,
navigationParams: addAccountNavigationConfig,
},
]
: []),
Expand All @@ -254,6 +315,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
stakeLabel,
t,
route,
addAccountNavigationConfig,
]);

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@ export default function SwapNavigator(
title: t("transfer.swap2.form.title"),
headerLeft: () => null,
}}
initialParams={{
...params,
}}
initialParams={params as Partial<SwapNavigatorParamList[ScreenName.SwapTab]>}
/>

<Stack.Screen
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -321,9 +321,11 @@ export type BaseNavigatorStackParamList = {
NavigatorScreenParams<DeviceSelectionNavigatorParamsList>
>;
[NavigatorName.AssetSelection]?: Partial<
NavigatorScreenParams<AssetSelectionNavigatorParamsList>
> &
CommonAddAccountNavigatorParamsList;
NavigatorScreenParams<AssetSelectionNavigatorParamsList> & {
context?: "addAccounts" | "receiveFunds";
token?: TokenCurrency;
} // in some cases we need to pass directly the context to the navigator and let it handle the logic
>;
[NavigatorName.Assets]?: Partial<NavigatorScreenParams<AssetsNavigatorParamsList>>;
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Observable } from "rxjs";
import { NavigatorScreenParams } from "@react-navigation/native";
import { NavigatorName, ScreenName } from "~/const";
import { AddAccountsNavigatorParamList } from "./AddAccountsNavigator";
import { DeviceSelectionNavigatorParamsList } from "LLM/features/DeviceSelection/types";

export type RequestAccountNavigatorParamList = {
[ScreenName.RequestAccountsSelectCrypto]: {
Expand All @@ -30,4 +31,14 @@ export type RequestAccountNavigatorParamList = {
analyticsPropertyFlow?: string;
onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
}>;
[NavigatorName.DeviceSelection]: Partial<
NavigatorScreenParams<DeviceSelectionNavigatorParamsList> &
Partial<{
token?: TokenCurrency;
inline?: boolean;
returnToSwap?: boolean;
analyticsPropertyFlow?: string;
onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
}>
>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ import type { Transaction as CasperTransaction } from "@ledgerhq/live-common/fam
import type { Transaction as TonTransaction } from "@ledgerhq/live-common/families/ton/types";
import BigNumber from "bignumber.js";
import { Account, Operation } from "@ledgerhq/types-live";
import { ScreenName } from "~/const";
import { NavigatorName, ScreenName } from "~/const";
import { NavigatorScreenParams } from "@react-navigation/core";
import { AssetSelectionNavigatorParamsList } from "LLM/features/AssetSelection/types";

type Target = "from" | "to";

Expand Down Expand Up @@ -329,4 +331,7 @@ export type SwapNavigatorParamList = {
| ScreenName.SendSelectDevice
| ScreenName.SwapForm;
};
[NavigatorName.AssetSelection]?: Partial<
NavigatorScreenParams<AssetSelectionNavigatorParamsList>
>;
};
8 changes: 8 additions & 0 deletions apps/ledger-live-mobile/src/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -7123,5 +7123,13 @@
}
}
}
},
"assetSelection": {
"selectCrypto": {
"title": "Select Asset"
},
"selectNetwork": {
"title": "Select the blockchain network the asset belongs to"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default function Navigator() {
options={{
headerTitle: "",
}}
initialParams={route.params}
/>

{/* Scan accounts from device */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,22 @@ const useSelectAddAccountMethodViewModel = ({
const hasCurrency = !!currency;

const navigationParams = useMemo(() => {
return hasCurrency
? currency.type === "TokenCurrency"
? { token: currency }
: { currency }
: {};
}, [hasCurrency, currency]);
if (hasCurrency) {
if (currency?.type === "TokenCurrency") {
return {
token: currency,
...(llmNetworkBasedAddAccountFlow?.enabled && { context: "addAccounts" }),
};
} else {
return {
currency,
...(llmNetworkBasedAddAccountFlow?.enabled && { context: "addAccounts" }),
};
}
} else {
return llmNetworkBasedAddAccountFlow?.enabled ? { context: "addAccounts" } : {};
}
}, [hasCurrency, currency, llmNetworkBasedAddAccountFlow?.enabled]);

const trackButtonClick = useCallback((button: string) => {
track("button_clicked", {
Expand All @@ -58,6 +68,9 @@ const useSelectAddAccountMethodViewModel = ({
const EntryNavigatorName = llmNetworkBasedAddAccountFlow?.enabled
? NavigatorName.AssetSelection
: NavigatorName.AddAccounts;
// to delete after llmNetworkBasedAddAccountFlow is fully enabled (ts inference not working well based on navigationParams)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
navigation.navigate(EntryNavigatorName, navigationParams);
}, [
navigation,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@ import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
import { ScreenName } from "~/const";
import { Device } from "@ledgerhq/types-devices";

type CommonParams = {
context?: "addAccounts" | "receiveFunds";
onSuccess?: () => void;
};
export type NetworkBasedAddAccountNavigator = {
[ScreenName.SelectAccounts]: {
[ScreenName.SelectAccounts]: CommonParams & {
currency: CryptoCurrency | TokenCurrency;
createTokenAccount?: boolean;
};
[ScreenName.ScanDeviceAccounts]: {
[ScreenName.ScanDeviceAccounts]: CommonParams & {
currency: CryptoCurrency | TokenCurrency;
device: Device;
onSuccess?: (_?: unknown) => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { useTheme } from "styled-components/native";
import { useRoute } from "@react-navigation/native";
import { ScreenName } from "~/const";
import { NavigatorName, ScreenName } from "~/const";
import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
import { track } from "~/analytics";
import { Flex } from "@ledgerhq/native-ui";
Expand All @@ -16,13 +16,19 @@ import SelectNetwork from "LLM/features/AssetSelection/screens/SelectNetwork";
import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
import { NavigationHeaderBackButton } from "~/components/NavigationHeaderBackButton";
import { AssetSelectionNavigatorParamsList } from "./types";
import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";

type NavigationProps = BaseComposite<
StackNavigatorProps<AssetSelectionNavigatorParamsList, NavigatorName.AssetSelection>
>;

export default function Navigator() {
const { colors } = useTheme();
const route = useRoute();

const route = useRoute<NavigationProps["route"]>();
const hasClosedNetworkBanner = useSelector(hasClosedNetworkBannerSelector);

const { token, currency } = route.params || {};

const onClose = useCallback(() => {
track("button_clicked", {
button: "Close",
Expand All @@ -44,15 +50,19 @@ export default function Navigator() {
...stackNavigationConfig,
gestureEnabled: Platform.OS === "ios",
}}
initialRouteName={
token || currency ? ScreenName.SelectNetwork : ScreenName.AddAccountsSelectCrypto
}
>
<Stack.Screen
name={ScreenName.AddAccountsSelectCrypto}
component={SelectCrypto}
options={{
headerLeft: () => <NavigationHeaderBackButton />,
headerTitle: "",
title: "",
headerRight: () => <NavigationHeaderCloseButtonAdvanced onClose={onClose} />,
}}
initialParams={route.params}
/>

<Stack.Screen
Expand All @@ -70,6 +80,7 @@ export default function Navigator() {
</Flex>
),
}}
initialParams={route.params}
/>
</Stack.Navigator>
);
Expand Down
Loading

0 comments on commit 7b2b7f3

Please sign in to comment.