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

feat: check before syncing doc 

Signed-off-by: yqrashawn <namy.19@gmail.com>
This commit is contained in:
yqrashawn 2024-06-19 10:02:37 +08:00
parent 3ce6a86e9b
commit 4164d43d2c
No known key found for this signature in database
GPG Key ID: E394C5D9A8E535A6
7 changed files with 127 additions and 7 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

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

@ -0,0 +1,22 @@
(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})
(def header {:margin-bottom 8})
(def view-container {:margin-horizontal 33})

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

@ -0,0 +1,70 @@
(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 description]
[rn/view {:style style/checkbox}
[quo/selectors
{:type :checkbox
:blur? true
: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]}]
(let [[checked-count set-checked-count] (rn/use-state 0)
on-change (partial compute-new-checked-count set-checked-count)
checkbox-with-on-change (partial checkbox on-change)
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 (i18n/label :t/check-before-syncing-doc-description)]
(into
[rn/view {:style style/checkboxes-container}]
(mapv checkbox-with-on-change 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))
:accessibility-label :continue-button
:on-press on-continue}
(i18n/label :t/continue)]]]))

10
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,13 @@
[: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}])}]))
(defn- navigate-to-sign-in-by-seed-phrase
[create-profile?]
(rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase
@ -62,7 +70,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]

15
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,16 @@
: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)}])}]))
(defn new-account-options
[]
[quo/action-drawer
@ -55,9 +66,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

8
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]
@ -14,7 +15,12 @@
(defn open-setup-syncing
[]
(rf/dispatch [:open-modal :settings-setup-syncing]))
(rf/dispatch
[:show-bottom-sheet
{:theme :dark
:content
(fn [] [check-before-syncing/view
{:on-submit #(rf/dispatch [:open-modal :settings-setup-syncing])}])}]))
(defn view
[]

5
translations/en.json
View File

@ -179,6 +179,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": "Both devices are on 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 on your device",
"check-your-recovery-phrase": "Check your seed phrase",
"choose-authentication-method": "Choose an authentication method",
"clear": "Clear",