Merge pull request #7702 from LedgerHQ/feat/LIVE-13195

feat(web3hub): new bottom modal to select network and account with dapp browser v3 [LIVE-13195]
LedgerHQ · Sep 2, 2024 · fffa5ec · fffa5ec
2 parents f4bb881 + ffa9dd6
commit fffa5ec
Show file tree

Hide file tree

Showing 42 changed files with 733 additions and 201 deletions.
diff --git a/.changeset/hip-plants-impress.md b/.changeset/hip-plants-impress.md
@@ -0,0 +1,8 @@
+---
+"live-mobile": minor
+---
+
+feat(web3hub): new bottom modal to select network and account with dapp browser v3
+Small perf improvement for dapp browser v3 dapps initial load
+Lots of small visual improvements, polish and bugfixes
+Update app screen header url
diff --git a/.changeset/mighty-mangos-begin.md b/.changeset/mighty-mangos-begin.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+perf: improve perf by using the networks instead of listing currencies to match
diff --git a/.changeset/tidy-trains-double.md b/.changeset/tidy-trains-double.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+refactor: merge BottomDrawer containerStyle prop
diff --git a/.changeset/young-birds-taste.md b/.changeset/young-birds-taste.md
@@ -0,0 +1,6 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+fix: missing deps in useEffect array
+And cleanup unused code and picomatch dependency
diff --git a/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/helpers.ts b/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/helpers.ts
@@ -277,7 +277,7 @@ export function useSelectAccount({
   currentAccountHistDb?: CurrentAccountHistDB;
 }) {
   const currencies = useManifestCurrencies(manifest);
-  const { setCurrentAccountHist } = useDappCurrentAccount(currentAccountHistDb);
+  const { setCurrentAccountHist, currentAccount } = useDappCurrentAccount(currentAccountHistDb);
 
   const onSelectAccount = useCallback(() => {
     setDrawer(
@@ -297,5 +297,5 @@ export function useSelectAccount({
     );
   }, [currencies, manifest.id, setCurrentAccountHist]);
 
-  return { onSelectAccount };
+  return { onSelectAccount, currentAccount };
 }
diff --git a/apps/ledger-live-desktop/src/renderer/components/WebPlatformPlayer/TopBar.tsx b/apps/ledger-live-desktop/src/renderer/components/WebPlatformPlayer/TopBar.tsx
@@ -18,7 +18,6 @@ import { WebviewAPI, WebviewState } from "../Web3AppWebview/types";
 import Spinner from "../Spinner";
 import { getAccountCurrency } from "@ledgerhq/live-common/account/helpers";
 import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
-import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
 import { CurrentAccountHistDB, safeGetRefValue } from "@ledgerhq/live-common/wallet-api/react";
 import Wallet from "~/renderer/icons/Wallet";
 import { getDefaultAccountName } from "@ledgerhq/live-wallet/accountName";
@@ -142,7 +141,6 @@ export const TopBar = ({
   webviewState,
 }: Props) => {
   const { name, icon } = manifest;
-  const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);
 
   const {
     shouldDisplayName = true,
@@ -183,7 +181,7 @@ export const TopBar = ({
     webview.goForward();
   }, [webviewAPIRef]);
 
-  const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });
+  const { onSelectAccount, currentAccount } = useSelectAccount({ manifest, currentAccountHistDb });
 
   const isLoading = useDebounce(webviewState.loading, 100);
 

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/AddAccountsNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/AddAccountsNavigator.ts
@@ -15,14 +15,14 @@ export type AddAccountsNavigatorParamList = {
     inline?: boolean;
     returnToSwap?: boolean;
     analyticsPropertyFlow?: string;
-    onSuccess?: () => void;
+    onSuccess?: (res: { scannedAccounts: Account[]; selected: Account[] }) => void;
   };
   [ScreenName.AddAccountsAccounts]: {
     currency: CryptoOrTokenCurrency;
     device: Device;
     inline?: boolean;
     returnToSwap?: boolean;
-    onSuccess?: (_?: unknown) => void;
+    onSuccess?: (res: { scannedAccounts: Account[]; selected: Account[] }) => void;
   };
   [ScreenName.AddAccountsSuccess]?: {
     currency: CryptoOrTokenCurrency;

diff --git a/apps/ledger-live-mobile/src/components/Web3AppWebview/helpers.ts b/apps/ledger-live-mobile/src/components/Web3AppWebview/helpers.ts
@@ -529,7 +529,7 @@ export function useSelectAccount({
   currentAccountHistDb?: CurrentAccountHistDB;
 }) {
   const currencies = useManifestCurrencies(manifest);
-  const { setCurrentAccountHist } = useDappCurrentAccount(currentAccountHistDb);
+  const { setCurrentAccountHist, currentAccount } = useDappCurrentAccount(currentAccountHistDb);
   const navigation = useNavigation();
 
   const onSelectAccount = useCallback(() => {
@@ -558,5 +558,5 @@ export function useSelectAccount({
     }
   }, [manifest.id, currencies, navigation, setCurrentAccountHist]);
 
-  return { onSelectAccount };
+  return { onSelectAccount, currentAccount };
 }
diff --git a/apps/ledger-live-mobile/src/components/WebPlatformPlayer/SelectAccountButton.tsx b/apps/ledger-live-mobile/src/components/WebPlatformPlayer/SelectAccountButton.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { Trans } from "react-i18next";
-import { Flex, Text } from "@ledgerhq/native-ui";
+import { Text } from "@ledgerhq/native-ui";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 import { CurrentAccountHistDB } from "@ledgerhq/live-common/wallet-api/react";
-import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
 import Button from "~/components/Button";
 import CircleCurrencyIcon from "~/components/CircleCurrencyIcon";
 import { useSelectAccount } from "~/components/Web3AppWebview/helpers";
@@ -18,20 +17,14 @@ export default function SelectAccountButton({
   manifest,
   currentAccountHistDb,
 }: SelectAccountButtonProps) {
-  const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);
-
-  const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });
+  const { onSelectAccount, currentAccount } = useSelectAccount({ manifest, currentAccountHistDb });
 
   const currentAccountName = useMaybeAccountName(currentAccount);
 
   return (
-    <Button type="primary" onPress={onSelectAccount}>
-      {!currentAccount ? (
-        <Text>
-          <Trans i18nKey="common.selectAccount" />
-        </Text>
-      ) : (
-        <Flex flexDirection="row" height={50} alignItems="center" justifyContent="center">
+    <Button
+      Icon={
+        !currentAccount ? undefined : (
           <CircleCurrencyIcon
             size={24}
             currency={
@@ -40,10 +33,19 @@ export default function SelectAccountButton({
                 : currentAccount.currency
             }
           />
-          <Text color={"neutral.c20"} ml={4}>
-            {currentAccountName}
-          </Text>
-        </Flex>
+        )
+      }
+      iconPosition={"left"}
+      type="primary"
+      onPress={onSelectAccount}
+      isNewIcon
+    >
+      {!currentAccount ? (
+        <Text>
+          <Trans i18nKey="common.selectAccount" />
+        </Text>
+      ) : (
+        <Text color={"neutral.c20"}>{currentAccountName}</Text>
       )}
     </Button>
   );

diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -6913,6 +6913,19 @@
         "title": "Clear signing",
         "description": "Clear signing allows you to sign a message without revealing the content of the message to the app. This is useful for privacy and security reasons."
       }
+    },
+    "app": {
+      "selectAccountModal": {
+        "networkHeader": {
+          "title": "Choose a network"
+        },
+        "accountHeader": {
+          "title": "Choose an account"
+        },
+        "addAccountItem": {
+          "name": "Add an account"
+        }
+      }
     }
   }
 }
diff --git a/...ive-mobile/src/newArch/features/Web3Hub/components/ManifestRow/CurrencyIconList/index.tsx b/...ive-mobile/src/newArch/features/Web3Hub/components/ManifestRow/CurrencyIconList/index.tsx
@@ -54,7 +54,7 @@ export default function CurrencyIconList({ currencies }: Props) {
           justifyContent={"center"}
           marginLeft={-3}
           backgroundColor={colors.card}
-          borderColor={colors.border}
+          borderColor={colors.background}
           borderStyle={"solid"}
           borderWidth={1}
           borderRadius={50}
@@ -75,7 +75,7 @@ export default function CurrencyIconList({ currencies }: Props) {
     }
 
     return list;
-  }, [colors.background, colors.border, colors.card, currencies]);
+  }, [colors.background, colors.card, currencies]);
 
   return <Flex flexDirection={"row"}>{icons}</Flex>;
 }
diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestRow/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestRow/index.tsx
@@ -1,23 +1,43 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Flex, Text } from "@ledgerhq/native-ui";
+import { useTheme } from "@react-navigation/native";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 import AppIcon from "LLM/features/Web3Hub/components/AppIcon";
+import Label from "LLM/features/Web3Hub/components/ManifestsList/ManifestItem/Label";
 import CurrencyIconList from "./CurrencyIconList";
 
 export default function ManifestRow({ manifest }: { manifest: AppManifest }) {
+  const { colors } = useTheme();
+  const { t } = useTranslation();
   const isDisabled = manifest.branch === "soon";
 
+  const clearSigningEnabled = useMemo(() => {
+    return manifest?.categories.includes("clear signing");
+  }, [manifest?.categories]);
+
   return (
     <>
       <AppIcon isDisabled={isDisabled} size={48} name={manifest.name} icon={manifest.icon} />
-      <Flex marginX={16} height="100%" flexGrow={1} flexShrink={1} justifyContent={"center"}>
+      <Flex ml={16} height="100%" flexGrow={1} flexShrink={1} justifyContent={"center"}>
         <Flex flexDirection="row" alignItems={"center"} mb={2}>
-          <Text variant="large" numberOfLines={1} fontWeight="semiBold">
+          <Text flex={1} variant="large" numberOfLines={1} fontWeight="semiBold">
             {manifest.name}
           </Text>
+
+          {clearSigningEnabled && (
+            <Label
+              text={t(`web3hub.components.label.clearSigning`)}
+              style={{
+                borderWidth: 0,
+                color: colors.black,
+                backgroundColor: colors.lightGrey,
+              }}
+            />
+          )}
+          {/* TODO add badges on certain categories */}
         </Flex>
         <CurrencyIconList currencies={manifest.currencies} />
-        {/* TODO add badges on certain categories */}
       </Flex>
     </>
   );

diff --git a/...mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/Label/index.tsx b/...mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/Label/index.tsx
@@ -1,38 +1,34 @@
-import React from "react";
+import React, { ComponentProps } from "react";
 import { Text } from "@ledgerhq/native-ui";
 
-type ItemStyle = {
-  badgeColor: string;
-  borderColor: string;
-  backgroundColor: string;
-};
-
 type Props = {
   text: string;
-  style: ItemStyle;
+  style: Pick<
+    ComponentProps<typeof Text>,
+    "color" | "borderColor" | "backgroundColor" | "borderWidth"
+  >;
 };
 
 const Label: React.FC<Props> = ({ text, style }) => {
-  const { badgeColor, borderColor, backgroundColor } = style;
+  const { color, borderColor, backgroundColor, borderWidth = 1 } = style;
   return (
     <Text
       role="banner"
-      fontSize="9px"
+      fontSize="11px"
       width="auto"
-      paddingX={2}
-      paddingY={1}
-      borderWidth={1}
+      paddingX={3}
+      paddingY={2}
+      borderWidth={borderWidth}
       borderRadius={3}
       borderStyle={"solid"}
       flexGrow={0}
       flexShrink={0}
       overflow={"hidden"}
-      textTransform="uppercase"
-      color={badgeColor}
+      textTransform="capitalize"
+      color={color}
       borderColor={borderColor}
       backgroundColor={backgroundColor}
       fontWeight="semiBold"
-      marginLeft={3}
     >
       {text}
     </Text>

diff --git a/...-live-mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/index.tsx b/...-live-mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/index.tsx
@@ -70,8 +70,12 @@ export default function ManifestItem({
   );
 
   const url = useMemo(() => {
+    if (manifest.params && "dappUrl" in manifest.params) {
+      return new URL(manifest.params.dappUrl).origin;
+    }
+
     return new URL(manifest.url).origin;
-  }, [manifest.url]);
+  }, [manifest.params, manifest.url]);
 
   const icon = useMemo(() => {
     // RN tries to load file locally if there is a space in front of the file url
@@ -86,30 +90,28 @@ export default function ManifestItem({
     <TouchableOpacity disabled={isDisabled} onPress={handlePress}>
       <Flex flexDirection="row" alignItems="center" height={72} paddingX={4} paddingY={2}>
         <AppIcon isDisabled={isDisabled} size={48} name={manifest.name} icon={icon} />
-        <Flex marginX={16} height="100%" flexGrow={1} flexShrink={1} justifyContent={"center"}>
+        <Flex ml={16} height="100%" flexGrow={1} flexShrink={1} justifyContent={"center"}>
           <Flex flexDirection="row" alignItems={"center"} mb={2} columnGap={4}>
-            <Text variant="large" color={color} numberOfLines={1} fontWeight="semiBold">
+            <Text flex={1} variant="large" color={color} numberOfLines={1} fontWeight="semiBold">
               {manifest.name}
             </Text>
-            <Flex flexDirection="row" alignItems={"center"}>
+            <Flex flexDirection="row" alignItems={"center"} columnGap={4}>
               {manifest.branch !== "stable" && (
                 <Label
                   text={t(`platform.catalog.branch.${manifest.branch}`, {
                     defaultValue: manifest.branch,
                   })}
-                  style={{ badgeColor, borderColor, backgroundColor }}
+                  style={{ color: badgeColor, borderColor, backgroundColor }}
                 />
               )}
 
               {clearSigningEnabled && (
                 <Label
-                  text={t(`web3hub.components.label.clearSigning`, {
-                    defaultValue: "Clear Signing",
-                  })}
+                  text={t(`web3hub.components.label.clearSigning`)}
                   style={{
-                    badgeColor: colors.live,
-                    borderColor: colors.live,
-                    backgroundColor: "transparent",
+                    borderWidth: 0,
+                    color: colors.black,
+                    backgroundColor: colors.lightGrey,
                   }}
                 />
               )}

diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestsList/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestsList/index.tsx
@@ -18,7 +18,6 @@ type NavigationProp = MainProps["navigation"] | SearchProps["navigation"];
 type Props = {
   navigation: NavigationProp;
   onScroll?: ComponentProps<typeof AnimatedFlashList>["onScroll"];
-  title?: string;
   pt?: number;
   pb?: number;
   headerComponent?: React.ReactNode;
@@ -43,7 +42,6 @@ const renderItem = ({
 export default function ManifestsList({
   navigation,
   onScroll,
-  title,
   pt = 0,
   pb = 0,
   headerComponent,
@@ -77,12 +75,6 @@ export default function ManifestsList({
         ListHeaderComponent={
           <>
             {headerComponent}
-            <Text mt={5} numberOfLines={1} variant="h5" mx={5} accessibilityRole="header">
-              {title ?? t("web3hub.components.manifestsList.title")}
-            </Text>
-            <Text mt={2} mb={5} numberOfLines={1} variant="body" mx={5} accessibilityRole="header">
-              {t("web3hub.components.manifestsList.description")}
-            </Text>
             <View style={{ height: 32, marginBottom: 2 }}>
               <CategoriesList selectedCategory={selectedCategory} selectCategory={selectCategory} />
             </View>