status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-26 23:31:03 +00:00
Code Issues Projects Releases Wiki Activity

cleanup quo2 2, remove status-im usage (#14308)

Browse Source
This commit is contained in:
flexsurfer 2022-11-10 09:10:43 +01:00 committed by GitHub
parent 3925de58b1
commit 3c1c8a120d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
86 changed files with 567 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/avatars/account_avatar.cljs
View File

@ -1,11 +1,11 @@
(ns quo2.components.avatars.account-avatar (ns quo2.components.avatars.account-avatar
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons] [quo2.components.icon :as icons]
[quo2.theme :as theme])) [quo2.theme :as theme]))
(def icon-color-value (def icon-color-value
{:dark (get-in colors/customization [:dark :purple]) {:dark (get-in colors/customization [:dark :purple])
:light (get-in colors/customization [:light :purple])}) :light (get-in colors/customization [:light :purple])})
(defn get-border-radius [size] (defn get-border-radius [size]
@ -28,11 +28,11 @@
[{:keys [size icon] [{:keys [size icon]
:or {size 80 :or {size 80
icon :main-icons/placeholder}}] icon :main-icons/placeholder}}]
(let [icon-color (if (theme/dark?) (let [icon-color (if (theme/dark?)
(:dark icon-color-value) (:dark icon-color-value)
(:light icon-color-value)) (:light icon-color-value))
avatar-border-radius (get-border-radius size) avatar-border-radius (get-border-radius size)
inner-icon-size (get-inner-icon-sizes size)] inner-icon-size (get-inner-icon-sizes size)]
[rn/view {:style {:width size [rn/view {:style {:width size
:background-color icon-color :background-color icon-color
:height size :height size
@ -40,6 +40,5 @@
:justify-content :center :justify-content :center
:align-items :center}} :align-items :center}}
[icons/icon icon [icons/icon icon
{:no-color true {:no-color true
:container-style {:width inner-icon-size :size inner-icon-size}]]))
:height inner-icon-size}}]]))

23
src/quo2/components/avatars/icon_avatar.cljs
View File

@ -1,29 +1,28 @@
(ns quo2.components.avatars.icon-avatar (ns quo2.components.avatars.icon-avatar
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons])) [quo2.components.icon :as icons]))
(def sizes (def sizes
{:big 48 {:big 48
:medium 32 :medium 32
:small 20}) :small 20})
(defn icon-avatar (defn icon-avatar
[{:keys [size icon color opacity] [{:keys [size icon color opacity]
:or {opacity 20}}] :or {opacity 20}}]
(let [component-size (size sizes) (let [component-size (size sizes)
circle-color (colors/custom-color color 50 opacity) circle-color (colors/custom-color color 50 opacity)
icon-color (colors/custom-color-by-theme color 50 60) icon-color (colors/custom-color-by-theme color 50 60)
icon-size (case size icon-size (case size
:big 20 :big 20
:medium 16 :medium 16
:small 12)] :small 12)]
[rn/view {:style {:width component-size [rn/view {:style {:width component-size
:height component-size :height component-size
:border-radius component-size :border-radius component-size
:background-color circle-color :background-color circle-color
:justify-content :center :justify-content :center
:align-items :center}} :align-items :center}}
[icons/icon icon {:container-style {:width icon-size [icons/icon icon {:size icon-size
:height icon-size} :color icon-color}]]))
:color icon-color}]]))

4
src/quo2/components/avatars/user_avatar.cljs
View File

@ -1,11 +1,11 @@
(ns quo2.components.avatars.user-avatar (ns quo2.components.avatars.user-avatar
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.fast-image :as fast-image]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[clojure.string :refer [upper-case split blank?]]
[quo2.theme :refer [dark?]] [quo2.theme :refer [dark?]]
[status-im.ui.components.fast-image :as fast-image])) [clojure.string :refer [upper-case split blank?]]))
(def sizes {:big {:outer 80 (def sizes {:big {:outer 80
:inner 72 :inner 72

7
src/quo2/components/buttons/dynamic_button.cljs
View File

@ -1,7 +1,6 @@
(ns quo2.components.buttons.dynamic-button (ns quo2.components.buttons.dynamic-button
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text])) [quo2.components.markdown.text :as text]))
@ -60,7 +59,7 @@
:customization-color customize jump-to and mention button color}" :customization-color customize jump-to and mention button color}"
[_] [_]
(let [pressed? (reagent/atom false)] (let [pressed? (reagent/atom false)]
(fn [{:keys [type on-press count customization-color style]}] (fn [{:keys [type label on-press count customization-color style]}]
[rn/touchable-without-feedback [rn/touchable-without-feedback
{:on-press-in #(reset! pressed? true) {:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false) :on-press-out #(reset! pressed? false)
@ -93,8 +92,8 @@
:notification-up 0 :notification-up 0
:search-with-label 8)}} :search-with-label 8)}}
(case type (case type
:jump-to (i18n/label :t/jump-to) :jump-to label
:search-with-label (i18n/label :t/back) :search-with-label label
(:mention :notification-down :notification-up) (str count))]) (:mention :notification-down :notification-up) (str count))])
(when (#{:jump-to :notification-down :notification-up} type) (when (#{:jump-to :notification-down :notification-up} type)
[icon-view type])]]))) [icon-view type])]])))

35
src/quo2/components/code/snippet.cljs
View File

@ -1,6 +1,5 @@
(ns quo2.components.code.snippet (ns quo2.components.code.snippet
(:require ["react-native" :as react-native] (:require ["react-native" :as react-native]
["react-syntax-highlighter" :default Highlighter]
[cljs-bean.core :as bean] [cljs-bean.core :as bean]
[clojure.string :as str] [clojure.string :as str]
[oops.core :as oops] [oops.core :as oops]
@ -10,7 +9,9 @@
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.react :as react])) [react-native.linear-gradient :as linear-gradient]
[react-native.masked-view :as masked-view]
[react-native.syntax-highlighter :as highlighter]))
;; Example themes: ;; Example themes:
;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
@ -91,12 +92,12 @@
max-text-height (some-> max-lines (* font-scale 18)) ;; 18 is font's line height. max-text-height (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
truncated? (and max-text-height (< max-text-height @text-height)) truncated? (and max-text-height (< max-text-height @text-height))
maybe-mask-wrapper (if truncated? maybe-mask-wrapper (if truncated?
[react/masked-view [masked-view/masked-view
{:mask-element {:mask-element
(reagent/as-element (reagent/as-element
[react/linear-gradient {:colors ["black" "transparent"] [linear-gradient/linear-gradient {:colors ["black" "transparent"]
:locations [0.75 1] :locations [0.75 1]
:style {:flex 1}}])}] :style {:flex 1}}])}]
[:<>])] [:<>])]
[rn/view {:style {:overflow :hidden [rn/view {:style {:overflow :hidden
@ -140,15 +141,15 @@
:on-copy-press on-copy-press}]))) :on-copy-press on-copy-press}])))
(defn snippet [{:keys [language max-lines on-copy-press]} children] (defn snippet [{:keys [language max-lines on-copy-press]} children]
[:> Highlighter {:language language [highlighter/highlighter {:language language
:renderer (wrap-renderer-fn :renderer (wrap-renderer-fn
native-renderer {:max-lines max-lines native-renderer {:max-lines max-lines
:on-copy-press #(when on-copy-press :on-copy-press #(when on-copy-press
(on-copy-press children))}) (on-copy-press children))})
;; Default props to adapt Highlighter for react-native. ;; Default props to adapt Highlighter for react-native.
:CodeTag react-native/View :CodeTag react-native/View
:PreTag react-native/View :PreTag react-native/View
:show-line-numbers false :show-line-numbers false
:style #js {} :style #js {}
:custom-style #js {:backgroundColor nil}} :custom-style #js {:backgroundColor nil}}
children]) children])

1
src/quo2/components/community/community_card_view.cljs
View File

@ -6,6 +6,7 @@
[status-im.ui.screens.communities.styles :as styles] [status-im.ui.screens.communities.styles :as styles]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
(defn community-card-view-item (defn community-card-view-item
[{:keys [name description locked [{:keys [name description locked
status tokens cover tags featured] :as community} on-press] status tokens cover tags featured] :as community} on-press]

1
src/quo2/components/community/community_list_view.cljs
View File

@ -12,6 +12,7 @@
[status-im.ui.screens.communities.community :as community] [status-im.ui.screens.communities.community :as community]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
(defn communities-list-view-item [{:keys [id name locked? status notifications (defn communities-list-view-item [{:keys [id name locked? status notifications
tokens background-color] :as community}] tokens background-color] :as community}]
[react/view {:style (merge (styles/community-card 16) [react/view {:style (merge (styles/community-card 16)

1
src/quo2/components/community/community_view.cljs
View File

@ -10,6 +10,7 @@
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.ui.screens.communities.styles :as styles])) [status-im.ui.screens.communities.styles :as styles]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
(defn format-members [count] (defn format-members [count]
(if (> count 1000000) (if (> count 1000000)
(str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M)) (str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))

5
src/quo2/components/community/discover_card.cljs
View File

@ -4,6 +4,8 @@
[status-im.ui.screens.communities.styles :as styles] [status-im.ui.screens.communities.styles :as styles]
[status-im.ui.components.react :as react])) [status-im.ui.components.react :as react]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
;; Discover card placeholders images. ;; Discover card placeholders images.
;; TODO replaced when real data is available ;; TODO replaced when real data is available
(def images (def images
@ -91,5 +93,4 @@
:height (if (= id 1) 8 26) :height (if (= id 1) 8 26)
:border-radius 6 :border-radius 6
:first-image "" ; TODO replace with real data :first-image "" ; TODO replace with real data
:last-image ""}]) ; TODO replace with real data :last-image ""}])]])) ; TODO replace with real data
]]))

