Screens for editing transaction settings

src/quo/components/inputs/input/style.cljs

@@ -133,7 +133,7 @@
   [variant-colors]
   {:color (:label variant-colors)})
 
-(def counter-container
+(def right-label-container
   {:flex        1
    :align-items :flex-end})
 

src/quo/components/inputs/input/view.cljs

@@ -7,8 +7,8 @@
             [react-native.core :as rn]
             [react-native.platform :as platform]))
 
-(defn- label-&-counter
-  [{:keys [label current-chars char-limit variant-colors theme]}]
+(defn- label-line
+  [{:keys [label label-right current-chars char-limit variant-colors theme]}]
   [rn/view
    {:accessibility-label :input-labels
     :style               style/texts-container}
@@ -18,17 +18,25 @@
       :weight :medium
       :size   :paragraph-2}
      label]]
-   (when-let [count-text (some->> char-limit
-                                  (str current-chars "/"))]
-     [rn/view {:style style/counter-container}
+   (when label-right
+     [rn/view {:style style/right-label-container}
       [text/text
-       {:style  (style/counter-color {:current-chars  current-chars
-                                      :char-limit     char-limit
-                                      :variant-colors variant-colors
-                                      :theme          theme})
+       {:style  (style/label-color variant-colors)
         :weight :regular
         :size   :paragraph-2}
-       count-text]])])
+       label-right]])
+   (when char-limit
+     (when-let [count-text (some->> char-limit
+                                    (str current-chars "/"))]
+       [rn/view {:style style/right-label-container}
+        [text/text
+         {:style  (style/counter-color {:current-chars  current-chars
+                                        :char-limit     char-limit
+                                        :variant-colors variant-colors
+                                        :theme          theme})
+          :weight :regular
+          :size   :paragraph-2}
+         count-text]]))])
 
 (defn- left-accessory
   [{:keys [variant-colors small? icon-name]}]
@@ -65,7 +73,7 @@
 (defn- base-input
   [{:keys [blur? error? right-icon left-icon disabled? small? button
            label char-limit multiline? clearable? on-focus on-blur container-style input-container-style
-           on-change-text on-char-limit-reach weight default-value on-clear placeholder]
+           on-change-text on-char-limit-reach weight default-value on-clear placeholder label-right]
     :as   props}]
   (let [theme                  (quo.theme/use-theme)
         ref                    (rn/use-ref-atom nil)
@@ -115,10 +123,11 @@
         ;; https://github.com/facebook/react-native/issues/27687
         modified-placeholder   (if platform/android? (str "\u2009" placeholder) placeholder)]
     [rn/view {:style container-style}
-     (when (or label char-limit)
-       [label-&-counter
+     (when (or label char-limit label-right)
+       [label-line
         {:variant-colors variant-colors
          :label          label
+         :label-right    label-right
          :current-chars  char-count
          :char-limit     char-limit
          :theme          theme}])
@@ -199,6 +208,7 @@
   - :on-clear - Function executed when the clear button is pressed.
   - :button - Map containing `:on-press` & `:text` keys, if provided renders a button
   - :label - A string to set as label for this input.
+  - :label-right - Additional label aligned to the right
   - :char-limit - A number to set a maximum char limit for this input.
   - :on-char-limit-reach - Function executed each time char limit is reached or exceeded.
   - :default-shown? - boolean to show password input initially

src/quo/components/tags/network_tags/style.cljs

@@ -32,8 +32,8 @@
    :padding-bottom   2})
 
 (defn title-style
-  [{:keys [status theme]}]
-  {:padding-left 4
+  [{:keys [status theme networks-shown?]}]
+  {:padding-left (if networks-shown? 4 0)
    :margin-top   -1
    :color        (when (= status :error)
                    (colors/theme-colors

src/quo/components/tags/network_tags/view.cljs

@@ -14,14 +14,16 @@
                                       :theme  theme
                                       :blur?  blur?})
                     container-style)}
-     [preview-list/view
-      {:type   :network
-       :number (count networks)
-       :size   :size-16}
-      networks]
+     (when networks
+       [preview-list/view
+        {:type   :network
+         :number (count networks)
+         :size   :size-16}
+        networks])
      [text/text
       {:weight :medium
        :size   :paragraph-2
-       :style  (style/title-style {:status status
-                                   :theme  theme})}
+       :style  (style/title-style {:status          status
+                                   :theme           theme
+                                   :networks-shown? networks})}
       title]]))

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

@@ -9,9 +9,11 @@
       [:currency-symbol [:maybe [:or :string :keyword]]]
       [:hint-component {:optional true} [:maybe :schema.common/hiccup]]
       [:on-token-press {:optional true} [:maybe fn?]]
-      [:on-swap [:maybe fn?]]
+      [:on-swap {:optional true} [:maybe fn?]]
       [:container-style {:optional true} [:maybe :map]]
       [:error? [:maybe :boolean]]
+      [:show-token-icon? {:optional true} [:maybe :boolean]]
       [:value [:maybe :string]]
-      [:converted-value [:maybe :string]]]]]
+      [:converted-value {:optional true} [:maybe :string]]
+      [:swappable? {:optional true} [:maybe :boolean]]]]]
    :any])

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

@@ -23,9 +23,8 @@
   {:flex-direction :row
    :align-items    :flex-end})
 
-(defn input-container
-  [window-width]
-  {:width          (- window-width 120)
+(def input-container
+  {:flex           1
    :margin-left    8
    :margin-right   8
    :flex-direction :row

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

@@ -20,17 +20,18 @@
    (string/upper-case (or (clj->js text) ""))])
 
 (defn input-section
-  [{:keys [token-symbol on-token-press value error? on-swap currency-symbol]}]
-  (let [theme        (quo.theme/use-theme)
-        window-width (:width (rn/get-window))]
+  [{:keys [token-symbol on-token-press value error? on-swap currency-symbol show-token-icon?
+           swappable?]}]
+  (let [theme (quo.theme/use-theme)]
     [rn/pressable
      {:style    {:width          "100%"
                  :flex-direction :row}
       :on-press on-token-press}
-     [token/view
-      {:token token-symbol
-       :size  :size-32}]
-     [rn/view {:style (style/input-container window-width)}
+     (when show-token-icon?
+       [token/view
+        {:token token-symbol
+         :size  :size-32}])
+     [rn/view {:style style/input-container}
       [rn/text-input
        {:style                  (style/text-input theme error?)
         :placeholder-text-color (style/placeholder-text theme)
@@ -39,14 +40,15 @@
         :editable               false
         :value                  value}]
       [token-name-text theme currency-symbol]]
-     [button/button
-      {:icon                true
-       :icon-only?          true
-       :size                32
-       :on-press            #(when on-swap (on-swap))
-       :type                :outline
-       :accessibility-label :reorder}
-      :i/reorder]]))
+     (when swappable?
+       [button/button
+        {:icon                true
+         :icon-only?          true
+         :size                32
+         :on-press            #(when on-swap (on-swap))
+         :type                :outline
+         :accessibility-label :reorder}
+        :i/reorder])]))
 
 (defn- view-internal
   [{:keys [token-symbol
@@ -57,26 +59,33 @@
            on-swap
            converted-value
            hint-component
-           currency-symbol]}]
+           show-token-icon?
+           currency-symbol
+           swappable?]
+    :or   {show-token-icon? true
+           swappable?       true}}]
   (let [theme (quo.theme/use-theme)
         width (:width (rn/get-window))]
     [rn/view {:style (merge (style/main-container width) container-style)}
      [rn/view {:style style/amount-container}
       [input-section
-       {:theme           theme
-        :token-symbol    token-symbol
-        :on-token-press  on-token-press
-        :value           value
-        :error?          error?
-        :on-swap         on-swap
-        :currency-symbol currency-symbol}]]
+       {:theme            theme
+        :token-symbol     token-symbol
+        :on-token-press   on-token-press
+        :value            value
+        :error?           error?
+        :on-swap          on-swap
+        :currency-symbol  currency-symbol
+        :show-token-icon? show-token-icon?
+        :swappable?       swappable?}]]
      [divider-line/view {:container-style (style/divider theme)}]
      [rn/view {:style style/data-container}
       hint-component
-      [text/text
-       {:size   :paragraph-2
-        :weight :medium
-        :style  (style/converted-amount theme)}
-       converted-value]]]))
+      (when swappable?
+        [text/text
+         {:size   :paragraph-2
+          :weight :medium
+          :style  (style/converted-amount theme)}
+         converted-value])]]))
 
 (def view (schema/instrument #'view-internal component-schema/?schema))

src/status_im/common/controlled_input/utils.cljs

@@ -54,7 +54,7 @@
        (when (money/bignumber? (value-bn state))
          (money/greater-than (value-bn state) (upper-limit-bn state)))))
 
