Terms of use update popup

src/components/CheckTermOfUseUpdate.tsx

@@ -0,0 +1,78 @@
+import React, { ReactNode, useCallback, useMemo } from "react";
+import { Linking } from "react-native";
+import { BottomDrawer, Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
+import styled from "styled-components/native";
+
+import { useTermsAccept } from "../logic/terms";
+import { useLocale } from "../context/Locale";
+import Button from "./Button";
+import Alert from "./Alert";
+import { urls } from "../config/urls";
+
+const Description = styled(Text).attrs(() => ({
+  color: "neutral.c70",
+}))``;
+
+const Divider = styled(Flex).attrs(() => ({
+  my: 4,
+  height: 1,
+  backgroundColor: "neutral.c40",
+}))``;
+
+const Update = ({ children }: { children: ReactNode }) => (
+  <Flex flexDirection="row">
+    <Description mr={2}>{"•"}</Description>
+    <Description>{children}</Description>
+  </Flex>
+);
+
+const CheckTermOfUseUpdateModal = () => {
+  const { locale } = useLocale();
+  const [accepted, accept] = useTermsAccept();
+
+  const termsURL = useMemo(() => urls.terms[locale] || urls.terms.en, [locale]);
+
+  const handleLink = useCallback(() => {
+    Linking.openURL(termsURL);
+  }, [termsURL]);
+
+  return (
+    <BottomDrawer
+      id="TermOfUseUpdate"
+      title="Terms of use update"
+      isOpen={!accepted}
+      onClose={accept}
+    >
+      <Flex mb={6}>
+        <Description>
+          {`Hi! We've updated our Ledger Live Terms of Use with the aim to make them clearer and to reflect Ledger Live's newly available services and features. Key updates are focused on:`}
+        </Description>
+        <Flex my={4}>
+          <Update>
+            {"Clarifying what services are available and how they work"}
+          </Update>
+          <Update>{"Explaining how fees for Services work"}</Update>
+          <Update>
+            {
+              "Improving our notification process to make sure that you are properly informed of any new changes to our Terms of Use"
+            }
+          </Update>
+        </Flex>
+        <Description>
+          {`By clicking on "Continue" you agree that you have read and accept the Terms of Use below.`}
+        </Description>
+      </Flex>
+      <Alert type="help" noIcon>
+        <Link type="color" onPress={handleLink} Icon={Icons.ExternalLinkMedium}>
+          Terms of use
+        </Link>
+      </Alert>
+      <Divider />
+      <Button type="main" outline={false} onPress={accept}>
+        Continue
+      </Button>
+    </BottomDrawer>
+  );
+};
+
+export default CheckTermOfUseUpdateModal;

src/screens/Portfolio/index.js

@@ -27,7 +27,6 @@ import Header from "./Header";
 import extraStatusBarPadding from "../../logic/extraStatusBarPadding";
 import TrackScreen from "../../analytics/TrackScreen";
 import MigrateAccountsBanner from "../MigrateAccounts/Banner";
-import RequireTerms from "../../components/RequireTerms";
 import { useScrollToTop } from "../../navigation/utils";
 import { ScreenName } from "../../const";
 import { PortfolioHistoryList } from "./PortfolioHistory";
@@ -36,6 +35,7 @@ import FabActions from "../../components/FabActions";
 import LText from "../../components/LText";
 import FirmwareUpdateBanner from "../../components/FirmwareUpdateBanner";
 import CheckLanguageAvailability from "../../components/CheckLanguageAvailability";
+import CheckTermOfUseUpdate from "../../components/CheckTermOfUseUpdate";
 import { withDiscreetMode } from "../../context/DiscreetModeContext";
 
 export { default as PortfolioTabIcon } from "./TabIcon";
@@ -185,8 +185,8 @@ function PortfolioScreen({ navigation }: Props) {
           />
         ) : null}
 
-        <RequireTerms />
         <CheckLanguageAvailability />
+        <CheckTermOfUseUpdate />
 
         <TrackScreen category="Portfolio" accountsLength={accounts.length} />
 

src/screens/Portfolio/index.tsx

@@ -34,7 +34,6 @@ import Carousel from "../../components/Carousel";
 import Header from "./Header";
 import TrackScreen from "../../analytics/TrackScreen";
 import MigrateAccountsBanner from "../MigrateAccounts/Banner";
-import RequireTerms from "../../components/RequireTerms";
 import { NavigatorName, ScreenName } from "../../const";
 import FabActions from "../../components/FabActions";
 import FirmwareUpdateBanner from "../../components/FirmwareUpdateBanner";
@@ -44,6 +43,7 @@ import MarketSection from "./MarketSection";
 import AddAccountsModal from "../AddAccounts/AddAccountsModal";
 import { useProviders } from "../Swap/SwapEntry";
 import CheckLanguageAvailability from "../../components/CheckLanguageAvailability";
+import CheckTermOfUseUpdate from "../../components/CheckTermOfUseUpdate";
 
 export { default as PortfolioTabIcon } from "./TabIcon";
 
@@ -286,9 +286,8 @@ function PortfolioScreen({ navigation }: Props) {
     <>
       <FirmwareUpdateBanner />
       <ContentContainer>
-        <RequireTerms />
         <CheckLanguageAvailability />
-
+        <CheckTermOfUseUpdate />
         <TrackScreen
           category="Portfolio"
           accountsLength={accounts.length}