7
src/quo2/components/dividers/divider_label.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.components.dividers.divider-label (ns quo2.components.dividers.divider-label
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.components.markdown.text :as markdown.text] [quo2.components.markdown.text :as markdown.text]
[status-im.ui.components.icons.icons :as icons] [quo2.foundations.colors :as colors]
[quo2.foundations.colors :as colors])) [quo2.components.icon :as icons]))
(def chevron-icon-container-width 20) (def chevron-icon-container-width 20)
@ -42,8 +42,7 @@
[icons/icon [icons/icon
:main-icons/chevron-down :main-icons/chevron-down
{:color text-and-icon-color {:color text-and-icon-color
:width chevron-icon-container-width :size chevron-icon-container-width}])
:height chevron-icon-container-height}])
(when (pos? counter-value) (when (pos? counter-value)
[rn/view {:style {:border-radius 6 [rn/view {:style {:border-radius 6
:height 16 :height 16

35
src/quo2/components/drawers/action_drawers.cljs
View File

@ -1,6 +1,5 @@
(ns quo2.components.drawers.action-drawers (ns quo2.components.drawers.action-drawers
(:require [status-im.ui.components.react :as react] (:require [react-native.core :as rn]
[react-native.core :as rn]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
@ -17,20 +16,20 @@
danger? danger?
on-press]}] on-press]}]
[rn/touchable-opacity {:on-press on-press} [rn/touchable-opacity {:on-press on-press}
[react/view {:style [rn/view {:style
{:height (if sub-label 56 47) {:height (if sub-label 56 47)
:margin-horizontal 20 :margin-horizontal 20
:flex-direction :row}} :flex-direction :row}}
[react/view {:style [rn/view {:style
{:height 20 {:height 20
:margin-top :auto :margin-top :auto
:margin-bottom :auto :margin-bottom :auto
:margin-right 12 :margin-right 12
:width 20}} :width 20}}
[icon/icon icon [icon/icon icon
{:color (get-icon-color danger?) {:color (get-icon-color danger?)
:size 20}]] :size 20}]]
[react/view [rn/view
{:style {:style
{:flex 1 {:flex 1
:justify-content :center}} :justify-content :center}}
@ -48,11 +47,11 @@
(colors/theme-colors colors/neutral-50 colors/neutral-40)}} (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
sub-label])] sub-label])]
(when right-icon (when right-icon
[react/view {:style [rn/view {:style
{:height 20 {:height 20
:margin-top :auto :margin-top :auto
:margin-bottom :auto :margin-bottom :auto
:width 20}} :width 20}}
[icon/icon right-icon [icon/icon right-icon
{:color (get-icon-color danger?) {:color (get-icon-color danger?)
:size 20}]])]]) :size 20}]])]])

6
src/quo2/components/icon.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.components.icon (ns quo2.components.icon
(:require (:require
[quo2.components.icons.icons :as icons]
[status-im.ui.components.react :as react]
[clojure.string :as string] [clojure.string :as string]
[react-native.core :as rn]
[quo2.components.icons.icons :as icons]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
(defn memo-icon-fn (defn memo-icon-fn
@ -12,7 +12,7 @@
:or {accessibility-label :icon}}] :or {accessibility-label :icon}}]
(let [size (or size 20)] (let [size (or size 20)]
^{:key icon-name} ^{:key icon-name}
[react/image [rn/image
{:style {:style
(merge {:width size (merge {:width size
:height size} :height size}

11
src/quo2/components/list_items/preview_list.cljs
View File

@ -1,10 +1,9 @@
(ns quo2.components.list-items.preview-list (ns quo2.components.list-items.preview-list
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.hole-view :as hole-view] [react-native.hole-view :as hole-view]
[status-im.i18n.i18n :as i18n] [react-native.fast-image :as fast-image]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.icon :as quo2.icons] [quo2.components.icon :as quo2.icons]
[status-im.ui.components.fast-image :as fast-image]
[quo2.components.avatars.user-avatar :as user-avatar] [quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.markdown.text :as quo2.text])) [quo2.components.markdown.text :as quo2.text]))
@ -57,7 +56,7 @@
transparent-color transparent-color
(colors/theme-colors light-color dark-color override-theme))) (colors/theme-colors light-color dark-color override-theme)))
(defn overflow-label [label size transparent? border-radius margin-left override-theme] (defn overflow-label [label size transparent? border-radius margin-left override-theme more-than-99-label]
[rn/view {:style {:width size [rn/view {:style {:width size
:height size :height size
:margin-left margin-left :margin-left margin-left
@ -90,7 +89,7 @@
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+ ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
(if (< label 100) (if (< label 100)
(str "+" label) (str "+" label)
(i18n/label :counter-99-plus))])]) more-than-99-label)])])
(defn border-type [type] (defn border-type [type]
(case type (case type
@ -106,7 +105,7 @@
:transparent? overflow-label transparent?} :transparent? overflow-label transparent?}
items preview list items (only 4 items is required for preview) items preview list items (only 4 items is required for preview)
" "
[{:keys [type size list-size transparent? override-theme]} items] [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
(let [items-arr (into [] items) (let [items-arr (into [] items)
list-size (or list-size (count items)) list-size (or list-size (count items))
margin-left (get-in params [size :margin-left]) margin-left (get-in params [size :margin-left])
@ -121,4 +120,4 @@
[list-item index type size (get items-arr index) list-size [list-item index type size (get items-arr index) list-size
margin-left hole-size hole-radius hole-x hole-y border-radius]) margin-left hole-size hole-radius hole-x hole-y border-radius])
(when (> list-size 4) (when (> list-size 4)
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme])])) [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme more-than-99-label])]))

25
src/quo2/components/messages/gap.cljs
View File

@ -6,10 +6,7 @@
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]))
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :refer [pressable-class]]
[status-im.utils.handlers :refer [>evt]]))
;;; helpers ;;; helpers
(def themes (def themes
@ -84,7 +81,7 @@
:color (get-color :time)}} str]) :color (get-color :time)}} str])
(defn info-button [on-press] (defn info-button [on-press]
[pressable-class [rn/touchable-without-feedback
{:on-press on-press} {:on-press on-press}
[icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]]) [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
@ -99,7 +96,7 @@
[rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}] [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
[circle]]) [circle]])
(defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed] (defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label]
[rn/view {:flex 1} [rn/view {:flex 1}
[rn/view [rn/view
{:flex-direction :row {:flex-direction :row
@ -109,12 +106,10 @@
[timestamp timestamp-far] [timestamp timestamp-far]
(when on-info-button-pressed [info-button on-info-button-pressed])] (when on-info-button-pressed [info-button on-info-button-pressed])]
[pressable-class [rn/touchable-without-feedback
{:style {:flex 1 :margin-top 16 :margin-bottom 20} {:style {:flex 1 :margin-top 16 :margin-bottom 20}
:on-press #(when (and chat-id gap-ids) :on-press #(when on-press (on-press))}
(>evt [:chat.ui/fill-gaps chat-id gap-ids]))} [text/text warning-label]]
[text/text
(i18n/label :messages-gap-warning)]]
[timestamp timestamp-near]]) [timestamp timestamp-near]])
@ -124,10 +119,10 @@
if `on-info-button-pressed` fn is provided, the info button will show up and is pressable" if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
[{:keys [timestamp-far [{:keys [timestamp-far
timestamp-near timestamp-near
gap-ids
chat-id
on-info-button-pressed on-info-button-pressed
style]}] style
on-press
warning-label]}]
(let [body-height (reagent/atom nil)] (let [body-height (reagent/atom nil)]
(fn [] (fn []
[rn/view [rn/view
@ -145,6 +140,6 @@
style) style)
[timeline] [timeline]
[body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]] [body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
[vborder :left body-height] [vborder :left body-height]
[vborder :right body-height]]))) [vborder :right body-height]])))

19
src/quo2/components/messages/system_message.cljs
View File

@ -6,8 +6,7 @@
[quo2.components.avatars.user-avatar :as user-avatar] [quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n] [utils :as utils]))
[status-im.utils.core :as utils]))
(def themes-landed {:pinned colors/primary-50-opa-5 (def themes-landed {:pinned colors/primary-50-opa-5
:added colors/primary-50-opa-5 :added colors/primary-50-opa-5
@ -54,7 +53,7 @@
(defmulti sm-render :type) (defmulti sm-render :type)
(defmethod sm-render :deleted [{:keys [label timestamp-str]}] (defmethod sm-render :deleted [{:keys [label timestamp-str labels]}]
[rn/view {:align-items :center [rn/view {:align-items :center
:justify-content :space-between :justify-content :space-between
:flex 1 :flex 1
@ -67,10 +66,10 @@
[text/text {:size :paragraph-2 [text/text {:size :paragraph-2
:style {:color (get-color :text) :style {:color (get-color :text)
:margin-right 5}} :margin-right 5}}
(i18n/label (or label :message-deleted))] (or label (:message-deleted labels))]
[sm-timestamp timestamp-str]]]) [sm-timestamp timestamp-str]]])
(defmethod sm-render :added [{:keys [state mentions timestamp-str]}] (defmethod sm-render :added [{:keys [state mentions timestamp-str labels]}]
[rn/view {:align-items :center [rn/view {:align-items :center
:flex-direction :row} :flex-direction :row}
[sm-icon {:icon :main-icons/add-user16 [sm-icon {:icon :main-icons/add-user16
@ -84,14 +83,14 @@
:style {:color (get-color :text) :style {:color (get-color :text)
:margin-left 3 :margin-left 3
:margin-right 3}} :margin-right 3}}
(i18n/label :added)] (:added labels)]
[sm-user-avatar (:image (second mentions))] [sm-user-avatar (:image (second mentions))]
[text/text {:weight :semi-bold [text/text {:weight :semi-bold
:size :paragraph-2} :size :paragraph-2}
(:name (second mentions))] (:name (second mentions))]
[sm-timestamp timestamp-str]]) [sm-timestamp timestamp-str]])
(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str]}] (defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str labels]}]
[rn/view {:flex-direction :row [rn/view {:flex-direction :row
:flex 1 :flex 1
:align-items :center} :align-items :center}
@ -110,7 +109,7 @@
:margin-right 2} :margin-right 2}
[text/text {:size :paragraph-2 [text/text {:size :paragraph-2
:style {:color (get-color :text)}} :style {:color (get-color :text)}}
(i18n/label :pinned-a-message)]] (:pinned-a-message labels)]]
[sm-timestamp timestamp-str]] [sm-timestamp timestamp-str]]
[rn/view {:flex-direction :row} [rn/view {:flex-direction :row}
[rn/view {:flex-direction :row [rn/view {:flex-direction :row
@ -137,7 +136,7 @@
(utils/truncate-str (:info content) 24)])]]]]) (utils/truncate-str (:info content) 24)])]]]])
(defn system-message (defn system-message
[{:keys [type style non-pressable? animate-landing?] :as message}] [{:keys [type style non-pressable? animate-landing? labels] :as message}]
[:f> [:f>
(fn [] (fn []
(let [sv-color (reanimated/use-shared-value (let [sv-color (reanimated/use-shared-value
@ -159,4 +158,4 @@
:padding-horizontal 11 :padding-horizontal 11
:background-color sv-color} :background-color sv-color}
style))} style))}
[sm-render message]]))]) [sm-render message labels]]))])

