-
Notifications
You must be signed in to change notification settings - Fork 326
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web3hub): add confirmation bottom modal before opening app [LIVE…
…-13188] Updated the base url used to get manifest in web3hub Refactor a bit our flashlist usage Updated tests
- Loading branch information
Showing
17 changed files
with
467 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "live-mobile": minor | ||
| --- | ||
|
|
||
| feat(web3hub): add confirmation bottom modal before opening app |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/Disclaimer/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useMemo } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { Flex, Text, Checkbox, Button, Icons, Box } from "@ledgerhq/native-ui"; | ||
| import { translateContent } from "@ledgerhq/live-common/wallet-api/logic"; | ||
| import ManifestRow from "LLM/features/Web3Hub/components/ManifestRow"; | ||
| import QueuedDrawer from "~/components/QueuedDrawer"; | ||
| import { useLocale } from "~/context/Locale"; | ||
| import useDisclaimerViewModel from "./useDisclaimerViewModel"; | ||
|
|
||
| type Props = { | ||
| disclaimer: ReturnType<typeof useDisclaimerViewModel>; | ||
| }; | ||
|
|
||
| export { useDisclaimerViewModel }; | ||
|
|
||
| export default function Disclaimer({ | ||
| disclaimer: { isOpened, isChecked, toggleCheck, onClose, onConfirm, manifest }, | ||
| }: Props) { | ||
| const { t } = useTranslation(); | ||
| const { locale } = useLocale(); | ||
|
|
||
| const description = useMemo(() => { | ||
| return manifest?.content.description | ||
| ? translateContent(manifest.content.description, locale) | ||
| : undefined; | ||
| }, [locale, manifest?.content.description]); | ||
|
|
||
| return ( | ||
| <QueuedDrawer isRequestingToBeOpened={isOpened} onClose={onClose}> | ||
| {manifest ? ( | ||
| <Flex flexDirection="row" alignItems="center" height={72}> | ||
| <ManifestRow manifest={manifest} /> | ||
| </Flex> | ||
| ) : null} | ||
|
|
||
| {description ? ( | ||
| <Flex mt={6}> | ||
| <Text fontSize={14} lineHeight={"22px"} color="smoke"> | ||
| {description} | ||
| </Text> | ||
| </Flex> | ||
| ) : null} | ||
|
|
||
| <Box mt={6} height="1px" width="100%" backgroundColor={"translucentGrey"} /> | ||
|
|
||
| <Flex mt={6} flexDirection={"row"} alignItems={"center"}> | ||
| <Box mr={2}> | ||
| <Icons.Eye color={"smoke"} /> | ||
| </Box> | ||
| <Text fontSize={14} color="smoke"> | ||
| {t("web3hub.disclaimer.clearSigningEnabled")} | ||
| </Text> | ||
| </Flex> | ||
|
|
||
| <Flex mt={6}> | ||
| <Checkbox | ||
| label={" " + t("web3hub.disclaimer.checkbox")} | ||
| checked={isChecked} | ||
| onChange={toggleCheck} | ||
| /> | ||
| </Flex> | ||
|
|
||
| <Flex mt={6}> | ||
| <Button type="main" onPress={onConfirm}> | ||
| {t("web3hub.disclaimer.CTA", { app: manifest?.name })} | ||
| </Button> | ||
| </Flex> | ||
| </QueuedDrawer> | ||
| ); | ||
| } |
86 changes: 86 additions & 0 deletions
86
...-live-mobile/src/newArch/features/Web3Hub/components/Disclaimer/useDisclaimerViewModel.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { useCallback, useEffect, useState } from "react"; | ||
| import { AppManifest } from "@ledgerhq/live-common/wallet-api/types"; | ||
| import { INITIAL_WEB3HUB_STATE, WEB3HUB_STORE_KEY } from "LLM/features/Web3Hub/constants"; | ||
| import { Web3HubDB } from "LLM/features/Web3Hub/types"; | ||
| import { useDB } from "~/db"; | ||
|
|
||
| const dismissedManifestsSelector = (state: Web3HubDB) => state.dismissedManifests; | ||
|
|
||
| export function useDismissedManifests() { | ||
| return useDB<Web3HubDB, Web3HubDB["dismissedManifests"]>( | ||
| WEB3HUB_STORE_KEY, | ||
| INITIAL_WEB3HUB_STATE, | ||
| dismissedManifestsSelector, | ||
| ); | ||
| } | ||
|
|
||
| export default function useDisclaimerViewModel(goToApp: (manifestId: string) => void) { | ||
| const [isChecked, setIsChecked] = useState(false); | ||
| const [disclaimerOpened, setDisclaimerOpened] = useState(false); | ||
| const [disclaimerManifest, setDisclaimerManifest] = useState<AppManifest>(); | ||
| const [dismissedManifests, setWeb3HubDB] = useDismissedManifests(); | ||
|
|
||
| useEffect(() => { | ||
| if (disclaimerManifest && !!dismissedManifests[disclaimerManifest.id]) { | ||
| setIsChecked(true); | ||
| } else { | ||
| setIsChecked(false); | ||
| } | ||
| }, [disclaimerManifest, dismissedManifests]); | ||
|
|
||
| useEffect(() => { | ||
| setWeb3HubDB(INITIAL_WEB3HUB_STATE); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| const onPressItem = useCallback( | ||
| (manifest: AppManifest) => { | ||
| if (manifest.branch === "soon") { | ||
| return; | ||
| } | ||
|
|
||
| if (!dismissedManifests[manifest.id] && manifest.author !== "ledger") { | ||
| setDisclaimerManifest(manifest); | ||
| setDisclaimerOpened(true); | ||
| } else { | ||
| // TODO append recently used | ||
| goToApp(manifest.id); | ||
| } | ||
| }, | ||
| [dismissedManifests, goToApp], | ||
| ); | ||
|
|
||
| const toggleCheck = useCallback(() => { | ||
| setIsChecked(value => !value); | ||
| }, []); | ||
|
|
||
| const onConfirm = useCallback(() => { | ||
| if (disclaimerManifest) { | ||
| if (isChecked) { | ||
| setWeb3HubDB(state => ({ | ||
| ...state, | ||
| dismissedManifests: { | ||
| ...state.dismissedManifests, | ||
| [disclaimerManifest.id]: !state.dismissedManifests[disclaimerManifest.id], | ||
| }, | ||
| })); | ||
| } | ||
|
|
||
| goToApp(disclaimerManifest.id); | ||
| } | ||
| }, [disclaimerManifest, goToApp, isChecked, setWeb3HubDB]); | ||
|
|
||
| const onClose = useCallback(() => { | ||
| setDisclaimerOpened(false); | ||
| }, []); | ||
|
|
||
| return { | ||
| manifest: disclaimerManifest, | ||
| isOpened: disclaimerOpened, | ||
| isChecked, | ||
| toggleCheck, | ||
| onConfirm, | ||
| onClose, | ||
| onPressItem, | ||
| }; | ||
| } |
File renamed without changes.
24 changes: 24 additions & 0 deletions
24
apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestRow/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from "react"; | ||
| import { Flex, Text } from "@ledgerhq/native-ui"; | ||
| import { AppManifest } from "@ledgerhq/live-common/wallet-api/types"; | ||
| import AppIcon from "LLM/features/Web3Hub/components/AppIcon"; | ||
| import CurrencyIconList from "./CurrencyIconList"; | ||
|
|
||
| export default function ManifestRow({ manifest }: { manifest: AppManifest }) { | ||
| const isDisabled = manifest.branch === "soon"; | ||
|
|
||
| return ( | ||
| <> | ||
| <AppIcon isDisabled={isDisabled} size={48} name={manifest.name} icon={manifest.icon} /> | ||
| <Flex marginX={16} height="100%" flexGrow={1} flexShrink={1} justifyContent={"center"}> | ||
| <Flex flexDirection="row" alignItems={"center"} mb={2}> | ||
| <Text variant="large" numberOfLines={1} fontWeight="semiBold"> | ||
| {manifest.name} | ||
| </Text> | ||
| </Flex> | ||
| <CurrencyIconList currencies={manifest.currencies} /> | ||
| {/* TODO add badges on certain categories */} | ||
| </Flex> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.