Merge branch 'develop' into bugfix/sentry-exclusion-2

README.md

@@ -22,14 +22,20 @@ It communicates with the [Ledger Nano X](https://www.ledger.com/pages/ledger-nan
 
 - Node LTS version
 - Yarn 1.10.1 or above
+- [Full React Native environment setup instructions here, **under "React Native CLI Quickstart" tab**](https://reactnative.dev/docs/environment-setup)
 
 ### iOS
 
 - XCode
+- Ruby 2.6.8 or above. The macOS built-in Ruby [does not work properly for installing dependencies of the iOS app](https://jeffreymorgan.io/articles/ruby-on-macos-with-rvm/), you have to install Ruby with for instance [Homebrew](https://brew.sh/) or [rvm](https://rvm.io/rvm/install) and make sure that `which ruby` points to that newly installed Ruby.
 
 ### Android
 
 - Android Studio
+- JDK 11
+- Required SDK tools: (go to Android Studio > Tools > SDK Manager > SDK Tools > check "Show Package Details" at the bottom right)
+  - Android NDK 21.4.7075529 (in case this doc is outdated, check the version specified as `ndkVersion` in `android/build.gradle`)
+  - CMake 3.10.2
 
 ## Scripts
 

android/app/build.gradle

@@ -157,7 +157,7 @@ android {
         multiDexEnabled true
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36176144
+        versionCode 36176147
         versionName "3.0.8"
         resValue "string", "build_config_package", "com.ledger.live"
         testBuildType System.getProperty('testBuildType', 'debug')

docs/ONBOARDING_LINUX.md

@@ -0,0 +1,177 @@
+
+## Github
+
+### Creating / Linking an account
+
+In the Ledger Live development team, we use Github for hosting our software development and version control.
+You will therefore need a Github account.
+You have 2 possibilities :
+- Create a new Github account dedicated for Ledger using an account name that respects these constraints: All in lower case, First letter of your first name, your last name, dash, ledger. Ex: jdupont-ledger for Jean Dupont.
+  Then use this link to connect your newly created account to your Ledger's Google account : https://github.com/orgs/LedgerHQ/sso
+
+OR
+
+- Use your personal account, by connecting it to your Ledger's Google account : https://github.com/orgs/LedgerHQ/sso
+
+On [this page](https://github.com/settings/organizations), you can see that you have joined the Ledger Github organisation.
+
+### SSH and GPG keys
+
+- Generate and link SSH key to your Github account using this nice guide : https://jdblischak.github.io/2014-09-18-chicago/novice/git/05-sshkeys.html
+- On the same page where you added the newly created SSH key, on the information card of the key you should see a "Configure SSO" button. Click on the button and follow the process.
+- Generate and link a GPG key to your Github account and Git using this nice guide : https://gist.github.com/ankurk91/c4f0e23d76ef868b139f3c28bde057fc
+
+### Cloning
+Clone the following Ledger Live repositories :
+
+`git clone https://github.com/LedgerHQ/ledger-live-mobile.git`
+`git clone https://github.com/LedgerHQ/ledger-live-desktop.git`
+`git clone https://github.com/LedgerHQ/ledger-live-common.git`
+
+> Small tip : You probably have Sentinel One on your computer. It is an antivirus that constantly scans all your files on your computer to ensure its security. However, it is not adapted to a development environment and will slow down your node package installations or builds enormously and thus kill your productivity. Contact me on Slack to have a solution to mitigate this problem :)
+
+## Node.js
+
+You should install a Node version manager, because you will regularly need to switch between node versions with Live.
+Some recommand [NVM](https://github.com/nvm-sh/nvm#installing-and-updating), others recommand [N](https://github.com/tj/n#installation)
+
+You need to install [Yarn](https://classic.yarnpkg.com/en/), a node packet manager used by Live.
+`npm install --global yarn`
+
+To be able to use executable installed from yarn, you will need to modify pour $PATH variable ([more info](https://linuxize.com/post/how-to-add-directory-to-path-in-linux/)) :
+- Open your .bashrc with your favorite editor, ex: `nano ~/.bashrc`
+- Add this line to the end of it : `export PATH="$PATH:$(yarn global bin)"`
+
+## Code editor
+
+The code editor used by the majority of developers in the Ledger Live team is **Visual Studio Code**.
+You can install it using this guide : https://code.visualstudio.com/docs/setup/linux
+
+As an alternative, you can install [Webstorm](https://www.jetbrains.com/fr-fr/webstorm/) or [VSCodium](https://vscodium.com/#install).
+
+##  Ledger Live
+
+### Ubuntu/Debian requirements
+
+First, you need to install theses packages :
+
+- libudev and libusb to communicate with the devices on your system, in our case the Nano.
+-  ruby and ruby-dev to install Bundler.
+
+`sudo  apt-get  update  &&  sudo  apt-get  install  libudev-dev  libusb-1.0-0-dev ruby-dev ruby`
+
+Then you need to install [bundler](https://bundler.io/), that will be used to install gem packages
+
+`sudo  gem  install  bundler`
+
+#### Udev Rules
+
+You need to set up udev rules :
+
+Go see: [ledger support doc](https://support.ledger.com/hc/en-us/articles/115005165269?utm_source=ledger_live_desktop&utm_medium=self_referral&utm_content=error_cantopendevice&support=true)
+
+Or directly do: `wget -q -O - https://raw.githubusercontent.com/LedgerHQ/udev-rules/master/add_udev_rules.sh | sudo bash`
+
+#### Metro watcher limits
+
+Linux uses the inotify package to observe filesystem events, individual files or directories.
+
+Since React / Angular hot-reloads and recompiles files on save it needs to keep track of all project's files. Increasing the inotify watch limit should hide the warning messages.
+
+```
+# insert the new value into the system config
+echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+​
+# check that the new value was applied
+cat /proc/sys/fs/inotify/max_user_watches
+```
+
+### Ledger Live Mobile
+
+#### Android Studio
+
+The easiest way to setup your Android environment is to install Android Studio
+
+- Download Android Studio : https://developer.android.com/studio
+- Unzip and launch the executable located in bin/studio.sh
+- Tip: In the welcome window of Android Studio, in the bottom left corner, you can click on the "Add entry" little button to add a desktop entry to your Linux so you can easily open it again after.
+- Open the ledger-mobile repository folder.
+
+#### Android Studio SDK Manager
+
+We will install all the Android necessary dependencies to build Ledger Live Mobile as well as additional tools.
+
+In the top navigation bar, open the Tools->SDK Manager.
+In the *SDK Platforms* tab, be sure that at least one SDK is installed (Android 10 ? 11 ? As you wish).
+In the *SDK Tools* tab, be sure sure that these components are installed :
+- Android SDK Build-Tools
+- NDK
+- CMake
+- Android Emulator
+- Android SDK Platform-Tools
+
+#### Android Studio Emulator
+
+In this part, we will focus on the installation of the Android emulator, necessary for Android development without the use of a dedicated device.
+
+In the top navigation bar, open the Tools->Device Manager
+
+In the "Device Manager" section that just opened, click on the "Create device" button.
+
+I recommend that you take a phone that does not have a large screen or the latest version of Android, to be in line with most Ledger Live users.
+
+#### Linking it all together
+
+You need to modify your $PATH, like you have done with Yarn, so that your setup detects the SDK and the emulator :
+- Open your .bashrc with your favorite editor, ex: `nano ~/.bashrc`
+- Add theses lines to the end of it :
+```
+export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/tools
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+```
+- Reload your environment using this command: `source ~/.bashrc`​
+
+#### (Not mandatory) Set up your phone
+
+If you prefer to use your Android phone rather than the emulator, you need to enable USB debugging.
+To begin with, close any instance of the emulator you may have open.
+
+Please follow this guide to enable it : https://www.embarcadero.com/starthere/xe5/mobdevsetup/android/en/enabling_usb_debugging_on_an_android_device.html
+
+To verify that your phone is connected and recognized, you can launch this command :
+`adb devices -l`
+You should see a line at the bottom of "List of devices attached" containing the name of your phone.
+If you don't see anything, try to launch again the command or check again the guide above.
+If the command *adb* is not recognized, please verify that you have done every steps in the *Android Studio SDK Manager* (*adb* is contained in the *Android SDK Platform-Tools* module) and the *Linking it all together* chapters.
+
+#### Launch
+
+Launch these commands inside the ledger-live-mobile repository :
+
+- `yarn` to download the latest node packages
+- `yarn start` to start *Metro*, the bundler for React-native ([More Info](https://facebook.github.io/metro/))
+
+Since Metro is a watcher, open a new terminal and `yarn android` to build and install the development application to your device. It will launch the emulator if it's not started yet or if there is no physical device connected.
+
+After a few minutes, you should see Ledger Live Mobile start screen. Congrats ! 🎉
+
+### Ledger Live Desktop
+
+#### Launch
+
+Launch these commands inside the ledger-live-desktop repository :
+
+- `yarn` to download the latest node packages
+- `yarn start` to start the process
+
+After a few minutes, you should see Ledger Live Desktop start screen. Congrats !
+
+
+#### (Optional) Setup VSCode for debugging
+
+See [readme](https://github.com/LedgerHQ/ledger-live-desktop#debug) on Launch Configuration.
+
+
+
+*Thanks to Alexandre Magaud for being my test subject for this guide and for writing a good part of it and a huge amount of notes !*

package.json

@@ -76,7 +76,7 @@
     "@ledgerhq/hw-transport-http": "6.27.0",
     "@ledgerhq/live-common": "22.0.2",
     "@ledgerhq/logs": "6.10.0",
-    "@ledgerhq/native-ui": "^0.7.14",
+    "@ledgerhq/native-ui": "^0.7.16",
     "@ledgerhq/react-native-hid": "6.24.1",
     "@ledgerhq/react-native-hw-transport-ble": "6.25.1",
     "@ledgerhq/react-native-passcode-auth": "^2.1.0",
@@ -208,6 +208,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.30",
     "@types/react-native": "^0.65.21",
+    "@types/react-native-video": "^5.0.13",
     "@types/react-test-renderer": "^17.0.1",
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",

src/components/CameraScreen/QRCodeBottomLayer.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { StyleSheet } from "react-native";
 import { Trans } from "react-i18next";
 
-import { Flex, Text, ProgressBar, Alert } from "@ledgerhq/native-ui";
+import { Flex, Text, ProgressBar } from "@ledgerhq/native-ui";
 import { rgba } from "../../colors";
 
 import { softMenuBarHeight } from "../../logic/getWindowDimensions";
@@ -52,18 +52,6 @@ function QrCodeBottomLayer({ progress, liveQrCode, instruction }: Props) {
           </Flex>
         )}
         <Flex flex={1} />
-        {liveQrCode ? (
-          <Alert type="info">
-            <Flex>
-              <Text fontWeight="semiBold" variant="body">
-                <Trans i18nKey="account.import.scan.descTop.line1" />
-              </Text>
-              <Text fontWeight="bold" variant="body">
-                <Trans i18nKey="account.import.scan.descTop.line2" />
-              </Text>
-            </Flex>
-          </Alert>
-        ) : null}
       </Flex>
     </Flex>
   );

src/components/CameraScreen/QRCodeTopLayer.tsx

@@ -1,3 +1,26 @@
-const QRCodeTopLayer = () => null;
+import { Alert, Flex, Text } from "@ledgerhq/native-ui";
+import { Trans } from "react-i18next";
+import React from "react";
+
+type Props = {
+  liveQrCode?: boolean;
+};
+
+const QRCodeTopLayer = ({ liveQrCode }: Props) => (
+  <Flex flex={1} alignItems="center" py={8} px={6}>
+    {liveQrCode ? (
+      <Alert type="info">
+        <Flex>
+          <Text fontWeight="semiBold" variant="body">
+            <Trans i18nKey="account.import.scan.descTop.line1" />
+          </Text>
+          <Text fontWeight="bold" variant="body">
+            <Trans i18nKey="account.import.scan.descTop.line2" />
+          </Text>
+        </Flex>
+      </Alert>
+    ) : null}
+  </Flex>
+);
 
 export default QRCodeTopLayer;

src/components/CameraScreen/index.js

@@ -39,7 +39,7 @@ export default function CameraScreen({
           styles.topCell,
         ]}
       >
-        {typeof progress === "number" ? <QRCodeTopLayer /> : null}
+        <QRCodeTopLayer liveQrCode={liveQrCode} />
       </View>
       <QRCodeRectangleViewport viewFinderSize={viewFinderSize} />
       <QRCodeBottomLayer

src/components/DeviceAction/rendering.tsx

@@ -67,9 +67,19 @@ const TitleContainer = styled(Flex).attrs({
   py: 8,
 })``;
 
-const TitleText = ({ children }: { children: React.ReactNode }) => (
+const TitleText = ({
+  children,
+  disableUppercase,
+}: {
+  children: React.ReactNode;
+  disableUppercase?: boolean;
+}) => (
   <TitleContainer>
-    <Log>{children}</Log>
+    <Log
+      extraTextProps={disableUppercase ? { textTransform: "none" } : undefined}
+    >
+      {children}
+    </Log>
   </TitleContainer>
 );
 
@@ -187,7 +197,7 @@ export function renderVerifyAddress({
             onPress={onPress}
           />
         )}
-        {address && <TitleText>{address}</TitleText>}
+        {address && <TitleText disableUppercase>{address}</TitleText>}
       </ActionContainer>
     </Wrapper>
   );

src/components/SelectFeesStrategy.js

@@ -108,6 +108,7 @@ export default function SelectFeesStrategy({
       >
         <View style={styles.leftBox}>
           <CheckBox
+            onChange={() => onPressStrategySelect(item)}
             style={styles.checkbox}
             isChecked={feesStrategy === item.label}
           />

src/components/SettingsCard.tsx

@@ -37,7 +37,7 @@ function Card({
 
 const StyledCard = styled(Card)`
   background-color: ${p => p.theme.colors.palette.background.main};
-  padding: ${p => p.theme.space[7]}px 0;
+  padding: ${p => p.theme.space[7]}px ${p => p.theme.space[6]}px;
   flex-direction: row;
   align-items: center;
 `;

src/components/SettingsRow.tsx

@@ -10,7 +10,7 @@ import Touchable from "./Touchable";
 
 const StyledTouchableRow = styled(Touchable)<{ compact?: boolean }>`
   background-color: ${p => p.theme.colors.palette.background.main};
-  padding: ${p => p.theme.space[p.compact ? 6 : 7]}px 0;
+  padding: ${p => p.theme.space[p.compact ? 6 : 7]}px ${p => p.theme.space[6]}px;
   flex-direction: row;
   align-items: center;
   border-bottom-color: ${p => p.theme.colors.palette.neutral.c40};

src/components/theme/ForceTheme.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import StyleProvider from "../../StyleProvider";
+
+export default function ForceTheme({
+  children,
+  selectedPalette,
+}: {
+  children?: React.ReactNode;
+  selectedPalette: "light" | "dark";
+}): React.ReactElement {
+  return (
+    <StyleProvider selectedPalette={selectedPalette}>{children}</StyleProvider>
+  );
+}

src/components/InvertTheme.tsx → src/components/theme/InvertTheme.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { ThemeProvider, useTheme } from "styled-components/native";
 import { defaultTheme, palettes } from "@ledgerhq/native-ui/styles";
+import StyleProvider from "../../StyleProvider";
 
 export default function InvertTheme({
   children,
@@ -9,14 +10,8 @@ export default function InvertTheme({
 }): React.ReactElement {
   const { theme } = useTheme();
   const revertTheme = theme === "light" ? "dark" : "light";
-  const newTheme = useMemo(
-    () => ({
-      ...defaultTheme,
-      colors: { ...defaultTheme.colors, palette: palettes[revertTheme] },
-      theme: revertTheme,
-    }),
-    [revertTheme],
-  );
 
-  return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
+  return (
+    <StyleProvider selectedPalette={revertTheme}>{children}</StyleProvider>
+  );
 }

src/live-common-setup.js

@@ -57,6 +57,7 @@ setSupportedCurrencies([
   "stakenet",
   "bitcoin_testnet",
   "ethereum_ropsten",
+  "ethereum_goerli",
   "cosmos_testnet",
   "elrond",
 ]);