3
src/quo2/components/navigation/floating_shell_button.cljs
View File

@ -3,9 +3,10 @@
[quo2.components.buttons.dynamic-button :as dynamic-button])) [quo2.components.buttons.dynamic-button :as dynamic-button]))
(defn dynamic-button-view [type dynamic-buttons style] (defn dynamic-button-view [type dynamic-buttons style]
(when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)] (when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
[dynamic-button/dynamic-button [dynamic-button/dynamic-button
{:type type {:type type
:label label
:on-press on-press :on-press on-press
:count count :count count
:style style :style style

19
src/quo2/components/navigation/page_nav.cljs
View File

@ -2,7 +2,6 @@
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[status-im.utils.dimensions :as dimensions]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[clojure.string :as string])) [clojure.string :as string]))
@ -185,8 +184,7 @@
mid-section mid-section
left-section left-section
right-section-buttons]}] right-section-buttons]}]
(let [{:keys [height width]} (dimensions/window) (let [put-middle-section-on-left? (or align-mid?
put-middle-section-on-left? (or align-mid?
(> (count right-section-buttons) 1)) (> (count right-section-buttons) 1))
mid-section-props mid-section-props
{:type (:type mid-section) {:type (:type mid-section)
@ -197,15 +195,12 @@
:right-icon (:right-icon mid-section) :right-icon (:right-icon mid-section)
:icon (:icon mid-section) :icon (:icon mid-section)
:left-icon (:left-icon mid-section)}] :left-icon (:left-icon mid-section)}]
[rn/view {:style (cond-> [rn/view {:style (cond-> {:display :flex
{:display :flex :flex-direction :row
:flex-direction :row ;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:width width :align-items :center
:height (* 0.0497 height) :padding-horizontal 20
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125 :justify-content :space-between}
:align-items :center
:padding-horizontal 20
:justify-content :space-between}
page-nav-background-uri (assoc :background-color page-nav-color) page-nav-background-uri (assoc :background-color page-nav-color)
page-nav-color (assoc :background page-nav-background-uri))} page-nav-color (assoc :background page-nav-background-uri))}
[rn/view {:style {:flex 1 [rn/view {:style {:flex 1

34
src/quo2/components/switcher/switcher_cards.cljs
View File

@ -1,17 +1,19 @@
(ns quo2.components.switcher.switcher-cards (ns quo2.components.switcher.switcher-cards
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[status-im.i18n.i18n :as i18n] [react-native.fast-image :as fast-image]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]
[quo2.components.switcher.styles :as styles] [quo2.components.switcher.styles :as styles]
[quo2.components.counter.counter :as counter] [quo2.components.counter.counter :as counter]
[quo2.components.tags.status-tags :as status-tags] [quo2.components.tags.status-tags :as status-tags]
[status-im.ui.components.fast-image :as fast-image]
[quo2.components.avatars.user-avatar :as user-avatar] [quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.avatars.group-avatar :as group-avatar] [quo2.components.avatars.group-avatar :as group-avatar]
[quo2.components.list-items.preview-list :as preview-list] [quo2.components.list-items.preview-list :as preview-list]
[quo2.components.avatars.channel-avatar :as channel-avatar])) [quo2.components.avatars.channel-avatar :as channel-avatar]
[status-im.i18n.i18n :as i18n]))
;;TODO move outside quo or find a way how to move i18n outside
;; Supporting Components ;; Supporting Components
@ -19,9 +21,10 @@
[rn/view {:style (styles/content-container new-notifications?)} [rn/view {:style (styles/content-container new-notifications?)}
(case content-type (case content-type
:text [text/text (styles/last-message-text-props) data] :text [text/text (styles/last-message-text-props) data]
:photo [preview-list/preview-list {:type :photo :photo [preview-list/preview-list {:type :photo
:size 24 :more-than-99-label (i18n/label :counter-99-plus)
:override-theme :dark} data] :size 24
:override-theme :dark} data]
:sticker [fast-image/fast-image {:source (:source data) :sticker [fast-image/fast-image {:source (:source data)
:style (styles/sticker)}] :style (styles/sticker)}]
:gif [fast-image/fast-image {:source (:source data) :gif [fast-image/fast-image {:source (:source data)
@ -35,6 +38,7 @@
:community-info (case (:type data) :community-info (case (:type data)
:pending [status-tags/status-tag :pending [status-tags/status-tag
{:status :pending {:status :pending
:label (i18n/label :t/pending)
:size :small :size :small
:override-theme :dark}] :override-theme :dark}]
:kicked [status-tags/status-tag :kicked [status-tags/status-tag
@ -75,15 +79,15 @@
(defn subtitle [{:keys [content-type data]}] (defn subtitle [{:keys [content-type data]}]
(case content-type (case content-type
:text (i18n/label :t/message) :text (i18n/label :t/message)
:photo (i18n/label :t/n-photos {:count (count data)}) :photo (i18n/label :t/n-photos {:count (count data)})
:sticker (i18n/label :t/sticker) :sticker (i18n/label :t/sticker)
:gif (i18n/label :t/gif) :gif (i18n/label :t/gif)
:audio (i18n/label :t/audio-message) :audio (i18n/label :t/audio-message)
:community (i18n/label :t/link-to-community) :community (i18n/label :t/link-to-community)
:link (i18n/label :t/external-link) :link (i18n/label :t/external-link)
:code (i18n/label :t/code-snippet) :code (i18n/label :t/code-snippet)
:channel (i18n/label :t/community-channel) :channel (i18n/label :t/community-channel)
:community-info (i18n/label :t/community))) :community-info (i18n/label :t/community)))
;; Screens Card ;; Screens Card

4
src/quo2/components/tabs/tab.cljs
View File

@ -2,8 +2,8 @@
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.theme :as theme] [quo2.theme :as theme]
[status-im.ui.components.icons.icons :as icons] [quo2.components.markdown.text :as text]
[quo2.components.markdown.text :as text])) [quo2.components.icon :as icons]))
(def themes {:light {:default {:background-color colors/neutral-20 (def themes {:light {:default {:background-color colors/neutral-20
:icon-color colors/neutral-50 :icon-color colors/neutral-50

30
src/quo2/components/tabs/tabs.cljs
View File

@ -3,11 +3,11 @@
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.tabs.tab :as tab] [quo2.components.tabs.tab :as tab]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.react :as react] [utils :as utils]
[status-im.utils.core :as utils]
[status-im.utils.number :as number-utils]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.notifications.notification-dot :refer [notification-dot]])) [quo2.components.notifications.notification-dot :refer [notification-dot]]
[react-native.masked-view :as masked-view]
[react-native.linear-gradient :as linear-gradient]))
(def default-tab-size 32) (def default-tab-size 32)
@ -50,7 +50,7 @@
;; Truncate to avoid unnecessary rendering. ;; Truncate to avoid unnecessary rendering.
(if (> fade-percentage 0.99) (if (> fade-percentage 0.99)
0.99 0.99
(number-utils/naive-round fade-percentage 2)))) (utils/naive-round fade-percentage 2))))
(defn scrollable-tabs (defn scrollable-tabs
"Just like the component `tabs`, displays horizontally scrollable tabs with "Just like the component `tabs`, displays horizontally scrollable tabs with
@ -98,15 +98,17 @@
size default-tab-size} size default-tab-size}
:as props}] :as props}]
(let [maybe-mask-wrapper (if fade-end? (let [maybe-mask-wrapper (if fade-end?
[react/masked-view [masked-view/masked-view
{:mask-element (reagent/as-element {:mask-element
[react/linear-gradient {:colors [:black :transparent] (reagent/as-element
:locations [(get @fading :fade-end-percentage) 1] [linear-gradient/linear-gradient
:start {:x 0 :y 0} {:colors [:black :transparent]
:end {:x 1 :y 0} :locations [(get @fading :fade-end-percentage) 1]
:pointer-events :none :start {:x 0 :y 0}
:style {:width "100%" :end {:x 1 :y 0}
:height "100%"}}])}] :pointer-events :none
:style {:width "100%"
:height "100%"}}])}]
[:<>])] [:<>])]
(conj maybe-mask-wrapper (conj maybe-mask-wrapper
[rn/flat-list [rn/flat-list

43
src/quo2/components/tags/permission_tag.cljs
View File

@ -1,10 +1,9 @@
(ns quo2.components.tags.permission-tag (ns quo2.components.tags.permission-tag
(:require [status-im.ui.components.react :as react] (:require [react-native.core :as rn]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.components.tags.base-tag :as base-tag] [quo2.components.tags.base-tag :as base-tag]))
[status-im.i18n.i18n :as i18n]))
(defn outer-resource-container [size background-color] (defn outer-resource-container [size background-color]
{:background-color background-color {:background-color background-color
@ -28,8 +27,8 @@
(defn extra-count [total-group-count selected-count size background-color] (defn extra-count [total-group-count selected-count size background-color]
(let [extra-group-count (- total-group-count selected-count)] (let [extra-group-count (- total-group-count selected-count)]
(when (> extra-group-count 0) (when (> extra-group-count 0)
[react/view (outer-resource-container size background-color) [rn/view (outer-resource-container size background-color)
[react/view (extra-count-styles size) [rn/view (extra-count-styles size)
(if (< extra-group-count 4) (if (< extra-group-count 4)
[text/text {:size :label [text/text {:size :label
:style {:align-items :center :style {:align-items :center
@ -58,20 +57,20 @@
:or {size 24}}] :or {size 24}}]
(let [tokens-count (count group) (let [tokens-count (count group)
selected-tokens (take (selected-token-count group) group)] selected-tokens (take (selected-token-count group) group)]
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:align-items :center} :align-items :center}
(for [{:keys [token-icon]} selected-tokens] (for [{:keys [token-icon]} selected-tokens]
^{:key token-icon} ^{:key token-icon}
[react/view {:flex-direction :row} [rn/view {:flex-direction :row}
[react/view (outer-resource-container size background-color) [rn/view (outer-resource-container size background-color)
[react/image {:source token-icon [rn/image {:source token-icon
:style {:height (case size 32 28 24 20) :style {:height (case size 32 28 24 20)
:width (case size 32 28 24 20) :width (case size 32 28 24 20)
:border-radius size}}]]]) :border-radius size}}]]])
[extra-count tokens-count (count selected-tokens) size] [extra-count tokens-count (count selected-tokens) size]
(when-not last-group (when-not last-group
[react/view {:align-items :center} [rn/view {:align-items :center}
[text/text {:weight :medium [text/text {:weight :medium
:size (case size 32 :paragraph-2 24 :label) :size (case size 32 :paragraph-2 24 :label)
:style {:color (colors/theme-colors :style {:color (colors/theme-colors
@ -80,7 +79,7 @@
:padding-left 4 :padding-left 4
:text-transform :lowercase :text-transform :lowercase
:padding-right (case size 32 16 24 12)}} :padding-right (case size 32 16 24 12)}}
(i18n/label :t/or)]])]))) "or"]])])))
(defn selected-group-count [tokens] (defn selected-group-count [tokens]
(cond (cond
@ -94,8 +93,8 @@
:or {size 24}}] :or {size 24}}]
(let [selected-groups (take (selected-group-count tokens) tokens) (let [selected-groups (take (selected-group-count tokens) tokens)
last-group-id ((last selected-groups) :id)] last-group-id ((last selected-groups) :id)]
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:align-items :center} :align-items :center}
(for [{:keys [id group]} selected-groups] (for [{:keys [id group]} selected-groups]
^{:key id} ^{:key id}
[token-group {:group group [token-group {:group group
@ -110,11 +109,11 @@
[base-tag/base-tag {:background-color background-color [base-tag/base-tag {:background-color background-color
:size size :size size
:type :permission} :type :permission}
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:align-items :center :align-items :center
:justify-content :flex-end} :justify-content :flex-end}
[react/view {:padding-left (case 32 8 24 6) [rn/view {:padding-left (case 32 8 24 6)
:padding-right (case size 32 16 24 12)} :padding-right (case size 32 16 24 12)}
[icons/icon (if locked :main-icons2/locked [icons/icon (if locked :main-icons2/locked
:main-icons2/unlocked) :main-icons2/unlocked)
{:resize-mode :center {:resize-mode :center

9
src/quo2/components/tags/status_tags.cljs
View File

@ -3,8 +3,7 @@
[quo2.theme :as quo2.theme] [quo2.theme :as quo2.theme]
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]))
[status-im.i18n.i18n :as i18n]))
(def default-container-style (def default-container-style
{:border-radius 20 {:border-radius 20
@ -54,7 +53,7 @@
:background-color colors/success-50-opa-10 :background-color colors/success-50-opa-10
:icon :verified :icon :verified
:border-color colors/success-50-opa-20 :border-color colors/success-50-opa-20
:label (or label (i18n/label :positive)) :label label
:text-color (if (= theme :light) colors/success-50 :text-color (if (= theme :light) colors/success-50
colors/success-60)}]) colors/success-60)}])
@ -64,7 +63,7 @@
:icon :untrustworthy :icon :untrustworthy
:background-color colors/danger-50-opa-10 :background-color colors/danger-50-opa-10
:border-color colors/danger-50-opa-20 :border-color colors/danger-50-opa-20
:label (or label (i18n/label :negative)) :label label
:text-color (if (= theme :light) :text-color (if (= theme :light)
colors/danger-50 colors/danger-50
colors/danger-60)}]) colors/danger-60)}])
@ -73,7 +72,7 @@
[size theme label] [size theme label]
[base-tag {:size size [base-tag {:size size
:icon :pending :icon :pending
:label (or label (i18n/label :pending)) :label label
:background-color (if (= theme :light) :background-color (if (= theme :light)
colors/neutral-10 colors/neutral-10
colors/neutral-80) colors/neutral-80)

12
src/quo2/components/wallet/network_amount.cljs
View File

@ -1,10 +1,8 @@
(ns quo2.components.wallet.network-amount (ns quo2.components.wallet.network-amount
(:require [clojure.string :as string] (:require [react-native.core :as rn]
[react-native.core :as rn]
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]))
[status-im.i18n.i18n :as i18n]))
(defn network-amount (defn network-amount
"[network-amount opts] "[network-amount opts]
@ -13,7 +11,7 @@
:network-name \"Mainnet\" ;; shown network name :network-name \"Mainnet\" ;; shown network name
:icon :main-icons2/ethereum ;; key of icon belonging to the network :icon :main-icons2/ethereum ;; key of icon belonging to the network
:eth-value 1.2345678 ;; shown ETH value}" :eth-value 1.2345678 ;; shown ETH value}"
[{:keys [show-right-border? style network-name icon eth-value] :as _opts}] [{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
[rn/view (merge {:accessibility-label :network-amount [rn/view (merge {:accessibility-label :network-amount
:background-color (colors/theme-colors colors/white colors/neutral-95) :background-color (colors/theme-colors colors/white colors/neutral-95)
:border-radius 16 :border-radius 16
@ -35,7 +33,7 @@
[text/text {:weight :medium [text/text {:weight :medium
:size :paragraph-2 :size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}} :style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
eth-value \space (i18n/label :t/eth)] eth-value \space (:eth labels)]
[rn/view {:style {:border-right-width (when show-right-border? 1) [rn/view {:style {:border-right-width (when show-right-border? 1)
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50) :border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:padding-left 8 :padding-left 8
@ -44,4 +42,4 @@
[text/text {:weight :medium [text/text {:weight :medium
:size :label :size :label
:style {:color colors/neutral-50}} :style {:color colors/neutral-50}}
(string/lower-case (i18n/label :t/on)) \space network-name]]]]) (:on labels) \space network-name]]]])

5
src/quo2/components/wallet/network_breakdown.cljs
View File

@ -5,7 +5,7 @@
[quo2.components.wallet.network-amount :refer [network-amount]])) [quo2.components.wallet.network-amount :refer [network-amount]]))
(defn network-breakdown (defn network-breakdown
[{:keys [top-value network-conversions]}] [{:keys [top-value network-conversions labels]}]
[rn/view {:style {:background-color (colors/theme-colors [rn/view {:style {:background-color (colors/theme-colors
colors/white colors/white
colors/neutral-95) colors/neutral-95)
@ -41,5 +41,6 @@
[network-amount {:show-right-border? (not= idx last-item-idx) [network-amount {:show-right-border? (not= idx last-item-idx)
:icon icon :icon icon
:network-name network :network-name network
:eth-value conversion}]]) :eth-value conversion
:labels labels}]])
network-conversions))]]) network-conversions))]])

23
src/quo2/components/wallet/token_overview.cljs
View File

@ -1,12 +1,10 @@
(ns quo2.components.wallet.token-overview (ns quo2.components.wallet.token-overview
(:require (:require
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]
[react-native.core :as rn] [react-native.core :as rn]
[clojure.string :as string] [clojure.string :as string]
[status-im.utils.currency :as currencies] [quo2.components.markdown.text :as text]
[status-im.ui.components.icons.icons :as icons] [quo2.components.icon :as icons]))
[quo2.components.markdown.text :as text]))
(def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12}) (def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
@ -42,15 +40,15 @@
}" }"
[] []
(fn (fn
[{:keys [currency price percentage-change] :or {currency :usd price "0.00" percentage-change "0.0"}}] [{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
(let [direction (get-direction percentage-change)] (let [direction (get-direction percentage-change)]
[rn/view {:style container-style} [rn/view {:style container-style}
[text/text {:number-of-lines 1 [text/text {:number-of-lines 1
:size :paragraph-2} (i18n/label :token-price)] :size :paragraph-2} label]
[text/text {:style {:margin-top 4} [text/text {:style {:margin-top 4}
:weight :semi-bold :weight :semi-bold
:number-of-lines 1 :number-of-lines 1
:size :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)] :size :heading-2} (str currency price)]
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
(when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12) (when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
@ -76,7 +74,7 @@
:percentage-change :string :percentage-change :string
}" }"
[] []
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {currency :usd account-balance "0.00" price "0.00" percentage-change "0.0"}}] (fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
(let [direction (get-direction percentage-change)] (let [direction (get-direction percentage-change)]
[rn/view {:style container-style} [rn/view {:style container-style}
[text/text {:weight :regular [text/text {:weight :regular
@ -85,20 +83,19 @@
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}} [rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
[text/text {:number-of-lines 1 [text/text {:number-of-lines 1
:weight :semi-bold :weight :semi-bold
:size :heading-1} (str (get-in currencies/currencies [currency :symbol]) account-balance)] :size :heading-1} (str currency account-balance)]
[rn/image {:source token-img-src [rn/image {:source token-img-src
:style {:height 32 :style {:height 32
:width 32}}]] :width 32}}]]
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12) (when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase :main-icons2/price-decrease)
{:no-color true {:no-color true
:width 12 :size 12
:height 12
:container-style {:margin-right 4}}]) :container-style {:margin-right 4}}])
[text/text {:number-of-lines 1 [text/text {:number-of-lines 1
:weight :medium :weight :medium
:size :paragraph-2 :size :paragraph-2
:style {:color (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)] :style {:color (price-color direction)}} (str currency price)]
[divider direction] [divider direction]
[text/text {:number-of-lines 1 [text/text {:number-of-lines 1
:weight :medium :weight :medium

2
src/quo2/theme.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.theme (ns quo2.theme
(:require [reagent.core :as reagent])) (:require [reagent.core :as reagent]))
(def theme (reagent/atom nil)) (def theme (reagent/atom :light))
(defn dark? [] (defn dark? []
(= :dark @theme)) (= :dark @theme))

2
src/react_native/core.cljs
View File

@ -15,6 +15,8 @@
(def flat-list flat-list/flat-list) (def flat-list flat-list/flat-list)
(def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js react-native)))
(def modal (reagent/adapt-react-class (.-Modal ^js react-native))) (def modal (reagent/adapt-react-class (.-Modal ^js react-native)))
(def keyboard ^js (.-Keyboard ^js react-native)) (def keyboard ^js (.-Keyboard ^js react-native))

32
src/react_native/fast_image.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns react-native.fast-image
(:require ["react-native-fast-image" :as FastImage]
[react-native.core :as rn]
[reagent.core :as reagent]))
(def fast-image-class (reagent/adapt-react-class ^js FastImage))
(defn placeholder [style child]
[rn/view {:style (merge style {:flex 1 :justify-content :center :align-items :center})}
child])
(defn fast-image [_]
(let [loaded? (reagent/atom false)
error? (reagent/atom false)]
(fn [props]
[fast-image-class (merge
props
{:on-error (fn [e]
(when-let [on-error (:on-error props)]
(on-error e))
(reset! error? true))
:on-load (fn [e]
(when-let [on-load (:on-load props)]
(on-load e))
(reset! loaded? true)
(reset! error? false))})
(when (or @error? (not @loaded?))
[placeholder (:style props)
(if @error?
[rn/text "X"]
(when-not @loaded?
[rn/activity-indicator {:animating true}]))])])))

5
src/react_native/masked_view.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns react-native.masked-view
(:require ["@react-native-community/masked-view" :default MaskedView]
[reagent.core :as reagent]))
(def masked-view (reagent/adapt-react-class MaskedView))

5
src/react_native/syntax_highlighter.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns react-native.syntax-highlighter
(:require ["react-syntax-highlighter" :default Highlighter]
[reagent.core :as reagent]))
(def highlighter (reagent/adapt-react-class Highlighter))

4
src/status_im/switcher/home_stack.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.switcher.home-stack (ns status-im.switcher.home-stack
(:require [react-native.reanimated :as reanimated] (:require [react-native.reanimated :as reanimated]
[status-im.i18n.i18n :as i18n]
[status-im.switcher.styles :as styles] [status-im.switcher.styles :as styles]
[status-im.switcher.animation :as animation] [status-im.switcher.animation :as animation]
[status-im.ui2.screens.chat.home :as chat.home] [status-im.ui2.screens.chat.home :as chat.home]
@ -54,6 +55,7 @@
[stack-view :browser-stack shared-values] [stack-view :browser-stack shared-values]
[stack-view :wallet-stack shared-values] [stack-view :wallet-stack shared-values]
[floating-shell-button/floating-shell-button [floating-shell-button/floating-shell-button
{:jump-to {:on-press #(animation/close-home-stack shared-values)}} {:jump-to {:on-press #(animation/close-home-stack shared-values)
:label (i18n/label :t/jump-to)}}
{:position :absolute {:position :absolute
:bottom 12}]]))]) :bottom 12}]]))])

1
src/status_im/ui/screens/communities/community_overview_redesign.cljs
View File

@ -29,6 +29,7 @@
:align-items :center :align-items :center
:margin-top 20}} :margin-top 20}}
[preview-list/preview-list {:type :user [preview-list/preview-list {:type :user
:more-than-99-label (i18n/label :counter-99-plus)
:user user-list :list-size 4 :size 24}] :user user-list :list-size 4 :size 24}]
[text/text {:accessibility-label :communities-screen-title [text/text {:accessibility-label :communities-screen-title
:style {:margin-left 8} :style {:margin-left 8}

3
src/status_im/ui/screens/screens.cljs
View File

@ -119,11 +119,10 @@
[status-im.ui.screens.wallet.buy-crypto.views :as wallet.buy-crypto] [status-im.ui.screens.wallet.buy-crypto.views :as wallet.buy-crypto]
[status-im.ui.screens.wallet.recipient.views :as recipient] [status-im.ui.screens.wallet.recipient.views :as recipient]
[status-im.ui.screens.wallet.send.views :as wallet.send] [status-im.ui.screens.wallet.send.views :as wallet.send]
[quo2.screens.main :as quo2.preview] [status-im.ui2.screens.quo2-preview.main :as quo2.preview]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[status-im.ui.screens.wallet.manage-connections.views :as manage-all-connections] [status-im.ui.screens.wallet.manage-connections.views :as manage-all-connections]
[status-im.navigation2.screens :as navigation2.screens])) [status-im.navigation2.screens :as navigation2.screens]))
;[quo2.foundations.colors :as quo2.colors]))
(def components (def components
[]) [])

2
src/quo2/components/list_items/received_cr_item.cljs → src/status_im/ui2/screens/chat/components/received_cr_item.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.list-items.received-cr-item (ns status-im.ui2.screens.chat.components.received-cr-item
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.handlers :refer [<sub >evt]]

4
src/status_im/ui2/screens/chat/home.cljs
View File

@ -35,7 +35,7 @@
[quo2.components.icon :as quo2.icons] [quo2.components.icon :as quo2.icons]
[quo.components.safe-area :as safe-area] [quo.components.safe-area :as safe-area]
[quo2.components.notifications.info-count :refer [info-count]] [quo2.components.notifications.info-count :refer [info-count]]
[quo2.components.list-items.received-cr-item :refer [received-cr-item]] [status-im.ui2.screens.chat.components.received-cr-item :as received-cr-item]
[status-im.ui2.screens.chat.components.message-home-item.view :refer [messages-home-item]] [status-im.ui2.screens.chat.components.message-home-item.view :refer [messages-home-item]]
[status-im.ui2.screens.chat.components.contact-item.view :refer [contact-item]] [status-im.ui2.screens.chat.components.contact-item.view :refer [contact-item]]
[clojure.string :as str]) [clojure.string :as str])
@ -198,7 +198,7 @@
[list/flat-list [list/flat-list
{:key-fn :first {:key-fn :first
:data (if (= @selected-requests-tab :received) received-requests sent-requests) :data (if (= @selected-requests-tab :received) received-requests sent-requests)
:render-fn received-cr-item}]]))]) :render-fn received-cr-item/received-cr-item}]]))])
(defn get-display-name [{:keys [chat-id message]}] (defn get-display-name [{:keys [chat-id message]}]
(let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id])) (let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))

5
src/status_im/ui2/screens/chat/messages/message.cljs
View File

@ -284,7 +284,10 @@
(if deleted-for-me? (if deleted-for-me?
[system-message/system-message [system-message/system-message
{:type :deleted {:type :deleted
:label :message-deleted-for-you :label (i18n/label :message-deleted-for-you)
:labels {:pinned-a-message (i18n/label :pinned-a-message)
:message-deleted (i18n/label :message-deleted)
:added (i18n/label :added)}
:timestamp-str timestamp-str :timestamp-str timestamp-str
:non-pressable? true :non-pressable? true
:animate-landing? (if deleted-for-me-undoable-till true false)}] :animate-landing? (if deleted-for-me-undoable-till true false)}]

4
src/quo2/screens/avatars/account_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/account_avatar.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.avatars.account-avatar (ns status-im.ui2.screens.quo2-preview.avatars.account-avatar
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.avatars.account-avatar :as quo2])) [quo2.components.avatars.account-avatar :as quo2]))
(def descriptor [{:label "Icon" (def descriptor [{:label "Icon"

4
src/quo2/screens/avatars/channel_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/channel_avatar.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.avatars.channel-avatar (ns status-im.ui2.screens.quo2-preview.avatars.channel-avatar
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.avatars.channel-avatar :as quo2])) [quo2.components.avatars.channel-avatar :as quo2]))

4
src/quo2/screens/avatars/group_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/group_avatar.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.avatars.group-avatar (ns status-im.ui2.screens.quo2-preview.avatars.group-avatar
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.avatars.group-avatar :as quo2])) [quo2.components.avatars.group-avatar :as quo2]))