-(defn- lower-limit-exceeded?
+(defn lower-limit-exceeded?
   [state]
   (and (lower-limit state)
        (when (money/bignumber? (value-bn state))
@@ -78,16 +78,19 @@
 
 (defn set-upper-limit
   [state limit]
-  (when limit
+  (if limit
     (-> state
         (assoc :upper-limit limit)
-        recheck-errorness)))
+        recheck-errorness)
+    state))
 
 (defn set-lower-limit
   [state limit]
-  (-> state
-      (assoc :lower-limit limit)
-      recheck-errorness))
+  (if limit
+    (-> state
+        (assoc :lower-limit limit)
+        recheck-errorness)
+    state))
 
 (defn increase
   [state]

src/status_im/contexts/preview/quo/tags/network_tags.cljs

@@ -23,29 +23,31 @@
     :key  :title}
    {:type    :select
     :key     :networks
-    :options [{:key 1}
+    :options [{:key 0}
+              {:key 1}
               {:key 2}
               {:key 3}]}
    {:type :boolean
     :key  :blur?}])
 
-
 (defn view
   []
   (let [state (reagent/atom {:title    "Tag"
                              :status   :default
                              :networks 3})]
     (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true}
-       [rn/view
-        {:style {:align-self      :center
-                 :justify-content :center
-                 :flex            1}}
-        [quo/network-tags
-         (assoc @state
-                :networks
-                (nth community-networks (dec (:networks @state))))]]])))
+      (let [selected-networks-id (dec (:networks @state))]
+        [preview/preview-container
+         {:state                 state
+          :descriptor            descriptor
+          :blur?                 (:blur? @state)
+          :show-blur-background? true}
+         [rn/view
+          {:style {:align-self      :center
+                   :justify-content :center
+                   :flex            1}}
+          [quo/network-tags
+           (assoc @state
+                  :networks
+                  (when (pos? selected-networks-id)
+                    (nth community-networks selected-networks-id)))]]]))))

src/status_im/contexts/preview/quo/wallet/token_input.cljs

@@ -22,21 +22,29 @@
   [{:key     :token-symbol
     :type    :select
     :options [{:key :eth}
-              {:key :snt}]}
+              {:key :snt}
+              {:key :gwei}
+              {:key :units}]}
    {:key     :currency
     :type    :select
     :options [{:key "$"}
               {:key "€"}]}
    {:key  :error?
+    :type :boolean}
+   {:key  :show-token-icon?
+    :type :boolean}
+   {:key  :swappable?
     :type :boolean}])
 
 
 (defn view
   []
-  (let [state (reagent/atom {:token-symbol :eth
-                             :currency     "$"
-                             :crypto?      true
-                             :error?       false})]
+  (let [state (reagent/atom {:token-symbol     :eth
+                             :currency         "$"
+                             :crypto?          true
+                             :error?           false
+                             :show-token-icon? true
+                             :swappable?       true})]
     (fn []
       (let [{:keys [currency token-symbol crypto? error?]} @state
             [input-state set-input-state]                  (rn/use-state controlled-input/init-state)
@@ -67,18 +75,20 @@
           :component-container-style {:flex            1
                                       :justify-content :space-between}}
          [quo/token-input
-          {:token-symbol    token-symbol
-           :currency-symbol (if crypto? token-symbol currency)
-           :error?          error?
-           :value           input-amount
-           :converted-value converted-value
-           :on-swap         (fn []
-                              (swap! state assoc :crypto? (not crypto?))
-                              (swap-between-fiat-and-crypto))
-           :hint-component  [quo/network-tags
-                             {:networks networks
-                              :title    title
-                              :status   (when (:error? @state) :error)}]}]
+          {:token-symbol     token-symbol
+           :currency-symbol  (if crypto? token-symbol currency)
+           :error?           error?
+           :value            input-amount
+           :converted-value  converted-value
+           :on-swap          (fn []
+                               (swap! state assoc :crypto? (not crypto?))
+                               (swap-between-fiat-and-crypto))
+           :hint-component   [quo/network-tags
+                              {:networks networks
+                               :title    title
+                               :status   (when (:error? @state) :error)}]
+           :show-token-icon? (:show-token-icon? @state)
+           :swappable?       (:swappable? @state)}]
          [quo/numbered-keyboard
           {:container-style {:padding-bottom (safe-area/get-top)}
            :left-action     :dot