[#5825] add hardwallet auth method and connect screens

* add react-native-nfc-manager to detect NFC support * add "Choose auth method" screen https://www.figma.com/file/UfQjpWl1hmRchHIyY3Wvu2nW/Hardwallet-light-flows?node-id=259%3A29 * add "Hardwallet connect" screen https://www.figma.com/file/UfQjpWl1hmRchHIyY3Wvu2nW/Hardwallet-light-flows?node-id=258%3A594 Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>
2018-09-18 19:27:58 +03:00 · 2018-09-18 19:27:58 +03:00 · 60cb0eb36c
parent 18b71ee625
commit 60cb0eb36c
37 changed files with 458 additions and 39 deletions
--- a/.env
+++ b/.env
@ -15,3 +15,4 @@ INSTABUG_SURVEYS=1
 GROUP_CHATS_ENABLED=0
 CACHED_WEBVIEWS_ENABLED=1
 EXTENSIONS=1
+HARDWALLET_ENABLED=0
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -219,6 +219,7 @@ configurations.all {
 }

 dependencies {
+    compile project(':react-native-nfc-manager')
    implementation project(':react-native-background-timer')
    implementation project(':react-native-svg')
    implementation 'com.android.support:multidex:1.0.2'
--- a/android/app/src/main/java/im/status/ethereum/MainApplication.java
+++ b/android/app/src/main/java/im/status/ethereum/MainApplication.java
@ -4,6 +4,7 @@ import android.support.multidex.MultiDexApplication;
 import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage;
 import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.facebook.react.ReactApplication;
+import community.revteltech.nfc.NfcManagerPackage;
 import io.invertase.firebase.RNFirebasePackage;
 import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
 import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
@ -57,6 +58,7 @@ public class MainApplication extends MultiDexApplication implements ReactApplica
            Function<String, String> callRPC = statusPackage.getCallRPC();
            List<ReactPackage> packages = new ArrayList<ReactPackage>(Arrays.asList(
                    new MainReactPackage(),
+                    new NfcManagerPackage(),
                    new RNFirebasePackage(),
                    new RNFirebaseMessagingPackage(),
                    new RNFirebaseNotificationsPackage(),
--- a/android/settings.gradle
+++ b/android/settings.gradle
@ -1,4 +1,6 @@
 rootProject.name = 'StatusIm'
+include ':react-native-nfc-manager'
+project(':react-native-nfc-manager').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nfc-manager/android')
 include ':react-native-firebase'
 project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
 include ':react-native-securerandom'
--- a/clj-rn.conf.edn
+++ b/clj-rn.conf.edn
@ -38,6 +38,7 @@
              "react-native-background-timer"
              "react-native-fetch-polyfill"
              "react-native-testfairy"
+              "react-native-nfc-manager"
              "text-encoding"
              "js-sha3"
              "react-navigation"]
--- a/ios/Podfile
+++ b/ios/Podfile
@ -21,6 +21,8 @@ target 'StatusIm' do
  pod 'RNKeychain', :path => '../node_modules/react-native-keychain'
  pod 'react-native-camera', path: '../node_modules/react-native-camera'

+  pod 'react-native-nfc-manager', :path => '../node_modules/react-native-nfc-manager'
+
  target 'StatusImTests' do
    inherit! :search_paths
    # Pods for testing
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -66,6 +66,8 @@ PODS:
    - React
  - react-native-camera/RN (1.1.5):
    - React
+  - react-native-nfc-manager (0.5.5):
+    - React
  - React/Core (0.56.0):
    - yoga (= 0.56.0.React)
  - RNKeychain (3.0.0):
@ -78,6 +80,7 @@ DEPENDENCIES:
  - React (from `../node_modules/react-native`)
  - react-native-background-timer (from `../node_modules/react-native-background-timer`)
  - react-native-camera (from `../node_modules/react-native-camera`)
+  - react-native-nfc-manager (from `../node_modules/react-native-nfc-manager`)
  - RNKeychain (from `../node_modules/react-native-keychain`)
  - yoga (from `../node_modules/react-native/ReactCommon/yoga`)

@ -100,6 +103,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-background-timer"
  react-native-camera:
    :path: "../node_modules/react-native-camera"
+  react-native-nfc-manager:
+    :path: "../node_modules/react-native-nfc-manager"
  RNKeychain:
    :path: "../node_modules/react-native-keychain"
  yoga:
@ -118,9 +123,10 @@ SPEC CHECKSUMS:
  React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
  react-native-background-timer: bb7a98c8e97fc7c290de2d423dd09ddb73dcbcbb
  react-native-camera: 68ad5143d2d0636236d46c7de8d2a6455ca52a36
+  react-native-nfc-manager: a74ef58b29f0015ae9e70f120645b796668ba5c2
  RNKeychain: 627c6095cef215dd3d9804a9a9cf45ab96aa3997
  yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85

-PODFILE CHECKSUM: 7636f960a0dbec2dd55b8b20e244befa3fdb4438
+PODFILE CHECKSUM: b24b9e1dd90a715fd354083342dceb8f1a2f6d75

 COCOAPODS: 1.5.2
--- a/mobile_files/package-lock.json
+++ b/mobile_files/package-lock.json
@ -6641,6 +6641,11 @@
        "levelup": "0.18.6"
      }
    },
+    "react-native-nfc-manager": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/react-native-nfc-manager/-/react-native-nfc-manager-0.5.5.tgz",
+      "integrity": "sha512-4gFuyDnNWXe81R7tTbc1AFlrz1LfBHp/S7daWL7gEsBFdeRegDmopecUJER511UR5d5Ymttw37LzTZUbnNKTlQ=="
+    },
    "react-native-os": {
      "version": "git+https://github.com/status-im/react-native-os.git#1a6d0835f919cb075793ad7c602f2724eee4702d"
    },
