diff --git a/resources/images/icons/info12@2x.png b/resources/images/icons/info12@2x.png new file mode 100644 index 0000000000..53e1025b9f Binary files /dev/null and b/resources/images/icons/info12@2x.png differ diff --git a/resources/images/icons/info12@3x.png b/resources/images/icons/info12@3x.png new file mode 100644 index 0000000000..2242fd7004 Binary files /dev/null and b/resources/images/icons/info12@3x.png differ diff --git a/src/quo2/components/button.cljs b/src/quo2/components/button.cljs index 17ff3c5b8b..105f192d96 100644 --- a/src/quo2/components/button.cljs +++ b/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 diff --git a/src/quo2/foundations/typography.cljs b/src/quo2/foundations/typography.cljs index 9172131068..b330808174 100644 --- a/src/quo2/foundations/typography.cljs +++ b/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"}) \ No newline at end of file +(def monospace {:font-family "InterStatus-Regular"}) diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 0b76f87dc9..b90e0a9520 100644 --- a/src/status_im/events.cljs +++ b/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 %])}})) diff --git a/src/status_im/init/core.cljs b/src/status_im/init/core.cljs index fa3d03f94b..162fa94df2 100644 --- a/src/status_im/init/core.cljs +++ b/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]} diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 063db53307..862830609d 100644 --- a/src/status_im/subs.cljs +++ b/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] diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 372a79ebb3..28c095f1c1 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/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])] diff --git a/translations/en.json b/translations/en.json index 1e8f0aeb2e..e64a2d1a95 100644 --- a/translations/en.json +++ b/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",