Implement ENS Banner View

Signed-off-by: Parvesh Monu <parvesh.dhullmonu@gmail.com>

src/quo2/components/button.cljs

@@ -89,7 +89,11 @@
           :padding-left       (when-not (or icon before)
                                 (case size 56 16 40 16 32 12 24 8))
           :padding-right      (when-not (or icon after)
-                                (case size 56 16 40 16 32 12 24 8))}
+                                (case size 56 16 40 16 32 12 24 8))
+          :padding-top        (when-not (or icon before after)
+                                (case size 56 0 40 9 32 5 24 3))
+          :padding-bottom     (when-not (or icon before after)
+                                (case size 56 0 40 9 32 5 24 4))}
          (when width
            {:width width})
          (when icon

src/quo2/foundations/typography.cljs

@@ -1,26 +1,25 @@
 (ns quo2.foundations.typography)
 
-;; Formulat for letter spacing from figma %: 16/{figma-percentage)*100
-(def heading-1 {:font-size   27
-                :line-height 32
-                :letter-spacing -0.762})
+;; Formulat for letter spacing from figma %: font-size*{figma-percentage}/100
+(def heading-1 {:font-size      27
+                :line-height    32
+                :letter-spacing -0.567})
 
-(def heading-2 {:font-size   19
-                :line-height 25.65
-                :letter-spacing -0.1})
+(def heading-2 {:font-size       19
+                :line-height     25.65
+                :letter-spacing  -0.304})
 
-(def paragraph-1 {:font-size   15
-                  :line-height 21.75
-                  :letter-spacing -0.177})
+(def paragraph-1 {:font-size      15
+                  :line-height    21.75
+                  :letter-spacing -0.135})
 
-(def paragraph-2 {:font-size   13
-                  :line-height 18.2
-                  :letter-spacing -0.533})
+(def paragraph-2 {:font-size      13
+                  :line-height    18.2
+                  :letter-spacing -0.039})
 
-(def label {:font-size   11
-            :line-height 15.62
-            :letter-spacing 0.32
-            :text-transform :uppercase})
+(def label {:font-size      11
+            :line-height    15.62
+            :letter-spacing -0.055})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 
@@ -30,4 +29,4 @@
 
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
-(def monospace {:font-family "InterStatus-Regular"})
+(def monospace {:font-family "InterStatus-Regular"})

src/status_im/events.cljs

@@ -312,3 +312,45 @@
    cofx
    (navigation/open-modal :buy-crypto nil)
    (wallet/keep-watching-history)))
+
+;; Information Box
+
+(def closable-information-boxes
+  [{:id      :ens-banner
+    :global? true}]) ;; global? - close information box across all profiles
+
+(defn information-box-id-hash [id public-key global?]
+  (if global?
+    (hash id)
+    (hash (str public-key id))))
+
+(fx/defn close-information-box
+  {:events [:close-information-box]}
+  [{:keys [db]} id global?]
+  (let [public-key (get-in db [:multiaccount :public-key])
+        hash       (information-box-id-hash id public-key global?)]
+    {::async-storage/set! {hash true}
+     :db (assoc-in db [:information-box-states id] true)}))
+
+(fx/defn information-box-states-loaded
+  {:events [:information-box-states-loaded]}
+  [{:keys [db]} hashes states]
+  {:db (assoc db :information-box-states (reduce
+                                          (fn [acc [id hash]]
+                                            (assoc acc id (get states hash)))
+                                          {} hashes))})
+
+(fx/defn load-information-box-states
+  {:events [:load-information-box-states]}
+  [{:keys [db]}]
+  (let [public-key            (get-in db [:multiaccount :public-key])
+        {:keys [keys hashes]} (reduce (fn [acc {:keys [id global?]}]
+                                        (let [hash (information-box-id-hash
+                                                    id public-key global?)]
+                                          (-> acc
+                                              (assoc-in [:hashes id] hash)
+                                              (update :keys #(conj % hash)))))
+                                      {} closable-information-boxes)]
+    {::async-storage/get {:keys keys
+                          :cb   #(re-frame/dispatch
+                                  [:information-box-states-loaded hashes %])}}))

src/status_im/init/core.cljs

@@ -57,7 +57,8 @@
                              (assoc :multiaccounts/logout? logout?)
                              (assoc :multiaccounts/loading false))
                :dispatch-n [[::initialize-view]
-                            [:get-opted-in-to-new-terms-of-service]]})))
+                            [:get-opted-in-to-new-terms-of-service]
+                            [:load-information-box-states]]})))
 
 (fx/defn start-app
   {:events [:init/app-started]}

src/status_im/subs.cljs

@@ -273,6 +273,14 @@
 
 (reg-root-key-sub :messenger/started? :messenger/started?)
 
+(reg-root-key-sub :information-box-states :information-box-states)
+
+(re-frame/reg-sub
+ :information-box-closed?
+ :<- [:information-box-states]
+ (fn [states [_ id]]
+   (get states id)))
+
 (re-frame/reg-sub
  :communities
  :<- [:raw-communities]

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 []
@@ -189,7 +190,8 @@
 
 (views/defview communities-and-chats-old []
   (views/letsubs [{:keys [items search-filter]} [:home-items]
-                  hide-home-tooltip? [:hide-home-tooltip?]]
+                  hide-home-tooltip?            [:hide-home-tooltip?]
+                  information-box-closed?       [:information-box-closed? :ens-banner]]
     (if (and (empty? items)
              (empty? search-filter)
              hide-home-tooltip?
@@ -205,6 +207,18 @@
         :header                       [:<>
                                        (when (or (seq items) @search-active? (seq search-filter))
                                          [search-input-wrapper-old search-filter (empty? items)])
+                                       [information-box/information-box
+                                        {:type            :informative
+                                         :closable?       true
+                                         :closed?         information-box-closed?
+                                         :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
+                                         :on-close        #(re-frame/dispatch [:close-information-box :ens-banner true])}
+                                        (i18n/label :t/ens-banner-message)]
                                        (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",