-
Notifications
You must be signed in to change notification settings - Fork 984
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#19946] feat: add key pair QR code view
- Loading branch information
1 parent
649a316
commit e856756
Showing
5 changed files
with
194 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
src/status_im/contexts/settings/wallet/keypairs_and_accounts/encrypted_qr/style.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
(ns status-im.contexts.settings.wallet.keypairs-and-accounts.encrypted-qr.style | ||
(:require | ||
[quo.foundations.colors :as colors] | ||
[react-native.safe-area :as safe-area])) | ||
|
||
(defn container-main | ||
[] | ||
{:background-color colors/neutral-95 | ||
:padding-top (safe-area/get-top) | ||
:flex 1}) | ||
|
||
(def page-container | ||
{:margin-top 14 | ||
:margin-horizontal 20}) | ||
|
||
(def title-container | ||
{:flex-direction :row | ||
:align-items :center | ||
:justify-content :space-between}) | ||
|
||
(def sync-code | ||
{:margin-top 20 | ||
:padding-horizontal 12}) | ||
|
||
(def standard-auth | ||
{:margin-top 12 | ||
:flex 1}) | ||
|
||
(def qr-container | ||
{:margin-top 12 | ||
:background-color colors/white-opa-5 | ||
:border-radius 20 | ||
:flex 1 | ||
:padding 12}) | ||
|
||
(def sub-text-container | ||
{:margin-bottom 8 | ||
:justify-content :space-between | ||
:align-items :center | ||
:flex-direction :row}) | ||
|
||
(def valid-cs-container | ||
{:flex 1 | ||
:margin 12}) | ||
|
||
(def warning-text | ||
{:margin-horizontal 16 | ||
:margin-top 20 | ||
:text-align :center | ||
:color colors/white-opa-70}) |
122 changes: 122 additions & 0 deletions
122
src/status_im/contexts/settings/wallet/keypairs_and_accounts/encrypted_qr/view.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
(ns status-im.contexts.settings.wallet.keypairs-and-accounts.encrypted-qr.view | ||
(:require | ||
[quo.core :as quo] | ||
[quo.foundations.colors :as colors] | ||
[react-native.clipboard :as clipboard] | ||
[react-native.core :as rn] | ||
[react-native.hooks :as hooks] | ||
[status-im.common.qr-codes.view :as qr-codes] | ||
[status-im.common.resources :as resources] | ||
[status-im.common.standard-authentication.core :as standard-auth] | ||
[status-im.contexts.settings.wallet.keypairs-and-accounts.encrypted-qr.style :as style] | ||
[status-im.contexts.syncing.utils :as sync-utils] | ||
[utils.datetime :as datetime] | ||
[utils.i18n :as i18n] | ||
[utils.re-frame :as rf])) | ||
|
||
(defn navigate-back [] (rf/dispatch [:navigate-back])) | ||
|
||
(def code-valid-for-ms 120000) | ||
(def one-min-ms 60000) | ||
|
||
(defn current-ms | ||
[] | ||
(* 1000 (js/Math.ceil (/ (datetime/timestamp) 1000)))) | ||
|
||
(defn timer | ||
[on-clear] | ||
(let [[valid-for-ms set-valid-for-ms] (rn/use-state code-valid-for-ms) | ||
[timestamp set-timestamp] (rn/use-state current-ms) | ||
clock (fn [] | ||
(let [remaining (- code-valid-for-ms | ||
(- (current-ms) | ||
timestamp))] | ||
(when (pos? remaining) | ||
(set-valid-for-ms remaining)) | ||
(when (zero? remaining) | ||
(set-timestamp (current-ms)) | ||
(set-valid-for-ms code-valid-for-ms) | ||
(on-clear))))] | ||
(hooks/use-interval clock on-clear 1000) | ||
[quo/text | ||
{:size :paragraph-2 | ||
:style {:color (if (< valid-for-ms one-min-ms) | ||
colors/danger-60 | ||
colors/white-opa-40)}} | ||
(i18n/label :t/valid-for-time {:valid-for (datetime/ms-to-duration valid-for-ms)})])) | ||
|
||
(defn view | ||
[] | ||
(let [{:keys [customization-color]} (rf/sub [:profile/profile-with-image]) | ||
[code set-code] (rn/use-state nil) | ||
validate-and-set-code (rn/use-callback (fn [connection-string] | ||
(when (sync-utils/valid-connection-string? | ||
connection-string) | ||
(set-code connection-string)))) | ||
cleanup-clock (rn/use-callback #(set-code nil)) | ||
on-auth-success (fn [entered-password] | ||
(rf/dispatch [:syncing/get-connection-string entered-password | ||
validate-and-set-code]))] | ||
[rn/view {:style (style/container-main)} | ||
[rn/scroll-view | ||
[quo/page-nav | ||
{:type :no-title | ||
:icon-name :i/close | ||
:background :blur | ||
:on-press navigate-back}] | ||
[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/encrypted-key-pairs)]] | ||
[rn/view {:style style/qr-container} | ||
(if (sync-utils/valid-connection-string? code) | ||
[qr-codes/qr-code {:url code}] | ||
[rn/view {:style {:flex-direction :row}} | ||
[rn/image | ||
{:source (resources/get-image :qr-code) | ||
:style {:width "100%" | ||
:background-color colors/white-opa-70 | ||
:border-radius 12 | ||
:aspect-ratio 1}}]]) | ||
(when (sync-utils/valid-connection-string? code) | ||
[rn/view {:style style/valid-cs-container} | ||
[rn/view {:style style/sub-text-container} | ||
[quo/text | ||
{:size :paragraph-2 | ||
:style {:color colors/white-opa-40}} | ||
(i18n/label :t/encrypted-key-pairs-code)] | ||
[timer cleanup-clock]] | ||
[quo/input | ||
{:default-value code | ||
:type :password | ||
:default-shown? true | ||
:editable false}] | ||
[quo/button | ||
{:on-press (fn [] | ||
(clipboard/set-string code) | ||
(rf/dispatch [:toasts/upsert | ||
{:type :positive | ||
:text (i18n/label | ||
:t/sharing-copied-to-clipboard)}])) | ||
:type :grey | ||
:container-style {:margin-top 12} | ||
:icon-left :i/copy} | ||
(i18n/label :t/copy-qr)]]) | ||
(when-not (sync-utils/valid-connection-string? code) | ||
[rn/view {:style style/standard-auth} | ||
[standard-auth/slide-button | ||
{:blur? true | ||
:size :size-40 | ||
:track-text (i18n/label :t/slide-to-reveal-qr-code) | ||
:customization-color customization-color | ||
:on-auth-success on-auth-success | ||
:auth-button-label (i18n/label :t/reveal-qr-code) | ||
:auth-button-icon-left :i/reveal}]])]] | ||
(when-not (sync-utils/valid-connection-string? code) | ||
[quo/text | ||
{:size :paragraph-2 | ||
:style style/warning-text} | ||
(i18n/label :t/make-sure-no-camera-warning)])]])) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters