[#11395] Inapp Keycard upsell MVP

src/status_im/init/core.cljs

@@ -60,7 +60,9 @@
   (fx/merge cofx
             {:get-supported-biometric-auth          nil
              ::init-theme                           nil
-             ::open-multiaccounts                   #(re-frame/dispatch [::initialize-multiaccounts % {:logout? false}])
+             ::open-multiaccounts                   #(do
+                                                       (re-frame/dispatch [::initialize-multiaccounts % {:logout? false}])
+                                                       (re-frame/dispatch [:get-keycard-banner-preference]))
              :ui/listen-to-window-dimensions-change nil
              ::network/listen-to-network-info       nil
              :keycard/register-card-events          nil

src/status_im/multiaccounts/login/core.cljs

@@ -30,7 +30,8 @@
             [status-im.acquisition.core :as acquisition]
             [taoensso.timbre :as log]
             [status-im.data-store.invitations :as data-store.invitations]
-            [status-im.chat.models.link-preview :as link-preview]))
+            [status-im.chat.models.link-preview :as link-preview]
+            [status-im.async-storage.core :as async-storage]))
 
 (re-frame/reg-fx
  ::login
@@ -493,3 +494,20 @@
               (dissoc :intro-wizard)
               (update :keycard dissoc :application-info))}
      (open-login (select-keys multiaccount [:key-uid :name :public-key :identicon :images])))))
+
+(fx/defn hide-keycard-banner
+  {:events [:hide-keycard-banner]}
+  [{:keys [db]}]
+  {:db                  (assoc db :keycard/banner-hidden true)
+   ::async-storage/set! {:keycard-banner-hidden true}})
+
+(fx/defn get-keycard-banner-preference-cb
+  {:events [:get-keycard-banner-preference-cb]}
+  [{:keys [db]} {:keys [keycard-banner-hidden]}]
+  {:db (assoc db :keycard/banner-hidden keycard-banner-hidden)})
+
+(fx/defn get-keycard-banner-preference
+  {:events [:get-keycard-banner-preference]}
+  [_]
+  {::async-storage/get {:keys [:keycard-banner-hidden]
+                        :cb   #(re-frame/dispatch [:get-keycard-banner-preference-cb %])}})

src/status_im/subs.cljs

@@ -200,6 +200,7 @@
 
 ;; keycard
 (reg-root-key-sub :keycard/new-account-sheet? :keycard/new-account-sheet?)
+(reg-root-key-sub :keycard/banner-hidden :keycard/banner-hidden)
 
 ;; delete profile
 (reg-root-key-sub :delete-profile/error :delete-profile/error)

src/status_im/ui/screens/multiaccounts/key_storage/views.cljs

@@ -139,25 +139,28 @@
                                            :height 16}]]])
 
 (defn keycard-upsell-banner []
-  [react/touchable-highlight {:on-press #(.openURL ^js react/linking "https://get-keycard.status.im/")}
+  [react/view {:background-color (if (= :dark @colors/theme) "#2C5955" "#DDF8F4")
-   [react/view {:background-color (if (= :dark @colors/theme) "#2C5955" "#DDF8F4")
+               :border-radius 16 :padding-left 12 :padding-right 50 :margin 16}
-                :border-radius 16
+   [react/touchable-highlight {:on-press #(.openURL ^js react/linking "https://get-keycard.status.im/")}
-                :margin 16
+    [react/view {:padding-vertical 8
-                :padding-horizontal 12
+                 :flex-direction :row}
-                :padding-vertical 8
-                :flex-direction :row}
-    [react/view
      [react/image {:source (resources/get-theme-image :keycard)
                    :resize-mode :contain
                    :style {:width 48
-                           :height 48}}]]
+                           :height 48}}]
-    [react/view {:flex 1
+     [react/view {:flex 1
-                 :margin-left 12}
+                  :margin-left 12}
-     [react/text {:style {:font-size 20
+      [react/text {:style {:font-size 20
-                          :font-weight "700"}}
+                           :font-weight "700"}}
-      (i18n/label :t/get-a-keycard)]
+       (i18n/label :t/get-a-keycard)]
-     [react/text {:style {:color (colors/alpha colors/text 0.8)}}
+      [react/text {:style {:color (colors/alpha colors/text 0.8)}}
-      (i18n/label :t/keycard-upsell-subtitle)]]]])
+       (i18n/label :t/keycard-upsell-subtitle)]]]]
+   [react/touchable-highlight
+    {:style               {:position :absolute :right 0  :top 0
+                           :align-items :center :justify-content :center :margin 2}
+     :on-press            #(re-frame/dispatch [:hide-keycard-banner])
+     :accessibility-label :hide-home-button}
+    [icons/icon :main-icons/close-circle {:color colors/gray}]]])
 
 (defview storage []
   (letsubs

src/status_im/ui/screens/multiaccounts/login/views.cljs

@@ -45,7 +45,8 @@
             auth-method [:auth-method]
             view-id [:view-id]
             supported-biometric-auth [:supported-biometric-auth]
-            keycard?                 [:keycard-multiaccount?]]
+            keycard?                 [:keycard-multiaccount?]
+            banner-hidden [:keycard/banner-hidden]]
     [react/keyboard-avoiding-view {:style ast/multiaccounts-view}
      [topbar/topbar {:border-bottom     false
                      :right-accessories [{:icon                :more
@@ -98,7 +99,7 @@
        [react/view styles/processing-view
         [react/activity-indicator {:animating true}]
         [react/i18n-text {:style styles/processing :key :processing}]]
-       (when-not keycard?
+       (when-not (or keycard? banner-hidden)
          [key-storage/keycard-upsell-banner]))
 
      [toolbar/toolbar

translations/en.json

@@ -1440,7 +1440,7 @@
     "choose-storage": "Choose storage",
     "choose-new-location-for-keystore": "Choose a new location to save your keystore file",
     "get-a-keycard": "Get a Keycard",
-    "keycard-upsell-subtitle": "Your portable, easy to use hardware wallet",
+    "keycard-upsell-subtitle": "Enhanced security and convenience",
     "actions": "Actions",
     "move-keystore-file": "Move keystore file",
     "select-new-location-for-keys": "Select a new location to save your private key(s)",