4
src/quo2/screens/avatars/icon_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/icon_avatar.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.avatars.icon-avatar (ns status-im.ui2.screens.quo2-preview.avatars.icon-avatar
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.avatars.icon-avatar :as quo2])) [quo2.components.avatars.icon-avatar :as quo2]))

4
src/quo2/screens/avatars/user_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/user_avatar.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.avatars.user-avatar (ns status-im.ui2.screens.quo2-preview.avatars.user-avatar
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.avatars.user-avatar :as quo2] [quo2.components.avatars.user-avatar :as quo2]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.react-native.resources :as resources])) [status-im.react-native.resources :as resources]))

4
src/quo2/screens/avatars/wallet_user_avatar.cljs → src/status_im/ui2/screens/quo2_preview/avatars/wallet_user_avatar.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.avatars.wallet-user-avatar (ns status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.avatars.wallet-user-avatar :as quo2] [quo2.components.avatars.wallet-user-avatar :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))

4
src/quo2/screens/buttons/button.cljs → src/status_im/ui2/screens/quo2_preview/buttons/button.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.buttons.button (ns status-im.ui2.screens.quo2-preview.buttons.button
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.buttons.button :as quo2])) [quo2.components.buttons.button :as quo2]))

12
src/quo2/screens/buttons/dynamic_button.cljs → src/status_im/ui2/screens/quo2_preview/buttons/dynamic_button.cljs
View File

