status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons]
[quo2.components.icon :as icons]
[quo2.theme :as theme]))
(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])})
(defn get-border-radius [size]
@ -28,11 +28,11 @@
[{:keys [size icon]
:or {size 80
icon :main-icons/placeholder}}]
(let [icon-color (if (theme/dark?)
(:dark icon-color-value)
(:light icon-color-value))
(let [icon-color (if (theme/dark?)
(:dark icon-color-value)
(:light icon-color-value))
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
:background-color icon-color
:height size
@ -40,6 +40,5 @@
:justify-content :center
:align-items :center}}
[icons/icon icon
{:no-color true
:container-style {:width inner-icon-size
:height inner-icon-size}}]]))
{:no-color true
:size inner-icon-size}]]))

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

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

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

@ -1,11 +1,11 @@
(ns quo2.components.avatars.user-avatar
(:require [react-native.core :as rn]
[react-native.fast-image :as fast-image]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as icons]
[clojure.string :refer [upper-case split blank?]]
[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
:inner 72

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

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

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

@ -1,6 +1,5 @@
(ns quo2.components.code.snippet
(:require ["react-native" :as react-native]
["react-syntax-highlighter" :default Highlighter]
[cljs-bean.core :as bean]
[clojure.string :as str]
[oops.core :as oops]
@ -10,7 +9,9 @@
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[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:
;; 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.
truncated? (and max-text-height (< max-text-height @text-height))
maybe-mask-wrapper (if truncated?
[react/masked-view
[masked-view/masked-view
{:mask-element
(reagent/as-element
[react/linear-gradient {:colors ["black" "transparent"]
:locations [0.75 1]
:style {:flex 1}}])}]
[linear-gradient/linear-gradient {:colors ["black" "transparent"]
:locations [0.75 1]
:style {:flex 1}}])}]
[:<>])]
[rn/view {:style {:overflow :hidden
@ -140,15 +141,15 @@
:on-copy-press on-copy-press}])))
(defn snippet [{:keys [language max-lines on-copy-press]} children]
[:> Highlighter {:language language
:renderer (wrap-renderer-fn
native-renderer {:max-lines max-lines
:on-copy-press #(when on-copy-press
(on-copy-press children))})
;; Default props to adapt Highlighter for react-native.
:CodeTag react-native/View
:PreTag react-native/View
:show-line-numbers false
:style #js {}
:custom-style #js {:backgroundColor nil}}
[highlighter/highlighter {:language language
:renderer (wrap-renderer-fn
native-renderer {:max-lines max-lines
:on-copy-press #(when on-copy-press
(on-copy-press children))})
;; Default props to adapt Highlighter for react-native.
:CodeTag react-native/View
:PreTag react-native/View
:show-line-numbers false
:style #js {}
:custom-style #js {:backgroundColor nil}}
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.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
[{:keys [name description locked
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.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
tokens background-color] :as community}]
[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.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]
(if (> count 1000000)
(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.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.
;; TODO replaced when real data is available
(def images
@ -91,5 +93,4 @@
:height (if (= id 1) 8 26)
:border-radius 6
: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
(:require [react-native.core :as rn]
[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)
@ -42,8 +42,7 @@
[icons/icon
:main-icons/chevron-down
{:color text-and-icon-color
:width chevron-icon-container-width
:height chevron-icon-container-height}])
:size chevron-icon-container-width}])
(when (pos? counter-value)
[rn/view {:style {:border-radius 6
:height 16

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

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

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

@ -1,8 +1,8 @@
(ns quo2.components.icon
(:require
[quo2.components.icons.icons :as icons]
[status-im.ui.components.react :as react]
[clojure.string :as string]
[react-native.core :as rn]
[quo2.components.icons.icons :as icons]
[quo2.foundations.colors :as colors]))
(defn memo-icon-fn
@ -12,7 +12,7 @@
:or {accessibility-label :icon}}]
(let [size (or size 20)]
^{:key icon-name}
[react/image
[rn/image
{:style
(merge {:width 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
(:require [react-native.core :as rn]
[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.components.icon :as quo2.icons]
[status-im.ui.components.fast-image :as fast-image]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.markdown.text :as quo2.text]))
@ -57,7 +56,7 @@
transparent-color
(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
:height size
: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 (< label 100)
(str "+" label)
(i18n/label :counter-99-plus))])])
more-than-99-label)])])
(defn border-type [type]
(case type
@ -106,7 +105,7 @@
:transparent? overflow-label transparent?}
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)
list-size (or list-size (count items))
margin-left (get-in params [size :margin-left])
@ -121,4 +120,4 @@
[list-item index type size (get items-arr index) list-size
margin-left hole-size hole-radius hole-x hole-y border-radius])
(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.markdown.text :as text]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :refer [pressable-class]]
[status-im.utils.handlers :refer [>evt]]))
[reagent.core :as reagent]))
;;; helpers
(def themes
@ -84,7 +81,7 @@
:color (get-color :time)}} str])
(defn info-button [on-press]
[pressable-class
[rn/touchable-without-feedback
{:on-press on-press}
[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}]
[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-direction :row
@ -109,12 +106,10 @@
[timestamp timestamp-far]
(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}
:on-press #(when (and chat-id gap-ids)
(>evt [:chat.ui/fill-gaps chat-id gap-ids]))}
[text/text
(i18n/label :messages-gap-warning)]]
:on-press #(when on-press (on-press))}
[text/text warning-label]]
[timestamp timestamp-near]])
@ -124,10 +119,10 @@
if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
[{:keys [timestamp-far
timestamp-near
gap-ids
chat-id
on-info-button-pressed
style]}]
style
on-press
warning-label]}]
(let [body-height (reagent/atom nil)]
(fn []
[rn/view
@ -145,6 +140,6 @@
style)
[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 :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.markdown.text :as text]
[quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]
[status-im.utils.core :as utils]))
[utils :as utils]))
(def themes-landed {:pinned colors/primary-50-opa-5
:added colors/primary-50-opa-5
@ -54,7 +53,7 @@
(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
:justify-content :space-between
:flex 1
@ -67,10 +66,10 @@
[text/text {:size :paragraph-2
:style {:color (get-color :text)
:margin-right 5}}
(i18n/label (or label :message-deleted))]
(or label (:message-deleted labels))]
[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
:flex-direction :row}
[sm-icon {:icon :main-icons/add-user16
@ -84,14 +83,14 @@
:style {:color (get-color :text)
:margin-left 3
:margin-right 3}}
(i18n/label :added)]
(:added labels)]
[sm-user-avatar (:image (second mentions))]
[text/text {:weight :semi-bold
:size :paragraph-2}
(:name (second mentions))]
[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
:flex 1
:align-items :center}
@ -110,7 +109,7 @@
:margin-right 2}
[text/text {:size :paragraph-2
:style {:color (get-color :text)}}
(i18n/label :pinned-a-message)]]
(:pinned-a-message labels)]]
[sm-timestamp timestamp-str]]
[rn/view {:flex-direction :row}
[rn/view {:flex-direction :row
@ -137,7 +136,7 @@
(utils/truncate-str (:info content) 24)])]]]])
(defn system-message
[{:keys [type style non-pressable? animate-landing?] :as message}]
[{:keys [type style non-pressable? animate-landing? labels] :as message}]
[:f>
(fn []
(let [sv-color (reanimated/use-shared-value
@ -159,4 +158,4 @@
:padding-horizontal 11
:background-color sv-color}
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]))
(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
{:type type
:label label
:on-press on-press
:count count
:style style

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

@ -2,7 +2,6 @@
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as icons]
[status-im.utils.dimensions :as dimensions]
[quo2.components.markdown.text :as text]
[clojure.string :as string]))
@ -185,8 +184,7 @@
mid-section
left-section
right-section-buttons]}]
(let [{:keys [height width]} (dimensions/window)
put-middle-section-on-left? (or align-mid?
(let [put-middle-section-on-left? (or align-mid?
(> (count right-section-buttons) 1))
mid-section-props
{:type (:type mid-section)
@ -197,15 +195,12 @@
:right-icon (:right-icon mid-section)
:icon (:icon mid-section)
:left-icon (:left-icon mid-section)}]
[rn/view {:style (cond->
{:display :flex
:flex-direction :row
:width width
:height (* 0.0497 height)
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:align-items :center
:padding-horizontal 20
:justify-content :space-between}
[rn/view {:style (cond-> {:display :flex
:flex-direction :row
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:align-items :center
:padding-horizontal 20
:justify-content :space-between}
page-nav-background-uri (assoc :background-color page-nav-color)
page-nav-color (assoc :background page-nav-background-uri))}
[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
(: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.components.markdown.text :as text]
[quo2.components.buttons.button :as button]
[quo2.components.switcher.styles :as styles]
[quo2.components.counter.counter :as counter]
[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.group-avatar :as group-avatar]
[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
@ -19,9 +21,10 @@
[rn/view {:style (styles/content-container new-notifications?)}
(case content-type
:text [text/text (styles/last-message-text-props) data]
:photo [preview-list/preview-list {:type :photo
:size 24
:override-theme :dark} data]
:photo [preview-list/preview-list {:type :photo
:more-than-99-label (i18n/label :counter-99-plus)
:size 24
:override-theme :dark} data]
:sticker [fast-image/fast-image {:source (:source data)
:style (styles/sticker)}]
:gif [fast-image/fast-image {:source (:source data)
@ -35,6 +38,7 @@
:community-info (case (:type data)
:pending [status-tags/status-tag
{:status :pending
:label (i18n/label :t/pending)
:size :small
:override-theme :dark}]
:kicked [status-tags/status-tag
@ -75,15 +79,15 @@
(defn subtitle [{:keys [content-type data]}]
(case content-type
:text (i18n/label :t/message)
:photo (i18n/label :t/n-photos {:count (count data)})
:sticker (i18n/label :t/sticker)
:gif (i18n/label :t/gif)
:audio (i18n/label :t/audio-message)
:community (i18n/label :t/link-to-community)
:link (i18n/label :t/external-link)
:code (i18n/label :t/code-snippet)
:channel (i18n/label :t/community-channel)
:text (i18n/label :t/message)
:photo (i18n/label :t/n-photos {:count (count data)})
:sticker (i18n/label :t/sticker)
:gif (i18n/label :t/gif)
:audio (i18n/label :t/audio-message)
:community (i18n/label :t/link-to-community)
:link (i18n/label :t/external-link)
:code (i18n/label :t/code-snippet)
:channel (i18n/label :t/community-channel)
:community-info (i18n/label :t/community)))
;; Screens Card

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

@ -2,8 +2,8 @@
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[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
:icon-color colors/neutral-50

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

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

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

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

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

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

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

@ -1,10 +1,8 @@
(ns quo2.components.wallet.network-amount
(:require [clojure.string :as string]
[react-native.core :as rn]
(:require [react-native.core :as rn]
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]))
[quo2.foundations.colors :as colors]))
(defn network-amount
"[network-amount opts]
@ -13,7 +11,7 @@
:network-name \"Mainnet\" ;; shown network name
:icon :main-icons2/ethereum ;; key of icon belonging to the network
: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
:background-color (colors/theme-colors colors/white colors/neutral-95)
:border-radius 16
@ -35,7 +33,7 @@
[text/text {:weight :medium
:size :paragraph-2
: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)
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:padding-left 8
@ -44,4 +42,4 @@
[text/text {:weight :medium
:size :label
: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]]))
(defn network-breakdown
[{:keys [top-value network-conversions]}]
[{:keys [top-value network-conversions labels]}]
[rn/view {:style {:background-color (colors/theme-colors
colors/white
colors/neutral-95)
@ -41,5 +41,6 @@
[network-amount {:show-right-border? (not= idx last-item-idx)
:icon icon
:network-name network
:eth-value conversion}]])
:eth-value conversion
:labels labels}]])
network-conversions))]])

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

@ -1,12 +1,10 @@
(ns quo2.components.wallet.token-overview
(:require
[quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]
[react-native.core :as rn]
[clojure.string :as string]
[status-im.utils.currency :as currencies]
[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 container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
@ -42,15 +40,15 @@
}"
[]
(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)]
[rn/view {:style container-style}
[text/text {:number-of-lines 1
:size :paragraph-2} (i18n/label :token-price)]
:size :paragraph-2} label]
[text/text {:style {:margin-top 4}
:weight :semi-bold
: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}}
(when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
@ -76,7 +74,7 @@
: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)]
[rn/view {:style container-style}
[text/text {:weight :regular
@ -85,20 +83,19 @@
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
[text/text {:number-of-lines 1
: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
:style {:height 32
:width 32}}]]
[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
:width 12
:height 12
:size 12
:container-style {:margin-right 4}}])
[text/text {:number-of-lines 1
:weight :medium
: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]
[text/text {:number-of-lines 1
:weight :medium

2
src/quo2/theme.cljs
View File

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

2
src/react_native/core.cljs
View File

@ -15,6 +15,8 @@
(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 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
(:require [react-native.reanimated :as reanimated]
[status-im.i18n.i18n :as i18n]
[status-im.switcher.styles :as styles]
[status-im.switcher.animation :as animation]
[status-im.ui2.screens.chat.home :as chat.home]
@ -54,6 +55,7 @@
[stack-view :browser-stack shared-values]
[stack-view :wallet-stack shared-values]
[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
:bottom 12}]]))])

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

@ -29,6 +29,7 @@
:align-items :center
:margin-top 20}}
[preview-list/preview-list {:type :user
:more-than-99-label (i18n/label :counter-99-plus)
:user user-list :list-size 4 :size 24}]
[text/text {:accessibility-label :communities-screen-title
: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.recipient.views :as recipient]
[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.ui.screens.wallet.manage-connections.views :as manage-all-connections]
[status-im.navigation2.screens :as navigation2.screens]))
;[quo2.foundations.colors :as quo2.colors]))
(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]
[quo2.foundations.colors :as colors]
[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]
[quo.components.safe-area :as safe-area]
[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.contact-item.view :refer [contact-item]]
[clojure.string :as str])
@ -198,7 +198,7 @@
[list/flat-list
{:key-fn :first
: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]}]
(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?
[system-message/system-message
{: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
:non-pressable? true
: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]
[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]))
(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]
[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.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]
[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.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]
[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.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]
[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]
[reagent.core :as reagent]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.avatars.wallet-user-avatar :as quo2]
[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]
[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.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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[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:"
:key :type
@ -27,7 +28,10 @@
:type :text}])
(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 []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[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
(:require [quo2.screens.preview :as preview]
(ns status-im.ui2.screens.quo2-preview.code.snippet
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.code.snippet :as snippet]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[status-im.constants :as constants]
[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]
[quo.previews.preview :as preview]
[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]
[quo.previews.preview :as preview]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.counter.counter :as quo2]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[quo2.components.dividers.new-messages :as new-messages]
[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
(:require [quo2.screens.preview :as preview]
(ns status-im.ui2.screens.quo2-preview.drawers.action-drawers
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.drawers.action-drawers :as quo2]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.dropdowns.dropdown :as quo2]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[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:"
:key :size
@ -43,9 +44,10 @@
{:source (resources/get-mock-image :photo6)}])
(defn cool-preview []
(let [state (reagent/atom {:type :user
:size 32
:list-size 10})
(let [state (reagent/atom {:type :user
:size 32
:list-size 10
:more-than-99-label (i18n/label :counter-99-plus)})
type (reagent/cursor state [:type])]
(fn []
[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]
[react-native.safe-area :as safe-area]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[quo2.components.markdown.text :as quo2-text]
[quo2.components.buttons.button :as quo2-button]
[quo2.screens.avatars.channel-avatar :as channel-avatar]
[quo2.screens.avatars.icon-avatar :as icon-avatar]
[quo2.screens.avatars.group-avatar :as group-avatar]
[quo2.screens.avatars.user-avatar :as user-avatar]
[quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
[quo2.screens.buttons.button :as button]
[quo2.screens.buttons.dynamic-button :as dynamic-button]
[quo2.screens.code.snippet :as code-snippet]
[quo2.screens.counter.counter :as counter]
[quo2.screens.community.community-card-view :as community-card]
[quo2.screens.community.discover-card :as discover-card]
[quo2.screens.community.community-list-view :as community-list-view]
[quo2.screens.dividers.divider-label :as divider-label]
[quo2.screens.dividers.new-messages :as new-messages]
[quo2.screens.drawers.action-drawers :as drawers]
[quo2.screens.dropdowns.dropdown :as dropdown]
[quo2.screens.info.info-message :as info-message]
[quo2.screens.info.information-box :as information-box]
[quo2.screens.wallet.lowest-price :as lowest-price]
[quo2.screens.list-items.preview-lists :as preview-lists]
[quo2.screens.list-items.channel :as channel]
[quo2.screens.markdown.text :as text]
[quo2.screens.messages.gap :as messages-gap]
[quo2.screens.messages.system-message :as system-message]
[quo2.screens.notifications.activity-logs :as activity-logs]
[quo2.screens.reactions.react :as react]
[quo2.screens.selectors.disclaimer :as disclaimer]
[quo2.screens.selectors.selectors :as selectors]
[quo2.screens.switcher.switcher-cards :as switcher-cards]
[quo2.screens.navigation.top-nav :as top-nav]
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
[quo2.screens.navigation.floating-shell-button :as floating-shell-button]
[quo2.screens.tabs.account-selector :as account-selector]
[quo2.screens.tabs.segmented-tab :as segmented]
[quo2.screens.tabs.tabs :as tabs]
[quo2.screens.tags.context-tags :as context-tags]
[quo2.screens.tags.tags :as tags]
[quo2.screens.tags.permission-tag :as permission-tag]
[quo2.screens.tags.status-tags :as status-tags]
[quo2.screens.tags.token-tag :as token-tag]
[quo2.screens.wallet.token-overview :as token-overview]
[quo2.screens.wallet.network-breakdown :as network-breakdown]
[quo2.screens.wallet.network-amount :as network-amount]
[quo2.screens.navigation.page-nav :as page-nav]
[quo2.screens.avatars.account-avatar :as account-avatar]
[status-im.ui2.screens.quo2-preview.avatars.channel-avatar :as channel-avatar]
[status-im.ui2.screens.quo2-preview.avatars.icon-avatar :as icon-avatar]
[status-im.ui2.screens.quo2-preview.avatars.group-avatar :as group-avatar]
[status-im.ui2.screens.quo2-preview.avatars.user-avatar :as user-avatar]
[status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
[status-im.ui2.screens.quo2-preview.buttons.button :as button]
[status-im.ui2.screens.quo2-preview.buttons.dynamic-button :as dynamic-button]
[status-im.ui2.screens.quo2-preview.code.snippet :as code-snippet]
[status-im.ui2.screens.quo2-preview.counter.counter :as counter]
[status-im.ui2.screens.quo2-preview.community.community-card-view :as community-card]
[status-im.ui2.screens.quo2-preview.community.community-list-view :as community-list-view]
[status-im.ui2.screens.quo2-preview.community.discover-card :as discover-card]
[status-im.ui2.screens.quo2-preview.dividers.divider-label :as divider-label]
[status-im.ui2.screens.quo2-preview.dividers.new-messages :as new-messages]
[status-im.ui2.screens.quo2-preview.drawers.action-drawers :as drawers]
[status-im.ui2.screens.quo2-preview.dropdowns.dropdown :as dropdown]
[status-im.ui2.screens.quo2-preview.info.info-message :as info-message]
[status-im.ui2.screens.quo2-preview.info.information-box :as information-box]
[status-im.ui2.screens.quo2-preview.wallet.lowest-price :as lowest-price]
[status-im.ui2.screens.quo2-preview.list-items.preview-lists :as preview-lists]
[status-im.ui2.screens.quo2-preview.list-items.channel :as channel]
[status-im.ui2.screens.quo2-preview.markdown.text :as text]
[status-im.ui2.screens.quo2-preview.messages.gap :as messages-gap]
[status-im.ui2.screens.quo2-preview.messages.system-message :as system-message]
[status-im.ui2.screens.quo2-preview.notifications.activity-logs :as activity-logs]
[status-im.ui2.screens.quo2-preview.reactions.react :as react]
[status-im.ui2.screens.quo2-preview.selectors.disclaimer :as disclaimer]
[status-im.ui2.screens.quo2-preview.selectors.selectors :as selectors]
[status-im.ui2.screens.quo2-preview.switcher.switcher-cards :as switcher-cards]
[status-im.ui2.screens.quo2-preview.navigation.top-nav :as top-nav]
[status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab :as bottom-nav-tab]
[status-im.ui2.screens.quo2-preview.navigation.floating-shell-button :as floating-shell-button]
[status-im.ui2.screens.quo2-preview.tabs.account-selector :as account-selector]
[status-im.ui2.screens.quo2-preview.tabs.segmented-tab :as segmented]
[status-im.ui2.screens.quo2-preview.tabs.tabs :as tabs]
[status-im.ui2.screens.quo2-preview.tags.context-tags :as context-tags]
[status-im.ui2.screens.quo2-preview.tags.tags :as tags]
[status-im.ui2.screens.quo2-preview.tags.permission-tag :as permission-tag]
[status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
[status-im.ui2.screens.quo2-preview.tags.token-tag :as token-tag]
[status-im.ui2.screens.quo2-preview.wallet.token-overview :as token-overview]
[status-im.ui2.screens.quo2-preview.wallet.network-breakdown :as network-breakdown]
[status-im.ui2.screens.quo2-preview.wallet.network-amount :as network-amount]
[status-im.ui2.screens.quo2-preview.navigation.page-nav :as page-nav]
[status-im.ui2.screens.quo2-preview.avatars.account-avatar :as account-avatar]
[re-frame.core :as re-frame]))
(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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.markdown.text :as quo2]
[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
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[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"
:key :timestamp-far
@ -13,7 +14,8 @@
:type :text}])
(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 []
[rn/view {:margin-bottom 50}
[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]
[status-im.react-native.resources :as resources]
[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.foundations.colors :as colors]))
[quo2.foundations.colors :as colors]
[status-im.i18n.i18n :as i18n]))
(def descriptor [{:label "Message Type"
:key :type
@ -50,7 +51,10 @@
:pinned-by "Steve"
:content-text "Hello! This is an example of a pinned message!"
: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 []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[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]
[react-native.reanimated :as reanimated]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.navigation.bottom-nav-tab :as quo2]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[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?"
:key :show-jump-to?
@ -27,7 +28,7 @@
(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
(cond-> {}
show-jump-to?
(assoc :jump-to {:on-press #()})
(assoc :jump-to {:on-press #() :label (i18n/label :t/jump-to)})
show-search?
(assoc :search {:on-press #()})
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
(:require [quo2.screens.preview :as preview]
(ns status-im.ui2.screens.quo2-preview.navigation.page-nav
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.navigation.page-nav :as quo2]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.navigation.top-nav :as quo2]
[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
(:require [quo2.screens.preview :as preview]
(ns status-im.ui2.screens.quo2-preview.notifications.activity-logs
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.markdown.text :as text]
[quo2.components.notifications.activity-logs :as activity-logs]
[quo2.components.tags.context-tags :as context-tags]
[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]))
(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]
(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]
[react-native.core :as rn]
[quo2.foundations.colors :as colors])
(:require-macros quo2.screens.preview))
(:require-macros status-im.ui2.screens.quo2-preview.preview))
(def container {:flex-direction :row
: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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[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]
[reagent.core :as reagent]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.selectors.selectors :as quo2]
[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]
[reagent.core :as reagent]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[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]
[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]
[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]
[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]
[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]
[status-im.multiaccounts.core :as multiaccounts]
[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.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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.components.tags.permission-tag :as permission-tag]
[quo2.foundations.colors :as colors]
[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]
[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.components.tags.status-tags :as quo2]))
[quo2.components.tags.status-tags :as quo2]
[status-im.i18n.i18n :as i18n]))
(def status-tags-options
{:label "Status"
@ -30,9 +31,9 @@
:size :small})]
(fn []
(let [props (cond-> @state
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive})
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative})
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))]
(= :positive (:status @state)) (assoc :status {:label (i18n/label :positive) :type :positive})
(= :negative (:status @state)) (assoc :status {:label (i18n/label :negative) :type :negative})
(= :pending (:status @state)) (assoc :status {:label (i18n/label :pending) :type :pending}))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[status-im.ui.components.react :as react]
[quo2.foundations.colors :as colors]
[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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.tags.token-tag :as quo2]
[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]
[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]
[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
(:require [quo2.screens.preview :as preview]
(ns status-im.ui2.screens.quo2-preview.wallet.network-amount
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
[react-native.core :as rn]
[quo2.components.wallet.network-amount :refer [network-amount]]
[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
[{:icon :main-icons2/ethereum :name "Mainnet"}
@ -38,7 +40,8 @@
:show-right-border? show-right-border?})
(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 []
[rn/view {:margin-bottom 50
: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]
[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.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"
:key :top-value
@ -32,7 +34,9 @@
(let [state (reagent/atom {:icon :main-icons/arbitrum
:network "Mainnet"
: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 []
[rn/view {:margin-bottom 50
: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]
[quo2.screens.preview :as preview]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[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:"
:key :token
@ -34,7 +36,8 @@
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
(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 []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[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))]
[rn/view {:padding-vertical 25
: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 []
[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
(:require [clojure.string :as string]
#?(:cljs [taoensso.timbre :as log])))
(:require [clojure.string :as string]))
(defn truncate-str-memo
"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)."
[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)))