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

Add 'How to scan' syncing screens (#15710)

This commit is contained in:
erikseppanen 2023-05-11 20:58:57 -04:00 committed by GitHub
parent 264b7ffab9
commit 4b98f0e8de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 269 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/desktop-how-to-pair-logged-in@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
resources/images/ui2/desktop-how-to-pair-logged-in@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
resources/images/ui2/desktop-how-to-pair-sign-in@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
resources/images/ui2/desktop-how-to-pair-sign-in@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
resources/images/ui2/mobile-how-to-pair-logged-in@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
resources/images/ui2/mobile-how-to-pair-logged-in@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 KiB

BIN
resources/images/ui2/mobile-how-to-pair-sign-in@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
resources/images/ui2/mobile-how-to-pair-sign-in@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 587 KiB

23
src/status_im2/common/resources.cljs
View File

@ -1,15 +1,20 @@
(ns status-im2.common.resources)
(def ui
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
:lifestyle (js/require "../resources/images/ui2/lifestyle.png")
:music (js/require "../resources/images/ui2/music.png")
:podcasts (js/require "../resources/images/ui2/podcasts.png")
:generate-keys (js/require "../resources/images/ui2/generate-keys.png")
:ethereum-address (js/require "../resources/images/ui2/ethereum-address.png")
:use-keycard (js/require "../resources/images/ui2/keycard.png")
:onboarding-illustration (js/require "../resources/images/ui2/onboarding_illustration.png")
:qr-code (js/require "../resources/images/ui2/qr-code.png")
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
:desktop-how-to-pair-sign-in (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
:desktop-how-to-pair-logged-in (js/require
"../resources/images/ui2/desktop-how-to-pair-logged-in.png")
:mobile-how-to-pair-sign-in (js/require "../resources/images/ui2/mobile-how-to-pair-sign-in.png")
:mobile-how-to-pair-logged-in (js/require "../resources/images/ui2/mobile-how-to-pair-logged-in.png")
:lifestyle (js/require "../resources/images/ui2/lifestyle.png")
:music (js/require "../resources/images/ui2/music.png")
:podcasts (js/require "../resources/images/ui2/podcasts.png")
:generate-keys (js/require "../resources/images/ui2/generate-keys.png")
:ethereum-address (js/require "../resources/images/ui2/ethereum-address.png")
:use-keycard (js/require "../resources/images/ui2/keycard.png")
:onboarding-illustration (js/require "../resources/images/ui2/onboarding_illustration.png")
:qr-code (js/require "../resources/images/ui2/qr-code.png")
})
(def mock-images

72
src/status_im2/contexts/syncing/how_to_pair/style.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns status-im2.contexts.syncing.how-to-pair.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def container-outer
{:flex (if platform/ios? 4.5 5)
:padding-top 20
:padding-bottom 8
:padding-horizontal 16
:background-color colors/neutral-95})
(def heading
{:margin-bottom 12
:color colors/white})
(def tabs-container
{:margin-top 8
:margin-bottom 12})
(def paragraph
{:margin-vertical 8
:color colors/white})
(def hr
{:margin-top 12
:margin-bottom 6
:border-bottom-color colors/white-opa-10
:border-bottom-width 1})
(def image
{:border-radius 16})
(def container-image
{:flex-direction :row
:aspect-ratio 1
:justify-content :flex-end
:align-items :flex-end
:overflow :hidden
:background-color colors/white-opa-5
:border-radius 16})
(def list-text
{:margin-horizontal 2
:color colors/white})
(def list-icon
{:height 18
:width 18
:border-radius 6
:border-width 1
:border-color colors/white-opa-10
:align-items :center
:justify-content :center})
(def list-icon-text
{:color colors/white})
(def button-grey
{:margin-horizontal 2})
(def button-grey-placeholder
{:margin-horizontal 2})
(def button-primary
{:margin-horizontal 2})
(def numbered-list
{:margin-top 12})
(def numbered-list-item
{:flex-direction :row
:align-items :center})

160
src/status_im2/contexts/syncing/how_to_pair/view.cljs Normal file
View File

@ -0,0 +1,160 @@
(ns status-im2.contexts.syncing.how-to-pair.view
(:require
[react-native.gesture :as gesture]
[status-im2.contexts.syncing.how-to-pair.style :as style]
[status-im2.common.resources :as resources]
[utils.i18n :as i18n]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]))
(defn render-element
[[type value]]
(case type
:text
[quo/text
{:size :paragraph-2
:weight :regular
:style style/list-text} (i18n/label value)]
:button-primary
[quo/button
{:type :primary
:size 24
:style style/button-primary} (i18n/label value)]
:button-grey
[quo/button
{:type :grey
:override-theme :dark
:size 24
:style style/button-grey}
(i18n/label value)]
:button-grey-placeholder
[quo/button
{:type :grey
:override-theme :dark
:size 24
:before :i/placeholder
:style style/button-grey-placeholder}
(i18n/label value)]
:context-tag
[quo/context-tag
{:override-theme :dark
:text-style {:color colors/white}}
(resources/get-mock-image (:source value))
(i18n/label (:label value))]))
(defn render-item
[i item]
[rn/view
{:margin-vertical 6
:style style/numbered-list-item}
[rn/view
{:margin-right 6
:style style/list-icon}
[quo/text
{:size :label
:weight :medium
:style style/list-icon-text} i]]
(map #(render-element %) item)])
(defn render-list
[{:keys [title image list]}]
[rn/view
[quo/text
{:size :paragraph-1
:weight :semi-bold
:style style/paragraph} (i18n/label title)]
(case (:type image)
:container-image [rn/view {:style style/container-image}
[rn/image
{:source (resources/get-image
(:source image))}]]
:image [rn/image
{:source (resources/get-image (:source image))
:style style/image}])
[rn/view {:style style/numbered-list}
(map-indexed (fn [i item] (render-item (inc i) item)) list)]])
(def platforms
{:mobile
[gesture/scroll-view
(render-list {:title :t/signing-in-from-another-device
:image {:source :mobile-how-to-pair-sign-in
:type :image}
:list [[[:text :t/open-status-on-your-other-device]]
[[:text :t/tap-on]
[:button-grey :t/im-new]]
[[:button-primary :t/enable-camera]
[:text :t/or-tap]
[:button-grey :t/enter-sync-code]]
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})
[rn/view {:style style/hr}]
(render-list {:title :t/already-logged-in-on-the-other-device
:image {:source :mobile-how-to-pair-logged-in
:type :image}
:list [[[:text :t/tap-on]
[:context-tag
{:label :t/profile
:source :user-picture-male5}]
[:text :t/and]
[:button-grey-placeholder :t/syncing]]
[[:text :t/press]
[:button-grey :t/scan-or-enter-sync-code]]
[[:button-primary :t/enable-camera]
[:text :t/or-tap]
[:button-grey :t/enter-sync-code]]
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]
:desktop
[gesture/scroll-view
(render-list {:title :t/signing-in-from-another-device
:image {:source :desktop-how-to-pair-sign-in
:type :image}
:list [[[:text :t/open-status-on-your-other-device]]
[[:text :t/open]
[:button-grey :t/settings]
[:text :t/and-go-to]
[:button-grey :t/syncing]]
[[:text :t/tap]
[:button-grey :t/scan-or-enter-a-sync-code]]
[[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]})
[rn/view {:style style/hr}]
(render-list {:title :t/already-logged-in-on-the-other-device
:image {:source :desktop-how-to-pair-logged-in
:type :container-image}
:list [[[:text :t/open-status-on-your-other-device]]
[[:text :t/tap-on]
[:button-grey :t/im-new]]
[[:button-primary :t/enable-camera]
[:text :t/or-tap]
[:button-grey :t/enter-sync-code]]
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]})
(defn instructions
[]
(let [platform (reagent/atom :mobile)
platform-data (map (fn [platform]
{:id platform
:label (i18n/label
(keyword (str "t/" (name platform))))})
(keys platforms))]
(fn []
[rn/view {:style style/container-outer}
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/heading} (i18n/label :t/how-to-pair)]
[rn/view {:style style/tabs-container}
[quo/segmented-control
{:size 28
:override-theme :dark
:blur? true
:default-active :mobile
:data platform-data
:on-change #(reset! platform %)}]]
(@platform platforms)])))

4
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -33,7 +33,7 @@
:label (i18n/label :t/how-to-scan)
:icon :i/info
:icon-override-theme :dark
:on-press #(js/alert "to be implemented")}]}]])
:on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]])
(defn valid-cs?
[connection-string]
@ -145,4 +145,4 @@
[[{:icon :i/scan
:override-theme :dark
:on-press #(js/alert "to be implemented")
:label (i18n/label :t/Scan-or-enter-sync-code)}]]]]]])))
:label (i18n/label :t/scan-or-enter-sync-code)}]]]]]])))

