Update drawer/bottom-actions component with top & top error variants (#18513)

src/quo/components/buttons/button/properties.cljs

@@ -4,14 +4,15 @@
 
 (def backgrounds #{:photo :blur})
 
-(defn custom-color-type
+(defn- custom-color-type
-  [customization-color icon-only?]
+  [customization-color icon-only? theme]
-  {:icon-color       colors/white-opa-70
+  {:icon-color                  colors/white-opa-70
-   :label-color      colors/white
+   :label-color                 colors/white
-   :background-color (colors/custom-color customization-color 50)
+   :background-color            (colors/resolve-color customization-color theme)
-   :border-radius    (when icon-only? 24)})
+   :border-radius               (when icon-only? 24)
+   :overlay-customization-color customization-color})
 
-(defn grey-photo
+(defn- grey-photo
   [theme pressed?]
   {:icon-color         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
    :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -24,7 +25,7 @@
                                               theme))
    :blur-type          (if (= theme :light) :light :dark)})
 
-(defn grey-blur
+(defn- grey-blur
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -32,7 +33,7 @@
                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
 
-(defn outline-blur
+(defn- outline-blur
   [theme pressed?]
   {:icon-color   (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
    :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -40,7 +41,7 @@
                    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
                    (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
 
-(defn grey
+(defn- grey
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -50,7 +51,7 @@
                                             colors/neutral-90
                                             theme))})
 
-(defn dark-grey
+(defn- dark-grey
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -58,7 +59,7 @@
                        (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
                        (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
 
-(defn outline
+(defn- outline
   [theme pressed?]
   {:icon-color   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
@@ -66,29 +67,33 @@
                    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
                    (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
 
-(defn ghost
+(defn- ghost
   [theme pressed?]
   {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
    :background-color (when pressed?
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
-(defn black
+(defn- black
   [pressed?]
   {:label-color      colors/white
    :background-color (if pressed? colors/neutral-80 colors/neutral-95)})
 
 (defn get-values
   [{:keys [customization-color theme type background pressed? icon-only?]}]
-  (cond
+  (let [customization-color (get {:primary  customization-color
-    (= type :primary)                            (custom-color-type customization-color icon-only?)
+                                  :positive :success
-    (= type :positive)                           (custom-color-type customization-color icon-only?)
+                                  :danger   :danger}
-    (= type :danger)                             (custom-color-type customization-color icon-only?)
+                                 type)]
-    (and (= :photo background) (= type :grey))   (grey-photo theme pressed?)
+    (cond
-    (and (= :blur background) (= type :grey))    (grey-blur theme pressed?)
+      (contains? #{:primary :positive :danger} type) (custom-color-type customization-color
-    (and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
+                                                                        icon-only?
-    (= type :grey)                               (grey theme pressed?)
+                                                                        theme)
-    (= type :dark-grey)                          (dark-grey theme pressed?)
+      (and (= :photo background) (= type :grey))     (grey-photo theme pressed?)
-    (= type :outline)                            (outline theme pressed?)
+      (and (= :blur background) (= type :grey))      (grey-blur theme pressed?)
-    (= type :ghost)                              (ghost theme pressed?)
+      (and (= :blur background) (= type :outline))   (outline-blur theme pressed?)
-    (= type :black)                              (black pressed?)))
+      (= type :grey)                                 (grey theme pressed?)
+      (= type :dark-grey)                            (dark-grey theme pressed?)
+      (= type :outline)                              (outline theme pressed?)
+      (= type :ghost)                                (ghost theme pressed?)
+      (= type :black)                                (black pressed?))))

src/quo/components/buttons/button/view.cljs

@@ -37,13 +37,10 @@
                pressed? on-press-in on-press-out allow-multiple-presses?]
         :or   {type                :primary
                size                40
-               customization-color (cond (= type :primary)  :blue
+               customization-color (if (= type :primary) :blue nil)}}
-                                         (= type :positive) :success
-                                         (= type :danger)   :danger
-                                         :else              nil)}}
        children]
       (let [{:keys [icon-color background-color label-color border-color blur-type
-                    blur-overlay-color border-radius]}
+                    blur-overlay-color border-radius overlay-customization-color]}
             (button-properties/get-values {:customization-color customization-color
                                            :background          background
                                            :type                type
@@ -79,9 +76,9 @@
                                             :icon-left        icon-left
                                             :icon-right       icon-right})
                     inner-style)}
-           (when customization-color
+           (when overlay-customization-color
              [customization-colors/overlay
-              {:customization-color customization-color
+              {:customization-color overlay-customization-color
                :theme               theme
                :pressed?            (if pressed? pressed? @pressed-state?)}])
            (when (= background :photo)

src/quo/components/drawers/bottom_actions/component_spec.cljs

@@ -3,34 +3,60 @@
     [quo.components.drawers.bottom-actions.view :as bottom-actions]
     [test-helpers.component :as h]))
 
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
 (h/describe "bottom actions tests"
   (h/test "default render with no description and single action button"
-    (h/render [bottom-actions/view {:button-one-label "Request to join"}])
+    (render [bottom-actions/view {:actions :one-action :button-one-label "Request to join"}])
     (h/is-truthy (h/get-by-text "Request to join")))
 
-  (h/test "render with description"
+  (h/test "render with description & 1 action"
-    (h/render [bottom-actions/view {:description "Sample description"}])
+    (render [bottom-actions/view
-    (h/is-truthy (h/get-by-text "Sample description")))
+             {:description      :bottom
+              :description-text "Sample description"
+              :actions          :one-action
+              :button-one-label "Request to join"}])
+    (h/is-truthy (h/get-by-text "Sample description"))
+    (h/is-truthy (h/get-by-text "Request to join")))
 
   (h/test "render with 2 actions"
     (let [button-one "Button One"
           button-two "Button Two"]
-      (h/render [bottom-actions/view
+      (render [bottom-actions/view
-                 {:actions          :2-actions
+               {:actions          :two-actions
-                  :button-one-label button-one
+                :button-one-label button-one
-                  :button-one-props {:icon-left :i/arrow-left}
+                :button-one-props {:icon-left :i/arrow-left}
-                  :button-two-label button-two}])
+                :button-two-label button-two}])
       (h/is-truthy (h/get-by-text button-one))
       (h/is-truthy (h/get-by-label-text :icon))
       (h/is-truthy (h/get-by-text button-two))))
 
   (h/test "render disabled button"
-    (h/render [bottom-actions/view
+    (render [bottom-actions/view
-               {:description      "Sample description"
+             {:description      :bottom
-                :button-one-props {:disabled? true}
+              :actions          :one-action
-                :button-one-label "button"}])
+              :description-text "Sample description"
+              :button-one-props {:disabled? true}
+              :button-one-label "button"}])
     (h/is-disabled (h/get-by-label-text :button-one)))
 
-  (h/test "sane defaults"
+  (h/test "render with error & 1 action"
-    (h/render [bottom-actions/view {}])
+    (render [bottom-actions/view
-    (h/is-truthy (h/get-by-label-text :button-one))))
+             {:description      :top-error
+              :error-message    "Sample error"
+              :actions          :one-action
+              :button-one-label "Request to join"}])
+    (h/is-truthy (h/get-by-text "Sample error"))
+    (h/is-truthy (h/get-by-text "Request to join")))
+
+  (h/test "render with top description & 1 action"
+    (render [bottom-actions/view
+             {:description      :top
+              :role             :admin
+              :actions          :one-action
+              :button-one-label "Request to join"}])
+    (h/is-truthy (h/get-by-text "Eligible to join as"))
+    (h/is-truthy (h/get-by-text "Admin"))
+    (h/is-truthy (h/get-by-text "Request to join"))))

src/quo/components/drawers/bottom_actions/style.cljs

@@ -2,34 +2,58 @@
   (:require
     [quo.foundations.colors :as colors]))
 
+(defn- text-color
+  [scroll? blur? theme]
+  (cond
+    scroll? (if blur?
+              colors/white-70-blur
+              (colors/theme-colors colors/neutral-80-opa-70
+                                   colors/white-opa-70
+                                   theme))
+    blur?   colors/white-opa-40
+    :else   (colors/theme-colors colors/neutral-50
+                                 colors/neutral-40
+                                 theme)))
+
+(defn container
+  [scroll? blur? theme]
+  {:background-color (when-not (or scroll? blur?)
+                       (colors/theme-colors colors/white colors/neutral-95 theme))})
+
 (def buttons-container
   {:flex-direction     :row
    :justify-content    :space-around
    :padding-vertical   12
+   :gap                12
    :padding-horizontal 20})
 
 (def button-container
   {:flex 1})
 
-(def button-container-2-actions
+(def description-top
-  (assoc button-container :margin-right 12))
+  {:flex-direction  :row
+   :align-items     :center
+   :gap             5
+   :padding-top     12
+   :padding-bottom  4
+   :justify-content :center})
 
-(defn description
+(defn description-top-text
-  [theme scroll?]
+  [scroll? blur? theme]
-  {:color              (colors/theme-colors
+  {:color (text-color scroll? blur? theme)})
-                        (if scroll?
+
-                          (colors/custom-color colors/neutral-80 70)
+(defn description-bottom
-                          colors/neutral-50)
+  [scroll? blur? theme]
-                        (if scroll?
+  {:color              (text-color scroll? blur? theme)
-                          colors/white-opa-70
-                          colors/neutral-40)
-                        theme)
    :text-align         :center
+   :padding-bottom     12
    :padding-horizontal 40})
 
-(def scroll
+(def error-message
-  {:margin-top        21
+  {:flex-direction     :row
-   :margin-horizontal 120
+   :gap                4
-   :margin-bottom     8
+   :justify-content    :center
-   :width             134
+   :align-items        :center
-   :height            5})
+   :padding-top        15
+   :padding-horizontal 20
+   :padding-bottom     7})

src/quo/components/drawers/bottom_actions/view.cljs

@@ -2,55 +2,105 @@
   (:require
     [quo.components.buttons.button.view :as button]
     [quo.components.drawers.bottom-actions.style :as style]
+    [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
+    [quo.components.tags.context-tag.view :as context-tag]
+    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [schema.core :as schema]
+    [utils.i18n :as i18n]))
 
-(def default-props
+(def ?schema
-  {:button-one-type     :primary
+  [:=>
-   :button-two-type     :grey
+   [:catn
-   :customization-color :blue})
+    [:props
+     [:map {:closed true}
+      [:actions [:maybe [:enum :one-action :two-actions]]]
+      [:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
+      [:description-text {:optional true} [:maybe :string]]
+      [:error-message {:optional true} [:maybe :string]]
+      [:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
+      [:button-one-label {:optional true} [:maybe :string]]
+      [:button-two-label {:optional true} [:maybe :string]]
+      [:button-one-props {:optional true} [:maybe :map]]
+      [:button-two-props {:optional true} [:maybe :map]]
+      [:theme :schema.common/theme]
+      [:scroll? {:optional true} [:maybe :boolean]]
+      [:blur? {:optional true} [:maybe :boolean]]
+      [:container-style {:optional true} [:maybe :map]]]]]
+   :any])
+
+(def ^:private role-icon
+  {:admin        :i/gavel
+   :member       :i/members
+   :token-master :i/token-master
+   :owner        :i/crown})
 
 (defn- view-internal
-  "Options:
+  [{:keys [actions description description-text error-message role button-one-label button-two-label
-
+           blur? button-one-props button-two-props theme scroll? container-style]}]
-  :actions - keyword (default nil) - :1-action/:2-actions
+  [blur/view
-  :description - string (default nil) - Description to display below the title
+   {:blur-amount   20
-  :button-one-label - string (default nil) - Label for the first button
+    :blur-type     :transparent
-  :button-two-label - string (default nil) - Label for the second button
+    :overlay-color (if blur?
-  :button-one-props - map with props for button one
+                     colors/neutral-80-opa-1-blur
-  :button-two-props - map with props for button two
+                     (colors/theme-colors colors/white-70-blur
-  :theme - :light/:dark
+                                          colors/neutral-95-opa-70-blur
-  :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
+                                          theme))}
-  [props]
+   [rn/view
-  (let [{:keys [actions description button-one-label button-two-label
+    {:style (merge (style/container scroll? blur? theme) container-style)}
-                button-one-props button-two-props theme scroll? customization-color container-style]}
+    (when (= description :top-error)
-        (merge default-props props)]
+      [rn/view {:style style/error-message}
-    [rn/view {:style container-style}
+       [icon/icon
-     [rn/view {:style style/buttons-container}
+        :i/alert
-      (when (= actions :2-actions)
+        {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-        [button/button
+         :size  16}]
-         (merge
-          {:size                40
-           :background          (when scroll? :blur)
-           :container-style     style/button-container-2-actions
-           :theme               theme
-           :accessibility-label :button-two}
-          button-two-props)
-         button-two-label])
-      [button/button
-       (merge
-        {:size                40
-         :container-style     style/button-container
-         :background          (when scroll? :blur)
-         :theme               theme
-         :accessibility-label :button-one
-         :customization-color customization-color}
-        button-one-props)
-       button-one-label]]
-     (when description
        [text/text
         {:size  :paragraph-2
-         :style (style/description theme scroll?)} description])]))
+         :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
+        error-message]])
 
-(def view (quo.theme/with-theme view-internal))
+    (when (= description :top)
+      [rn/view
+       {:style style/description-top}
+       [text/text
+        {:size  :paragraph-2
+         :style (style/description-top-text scroll? blur? theme)}
+        (i18n/label :t/eligible-to-join-as)]
+       [context-tag/view
+        {:type    :icon
+         :size    24
+         :icon    (role role-icon)
+         :blur?   blur?
+         :context (i18n/label (keyword "t" role))}]])
+
+    [rn/view {:style style/buttons-container}
+     (when (= actions :two-actions)
+       [button/button
+        (merge
+         {:size                40
+          :background          (when (or blur? scroll?) :blur)
+          :container-style     style/button-container
+          :theme               theme
+          :accessibility-label :button-two}
+         button-two-props)
+        button-two-label])
+     [button/button
+      (merge
+       {:size                40
+        :container-style     style/button-container
+        :background          (when (or blur? scroll?) :blur)
+        :theme               theme
+        :accessibility-label :button-one}
+       button-one-props)
+      button-one-label]]
+    (when (= description :bottom)
+      [text/text
+       {:size  :paragraph-2
+        :style (style/description-bottom scroll? blur? theme)} description-text])]])
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs

@@ -55,7 +55,7 @@
         [quo/text
          {:size  :paragraph-2
           :style {:color colors/neutral-50}}
-         (i18n/label :t/eligible-to-join-as {:role ""})]
+         (i18n/label :t/eligible-to-join-as)]
         [quo/context-tag
          {:type    :icon
           :icon    :i/members

src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs

@@ -19,8 +19,10 @@
 (def descriptor
   [{:type    :select
     :key     :actions
-    :options [{:key :1-action}
+    :options [{:key :one-action}
-              {:key :2-actions}]}
+              {:key :two-actions}]}
+   {:key  :button-one-label
+    :type :text}
    {:label   "Button 1 type"
     :type    :select
     :key     :type
@@ -30,6 +32,8 @@
     :type  :boolean
     :key   :disabled?
     :path  [:button-one-props]}
+   {:key  :button-two-label
+    :type :text}
    {:label   "Button 2 type"
     :type    :select
     :key     :type
@@ -39,32 +43,59 @@
     :type  :boolean
     :key   :disabled?
     :path  [:button-two-props]}
-   {:key  :description
+   {:key  :blur?
-    :type :text}
+    :type :boolean}
-   {:key  :button-one-label
-    :type :text}
-   {:key  :button-two-label
-    :type :text}
    {:key  :scroll?
-    :type :boolean}])
+    :type :boolean}
+   {:key     :description
+    :type    :select
+    :options [{:key   nil
+               :value :none}
+              {:key :top}
+              {:key :bottom}
+              {:key :top-error}]}])
+
+(def role-descriptor
+  {:key     :role
+   :type    :select
+   :options [{:key :owner}
+             {:key :token-master}
+             {:key :admin}
+             {:key :member}]})
+
+(def description-descriptor
+  {:key  :description-text
+   :type :text})
+
+(def error-descriptor
+  {:key  :error-message
+   :type :text})
 
 (defn view
   []
-  (let [state (reagent/atom {:actions          :2-actions
+  (let [state (reagent/atom {:actions          :two-actions
-                             :description      description
+                             :description      :bottom
+                             :description-text description
+                             :error-message    "Error message"
                              :button-one-label button-one
                              :button-two-label button-two
-                             :button-one-props {:on-press  (button-press 1)
+                             :button-one-props {:on-press (button-press 1)
-                                                :type      :primary
+                                                :type     :primary}
-                                                :icon-left :i/arrow-up}
                              :button-two-props {:on-press (button-press 2)
                                                 :type     :grey}
+                             :blur?            false
+                             :role             :owner
                              :scroll?          false})]
     (fn []
       [preview/preview-container
        {:state                     state
-        :descriptor                descriptor
+        :descriptor                (merge descriptor
-        :blur?                     (:scroll? @state)
+                                          (case (:description @state)
+                                            :top       role-descriptor
+                                            :bottom    description-descriptor
+                                            :top-error error-descriptor
+                                            nil))
+        :blur?                     (:blur? @state)
         :show-blur-background?     true
         :blur-dark-only?           true
         :component-container-style {:margin-top         40

src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs

@@ -110,7 +110,8 @@
                                                                                          network))}))
                             layer-2-networks)}]
          [quo/bottom-actions
-          {:button-one-label (i18n/label :t/update)
+          {:actions          :one-action
+           :button-one-label (i18n/label :t/update)
            :button-one-props {:disabled?           (= @state :default)
                               :on-press            (fn []
                                                      (let [chain-ids (map :chain-id current-networks)]

src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs

@@ -3,9 +3,13 @@
     [status-im.contexts.wallet.create-account.edit-derivation-path.view :as edit-derivation-path]
     [test-helpers.component :as h]))
 
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
 (h/describe "Edit derivation path page"
   (h/test "Default render"
-    (h/render [edit-derivation-path/view {}])
+    (render [edit-derivation-path/view {}])
     (h/is-truthy (h/get-by-translation-text :t/edit-derivation-path))
     (h/is-truthy (h/get-by-translation-text :t/path-format))
     (h/is-truthy (h/get-by-translation-text :t/derivation-path))
@@ -15,14 +19,14 @@
 
   (h/test "Reveal address pressed"
     (let [on-reveal (h/mock-fn)]
-      (h/render [edit-derivation-path/view {:on-reveal on-reveal}])
+      (render [edit-derivation-path/view {:on-reveal on-reveal}])
       (h/fire-event :press (h/get-by-translation-text :t/reveal-address))
       (h/was-called on-reveal)
       (h/wait-for #(h/is-truthy (h/get-by-translation-text :t/address-activity)))))
 
   (h/test "Reset button pressed"
     (let [on-reset (h/mock-fn)]
-      (h/render [edit-derivation-path/view {:on-reset on-reset}])
+      (render [edit-derivation-path/view {:on-reset on-reset}])
       (h/fire-event :press (h/get-by-translation-text :t/reset))
       (h/was-called on-reset)
       (h/wait-for #(h/is-truthy (h/get-by-translation-text :t/derive-addresses))))))

src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs

@@ -72,7 +72,7 @@
          :default
          [quo/bottom-actions
           {:theme            theme
-           :actions          :1-action
+           :actions          :one-action
            :button-one-label (i18n/label :t/reveal-address)
            :button-one-props {:type      :outline
                               :icon-left :i/keycard-card
@@ -81,7 +81,7 @@
          :empty
          [quo/bottom-actions
           {:theme            theme
-           :actions          :1-action
+           :actions          :one-action
            :button-one-label (i18n/label :t/derive-addresses)
            :button-one-props {:type      :outline
                               :icon-left :i/keycard-card
@@ -111,7 +111,7 @@
        [rn/view {:style (style/save-button-container bottom)}
         [quo/bottom-actions
          {:theme            theme
-          :actions          :1-action
+          :actions          :one-action
           :button-one-label (i18n/label :t/save)
           :button-one-props {:type      :primary
                              :on-press  #(js/alert "Save!")

src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs

@@ -77,7 +77,8 @@
        (if @revealed?
          [rn/view {:style style/slide-button}
           [quo/bottom-actions
-           {:button-one-label (i18n/label :t/i-have-written)
+           {:actions          :one-action
+            :button-one-label (i18n/label :t/i-have-written)
             :button-one-props {:disabled?           (some false? (vals @checked?))
                                :customization-color customization-color
                                :on-press            #(rf/dispatch [:navigate-to
@@ -87,7 +88,8 @@
             :style (style/description-text theme)}
            (i18n/label :t/next-you-will)]]
          [quo/bottom-actions
-          {:button-one-label (i18n/label :t/reveal-phrase)
+          {:actions          :one-action
+           :button-one-label (i18n/label :t/reveal-phrase)
            :button-one-props {:disabled?           (some false? (vals @checked?))
                               :customization-color customization-color
                               :on-press            #(reset! revealed? true)}

src/status_im/contexts/wallet/create_account/select_keypair/view.cljs

@@ -75,7 +75,8 @@
         :container-style     {:margin-horizontal 20
                               :margin-vertical   8}})]
      [quo/bottom-actions
-      {:button-one-label (i18n/label :t/confirm-account-origin)
+      {:actions          :one-action
+       :button-one-label (i18n/label :t/confirm-account-origin)
        :button-one-props {:disabled?           true
                           :customization-color customization-color}
        :container-style  style/bottom-action-container}]]))

src/status_im/contexts/wallet/send/input_amount/component_spec.cljs

@@ -47,15 +47,19 @@
    :wallet/wallet-send-suggested-routes          {:candidates []}
    :wallet/wallet-send-selected-networks         []})
 
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
 (h/describe "Send > input amount screen"
   (h/setup-restorable-re-frame)
 
   (h/test "Default render"
     (h/setup-subs sub-mocks)
-    (h/render [input-amount/view
+    (render [input-amount/view
-               {:crypto-decimals          2
+             {:crypto-decimals          2
-                :limit-crypto             250
+              :limit-crypto             250
-                :initial-crypto-currency? false}])
+              :initial-crypto-currency? false}])
     (h/is-truthy (h/get-by-text "0"))
     (h/is-truthy (h/get-by-text "ETH"))
     (h/is-truthy (h/get-by-text "$0.00"))
@@ -65,11 +69,11 @@
   (h/test "Fill token input and confirm"
     (h/setup-subs sub-mocks)
     (let [on-confirm (h/mock-fn)]
-      (h/render [input-amount/view
+      (render [input-amount/view
-                 {:on-confirm               on-confirm
+               {:on-confirm               on-confirm
-                  :crypto-decimals          10
+                :crypto-decimals          10
-                  :limit-crypto             1000
+                :limit-crypto             1000
-                  :initial-crypto-currency? false}])
+                :initial-crypto-currency? false}])
 
       (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
@@ -89,11 +93,11 @@
     (h/setup-subs sub-mocks)
 
     (let [on-confirm (h/mock-fn)]
-      (h/render [input-amount/view
+      (render [input-amount/view
-                 {:crypto-decimals          10
+               {:crypto-decimals          10
-                  :limit-crypto             1000
+                :limit-crypto             1000
-                  :on-confirm               on-confirm
+                :on-confirm               on-confirm
-                  :initial-crypto-currency? false}])
+                :initial-crypto-currency? false}])
 
       (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
@@ -111,9 +115,9 @@
 
   (h/test "Try to fill more than limit"
     (h/setup-subs sub-mocks)
-    (h/render [input-amount/view
+    (render [input-amount/view
-               {:crypto-decimals 1
+             {:crypto-decimals 1
-                :limit-crypto    1}])
+              :limit-crypto    1}])
 
     (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
     (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
@@ -123,10 +127,10 @@
 
   (h/test "Switch from crypto to fiat and check limit"
     (h/setup-subs sub-mocks)
-    (h/render [input-amount/view
+    (render [input-amount/view
-               {:crypto-decimals 1
+             {:crypto-decimals 1
-                :limit-crypto    1
+              :limit-crypto    1
-                :on-confirm      #()}])
+              :on-confirm      #()}])
 
     (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
     (h/is-truthy (h/get-by-label-text :container-error))

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

@@ -222,11 +222,11 @@
            :input-value  @input-value
            :fetch-routes #(fetch-routes % current-limit)}]
          [quo/bottom-actions
-          {:actions             :1-action
+          {:actions          :one-action
-           :customization-color color
+           :button-one-label (i18n/label :t/confirm)
-           :button-one-label    (i18n/label :t/confirm)
+           :button-one-props {:disabled?           confirm-disabled?
-           :button-one-props    {:disabled? confirm-disabled?
+                              :on-press            on-confirm
-                                 :on-press  on-confirm}}]
+                              :customization-color color}}]
          [quo/numbered-keyboard
           {:container-style (style/keyboard-container bottom)
            :left-action     :dot

translations/en.json

@@ -2260,9 +2260,9 @@
     "sync-devices-complete-title": "Device sync complete!",
     "sync-devices-complete-sub-title": "Your devices are now in sync",
     "synced-with": "Synced with",
-    "eligible-to-join-as": "Eligible to join as {{role}}",
     "you-eligible-to-join": "You’re eligible to join",
     "you-eligible-to-join-as": "You’re eligible to join as {{role}}",
+    "eligible-to-join-as": "Eligible to join as",
     "you-not-eligible-to-join": "You’re not eligible to join",
     "you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
     "token-gated-communities": "Token gated communities",