@ -1,9 +1,10 @@
(ns quo2.screens.buttons.dynamic-button (ns status-im.ui2.screens.quo2-preview.buttons.dynamic-button
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.buttons.dynamic-button :as quo2])) [quo2.components.buttons.dynamic-button :as quo2]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Type:" (def descriptor [{:label "Type:"
:key :type :key :type
@ -27,7 +28,10 @@
:type :text}]) :type :text}])
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:count "5" :type :jump-to})] (let [state (reagent/atom {:count "5"
:type :jump-to
:labels {:jump-to (i18n/label :t/jump-to)
:search-with-label (i18n/label :t/back)}})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}

4
src/quo2/screens/code/snippet.cljs → src/status_im/ui2/screens/quo2_preview/code/snippet.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.screens.code.snippet (ns status-im.ui2.screens.quo2-preview.code.snippet
(:require [quo2.screens.preview :as preview] (:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.code.snippet :as snippet] [quo2.components.code.snippet :as snippet]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]

4
src/quo2/screens/community/community_card_view.cljs → src/status_im/ui2/screens/quo2_preview/community/community_card_view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.community.community-card-view (ns status-im.ui2.screens.quo2-preview.community.community-card-view
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.constants :as constants] [status-im.constants :as constants]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]

2
src/quo2/screens/community/community_list_view.cljs → src/status_im/ui2/screens/quo2_preview/community/community_list_view.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.screens.community.community-list-view (ns status-im.ui2.screens.quo2-preview.community.community-list-view
(:require [quo.react-native :as rn] (:require [quo.react-native :as rn]
[quo.previews.preview :as preview] [quo.previews.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]

2
src/quo2/screens/community/discover_card.cljs → src/status_im/ui2/screens/quo2_preview/community/discover_card.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.screens.community.discover-card (ns status-im.ui2.screens.quo2-preview.community.discover-card
(:require [quo.react-native :as rn] (:require [quo.react-native :as rn]
[quo.previews.preview :as preview] [quo.previews.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]

4
src/quo2/screens/counter/counter.cljs → src/status_im/ui2/screens/quo2_preview/counter/counter.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.counter.counter (ns status-im.ui2.screens.quo2-preview.counter.counter
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.counter.counter :as quo2] [quo2.components.counter.counter :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))

4
src/quo2/screens/dividers/divider_label.cljs → src/status_im/ui2/screens/quo2_preview/dividers/divider_label.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.dividers.divider-label (ns status-im.ui2.screens.quo2-preview.dividers.divider-label
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.dividers.divider-label :as divider-label])) [quo2.components.dividers.divider-label :as divider-label]))

4
src/quo2/screens/dividers/new_messages.cljs → src/status_im/ui2/screens/quo2_preview/dividers/new_messages.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.dividers.new-messages (ns status-im.ui2.screens.quo2-preview.dividers.new-messages
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.dividers.new-messages :as new-messages] [quo2.components.dividers.new-messages :as new-messages]
[status-im.i18n.i18n :as i18n])) [status-im.i18n.i18n :as i18n]))