--- a/mobile_files/package.json
+++ b/mobile_files/package.json
@ -49,6 +49,7 @@
    "react-native-invertible-scroll-view": "1.1.0",
    "react-native-keychain": "3.0.0",
    "react-native-level-fs": "3.0.1",
+    "react-native-nfc-manager": "^0.5.5",
    "react-native-os": "https://github.com/status-im/react-native-os.git#1.1.0-1",
    "react-native-qrcode": "0.2.7",
    "react-native-randombytes": "3.5.0",
--- a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs
+++ b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs
@ -13,6 +13,7 @@
 (def fetch                  (.-default (js/require "react-native-fetch-polyfill")))
 (def i18n                   (js/require "react-native-i18n"))
 (def react-native-firebase  #js {})
+(def nfc-manager            #js {})
 (def camera                 #js {:default #js {:constants {:Aspect "Portrait"}}})
 (def dialogs                #js {})
 (def dismiss-keyboard       #js {})
--- a/react-native/src/mobile/status_im/react_native/js_dependencies.cljs
+++ b/react-native/src/mobile/status_im/react_native/js_dependencies.cljs
@ -20,6 +20,7 @@
 (def instabug               (js/require "instabug-reactnative"))
 (def svg                    (js/require "react-native-svg"))
 (def react-native-firebase  (js/require "react-native-firebase"))
+(def nfc-manager            (js/require "react-native-nfc-manager"))
 (def snoopy                 (js/require "rn-snoopy"))
 (def snoopy-filter          (js/require "rn-snoopy/stream/filter"))
 (def snoopy-bars            (js/require "rn-snoopy/stream/bars"))
--- a/resources/icons/hardwallet.svg
+++ b/resources/icons/hardwallet.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6H20C20.5523 6 21 6.44772 21 7V17C21 17.5523 20.5523 18 20 18H4C3.44769 18 3 17.5523 3 17V7C3 6.44772 3.44769 6 4 6ZM1 7C1 5.34314 2.34314 4 4 4H20C21.6569 4 23 5.34314 23 7V17C23 18.6569 21.6569 20 20 20H4C2.34314 20 1 18.6569 1 17V7ZM6 10C5.44769 10 5 10.4477 5 11V13C5 13.5523 5.44769 14 6 14H8C8.55231 14 9 13.5523 9 13V11C9 10.4477 8.55231 10 8 10H6Z" fill="#4360DF"/>
+</svg>
--- a/resources/icons/nfc.svg
+++ b/resources/icons/nfc.svg
@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35 18C35 27.3889 27.3888 35 18 35C8.61121 35 1 27.3889 1 18C1 8.61115 8.61121 1 18 1C27.3888 1 35 8.61115 35 18ZM36 18C36 27.9411 27.9412 36 18 36C8.05884 36 0 27.9411 0 18C0 8.0589 8.05884 0 18 0C27.9412 0 36 8.0589 36 18ZM29.3284 14.4471C27.7992 12.9387 26.016 11.7706 24.0283 10.9755C22.1088 10.2076 20.0804 9.81824 18 9.81824C15.9194 9.81824 13.8911 10.2076 11.9716 10.9755C9.98389 11.7706 8.20081 12.9387 6.67151 14.4471C6.50342 14.613 6.50342 14.882 6.67151 15.0479C6.83972 15.2138 7.1123 15.2138 7.28052 15.0479C10.1438 12.2234 13.9507 10.6678 18 10.6678C22.0493 10.6678 25.8562 12.2234 28.7195 15.0479C28.7462 15.0742 28.7755 15.0964 28.8066 15.1144C28.832 15.1291 28.8586 15.141 28.886 15.1501C28.9307 15.1649 28.9773 15.1723 29.0239 15.1723C29.0691 15.1723 29.1141 15.1653 29.1575 15.1514C29.22 15.1314 29.2787 15.0969 29.3284 15.0479C29.4966 14.882 29.4966 14.613 29.3284 14.4471ZM18.0001 19.0457C16.2194 19.0457 14.5453 19.7298 13.286 20.9719C13.1179 21.1378 13.1179 21.4068 13.286 21.5726C13.2943 21.5808 13.3029 21.5886 13.3116 21.596C13.3176 21.6011 13.3237 21.6059 13.33 21.6105C13.3588 21.6322 13.3896 21.6498 13.4219 21.6633C13.4408 21.6712 13.4601 21.6777 13.4797 21.6829C13.5161 21.6923 13.5533 21.6971 13.5906 21.6971C13.7007 21.6971 13.8109 21.6556 13.895 21.5726C14.9915 20.491 16.4493 19.8953 18.0001 19.8953C19.5508 19.8953 21.0087 20.4909 22.1051 21.5726C22.2733 21.7385 22.5459 21.7385 22.7141 21.5726C22.8823 21.4067 22.8823 21.1377 22.7141 20.9718C21.4551 19.7297 19.7809 19.0457 18.0001 19.0457ZM9.97876 17.7094C12.1213 15.5959 14.9701 14.4319 18.0001 14.4319C21.03 14.4319 23.8788 15.5959 26.0214 17.7094C26.1895 17.8754 26.1895 18.1443 26.0214 18.3102C25.9373 18.3931 25.827 18.4346 25.7169 18.4346C25.6067 18.4346 25.4965 18.3932 25.4124 18.3102C23.4325 16.3571 20.8 15.2815 18.0001 15.2815C15.2001 15.2815 12.5677 16.3571 10.5878 18.3102C10.4196 18.4761 10.147 18.4761 9.97876 18.3102C9.81067 18.1443 9.81067 17.8753 9.97876 17.7094ZM18.0001 23.6769C17.3 23.6769 16.7305 24.2388 16.7305 24.9293C16.7305 25.62 17.3 26.1818 18.0001 26.1818C18.7002 26.1818 19.2698 25.6199 19.2698 24.9293C19.2698 24.2388 18.7002 23.6769 18.0001 23.6769ZM18.0001 25.3322C17.7749 25.3322 17.5917 25.1515 17.5917 24.9293C17.5917 24.7072 17.7749 24.5265 18.0001 24.5265C18.2252 24.5265 18.4084 24.7072 18.4084 24.9293C18.4084 25.1515 18.2252 25.3322 18.0001 25.3322Z" fill="#939BA1"/>
+</svg>
--- a/resources/icons/password.svg
+++ b/resources/icons/password.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V9.58582L7.41418 6C7.02368 5.6095 6.3905 5.6095 6 6C5.60944 6.39053 5.60944 7.02371 6 7.41422L9.58575 11H4C3.44769 11 3 11.4477 3 12C3 12.5523 3.44769 13 4 13H9.58582L6 16.5858C5.6095 16.9763 5.6095 17.6095 6 18C6.39056 18.3905 7.02368 18.3905 7.41425 18L11 14.4142V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V14.4142L16.5858 18C16.9763 18.3905 17.6094 18.3905 18 18C18.3905 17.6095 18.3905 16.9763 18 16.5858L14.4142 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H14.4142L18 7.41418C18.3906 7.02368 18.3906 6.3905 18 5.99997C17.6095 5.60947 16.9763 5.60947 16.5858 5.99997L13 9.58578V4Z" fill="#4360DF"/>
+</svg>
--- a/resources/icons/wifi.svg
+++ b/resources/icons/wifi.svg
@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5871 16.0524C30.888 14.3763 28.9067 13.0785 26.6982 12.195C24.5653 11.3417 22.3117 10.9091 20 10.9091C17.6882 10.9091 15.4346 11.3417 13.3017 12.195C11.0933 13.0785 9.11198 14.3763 7.41284 16.0524C7.22599 16.2367 7.22599 16.5355 7.41284 16.7199C7.59973 16.9042 7.9026 16.9042 8.08954 16.7199C11.2709 13.5815 15.5008 11.8531 20 11.8531C24.4992 11.8531 28.7291 13.5815 31.9105 16.7199C32.004 16.812 32.1264 16.8581 32.2488 16.8581C32.3713 16.8581 32.4937 16.812 32.5872 16.7199C32.774 16.5355 32.774 16.2367 32.5871 16.0524Z" fill="#939BA1"/>
+<path d="M20.0001 21.1619C18.0215 21.1619 16.1613 21.922 14.7622 23.3021C14.5754 23.4865 14.5754 23.7853 14.7622 23.9696C14.8556 24.0618 14.9781 24.1079 15.1005 24.1079C15.223 24.1079 15.3454 24.0618 15.4389 23.9696C16.6572 22.7678 18.277 22.1059 20.0001 22.1059C21.7231 22.1059 23.3429 22.7677 24.5612 23.9695C24.7481 24.1539 25.051 24.1539 25.2379 23.9695C25.4247 23.7852 25.4247 23.4864 25.2379 23.302C23.8389 21.922 21.9787 21.1619 20.0001 21.1619Z" fill="#939BA1"/>
+<path d="M20.0001 16.0355C16.6334 16.0355 13.4681 17.3288 11.0875 19.6772C10.9007 19.8615 10.9007 20.1604 11.0875 20.3447C11.2744 20.529 11.5773 20.5291 11.7642 20.3447C13.9641 18.1746 16.889 16.9795 20.0001 16.9795C23.1112 16.9795 26.036 18.1746 28.236 20.3447C28.3294 20.4369 28.4518 20.483 28.5743 20.483C28.6967 20.483 28.8192 20.4369 28.9126 20.3447C29.0994 20.1604 29.0994 19.8615 28.9126 19.6772C26.5319 17.3288 23.3667 16.0355 20.0001 16.0355Z" fill="#939BA1"/>
+<path d="M20 26.3077C19.2222 26.3077 18.5894 26.932 18.5894 27.6993C18.5894 28.4667 19.2222 29.0909 20 29.0909C20.7779 29.0909 21.4107 28.4666 21.4107 27.6993C21.4107 26.932 20.7779 26.3077 20 26.3077ZM20 28.1469C19.7498 28.1469 19.5463 27.9461 19.5463 27.6993C19.5463 27.4525 19.7498 27.2517 20 27.2517C20.2502 27.2517 20.4538 27.4525 20.4538 27.6993C20.4538 27.9462 20.2502 28.1469 20 28.1469Z" fill="#939BA1"/>
+<circle cx="20" cy="20" r="19.5" stroke="#939BA1"/>
+</svg>
--- a/resources/images/ui/hardwallet-card.png
+++ b/resources/images/ui/hardwallet-card.png
--- a/resources/images/ui/phone-nfc.png
+++ b/resources/images/ui/phone-nfc.png
--- a/src/status_im/accounts/create/core.cljs
+++ b/src/status_im/accounts/create/core.cljs
@ -7,6 +7,7 @@
            [status-im.constants :as constants]
            [status-im.data-store.accounts :as accounts-store]
            [status-im.i18n :as i18n]
+            [status-im.hardwallet.core :as hardwallet]
            [status-im.native-module.core :as status]
            [status-im.ui.screens.navigation :as navigation]
            [status-im.utils.config :as config]
@ -98,6 +99,11 @@
    :enter-password (navigation/navigate-back cofx)
    :confirm-password (reset-account-creation cofx)))

+(defn navigate-to-authentication-method [{:keys [db] :as cofx}]
+  (if (hardwallet/hardwallet-supported? db)
+    (navigation/navigate-to-cofx :hardwallet/authentication-method nil cofx)
+    (navigation/navigate-to-cofx :create-account nil cofx)))
+
 ;;;; COFX

 (re-frame/reg-cofx
--- a/src/status_im/events.cljs
+++ b/src/status_im/events.cljs
@ -11,6 +11,7 @@
            [status-im.bootnodes.core :as bootnodes]
            [status-im.data-store.core :as data-store]
            [status-im.fleet.core :as fleet]
+            [status-im.hardwallet.core :as hardwallet]
            [status-im.i18n :as i18n]
            [status-im.init.core :as init]
            [status-im.log-level.core :as log-level]
@ -141,6 +142,11 @@
 (fn [cofx [_ result password]]
   (accounts.create/on-account-created result password false cofx)))

+(handlers/register-handler-fx
+ :accounts.create.ui/create-new-account-button-pressed
+ (fn [cofx _]
+   (accounts.create/navigate-to-authentication-method cofx)))
+
 ;; accounts recover module

 (handlers/register-handler-fx
@ -486,3 +492,25 @@
 :notifications.callback/request-notifications-permissions-denied
 (fn [cofx _]
   (accounts/show-mainnet-is-default-alert cofx)))
+
+;; hardwallet module
+
+(handlers/register-handler-fx
+ :hardwallet.callback/check-nfc-support-success
+ (fn [cofx [_ supported?]]
+   (hardwallet/set-nfc-support supported? cofx)))
+
+(handlers/register-handler-fx
+ :hardwallet.callback/check-nfc-enabled-success
+ (fn [cofx [_ enabled?]]
+   (hardwallet/set-nfc-enabled enabled? cofx)))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/status-hardwallet-option-pressed
+ (fn [cofx _]
+   (hardwallet/navigate-to-connect-screen cofx)))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/go-to-settings-button-pressed
+ (fn [_ _]
+   {:hardwallet/open-nfc-settings nil}))
--- a/src/status_im/hardwallet/core.cljs
+++ b/src/status_im/hardwallet/core.cljs
@ -0,0 +1,61 @@
+(ns status-im.hardwallet.core
+  (:require-macros [status-im.utils.handlers-macro :as handlers-macro])
+  (:require [status-im.utils.platform :as platform]
+            [status-im.utils.config :as config]
+            [status-im.react-native.js-dependencies :as js-dependencies]
+            [re-frame.core :as re-frame]
+            [status-im.ui.screens.navigation :as navigation]))
+
+(defn check-nfc-support []
+  (when config/hardwallet-enabled?
+    (.. js-dependencies/nfc-manager
+        -default
+        isSupported
+        (then #(re-frame/dispatch [:hardwallet.callback/check-nfc-support-success %])))))
+
+(defn check-nfc-enabled []
+  (when platform/android?
+    (.. js-dependencies/nfc-manager
+        -default
+        isEnabled
+        (then #(re-frame/dispatch [:hardwallet.callback/check-nfc-enabled-success %])))))
+
+(defn set-nfc-support [supported? {:keys [db]}]
+  {:db (assoc-in db [:hardwallet :nfc-supported?] supported?)})
+
+(defn set-nfc-enabled [enabled? {:keys [db]}]
+  {:db (assoc-in db [:hardwallet :nfc-enabled?] enabled?)})
+
+(defn open-nfc-settings []
+  (when platform/android?
+    (.. js-dependencies/nfc-manager
+        -default
+        goToNfcSetting)))
+
+(defn navigate-to-connect-screen [cofx]
+  (handlers-macro/merge-fx
+   cofx
+   {:hardwallet/check-nfc-enabled nil}
+   (navigation/navigate-to-cofx :hardwallet/connect nil)))
+
+(defn hardwallet-supported? [db]
+  (and config/hardwallet-enabled?
+       platform/android?
+       (get-in db [:hardwallet :nfc-supported?])))
+
+(defn return-back-from-nfc-settings [app-coming-from-background? {:keys [db]}]
+  (when (and app-coming-from-background?
+             (= :hardwallet/connect (:view-id db)))
+    {:hardwallet/check-nfc-enabled nil}))
+
+(re-frame/reg-fx
+ :hardwallet/check-nfc-support
+ check-nfc-support)
+
+(re-frame/reg-fx
+ :hardwallet/check-nfc-enabled
+ check-nfc-enabled)
+
+(re-frame/reg-fx
+ :hardwallet/open-nfc-settings
+ open-nfc-settings)
--- a/src/status_im/init/core.cljs
+++ b/src/status_im/init/core.cljs
@ -85,7 +85,9 @@
                            :init/testfairy-alert                           nil
                            :notifications/handle-initial-push-notification nil
                            :network/listen-to-network-status               nil
-                            :network/listen-to-connection-status            nil}
+                            :network/listen-to-connection-status            nil
+                            :hardwallet/check-nfc-support                   nil
+                            :hardwallet/check-nfc-enabled                   nil}
                           (initialize-app-db)
                           (node/start)))

--- a/src/status_im/react_native/resources.cljs
+++ b/src/status_im/react_native/resources.cljs
@ -59,4 +59,6 @@
                     :width  993
                     :height 933}
   :wallet-welcome  (js/require "./resources/images/ui/wallet-welcome.png")
-   :wallet-setup    (js/require "./resources/images/ui/wallet-setup.png")})
+   :wallet-setup    (js/require "./resources/images/ui/wallet-setup.png")
+   :hardwallet-card (js/require "./resources/images/ui/hardwallet-card.png")
+   :phone-nfc       (js/require "./resources/images/ui/phone-nfc.png")})
--- a/src/status_im/ui/components/colors.cljs
+++ b/src/status_im/ui/components/colors.cljs
@ -18,6 +18,7 @@
 (def gray-border "#ececf0")
 (def blue "#4360df") ;; Used as main wallet color, and ios home add button
 (def blue-transparent "rgba(67, 96, 223, 0.2)")