5
src/status_im2/navigation/screens.cljs
View File

@ -25,6 +25,7 @@
[status-im2.contexts.quo-preview.main :as quo.preview]
[status-im2.contexts.shell.view :as shell]
[status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
[status-im2.contexts.syncing.how-to-pair.view :as how-to-pair]
[status-im2.navigation.options :as options]
[status-im2.contexts.chat.group-details.view :as group-details]
[status-im.ui.screens.screens :as old-screens]
@ -74,6 +75,10 @@
:options {:sheet? true}
:component add-new-contact/new-contact}
{:name :how-to-pair
:options {:sheet? true}
:component how-to-pair/instructions}
{:name :discover-communities
:component communities.discover/discover}

17
translations/en.json
View File

@ -1219,7 +1219,7 @@
"save-password": "Save password",
"save-password-unavailable": "Set device passcode to save password",
"save-password-unavailable-android": "Save password is unavailable: your device may be rooted or lacks necessary security features.",
"Scan-or-enter-sync-code": "Scan or enter sync code",
"scan-or-enter-sync-code": "Scan or enter sync code",
"scan-qr": "Scan QR code",
"scan-qr-code": "Scan a QR code with a wallet address",
"search": "Search",
@ -2108,6 +2108,21 @@
"community-request-pending-body-text": "You requested to join",
"community-kicked-heading": "Kicked from community",
"community-kicked-body": "You were kicked from",
"signing-in-from-another-device": "Signing in from the other device",
"open-status-on-your-other-device": "Open Status on your other device",
"im-new": "I'm new",
"scan-or-enter-sync-code-seen-on-this-device": "Scan or enter sync code seen on this device",
"press": "Press",
"tap": "Tap",
"or-tap": "or tap",
"tap-on": "Tap on",
"and-go-to": "and go to",
"scan-or-enter-a-sync-code": "Scan or enter a sync code",
"scan-the-qr-code-or-copy-the-sync-code": "Scan the QR code or copy the sync code",
"already-logged-in-on-the-other-device": "Already logged in on the other device",
"how-to-pair": "How to pair",
"mobile": "Mobile",
"desktop": "Desktop",
"error-loading-audio": "Error while loading audio",
"you-colon": "You:",
"you-replied": "You replied",