4
src/quo2/screens/drawers/action_drawers.cljs → src/status_im/ui2/screens/quo2_preview/drawers/action_drawers.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.screens.drawers.action-drawers (ns status-im.ui2.screens.quo2-preview.drawers.action-drawers
(:require [quo2.screens.preview :as preview] (:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.drawers.action-drawers :as quo2] [quo2.components.drawers.action-drawers :as quo2]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]

4
src/quo2/screens/dropdowns/dropdown.cljs → src/status_im/ui2/screens/quo2_preview/dropdowns/dropdown.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.dropdowns.dropdown (ns status-im.ui2.screens.quo2-preview.dropdowns.dropdown
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.dropdowns.dropdown :as quo2] [quo2.components.dropdowns.dropdown :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent])) [reagent.core :as reagent]))

4
src/quo2/screens/info/info_message.cljs → src/status_im/ui2/screens/quo2_preview/info/info_message.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.info.info-message (ns status-im.ui2.screens.quo2-preview.info.info-message
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.info.info-message :as quo2])) [quo2.components.info.info-message :as quo2]))

4
src/quo2/screens/info/information_box.cljs → src/status_im/ui2/screens/quo2_preview/info/information_box.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.info.information-box (ns status-im.ui2.screens.quo2-preview.info.information-box
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.info.information-box :as quo2])) [quo2.components.info.information-box :as quo2]))

4
src/quo2/screens/list_items/channel.cljs → src/status_im/ui2/screens/quo2_preview/list_items/channel.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.list-items.channel (ns status-im.ui2.screens.quo2-preview.list-items.channel
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.list-items.channel :as quo2-channel])) [quo2.components.list-items.channel :as quo2-channel]))

14
src/quo2/screens/list_items/preview_lists.cljs → src/status_im/ui2/screens/quo2_preview/list_items/preview_lists.cljs
View File

@ -1,10 +1,11 @@
(ns quo2.screens.list-items.preview-lists (ns status-im.ui2.screens.quo2-preview.list-items.preview-lists
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[quo2.components.list-items.preview-list :as quo2])) [quo2.components.list-items.preview-list :as quo2]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Size:" (def descriptor [{:label "Size:"
:key :size :key :size
@ -43,9 +44,10 @@
{:source (resources/get-mock-image :photo6)}]) {:source (resources/get-mock-image :photo6)}])
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:type :user (let [state (reagent/atom {:type :user
:size 32 :size 32
:list-size 10}) :list-size 10
:more-than-99-label (i18n/label :counter-99-plus)})
type (reagent/cursor state [:type])] type (reagent/cursor state [:type])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

92
src/quo2/screens/main.cljs → src/status_im/ui2/screens/quo2_preview/main.cljs
View File

@ -1,55 +1,55 @@
(ns quo2.screens.main (ns status-im.ui2.screens.quo2-preview.main
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[quo2.components.markdown.text :as quo2-text] [quo2.components.markdown.text :as quo2-text]
[quo2.components.buttons.button :as quo2-button] [quo2.components.buttons.button :as quo2-button]
[quo2.screens.avatars.channel-avatar :as channel-avatar] [status-im.ui2.screens.quo2-preview.avatars.channel-avatar :as channel-avatar]
[quo2.screens.avatars.icon-avatar :as icon-avatar] [status-im.ui2.screens.quo2-preview.avatars.icon-avatar :as icon-avatar]
[quo2.screens.avatars.group-avatar :as group-avatar] [status-im.ui2.screens.quo2-preview.avatars.group-avatar :as group-avatar]
[quo2.screens.avatars.user-avatar :as user-avatar] [status-im.ui2.screens.quo2-preview.avatars.user-avatar :as user-avatar]
[quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar] [status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
[quo2.screens.buttons.button :as button] [status-im.ui2.screens.quo2-preview.buttons.button :as button]
[quo2.screens.buttons.dynamic-button :as dynamic-button] [status-im.ui2.screens.quo2-preview.buttons.dynamic-button :as dynamic-button]
[quo2.screens.code.snippet :as code-snippet] [status-im.ui2.screens.quo2-preview.code.snippet :as code-snippet]
[quo2.screens.counter.counter :as counter] [status-im.ui2.screens.quo2-preview.counter.counter :as counter]
[quo2.screens.community.community-card-view :as community-card] [status-im.ui2.screens.quo2-preview.community.community-card-view :as community-card]
[quo2.screens.community.discover-card :as discover-card] [status-im.ui2.screens.quo2-preview.community.community-list-view :as community-list-view]
[quo2.screens.community.community-list-view :as community-list-view] [status-im.ui2.screens.quo2-preview.community.discover-card :as discover-card]
[quo2.screens.dividers.divider-label :as divider-label] [status-im.ui2.screens.quo2-preview.dividers.divider-label :as divider-label]
[quo2.screens.dividers.new-messages :as new-messages] [status-im.ui2.screens.quo2-preview.dividers.new-messages :as new-messages]
[quo2.screens.drawers.action-drawers :as drawers] [status-im.ui2.screens.quo2-preview.drawers.action-drawers :as drawers]
[quo2.screens.dropdowns.dropdown :as dropdown] [status-im.ui2.screens.quo2-preview.dropdowns.dropdown :as dropdown]
[quo2.screens.info.info-message :as info-message] [status-im.ui2.screens.quo2-preview.info.info-message :as info-message]
[quo2.screens.info.information-box :as information-box] [status-im.ui2.screens.quo2-preview.info.information-box :as information-box]
[quo2.screens.wallet.lowest-price :as lowest-price] [status-im.ui2.screens.quo2-preview.wallet.lowest-price :as lowest-price]
[quo2.screens.list-items.preview-lists :as preview-lists] [status-im.ui2.screens.quo2-preview.list-items.preview-lists :as preview-lists]
[quo2.screens.list-items.channel :as channel] [status-im.ui2.screens.quo2-preview.list-items.channel :as channel]
[quo2.screens.markdown.text :as text] [status-im.ui2.screens.quo2-preview.markdown.text :as text]
[quo2.screens.messages.gap :as messages-gap] [status-im.ui2.screens.quo2-preview.messages.gap :as messages-gap]
[quo2.screens.messages.system-message :as system-message] [status-im.ui2.screens.quo2-preview.messages.system-message :as system-message]
[quo2.screens.notifications.activity-logs :as activity-logs] [status-im.ui2.screens.quo2-preview.notifications.activity-logs :as activity-logs]
[quo2.screens.reactions.react :as react] [status-im.ui2.screens.quo2-preview.reactions.react :as react]
[quo2.screens.selectors.disclaimer :as disclaimer] [status-im.ui2.screens.quo2-preview.selectors.disclaimer :as disclaimer]
[quo2.screens.selectors.selectors :as selectors] [status-im.ui2.screens.quo2-preview.selectors.selectors :as selectors]
[quo2.screens.switcher.switcher-cards :as switcher-cards] [status-im.ui2.screens.quo2-preview.switcher.switcher-cards :as switcher-cards]
[quo2.screens.navigation.top-nav :as top-nav] [status-im.ui2.screens.quo2-preview.navigation.top-nav :as top-nav]
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] [status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab :as bottom-nav-tab]
[quo2.screens.navigation.floating-shell-button :as floating-shell-button] [status-im.ui2.screens.quo2-preview.navigation.floating-shell-button :as floating-shell-button]
[quo2.screens.tabs.account-selector :as account-selector] [status-im.ui2.screens.quo2-preview.tabs.account-selector :as account-selector]
[quo2.screens.tabs.segmented-tab :as segmented] [status-im.ui2.screens.quo2-preview.tabs.segmented-tab :as segmented]
[quo2.screens.tabs.tabs :as tabs] [status-im.ui2.screens.quo2-preview.tabs.tabs :as tabs]
[quo2.screens.tags.context-tags :as context-tags] [status-im.ui2.screens.quo2-preview.tags.context-tags :as context-tags]
[quo2.screens.tags.tags :as tags] [status-im.ui2.screens.quo2-preview.tags.tags :as tags]
[quo2.screens.tags.permission-tag :as permission-tag] [status-im.ui2.screens.quo2-preview.tags.permission-tag :as permission-tag]
[quo2.screens.tags.status-tags :as status-tags] [status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
[quo2.screens.tags.token-tag :as token-tag] [status-im.ui2.screens.quo2-preview.tags.token-tag :as token-tag]
[quo2.screens.wallet.token-overview :as token-overview] [status-im.ui2.screens.quo2-preview.wallet.token-overview :as token-overview]
[quo2.screens.wallet.network-breakdown :as network-breakdown] [status-im.ui2.screens.quo2-preview.wallet.network-breakdown :as network-breakdown]
[quo2.screens.wallet.network-amount :as network-amount] [status-im.ui2.screens.quo2-preview.wallet.network-amount :as network-amount]
[quo2.screens.navigation.page-nav :as page-nav] [status-im.ui2.screens.quo2-preview.navigation.page-nav :as page-nav]
[quo2.screens.avatars.account-avatar :as account-avatar] [status-im.ui2.screens.quo2-preview.avatars.account-avatar :as account-avatar]
[re-frame.core :as re-frame])) [re-frame.core :as re-frame]))
(def screens-categories (def screens-categories

4
src/quo2/screens/markdown/text.cljs → src/status_im/ui2/screens/quo2_preview/markdown/text.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.markdown.text (ns status-im.ui2.screens.quo2-preview.markdown.text
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.markdown.text :as quo2] [quo2.components.markdown.text :as quo2]
[reagent.core :as reagent])) [reagent.core :as reagent]))

