Rende11's changes

* wallet: illustrations

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

@@ -19,3 +19,7 @@
    :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,11 +2,12 @@
   (: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
@@ -42,11 +43,10 @@
         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)
-      [rn/view
-       {:accessibility-label :illustration
-        :style               style/illustration}
-       [text/text {:style {:color colors/white}}
-        "Illustration here"]]
+      [fast-image/fast-image
+       {:style               style/empty-state
+        :source              (resources/get-themed-image :no-funds theme)
+        :accessibility-label :illustration}]
       [rn/view
        [linear-gradient/linear-gradient
         {:colors gradient-colors

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -7,6 +7,11 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
+(defn- label->accessibility-label
+  [label]
+  (let [label-name (if (keyword? label) (name label) label)]
+    (keyword (str "keyboard-key-" label-name))))
+
 (defn- view-internal
   []
   (let [pressed? (reagent/atom false)]
@@ -14,9 +19,11 @@
       (let [label-color      (style/get-label-color disabled? theme blur?)
             background-color (style/toggle-background-color @pressed? blur? theme)]
         [rn/pressable
-         {:accessibility-label :keyboard-key
+         {:accessibility-label (label->accessibility-label label)
           :disabled            (or disabled? (not label))
-          :on-press            (fn [] (on-press label))
+          :on-press            (fn []
+                                 (when on-press
+                                   (on-press label)))
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? false)
           :style               (style/container background-color)}

src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -17,13 +17,15 @@
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete]
+        :or   {left-action :none}}]
     [rn/view
      {:style style/container}
      (for [row-index (range 1 4)]
        ^{:key row-index}
        [rn/view {:style style/row-container}
         (for [column-index (range 1 4)]
+          ^{:key (str row-index column-index)}
           [keyboard-item
            {:item      (+ (* (dec row-index) 3) column-index)
             :type      :digit
@@ -61,7 +63,7 @@
          {:item      :i/delete
           :type      :key
           :disabled? disabled?
-          :on-press  on-press
+          :on-press  on-delete
           :blur?     blur?
           :theme     theme}]
         [keyboard-item])]]))

src/quo/components/wallet/token_input/view.cljs

@@ -1,32 +1,39 @@
 (ns quo.components.wallet.token-input.view
   (:require
-    [clojure.string :as string]
-    [quo.components.buttons.button.view :as button]
-    [quo.components.dividers.divider-line.view :as divider-line]
-    [quo.components.markdown.text :as text]
-    [quo.components.tags.network-tags.view :as network-tag]
-    [quo.components.wallet.token-input.style :as style]
-    [quo.foundations.colors :as colors]
-    [quo.foundations.common :as common]
-    [quo.foundations.resources :as resources]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+   [clojure.string :as string]
+   [quo.components.buttons.button.view :as button]
+   [quo.components.dividers.divider-line.view :as divider-line]
+   [quo.components.markdown.text :as text]
+   [quo.components.tags.network-tags.view :as network-tag]
+   [quo.components.wallet.token-input.style :as style]
+   [quo.foundations.colors :as colors]
+   [quo.foundations.common :as common]
+   [quo.foundations.resources :as resources]
+   [quo.theme :as quo.theme]
+   [react-native.core :as rn]
+   [reagent.core :as reagent]))
 
 (defn calc-value
   [crypto? currency token value conversion]
-  (if crypto?
-    (str (get common/currency-label currency) (.toFixed (* value conversion) 2))
-    (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
+  (let [num-value (if (string? value) (parse-double (or value "0")) value)]
+    (if crypto?
+      (str (get common/currency-label currency) (.toFixed (* num-value conversion) 2))
+      (str (.toFixed (/ num-value conversion) 2) " " (string/upper-case (or (clj->js token) ""))))))
 
 (defn- view-internal
   []
   (let [width     (:width (rn/get-window))
-        value     (reagent/atom 0)
+        value     (reagent/atom nil)
         crypto?   (reagent/atom true)
         input-ref (atom nil)]
-    (fn [{:keys [theme token currency conversion networks title customization-color]}]
-      [rn/view {:style (style/main-container width)}
+    (fn [{:keys          [theme token currency conversion networks title customization-color
+                          on-swap container-style show-keyboard?]
+          :or            {show-keyboard? true}
+          external-value :value}]
+      [rn/view
+       {:style (merge
+                (style/main-container width)
+                container-style)}
        [rn/view {:style style/amount-container}
         [rn/pressable
          {:on-press #(when @input-ref (.focus ^js @input-ref))
@@ -37,30 +44,38 @@
           {:style  style/token
            :source (resources/get-token token)}]
          [rn/text-input
-          {:ref                    #(reset! input-ref %)
-           :placeholder            "0"
-           :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-           :keyboard-type          :numeric
-           :max-length             12
-           :default-value          @value
-           :on-change-text         #(reset! value %)
-           :style                  (style/text-input theme)
-           :selection-color        customization-color}]
-         [text/text
-          {:size   :paragraph-2
-           :weight :semi-bold
-           :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-                    :margin-right   8
-                    :padding-bottom 2}}
-          (string/upper-case (clj->js (if @crypto? token currency)))]]
-        [button/button
-         {:icon                true
-          :icon-only?          true
-          :size                32
-          :on-press            #(swap! crypto? not)
-          :type                :outline
-          :accessibility-label :reorder}
-         :i/reorder]]
+          {:ref                      #(do (reset! input-ref %)
+                                          (when %
+                                            (.focus ^js %)))
+           :placeholder              "0"
+           :placeholder-text-color   (colors/theme-colors colors/neutral-40
+                                                          colors/neutral-50
+                                                          theme)
+           :default-value            (or external-value @value)
+           :keyboard-type            :numeric
+           :max-length               12
+           :on-change-text           #(reset! value %)
+           :style                    (style/text-input theme)
+           :selection-color          customization-color
+           :show-soft-input-on-focus show-keyboard?}]]
+        [text/text
+         {:size   :paragraph-2
+          :weight :semi-bold
+          :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+                   :margin-right   8
+                   :padding-bottom 2}}
+         (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]
+       [button/button
+        {:icon                true
+         :icon-only?          true
+         :size                32
+         :on-press            (fn []
+                                (swap! crypto? not)
+                                (when on-swap
+                                  (on-swap @crypto?)))
+         :type                :outline
+         :accessibility-label :reorder}
+        :i/reorder]
        [divider-line/view {:container-style {:margin-vertical 8}}]
        [rn/view {:style style/data-container}
         [network-tag/view {:networks networks :title title}]
@@ -68,6 +83,6 @@
          {:size   :paragraph-2
           :weight :medium
           :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value @crypto? currency token @value conversion)]]])))
+         (calc-value @crypto? currency token (or external-value @value) conversion)]]])))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/foundations/resources.cljs

