chore: remove mock data from syncing (#16132)

This commit is contained in:
Jamie Caprani 2023-06-08 18:10:51 +01:00 committed by GitHub
parent 1594ff47f5
commit 51ccd9fdcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 309 additions and 224 deletions

View File

@ -0,0 +1,58 @@
(ns quo2.components.settings.settings-list.component-spec
(:require [quo2.components.settings.settings-list.view :as settings-list]
[test-helpers.component :as h]))
(h/describe "Settings list tests"
(h/test "Default render of Setting list component"
(h/render [settings-list/settings-list {:accessibility-label "test"}])
(h/is-truthy (h/get-by-label-text :test)))
(h/test "It renders a title"
(h/render [settings-list/settings-list {:title "test"}])
(h/is-truthy (h/get-by-text "test")))
(h/test "its gets passed an on press event"
(let [event (h/mock-fn)]
(h/render [settings-list/settings-list
{:title "test"
:on-press event}])
(h/fire-event :press (h/get-by-text "test"))
(h/was-called event)))
(h/test "on change event gets fired for toggle"
(let [on-change (h/mock-fn)]
(h/render [settings-list/settings-list
{:title "test"
:toggle-props {:on-change on-change}}])
(h/fire-event :press (h/get-by-label-text :toggle-off))
(h/was-called on-change)))
(h/test "It renders a badge"
(h/render [settings-list/settings-list {:badge? true}])
(h/is-truthy (h/get-by-label-text :setting-list-badge)))
(h/test "It renders a status tag component"
(h/render [settings-list/settings-list
{:status-tag-props
{:size :small
:status {:type :positive}
:label "test tag"}}])
(h/is-truthy (h/get-by-text "test tag")))
(h/test "on press event gets fired for button"
(let [event (h/mock-fn)]
(h/render [settings-list/settings-list
{:button-props {:title "test button"
:on-press event}}])
(h/fire-event :press (h/get-by-text "test button"))
(h/was-called event)))
(h/test "It renders a list of community icons"
(h/render [settings-list/settings-list
{:communities-props {:data
[{:source "1"
:accessibility-label :community-1}
{:source "2"
:accessibility-label :community-2}]}}])
(h/is-truthy (h/get-by-label-text :community-1))
(h/is-truthy (h/get-by-label-text :community-2))))

View File

@ -5,42 +5,51 @@
{:flex 1})
(defn title
[]
[override-theme]
{:color (colors/theme-colors
colors/neutral-100
colors/white)})
colors/white
override-theme)})
(def icon
{:margin-right 12})
{:margin-right 12
:align-self :flex-start})
(def item-container
{:justify-content :space-between
:height 48
:flex-direction :row
:align-items :center
:padding-horizontal 12
:padding-vertical 13})
(def inner-container
{:flex-direction :row
:align-items :center})
(defn dot
[]
[override-theme]
{:width 15
:height 15
:border-radius 8
:margin-right 14.5
:background-color (colors/theme-colors (colors/custom-color :blue 50)
(colors/custom-color :blue 60))})
(colors/custom-color :blue 60)
override-theme)})
(defn community-icon
[index]
[index override-theme]
{:width 24
:height 24
:border-width 1
:border-color (colors/theme-colors colors/white colors/black)
:border-color (colors/theme-colors colors/white colors/black override-theme)
:border-radius 12
:position :absolute
:top "-50%"
:right (* 20 index)})
(def communities-container
{:flex 1
:margin-right 12})
{:flex 1
:justify-content :center
:align-content :center
:margin-right 12})
(def tag-container
{:margin-top 8})

View File

