From c23d26e273a2ea35584ee57c1acf7d59e4a4f518 Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Thu, 17 Jan 2019 15:25:30 +0200 Subject: [PATCH] TtT Profile screen Edit screen Edit screen updates Learn more screen Add SNT asset value Formatting Add TtT note to QR code viewer Fixes UI fixes Intro screen Fix learn more Add learn more subtext Remove unneeded logs Screen fixes 2 Signed-off-by: Vitaliy Vlasov --- resources/images/ui/tribute-to-talk.png | Bin 0 -> 23420 bytes src/status_im/events.cljs | 42 +++ src/status_im/react_native/resources.cljs | 1 + src/status_im/tribute_to_talk/core.cljs | 129 +++++++ src/status_im/tribute_to_talk/subs.cljs | 40 +++ .../ui/components/common/common.cljs | 7 +- .../ui/components/common/styles.cljs | 8 +- .../ui/components/icons/vector_icons.cljs | 1 + src/status_im/ui/components/list/styles.cljs | 77 ++++- src/status_im/ui/components/list/views.cljs | 28 +- .../ui/components/qr_code_viewer/views.cljs | 48 +-- src/status_im/ui/screens/profile/events.cljs | 1 - .../profile/tribute_to_talk/styles.cljs | 311 +++++++++++++++++ .../profile/tribute_to_talk/views.cljs | 323 ++++++++++++++++++ .../ui/screens/profile/user/views.cljs | 23 +- .../ui/screens/routing/profile_stack.cljs | 1 + src/status_im/ui/screens/routing/screens.cljs | 2 + src/status_im/ui/screens/subs.cljs | 1 + src/status_im/ui/screens/views.cljs | 1 + src/status_im/utils/config.cljs | 1 + translations/en.json | 25 ++ 21 files changed, 1019 insertions(+), 51 deletions(-) create mode 100644 resources/images/ui/tribute-to-talk.png create mode 100644 src/status_im/tribute_to_talk/core.cljs create mode 100644 src/status_im/tribute_to_talk/subs.cljs create mode 100644 src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs create mode 100644 src/status_im/ui/screens/profile/tribute_to_talk/views.cljs diff --git a/resources/images/ui/tribute-to-talk.png b/resources/images/ui/tribute-to-talk.png new file mode 100644 index 0000000000000000000000000000000000000000..9a6bea6b1f8dfdf6fd2903cf57157ea2d3e764f8 GIT binary patch literal 23420 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 s + ;; Remove both the digit after the dot and the dot itself + (string/ends-with? s ".") (subs 0 (- len 2)) + ;; Set default value if last digit is removed + (string/blank? s) (do "0"))) + (cond + ;; Disallow two consecutive dots + (and (string/includes? snt-amount ".") (= numpad-symbol ".")) + snt-amount + ;; Disallow more than 2 digits after the dot + (and (string/includes? snt-amount ".") + (> (count (second (string/split snt-amount #"\."))) 1)) + snt-amount + ;; Replace initial "0" by the first digit + (and (= snt-amount "0") (not= numpad-symbol ".")) + (str numpad-symbol) + :else (str snt-amount numpad-symbol))))) + +(fx/defn update-snt-amount + [{:keys [db]} numpad-symbol] + {:db (update-in db [:account/account :settings :tribute-to-talk :snt-amount] + #(get-new-snt-amount % numpad-symbol))}) + +(fx/defn update-message + [{:keys [db]} message] + {:db (assoc-in db [:account/account :settings :tribute-to-talk :message] + message)}) + +(fx/defn start-editing + [{:keys [db]}] + {:db (assoc-in db [:navigation/screen-params :tribute-to-talk] + {:step :set-snt-amount + :editing? true})}) + +(defn remove + [{:keys [db] :as cofx}] + (let [account-settings (get-in db [:account/account :settings])] + (fx/merge cofx + {:db (assoc-in db [:navigation/screen-params :tribute-to-talk] + {:step :finish})} + (accounts.update/update-settings + (assoc account-settings :tribute-to-talk {:seen? true}) {})))) diff --git a/src/status_im/tribute_to_talk/subs.cljs b/src/status_im/tribute_to_talk/subs.cljs new file mode 100644 index 0000000000..fe622abc75 --- /dev/null +++ b/src/status_im/tribute_to_talk/subs.cljs @@ -0,0 +1,40 @@ +(ns status-im.tribute-to-talk.subs + (:require [clojure.string :as string] + [re-frame.core :as re-frame] + [status-im.utils.money :as money])) + +(re-frame/reg-sub + :tribute-to-talk/settings + (fn [db] + (get-in db [:account/account :settings :tribute-to-talk]))) + +(re-frame/reg-sub + :tribute-to-talk/screen-params + (fn [db] + (get-in db [:navigation/screen-params :tribute-to-talk]))) + +(re-frame/reg-sub + :tribute-to-talk/ui + :<- [:tribute-to-talk/settings] + :<- [:tribute-to-talk/screen-params] + :<- [:prices] + :<- [:wallet/currency] + (fn [[{:keys [snt-amount message]} + {:keys [step editing?] :or {step :intro}} + prices currency]] + (let [fiat-value (if snt-amount + (money/fiat-amount-value snt-amount + :SNT + (-> currency :code keyword) + prices) + "0") + disabled? (and (= step :set-snt-amount) + (or (string/blank? snt-amount) + (= "0" snt-amount) + (string/ends-with? snt-amount ".")))] + {:snt-amount snt-amount + :disabled? disabled? + :message message + :step step + :editing? editing? + :fiat-value (str "~" fiat-value " " (:code currency))}))) diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index dae2f9fd9a..2c4b24a51e 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -85,9 +85,10 @@ (when forward? [vector-icons/icon :main-icons/next {:color colors/blue}])]]) -(defn button [{:keys [on-press label background? uppercase? button-style label-style] :or {background? true uppercase? true}}] - [react/touchable-highlight {:on-press on-press} - [react/view {:style (styles/button button-style background?)} +(defn button [{:keys [on-press label background? uppercase? button-style label-style disabled?] :or {background? true uppercase? true disabled false}}] + [react/touchable-highlight {:on-press on-press + :disabled disabled?} + [react/view {:style (styles/button button-style background? disabled?)} [react/text {:uppercase? uppercase? :style (merge styles/button-label label-style)} label]]]) diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index fc9738204a..95bf754363 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -130,13 +130,15 @@ :letter-spacing -0.2 :color colors/blue}) -(defn button [style background?] +(defn button [style background? disabled?] (merge {:padding-vertical 12 :padding-horizontal 42 :border-radius 8 - :background-color (when background? - (colors/alpha colors/blue 0.1))} + :background-color (cond disabled? + colors/gray-lighter + background? + (colors/alpha colors/blue 0.1))} style)) (def button-label diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index e7dad7fdbf..b913e47bd2 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -272,3 +272,4 @@ ([name options] (let [icon-fn (if platform/desktop? desktop-icon mobile-icon)] [icon-fn name options]))) + diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 2676090fa1..8afa4f929a 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -76,30 +76,59 @@ (def settings-item-separator {:margin-left 16}) -(def settings-item - {:padding-left 16 - :padding-right 8 +(defn settings-item + [large?] + {:padding-left 16 + :padding-right 8 :flex 1 :flex-direction :row :align-items :center :background-color colors/white - :height 64}) + :height (if large? 82 52)}) -(defn settings-item-icon [icon-color] - {:background-color (colors/alpha icon-color 0.1) - :width 40 - :height 40 - :border-radius 40 - :margin-right 16 - :justify-content :center - :align-items :center}) +(defn settings-item-icon + [icon-color large?] + (cond-> {:background-color (colors/alpha icon-color 0.1) + :width 40 + :height 40 + :border-radius 40 + :margin-right 16 + :justify-content :center + :align-items :center} + large? + (merge {:align-self :flex-start + :margin-top 12}))) (defn settings-item-text [color] - {:flex 1 - :flex-wrap :nowrap - :font-size 17 - :color color}) + {:flex 1 + :flex-wrap :nowrap + :line-height 20 + :font-size 17 + :color color}) + +(def settings-item-text-container + {:flex 1 + :align-self :flex-start + :margin-top 12}) + +(def settings-item-main-text-container + {:flex-direction :row + :height 18 + :align-items :center}) + +(defn settings-item-text-new + [color] + (assoc (settings-item-text color) + :font-weight "500" + :line-height 22 + :font-size 15)) + +(def settings-item-subtext + {:line-height 22 + :font-size 15 + :margin-top 2 + :color colors/gray}) (def settings-item-value {:flex-wrap :nowrap @@ -108,6 +137,22 @@ :font-size 15 :color colors/gray}) +(def new-label + {:background-color colors/blue + :border-radius 4 + :justify-content :center + :align-items :center + :height 16 + :margin-right 6}) + +(def new-label-text + {:color colors/white + :margin-left 6 + :margin-right 4 + :font-size 11 + :letter-spacing 1 + :font-weight :bold}) + (def base-separator {:height 1 :background-color colors/gray-light}) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index 124ab6a769..7af943077f 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -107,8 +107,8 @@ :icon-opts {:color colors/white}}]) (defn big-list-item - [{:keys [text text-color value action-fn active? destructive? hide-chevron? - accessory-value text-color + [{:keys [text text-color subtext value action-fn active? destructive? hide-chevron? + accessory-value text-color new? accessibility-label icon icon-color image-source icon-content] :or {icon-color colors/blue text-color colors/black @@ -121,15 +121,29 @@ {:on-press action-fn :accessibility-label accessibility-label :disabled (not active?)} - [react/view styles/settings-item + [react/view (styles/settings-item subtext) (if icon - [react/view (styles/settings-item-icon icon-color) + [react/view (styles/settings-item-icon icon-color subtext) [vector-icons/icon icon {:color icon-color}]] [react/image {:source {:uri image-source} :style styles/big-item-image}]) - [react/text {:style (styles/settings-item-text text-color) - :number-of-lines 1} - text] + (if subtext + [react/view {:style styles/settings-item-text-container} + [react/view {:style styles/settings-item-main-text-container} + (when new? + [react/view {:style styles/new-label} + [react/text {:style styles/new-label-text} + (string/upper-case (i18n/label :t/new))]]) + [react/text {:style (styles/settings-item-text-new text-color)} + text]] + [react/view {:style {:margin-top 2 + :justify-content :flex-start}} + [react/text {:style styles/settings-item-subtext + :number-of-lines 2} + subtext]]] + [react/text {:style (styles/settings-item-text text-color) + :number-of-lines 1} + text]) (when accessory-value [react/text {:style styles/settings-item-value :number-of-lines 1 diff --git a/src/status_im/ui/components/qr_code_viewer/views.cljs b/src/status_im/ui/components/qr_code_viewer/views.cljs index 26a315eeb4..ef65d7826a 100644 --- a/src/status_im/ui/components/qr_code_viewer/views.cljs +++ b/src/status_im/ui/components/qr_code_viewer/views.cljs @@ -1,10 +1,12 @@ (ns status-im.ui.components.qr-code-viewer.views + (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [reagent.core :as reagent] [re-frame.core :as re-frame] [status-im.react-native.js-dependencies :as rn-dependencies] [status-im.ui.components.button.view :as button] [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.qr-code-viewer.styles :as styles] + [status-im.ui.screens.profile.tribute-to-talk.views :as tr-to-talk] [status-im.ui.components.react :as react] [status-im.i18n :as i18n])) @@ -13,24 +15,32 @@ rn-dependencies/qr-code (clj->js (merge {:inverted true} props)))) -(defn qr-code-viewer [{:keys [style hint-style footer-style footer-button value hint legend]}] +(defview qr-code-viewer-component [{:keys [style hint-style footer-style footer-button value hint legend]}] + (letsubs [{:keys [width]} [:dimensions/window] + {:keys [snt-amount]} [:tribute-to-talk/settings]] + [react/view {:style (merge styles/qr-code style)} + (when snt-amount + [react/view {:style {:margin-horizontal 16}} + [tr-to-talk/enabled-note]]) + (when width + (let [size (int (min width styles/qr-code-max-width))] + [react/view {:style (styles/qr-code-container size) + :accessibility-label :qr-code-image} + [qr-code {:value value + :size size}]])) + [react/text {:style (merge styles/qr-code-hint hint-style)} + hint] + [react/view styles/footer + [react/view styles/wallet-info + [react/text {:style (merge styles/hash-value-text footer-style) + :accessibility-label :address-text + :selectable true} + legend]]] + (when footer-button + [footer-button value])])) + +(defn qr-code-viewer [{:keys [style hint-style footer-style footer-button value hint legend] + :as params}] (if value - (let [{:keys [width]} @(re-frame/subscribe [:dimensions/window])] - [react/view {:style (merge styles/qr-code style)} - (when width - (let [size (int (min width styles/qr-code-max-width))] - [react/view {:style (styles/qr-code-container size) - :accessibility-label :qr-code-image} - [qr-code {:value value - :size size}]])) - [react/text {:style (merge styles/qr-code-hint hint-style)} - hint] - [react/view styles/footer - [react/view styles/wallet-info - [react/text {:style (merge styles/hash-value-text footer-style) - :accessibility-label :address-text - :selectable true} - legend]]] - (when footer-button - [footer-button value])]) + [qr-code-viewer-component params] [react/view [react/text "no value"]])) diff --git a/src/status_im/ui/screens/profile/events.cljs b/src/status_im/ui/screens/profile/events.cljs index 23b7d2ab8d..b1a9414fc0 100644 --- a/src/status_im/ui/screens/profile/events.cljs +++ b/src/status_im/ui/screens/profile/events.cljs @@ -97,4 +97,3 @@ :profile/share-profile-link (fn [_ [_ value]] {:profile/share-profile-link value})) - diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs new file mode 100644 index 0000000000..5ad0c4feb6 --- /dev/null +++ b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs @@ -0,0 +1,311 @@ +(ns status-im.ui.screens.profile.tribute-to-talk.styles + (:require [status-im.ui.components.colors :as colors])) + +(def intro-container + {:flex 1 + :align-items :center + :margin-horizontal 32}) + +(def intro-image + {:width 246 + :height 219 + :margin-vertical 32}) + +(def intro-text + {:text-align :center + :font-size 22 + :color colors/black + :font-weight :bold + :line-height 28}) + +(def description-label + {:line-height 22 + :font-size 15 + :text-align :center + :color colors/gray}) + +(def intro-button + {:margin-vertical 8 + :padding-horizontal 32 + :align-self :center + :justify-content :center + :align-items :center}) + +(def bottom-toolbar + {:height 60 + :border-top-width 1 + :border-top-color colors/gray-lighter}) + +(def step-n + {:margin-top 5 + :font-size 14 + :text-align :center + :color colors/gray}) + +(def tribute-to-talk + {:font-weight "500" + :line-height 22 + :font-size 15 + :color colors/black + :text-align :center}) + +(def container + {:flex 1 + :background-color colors/white}) + +(def set-snt-amount-container + {:flex-grow 1 + :flex-direction :column + :background-color colors/white}) + +(defn horizontal-separator + [min-height max-height] + {:flex 1 + :min-height min-height + :max-height max-height}) + +(def number-row + {:flex-direction :row}) + +(def number-pad + {:flex 1 + :align-items :center + :margin-bottom 24 + :min-height 292 + :max-height 328}) + +(def number-container + {:width 64 + :height 64 + :border-radius 32 + :justify-content :center + :align-items :center + :background-color colors/blue-light}) + +(def vertical-number-separator + {:flex 1 + :min-width 16 + :max-width 32}) + +(def number + {:line-height 28 + :font-size 22 + :color colors/blue}) + +(def snt-amount-container + {:margin-horizontal 16 + :justify-content :center + :align-items :center}) + +(def snt-amount + {:font-size 32 + :color colors/black}) + +(def snt-amount-label + (assoc snt-amount :color colors/gray)) + +(def snt-asset-value + {:font-size 15 + :font-weight "500" + :line-height 22 + :color colors/gray}) + +(def personalized-message-container + {:flex-grow 1 + :align-items :center + :margin-horizontal 16 + :justify-content :flex-start}) + +(def personalized-message-title + {:margin-top 24 + :margin-bottom 10 + :align-self :flex-start}) + +(def personalized-message-input + {:border-radius 8 + :background-color colors/gray-lighter + :text-align-vertical :top + :font-size 15 + :line-height 22 + :padding-horizontal 16 + :padding-vertical 16}) + +(def edit-view-message-container + {:border-radius 8 + :background-color colors/blue-light + :margin-horizontal 72 + :padding-horizontal 12 + :padding-vertical 8}) + +(def edit-view-message + {:color colors/black + :line-height 22 + :font-size 15}) + +(def finish-label + {:font-size 22 + :line-height 28 + :font-weight :bold + :text-align :center + :color colors/black}) + +(defn finish-circle [color radius] + {:background-color color + :width (* 2 radius) + :height (* 2 radius) + :border-radius radius + :justify-content :center + :align-items :center}) + +(def finish-circle-with-shadow + (assoc (finish-circle colors/white 40) + :elevation 5 + :shadow-offset {:width 0 :height 2} + :shadow-radius 4 + :shadow-color (colors/alpha "#435971" 0.124066))) + +(defn icon-view [color] + {:background-color color + :justify-content :center + :align-items :center + :border-radius 20 + :width 40 + :height 40}) + +(def current-snt-amount + {:font-size 28 + :line-height 28 + :color colors/black + :font-weight "500"}) + +(def edit-label + {:font-size 15 + :color colors/blue}) + +(def edit-note + {:font-size 15 + :color colors/gray + :margin-top 16 + :margin-horizontal 16 + :text-align :center}) + +(def enabled-note + {:border-radius 8 + :border-width 1 + :padding 12 + :border-color colors/gray-lighter + :margin-horizontal 16 + :margin-bottom 16}) + +(def learn-more-container + {:flex-grow 1 + :justify-content :flex-start}) + +(def learn-more-link + {:height 52 + :padding-horizontal 32 + :margin-bottom 16 + :align-items :center + :justify-content :center}) + +(def learn-more-link-text + {:font-size 15 + :line-height 21 + :color colors/blue}) + +(def learn-more-image + {:width 120 + :height 110 + :margin-top 32 + :margin-left 32 + :margin-bottom 16 + :align-items :flex-start + :justify-content :center}) + +(def learn-more-title-text + (assoc intro-text + :text-align :left + :margin-left 32)) + +(def learn-more-text-container-1 + {:margin-horizontal 32 + :margin-top 12 + :margin-bottom 24}) + +(def learn-more-text-container-2 + {:margin-horizontal 32 + :margin-top 16 + :margin-bottom 32}) + +(def learn-more-text + {:font-size 17 + :line-height 22 + :color colors/black}) + +(def learn-more-section + {:border-radius 12 + :border-width 1 + :margin-horizontal 32 + :padding 8 + :width 238 + :border-color colors/gray-lighter}) + +(def chat-sample-bubble + {:background-color colors/blue-light + :padding-horizontal 12 + :padding-top 8 + :width 222 + :margin-top 4 + :border-radius 8}) + +(def pay-to-chat-container + {:justify-content :center + :align-items :center + :height 44}) + +(def pay-to-chat-text + {:font-size 15 + :color colors/blue + :line-height 22 + :font-weight "500"}) + +(def edit-container + {:justify-content :space-between + :flex-grow 1}) + +(def edit-screen-top-row + {:flex-direction :row + :margin-vertical 16 + :margin-horizontal 16 + :align-items :flex-start + :justify-content :space-between}) + +(def remove-view + {:flex-direction :row + :justify-content :flex-start + :align-self :flex-start + :margin-horizontal 16 + :margin-top 52}) + +(def remove-text + {:color colors/red + :margin-left 16 + :font-size 17}) + +(def remove-note + {:font-size 15 + :margin-horizontal 16 + :color colors/gray + :text-align :center + :margin-top 12}) + +(def enabled-note-text + {:color colors/black + :line-height 22 + :font-weight "500" + :font-size 15}) + +(def separator-style + {:height 1 + :background-color colors/gray-lighter + :align-self :stretch}) diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs new file mode 100644 index 0000000000..f198738f2f --- /dev/null +++ b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs @@ -0,0 +1,323 @@ +(ns status-im.ui.screens.profile.tribute-to-talk.views + (:require [clojure.string :as string] + [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.react-native.resources :as resources] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.common.common :as components.common] + [status-im.ui.components.icons.vector-icons :as icons] + [status-im.ui.components.react :as react] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.toolbar.actions :as actions] + [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.screens.profile.tribute-to-talk.styles :as styles]) + (:require-macros [status-im.utils.views :refer [defview letsubs]])) + +(defn separator [] + [react/view {:style styles/separator-style}]) + +(defn steps-numbers [editing?] + {:intro 1 + :set-snt-amount (if editing? 1 2) + :personalized-message (if editing? 2 3) + :finish 3}) + +(def step-forward-label + {:intro :t/get-started + :set-snt-amount :t/continue + :personalized-message :t/tribute-to-talk-sign-and-set-tribute + :finish :t/ok-got-it}) + +(defn intro + [] + [react/view {:style styles/intro-container} + [react/view {:style {:flex 1 + :min-height 32}}] + + [react/image {:source (:tribute-to-talk resources/ui) + :style styles/intro-image}] + [react/view {:style {:flex 1 + :min-height 32}}] + + [react/view + [react/i18n-text {:style styles/intro-text + :key :tribute-to-talk}] + [react/i18n-text {:style (assoc styles/description-label :margin-top 12) + :key :tribute-to-talk-desc}] + [react/view {:style styles/learn-more-link} + [react/text {:style styles/learn-more-link-text + :on-press #(re-frame/dispatch + [:tribute-to-talk.ui/learn-more-pressed])} + (i18n/label :t/learn-more)]]]]) + +(defn snt-asset-value + [fiat-value] + [react/text {:style styles/snt-asset-value} + fiat-value]) + +(defn snt-amount-label + [snt-amount fiat-value] + [react/view {:style styles/snt-amount-container} + [react/text {:style styles/snt-amount-label + :number-of-lines 1 + :ellipsize-mode :middle} + [react/text {:style styles/snt-amount} (or snt-amount "0")] + " SNT"] + [snt-asset-value fiat-value]]) + +(defn number-view + [numpad-symbol {:keys [on-press]}] + [react/touchable-opacity + {:on-press #(on-press numpad-symbol)} + [react/view {:style styles/number-container} + (if (= numpad-symbol :remove) + [icons/icon :main-icons/backspace {:color colors/blue}] + [react/text {:style styles/number} numpad-symbol])]]) + +(defn number-row + [[left middle right] opts] + [react/view {:style styles/number-row} + [number-view left opts] + [react/view {:style styles/vertical-number-separator}] + [number-view middle opts] + [react/view {:style styles/vertical-number-separator}] + [number-view right opts]]) + +(defn number-pad + [opts] + [react/view {:style styles/number-pad} + [number-row [1 2 3] opts] + [react/view {:style (styles/horizontal-separator 12 24)}] + [number-row [4 5 6] opts] + [react/view {:style (styles/horizontal-separator 12 24)}] + [number-row [7 8 9] opts] + [react/view {:style (styles/horizontal-separator 12 24)}] + [number-row ["." 0 :remove] opts]]) + +(defn set-snt-amount + [snt-amount] + [react/scroll-view + {:content-container-style styles/set-snt-amount-container} + [react/view {:style (styles/horizontal-separator 16 32)}] + [snt-amount-label snt-amount] + [react/view {:style (styles/horizontal-separator 16 40)}] + [number-pad {:on-press (fn [numpad-symbol] + (re-frame/dispatch + [:tribute-to-talk.ui/numpad-key-pressed numpad-symbol]))}] + [react/i18n-text {:style (assoc styles/description-label :margin-horizontal 16) + :key :tribute-to-talk-set-snt-amount}]]) + +(defn personalized-message + [message] + [react/scroll-view + {:content-container-style styles/personalized-message-container} + [react/view {:style styles/personalized-message-title} + [react/text {:style (assoc styles/description-label + :color colors/black)} + (i18n/label :t/personalized-message) + [react/text {:style styles/description-label} + (str " (" (i18n/label :t/optional) ")")]]] + [react/text-input + (cond-> {:style (assoc styles/personalized-message-input :height 144 + :align-self :stretch) + :multiline true + :on-change-text #(re-frame/dispatch + [:tribute-to-talk.ui/message-changed %1]) + :placeholder (i18n/label :t/tribute-to-talk-message-placeholder)} + (not (string/blank? message)) + (assoc :default-value message))] + [react/text {:style (assoc styles/description-label :margin-top 16 :margin-horizontal 32)} + (i18n/label :t/tribute-to-talk-you-can-leave-a-message)]]) + +(defn finish + [snt-amount] + [react/view {:style styles/intro-container} + [react/view {:style {:flex 1 + :min-height 32}}] + [react/view {:style {:justify-content :center + :align-items :center}} + [react/view {:style (styles/finish-circle (if snt-amount + colors/green-transparent-10 + colors/gray-lighter) 80)} + [react/view {:style styles/finish-circle-with-shadow} + [icons/icon :main-icons/check {:color (if snt-amount + colors/green + colors/gray)}]]]] + + [react/view {:style {:flex 1 + :min-height 32}}] + [react/view {:style {:justify-content :center + :align-items :center + :margin-bottom 32}} + [react/text {:style styles/finish-label} + (i18n/label (if snt-amount + :t/you-are-all-set + :t/tribute-to-talk-disabled))] + (if snt-amount + [react/text {:style (assoc styles/description-label :margin-top 16)} + (i18n/label :t/tribute-to-talk-finish-desc) + [react/text {:style (assoc styles/description-label :color colors/black)} + snt-amount] + " SNT"] + [react/text {:style (assoc styles/description-label :margin-top 16)} + (i18n/label :t/tribute-to-talk-disabled-note)])]]) + +(defn enabled-note + [] + [react/view {:style styles/enabled-note} + [react/view {:flex-direction :row} + [icons/icon :main-icons/info {:color colors/gray}] + [react/text {:style (assoc styles/enabled-note-text + :margin-left 11)} + (i18n/label :t/tribute-to-talk-enabled)]] + [react/text {:style (assoc styles/enabled-note-text + :font-weight :normal + :margin-left 35)} + (i18n/label :t/tribute-to-talk-add-friends)]]) + +(defn edit + [snt-amount message fiat-value] + [react/scroll-view {:content-container-style styles/edit-container} + [react/view {:style styles/edit-screen-top-row} + [react/view {:style {:flex-direction :row + :justify-content :flex-start + :align-items :flex-start}} + [react/view {:style (styles/icon-view colors/blue)} + [icons/icon :icons/logo {:color colors/white :width 20 :height 20}]] + [react/view {:style {:margin-left 16 :justify-content :flex-start}} + [react/view {:style {:justify-content :center + :align-items :center}} + [react/text {:style styles/current-snt-amount} + snt-amount + [react/text {:style (assoc styles/current-snt-amount + :color colors/gray)} " SNT"]]] + [snt-asset-value fiat-value]]] + [react/view {:flex 1}] + [react/text {:on-press #(re-frame/dispatch + [:tribute-to-talk.ui/edit-pressed]) + :style styles/edit-label} + (i18n/label :t/edit)]] + (when-not (string/blank? message) + [react/view {:flex-direction :row + :margin-bottom 16} + [react/view {:style styles/edit-view-message-container} + [react/text {:style styles/edit-view-message} + message]] + [react/view {:flex 1}]]) + [separator] + [react/text {:style styles/edit-note} + (i18n/label :t/tribute-to-talk-you-require-snt)] + + [react/touchable-highlight {:on-press #(re-frame/dispatch + [:tribute-to-talk.ui/remove-pressed]) + :style styles/remove-view} + [react/view {:style {:flex-direction :row}} + [react/view {:style (styles/icon-view (colors/alpha colors/red 0.1))} + [icons/icon :main-icons/logout {:color colors/red}]] + [react/view {:style {:justify-content :center + :align-items :center}} + [react/text {:style styles/remove-text} + (i18n/label :t/remove)]]]] + [react/text {:style styles/remove-note} + (i18n/label :t/tribute-to-talk-removing-note)] + [react/view {:flex 1 + :min-height 24}] + [enabled-note]]) + +(defn chat-sample [] + [react/view {:style (assoc styles/learn-more-section :margin-top 24)} + [react/view {:style {:flex-direction :row + :align-items :center}} + [react/view {:style {:background-color colors/white + :justify-content :center :align-items :center}} + [icons/icon :tiny-icons/tribute-to-talk {:color colors/blue}]] + [react/text {:style {:color colors/gray + :font-size 13 + :line-height 22 + :margin-left 4}} + (i18n/label :t/tribute-to-talk)]] + [react/view {:style styles/chat-sample-bubble} + [react/text {:style {:font-size 15 :color colors/black}} + (i18n/label :t/tribute-to-talk-sample-text)]] + [react/view {:style (assoc styles/chat-sample-bubble :width 141)} + ;;TODO replace hardcoded values + [react/text {:style {:font-size 22 :color colors/black}} "1000" + [react/text {:style {:font-size 22 :color colors/gray}} " SNT"]] + [react/text {:style {:font-size 12 :color colors/black}} + "~3.48" + [react/text {:style {:font-size 12 :color colors/gray}} " USD"]] + [react/view {:style styles/pay-to-chat-container} + [react/text {:style styles/pay-to-chat-text} + (i18n/label :t/pay-to-chat)]]]]) + +(defn learn-more [] + [react/scroll-view {:content-container-style styles/learn-more-container} + [react/image {:source (:tribute-to-talk resources/ui) + :style styles/learn-more-image}] + [react/text {:style styles/learn-more-title-text} + (i18n/label :t/tribute-to-talk)] + [react/view {:style styles/learn-more-text-container-1} + [react/text {:style styles/learn-more-text} + (i18n/label :t/tribute-to-talk-learn-more-1)]] + [separator] + [chat-sample] + [react/view {:style styles/learn-more-text-container-2} + [react/text {:style styles/learn-more-text} + (i18n/label :t/tribute-to-talk-learn-more-2)]] + [react/view {:style (assoc styles/learn-more-section + :flex-direction :row + :align-item :flex-stretch + :padding-horizontal 16 + :padding-vertical 12)} + [react/view {:style (styles/icon-view colors/blue-light)} + [icons/icon :main-icons/add-contact {:color colors/blue}]] + [react/view {:style {:margin-left 16 :justify-content :center}} + [react/text {:style (assoc styles/learn-more-text :color colors/blue)} + (i18n/label :t/add-to-contacts)]]] + [react/view {:style styles/learn-more-text-container-2} + [react/text {:style styles/learn-more-text} + (i18n/label :t/tribute-to-talk-learn-more-3)]]]) + +(defview tribute-to-talk [] + (letsubs [current-account [:account/account] + {:keys [step snt-amount editing? message fiat-value disabled?]} + [:tribute-to-talk/ui]] + [react/keyboard-avoiding-view {:style styles/container} + [react/safe-area-view {:style {:flex 1}} + [status-bar/status-bar] + [toolbar/toolbar + nil + (when-not (= :finish step) + (toolbar/nav-button + (actions/back #(re-frame/dispatch + [:tribute-to-talk.ui/step-back-pressed])))) + [react/view + [react/text {:style styles/tribute-to-talk} + (i18n/label :t/tribute-to-talk)] + (when-not (#{:edit :learn-more} step) + [react/text {:style styles/step-n} + (if (= step :finish) + (i18n/label (if snt-amount :t/completed :t/disabled)) + (i18n/label :t/step-i-of-n {:step ((steps-numbers editing?) step) + :number (if editing? 2 3)}))]) + (when (= step :learn-more) + [react/text {:style styles/step-n} + (i18n/label :t/learn-more)])]] + + (case step + :intro [intro] + :set-snt-amount [set-snt-amount snt-amount] + :edit [edit snt-amount message fiat-value] + :learn-more [learn-more] + :personalized-message [personalized-message message] + :finish [finish snt-amount]) + + (when-not (#{:learn-more :edit} step) + [react/view {:style styles/bottom-toolbar} + [components.common/button {:button-style styles/intro-button + :disabled? disabled? + :uppercase? false + :label-style (when disabled? {:color colors/gray}) + :on-press #(re-frame/dispatch + [:tribute-to-talk.ui/step-forward-pressed]) + :label (i18n/label (step-forward-label step))}]])]])) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 2ad8227e85..d3df5ec607 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -258,6 +258,20 @@ :accessory-value active-contacts-count :action-fn #(re-frame/dispatch [:navigate-to :contacts-list])}]) +(defn tribute-to-talk-item [snt-amount seen?] + [list.views/big-list-item + (cond-> + {:text (i18n/label :t/tribute-to-talk) + :icon :main-icons/tribute-to-talk + :accessibility-label :notifications-button + :new? (not seen?) + :action-fn #(re-frame/dispatch + [:tribute-to-talk.ui/menu-item-pressed])} + snt-amount + (assoc :accessory-value (str snt-amount " SNT")) + (not (and seen? snt-amount)) + (assoc :subtext (i18n/label :t/tribute-to-talk-desc)))]) + (defview my-profile [] (letsubs [{:keys [public-key photo-path] :as current-account} [:account/account] editing? [:get :my-profile/editing?] @@ -265,7 +279,9 @@ currency [:wallet/currency] login-data [:get :accounts/login] scroll (reagent/atom nil) - active-contacts-count [:contacts/active-count]] + active-contacts-count [:contacts/active-count] + {tribute-to-talk-seen? :seen? + snt-amount :snt-amount} [:tribute-to-talk/settings]] (let [shown-account (merge current-account changed-account) ;; We scroll on the component once rendered. setTimeout is necessary, ;; likely to allow the animation to finish. @@ -291,12 +307,15 @@ :edited-contact changed-account :editing? editing? :allow-icon-change? true - :options (if (not= (identicon/identicon public-key) photo-path) + :options (if (not= (identicon/identicon public-key) + photo-path) (profile-icon-options-ext) profile-icon-options) :on-change-text-event :my-profile/update-name}]] [share-profile-item (dissoc current-account :mnemonic)] [contacts-list-item active-contacts-count] + (when config/tr-to-talk-enabled? + [tribute-to-talk-item snt-amount tribute-to-talk-seen?]) [react/view styles/my-profile-info-container [my-profile-settings current-account shown-account currency (nil? login-data)]] (when (nil? login-data) diff --git a/src/status_im/ui/screens/routing/profile_stack.cljs b/src/status_im/ui/screens/routing/profile_stack.cljs index f911cf9328..e4fb998607 100644 --- a/src/status_im/ui/screens/routing/profile_stack.cljs +++ b/src/status_im/ui/screens/routing/profile_stack.cljs @@ -28,6 +28,7 @@ :currency-settings :mobile-network-settings :backup-seed + :tribute-to-talk :qr-scanner] config/hardwallet-enabled? diff --git a/src/status_im/ui/screens/routing/screens.cljs b/src/status_im/ui/screens/routing/screens.cljs index 0ade44a02d..25c24af4aa 100644 --- a/src/status_im/ui/screens/routing/screens.cljs +++ b/src/status_im/ui/screens/routing/screens.cljs @@ -51,6 +51,7 @@ [status-im.ui.screens.hardwallet.setup.views :as hardwallet.setup] [status-im.ui.screens.hardwallet.success.views :as hardwallet.success] [status-im.ui.screens.profile.seed.views :as profile.seed] + [status-im.ui.screens.profile.tribute-to-talk.views :as tr-to-talk] [status-im.ui.screens.about-app.views :as about-app] [status-im.ui.screens.stickers.views :as stickers] [status-im.ui.screens.dapps-permissions.views :as dapps-permissions] @@ -139,6 +140,7 @@ :fleet-settings fleet-settings/fleet-settings :currency-settings currency-settings/currency-settings :backup-seed profile.seed/backup-seed + :tribute-to-talk tr-to-talk/tribute-to-talk :reset-card hardwallet.settings/reset-card :keycard-settings hardwallet.settings/keycard-settings :mobile-network-settings mobile-network-settings/mobile-network-settings}) diff --git a/src/status_im/ui/screens/subs.cljs b/src/status_im/ui/screens/subs.cljs index a85029d72a..3eed15a497 100644 --- a/src/status_im/ui/screens/subs.cljs +++ b/src/status_im/ui/screens/subs.cljs @@ -5,6 +5,7 @@ status-im.contact.subs status-im.search.subs status-im.mailserver.subs + status-im.tribute-to-talk.subs status-im.ui.components.connectivity.subs status-im.ui.screens.accounts.subs status-im.ui.screens.chat.stickers.subs diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index dee5e8bed8..76daea5383 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -80,3 +80,4 @@ ;; see https://reactnavigation.org/docs/en/state-persistence.html#development-mode :persistenceKey (when js/goog.DEBUG rand-label)}] [bottom-sheet]]))}))) + diff --git a/src/status_im/utils/config.cljs b/src/status_im/utils/config.cljs index 92d4bc8b5c..09f326dd01 100644 --- a/src/status_im/utils/config.cljs +++ b/src/status_im/utils/config.cljs @@ -31,6 +31,7 @@ (def dev-build? (enabled? (get-config :DEV_BUILD 0))) (def erc20-contract-warnings-enabled? (enabled? (get-config :ERC20_CONTRACT_WARNINGS))) (def partitioned-topic-enabled? (enabled? (get-config :PARTITIONED_TOPIC "0"))) +(def tr-to-talk-enabled? (enabled? (get-config :TRIBUTE_TO_TALK 0))) ;; CONFIG VALUES (def log-level diff --git a/translations/en.json b/translations/en.json index 4547c2a15e..c36f0b09fe 100644 --- a/translations/en.json +++ b/translations/en.json @@ -17,6 +17,8 @@ "sync-all-devices": "Sync all devices", "syncing-devices": "Syncing...", "notify": "Notify", + "completed": "Completed", + "disabled": "Disabled", "paired-devices": "Paired devices", "contact-recovery-title": "{{name}} has sent you a message", "contact-recovery-content": "{{name}} has sent you a message but did not include this device.\nThis might happen if you have more than 3 devices, you haven't paired your devices correctly or you just recovered your account.\nPlease make sure your devices are paired correctly and click Notify to let the user know of this device.", @@ -896,6 +898,29 @@ "pairing": "Pairing", "view-my-wallet": "View my wallet", "share-my-profile": "Share my profile", + "get-started": "Get started", + "continue": "Continue", + "tribute-to-talk": "Tribute to talk", + "tribute-to-talk-desc": "Monetize your attention by requiring SNT for new people to start a chat", + "tribute-to-talk-set-snt-amount": "Set the amount of SNT required for new people to start a chat", + "personalized-message": "Personalized message", + "optional": "optional", + "tribute-to-talk-message-placeholder": "Hi there, I ask you to pay tribute to start a chat with me. If you know me in real life, you know how to find me...", + "tribute-to-talk-you-can-leave-a-message": "You can leave a message for people to see when they want to start a chat with you.", + "tribute-to-talk-sign-and-set-tribute": "Sign and set tribute", + "tribute-to-talk-finish-desc": "From now on, you will only receive chats from contacts, and people who paid ", + "tribute-to-talk-you-require-snt": "You require SNT for new people to start a chat.", + "tribute-to-talk-removing-note": "Removing Tribute to Talk will allow new people to start a chat without sending SNT. Requires a transaction to be made.", + "tribute-to-talk-enabled": "You have Tribute to Talk enabled.", + "tribute-to-talk-add-friends": "Add friends as a contact to allow chats without tribute payment.", + "learn-more": "Learn more", + "tribute-to-talk-learn-more-1": "Your time and attention are your most valuable assets. Tribute to Talk lets you set an amount of SNT required for new people to start a chat with you.", + "tribute-to-talk-learn-more-2": "Anyone who is not in your contact list will be asked to pay, and you can respond once they have.", + "tribute-to-talk-learn-more-3": "You can always send the money back, but to ensure that friends can reach you freely, add them as a contact first.", + "tribute-to-talk-sample-text": "Hi I’m Carmen. Message me to have your fortune told 🔮", + "tribute-to-talk-disabled": "Tribute to Talk disabled", + "tribute-to-talk-disabled-note": "From now on, new people can start a chat with you without sending SNT.", + "pay-to-chat": "Pay to chat", "share-chat": "Share chat", "share-link": "Share link", "share-profile-link": "Share profile link",