semi-working poc

src/quo/components/graph/wallet_graph/style.cljs

@@ -19,7 +19,3 @@
    :background-color colors/danger-50
    :align-items      :center
    :justify-content  :center})
-
-(def empty-state
-  {:width  375
-   :height 116})

src/quo/components/graph/wallet_graph/view.cljs

@@ -2,12 +2,11 @@
   (:require
     [quo.components.graph.utils :as utils]
     [quo.components.graph.wallet-graph.style :as style]
+    [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
-    [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
     [react-native.charts :as charts]
     [react-native.core :as rn]
-    [react-native.fast-image :as fast-image]
     [react-native.linear-gradient :as linear-gradient]))
 
 (defn- time-frame->max-data-points
@@ -43,10 +42,11 @@
         gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
         fill-color      (colors/theme-colors colors/white colors/neutral-95)]
     (if (= time-frame :empty)
-      [fast-image/fast-image
-       {:style               style/empty-state
-        :source              (resources/get-themed-image :no-funds theme)
-        :accessibility-label :illustration}]
+      [rn/view
+       {:accessibility-label :illustration
+        :style               style/illustration}
+       [text/text {:style {:color colors/white}}
+        "Illustration here"]]
       [rn/view
        [linear-gradient/linear-gradient
         {:colors gradient-colors

src/quo/components/settings/data_item/component_spec.cljs

@@ -1,7 +1,6 @@
 (ns quo.components.settings.data-item.component-spec
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [test-helpers.component :as h]))
 
 (h/describe
@@ -162,8 +161,7 @@
                 :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
-                :customization-color :yellow
-                :network-image       (quo.resources/get-network :ethereum)}])
+                :customization-color :yellow}])
     (h/is-truthy (h/query-by-label-text :description-image)))
 
   (h/test "description emoji is visible when description is account"

src/quo/components/settings/data_item/view.cljs

@@ -7,6 +7,7 @@
     [quo.components.markdown.text :as text]
     [quo.components.settings.data-item.style :as style]
     [quo.foundations.colors :as colors]
+    [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -16,8 +17,7 @@
   [rn/view {:style (style/loading-container size blur? theme)}])
 
 (defn- left-subtitle
-  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji
-           network-image]}]
+  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
   [rn/view {:style style/subtitle-container}
    (when (not= :small size)
      [rn/view {:style (style/subtitle-icon-container description)}
@@ -33,7 +33,7 @@
                    :type                :default}]
         :network [rn/image
                   {:accessibility-label :description-image
-                   :source              network-image
+                   :source              (quo.resources/tokens :eth)
                    :style               style/image}]
         nil)])
    [text/text
@@ -60,7 +60,7 @@
 (defn- left-side
   "The description can either be given as a string `description` or a component `custom-subtitle`"
   [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
-           customization-color network-image
+           customization-color
            emoji]
     :as   props}]
   [rn/view {:style style/left-side}
@@ -85,8 +85,7 @@
          :blur?               blur?
          :subtitle            subtitle
          :customization-color customization-color
-         :emoji               emoji
-         :network-image       network-image}]))])
+         :emoji               emoji}]))])
 
 (defn- right-side
   [{:keys [label icon-right? right-icon icon-color communities-list]}]

src/quo/foundations/resources.cljs

@@ -7,15 +7,6 @@
    :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")
    :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")})
 
-(def ui-themed
-  {:no-funds
-   {:light (js/require "../resources/images/ui2/no-funds-light.png")
-    :dark  (js/require "../resources/images/ui2/no-funds-dark.png")}})
-
-(defn get-themed-image
-  [k theme]
-  (get-in ui-themed [k theme]))
-
 (defn get-image
   [k]
   (get ui k))

src/status_im2/common/keychain/events.cljs

@@ -78,13 +78,16 @@
     (fn [can-save?]
       (if can-save?
         (keychain/get-credentials
-         (str key-uid "-auth")
+         (str key-uid "-hashed" "-auth")
          #(callback (if % (oops/oget % "password") auth-method-none)))
         (callback nil))))))
 
 (defn save-user-password!
   [key-uid password]
-  (keychain/save-credentials key-uid key-uid (security/safe-unmask-data password) #()))
+  (keychain/save-credentials key-uid
+                             key-uid
+                             (security/safe-unmask-data password)
+                             #()))
 
 (re-frame/reg-fx
  :keychain/get-user-password

src/status_im2/common/resources.cljs

@@ -79,19 +79,7 @@
     :dark  (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")}
    :no-notifications
    {:light (js/require "../resources/images/ui2/no-notifications-light.png")
-    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}
-   :no-activity
-   {:light (js/require "../resources/images/ui2/no-activity-light.png")
-    :dark  (js/require "../resources/images/ui2/no-activity-dark.png")}
-   :no-collectibles
-   {:light (js/require "../resources/images/ui2/no-collectibles-light.png")
-    :dark  (js/require "../resources/images/ui2/no-collectibles-dark.png")}
-   :no-dapps
-   {:light (js/require "../resources/images/ui2/no-dapps-light.png")
-    :dark  (js/require "../resources/images/ui2/no-dapps-dark.png")}
-   :no-permissions
-   {:light (js/require "../resources/images/ui2/no-permissions-light.png")
-    :dark  (js/require "../resources/images/ui2/no-permissions-dark.png")}})
+    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
 
 (def mock-images
   {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")

src/status_im2/contexts/onboarding/enable_biometrics/view.cljs

@@ -33,24 +33,14 @@
                                      (rf/sub [:profile/customization-color]))
         syncing-results?         (= :syncing-results @state/root-id)]
     [rn/view {:style (style/buttons insets)}
-     [standard-auth/button
+     [quo/button
       (merge
        {:size                40
         :accessibility-label :enable-biometrics-button
         :icon-left           :i/face-id
         :customization-color profile-color
         :button-label        (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})}
-       (if syncing-results?
-         {:theme             theme
-          :blur?             true
-          :on-enter-password (fn [entered-password]
-                               (rf/dispatch
-                                [:onboarding-2/authenticate-enable-biometrics
-                                 (security/safe-unmask-data
-                                  entered-password)])
-                               (rf/dispatch [:hide-bottom-sheet]))
-          :auth-button-label (i18n/label :t/confirm)}
-         {:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])}))]
+       {:on-press #(rf/dispatch [:onboarding-2/sync-enable-biometrics])})]
      [quo/button
       {:accessibility-label :maybe-later-button
        :background          :blur

src/status_im2/contexts/onboarding/events.cljs

@@ -35,11 +35,10 @@
   {:biometric/authenticate {:on-success #(rf/dispatch [:onboarding-2/biometrics-done])
                             :on-fail    #(rf/dispatch [:onboarding-2/biometrics-fail %])}})
 
-(rf/defn authenticate-enable-biometrics
-  {:events [:onboarding-2/authenticate-enable-biometrics]}
+(rf/defn sync-enable-biometrics
+  {:events [:onboarding-2/sync-enable-biometrics]}
   [{:keys [db]} password]
   {:db                     (-> db
-                               (assoc-in [:onboarding-2/profile :password] password)
                                (assoc-in [:onboarding-2/profile :syncing?] true))
    :biometric/authenticate {:on-success #(rf/dispatch [:onboarding-2/biometrics-done])
                             :on-fail    #(rf/dispatch [:onboarding-2/biometrics-fail %])}})
@@ -145,15 +144,15 @@
 (rf/defn onboarding-new-account-finalize-setup
   {:events [:onboarding-2/finalize-setup]}
   [{:keys [db]}]
-  (let [masked-password    (get-in db [:onboarding-2/profile :password])
+  (let [syncing?           (get-in db [:onboarding-2/profile :syncing?])
+        masked-password    (get-in db [:onboarding-2/profile :password])
         key-uid            (get-in db [:profile/profile :key-uid])
-        syncing?           (get-in db [:onboarding-2/profile :syncing?])
         biometric-enabled? (= (get-in db [:onboarding-2/profile :auth-method])
                               constants/auth-method-biometric)]
     (cond-> {:db (assoc db :onboarding-2/generated-keys? true)}
       biometric-enabled?
       (assoc :keychain/save-password-and-auth-method
-             {:key-uid         key-uid
+             {:key-uid         (if syncing? (str key-uid "-hashed") key-uid)
               :masked-password masked-password
               :on-success      (fn []
                                  (if syncing?

src/status_im2/contexts/profile/login/events.cljs

@@ -42,11 +42,19 @@
     {:db     (assoc-in db [:profile/login :processing] true)
      ::login [key-uid (native-module/sha3 (security/safe-unmask-data password))]}))
 
+(rf/defn biometry-login
+  {:events [:profile.login/biometry-login]}
+  [{:keys [db]}]
+  (let [{:keys [key-uid password]} (:profile/login db)]
+    {:db     (assoc-in db [:profile/login :processing] true)
+     ::login [key-uid (security/safe-unmask-data password)]}))
+
 (rf/defn login-local-paired-user
   {:events [:profile.login/local-paired-user]}
   [{:keys [db]}]
   (let [{:keys [key-uid password]} (get-in db [:syncing :profile])]
-    {::login [key-uid password]}))
+    {:db     (assoc-in db [:onboarding-2/profile :password] (security/mask-data password))
+     ::login [key-uid password]}))
 
 (rf/defn redirect-to-root
   [{:keys [db] :as cofx}]
@@ -158,14 +166,25 @@
             {:on-success #(rf/dispatch [:profile.login/biometric-success])
              :on-faile   #(rf/dispatch [:profile.login/biometric-auth-fail])}})))
 
-(rf/defn biometric-auth-success
-  {:events [:profile.login/biometric-success]}
+;; TODO store the password in the hash keychain
+(rf/defn backwards-compatible-biometric-auth-success
+  {:events [:profile.login/backwards-compatible-biometric-success]}
   [{:keys [db] :as cofx}]
   (let [key-uid (get-in db [:profile/login :key-uid])]
     (keychain/get-user-password cofx
                                 key-uid
                                 #(rf/dispatch [:profile.login/get-user-password-success %]))))
 
+(rf/defn biometric-auth-success
+  {:events [:profile.login/biometric-success]}
+  [{:keys [db] :as cofx}]
+  (let [key-uid (get-in db [:profile/login :key-uid])]
+    (keychain/get-user-password cofx
+                                (str key-uid "-hashed")
+                                #(if (nil? %)
+                                   (rf/dispatch [:profile.login/backwards-compatible-biometric-success])
+                                   (rf/dispatch [:profile.login/get-user-password-success %])))))
+
 ;; result of :keychain/get-auth-method above
 (rf/defn get-user-password-success
   {:events [:profile.login/get-user-password-success]}
@@ -175,7 +194,7 @@
      cofx
      {:db (assoc-in db [:profile/login :password] password)}
      (navigation/init-root :progress)
-     (login))))
+     (biometry-login))))
 
 (rf/defn biometric-auth-fail
   {:events [:profile.login/biometric-auth-fail]}

src/status_im2/contexts/quo_preview/settings/data_item.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.settings.data-item
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
@@ -51,7 +50,6 @@
                              :right-icon          :i/chevron-right
                              :emoji               "🎮"
                              :customization-color :yellow
-                             :network-image       (quo.resources/get-network :ethereum)
                              :communities-list    communities-list})]
     (fn []
       [preview/preview-container

src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs

@@ -3,10 +3,11 @@
     [quo.core :as quo]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.account.tabs.dapps.style :as style]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
-    [utils.i18n :as i18n]))
+    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn dapp-options
   []
@@ -22,12 +23,13 @@
 
 (defn- view-internal
   [{:keys [theme]}]
-  (let [dapps-list []]
+  (let [dapps-list (temp/dapps-list {:on-press-icon #(rf/dispatch [:show-bottom-sheet
+                                                                   {:content dapp-options}])})]
     (if (empty? dapps-list)
       [empty-tab/view
-       {:title       (i18n/label :t/no-dapps)
-        :description (i18n/label :t/no-dapps-description)
-        :image       (resources/get-themed-image :no-dapps theme)}]
+       {:title        (i18n/label :t/no-dapps)
+        :description  (i18n/label :t/no-collectibles-description)
+        :placeholder? true}]
       [rn/view {:style style/dapps-container}
        [rn/flat-list
         {:data      dapps-list

src/status_im2/contexts/wallet/account/tabs/view.cljs

@@ -1,8 +1,6 @@
 (ns status-im2.contexts.wallet.account.tabs.view
   (:require
-    [quo.theme]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.account.tabs.about.view :as about]
     [status-im2.contexts.wallet.account.tabs.dapps.view :as dapps]
     [status-im2.contexts.wallet.common.activity-tab.view :as activity]
@@ -12,8 +10,8 @@
     [status-im2.contexts.wallet.common.token-value.view :as token-value]
     [utils.i18n :as i18n]))
 
-(defn- view-internal
-  [{:keys [selected-tab theme]}]
+(defn view
+  [{:keys [selected-tab]}]
   (case selected-tab
     :assets       [rn/flat-list
                    {:render-fn               token-value/view
@@ -22,13 +20,8 @@
     :collectibles [collectibles/view]
     :activity     [activity/view]
     :permissions  [empty-tab/view
-                   {:title       (i18n/label :t/no-permissions)
-                    :description (i18n/label :t/no-collectibles-description)
-                    :image       (resources/get-image
-                                  (quo.theme/theme-value :no-permissions-light
-                                                         :no-permissions-dark
-                                                         theme))}]
+                   {:title        (i18n/label :t/no-permissions)
+                    :description  (i18n/label :t/no-collectibles-description)
+                    :placeholder? true}]
     :dapps        [dapps/view]
     [about/view]))
-
-(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/account/view.cljs

@@ -25,6 +25,7 @@
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
    {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}
+   {:id :permissions :label (i18n/label :t/permissions) :accessibility-label :permissions}
    {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps}
    {:id :about :label (i18n/label :t/about) :accessibility-label :about}])
 

src/status_im2/contexts/wallet/common/activity_tab/view.cljs

@@ -1,10 +1,9 @@
 (ns status-im2.contexts.wallet.common.activity-tab.view
   (:require
     [quo.core :as quo]
-    [quo.theme]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
+    [status-im2.contexts.wallet.common.temp :as temp]
     [utils.i18n :as i18n]))
 
 (defn activity-item
@@ -15,17 +14,15 @@
     (merge {:on-press #(js/alert "Item pressed")}
            item)]])
 
-(defn- view-internal
-  [{:keys [theme]}]
-  (let [activity-list []]
+(defn view
+  []
+  (let [activity-list temp/activity-list]
     (if (empty? activity-list)
       [empty-tab/view
-       {:title       (i18n/label :t/no-activity)
-        :description (i18n/label :t/empty-tab-description)
-        :image       (resources/get-themed-image :no-activity theme)}]
+       {:title        (i18n/label :t/no-activity)
+        :description  (i18n/label :t/empty-tab-description)
+        :placeholder? true}]
       [rn/flat-list
        {:data      activity-list
         :style     {:flex 1}
         :render-fn activity-item}])))
-
-(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs

@@ -1,21 +1,19 @@
 (ns status-im2.contexts.wallet.common.collectibles-tab.view
   (:require
     [quo.core :as quo]
-    [quo.theme]
     [react-native.core :as rn]
-    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn- view-internal
-  [{:keys [theme]}]
+(defn view
+  []
   (let [collectible-list (rf/sub [:wallet/collectibles])]
     (if (empty? collectible-list)
       [empty-tab/view
-       {:title       (i18n/label :t/no-collectibles)
-        :description (i18n/label :t/no-collectibles-description)
-        :image       (resources/get-themed-image :no-collectibles theme)}]
+       {:title        (i18n/label :t/no-collectibles)
+        :description  (i18n/label :t/no-collectibles-description)
+        :placeholder? true}]
       [rn/flat-list
        {:data                    collectible-list
         :style                   {:flex 1}
@@ -27,5 +25,3 @@
                                      :on-press #(rf/dispatch
                                                  [:navigate-to
                                                   :wallet-collectible])}])}])))
-
-(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/home/view.cljs

@@ -53,7 +53,10 @@
          [common.top-nav/view]
          [rn/view {:style style/overview-container}
           [quo/wallet-overview (temp/wallet-overview-state networks)]]
-         [quo/wallet-graph {:time-frame :empty}]
+         [rn/pressable
+          {:on-long-press #(rf/dispatch [:show-bottom-sheet
+                                         {:content temp/wallet-temporary-navigation}])}
+          [quo/wallet-graph {:time-frame :empty}]]
          [rn/flat-list
           {:style                             style/accounts-list
            :content-container-style           style/accounts-list-container

translations/en.json

@@ -2389,7 +2389,5 @@
     "address-placeholder": "0x123abc... or bob.eth",
     "invalid-address": "It’s not Ethereum address or ENS name",
     "address-already-in-use": "Address already being used",
-    "address-copied": "Address copied",
-    "no-dapps-description": "We want dApps!"
+    "address-copied": "Address copied"
 }
-