10
src/quo2/screens/messages/gap.cljs → src/status_im/ui2/screens/quo2_preview/messages/gap.cljs
View File

@ -1,9 +1,10 @@
(ns quo2.screens.messages.gap (ns status-im.ui2.screens.quo2-preview.messages.gap
(:require (:require
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.messages.gap :as gap] [quo2.components.messages.gap :as gap]
[reagent.core :as reagent])) [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Timestamp Far" (def descriptor [{:label "Timestamp Far"
:key :timestamp-far :key :timestamp-far
@ -13,7 +14,8 @@
:type :text}]) :type :text}])
(defn preview [] (defn preview []
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" :timestamp-near "Mar 8 · 22:42" :on-info-button-pressed identity})] (let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" :timestamp-near "Mar 8 · 22:42" :on-info-button-pressed identity
:on-press #(println "fill gaps") :warning-label (i18n/label :messages-gap-warning)})]
(fn [] (fn []
[rn/view {:margin-bottom 50} [rn/view {:margin-bottom 50}
[rn/view {:padding 16} [rn/view {:padding 16}

12
src/quo2/screens/messages/system_message.cljs → src/status_im/ui2/screens/quo2_preview/messages/system_message.cljs
View File

@ -1,10 +1,11 @@
(ns quo2.screens.messages.system-message (ns status-im.ui2.screens.quo2-preview.messages.system-message
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.messages.system-message :as system-message] [quo2.components.messages.system-message :as system-message]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Message Type" (def descriptor [{:label "Message Type"
:key :type :key :type
@ -50,7 +51,10 @@
:pinned-by "Steve" :pinned-by "Steve"
:content-text "Hello! This is an example of a pinned message!" :content-text "Hello! This is an example of a pinned message!"
:content-info "3 photos" :content-info "3 photos"
:timestamp-str "09:41"})] :timestamp-str "09:41"
:labels {:pinned-a-message (i18n/label :pinned-a-message)
:message-deleted (i18n/label :message-deleted)
:added (i18n/label :added)}})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}

4
src/quo2/screens/navigation/bottom_nav_tab.cljs → src/status_im/ui2/screens/quo2_preview/navigation/bottom_nav_tab.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.navigation.bottom-nav-tab (ns status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.navigation.bottom-nav-tab :as quo2] [quo2.components.navigation.bottom-nav-tab :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))

9
src/quo2/screens/navigation/floating_shell_button.cljs → src/status_im/ui2/screens/quo2_preview/navigation/floating_shell_button.cljs
View File

@ -1,9 +1,10 @@
(ns quo2.screens.navigation.floating-shell-button (ns status-im.ui2.screens.quo2-preview.navigation.floating-shell-button
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.navigation.floating-shell-button :as quo2] [quo2.components.navigation.floating-shell-button :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Show jump to?" (def descriptor [{:label "Show jump to?"
:key :show-jump-to? :key :show-jump-to?
@ -27,7 +28,7 @@
(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}] (defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
(cond-> {} (cond-> {}
show-jump-to? show-jump-to?
(assoc :jump-to {:on-press #()}) (assoc :jump-to {:on-press #() :label (i18n/label :t/jump-to)})
show-search? show-search?
(assoc :search {:on-press #()}) (assoc :search {:on-press #()})
show-mention? show-mention?

4
src/quo2/screens/navigation/page_nav.cljs → src/status_im/ui2/screens/quo2_preview/navigation/page_nav.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.screens.navigation.page-nav (ns status-im.ui2.screens.quo2-preview.navigation.page-nav
(:require [quo2.screens.preview :as preview] (:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.navigation.page-nav :as quo2] [quo2.components.navigation.page-nav :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]

4
src/quo2/screens/navigation/top_nav.cljs → src/status_im/ui2/screens/quo2_preview/navigation/top_nav.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.navigation.top-nav (ns status-im.ui2.screens.quo2-preview.navigation.top-nav
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.navigation.top-nav :as quo2] [quo2.components.navigation.top-nav :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))

6
src/quo2/screens/notifications/activity_logs.cljs → src/status_im/ui2/screens/quo2_preview/notifications/activity_logs.cljs
View File

@ -1,11 +1,11 @@
(ns quo2.screens.notifications.activity-logs (ns status-im.ui2.screens.quo2-preview.notifications.activity-logs
(:require [quo2.screens.preview :as preview] (:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.notifications.activity-logs :as activity-logs] [quo2.components.notifications.activity-logs :as activity-logs]
[quo2.components.tags.context-tags :as context-tags] [quo2.components.tags.context-tags :as context-tags]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.screens.tags.status-tags :as status-tags] [status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(def descriptor [{:label "Unread?" (def descriptor [{:label "Unread?"

2
src/quo2/screens/preview.clj → src/status_im/ui2/screens/quo2_preview/preview.clj
View File

@ -1,4 +1,4 @@
(ns quo2.screens.preview) (ns status-im.ui2.screens.quo2-preview.preview)
(defmacro list-comp [[binding seq-expr & bindings] body-expr] (defmacro list-comp [[binding seq-expr & bindings] body-expr]
(cond (not binding) (cond (not binding)

4
src/quo2/screens/preview.cljs → src/status_im/ui2/screens/quo2_preview/preview.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.screens.preview (ns status-im.ui2.screens.quo2-preview.preview
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.foundations.colors :as colors]) [quo2.foundations.colors :as colors])
(:require-macros quo2.screens.preview)) (:require-macros status-im.ui2.screens.quo2-preview.preview))
(def container {:flex-direction :row (def container {:flex-direction :row
:padding-vertical 8 :padding-vertical 8

4
src/quo2/screens/reactions/react.cljs → src/status_im/ui2/screens/quo2_preview/reactions/react.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.reactions.react (ns status-im.ui2.screens.quo2-preview.reactions.react
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.reactions.reaction :as quo2.reaction])) [quo2.components.reactions.reaction :as quo2.reaction]))

2
src/quo2/screens/selectors/disclaimer.cljs → src/status_im/ui2/screens/quo2_preview/selectors/disclaimer.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.screens.selectors.disclaimer (ns status-im.ui2.screens.quo2-preview.selectors.disclaimer
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]

4
src/quo2/screens/selectors/selectors.cljs → src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.selectors.selectors (ns status-im.ui2.screens.quo2-preview.selectors.selectors
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.selectors.selectors :as quo2] [quo2.components.selectors.selectors :as quo2]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]

4
src/quo2/screens/switcher/switcher_cards.cljs → src/status_im/ui2/screens/quo2_preview/switcher/switcher_cards.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.switcher.switcher-cards (ns status-im.ui2.screens.quo2-preview.switcher.switcher-cards
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[quo2.components.switcher.switcher-cards :as switcher-cards])) [quo2.components.switcher.switcher-cards :as switcher-cards]))

4
src/quo2/screens/tabs/account_selector.cljs → src/status_im/ui2/screens/quo2_preview/tabs/account_selector.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tabs.account-selector (ns status-im.ui2.screens.quo2-preview.tabs.account-selector
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tabs.account-selector :as quo2])) [quo2.components.tabs.account-selector :as quo2]))

4
src/quo2/screens/tabs/segmented_tab.cljs → src/status_im/ui2/screens/quo2_preview/tabs/segmented_tab.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.tabs.segmented-tab (ns status-im.ui2.screens.quo2-preview.tabs.segmented-tab
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.tabs.segmented-tab :as quo2] [quo2.components.tabs.segmented-tab :as quo2]
[reagent.core :as reagent])) [reagent.core :as reagent]))

4
src/quo2/screens/tabs/tabs.cljs → src/status_im/ui2/screens/quo2_preview/tabs/tabs.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.tabs.tabs (ns status-im.ui2.screens.quo2-preview.tabs.tabs
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.tabs.tabs :as quo2] [quo2.components.tabs.tabs :as quo2]
[reagent.core :as reagent])) [reagent.core :as reagent]))

4
src/quo2/screens/tags/context_tags.cljs → src/status_im/ui2/screens/quo2_preview/tags/context_tags.cljs
View File

@ -1,8 +1,8 @@
(ns quo2.screens.tags.context-tags (ns status-im.ui2.screens.quo2-preview.tags.context-tags
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tags.context-tags :as quo2])) [quo2.components.tags.context-tags :as quo2]))

4
src/quo2/screens/tags/permission_tag.cljs → src/status_im/ui2/screens/quo2_preview/tags/permission_tag.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tags.permission-tag (ns status-im.ui2.screens.quo2-preview.tags.permission-tag
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.tags.permission-tag :as permission-tag] [quo2.components.tags.permission-tag :as permission-tag]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]

