Add keycard pairing animation

components/src/status_im/react_native/resources.cljs

@@ -29,7 +29,8 @@
    :phone-nfc-off       (js/require "./resources/images/ui/phone-nfc-off.png")
    :dapp-store          (js/require "./resources/images/ui/dapp-store.png")
    :ens-header          (js/require "./resources/images/ui/ens-header.png")
-   :new-chat-header     (js/require "./resources/images/ui/new-chat-header.png")})
+   :new-chat-header     (js/require "./resources/images/ui/new-chat-header.png")
+   :onboarding-phone (js/require "./resources/images/ui/onboarding-phone.png")})
 
 (def loaded-images (atom {}))
 

ios/StatusIm/Images.xcassets/keycard-logo-big.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "keycard_logo_big.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "keycard_logo_big@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "keycard_logo_big@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/union-nfc.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "union-nfc.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "union-nfc@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "union-nfc@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/hardwallet/card.cljs

@@ -37,10 +37,19 @@
   (doseq [event ["keyCardOnConnected" "keyCardOnDisconnected"]]
     (.removeAllListeners event-emitter event)))
 
-(defn register-card-events []
-  (log/debug "[keycard] register-card-events")
+(defn on-card-connected [callback]
+  (when (and config/hardwallet-enabled?
+             platform/android?)
+    (.addListener event-emitter "keyCardOnConnected" callback)))
+
+(defn on-card-disconnected [callback]
   (when (and config/hardwallet-enabled?
              platform/android?)
+    (.addListener event-emitter "keyCardOnDisconnected" callback)))
+
+(defn register-card-events []
+  (log/debug "[keycard] register-card-events")
+  (when false
 
     (remove-event-listeners)
 
@@ -55,12 +64,18 @@
                                        "keyCardOnDisconnected"
                                        #(re-frame/dispatch [:hardwallet.callback/on-card-disconnected %]))}])))
 
-(defn get-application-info [{:keys [pairing on-success]}]
+(defn get-application-info-raw [{:keys [pairing on-success on-error]}]
   (log/debug "[keycard] get-application-info")
   (.. keycard
       (getApplicationInfo (str pairing))
-      (then #(re-frame/dispatch [:hardwallet.callback/on-get-application-info-success % on-success]))
-      (catch #(re-frame/dispatch [:hardwallet.callback/on-get-application-info-error (error-object->map %)]))))
+      (then on-success)
+      (catch #(on-error (error-object->map %)))))
+
+(defn get-application-info [{:keys [pairing on-success]}]
+  (get-application-info-raw
+   {:pairing    pairing
+    :on-success #(re-frame/dispatch [:hardwallet.callback/on-get-application-info-success % on-success])
+    :on-error   #(re-frame/dispatch [:hardwallet.callback/on-get-application-info-error %])}))
 
 (defn install-applet []
   (log/debug "[keycard] install-applet")
@@ -95,14 +110,24 @@
         (then #(re-frame/dispatch [:hardwallet.callback/on-pair-success %]))
         (catch #(re-frame/dispatch [:hardwallet.callback/on-pair-error (error-object->map %)])))))
 
-(defn generate-mnemonic
-  [{:keys [pairing words]}]
+(defn generate-mnemonic-raw
+  [{:keys [pairing words on-success on-error]}]
   (log/debug "[keycard] generate-mnemonic")
   (when pairing
     (.. keycard
         (generateMnemonic pairing words)
-        (then #(re-frame/dispatch [:hardwallet.callback/on-generate-mnemonic-success %]))
-        (catch #(re-frame/dispatch [:hardwallet.callback/on-generate-mnemonic-error (error-object->map %)])))))
+        (then on-success)
+        (catch #(on-error (error-object->map %))))))
+
+(defn generate-mnemonic
+  [{:keys [pairing words]}]
+  (generate-mnemonic-raw
+   {:pairing pairing
+    :words   words
+    :on-success
+    #(re-frame/dispatch [:hardwallet.callback/on-generate-mnemonic-success %])
+    :on-error
+    #(re-frame/dispatch [:hardwallet.callback/on-generate-mnemonic-error %])}))
 
 (defn generate-and-load-key
   [{:keys [mnemonic pairing pin]}]

src/status_im/hardwallet/core.cljs

@@ -3,6 +3,7 @@
             [re-frame.core :as re-frame]
             [status-im.multiaccounts.create.core :as multiaccounts.create]
             [status-im.multiaccounts.logout.core :as multiaccounts.logout]
+            [status-im.ui.screens.keycard.components.nfc :as keycard-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.ui.components.colors :as colors]
             [status-im.ethereum.mnemonic :as mnemonic]
@@ -268,10 +269,23 @@
   (log/debug "[hardwallet] load-pair-screen")
   (fx/merge cofx
             {:db (-> db
-                     (assoc-in [:hardwallet :setup-step] :pair))}
+                     (assoc-in [:hardwallet :setup-step] :pair))
+             :dispatch [:bottom-sheet/hide-sheet]}
             (listen-to-hardware-back-button)
             (navigation/navigate-to-cofx :keycard-recovery-pair nil)))
 
+(fx/defn show-pair-sheet
+  [{:keys [db] :as cofx} {:keys [on-connect]}]
+  (log/debug "[hardwallet] show-pair-sheet")
+  (fx/merge cofx
+            {:db       (-> db
+                           (assoc-in [:hardwallet :setup-step] :pair))
+             :dispatch [:bottom-sheet/show-sheet
+                        {:content (partial keycard-sheet/connect-keycard
+                                           {:nfc?       (get-in db [:hardwallet :nfc-enabled?])
+                                            :on-connect on-connect})}]}
+            (listen-to-hardware-back-button)))
+
 (fx/defn load-pairing-screen
   {:events [:hardwallet/load-pairing-screen
             :keycard.onboarding.puk-code.ui/confirm-pressed]}
@@ -499,6 +513,7 @@
         {:keys [instance-uid key-uid]} app-info
         pairing (get-pairing db key-uid)
         app-info' (if pairing (assoc app-info :paired? true) app-info)
+        on-card-connected (get-in db [:hardwallet :on-card-conncted])
         card-state (get-card-state app-info')]
     (log/debug "[hardwallet] check-card-state"
                "card-state" card-state
@@ -704,13 +719,12 @@
 (fx/defn on-get-application-info-error
   [{:keys [db] :as cofx} error]
   (log/debug "[hardwallet] application info error " error)
-  (let [on-card-read (get-in db [:hardwallet :on-card-read])
-        on-card-connected (get-in db [:hardwallet :on-card-connected])
-        connect-screen? (= (:view-id db) :hardwallet-connect)
-        login? (= on-card-read :hardwallet/login-with-keycard)
-        tag-was-lost? (= "Tag was lost." (:error error))]
-    (if tag-was-lost?
-      (navigation/navigate-to-cofx cofx :keycard-connection-lost nil)
+  (let [on-card-read      (get-in db [:hardwallet :on-card-read])
+        on-card-connected (get-in db [:hardwallet :on-card-conncted])
+        connect-screen?   (= (:view-id db) :hardwallet-connect)
+        login?            (= on-card-read :hardwallet/login-with-keycard)
+        tag-was-lost?     (= "Tag was lost." (:error error))]
+    (when-not tag-was-lost?
       (if login?
         (fx/merge cofx
                   (clear-on-card-read)
@@ -739,7 +753,7 @@
                 (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))))
 
 (fx/defn keycard-connection-lost-cancel-pressed
-  {:events [:keycard.connection-lost.ui/cancel-pressed]}
+  {:events [:connection-lost/cancel-pressed]}
   [{:keys [db] :as cofx}]
   (fx/merge
    cofx
@@ -759,12 +773,16 @@
              :hardwallet/check-nfc-enabled nil}
             (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
 
+;; FIXME: nfc-enabled check should be on the screen which needs nfc
+;; FIXME: nfc check should be a listener - if nfc
+;; If NFC is enabled after execution of that event user is stuck on
+;; the navigated screen :keycard-nfc-on
 (fx/defn begin-setup-pressed
   {:events [:keycard.onboarding.intro.ui/begin-setup-pressed
             :keycard.recovery.intro.ui/begin-recovery-pressed]}
   [{:keys [db] :as cofx}]
   (let [nfc-enabled? (get-in db [:hardwallet :nfc-enabled?])
-        flow (get-in db [:hardwallet :flow])]
+        flow         (get-in db [:hardwallet :flow])]
     (fx/merge cofx
               {:db (-> db
                        (update :hardwallet
@@ -775,11 +793,7 @@
                        (assoc-in [:hardwallet :pin :on-verified] nil))}
               (set-on-card-connected :hardwallet/get-application-info)
               (set-on-card-read :hardwallet/check-card-state)
-              (if nfc-enabled?
-                (if (= flow :import)
-                  (navigation/navigate-to-cofx :keycard-recovery-start nil)
-                  (navigation/navigate-to-cofx :keycard-onboarding-start nil))
-                (navigation/navigate-to-cofx :keycard-nfc-on nil)))))
+              (show-pair-sheet {:on-connect :hardwallet/get-application-info}))))
 
 (fx/defn proceed-to-login
   [{:keys [db] :as cofx}]
@@ -802,16 +816,15 @@
   {:events [:hardwallet.callback/check-nfc-enabled-success]}
   [{:keys [db] :as cofx} nfc-enabled?]
   (let [flow (get-in db [:hardwallet :flow])
+        on-card-connected (get-in db [:])
         login? (= :login (get-in db [:hardwallet :pin :enter-step]))]
     (fx/merge cofx
               {:db (assoc-in db [:hardwallet :nfc-enabled?] nfc-enabled?)}
               (when (and nfc-enabled?
                          (= (:view-id db)
                             :keycard-nfc-on))
                 (if flow
-                  (if (= flow :import)
-                    (navigation/navigate-to-cofx :keycard-recovery-start nil)
-                    (navigation/navigate-to-cofx :keycard-onboarding-start nil))
+                  (show-pair-sheet {:on-connect })
                   (when login?
                     (proceed-to-login)))))))
 

src/status_im/ui/components/animation.cljs

@@ -60,6 +60,9 @@
 (defn create-value [value]
   (js/ReactNative.Animated.Value. value))
 
+(defn create-value-xy [value]
+  (js/ReactNative.Animated.ValueXY. value))
+
 (defn add [anim-x anim-y]
   (js/ReactNative.Animated.add. anim-x anim-y))
 
@@ -80,3 +83,4 @@
 (defn easing-out [] (.-out (easing)))
 
 (defn cubic [] (.-cubic (easing)))
+(def bezier (.-bezier (easing)))