Implementation of Info message, Information Box component and ENS Banner

src/quo2/components/info_message.cljs

@@ -0,0 +1,40 @@
+(ns quo2.components.info-message
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [quo2.components.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]))
+
+(def themes
+  {:light {:default      colors/neutral-40
+           :success      colors/success-50
+           :error        colors/danger-50}
+   :dark  {:default      colors/neutral-60
+           :success      colors/success-60
+           :error        colors/danger-60}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn info-message
+  "[info-message opts \"message\"]
+  opts
+  {:type       :default/:success/:error
+   :size       :default/:tiny
+   :icon       :main-icons/info ;; info message icon
+   :text-color colors/white     ;; text color override
+   :icon-color colors/white     ;; icon color override"
+  [{:keys [type size icon text-color icon-color]} message]
+  (let [weight      (if (= size :default) :regular :medium)
+        size        (if (= size :default) :paragraph-2 :label)
+        text-color  (or text-color (get-color type))
+        icon-color  (or icon-color text-color)]
+    [rn/view {:style {:flex-direction :row
+                      :flex           1}}
+     [quo2.icons/icon icon {:color           icon-color
+                            :size            12
+                            :container-style {:margin-top 3}}]
+     [text/text {:size   size
+                 :weight weight
+                 :style  {:color             text-color
+                          :margin-horizontal 8}} message]]))

src/quo2/components/information_box.cljs

@@ -0,0 +1,106 @@
+(ns quo2.components.information-box
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [clojure.string :as string]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.button :as quo2.button]
+            [status-im.utils.handlers :refer [<sub]]
+            [quo2.components.info-message :as info-message]
+            [status-im.async-storage.core :as async-storage]))
+
+(def themes
+  {:light {:default     {:bg     colors/white
+                         :border colors/neutral-20
+                         :icon   colors/neutral-50
+                         :text   colors/black}
+           :informative {:bg     colors/primary-50-opa-5
+                         :border colors/primary-50-opa-10
+                         :icon   colors/primary-50
+                         :text   colors/black}
+           :error       {:bg     colors/danger-50-opa-5
+                         :border colors/danger-50-opa-10
+                         :icon   colors/danger-50
+                         :text   colors/danger-50}
+           :close-button colors/black}
+   :dark  {:default     {:bg     colors/neutral-90
+                         :border colors/neutral-70
+                         :icon   colors/neutral-40
+                         :text   colors/white}
+           :informative {:bg     colors/primary-50-opa-5
+                         :border colors/primary-50-opa-10
+                         :icon   colors/white
+                         :text   colors/white}
+           :error       {:bg     colors/danger-50-opa-5
+                         :border colors/danger-50-opa-10
+                         :icon   colors/danger-50
+                         :text   colors/danger-50}
+           :close-button colors/white}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn get-color-by-type [type key]
+  (get-in themes [(theme/get-theme) type key]))
+
+(defn id-hash [id public-key global?]
+  (if global?
+    (hash id)
+    (hash (str public-key id))))
+
+(defn close-information-box [id public-key global? closed? on-close]
+  (reset! closed? true)
+  (async-storage/set-item! (id-hash id public-key global?) true)
+  (when on-close (on-close)))
+
+(defn information-box
+  "[information-box opts \"message\"]
+   opts
+   {:type            :default/:informative/:error
+    :closable?       true/false          ;; allow information box to be closed?
+    :id              :information-box-id ;; unique id (required for closable? information box)
+    :global?         true/ false         ;; close information box across all profiles
+    :icon            :main-icons/info    ;; information box icon
+    :style           style
+    :button-label    \"PressMe\"         ;; add action button with label
+    :on-button-press action              ;; (required for information box with button-label)
+    :on-close        on-close            ;; (optional on-close call)"
+  [{:keys [closable? id global?]} _]
+  (let [closed?    (reagent/atom true)
+        public-key (when (and closable? (not global?)) (<sub [:multiaccount/public-key]))]
+    (when closable?
+      (async-storage/get-item (id-hash id public-key global?) #(reset! closed? %)))
+    (fn [{:keys [type closable? id global? icon style button-label on-button-press on-close]} message]
+      (when-not (and closable? @closed?)
+        (let [background-color (get-color-by-type type :bg)
+              border-color     (get-color-by-type type :border)
+              icon-color       (get-color-by-type type :icon)
+              text-color       (get-color-by-type type :text)
+              include-button?  (not (string/blank? button-label))]
+          [rn/view {:style (merge {:background-color   background-color
+                                   :border-color       border-color
+                                   :border-width       1
+                                   :border-radius      12
+                                   :padding-vertical   (if include-button? 10 11)
+                                   :padding-horizontal 16} style)}
+           [rn/view {:style {:flex-direction :row
+                             :align-self     :flex-start}}
+            [info-message/info-message {:size        :default
+                                        :icon        icon
+                                        :text-color  text-color
+                                        :icon-color  icon-color} message]
+            (when closable?
+              [rn/touchable-opacity
+               {:on-press #(close-information-box id public-key global? closed? on-close)}
+               [quo2.icons/icon :main-icons2/close {:size            12
+                                                    :color           (get-color :close-button)
+                                                    :container-style {:margin-top  3
+                                                                      :margin-left 8}}]])]
+           (when include-button?
+             [quo2.button/button {:type     :primary
+                                  :size     24
+                                  :on-press on-button-press
+                                  :style    {:margin-left 20
+                                             :margin-top  8
+                                             :align-self :flex-start}} button-label])])))))

src/quo2/foundations/typography.cljs

@@ -18,8 +18,7 @@
 
 (def label {:font-size   11
             :line-height 15.62
-            :letter-spacing -0.055
-            :text-transform :uppercase})
+            :letter-spacing -0.055})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 
@@ -29,4 +28,4 @@
 
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
-(def monospace {:font-family "InterStatus-Regular"})
+(def monospace {:font-family "InterStatus-Regular"})

src/quo2/screens/info_message.cljs

@@ -0,0 +1,47 @@
+(ns quo2.screens.info-message
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.info-message :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :success
+                             :value "Success"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :tiny
+                             :value "Tiny"}]}
+                 {:label "Message"
+                  :key   :message
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type    :default
+                             :size    :default
+                             :icon    :main-icons2/placeholder
+                             :message "This is a message"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/info-message @state (:message @state)]]])))
+
+(defn preview-info-message []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/information_box.cljs

@@ -0,0 +1,49 @@
+(ns quo2.screens.information-box
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.information-box :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :informative
+                             :value "Informative"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label "Closable?:"
+                  :key   :closable?
+                  :type  :boolean}
+                 {:label "Message"
+                  :key   :message
+                  :type  :text}
+                 {:label "Button Label"
+                  :key   :button-label
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type         :default
+                             :closable?    true
+                             :icon         :main-icons2/placeholder
+                             :message      "This is an information box This is an information"
+                             :button-label "Press Me"
+                             :style         {:width 335}
+                             :id            (keyword (str "id-" (rand-int 10000)))})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/information-box @state (:message @state)]]])))
+
+(defn preview-information-box []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -9,6 +9,8 @@
             [quo2.screens.status-tags :as status-tags]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
+            [quo2.screens.info-message :as info-message]
+            [quo2.screens.information-box :as information-box]
             [quo.components.safe-area :as safe-area]
             [quo.core :as quo]))
 