@@ -7,6 +7,15 @@
    :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/resources.cljs

@@ -79,7 +79,19 @@
     :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")}})
+    :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")}})
 
 (def mock-images
   {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")

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

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

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

@@ -1,6 +1,8 @@
 (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]
@@ -10,8 +12,8 @@
     [status-im2.contexts.wallet.common.token-value.view :as token-value]
     [utils.i18n :as i18n]))
 
-(defn view
-  [{:keys [selected-tab]}]
+(defn- view-internal
+  [{:keys [selected-tab theme]}]
   (case selected-tab
     :assets       [rn/flat-list
                    {:render-fn               token-value/view
@@ -20,8 +22,13 @@
     :collectibles [collectibles/view]
     :activity     [activity/view]
     :permissions  [empty-tab/view
-                   {:title        (i18n/label :t/no-permissions)
-                    :description  (i18n/label :t/no-collectibles-description)
-                    :placeholder? true}]
+                   {: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))}]
     :dapps        [dapps/view]
     [about/view]))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -25,7 +25,6 @@
   [{: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,9 +1,10 @@
 (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
@@ -14,15 +15,17 @@
     (merge {:on-press #(js/alert "Item pressed")}
            item)]])
 
-(defn view
-  []
-  (let [activity-list temp/activity-list]
+(defn- view-internal
+  [{:keys [theme]}]
+  (let [activity-list []]
     (if (empty? activity-list)
       [empty-tab/view
-       {:title        (i18n/label :t/no-activity)
-        :description  (i18n/label :t/empty-tab-description)
-        :placeholder? true}]
+       {:title       (i18n/label :t/no-activity)
+        :description (i18n/label :t/empty-tab-description)
+        :image       (resources/get-themed-image :no-activity theme)}]
       [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,19 +1,21 @@
 (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
-  []
+(defn- view-internal
+  [{:keys [theme]}]
   (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)
-        :placeholder? true}]
+       {:title       (i18n/label :t/no-collectibles)
+        :description (i18n/label :t/no-collectibles-description)
+        :image       (resources/get-themed-image :no-collectibles theme)}]
       [rn/flat-list
        {:data                    collectible-list
         :style                   {:flex 1}
@@ -25,3 +27,5 @@
                                      :on-press #(rf/dispatch
                                                  [:navigate-to
                                                   :wallet-collectible])}])}])))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -22,7 +22,9 @@
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
     "Create Account"]
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
-    "Saved Addresses"]])
+    "Saved Addresses"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-send-input-amount])}
+    "Send: input amount"]])
 
 (defn wallet-overview-state
   [networks]

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

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

src/status_im2/contexts/wallet/send/input_amount/style.cljs

@@ -0,0 +1,8 @@
+(ns status-im2.contexts.wallet.send.input-amount.style)
+
+(def screen
+  {:flex 1})
+
+(def input-container
+  {:padding-top    12
+   :padding-bottom 0})

src/status_im2/contexts/wallet/send/input_amount/view.cljs

@@ -0,0 +1,93 @@
+(ns status-im2.contexts.wallet.send.input-amount.view
+  (:require
+   [clojure.string :as string]
+   [quo.core :as quo]
+   [quo.theme :as quo.theme]
+   [react-native.core :as rn]
+   [reagent.core :as reagent]
+   [status-im2.contexts.wallet.send.input-amount.style :as style]
+   [utils.i18n :as i18n]
+   [utils.re-frame :as rf]))
+
+(defn- make-limit-label
+  [{:keys [amount currency]}]
+  (str amount " " (string/upper-case (name currency))))
+
+(defn- make-new-input
+  [current v]
+  (let [dot               "."
+        max-length        12
+        length-owerflow?  (>= (count current) max-length)
+        ignore-extra-dot? (and (= v dot) (string/includes? current dot))
+        ignore-value?     (or
+                           ignore-extra-dot?
+                           length-owerflow?)]
+    (if ignore-value?
+      current
+      (str current v))))
+
+(defn- view-internal
+  [_]
+  (let [token                 :eth
+        {:keys [currency]}    (rf/sub [:profile/profile])
+        networks              (rf/sub [:wallet/network-details])
+        conversion-rate       10
+        limit-crypto          286.32
+        limit-fiat            (* limit-crypto conversion-rate)
+        input-value           (reagent/atom "")
+        current-limit         (reagent/atom {:amount   limit-crypto
+                                             :currency token})
+        handle-swap           (fn [crypto?]
+                                (let [num-value (parse-double @input-value)]
+                                  (reset! current-limit (if crypto?
+                                                          {:amount   limit-crypto
+                                                           :currency token}
+                                                          {:amount   limit-fiat
+                                                           :currency currency}))
+                                  (when (> num-value (:amount @current-limit))
+                                    (reset! input-value ""))))
+        handle-keyboard-press (fn [v]
+                                (let [current-value @input-value
+                                      new-value     (make-new-input current-value v)
+                                      num-value     (parse-double new-value)]
+                                  (when (<= num-value (:amount @current-limit))
+                                    (reset! input-value new-value))))
+        handle-delete         (fn [_]
+                                (swap! input-value #(subs % 0 (dec (count %)))))]
+    (fn [{:keys [on-confirm]
+          :or   {on-confirm #(js/alert "Confirmed")}}]
+      (let [limit-label (make-limit-label @current-limit)]
+        [rn/view
+         {:style style/screen}
+         [quo/page-nav
+          {:background       :blur
+           :icon-name        :i/arrow-left
+           :on-press         #(rf/dispatch [:navigate-back])
+           :right-side       :account-switcher
+           :account-switcher {:customization-color :yellow
+                              :emoji               "🎮"
+                              :on-press            #(js/alert "Switch account")}}]
+         [quo/token-input
+          {:container-style style/input-container
+           :token           token
+           :currency        currency
+           :networks        networks
+           :title           (i18n/label :t/send-limit {:limit limit-label})
+           :conversion      conversion-rate
+           :show-keyboard?  false
+           :value           @input-value
+           :on-swap         handle-swap}]
+         ;; Network routing content to be added
+         [rn/scroll-view]
+         [quo/bottom-actions
+          {:actions          :1-action
+           :button-one-label (i18n/label :t/confirm)
+           :button-one-props {:disabled? (empty? @input-value)
+                              :on-press  on-confirm}}]
+         [quo/numbered-keyboard
+          {:left-action :dot
+           :delete-key? true
+           :on-press    handle-keyboard-press
+           :on-delete   handle-delete}]]))))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/navigation/screens.cljs

@@ -49,6 +49,7 @@
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
     [status-im2.contexts.wallet.scan-account.view :as scan-address]
+    [status-im2.contexts.wallet.send.input-amount.view :as wallet-send-input-amount]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im2.navigation.options :as options]
     [status-im2.navigation.transitions :as transitions]))
@@ -287,6 +288,11 @@
     {:name      :wallet-saved-addresses
      :component wallet-saved-addresses/view}
 
+    {:name      :wallet-send-input-amount
+     :options   {:modalPresentationStyle :overCurrentContext
+                 :insets                 {:top? true}}
+     :component wallet-send-input-amount/view}
+
     {:name      :wallet-select-address
      :options   {:modalPresentationStyle :overCurrentContext}
      :component wallet-select-address/view}

translations/en.json

@@ -2389,5 +2389,8 @@
     "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"
+    "address-copied": "Address copied",
+    "no-dapps-description": "We want dApps!",
+    "send-limit": "Max: {{limit}}"
 }
+