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

feat: check before syncing doc (#20504)

This commit is contained in:
yqrashawn 2024-07-02 16:36:42 +08:00 committed by GitHub
parent 3b3a39e37b
commit ef9cc55501
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 152 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/ui-guidelines.md
View File

@ -31,7 +31,7 @@ NOW:
(defn view
[{:keys [on-press on-long-press icon]}]
(let [[pressed? set-pressed] (rn/use-state false)
theme (theme/use-theme-value)
theme (theme/use-theme)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed nil))]
[rn/pressable
@ -47,7 +47,7 @@ NOW:
- We no longer need to create an anonymous function for rendering. This removes unnecessary confusion and the need for specific knowledge on how it works and why it was needed.
- `rn/use-state` is used instead of `reagent/atom`
- State values no longer need to be dereferenced; they are accessible as regular symbols. This eliminates a common bug where the "@" symbol was inadvertently omitted.
- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme-value)` hook can be used directly in the components
- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme)` hook can be used directly in the components
- `:f>` not needed anymore, all components are functional by default
- `rn/use-callback` hook should be used for anon callback functions

24
src/status_im/common/check_before_syncing/style.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns status-im.common.check-before-syncing.style)
(def buttons-container
{:flex-direction :row
:justify-content :space-between
:gap 12
:padding-vertical 12})
(def button {:flex 1})
(def checkbox
{:margin-top 16
:flex-direction :row
:align-items :center})
(def checkbox-text {:margin-left 10})
(def checkboxes-container {:margin-bottom 10 :padding-right 10})
(def header {:margin-bottom 8})
(def description {:margin-right -33})
(def view-container {:padding-horizontal 33})

74
src/status_im/common/check_before_syncing/view.cljs Normal file
View File