13
src/quo2/screens/tags/status_tags.cljs → src/status_im/ui2/screens/quo2_preview/tags/status_tags.cljs
View File

@ -1,9 +1,10 @@
(ns quo2.screens.tags.status-tags (ns status-im.ui2.screens.quo2-preview.tags.status-tags
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tags.status-tags :as quo2])) [quo2.components.tags.status-tags :as quo2]
[status-im.i18n.i18n :as i18n]))
(def status-tags-options (def status-tags-options
{:label "Status" {:label "Status"
@ -30,9 +31,9 @@
:size :small})] :size :small})]
(fn [] (fn []
(let [props (cond-> @state (let [props (cond-> @state
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive}) (= :positive (:status @state)) (assoc :status {:label (i18n/label :positive) :type :positive})
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative}) (= :negative (:status @state)) (assoc :status {:label (i18n/label :negative) :type :negative})
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))] (= :pending (:status @state)) (assoc :status {:label (i18n/label :pending) :type :pending}))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[rn/view {:flex 1} [rn/view {:flex 1}

4
src/quo2/screens/tags/tags.cljs → src/status_im/ui2/screens/quo2_preview/tags/tags.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tags.tags (ns status-im.ui2.screens.quo2-preview.tags.tags
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tags.tags :as tags] [quo2.components.tags.tags :as tags]

4
src/quo2/screens/tags/token_tag.cljs → src/status_im/ui2/screens/quo2_preview/tags/token_tag.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.screens.tags.token-tag (ns status-im.ui2.screens.quo2-preview.tags.token-tag
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.tags.token-tag :as quo2] [quo2.components.tags.token-tag :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))

4
src/quo2/screens/wallet/lowest_price.cljs → src/status_im/ui2/screens/quo2_preview/wallet/lowest_price.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.screens.wallet.lowest-price (ns status-im.ui2.screens.quo2-preview.wallet.lowest-price
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.wallet.lowest-price :as quo2] [quo2.components.wallet.lowest-price :as quo2]
[reagent.core :as reagent])) [reagent.core :as reagent]))

11
src/quo2/screens/wallet/network_amount.cljs → src/status_im/ui2/screens/quo2_preview/wallet/network_amount.cljs
View File

@ -1,9 +1,11 @@
(ns quo2.screens.wallet.network-amount (ns status-im.ui2.screens.quo2-preview.wallet.network-amount
(:require [quo2.screens.preview :as preview] (:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.components.wallet.network-amount :refer [network-amount]] [quo2.components.wallet.network-amount :refer [network-amount]]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent])) [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[clojure.string :as string]))
(def ^:private networks (def ^:private networks
[{:icon :main-icons2/ethereum :name "Mainnet"} [{:icon :main-icons2/ethereum :name "Mainnet"}
@ -38,7 +40,8 @@
:show-right-border? show-right-border?}) :show-right-border? show-right-border?})
(defn- cool-preview [] (defn- cool-preview []
(let [state (reagent/atom nil)] (let [state (reagent/atom {:labels {:eth (i18n/label :t/eth)
:on (string/lower-case (i18n/label :t/on))}})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/view {:margin-bottom 50
:padding 16} :padding 16}

12
src/quo2/screens/wallet/network_breakdown.cljs → src/status_im/ui2/screens/quo2_preview/wallet/network_breakdown.cljs
View File

@ -1,9 +1,11 @@
(ns quo2.screens.wallet.network-breakdown (ns status-im.ui2.screens.quo2-preview.wallet.network-breakdown
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[react-native.core :as rn] [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.wallet.network-breakdown :as quo2])) [quo2.components.wallet.network-breakdown :as quo2]
[status-im.i18n.i18n :as i18n]
[clojure.string :as string]))
(def descriptor [{:label "Ethereum Value" (def descriptor [{:label "Ethereum Value"
:key :top-value :key :top-value
@ -32,7 +34,9 @@
(let [state (reagent/atom {:icon :main-icons/arbitrum (let [state (reagent/atom {:icon :main-icons/arbitrum
:network "Mainnet" :network "Mainnet"
:conversion "5.1234" :conversion "5.1234"
:top-value "10 ETH"})] :top-value "10 ETH"
:labels {:eth (i18n/label :t/eth)
:on (string/lower-case (i18n/label :t/on))}})]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/view {:margin-bottom 50
:padding 16} :padding 16}

14
src/quo2/screens/wallet/token_overview.cljs → src/status_im/ui2/screens/quo2_preview/wallet/token_overview.cljs
View File

@ -1,9 +1,11 @@
(ns quo2.screens.wallet.token-overview (ns status-im.ui2.screens.quo2-preview.wallet.token-overview
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.screens.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.wallet.token-overview :as quo2] [quo2.components.wallet.token-overview :as quo2]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]
[status-im.utils.currency :as currencies]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Token:" (def descriptor [{:label "Token:"
:key :token :key :token
@ -34,7 +36,8 @@
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png")) (def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})] (let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0"
:currency (get-in currencies/currencies [:usd :symbol])})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
@ -45,7 +48,8 @@
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))] [quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
[rn/view {:padding-vertical 25 [rn/view {:padding-vertical 25
:align-items :center}] :align-items :center}]
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]]))) [quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token)
:label (i18n/label :token-price))]]]])))
(defn preview-token-overview [] (defn preview-token-overview []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

10
src/status_im/utils/core.cljc
View File

@ -1,6 +1,5 @@
(ns status-im.utils.core (ns status-im.utils.core
(:require [clojure.string :as string] (:require [clojure.string :as string]))
#?(:cljs [taoensso.timbre :as log])))
(defn truncate-str-memo (defn truncate-str-memo
"Given string and max threshold, trims the string to threshold length with `...` "Given string and max threshold, trims the string to threshold length with `...`
@ -66,10 +65,3 @@
Similar to group-by except that the map values are single objects (depends on key uniqueness)." Similar to group-by except that the map values are single objects (depends on key uniqueness)."
[key coll] [key coll]
(into {} (map #(vector (key %) %) coll))) (into {} (map #(vector (key %) %) coll)))
#?(:cljs
(defn safe-read-message-content [content]
(try
(js->clj (.parse js/JSON content) :keywordize-keys true)
(catch :default e
(log/warn "failed to transform message with " e)))))

140
src/utils.cljs Normal file
View File

@ -0,0 +1,140 @@
(ns utils
(:require [clojure.string :as string]
[goog.string :as gstring]
[goog.string.format]))
(defn naive-round
"Quickly and naively round number `n` up to `decimal-places`.
Example usage: use it to avoid re-renders caused by floating-point number
changes in Reagent atoms. Such numbers can be rounded up to a certain number
of `decimal-places` in order to avoid re-rendering due to tiny fractional
changes.
Don't use this function for arbitrary-precision arithmetic."
[n decimal-places]
(let [scale (Math/pow 10 decimal-places)]
(/ (Math/round (* n scale))
scale)))
(defn- caught-invalid-number []
(throw (js/Error "Invalid Number")))
(defn- with-precision [precision input-number]
(gstring/format (str "%." precision "f") input-number))
(defn- is-bad-number [number-string]
(nil? (re-find #"^\d+(\.\d{1,9})?$" number-string)))
(defn- with-precision-division [numerator-num denominator-num precision]
(->> (/ numerator-num denominator-num)
(with-precision precision)))
(defn- number->formatted-number [number-string precision]
(let [parsed-number (js/parseInt number-string 10)
numeric-value (if (or (neg? number-string)
(is-bad-number (str number-string)))
(caught-invalid-number)
parsed-number)
million 1000000
billion 1000000000
>=-and-< #(and
(>= %1 %2)
(< %1 %3))
unit (cond
(>=-and-< parsed-number billion js/Number.MAX_SAFE_INTEGER) "b"
(>=-and-< parsed-number million billion) "m"
:else
"k")
denominator (cond
(= unit "m") million
(= unit "b") billion
:else 1000)]
(if (js/isNaN numeric-value)
(caught-invalid-number)
(if (>= numeric-value 1000)
(str (with-precision-division numeric-value denominator precision)
unit)
(str numeric-value)))))
(defn format-number
"Returns the thousands in a number in kilo format
Arguments:
number-string (or string int) The input of value of the number
Examples:
[1000 0] -> 1k
[1001 0] -> 1k
[10000 0] -> 10k
[5000 0] -> 5k
[5000 0] -> 5k
[5000000 0] -> 5m
[5000 0] -> 5k"
[number-string precision]
(number->formatted-number number-string precision))
(defn truncate-str-memo
"Given string and max threshold, trims the string to threshold length with `...`
appended to end or in the middle if length of the string exceeds max threshold,
returns the same string if threshold is not exceeded"
[s threshold & [middle?]]
(if (and s (< threshold (count s)))
(if middle?
(let [str-len (count s)
max-len (- threshold 3)
start-len (Math/ceil (/ max-len 2))
end-len (Math/floor (/ max-len 2))
start (subs s 0 start-len)
end (subs s (- str-len end-len) str-len)]
(str start "..." end))
(str (subs s 0 (- threshold 3)) "..."))
s))
(def truncate-str (memoize truncate-str-memo))
(defn clean-text [s]
(-> s
(string/replace #"\n" "")
(string/replace #"\r" "")
(string/trim)))
(defn first-index
"Returns first index in coll where predicate on coll element is truthy"
[pred coll]
(->> coll
(keep-indexed (fn [idx e]
(when (pred e)
idx)))
first))
(defn hash-tag? [s]
(= \# (first s)))
(defn update-if-present
"Like regular `clojure.core/update` but returns original map if update key is not present"
[m k f & args]
(if (contains? m k)
(apply update m k f args)
m))
(defn map-values
"Efficiently apply function to all map values"
[f m]
(into {}
(map (fn [[k v]]
[k (f v)]))
m))
(defn deep-merge
"Recursively merge maps"
[& maps]
(if (every? map? maps)
(apply merge-with deep-merge maps)
(last maps)))
(defn index-by
"Given a collection and a unique key function, returns a map that indexes the collection.
Similar to group-by except that the map values are single objects (depends on key uniqueness)."
[key coll]
(into {} (map #(vector (key %) %) coll)))