New modal to confirm language change + updated icons generation to su…

…pport RTL

apps/ledger-live-mobile/src/locales/en/common.json

@@ -82,7 +82,9 @@
     "moreInfo": "More info",
     "buyEth": "Buy Ethereum",
     "popular": "popular",
-    "comingSoon": "Coming soon"
+    "comingSoon": "Coming soon",
+    "restart": "Restart"
+
   },
   "errors": {
     "countervaluesUnavailable": {
@@ -1043,6 +1045,10 @@
         "title": "Get started in English",
         "cta": "Got it!",
         "desc": "We are introducing additional languages in order to help your onboarding with Ledger. Please be aware that the rest of the Ledger experience is currently only available in English."
+      },
+      "RestartModal": {
+        "title": "Restart required",
+        "paragraph": "The selected language requires the application to restart. Are you sure you want to continue?",
       }
     },
     "stepSelectDevice": {

apps/ledger-live-mobile/src/screens/Onboarding/steps/language.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { I18nManager, ScrollView, Alert } from "react-native";
 import { Trans } from "react-i18next";
 import {
@@ -7,6 +7,7 @@ import {
   IconBox,
   Icons,
   Text,
+  BottomDrawer,
 } from "@ledgerhq/native-ui";
 import { StackScreenProps } from "@react-navigation/stack";
 import { useDispatch } from "react-redux";
@@ -23,41 +24,35 @@ function OnboardingStepLanguage({ navigation }: StackScreenProps<{}>) {
   const { locale: currentLocale } = useLocale();
   const dispatch = useDispatch();
 
+  const [isOpened, setOpened] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const toggleModal = useCallback(() => setOpened(!isOpened), [isOpened]);
+  const closeModal = () => {
+    setOpened(false);
+  };
+
   const next = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
-  const changeLanguageRTL = useCallback(async l => {
-    await dispatch(setLanguage(l));
+  const changeLanguageRTL = useCallback(() => {
+    dispatch(setLanguage(selectedLanguage));
     I18nManager.forceRTL(!I18nManager.isRTL);
     RNRestart.Restart();
-  }, []);
+  }, [selectedLanguage, dispatch]);
 
   const changeLanguage = useCallback(
     async l => {
       const newDirection = i18next.dir(l);
       const currentDirection = I18nManager.isRTL ? "rtl" : "ltr";
-
       if (newDirection !== currentDirection) {
-        Alert.alert(
-          "Restart required",
-          "The selected language requires the application to restart. Are you sure you want to continue?",
-          [
-            {
-              text: "Cancel",
-              style: "cancel",
-            },
-            {
-              text: "OK",
-              onPress: () => changeLanguageRTL(l),
-            },
-          ],
-        );
+        setSelectedLanguage(l);
+        toggleModal();
       } else {
         dispatch(setLanguage(l));
+        next();
       }
-      // dispatch(setLanguage(l));
-      // next();
     },
     [dispatch, next],
   );
@@ -77,6 +72,36 @@ function OnboardingStepLanguage({ navigation }: StackScreenProps<{}>) {
             ))}
           </SelectableList>
         </Flex>
+        <BottomDrawer
+          id="ContractAddress"
+          isOpen={isOpened}
+          preventBackdropClick={false}
+          title={
+            <Trans i18nKey={"onboarding.stepLanguage.RestartModal.title"} />
+          }
+          onClose={closeModal}
+        >
+          <Text variant="body" mb={8} textAlign="center" color="neutral.c80">
+            <Trans i18nKey={"onboarding.stepLanguage.RestartModal.paragraph"} />
+          </Text>
+          <Flex flexDirection={"row"}>
+            <Button
+              event="ConfirmationModalCancel"
+              type="secondary"
+              flexGrow="1"
+              title={<Trans i18nKey="common.cancel" />}
+              onPress={closeModal}
+              marginRight={4}
+            />
+            <Button
+              event="ConfirmationModalConfirm"
+              type={"primary"}
+              flexGrow="1"
+              title={<Trans i18nKey="common.restart" />}
+              onPress={changeLanguageRTL}
+            />
+          </Flex>
+        </BottomDrawer>
       </ScrollView>
     </Flex>
   );

libs/ui/packages/icons/package.json

@@ -39,6 +39,7 @@
     "clean": "rimraf react native src/react src/native"
   },
   "peerDependencies": {
+    "react-native": "*",
     "styled-components": "*",
     "styled-system": "*",
     "@types/react": "*",
@@ -56,6 +57,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.14",
     "@types/styled-components-react-native": "^5.1.3",
+    "@types/react-native": "^0.65.21",
     "@types/styled-system": "^5.1.13",
     "camelcase": "^6.2.1",
     "esbuild": "^0.13.15",

libs/ui/packages/icons/scripts/buildReactIcons.js

@@ -47,6 +47,23 @@ export default styled(Svg).attrs((props:  SvgProps) => ({
 }))\`\`;
 `;
 
+const RTLIcon = `
+import styled from "styled-components/native";
+import { system } from "styled-system";
+import Svg, { SvgProps } from "react-native-svg";
+
+const fillSystem = system({
+  fill: {
+    property: "fill",
+    scale: "colors",
+  },
+});
+
+export default styled(Svg).attrs((props:  SvgProps) => ({
+  ...fillSystem(props),
+}))\`\`;
+`;
+
 // Component template
 function reactTemplate({ template }, _, { imports, interfaces, componentName, __, jsx, exports }) {
   const plugins = ["typescript"];
@@ -56,11 +73,11 @@ function reactTemplate({ template }, _, { imports, interfaces, componentName, __
     ${imports}
     import Svg from "./StyledSvg"
 
-    type Props = { size?: number | string; color?: string; };
+    type Props = { size?: number | string; color?: string; style?: object };
 
     ${interfaces}
 
-    function ${componentName} ({ size = 16, color = "currentColor" }: Props): JSX.Element {
+    function ${componentName} ({ size = 16, color = "currentColor", style }: Props): JSX.Element {
       return ${jsx};
     }
 
@@ -81,11 +98,39 @@ function reactNativeTemplate(
     ${imports}
     import Svg from "./StyledSvg";
 
-    type Props = { size?: number | string; color?: string; };
+    type Props = { size?: number | string; color?: string; style?: object };
+
+    ${interfaces}
+
+    function ${componentName} ({ size = 16, color = "neutral.c100", style }: Props): JSX.Element {
+      return ${jsx};
+    }
+
+    ${exports}
+  `;
+}
+
+function reactNativeRTLTemplate(
+  { template },
+  _,
+  { imports, interfaces, componentName, __, jsx, exports },
+) {
+  const plugins = ["typescript"];
+  const tpl = template.smart({ plugins });
+
+  return tpl.ast`
+    ${imports}
+    import Svg from "./StyledSvg";
+    import styled from "styled-components";
+    import { I18nManager } from "react-native";
+
+    type Props = { size?: number | string; color?: string; style?: object };
 
     ${interfaces}
 
-    function ${componentName} ({ size = 16, color = "neutral.c100" }: Props): JSX.Element {
+    const rtlStyle = I18nManager.isRTL ? {transform: [{scaleX: -1}]} : {};
+
+    function ${componentName} ({ size = 16, color = "neutral.c100", style = rtlStyle }: Props): JSX.Element {
       return ${jsx};
     }
 
@@ -125,13 +170,20 @@ glob(`${rootDir}/svg/**/*.svg`, (err, icons) => {
 
   // Extract the icon weight
   icons.forEach(icon => {
+    let RTLShouldMirror = icon.endsWith('-rtl.svg')
+    let iconPathCleaned = icon
+
+    if(RTLShouldMirror) {
+      iconPathCleaned = icon.slice(0, -8) + icon.substring(icon.length - 4, icon.length)
+    }
+
     const parts = icon.split("/");
     const weight = parts[parts.length - 2];
 
-    let name = camelcase([path.basename(icon, ".svg"), weight], {
+    let name = camelcase([path.basename(iconPathCleaned, ".svg"), weight], {
       pascalCase: true,
     });
-
+ 
     if (!isNaN(name.charAt(0))) name = `_${name}`; // fix variable name leading with a numerical value
 
     const exportString = `export { default as ${name} } from "./${name}";\n`;
@@ -148,6 +200,7 @@ glob(`${rootDir}/svg/**/*.svg`, (err, icons) => {
         height: "{size}",
         width: "{size}",
         fill: "{color}",
+        style: "{style}",
       },
       svgoConfig: {
         plugins: [{ removeXMLNS: true, removeViewBox: false }],
@@ -160,12 +213,22 @@ glob(`${rootDir}/svg/**/*.svg`, (err, icons) => {
       { componentName: name },
       `${reactDir}/${name}.tsx`,
     );
+
+    if(!RTLShouldMirror) {
+      convert(
+        svg,
+        { ...options, native: true, template: reactNativeTemplate },
+        { componentName: name },
+        `${nativeDir}/${name}.tsx`,
+      );
+    } else {
+      convert(
+        svg,
+        { ...options, native: true, template: reactNativeRTLTemplate },
+        { componentName: name },
+        `${nativeDir}/${name}.tsx`,
+      );
+    }
 
-    convert(
-      svg,
-      { ...options, native: true, template: reactNativeTemplate },
-      { componentName: name },
-      `${nativeDir}/${name}.tsx`,
-    );
   });
 });