@ -4,30 +4,36 @@
[quo2.components.selectors.selectors.view :as selectors]
[quo2.components.buttons.button :as button]
[quo2.components.markdown.text :as text]
[quo2.components.tags.status-tags :as status-tag]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(defn settings-title
[title]
[title status-tag-props override-theme]
[rn/view
{:style style/title-container}
[text/text
{:accessibility-label :setting-item-name-text
:ellipsize-mode :tail
:style (style/title)
:number-of-lines 1
:weight :medium
:size :paragraph-1}
title]])
(when title
[text/text
{:accessibility-label :setting-item-name-text
:ellipsize-mode :tail
:style (style/title override-theme)
:override-theme override-theme
:number-of-lines 1
:weight :medium
:size :paragraph-1}
title])
(when status-tag-props
[rn/view {:style style/tag-container}
[status-tag/status-tag
status-tag-props]])])
(defn browser-context-icon
[]
[rn/view
[icons/icon :browser-context
{:container-style style/icon
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]])
(defn left-icon-comp
[icon]
[rn/view {:style style/icon}
[icons/icon icon
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]])
(def chevron-icon
[rn/view
@ -43,22 +49,28 @@
{:checked? checked?
:on-change (fn [new-value] (on-change new-value))}])
(def badge-icon
(defn badge-icon
[override-theme]
[rn/view
{:style (style/dot)}])
{:accessible :true
:accessibility-label :setting-list-badge
:style (style/dot override-theme)}])
(defn right-button
[{:keys [title
on-press]}]
on-press]}
override-theme]
[button/button
{:type :outline
:on-press on-press
:size 24}
{:type :outline
:override-theme override-theme
:on-press on-press
:size 24}
title])
(defn communities-icons
[{:keys [data
icon-style]}]
icon-style]}
override-theme]
(let [communities-count (dec (count data))]
[rn/view
{:style style/communities-container}
@ -70,7 +82,8 @@
{:uri source}
source)
:accessibility-label accessibility-label
:style (merge (style/community-icon (- communities-count index)) icon-style)}])
:style (merge (style/community-icon (- communities-count index) override-theme)
icon-style)}])
data)]))
(defn settings-list
@ -78,7 +91,7 @@
- `title` String to show in the center of the component, right to the icon and left to optional gadgets.
- `on-press` Callback called when the component is pressed.
- `accessibility-label` String to use as accessibility-label for VoiceOver.
- `left-icon` Symbol to indicate icon type on the left side of the component.
- `left-icon` icon keyword for icon on left.
- `chevron?` Boolean to show/hide chevron at the right border of the component.
- `toggle-prop` Map with the following keys:
`checked?` Boolean value to set check or unchecked toggle.
@ -89,7 +102,11 @@
`on-press` Callback called when button is pressed.
- `communities-props` Map with the following keys:
`data` Array of maps containg source of the community asset.
- `style` Styles map to be merge with default container styles."
- `style` Styles map to be merge with default container styles.
- `overide-theme` :dark or :light
- `status-tag-props see the spec for status-tag component
"
[{:keys [title
on-press
accessibility-label
@ -99,21 +116,22 @@
badge?
button-props
communities-props
container-style]}]
container-style
override-theme
status-tag-props]}]
[rn/touchable-without-feedback
{:on-press on-press
:accessibility-label accessibility-label}
[rn/view
{:style (merge style/item-container container-style)}
(case left-icon
;; TODO: Add Icon Avatar on next variants development
:browser-context (browser-context-icon)
nil)
[settings-title title]
(when toggle-props
(toggle-button toggle-props))
(when badge? badge-icon)
(when button-props
(right-button button-props))
(when communities-props (communities-icons communities-props))
(when chevron? chevron-icon)]])
[rn/view {:style style/inner-container}
(when left-icon
[left-icon-comp left-icon])
[settings-title title status-tag-props override-theme]
(when toggle-props
[toggle-button toggle-props])
(when badge? [badge-icon override-theme])
(when button-props
[right-button button-props override-theme])
(when communities-props (communities-icons communities-props override-theme))
(when chevron? chevron-icon)]]])

View File

@ -2,14 +2,16 @@
(:require
[quo2.foundations.colors :as colors]))
(def title-container
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(defn title-container
[container-style]
(merge
{:justify-content :center
:padding-horizontal 20}
container-style))
(def title-text
{:color colors/white})
(def subtitle-text
{:color colors/white
:margin-bottom 8})
{:color colors/white
:margin-top 8})

View File

@ -5,11 +5,12 @@
[react-native.core :as rn]))
(defn title
[{:keys [title
[{:keys [container-style
title
title-accessibility-label
subtitle
subtitle-accessibility-label]}]
[rn/view {:style style/title-container}
[rn/view {:style (style/title-container container-style)}
[text/text
{:accessibility-label title-accessibility-label
:weight :semi-bold

View File

@ -32,5 +32,6 @@
[quo2.components.selectors.filter.component-spec]
[quo2.components.selectors.reactions.component-spec]
[quo2.components.selectors.selectors.component-spec]
[quo2.components.settings.settings-list.component-spec]
[quo2.components.share.share-qr-code.component-spec]
[quo2.components.tags.--tests--.status-tags-component-spec]))

View File

@ -1,29 +0,0 @@
(ns status-im2.common.syncing.style
(:require [quo2.foundations.colors :as colors]))
(def device-container
{:padding-top 12
:padding-horizontal 12
:padding-bottom 16
:border-color colors/white-opa-5
:border-radius 16
:border-width 1
:margin-bottom 24})
(def device-container-orientation
{:flex-direction :row})
(def icon-container
{:height 20
:margin-right 12})
(def tag-container
{:margin-top 8})
(def render-device-status
{:background-color colors/success-60
:align-self :center
:width 8
:height 8
:border-radius 4
:margin-right 6})

View File

@ -1,51 +0,0 @@
(ns status-im2.common.syncing.view
[:require
[quo2.core :as quo]
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.common.not-implemented :as not-implemented]
[status-im2.common.syncing.style :as style]])
;; TODO replace with section list component
;; https://github.com/status-im/status-mobile/issues/15665
(defn view
[{:keys [name
this-device?
device-type]}]
[rn/view {:style style/device-container}
[rn/view {:style style/device-container-orientation}
[rn/view {:style style/icon-container}
[quo/icon
(if (= device-type :mobile) :i/mobile :i/desktop)
{:color colors/white}]]
[rn/view
[quo/text
{:accessibility-label :device-name
:weight :medium
:size :paragraph-1
:style {:color colors/white}}
name]
(when this-device?
[not-implemented/not-implemented
[quo/text
{:accessibility-label :next-back-up
:size :paragraph-2
:style {:color colors/white-opa-40}}
"Next backup in 04:36:12"]])
(when this-device?
[rn/view {:style style/tag-container}
[quo/status-tag
{:size :small
:status {:type :positive}
:no-icon? true
:label (i18n/label :t/this-device)
:override-theme :dark}]])
(when-not this-device?
[rn/view {:style {:flex-direction :row}}
[rn/view style/render-device-status]
[quo/text
{:accessibility-label :next-back-up
:size :paragraph-2
:style {:color colors/white-opa-40}}
(i18n/label :t/online-now)]])]]])

View File

@ -21,4 +21,4 @@
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})
:margin-bottom (+ 14 (:bottom insets))})

View File

@ -12,7 +12,8 @@
(defn page-title
[]
[quo/title
{:title (i18n/label :t/enable-biometrics)
{:container-style {:margin-top 12}
:title (i18n/label :t/enable-biometrics)
:title-accessibility-label :enable-biometrics-title
:subtitle (i18n/label :t/use-biometrics)
:subtitle-accessibility-label :enable-biometrics-sub-title}])

View File

@ -22,4 +22,4 @@
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})
:margin-bottom (+ 14 (:bottom insets))})

View File

@ -16,7 +16,8 @@
(defn page-title
[]
[quo/title
{:title (i18n/label :t/intro-wizard-title6)
{:container-style {:margin-top 12}
:title (i18n/label :t/intro-wizard-title6)
:title-accessibility-label :notifications-title
:subtitle (i18n/label :t/enable-notifications-sub-title)
:subtitle-accessibility-label :notifications-sub-title}])

View File

@ -19,7 +19,8 @@
(defn page-title
[pairing-progress?]
[quo/title
{:title (i18n/label (if pairing-progress?
{:container-style {:margin-top 56}
:title (i18n/label (if pairing-progress?
:t/sync-devices-title
:t/sync-devices-error-title))
:subtitle (i18n/label (if pairing-progress?

View File

@ -1,22 +1,24 @@
(ns status-im2.contexts.onboarding.syncing.results.style
(:require [quo2.foundations.colors :as colors]))
(def page-container
(defn page-container
[top]
{:flex 1
:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:padding-top top
:padding-bottom 20
:background-color colors/neutral-80-opa-80-blur})
(def current-device
{:flex 1})
{:margin-bottom 19})
(def device-list
{:flex 1
:margin-top 24
:margin-top 12
:padding-horizontal 20})
(def continue-button

View File

@ -3,9 +3,10 @@
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[utils.re-frame :as rf]
[status-im2.contexts.onboarding.syncing.results.style :as style]
[status-im2.common.syncing.view :as device]
[status-im2.contexts.syncing.device.view :as device]
[status-im2.contexts.onboarding.common.background.view :as background]))
(defn page-title
@ -21,23 +22,25 @@
[rn/view {:style style/current-device}
[device/view
(merge installation
{:this-device? true})]
[quo/text
{:accessibility-label :sync-with-sub-title
:weight :regular
:size :paragraph-1
:style {:color colors/white}}
(i18n/label :t/sync-with)]])
{:this-device? true})]])
(defn devices-list
[]
(let [installations (rf/sub [:pairing/enabled-installations])]
(let [installations (rf/sub [:pairing/enabled-installations])
this-device (first installations)
other-devices (rest installations)]
[rn/view {:style style/device-list}
[current-device this-device]
[quo/text
{:accessibility-label :synced-with-sub-title
:weight :regular
:size :paragraph-2
:style {:color colors/white-opa-40}}
(i18n/label :t/synced-with)]
[rn/flat-list
{:data (rest installations)
{:data other-devices
:shows-vertical-scroll-indicator false
:key-fn :installation-id
:header [current-device (first installations)]
:render-fn device/view}]]))
(defn continue-button
@ -52,9 +55,13 @@
(defn view
[]
[rn/view {:style style/page-container}
[background/view true]
[quo/page-nav]
[page-title]
[devices-list]
[continue-button]])
(let [top (safe-area/get-top)]
[rn/view {:style (style/page-container top)}
[background/view true]
[rn/view
{:style {:margin-top 56
:margin-bottom 26
:flex 1}}
[page-title]
[devices-list]
[continue-button]]]))

View File

@ -22,4 +22,4 @@
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})
:margin-bottom (+ 14 (:bottom insets))})

View File

@ -15,7 +15,8 @@
[]
(let [new-account? (rf/sub [:onboarding-2/new-account?])]
[quo/title
{:title (i18n/label (if new-account?
{:container-style {:margin-top 12}
:title (i18n/label (if new-account?
:t/welcome-to-web3
:t/welcome-back))
:title-accessibility-label :welcome-title

View File

@ -23,10 +23,12 @@
:type :boolean}
{:label "Button"
:key :button-props
:type :boolean
}])
:type :boolean}
{:label "Status Tag"
:key :status-tag-props
:type :boolean}])
(defn get-mock-data
(defn get-props
[data]
(when (:toggle-props data) (js/console.warn data))
(merge
@ -41,7 +43,13 @@
{:data
[{:source (resources/mock-images :rarible)}
{:source (resources/mock-images :decentraland)}
{:source (resources/mock-images :coinbase)}]})}))
{:source (resources/mock-images :coinbase)}]})
:status-tag-props (when (:status-tag-props data)
{:size :small
:status {:type :positive}
:no-icon? true
:label "example"
:override-theme :dark})}))
(defn cool-preview
[]
@ -56,9 +64,9 @@
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 100
:padding-horizontal 40
:padding-horizontal 20
:align-items :center}
[quo/settings-list (get-mock-data @state)]]])))
[quo/settings-list (get-props @state)]]])))
(defn preview-settings-list
[]

View File

@ -0,0 +1,11 @@
(ns status-im2.contexts.syncing.device.style
(:require [quo2.foundations.colors :as colors]))
(def device-container
{:padding-top 12
:padding-horizontal 12
:padding-bottom 16
:border-color colors/white-opa-5
:border-radius 16
:border-width 1
:margin-top 12})

View File

@ -0,0 +1,34 @@
(ns status-im2.contexts.syncing.device.view
[:require
[quo2.core :as quo]
[utils.i18n :as i18n]
[status-im2.contexts.syncing.device.style :as style]])
(defn view
[{:keys [name
this-device?
device-type
enabled?
show-button?]}]
(let [paired? (and (not this-device?) enabled?)
unpaired? (not enabled?)]
[quo/settings-list
(cond->
{:container-style style/device-container
:title name
:override-theme :dark
:left-icon (if (= device-type :mobile) :i/mobile :i/desktop)}
(and show-button? unpaired?) (assoc :button-props
{:title (i18n/label :t/pair)
:on-press #(js/alert "feature not added yet")})
(and show-button? paired?) (assoc
:button-props
{:title (i18n/label :t/unpair)
:on-press #(js/alert "feature not added yet")})
this-device? (assoc
:status-tag-props
{:size :small
:status {:type :positive}
:no-icon? true
:label (i18n/label :t/this-device)
:override-theme :dark}))]))

View File

@ -7,39 +7,19 @@
(def page-container
{:flex 1
:justify-content :flex-start
:margin-horizontal 20})
(def title-container
{:flex-direction :row
:align-items :center
:justify-content :space-between
:margin-bottom 24})
(def devices-container
{:flex 1})
(def device-container
{:display :flex
:padding-top 12
:padding-horizontal 12
:padding-bottom 16
:flex-direction :row
:border-color colors/white-opa-5
:border-radius 16
:border-width 1
:height 100
:margin-top 24})
(def device-details
{:height 200})
:margin-top 12
:margin-bottom 12})
(def navigation-bar
{:height 56})
(def icon-container
{:height 20
:margin-right 12})
(def tag-container
{:margin-top 8})
(def subtitle
{:margin-top 20
:color colors/white-opa-40})

View File

@ -4,10 +4,9 @@
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.syncing.syncing-devices-list.style :as style]
[status-im2.common.syncing.view :as device]
[status-im2.contexts.syncing.device.view :as device]
[utils.re-frame :as rf]))
;;TODO remove mock data (#https://github.com/status-im/status-mobile/issues/15142)
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
@ -21,21 +20,48 @@
(defn view
[]
[rn/view {:style style/container-main}
[navigation-bar]
[rn/view {:style style/page-container}
[rn/view {:style style/title-container}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} (i18n/label :t/syncing)]
[quo/button
{:size 32
:icon true
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
:i/add]]
[rn/view {:style style/devices-container}
[device/view
{:name "iPhone 11"
:this-device? true
:device-type :mobile}]]]])
(let [devices (rf/sub [:pairing/installations])
devices-with-button (map #(assoc % :show-button? true) devices)
user-device (first devices-with-button)
other-devices (rest devices-with-button)
{:keys [paired-devices unpaired-devices]} (group-by
#(if (:enabled? %) :paired-devices :unpaired-devices)
other-devices)]
[rn/view {:style style/container-main}
[navigation-bar]
[rn/view {:style style/page-container}
[rn/view {:style style/title-container}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}}
(i18n/label :t/syncing)]
[quo/button
{:size 32
:icon true
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
:i/add]]
[device/view (merge user-device {:this-device? true})]
(when (seq paired-devices)
[rn/view
[quo/text
{:size :paragraph-2
:weight :medium
:style style/subtitle}
(i18n/label :t/paired-with-this-device)]
[rn/flat-list
{:key-fn str
:render-fn device/view
:data paired-devices}]])
(when (seq unpaired-devices)
[rn/view
[quo/text
{:size :paragraph-2
:weight :medium
:style style/subtitle}
(i18n/label :t/not-paired-with-this-device)]
[rn/flat-list
{:key-fn str
:render-fn device/view
:data unpaired-devices}]])]]))

View File

@ -1033,6 +1033,7 @@
"not-applicable": "Not applicable for unsigned transactions",
"not-keycard-text": "The card you used is not a Keycard. You need to purchase a Keycard to use it",
"not-keycard-title": "Not a Keycard",
"not-paired-with-this-device": "Not paired with this device",
"notifications": "Notifications",
"local-notifications": "Local notifications",
"local-notifications-subtitle": "Enable background service",
@ -1083,7 +1084,8 @@
"outgoing": "Outgoing",
"outgoing-transaction": "Outgoing transaction",
"own-your-crypto": "Own your crypto",
"pair": "Pair devices",
"pair": "Pair",
"pair-devices": "Pair devices",
"pair-card": "Pair to this device",
"pair-code": "Pair code",
"pair-code-explanation": "Pairs card to a different device (up to 5) to unlock keys and sign transactions with the same Keycard",
@ -1091,6 +1093,7 @@
"pair-this-device": "Advertise device",
"pair-this-device-description": "Pair your devices to sync contacts and chats between them",
"paired-devices": "Paired devices",
"paired-with-this-device": "Paired with this device",
"pairing": "Pairing",
"pairing-card": "Pairing card",
"pairing-code-placeholder": "Pairing code...",
@ -1419,6 +1422,7 @@
"unique-identifiers": "Unique profile identifiers",
"unknown-status-go-error": "Unknown status-go error",
"unlock": "Unlock",
"unpair": "Unpair",
"unpair-card": "Unpair card",
"unpair-card-confirmation": "This operation will unpair card from current device. Requires 6-digit passcode authorization. Do you want to proceed?",
"unpaired-keycard-text": "The Keycard you tapped is not associated with this phone",
@ -2175,16 +2179,16 @@
"user-deleted-a-message": "{{user}} deleted a message",
"link-to-profile": "Link to profile",
"emoji-hash": "Emoji Hash",
"emoji-hash-copied":"Emojihash copied to clipboard",
"link-to-profile-copied":"Link to Profile copied to clipboard",
"emoji-hash-copied": "Emojihash copied to clipboard",
"link-to-profile-copied": "Link to Profile copied to clipboard",
"sync-devices-result-sub-title": "Your devices are now in sync",
"sync-devices-title": "Syncing devices...",
"sync-devices-sub-title": "Please keep both devices switched on and connected to the internet until sync is complete",
"sync-devices-error-title": "Oops, somethings wrong",
"sync-devices-error-sub-title":"Make sure both devices are powered on and connected to the internet.",
"sync-devices-error-sub-title": "Make sure both devices are powered on and connected to the internet.",
"sync-devices-complete-title": "Device sync complete!",
"sync-devices-complete-sub-title": "Your devices are now in sync",
"sync-with": "Synced with",
"synced-with": "Synced with",
"you-eligible-to-join": "Youre eligible to join",
"you-not-eligible-to-join": "Youre not eligible to join",
"you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",