@@ -29,7 +31,13 @@
                :component segmented/preview-segmented}
               {:name      :quo2-counter
                :insets    {:top false}
-               :component counter/preview-counter}])
+               :component counter/preview-counter}
+              {:name      :info-message
+               :insets    {:top false}
+               :component info-message/preview-info-message}
+              {:name      :information-box
+               :insets    {:top false}
+               :component information-box/preview-information-box}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row

src/status_im/ui/screens/home/views.cljs

@@ -29,7 +29,8 @@
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.chat-icon.styles :as chat-icon.styles]
             [quo2.foundations.colors :as quo2.colors]
-            [quo2.components.button :as quo2.button])
+            [quo2.components.button :as quo2.button]
+            [quo2.components.information-box :as information-box])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn home-tooltip-view []
@@ -187,6 +188,18 @@
                                         [home-tooltip-view]
                                         [react/view {:height 68}])}])))
 
+(defn ens-banner-view []
+  [information-box/information-box
+   {:type            :informative
+    :closable?       true
+    :icon            :main-icons/info
+    :style           {:margin 20}
+    :button-label    (i18n/label :t/open-dapp2)
+    :on-button-press #(re-frame/dispatch [:browser.ui/open-url "https://ens-collect.status.im/"])
+    :id              :ens-banner-5
+    :global?         true}
+   (i18n/label :t/ens-banner-message)])
+
 (views/defview communities-and-chats-old []
   (views/letsubs [{:keys [items search-filter]} [:home-items]
                   hide-home-tooltip? [:hide-home-tooltip?]]
@@ -205,6 +218,7 @@
         :header                       [:<>
                                        (when (or (seq items) @search-active? (seq search-filter))
                                          [search-input-wrapper-old search-filter (empty? items)])
+                                       [ens-banner-view]
                                        (when (and (empty? items)
                                                   (or @search-active? (seq search-filter)))
                                          [start-suggestion search-filter])]

translations/en.json

@@ -986,6 +986,8 @@
     "open": "Open",
     "open-home": "Open...",
     "open-dapp": "Open ÐApp",
+    "open-dapp2": "Open dApp",
+    "ens-banner-message": "If you registered a stateofus.eth name you might be eligible to collect $ENS",
     "open-dapp-store": "Discover ÐApps",
     "open-nfc-settings": "Open NFC settings",
     "open-on-block-explorer": "Open on block explorer",