+(def blue-transparent-10 "rgba(67, 96, 223, 0.1)")
 (def blue-transparent-40 "rgba(67, 96, 223, 0.4)")
 (def blue-darker "#c4cced")
 (def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background)
--- a/src/status_im/ui/components/icons/vector_icons.cljs
+++ b/src/status_im/ui/components/icons/vector_icons.cljs
@ -92,7 +92,10 @@
     :icons/check               (js/require "./resources/icons/check.svg")
     :icons/dots                (js/require "./resources/icons/dots.svg")
     :icons/warning             (js/require "./resources/icons/warning.svg")
-     :icons/info                (js/require "./resources/icons/info.svg")}
+     :icons/info                (js/require "./resources/icons/info.svg")
+     :icons/hardwallet          (js/require "./resources/icons/hardwallet.svg")
+     :icons/password            (js/require "./resources/icons/password.svg")
+     :icons/nfc                 (js/require "./resources/icons/nfc.svg")}
    {:icons/discover            (components.svg/slurp-svg "./resources/icons/bottom/discover_gray.svg")
     :icons/contacts            (components.svg/slurp-svg "./resources/icons/bottom/contacts_gray.svg")
     :icons/home                (components.svg/slurp-svg "./resources/icons/bottom/home_gray.svg")
@ -157,8 +160,11 @@
     :icons/check               (components.svg/slurp-svg "./resources/icons/check.svg")
     :icons/dots                (components.svg/slurp-svg "./resources/icons/dots.svg")
     :icons/warning             (components.svg/slurp-svg "./resources/icons/warning.svg")
+     :icons/settings            (components.svg/slurp-svg "./resources/icons/settings.svg")
     :icons/info                (components.svg/slurp-svg "./resources/icons/info.svg")
-     :icons/settings            (components.svg/slurp-svg "./resources/icons/settings.svg")}))
+     :icons/hardwallet          (components.svg/slurp-svg "./resources/icons/hardwallet.svg")
+     :icons/password            (components.svg/slurp-svg "./resources/icons/password.svg")
+     :icons/nfc                 (components.svg/slurp-svg "./resources/icons/nfc.svg")}))

 (defn normalize-property-name [n]
  (if (= n :icons/options)
--- a/src/status_im/ui/screens/accounts/views.cljs
+++ b/src/status_im/ui/screens/accounts/views.cljs
@ -42,7 +42,7 @@
                        :render-fn (fn [account] [account-view account])
                        :separator [react/view {:height 12}]}]]
      [react/view
-       [components.common/button {:on-press #(re-frame/dispatch [:navigate-to :create-account])
+       [components.common/button {:on-press #(re-frame/dispatch [:accounts.create.ui/create-new-account-button-pressed])
                                  :label    (i18n/label :t/create-new-account)}]
       [react/view styles/bottom-button-container
        [components.common/button {:on-press    #(re-frame/dispatch [:navigate-to :recover])
--- a/src/status_im/ui/screens/db.cljs
+++ b/src/status_im/ui/screens/db.cljs
@ -58,7 +58,9 @@
             :desktop/desktop                    {:tab-view-id :home}
             :dimensions/window                  (dimensions/window)
             :push-notifications/stored          {}
-             :registry                           {}})
+             :registry                           {}
+             :hardwallet                         {:nfc-supported? false
+                                                  :nfc-enabled?   false}})

 ;;;;GLOBAL

@ -173,6 +175,8 @@

 (spec/def ::semaphores set?)

+(spec/def ::hardwallet map?)
+
 (spec/def ::db (allowed-keys
                :opt
                [:contacts/contacts
@ -248,6 +252,7 @@
                 ::chain
                 ::app-state
                 ::semaphores
+                 ::hardwallet
                 :navigation/view-id
                 :navigation/navigation-stack
                 :navigation/prev-tab-view-id
--- a/src/status_im/ui/screens/events.cljs
+++ b/src/status_im/ui/screens/events.cljs
@ -38,7 +38,8 @@
            [status-im.utils.handlers :as handlers]
            [status-im.utils.handlers-macro :as handlers-macro]
            [status-im.utils.http :as http]
-            [status-im.utils.utils :as utils]))
+            [status-im.utils.utils :as utils]
+            [status-im.hardwallet.core :as hardwallet]))

 (defn- http-get [{:keys [url response-validator success-event-creator failure-event-creator timeout-ms]}]
  (let [on-success #(re-frame/dispatch (success-event-creator %))
@ -114,7 +115,8 @@
    (handlers-macro/merge-fx cofx
                             {::app-state-change-fx state
                              :db                   (assoc db :app-state state)}
-                             (inbox/request-messages app-coming-from-background?))))
+                             (inbox/request-messages app-coming-from-background?)
+                             (hardwallet/return-back-from-nfc-settings app-coming-from-background?))))

 (handlers/register-handler-fx
 :app-state-change
--- a/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs
+++ b/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs
@ -0,0 +1,47 @@
+(ns status-im.ui.screens.hardwallet.authentication-method.styles
+  (:require [status-im.ui.components.colors :as colors]))
+
+(def container
+  {:flex             1
+   :background-color colors/white})
+
+(def choose-authentication-method
+  {:flex-direction  :column
+   :flex            1
+   :align-items     :center
+   :justify-content :center})
+
+(def choose-authentication-method-text
+  {:color              colors/black
+   :padding-horizontal 60
+   :text-align         :center
+   :font-weight        :bold
+   :font-size          22})
+
+(def choose-authentication-method-row-text
+  {:color      colors/blue
+   :text-align :center
+   :font-size  17})
+
+(def authentication-methods
+  {:padding-vertical 24})
+
+(def authentication-method-row
+  {:padding-horizontal 16
+   :flex-direction     :row
+   :align-items        :center
+   :height             63})
+
+(def authentication-method-row-icon-container
+  {:background-color colors/blue-transparent-10
+   :width            40
+   :height           40
+   :border-radius    50
+   :align-items      :center
+   :justify-content  :center})
+
+(def authentication-method-row-wrapper
+  {:flex               1
+   :flex-direction     :row
+   :padding-horizontal 16
+   :justify-content    :space-between})
--- a/src/status_im/ui/screens/hardwallet/authentication_method/views.cljs
+++ b/src/status_im/ui/screens/hardwallet/authentication_method/views.cljs
@ -0,0 +1,42 @@
+(ns status-im.ui.screens.hardwallet.authentication-method.views
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.screens.hardwallet.authentication-method.styles :as styles]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.common.common :as common]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]))
+
+(defn authentication-method-row [{:keys [title on-press icon]}]
+  [react/touchable-highlight {:on-press on-press}
+   [react/view styles/authentication-method-row
+    [react/view styles/authentication-method-row-icon-container
+     [vector-icons/icon icon {:color colors/blue}]]
+    [react/view styles/authentication-method-row-wrapper
+     [react/text {:style           styles/choose-authentication-method-row-text
+                  :number-of-lines 1}
+      title]]
+    [vector-icons/icon :icons/forward {:color colors/gray}]]])
+
+(defn hardwallet-authentication-method []
+  [react/view styles/container
+   [status-bar/status-bar]
+   [react/view components.styles/flex
+    [toolbar/toolbar {}
+     toolbar/default-nav-back
+     nil]
+    [common/separator]
+    [react/view styles/choose-authentication-method
+     [react/text {:style           styles/choose-authentication-method-text
+                  :number-of-lines 3}
+      (i18n/label :t/choose-authentication-method)]]
+    [react/view styles/authentication-methods
+     [authentication-method-row {:title    (i18n/label :t/status-hardwallet-capitalized)
+                                 :icon     :icons/hardwallet
+                                 :on-press #(re-frame/dispatch [:hardwallet.ui/status-hardwallet-option-pressed])}]
+     [authentication-method-row {:title    (i18n/label :t/password)
+                                 :icon     :icons/password
+                                 :on-press #(re-frame/dispatch [:navigate-to :create-account])}]]]])
--- a/src/status_im/ui/screens/hardwallet/connect/styles.cljs
+++ b/src/status_im/ui/screens/hardwallet/connect/styles.cljs
@ -0,0 +1,94 @@
+(ns status-im.ui.screens.hardwallet.connect.styles
+  (:require [status-im.ui.components.colors :as colors]))
+
+(def container
+  {:flex             1
+   :background-color colors/white})
+
+(def hardwallet-connect
+  {:flex-direction  :column
+   :flex            1
+   :align-items     :center
+   :justify-content :space-between})
+
+(def hardwallet-card-image-container
+  {:margin-top 120})
+
+(def hardwallet-card-image
+  {:width  255
+   :height 160})
+
+(def hardwallet-card-image-small
+  {:width        44
+   :height       28
+   :margin-right 20})
+
+(def status-hardwallet-text-container
+  {:margin-top 30})
+
+(def status-hardwallet-text
+  {:font-size   22
+   :font-weight :bold
+   :color       colors/black
+   :text-align  :center})
+
+(def link-card-text
+  {:text-align         :center
+   :font-size          15
+   :color              colors/gray
+   :padding-horizontal 80
+   :padding-vertical   10})
+
+(def bottom-action-container
+  {:background-color colors/gray-lighter
+   :width            369
+   :height           80
+   :border-radius    10
+   :margin-bottom    20})
+
+(def nfc-enabled-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center})
+
+(def phone-nfc-image
+  {:width       54
+   :height      72
+   :margin-left 20
+   :margin-top  8
+   :align-items :baseline})
+
+(def hold-card-text
+  {:width          186
+   :text-align     :center
+   :font-size      14
+   :color          colors/blue
+   :line-height    20
+   :text-transform :uppercase
+   :margin-right   40})
+
+(def nfc-disabled-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center})
+
+(def nfc-icon
+  {:margin-left 52
+   :margin-top  22})
+
+(def nfc-disabled-actions-container
+  {:flex-direction  :column
+   :align-items     :center
+   :justify-content :space-between
+   :margin-right    100
+   :margin-top      20})
+
+(def turn-nfc-text
+  {:text-transform :uppercase
+   :line-height    20
+   :letter-spacing 0.5
+   :color          colors/gray})
+
+(def go-to-settings-text
+  {:color colors/gray})
+
--- a/src/status_im/ui/screens/hardwallet/connect/subs.cljs
+++ b/src/status_im/ui/screens/hardwallet/connect/subs.cljs
@ -0,0 +1,7 @@
+(ns status-im.ui.screens.hardwallet.connect.subs
+  (:require [re-frame.core :as re-frame]))
+
+(re-frame/reg-sub
+ :hardwallet/nfc-enabled?
+ (fn [db]
+   (get-in db [:hardwallet :nfc-enabled?])))
--- a/src/status_im/ui/screens/hardwallet/connect/views.cljs
+++ b/src/status_im/ui/screens/hardwallet/connect/views.cljs
@ -0,0 +1,60 @@
+(ns status-im.ui.screens.hardwallet.connect.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [re-frame.core :as re-frame]
+            [status-im.react-native.resources :as resources]
+            [status-im.ui.screens.hardwallet.connect.styles :as styles]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]))
+
+(defview hardwallet-connect []
+  (letsubs [nfc-enabled? [:hardwallet/nfc-enabled?]]
+    [react/view styles/container
+     [status-bar/status-bar]
+     [react/view components.styles/flex
+      [toolbar/toolbar {}
+       toolbar/default-nav-back
+       nil
+       [toolbar/actions [{:icon      :icons/info
+                          :icon-opts {:color               :black
+                                      :accessibility-label :hardwallet-connect-info-button}
+                          :handler   #(re-frame/dispatch [:open-url-in-browser "https://hardwallet.status.im"])}]]]
+      [react/view styles/hardwallet-connect
+       [react/view styles/hardwallet-card-image-container
+        [react/image {:source (:hardwallet-card resources/ui)
+                      :style  styles/hardwallet-card-image}]]
+       [react/view styles/status-hardwallet-text-container
+        [react/text {:style styles/status-hardwallet-text}
+         (i18n/label :t/status-hardwallet)]
+        [react/text {:style styles/status-hardwallet-text}
+         (i18n/label :t/secure-your-assets)]
+        [react/text {:style           styles/link-card-text
+                     :number-of-lines 2}
+         (i18n/label :t/link-card)]]
+       [react/view styles/bottom-action-container
+        (if nfc-enabled?
+          [react/view styles/nfc-enabled-container
+           [react/image {:source (:phone-nfc resources/ui)
+                         :style  styles/phone-nfc-image}]
+           [react/image {:source (:hardwallet-card resources/ui)
+                         :style  styles/hardwallet-card-image-small}]
+           [react/text {:style           styles/hold-card-text
+                        :number-of-lines 2
+                        :uppercase?      true}
+            (i18n/label :t/hold-card)]]
+          [react/view styles/nfc-disabled-container
+           [vector-icons/icon :icons/nfc {:color           colors/gray
+                                          :container-style styles/nfc-icon}]
+           [react/view styles/nfc-disabled-actions-container
+            [react/text {:style      styles/turn-nfc-text
+                         :font       :medium
+                         :on-press   #(re-frame/dispatch [:hardwallet.ui/go-to-settings-button-pressed])
+                         :uppercase? true}
+             (i18n/label :t/turn-nfc-on)]
+            [react/text {:style    styles/go-to-settings-text
+                         :on-press #(re-frame/dispatch [:hardwallet.ui/go-to-settings-button-pressed])}
+             (i18n/label :t/go-to-settings)]]])]]]]))
--- a/src/status_im/ui/screens/subs.cljs
+++ b/src/status_im/ui/screens/subs.cljs
@ -21,7 +21,8 @@
            status-im.ui.screens.browser.subs
            status-im.ui.screens.add-new.new-chat.subs
            status-im.ui.screens.add-new.new-public-chat.subs
-            status-im.ui.screens.profile.subs))
+            status-im.ui.screens.profile.subs
+            status-im.ui.screens.hardwallet.connect.subs))

 (reg-sub :get
         (fn [db [_ k]]
--- a/src/status_im/ui/screens/views.cljs
+++ b/src/status_im/ui/screens/views.cljs
@ -56,6 +56,8 @@
            [status-im.ui.screens.add-new.open-dapp.views :refer [open-dapp dapp-description]]
            [status-im.ui.screens.intro.views :refer [intro]]
            [status-im.ui.screens.accounts.create.views :refer [create-account]]
+            [status-im.ui.screens.hardwallet.authentication-method.views :refer [hardwallet-authentication-method]]
+            [status-im.ui.screens.hardwallet.connect.views :refer [hardwallet-connect]]
            [status-im.ui.screens.profile.seed.views :refer [backup-seed]]
            [status-im.ui.screens.about-app.views :as about-app]
            [status-im.utils.navigation :as navigation]
@ -124,11 +126,13 @@
    {:screen
     (nav-reagent/stack-navigator
      (stack-screens
-       (cond-> {:login          login
-                :progress       progress
-                :create-account create-account
-                :recover        recover
-                :accounts       accounts}
+       (cond-> {:login                            login
+                :progress                         progress
+                :create-account                   create-account
+                :recover                          recover
+                :accounts                         accounts
+                :hardwallet/authentication-method hardwallet-authentication-method
+                :hardwallet/connect               hardwallet-connect}
         (= :intro view-id)
         (assoc :intro intro)))
      (cond-> {:headerMode "none"}
@ -246,29 +250,31 @@
       {:screen
        (nav-reagent/stack-navigator
         (stack-screens
-          {:my-profile                 (main-tabs/get-main-tab :my-profile)
-           :profile-photo-capture      profile-photo-capture
-           :about-app                  about-app/about-app
-           :bootnodes-settings         bootnodes-settings
-           :edit-bootnode              edit-bootnode
-           :offline-messaging-settings offline-messaging-settings
-           :edit-mailserver            edit-mailserver
-           :help-center                help-center
-           :extensions-settings        extensions-settings
-           :add-extension              add-extension
-           :show-extension             show-extension
-           :network-settings           network-settings
-           :network-details            network-details
-           :edit-network               edit-network
-           :log-level-settings         log-level-settings
-           :fleet-settings             fleet-settings
-           :currency-settings          currency-settings
-           :backup-seed                backup-seed
-           :login                      login
-           :create-account             create-account
-           :recover                    recover
-           :accounts                   accounts
-           :qr-scanner                 qr-scanner})
+          {:my-profile                       (main-tabs/get-main-tab :my-profile)
+           :profile-photo-capture            profile-photo-capture
+           :about-app                        about-app/about-app
+           :bootnodes-settings               bootnodes-settings
+           :edit-bootnode                    edit-bootnode
+           :offline-messaging-settings       offline-messaging-settings
+           :edit-mailserver                  edit-mailserver
+           :help-center                      help-center
+           :extensions-settings              extensions-settings
+           :add-extension                    add-extension
+           :show-extension                   show-extension
+           :network-settings                 network-settings
+           :network-details                  network-details
+           :edit-network                     edit-network
+           :log-level-settings               log-level-settings
+           :fleet-settings                   fleet-settings
+           :currency-settings                currency-settings
+           :backup-seed                      backup-seed
+           :login                            login
+           :create-account                   create-account
+           :recover                          recover
+           :accounts                         accounts
+           :hardwallet/authentication-method hardwallet-authentication-method
+           :hardwallet/connect               hardwallet-connect
+           :qr-scanner                       qr-scanner})
         {:headerMode       "none"
          :initialRouteName "my-profile"})}
       :profile-qr-viewer
--- a/src/status_im/utils/config.cljs
+++ b/src/status_im/utils/config.cljs
@ -27,6 +27,7 @@
 (def cached-webviews-enabled? (enabled? (get-config :CACHED_WEBVIEWS_ENABLED 0)))
 (def rn-bridge-threshold-warnings-enabled? (enabled? (get-config :RN_BRIDGE_THRESHOLD_WARNINGS 0)))
 (def extensions-enabled? (enabled? (get-config :EXTENSIONS 0)))
+(def hardwallet-enabled? (enabled? (get-config :HARDWALLET_ENABLED 0)))

 ;; CONFIG VALUES
 (def log-level
--- a/test/cljs/status_im/react_native/js_dependencies.cljs
+++ b/test/cljs/status_im/react_native/js_dependencies.cljs
@ -17,6 +17,7 @@
 (def orientation            #js {})
 (def popup-menu             #js {})
 (def qr-code                #js {})
+(def nfc-manager            #js {:default #js {}})
 (def react-native
  #js {:NativeModules      #js {}
       :Animated           #js {:View #js {}
--- a/translations/en.json
+++ b/translations/en.json
@ -704,5 +704,13 @@
    "send-request-amount-invalid-number": "Amount is not a valid number",
    "send-request-amount-max-decimals": "Max number of decimals is {{asset-decimals}}",
    "send-command-payment": "Send a payment",
-    "request-command-payment": "Request a payment"
+    "request-command-payment": "Request a payment",
+    "choose-authentication-method": "Choose an authentication method to protect your account",
+    "status-hardwallet-capitalized": "Status Hardwallet",
+    "status-hardwallet": "Status hardwallet",
+    "secure-your-assets": "secure your assets",
+    "link-card": "Link the card and use it to confirm your identity on the platform.",
+    "hold-card": "hold card to the back of your phone",
+    "turn-nfc-on": "turn nfc on",
+    "go-to-settings": "Go to Settings"
 }