@ -0,0 +1,74 @@
(ns status-im.common.check-before-syncing.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.common.check-before-syncing.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(def checks
[(i18n/label :t/check-before-syncing-doc-checkbox-1)
(i18n/label :t/check-before-syncing-doc-checkbox-2)
(i18n/label :t/check-before-syncing-doc-checkbox-3)])
(defn- checkbox
[on-change customization-color description]
[rn/view {:style style/checkbox}
[quo/selectors
{:type :checkbox
:blur? true
:customization-color customization-color
:on-change on-change}]
[quo/text {:style style/checkbox-text} description]])
(defn- compute-new-checked-count
[set-checked-count checked?]
(if checked?
(set-checked-count inc)
(set-checked-count dec)))
(defn- hide-bottom-sheet
[]
(rf/dispatch [:hide-bottom-sheet]))
(defn view
[{:keys [on-submit customization-color]}]
(let [[checked-count set-checked-count] (rn/use-state 0)
on-change (partial compute-new-checked-count set-checked-count)
render-checkbox (rn/use-callback
(partial checkbox on-change customization-color)
[customization-color])
on-cancel hide-bottom-sheet
on-continue (rn/use-callback
(fn []
(hide-bottom-sheet)
(on-submit))
[on-submit])]
[rn/view
{:style style/view-container
:accessibility-label :check-before-syncing-bottom-sheet}
[quo/text
{:weight :semi-bold
:size :heading-2
:style style/header} (i18n/label :t/check-before-syncing)]
[quo/text {:style style/description} (i18n/label :t/check-before-syncing-doc-description)]
(into
[rn/view {:style style/checkboxes-container}]
(mapv render-checkbox checks))
[rn/view {:style style/buttons-container}
[quo/button
{:type :grey
:container-style style/button
:accessibility-label :cancel-button
:on-press on-cancel}
(i18n/label :t/cancel)]
[quo/button
{:container-style style/button
:disabled? (not= checked-count (count checks))
:customization-color (or customization-color :blue)
:accessibility-label :continue-button
:on-press on-continue}
(i18n/label :t/continue)]]]))

11
src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs
View File

@ -4,6 +4,7 @@
re-frame.db
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.check-before-syncing.view :as check-before-syncing]
[status-im.common.not-implemented :as not-implemented]
[status-im.common.resources :as resources]
[status-im.config :as config]
@ -25,6 +26,14 @@
[:onboarding/navigate-to-sign-in-by-syncing]
1000))
(defn- show-check-before-syncing
[]
(rf/dispatch
[:show-bottom-sheet
{:content (fn [] [check-before-syncing/view
{:on-submit navigate-to-sign-in-by-syncing}])
:shell? true}]))
(defn- navigate-to-sign-in-by-seed-phrase
[create-profile?]
(rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase
@ -62,7 +71,7 @@
:accessibility-label :scan-sync-code-option-card
:image (resources/get-image :generate-keys)
:max-height (option-card-max-height window-height)
:on-press navigate-to-sign-in-by-syncing}])
:on-press show-check-before-syncing}])
(defn sign-in-options
[sign-in-type]

16
src/status_im/contexts/profile/profiles/view.cljs
View File

@ -5,6 +5,7 @@
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[status-im.common.check-before-syncing.view :as check-before-syncing]
[status-im.common.confirmation-drawer.view :as confirmation-drawer]
[status-im.common.standard-authentication.core :as standard-authentication]
[status-im.config :as config]
@ -41,6 +42,17 @@
:linear
50))
(defn- show-check-before-syncing
[]
(rf/dispatch
[:show-bottom-sheet
{:content (fn [] [check-before-syncing/view
{:on-submit
#(debounce/throttle-and-dispatch
[:open-modal :screen/onboarding.sign-in]
1000)}])
:shell? true}]))
(defn new-account-options
[]
[quo/action-drawer
@ -55,9 +67,7 @@
:accessibility-label :create-new-profile}
{:icon :i/multi-profile
:label (i18n/label :t/add-existing-status-profile)
:on-press #(debounce/throttle-and-dispatch
[:open-modal :screen/onboarding.sign-in]
1000)
:on-press show-check-before-syncing
:accessibility-label :multi-profile}]]])
(defn show-new-account-options

35
src/status_im/contexts/syncing/syncing_devices_list/view.cljs
View File

@ -3,6 +3,7 @@
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[status-im.common.check-before-syncing.view :as check-before-syncing]
[status-im.contexts.syncing.device.view :as device]
[status-im.contexts.syncing.syncing-devices-list.style :as style]
[utils.i18n :as i18n]
@ -13,19 +14,31 @@
(rf/dispatch [:navigate-back]))
(defn open-setup-syncing
[]
(rf/dispatch [:open-modal :settings-setup-syncing]))
[customization-color]
(rf/dispatch
[:show-bottom-sheet
{:theme :dark
:shell? true
:content
(fn [] [check-before-syncing/view
{:customization-color customization-color
:on-submit #(rf/dispatch [:open-modal :settings-setup-syncing])}])}]))
(defn view
[]
(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)
profile-color (rf/sub [:profile/customization-color])
{:keys [paired-devices unpaired-devices]} (group-by
#(if (:enabled? %) :paired-devices :unpaired-devices)
other-devices)]
(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)
profile-color (rf/sub [:profile/customization-color])
open-setup-syncing-with-customization-color (rn/use-callback (partial open-setup-syncing
profile-color)
[profile-color])
{:keys [paired-devices unpaired-devices]} (group-by
#(if (:enabled? %)
:paired-devices
:unpaired-devices)
other-devices)]
[quo/overlay {:type :shell :top-inset? true}
[quo/page-nav
{:type :no-title
@ -47,7 +60,7 @@
:type :primary
:customization-color profile-color
:icon-only? true
:on-press open-setup-syncing}
:on-press open-setup-syncing-with-customization-color}
:i/add]]
[device/view (merge user-device {:this-device? true})]
(when (seq paired-devices)

5
translations/en.json
View File

@ -180,6 +180,11 @@
"chat-settings": "Chat settings",
"chat-with-friends": "Chat privately with friends",
"chats": "Chats",
"check-before-syncing": "Check before syncing",
"check-before-syncing-doc-description" :"To sync your devices successfully, make sure to check and complete these steps:",
"check-before-syncing-doc-checkbox-1": "Connect both devices to the same network",
"check-before-syncing-doc-checkbox-2": "Make sure you are logged in on the other device",
"check-before-syncing-doc-checkbox-3": "Disable the firewall and VPN on your devices",
"check-your-recovery-phrase": "Check your seed phrase",
"choose-authentication-method": "Choose an authentication method",
"clear": "Clear",