From 800ca19c085bcb74211dd67f55092d6605ba29f5 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Wed, 20 Dec 2023 13:53:53 +0100 Subject: [PATCH] move keycard native module, removed outdated code (#18252) --- .../status_im => }/keycard/keycard.cljs | 8 +- .../status_im => }/keycard/real_keycard.cljs | 47 +- src/legacy/status_im/bottom_sheet/sheets.cljs | 4 - src/legacy/status_im/keycard/card.cljs | 55 ++- src/legacy/status_im/keycard/common.cljs | 14 +- .../status_im/keycard/simulated_keycard.cljs | 49 +- .../status_im/ui/screens/home/styles.cljs | 102 ---- .../ui/screens/home/views/inner_item.cljs | 329 ------------- .../keycard/authentication_method/styles.cljs | 59 --- .../keycard/authentication_method/views.cljs | 49 -- .../keycard/components/description.cljs | 52 -- .../keycard/components/keycard_animation.cljs | 369 -------------- .../ui/screens/keycard/components/style.cljs | 22 - .../screens/keycard/components/turn_nfc.cljs | 30 -- .../ui/screens/keycard/frozen_card/view.cljs | 56 --- .../screens/keycard/keycard_interaction.cljs | 87 ---- .../ui/screens/keycard/onboarding/views.cljs | 392 --------------- .../ui/screens/keycard/pairing/views.cljs | 103 ---- .../ui/screens/keycard/pin/styles.cljs | 121 ----- .../ui/screens/keycard/pin/views.cljs | 289 ----------- .../ui/screens/keycard/recovery/views.cljs | 281 ----------- .../ui/screens/keycard/settings/views.cljs | 143 ------ .../status_im/ui/screens/keycard/styles.cljs | 5 - .../status_im/ui/screens/keycard/views.cljs | 461 ------------------ .../status_im/ui/screens/popover/views.cljs | 8 - src/legacy/status_im/ui/screens/screens.cljs | 131 ----- .../status_im/ui/screens/signing/views.cljs | 174 +------ .../ui/screens/wallet/add_new/views.cljs | 24 +- 28 files changed, 74 insertions(+), 3390 deletions(-) rename src/{legacy/status_im => }/keycard/keycard.cljs (81%) rename src/{legacy/status_im => }/keycard/real_keycard.cljs (86%) delete mode 100644 src/legacy/status_im/ui/screens/home/styles.cljs delete mode 100644 src/legacy/status_im/ui/screens/home/views/inner_item.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/authentication_method/styles.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/authentication_method/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/components/description.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/components/keycard_animation.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/components/style.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/components/turn_nfc.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/frozen_card/view.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/keycard_interaction.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/onboarding/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/pairing/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/pin/styles.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/pin/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/recovery/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/settings/views.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/styles.cljs delete mode 100644 src/legacy/status_im/ui/screens/keycard/views.cljs diff --git a/src/legacy/status_im/keycard/keycard.cljs b/src/keycard/keycard.cljs similarity index 81% rename from src/legacy/status_im/keycard/keycard.cljs rename to src/keycard/keycard.cljs index 074f2fd025..037e721e63 100644 --- a/src/legacy/status_im/keycard/keycard.cljs +++ b/src/keycard/keycard.cljs @@ -1,4 +1,4 @@ -(ns legacy.status-im.keycard.keycard) +(ns keycard.keycard) (defprotocol Keycard (start-nfc [this args]) @@ -35,8 +35,4 @@ (import-keys [this args]) (get-keys [this args]) (sign [this args]) - (sign-typed-data [this args]) - (save-multiaccount-and-login [this args]) - (login [this args]) - (send-transaction-with-signature [this args]) - (delete-multiaccount-before-migration [this args])) + (sign-typed-data [this args])) diff --git a/src/legacy/status_im/keycard/real_keycard.cljs b/src/keycard/real_keycard.cljs similarity index 86% rename from src/legacy/status_im/keycard/real_keycard.cljs rename to src/keycard/real_keycard.cljs index 701b30b7d8..7250479e69 100644 --- a/src/legacy/status_im/keycard/real_keycard.cljs +++ b/src/keycard/real_keycard.cljs @@ -1,11 +1,8 @@ -(ns legacy.status-im.keycard.real-keycard +(ns keycard.real-keycard (:require ["react-native" :as rn] ["react-native-status-keycard" :default status-keycard] - [clojure.string :as string] - [legacy.status-im.keycard.keycard :as keycard] - [legacy.status-im.utils.deprecated-types :as types] - [native-module.core :as native-module] + [keycard.keycard :as keycard] [react-native.platform :as platform] [taoensso.timbre :as log] [utils.address :as address])) @@ -275,7 +272,6 @@ (defn sign [{pin :pin path :path card-hash :hash on-success :on-success on-failure :on-failure}] - (log/debug "keycard sign" "path" path) (when (and pin card-hash) (if path (.. status-keycard @@ -295,35 +291,6 @@ (then on-success) (catch on-failure)))) -(defn save-multiaccount-and-login - [{:keys [key-uid multiaccount-data password settings node-config accounts-data chat-key]}] - (native-module/save-multiaccount-and-login-with-keycard - key-uid - (types/clj->json multiaccount-data) - password - (types/clj->json settings) - node-config - (types/clj->json accounts-data) - chat-key)) - -(defn login - [args] - (native-module/login-with-keycard (assoc args :node-config {:ProcessBackedupMessages false}))) - -(defn send-transaction-with-signature - [{:keys [transaction signature on-completed]}] - (native-module/send-transaction-with-signature transaction signature on-completed)) - -(defn delete-multiaccount-before-migration - [{:keys [key-uid on-success on-error]}] - (native-module/delete-multiaccount - key-uid - (fn [result] - (let [{:keys [error]} (types/json->clj result)] - (if-not (string/blank? error) - (on-error error) - (on-success)))))) - (defrecord RealKeycard [] keycard/Keycard (keycard/start-nfc [_this args] @@ -395,12 +362,4 @@ (keycard/sign [_this args] (sign args)) (keycard/sign-typed-data [_this args] - (sign-typed-data args)) - (keycard/save-multiaccount-and-login [_this args] - (save-multiaccount-and-login args)) - (keycard/login [_this args] - (login args)) - (keycard/send-transaction-with-signature [_this args] - (send-transaction-with-signature args)) - (keycard/delete-multiaccount-before-migration [_ args] - (delete-multiaccount-before-migration args))) + (sign-typed-data args))) diff --git a/src/legacy/status_im/bottom_sheet/sheets.cljs b/src/legacy/status_im/bottom_sheet/sheets.cljs index f92337b367..1f531fb525 100644 --- a/src/legacy/status_im/bottom_sheet/sheets.cljs +++ b/src/legacy/status_im/bottom_sheet/sheets.cljs @@ -2,7 +2,6 @@ (:require [legacy.status-im.bottom-sheet.view :as bottom-sheet] [legacy.status-im.ui.screens.about-app.views :as about-app] - [legacy.status-im.ui.screens.keycard.views :as keycard] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] [quo.theme :as theme] [react-native.core :as rn] @@ -23,9 +22,6 @@ (= view :mobile-network-offline) (merge mobile-network-settings/offline-sheet) - (= view :keycard.login/more) - (merge keycard/more-sheet) - (= view :learn-more) (merge about-app/learn-more)) page-theme (:theme options)] diff --git a/src/legacy/status_im/keycard/card.cljs b/src/legacy/status_im/keycard/card.cljs index 322cd30daa..34a3986e1d 100644 --- a/src/legacy/status_im/keycard/card.cljs +++ b/src/legacy/status_im/keycard/card.cljs @@ -1,11 +1,15 @@ (ns legacy.status-im.keycard.card (:require - [legacy.status-im.keycard.keycard :as keycard] - [legacy.status-im.keycard.real-keycard :as real-keycard] + [clojure.string :as string] + [keycard.keycard :as keycard] + [keycard.real-keycard :as real-keycard] [legacy.status-im.keycard.simulated-keycard :as simulated-keycard] + [legacy.status-im.node.core :as node] + [native-module.core :as native-module] [re-frame.core :as re-frame] [status-im.config :as config] - [taoensso.timbre :as log])) + [taoensso.timbre :as log] + [utils.transforms :as types])) (defonce card (if config/keycard-test-menu-enabled? @@ -523,16 +527,37 @@ (error-object->map response)]))})) (defn save-multiaccount-and-login - [args] - (keycard/save-multiaccount-and-login card args)) + [{:keys [key-uid multiaccount-data password settings node-config accounts-data chat-key]}] + (if config/keycard-test-menu-enabled? + (native-module/save-account-and-login + key-uid + (types/clj->json multiaccount-data) + password + (types/clj->json settings) + node-config + (types/clj->json accounts-data)) + (native-module/save-multiaccount-and-login-with-keycard + key-uid + (types/clj->json multiaccount-data) + password + (types/clj->json settings) + node-config + (types/clj->json accounts-data) + chat-key))) (defn login - [args] - (keycard/login card args)) + [{:keys [key-uid multiaccount-data password] :as args}] + (if config/keycard-test-menu-enabled? + (native-module/login-with-config key-uid multiaccount-data password node/login-node-config) + (native-module/login-with-keycard (assoc args :node-config {:ProcessBackedupMessages false})))) + +(def account-password (native-module/sha3 "no password")) (defn send-transaction-with-signature - [args] - (keycard/send-transaction-with-signature card args)) + [{:keys [transaction signature on-completed]}] + (if config/keycard-test-menu-enabled? + (native-module/send-transaction transaction account-password on-completed) + (native-module/send-transaction-with-signature transaction signature on-completed))) (defn start-nfc [args] @@ -547,5 +572,13 @@ (keycard/set-nfc-message card args)) (defn delete-multiaccount-before-migration - [args] - (keycard/delete-multiaccount-before-migration card args)) + [{:keys [key-uid on-success on-error]}] + (if config/keycard-test-menu-enabled? + (on-success) + (native-module/delete-multiaccount + key-uid + (fn [result] + (let [{:keys [error]} (types/json->clj result)] + (if-not (string/blank? error) + (on-error error) + (on-success))))))) diff --git a/src/legacy/status_im/keycard/common.cljs b/src/legacy/status_im/keycard/common.cljs index 3ef8057563..20f34cc5a5 100644 --- a/src/legacy/status_im/keycard/common.cljs +++ b/src/legacy/status_im/keycard/common.cljs @@ -4,7 +4,6 @@ [legacy.status-im.bottom-sheet.events :as bottom-sheet] [legacy.status-im.keycard.nfc :as nfc] [legacy.status-im.popover.core :as popover] - [legacy.status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [legacy.status-im.utils.deprecated-types :as types] [legacy.status-im.utils.keychain.core :as keychain] [re-frame.core :as re-frame] @@ -172,16 +171,6 @@ (assoc-in [:keycard :on-card-read] nil) (assoc-in [:keycard :last-on-card-read] nil))}) -(defn keycard-sheet-content - [on-cancel connected? params] - (fn [] - [keycard-sheet/connect-keycard - {:on-cancel #(re-frame/dispatch on-cancel) - :connected? connected? - :params params - :on-connect ::on-card-connected - :on-disconnect ::on-card-disconnected}])) - (rf/defn show-connection-sheet-component [{:keys [db] :as cofx} {:keys [on-card-connected on-card-read handler] @@ -201,8 +190,7 @@ :show-handle? false :backdrop-dismiss? false :disable-drag? true - :back-button-cancel false - :content (keycard-sheet-content on-cancel connected? nil)}}) + :back-button-cancel false}}) (when on-card-read (set-on-card-read on-card-read)) (set-on-card-connected on-card-connected) diff --git a/src/legacy/status_im/keycard/simulated_keycard.cljs b/src/legacy/status_im/keycard/simulated_keycard.cljs index fba157f747..d8266ffaaf 100644 --- a/src/legacy/status_im/keycard/simulated_keycard.cljs +++ b/src/legacy/status_im/keycard/simulated_keycard.cljs @@ -1,18 +1,16 @@ (ns legacy.status-im.keycard.simulated-keycard (:require [clojure.string :as string] - [legacy.status-im.keycard.keycard :as keycard] + [keycard.keycard :as keycard] [legacy.status-im.multiaccounts.create.core :as multiaccounts.create] - [legacy.status-im.node.core :as node] [legacy.status-im.utils.deprecated-types :as types] - [legacy.status-im.utils.utils :as utils] [native-module.core :as native-module] - [re-frame.core :as re-frame] - [re-frame.db :as re-frame.db] + re-frame.db [status-im.constants :as constants] [taoensso.timbre :as log] [utils.address :as address] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [utils.re-frame :as re-frame])) (def kk1-password "000000") (def default-pin "111111") @@ -82,8 +80,7 @@ (defn- later [f] - (when f - (utils/set-timeout f 500))) + (when f (js/setTimeout f 500))) (defn pin-error [] @@ -488,28 +485,6 @@ [args] (log/warn "sign-typed-data not implemented" args)) -(defn save-multiaccount-and-login - [{:keys [key-uid multiaccount-data password settings node-config accounts-data]}] - (native-module/save-account-and-login - key-uid - (types/clj->json multiaccount-data) - password - (types/clj->json settings) - node-config - (types/clj->json accounts-data))) - -(defn login - [{:keys [key-uid multiaccount-data password]}] - (native-module/login-with-config key-uid multiaccount-data password node/login-node-config)) - -(defn send-transaction-with-signature - [{:keys [transaction on-completed]}] - (native-module/send-transaction transaction account-password on-completed)) - -(defn delete-multiaccount-before-migration - [{:keys [on-success]}] - (on-success)) - (defrecord SimulatedKeycard [] keycard/Keycard (keycard/start-nfc [_this args] @@ -610,16 +585,4 @@ (get-keys args)) (keycard/sign [_this args] (log/debug "simulated card sign") - (sign args)) - (keycard/save-multiaccount-and-login [_this args] - (log/debug "simulated card save-multiaccount-and-login") - (save-multiaccount-and-login args)) - (keycard/login [_this args] - (log/debug "simulated card login") - (login args)) - (keycard/send-transaction-with-signature [_this args] - (log/debug "simulated card send-transaction-with-signature") - (send-transaction-with-signature args)) - (keycard/delete-multiaccount-before-migration [_ args] - (log/debug "simulated card delete-multiaccount-before-migration") - (delete-multiaccount-before-migration args))) + (sign args))) diff --git a/src/legacy/status_im/ui/screens/home/styles.cljs b/src/legacy/status_im/ui/screens/home/styles.cljs deleted file mode 100644 index 1f9e526c6d..0000000000 --- a/src/legacy/status_im/ui/screens/home/styles.cljs +++ /dev/null @@ -1,102 +0,0 @@ -(ns legacy.status-im.ui.screens.home.styles - (:require - [legacy.status-im.ui.components.colors :as colors])) - -(def last-message-text - {:flex 1 - :align-self :stretch - :line-height 22 - :color colors/gray}) - -(def public-unread - {:background-color colors/blue - :border-radius 5 - :margin-right 16 - :width 10 - :height 10}) - -(def datetime-text - {:color colors/text-gray - :font-size 10 - :text-align :right - :letter-spacing 0.4 - :align-items :center - :line-height 12 - :position :absolute - :top 10 - :right 16}) - -(defn chat-tooltip - [] - {:align-items :center - :border-color colors/gray-lighter - :border-width 1 - :border-radius 16 - :margin 16 - :margin-bottom 68}) - -(def no-chats-text - {:margin-top 50 - :margin-bottom 8 - :margin-horizontal 16 - :line-height 22 - :text-align :center}) - -(def welcome-blank-text - {:font-size 15 - :width 270 - :line-height 22 - :text-align :center - :color colors/gray}) - -(def empty-chats-header-container - {:align-items :center - :justify-content :center}) - -(defn hr-wrapper - [] - {:position :absolute - :width "100%" - :height 1 - :top 10 - :background-color colors/gray-lighter}) - -(defn or-text - [] - {:width 40 - :background-color colors/white - :font-size 12 - :line-height 20 - :text-align :center - :color colors/gray}) - -(def tags-wrapper - {:margin-top 10 - :margin-bottom 18}) - -(defn close-icon-container - [] - {:width 24 - :height 24 - :border-radius 12 - :background-color colors/gray - :align-items :center - :justify-content :center}) - -(defn counter-public-container - [] - {:right 2 - :top 0 - :position :absolute - :border-radius 8 - :width 16 - :height 16 - :justify-content :center - :align-items :center - :background-color colors/white}) - -(def counter-public - {:background-color colors/blue - :width 12 - :border-radius 6 - :height 12}) diff --git a/src/legacy/status_im/ui/screens/home/views/inner_item.cljs b/src/legacy/status_im/ui/screens/home/views/inner_item.cljs deleted file mode 100644 index 9c6cef0247..0000000000 --- a/src/legacy/status_im/ui/screens/home/views/inner_item.cljs +++ /dev/null @@ -1,329 +0,0 @@ -(ns legacy.status-im.ui.screens.home.views.inner-item - (:require - [clojure.string :as string] - [legacy.status-im.ui.components.badge :as badge] - [legacy.status-im.ui.components.chat-icon.screen :as chat-icon.screen] - [legacy.status-im.ui.components.chat-icon.styles :as chat-icon.styles] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as components] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.home.styles :as styles] - [legacy.status-im.utils.core :as utils] - [legacy.status-im.utils.utils :as utils.utils] - [quo.core :as quo] - [quo.foundations.colors :as quo.colors] - [re-frame.core :as re-frame] - [status-im.constants :as constants] - [utils.datetime :as datetime] - [utils.i18n :as i18n])) - -(defn preview-label - [label-key label-fn] - [react/text - {:style styles/last-message-text - :accessibility-label :no-messages-text - :number-of-lines 1} - (i18n/label label-key label-fn)]) - -(def max-subheader-length 100) - -(defn truncate-literal - [literal] - (when literal - (let [size (min max-subheader-length (.-length literal))] - {:components (.substring literal 0 size) - :length size}))) - -(defn add-parsed-to-subheader - [acc {:keys [type destination literal children]}] - (let [result (case type - "paragraph" - (reduce - (fn [{:keys [_ length] :as acc-paragraph} parsed-child] - (if (>= length max-subheader-length) - (reduced acc-paragraph) - (add-parsed-to-subheader acc-paragraph parsed-child))) - {:components [react/text-class] - :length 0} - children) - - "mention" - {:components [react/text-class - @(re-frame/subscribe [:messages/resolve-mention literal])] - :length 4} ;; we can't predict name length so take the smallest possible - - "status-tag" - (truncate-literal (str "#" literal)) - - "link" - (truncate-literal destination) - - (truncate-literal literal))] - {:components (conj (:components acc) (:components result)) - :length (+ (:length acc) (:length result))})) - -(defn render-subheader - "Render the preview of a last message to a maximum of max-subheader-length characters" - [parsed-text] - (let [result - (reduce - (fn [{:keys [_ length] :as acc-text} new-text-chunk] - (if (>= length max-subheader-length) - (reduced acc-text) - (add-parsed-to-subheader acc-text new-text-chunk))) - {:components [react/text-class - {:style styles/last-message-text - :number-of-lines 1 - :ellipsize-mode :tail - :accessibility-label :chat-message-text}] - :length 0} - parsed-text)] - (:components result))) - -(defn content-type-community-invite? - [content-type community-id] - (and (= constants/content-type-community content-type) - (not (string/blank? community-id)))) - -(defn message-content-text - [{:keys [content content-type community-id]} absolute] - [react/view (when absolute {:position :absolute :left 72 :top 32 :right 80}) - (cond - (not (and content content-type)) - [preview-label :t/no-messages] - - (and (or (= constants/content-type-text content-type) - (= constants/content-type-emoji content-type) - (= constants/content-type-command content-type)) - (not (string/blank? (:text content)))) - (if (string/blank? (:parsed-text content)) - [react/text-class - {:style styles/last-message-text - :number-of-lines 1 - :ellipsize-mode :tail - :accessibility-label :chat-message-text} - (:text content)] - [render-subheader (:parsed-text content)]) - - (= constants/content-type-sticker content-type) - [preview-label :t/sticker] - - (= constants/content-type-image content-type) - [preview-label :t/image] - - (= constants/content-type-audio content-type) - [preview-label :t/audio] - - (content-type-community-invite? content-type community-id) - (let [{:keys [name]} - @(re-frame/subscribe [:communities/community community-id])] - [preview-label :t/community-message-preview {:community-name name}]))]) - -(def memo-timestamp - (memoize - (fn [timestamp] - (string/upper-case (datetime/to-short-str timestamp))))) - -(defn unviewed-indicator - [{:keys [unviewed-mentions-count - unviewed-messages-count - public?]}] - (when (pos? unviewed-messages-count) - [react/view {:position :absolute :right 16} - (cond - (and public? (not (pos? unviewed-mentions-count))) - [react/view - {:style styles/public-unread - :accessibility-label :unviewed-messages-public}] - - (and public? (pos? unviewed-mentions-count)) - [badge/message-counter unviewed-mentions-count] - - :else - [badge/message-counter unviewed-messages-count])])) - -(defn unviewed-indicator-old - [{:keys [unviewed-mentions-count - unviewed-messages-count - public?]}] - (when (pos? unviewed-messages-count) - [react/view {:position :absolute :right 16 :bottom 12} - (cond - (and public? (not (pos? unviewed-mentions-count))) - [react/view - {:style styles/public-unread - :accessibility-label :unviewed-messages-public}] - - (and public? (pos? unviewed-mentions-count)) - [badge/message-counter unviewed-mentions-count] - - :else - [badge/message-counter unviewed-messages-count])])) - -(defn icon-style - [] - {:color colors/black - :width 15 - :height 15 - :container-style {:top 13 - :left 72 - :position :absolute - :width 15 - :height 15 - :margin-right 2}}) - -(defn chat-item-icon - [muted private-group? public-group?] - (cond - muted - [icons/icon :main-icons/tiny-muted (assoc (icon-style) :color colors/gray)] - private-group? - [icons/icon :main-icons/tiny-group (icon-style)] - public-group? - [icons/icon :main-icons/tiny-public (icon-style)] - :else - [icons/icon :main-icons/tiny-new-contact (icon-style)])) - -(defn chat-item-title - [chat-id muted group-chat chat-name edit?] - [quo/text - {:weight :semi-bold - :color (when muted :secondary) - :accessibility-label :chat-name-text - :ellipsize-mode :tail - :number-of-lines 1 - :style {:position :absolute - :left 72 - :top 10 - :right (if edit? 50 90)}} - (if group-chat - (utils/truncate-str chat-name 30) - ;; This looks a bit odd, but I would like only to subscribe - ;; if it's a one-to-one. If wrapped in a component styling - ;; won't be applied correctly. - (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) - -(defn chat-item-title-old - [chat-id muted group-chat chat-name edit?] - [components/text - {:weight :medium - :color (when muted :secondary) - :accessibility-label :chat-name-text - :ellipsize-mode :tail - :number-of-lines 1 - :style {:position :absolute - :left 92 - :top 10 - :right (if edit? 50 90)}} - (if group-chat - (utils/truncate-str chat-name 30) - ;; This looks a bit odd, but I would like only to subscribe - ;; if it's a one-to-one. If wrapped in a component styling - ;; won't be applied correctly. - (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) - -(defn home-list-item - [home-item opts] - (let [{:keys [chat-id chat-name color group-chat muted emoji highlight edit? public? - unviewed-messages-count contacts users members]} - home-item - background-color (when highlight (colors/get-color :interactive-02)) - group-members-public-keys (->> (concat (keys users) contacts (map #(:id %) members)) - (into #{}) - (remove nil?))] - [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) - [:<> - (when (pos? unviewed-messages-count) - [react/view - {:position :absolute - :top 2 - :left 8 - :right 8 - :bottom 2 - :border-radius 16 - :background-color quo.colors/primary-50-opa-5}]) - [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji - {:container (assoc chat-icon.styles/container-chat-list - :top 12 - :left 20 - :position :absolute) - :size 32 - :chat-icon chat-icon.styles/chat-icon-chat-list - :default-chat-icon (chat-icon.styles/default-chat-icon-chat-list color) - :default-chat-icon-text (if (string/blank? emoji) - (chat-icon.styles/default-chat-icon-text 40) - (chat-icon.styles/emoji-chat-icon-text 40))}] - [chat-item-title chat-id muted group-chat chat-name edit?] - (when-not edit? - [react/view {:height "100%" :justify-content :center} - [unviewed-indicator home-item]]) - [react/view {:position :absolute :left 72 :top 32 :right 80} - (if public? - [quo/text - {:color :secondary - :number-of-lines 1 - :ellipsize-mode :middle - :weight :medium - :style {:color (quo.colors/theme-colors quo.colors/neutral-50 - quo.colors/neutral-40)}} - (i18n/label :t/public)] - (if group-chat - [react/view - {:flex-direction :row - :flex 1 - :padding-right 16 - :align-items :center} - [icons/icon :main-icons/tiny-group2 - {:width 16 - :height 16 - :no-color true - :container-style {:width 16 - :height 16 - :margin-right 4}}] - [quo/text - {:weight :medium - :style {:color (quo.colors/theme-colors quo.colors/neutral-50 quo.colors/neutral-40)}} - (i18n/label :t/members-count {:count (count group-members-public-keys)})]] - [quo/text - {:monospace true - :weight :medium - :style {:color (quo.colors/theme-colors quo.colors/neutral-50 - quo.colors/neutral-40)} - :number-of-lines 1 - :ellipsize-mode :middle} - (utils.utils/get-shortened-address chat-id)]))]]])) - -(defn home-list-item-old - [home-item opts] - (let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted emoji highlight - edit?]} - home-item - background-color (when highlight (colors/get-color :interactive-02))] - [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) - [:<> - [chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)] - [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji - {:container (assoc chat-icon.styles/container-chat-list - :top 12 - :left 16 - :position :absolute) - :size 40 - :chat-icon chat-icon.styles/chat-icon-chat-list - :default-chat-icon (chat-icon.styles/default-chat-icon-chat-list color) - :default-chat-icon-text (if (string/blank? emoji) - (chat-icon.styles/default-chat-icon-text 40) - (chat-icon.styles/emoji-chat-icon-text 40))}] - [chat-item-title-old chat-id muted group-chat chat-name edit?] - (when-not edit? - [:<> - [react/text - {:style styles/datetime-text - :number-of-lines 1 - :accessibility-label :last-message-time-text} - ;;TODO (perf) move to event - (memo-timestamp (if (pos? (:whisper-timestamp last-message)) - (:whisper-timestamp last-message) - timestamp))] - [unviewed-indicator-old home-item]]) - [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) diff --git a/src/legacy/status_im/ui/screens/keycard/authentication_method/styles.cljs b/src/legacy/status_im/ui/screens/keycard/authentication_method/styles.cljs deleted file mode 100644 index 1587a1184a..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/authentication_method/styles.cljs +++ /dev/null @@ -1,59 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.authentication-method.styles - (:require - [legacy.status-im.ui.components.colors :as colors])) - -(def container - {:flex 1 - :background-color colors/white}) - -(def lock-image-container - {:background-color colors/blue-light - :width 160 - :height 160 - :border-radius 80 - :align-items :center - :justify-content :center}) - -(def lock-image - {:width 160 - :height 160}) - -(def choose-authentication-method - {:flex-direction :column - :flex 1 - :align-items :center - :justify-content :center}) - -(def choose-authentication-method-text - {:typography :header - :margin-top 51 - :padding-horizontal 60 - :text-align :center}) - -(def choose-authentication-method-row-text - {:color colors/blue - :text-align :center - :font-size 17}) - -(def authentication-methods - {:padding-vertical 24}) - -(def authentication-method-row - {:padding-horizontal 16 - :flex-direction :row - :align-items :center - :height 63}) - -(def authentication-method-row-icon-container - {:background-color colors/blue-light - :width 40 - :height 40 - :border-radius 50 - :align-items :center - :justify-content :center}) - -(def authentication-method-row-wrapper - {:flex 1 - :flex-direction :row - :padding-horizontal 16 - :justify-content :space-between}) diff --git a/src/legacy/status_im/ui/screens/keycard/authentication_method/views.cljs b/src/legacy/status_im/ui/screens/keycard/authentication_method/views.cljs deleted file mode 100644 index 4377a6fe68..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/authentication_method/views.cljs +++ /dev/null @@ -1,49 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.authentication-method.views - (:require - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.components.separator :as separator] - [legacy.status-im.ui.components.topbar :as topbar] - [legacy.status-im.ui.screens.keycard.authentication-method.styles :as styles] - [re-frame.core :as re-frame] - [utils.i18n :as i18n])) - -(defn authentication-method-row - [{:keys [title on-press icon]}] - [react/touchable-highlight {:on-press on-press} - [react/view styles/authentication-method-row - [react/view styles/authentication-method-row-icon-container - [icons/icon icon {:color colors/blue}]] - [react/view styles/authentication-method-row-wrapper - [react/text - {:style styles/choose-authentication-method-row-text - :number-of-lines 1} - title]] - [icons/icon :main-icons/next {:color colors/gray}]]]) - -(defn keycard-authentication-method - [] - [react/view styles/container - [react/view {:flex 1} - [topbar/topbar] - [separator/separator] - [react/view styles/choose-authentication-method - [react/view styles/lock-image-container - [react/image - {:source (resources/get-image :keycard-lock) - :style styles/lock-image}]] - [react/text - {:style styles/choose-authentication-method-text - :number-of-lines 3} - (i18n/label :t/choose-authentication-method)]] - [react/view styles/authentication-methods - [authentication-method-row - {:title (i18n/label :t/keycard) - :icon :main-icons/keycard - :on-press #(re-frame/dispatch [:onboarding.ui/keycard-option-pressed])}] - [authentication-method-row - {:title (i18n/label :t/password) - :icon :main-icons/password - :on-press #(re-frame/dispatch [:keycard.ui/password-option-pressed])}]]]]) diff --git a/src/legacy/status_im/ui/screens/keycard/components/description.cljs b/src/legacy/status_im/ui/screens/keycard/components/description.cljs deleted file mode 100644 index 2d99d63656..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/components/description.cljs +++ /dev/null @@ -1,52 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.components.description - (:require - [legacy.status-im.ui.components.animation :as animation] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.components.style :as styles] - [reagent.core :as reagent])) - -(defn text-block-style - [animated] - {:height 66 - :margin-bottom 8 - :opacity (animation/interpolate animated - {:inputRange [0 1] - :outputRange [1 0]}) - :transform [{:translateY (animation/interpolate animated - {:inputRange [0 1] - :outputRange [0 10]})}]}) - -(def easing (animation/bezier 0.77 0 0.175 1)) - -(defonce animating (atom nil)) - -(defn animate-description - [animated] - (when-not @animating - (reset! animating true) - ;; TODO; Animate exit - (animation/set-value animated 1) - (animation/start - (animation/timing animated - {:toValue 0 - :timing 300 - :easing easing}) - #(reset! animating false)))) - -(defn animated-description - [] - (let [current-text (reagent/atom nil) - animated-value (animation/create-value 0)] - (fn [{:keys [title description]}] - (when-not (= @current-text [title description]) - (reset! current-text [title description]) - (animate-description animated-value)) - [react/animated-view {:style (text-block-style animated-value)} - [react/text - {:style styles/title-style - :number-of-lines 1} - title] - [react/text - {:style styles/helper-text-style - :number-of-lines 2} - description]]))) diff --git a/src/legacy/status_im/ui/screens/keycard/components/keycard_animation.cljs b/src/legacy/status_im/ui/screens/keycard/components/keycard_animation.cljs deleted file mode 100644 index 1a05e734a4..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/components/keycard_animation.cljs +++ /dev/null @@ -1,369 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.components.keycard-animation - (:require - [legacy.status-im.keycard.card :as keycard-nfc] - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.animation :as animation] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [reagent.core :as reagent])) - -(defn circle - [{:keys [animation-value color size]}] - [react/animated-view - {:style {:width size - :height size - :position "absolute" - :background-color color - :border-radius (/ size 2) - :opacity (animation/interpolate - animation-value - {:inputRange [0 1 2] - :outputRange [0.7 1 0]}) - :transform [{:scale (animation/interpolate - animation-value - {:inputRange [0 1] - :outputRange [0.9 1]})}]}}]) - -(defn indicator-container - [anim children] - [react/animated-view - {:style {:position "absolute" - :justify-content :center - :align-items :center - :border-radius 21 - :width 42 - :height 42 - :top 16.5 - :right -24 - :shadow-offset {:width 0 :height 2} - :shadow-radius 16 - :elevation 8 - :shadow-opacity 0.1 - :shadow-color "gba(0, 9, 26, 0.12)" - :background-color colors/white - :opacity anim - :transform [{:scale (animation/interpolate - anim - {:inputRange [0 1] - :outputRange [0 1]})}]}} - children]) - -(defn indicator-view - [{:keys [state animation-value]}] - [indicator-container animation-value - (case @state - :error - [icons/icon :main-icons/close - {:color colors/red - :height 28 - :width 28}] - :success - [icons/icon :main-icons/check - {:color colors/green - :height 28 - :width 28}] - :connected - [icons/icon :main-icons/check - {:color colors/blue - :height 28 - :width 28}] - :processing - [react/activity-indicator {:color colors/blue}] - - nil)]) - -(defn animate-card-position - [card-scale animation-value] - {:transform [{:scale card-scale} - {:translateX (animation/x animation-value)} - {:translateY (animation/y animation-value)}]}) - -(defn card-colors - [state] - (case state - (:init :awaiting) - {:card-color "#2D2D2D" - :key-color "#27D8B9" - :chip-color "#F0CC73"} - (:connected :processing) - {:card-color colors/blue - :key-color colors/white - :chip-color colors/white} - :success - {:card-color colors/green - :key-color colors/white - :chip-color colors/white} - :error - {:card-color colors/red - :key-color colors/white - :chip-color colors/white} - nil)) - -(defn card-view - [{:keys [card-scale state indicator-value animation-value]}] - (let [{:keys [card-color - chip-color - key-color]} - (card-colors @state)] - [react/animated-view - {:style (merge - (animate-card-position card-scale animation-value) - {:height 80 - :width 120 - :border-radius 12 - :position :absolute - :shadow-offset {:width 0 :height 2} - :shadow-radius 16 - :elevation 8 - :shadow-opacity 0.1 - :shadow-color "gba(0, 9, 26, 0.12)" - :background-color card-color})} - [react/animated-view - {:style {:width 12 - :height 9 - :border-radius 3 - :left 19.5 - :top 30 - :background-color chip-color}}] - [react/view - {:style {:position :absolute - :justify-content :center - :top 18 - :right 19.5 - :height 42 - :width 25}} - [icons/icon :main-icons/keycard-logo-big - {:color key-color - :width 25 - :height 42}]] - [indicator-view - {:state state - :animation-value indicator-value}]])) - -(defn phone-view - [{:keys [animation-value]}] - [react/animated-view - {:style {:position :absolute - :bottom 0 - :elevation 9 - :opacity (animation/interpolate - animation-value - {:inputRange [0 1] - :outputRange [0 0.9]}) - :transform [{:translateY (animation/interpolate - animation-value - {:inputRange [0 1] - :outputRange [125 10]})}]}} - [react/image - {:source (resources/get-image :onboarding-phone) - :style {:height 125 - :width 86}}]]) - -(def circle-easing (animation/bezier 0.455 0.03 0.515 0.955)) -(def card-easing (animation/bezier 0.77 0 0.175 1)) - -(defn- circle-animation - [animation-value to delay-ms] - (animation/timing animation-value - {:toValue to - :delay delay-ms - :duration 1000 - :easing circle-easing})) - -(defn start-animation - [{:keys [small medium big card-scale phone - indicator card state]}] - (animation/set-value indicator 0) - (animation/set-value phone 0) - (let [phone-enter-at 7000 - resets (animation/timing card-scale - {:toValue 0.66 - :duration 1000 - :easing card-easing}) - card-loop (animation/anim-loop - (animation/anim-sequence - [(animation/timing card - {:toValue #js - {:x -30 - :y 30} - :duration 1000 - :easing card-easing}) - (animation/timing card - {:toValue {:x 45 - :y 65} - :duration 1000 - :delay 2000 - :easing card-easing}) - (animation/timing card - {:toValue #js - {:x -30 - :y 105} - :duration 1000 - :delay 2000 - :easing card-easing}) - (animation/anim-delay 2000)])) - phone-entrance (animation/anim-sequence - [(animation/anim-delay phone-enter-at) - (animation/parallel - [(animation/timing card-scale - {:toValue 0.528 - :duration 1000 - :easing card-easing}) - (animation/timing phone - {:toValue 1 - :duration 1000 - :easing card-easing}) - card-loop])]) - circles (animation/anim-loop - (animation/parallel - [(animation/anim-sequence - [(circle-animation small 1 0) - (circle-animation small 0 0)]) - (animation/anim-sequence - [(circle-animation medium 1 200) - (circle-animation medium 0 0)]) - (animation/anim-sequence - [(circle-animation big 1 400) - (circle-animation big 0 0)])])) - animation (animation/parallel - [resets - phone-entrance - circles])] - (reset! state :init) - ;; TODO(Ferossgp): Think how to improve that, this creates desync of state with animation - (js/setTimeout #(compare-and-set! state :init :awaiting) - phone-enter-at) - (animation/start animation))) - -(defn on-error - [{:keys [state restart]}] - (reset! state :error) - (js/setTimeout #(when (= @state :error) - (restart)) - 3000)) - -(defn on-connect - [{:keys [state card small indicator - medium big card-scale phone]}] - (let [connect-animation (animation/parallel - [(animation/timing card-scale - {:toValue 1 - :timing 1000 - :easing card-easing}) - (animation/timing indicator - {:toValue 1 - :timing 1000 - :easing card-easing}) - (animation/timing small - {:toValue 2 - :timing 1000 - :easing circle-easing}) - (animation/timing medium - {:toValue 2 - :timing 1000 - :easing circle-easing}) - (animation/timing big - {:toValue 2 - :timing 1000 - :easing circle-easing}) - (animation/timing phone - {:toValue 0 - :timing 1000 - :easing card-easing}) - (animation/timing card - {:toValue #js - {:x 0 - :y 0} - :timing 3000 - :easing card-easing})])] - (reset! state :connected) - (js/setTimeout #(compare-and-set! state :connected :processing) - 2000) - (animation/start connect-animation))) - -(defn animated-circles - [{:keys [state connected? on-card-connected on-card-disconnected]}] - (let [animation-small (animation/create-value 0) - animation-medium (animation/create-value 0) - animation-big (animation/create-value 0) - animation-card (animation/create-value-xy #js - {:x 0 - :y 0}) - card-scale (animation/create-value 0.66) - animation-phone (animation/create-value 0) - animation-indicator (animation/create-value 0) - on-start-animation #(start-animation - {:state state - :small animation-small - :medium animation-medium - :big animation-big - :phone animation-phone - :card animation-card - :card-scale card-scale - :indicator animation-indicator}) - on-card-connected #(do - (on-card-connected) - (on-connect - {:state state - :indicator animation-indicator - :card animation-card - :card-scale card-scale - :phone animation-phone - :small animation-small - :medium animation-medium - :big animation-big})) - on-error-fn #(do - (on-card-disconnected) - (on-error - {:state state - :restart on-start-animation})) - listeners (atom [])] - (reagent/create-class - {:component-did-mount - (fn [] - (doseq [listener @listeners] - (keycard-nfc/remove-event-listener listener)) - - (reset! listeners [(keycard-nfc/on-card-connected on-card-connected) - (keycard-nfc/on-card-disconnected on-error-fn)]) - - (on-start-animation) - - (when connected? - (on-card-connected))) - :component-will-unmount - (fn [] - (doseq [listener @listeners] - (keycard-nfc/remove-event-listener listener))) - :render - (fn [] - [react/view - {:style {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 - :justify-content :center - :align-items :center}} - - [circle - {:animation-value animation-big - :size 200 - :color "#F1F4FF"}] - [circle - {:animation-value animation-medium - :size 140 - :color "#E3E8FA"}] - [circle - {:animation-value animation-small - :size 80 - :color "#D2D9F0"}] - - [card-view - {:animation-value animation-card - :state state - :indicator-value animation-indicator - :card-scale card-scale}] - - [phone-view {:animation-value animation-phone}]])}))) diff --git a/src/legacy/status_im/ui/screens/keycard/components/style.cljs b/src/legacy/status_im/ui/screens/keycard/components/style.cljs deleted file mode 100644 index ea6c47031b..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/components/style.cljs +++ /dev/null @@ -1,22 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.components.style - (:require - [legacy.status-im.ui.components.colors :as colors])) - -(def wrapper-style - {:flex 1 - :align-items :center - :justify-content :center}) - -(def container-style - {:flex-direction :column - :align-items :center - :padding-horizontal 40}) - -(def helper-text-style - {:text-align :center - :color colors/gray - :line-height 22}) - -(def title-style - {:text-align :center - :line-height 22}) diff --git a/src/legacy/status_im/ui/screens/keycard/components/turn_nfc.cljs b/src/legacy/status_im/ui/screens/keycard/components/turn_nfc.cljs deleted file mode 100644 index 6ce63f3de6..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/components/turn_nfc.cljs +++ /dev/null @@ -1,30 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.components.turn-nfc - (:require - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.components.style :as styles] - [re-frame.core :as re-frame] - [utils.i18n :as i18n])) - -(defn turn-nfc-on - [] - [react/view {:style styles/wrapper-style} - [react/view {:style styles/container-style} - [icons/icon :main-icons/union-nfc - {:color colors/blue - :height 36 - :width 36}] - [react/view {:margin-top 16} - [react/text {:style {:typography :title-bold}} - (i18n/label :t/turn-nfc-on)]] - [react/view - {:margin-top 8 - :margin-bottom 16} - [react/text - {:number-of-lines 2 - :style styles/helper-text-style} - (i18n/label :t/turn-nfc-description)]] - [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.nfc-on/open-nfc-settings-pressed])} - (i18n/label :t/open-nfc-settings)]]]) diff --git a/src/legacy/status_im/ui/screens/keycard/frozen_card/view.cljs b/src/legacy/status_im/ui/screens/keycard/frozen_card/view.cljs deleted file mode 100644 index 160cbd42e4..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/frozen_card/view.cljs +++ /dev/null @@ -1,56 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.frozen-card.view - (:require-macros [legacy.status-im.utils.views :as views]) - (:require - [legacy.status-im.keycard.login :as login] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [re-frame.core :as re-frame] - [utils.i18n :as i18n])) - -(views/defview frozen-card - [{:keys [show-dismiss-button?] - :or {show-dismiss-button? true}}] - [react/view - {:style (when-not show-dismiss-button? - {:flex 1})} - [react/view - {:margin-top 24 - :margin-horizontal 24 - :align-items :center} - [react/view - {:background-color colors/blue-light - :width 32 - :height 32 - :border-radius 16 - :align-items :center - :justify-content :center} - [icons/icon :main-icons/warning {:color colors/blue}]] - [react/text - {:style {:typography :title-bold - :margin-top 16 - :margin-bottom 8}} - (i18n/label :t/keycard-is-frozen-title)] - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/keycard-is-frozen-details)]] - [react/view - {:margin-bottom 24 - :margin-horizontal 24 - :align-items :center} - [react/view {:style {:margin-top 24}} - [quo/button - {:on-press #(re-frame/dispatch [::login/reset-pin])} - (i18n/label :t/keycard-is-frozen-reset)]] - [react/view {:style {:margin-top 24}} - [quo/button - {:on-press #(re-frame/dispatch [:keycard-settings.ui/recovery-card-pressed false])} - (i18n/label :t/keycard-is-frozen-factory-reset)]] - (when show-dismiss-button? - [react/view {:margin-top 24} - [quo/button - {:on-press #(re-frame/dispatch [::login/frozen-keycard-popover-dismissed]) - :type :secondary} - (i18n/label :t/dismiss)]])]]) diff --git a/src/legacy/status_im/ui/screens/keycard/keycard_interaction.cljs b/src/legacy/status_im/ui/screens/keycard/keycard_interaction.cljs deleted file mode 100644 index 32c9cf8c30..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/keycard_interaction.cljs +++ /dev/null @@ -1,87 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.keycard-interaction - (:require - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.components.description :as description] - [legacy.status-im.ui.screens.keycard.components.keycard-animation :refer [animated-circles]] - [legacy.status-im.ui.screens.keycard.components.style :as styles] - [legacy.status-im.ui.screens.keycard.components.turn-nfc :as turn-nfc] - [re-frame.core :as re-frame] - [reagent.core :as reagent] - [utils.i18n :as i18n])) - -(def state->translations - {:init {:title :t/keycard-init-title - :description :t/keycard-init-description} - :awaiting {:title :t/keycard-awaiting-title - :description :t/keycard-awaiting-description} - :processing {:title :t/keycard-processing-title - :description :t/keycard-processing-description} - :connected {:title :t/keycard-connected-title - :description :t/keycard-connected-description} - :error {:title :t/keycard-error-title - :description :t/keycard-error-description} - :success {:title :t/keycard-success-title - :description :t/keycard-success-description}}) - -(defn card-sync-flow - [] - (let [state (reagent/atom nil)] - (fn [{:keys [on-card-connected connected? on-card-disconnected params]}] - (let [translation (or (get-in params [:state-translations @state]) - (get state->translations @state))] - [react/view - {:style styles/container-style - :height 286} - [react/view - {:height 200 - :margin-bottom 20} - [animated-circles - {:state state - :connected? connected? - :on-card-disconnected on-card-disconnected - :on-card-connected on-card-connected}]] - (when translation - [description/animated-description - {:title (i18n/label (:title translation)) - :description (i18n/label (:description translation))}])])))) - -(defn connect-keycard - [{:keys [on-connect on-cancel - connected? on-disconnect - params]}] - [react/view - {:style {:flex 1 - :align-items :center - :justify-content :center}} - (when on-cancel - [react/touchable-highlight - {:on-press on-cancel - :style {:position :absolute - :top 0 - :right 0}} - [react/text - {:style {:line-height 22 - :padding-horizontal 16 - :color colors/blue - :text-align :center}} - (i18n/label :t/cancel)]]) - (when (:title params) - [react/view - {:style - {:align-self :flex-start :padding-left 16 :margin-bottom 24 :position :absolute :top 0 :left 0}} - [react/text {:style {:font-size (if (:small-screen? params) 15 17) :font-weight "700"}} - (:title params)]]) - (when (:header params) - [(:header params)]) - (if @(re-frame/subscribe [:keycard/nfc-enabled?]) - [card-sync-flow - {:connected? connected? - :params (select-keys params [:state-translations]) - :on-card-disconnected - #(re-frame/dispatch [on-disconnect]) - :on-card-connected - #(re-frame/dispatch [on-connect])}] - [turn-nfc/turn-nfc-on]) - (when (:footer params) - [(:footer params)])]) diff --git a/src/legacy/status_im/ui/screens/keycard/onboarding/views.cljs b/src/legacy/status_im/ui/screens/keycard/onboarding/views.cljs deleted file mode 100644 index b9d489f177..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/onboarding/views.cljs +++ /dev/null @@ -1,392 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.onboarding.views - (:require - [legacy.status-im.keycard.onboarding :as keycard.onboarding] - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.checkbox.view :as checkbox] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.components.toolbar :as bottom-toolbar] - [legacy.status-im.ui.components.tooltip.views :as tooltip] - [legacy.status-im.ui.components.topbar :as topbar] - [legacy.status-im.ui.screens.keycard.pin.views :as pin.views] - [legacy.status-im.ui.screens.keycard.styles :as styles] - [re-frame.core :as re-frame] - [status-im.constants :as constants] - [utils.i18n :as i18n] - [utils.re-frame :as rf]) - (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]])) - -(defview intro - [] - (letsubs [flow [:keycard-flow] - {:keys [from-key-storage-and-migration? factory-reset-card?]} [:keycard]] - [react/view - {:flex 1 - :align-items :center - :margin-top (when from-key-storage-and-migration? 80)} - [react/view {:align-items :center} - [react/view - [react/view - {:align-items :center - :justify-content :center - :margin-top 16} - [react/image - {:source (resources/get-image :keycard) - :style {:width 120 - :height 95}}]]] - [react/view {:margin-top 16} - [react/text {:style {:typography :header}} - (i18n/label :t/keycard-onboarding-intro-header)]] - [react/view - {:margin-top 16 - :width 311} - [react/text - {:style {:font-size 15 - :line-height 22 - :color colors/gray - :text-align :center}} - (i18n/label :t/keycard-onboarding-intro-text)]] - [react/view - [react/touchable-highlight - {:on-press #(.openURL ^js react/linking - constants/keycard-integration-link)} - [react/view - {:flex-direction :row - :align-items :center - :justify-content :center} - [react/text - {:style {:text-align :center - :color colors/blue}} - (i18n/label :t/learn-more-about-keycard)] - [icons/tiny-icon :tiny-icons/tiny-external - {:color colors/blue - :container-style {:margin-left 5}}]]]]] - [react/view - {:margin-top 16 - :margin-left 24 - :margin-right 24} - [react/text - {:style {:typography :main-medium - :line-height 22 - :text-align :left}} - (i18n/label :t/keycard-onboarding-pin-text)] - (when (not= flow :recovery) - [react/text - {:style {:typography :main-medium - :margin-top 16 - :line-height 22 - :text-align :left}} - (i18n/label :t/keycard-onboarding-mnemonic-text)])] - [react/view - {:style {:flex-direction :row - :margin-top 24}} - [checkbox/checkbox - {:checked? factory-reset-card? - :style {:margin-right 10} - :on-value-change #(re-frame/dispatch [:keycard.onboarding.intro.ui/factory-reset-card-toggle - %])}] - [react/text (i18n/label :t/keycard-factory-reset)]] - [react/view {:margin-top 40} - [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])} - (i18n/label :t/begin-set-up)]]])) - -(defview puk-code - [] - (letsubs [secrets [:keycard-secrets] - steps [:keycard-flow-steps] - puk [:keycard-puk-code]] - [react/view styles/container - [topbar/topbar - {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) - :label (i18n/label :t/cancel)} - :title (i18n/label :t/step-i-of-n - {:step "2" - :number steps})}] - [react/scroll-view - {:content-container-style {:flex-grow 1 - :justify-content :space-between}} - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-onboarding-puk-code-header)]] - [react/view - {:margin-top 32 - :width "85%"} - [react/view - {:justify-content :center - :flex-direction :row} - [react/view - {:width "100%" - :margin-horizontal 16 - :height 108 - :align-items :center - :justify-content :space-between - :flex-direction :column - :background-color colors/gray-lighter - :border-radius 8} - [react/view - {:justify-content :center - :flex 1 - :margin-top 10} - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/puk-code)]] - [react/view - {:justify-content :flex-start - :flex 1} - [quo/text - {:color :link - :align :center - :size :large - :monospace true - :accessibility-label :puk-code} - puk]]]] - [react/view {:margin-top 16} - [react/text {:style {:color colors/gray}} - (i18n/label :t/puk-code-explanation)]] - [react/view - {:justify-content :center - :margin-top 32 - :flex-direction :row} - [react/view - {:width "100%" - :margin-horizontal 16 - :height 108 - :align-items :center - :justify-content :space-between - :flex-direction :column - :background-color colors/gray-lighter - :border-radius 8} - [react/view - {:justify-content :center - :flex 1 - :margin-top 10} - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/pair-code)]] - [react/view - {:justify-content :flex-start - :flex 1} - [quo/text - {:color :link - :align :center - :size :large - :monospace true - :accessibility-label :pair-code} - (:password secrets)]]]] - [react/view {:margin-top 16} - [react/text {:style {:color colors/gray}} - (i18n/label :t/pair-code-explanation)]]]] - [bottom-toolbar/toolbar - {:right - [quo/button - {:type :secondary - :after :main-icon/next - :on-press #(re-frame/dispatch [:keycard.onboarding.puk-code.ui/next-pressed])} - (i18n/label :t/next)]}]]]])) - -(defview pin - [] - (letsubs [card-pin [:keycard/pin] - enter-step [:keycard/pin-enter-step] - status [:keycard/pin-status] - error-label [:keycard/pin-error-label] - steps [:keycard-flow-steps] - small-screen? [:dimensions/small-screen?] - setup-step [:keycard-setup-step]] - [react/view styles/container - [topbar/topbar - {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) - :label (i18n/label :t/cancel)} - :title (when-not (= setup-step :loading-keys) - (i18n/label :t/step-i-of-n - {:number steps - :step 1}))}] - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top (if small-screen? 4 16)} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label (if (= :original enter-step) - :t/intro-wizard-title4 - :t/intro-wizard-title5))]] - [react/view - {:margin-top (if small-screen? 8 16) - :height (if small-screen? 16 22)} - (when (= :original enter-step) - [react/text {:style {:color colors/gray}} - (i18n/label :t/intro-wizard-text4)])]] - [pin.views/pin-view - {:pin card-pin - :status status - :small-screen? small-screen? - :error-label error-label - :step enter-step}] - (when-not (= setup-step :loading-keys) - [react/view - {:align-items :center - :flex-direction :column - :justify-content :center - :margin-bottom 15} - [react/text - {:style {:color colors/gray - :padding-horizontal 40 - :text-align :center}} - (i18n/label :t/you-will-need-this-code)]])]])) - -(defview recovery-phrase - [] - (letsubs [mnemonic [:keycard-mnemonic]] - [react/view styles/container - [topbar/topbar - {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) - :label (i18n/label :t/cancel)} - :title (i18n/label :t/step-i-of-n - {:step "3" - :number "3"})}] - [react/scroll-view - {:content-container-style {:flex-grow 1 - :justify-content :space-between}} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-onboarding-recovery-phrase-header)]] - [react/view - {:margin-top 16 - :width "85%" - :flex-direction :column - :align-items :center} - [react/text - {:style {:text-align :center - :color colors/gray}} - (i18n/label :t/keycard-onboarding-recovery-phrase-text)] - [react/view - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase.ui/learn-more-pressed])} - [react/text {:style {:color colors/blue}} - (i18n/label :t/learn-more)]]]]] - - [react/view {:padding-horizontal 24} - [react/view - (for [[i row] mnemonic] - ^{:key (str "row" i)} - [react/view - {:flex-direction :row - :justify-content :center - :margin-top 12} - (for [[i word] row] - ^{:key (str "word" i)} - [react/view - {:flex-direction :row - :background-color colors/gray-lighter - :padding-horizontal 14 - :padding-vertical 7 - :border-radius 48 - :margin-left 12} - [react/text {:style {:color colors/gray}} - (str (inc i) ". ")] - [react/text {:accessibility-label (str "word" i)} - word]])])] - [react/view {:margin-top 24} - [react/text {:style {:text-align :center}} - (i18n/label :t/keycard-onboarding-recovery-phrase-description)]]] - [bottom-toolbar/toolbar - {:right - [quo/button - {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase.ui/next-pressed]) - :type :secondary - :after :main-icon/next} - (i18n/label :t/confirm)]}]]])) - -(defn recovery-phrase-confirm-word - [] - (let [word (rf/sub [:keycard-recovery-phrase-word])] - (fn [] - (let [input-word (rf/sub [:keycard-recovery-phrase-input-word]) - error (rf/sub [:keycard-recovery-phrase-confirm-error]) - {:keys [idx]} word] - [react/keyboard-avoiding-view - {:style styles/container - :ignore-offset true} - [topbar/topbar - {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) - :accessibility-label :cancel-keycard-setup - :label (i18n/label :t/cancel)} - :title (i18n/label :t/step-i-of-n - {:step "3" - :number "3"})}] - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-recovery-phrase-confirm-header)]] - [react/view - {:margin-top 16 - :align-items :center} - [react/text - {:style {:typography :header - :color colors/gray - :text-align :center} - :accessibility-label :word-number} - - (i18n/label :t/word-n {:number (inc idx)})]]] - [react/view - {:flex 1 - :padding 16 - :justify-content :center} - [quo/text-input - {:on-change-text #(re-frame/dispatch - [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %]) - :auto-focus true - :on-submit-editing #(re-frame/dispatch - [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted]) - :placeholder (i18n/label :t/word-n {:number (inc idx)}) - :auto-correct false - :accessibility-label :enter-word - :monospace true}] - [react/view - {:margin-top 5 - :width 250} - [tooltip/tooltip error]]] - [bottom-toolbar/toolbar - {:right - [quo/button - {:on-press #(re-frame/dispatch - [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed]) - :accessibility-label :next - :disabled (empty? input-word) - :type :secondary - :after :main-icon/next} - (i18n/label :t/next)]}]]])))) diff --git a/src/legacy/status_im/ui/screens/keycard/pairing/views.cljs b/src/legacy/status_im/ui/screens/keycard/pairing/views.cljs deleted file mode 100644 index 4f0dde219f..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/pairing/views.cljs +++ /dev/null @@ -1,103 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.pairing.views - (:require - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.toolbar :as toolbar] - [re-frame.core :as re-frame] - [react-native.core :as rn] - [reagent.core :as reagent] - [utils.i18n :as i18n] - [utils.security.core :as security])) - -(defn validate-pairing-code - [pairing-code] - (>= (count pairing-code) 1)) - -(defn confirm-pairing-code - [pairing-code confirm] - (= pairing-code confirm)) - -(defn change-pairing-code - [] - (let [pairing-code (reagent/atom nil) - confirm (reagent/atom nil) - show-error (reagent/atom nil) - confirm-ref (atom nil)] - (fn [] - (let [valid-pairing-code (validate-pairing-code @pairing-code) - valid-form (confirm-pairing-code @pairing-code @confirm) - on-submit (fn [] - (if (and valid-pairing-code valid-form) - (do (reset! show-error false) - (re-frame/dispatch [:keycard/change-pairing-code @pairing-code])) - (reset! show-error true)))] - [rn/keyboard-avoiding-view {:flex 1} - [rn/scroll-view {:style {:flex 1}} - [rn/view - {:style {:flex 1 - :justify-content :space-between - :padding-vertical 16 - :padding-horizontal 16}} - - [rn/view - [quo/text - {:weight :bold - :align :center - :size :x-large} - (i18n/label :t/change-pairing-title)]] - [rn/view - [rn/view {:style {:padding 16}} - [quo/text-input - {:secure-text-entry true - :auto-capitalize :none - :auto-focus true - :show-cancel false - :accessibility-label :password-input - :placeholder (i18n/label :t/pairing-code-placeholder) - :on-change-text #(reset! pairing-code (security/mask-data %)) - :return-key-type :next - :on-submit-editing #(when valid-pairing-code - (some-> ^js @confirm-ref - .focus))}]] - [rn/view - {:style {:padding 16 - :opacity (if-not valid-pairing-code 0.33 1)}} - [quo/text-input - {:secure-text-entry true - :get-ref #(reset! confirm-ref %) - :auto-capitalize :none - :show-cancel false - :accessibility-label :password-input - :editable valid-pairing-code - :placeholder (i18n/label :t/confirm-pairing-code-placeholder) - :return-key-type :go - :error (when @show-error (i18n/label :t/pairing-code_error1)) - :blur-on-submit true - :on-focus #(reset! show-error false) - :on-submit-editing on-submit - :on-change-text #(do - (reset! confirm (security/mask-data %)) - (cond - (> (count @pairing-code) (count @confirm)) - (reset! show-error false) - - (not (confirm-pairing-code @pairing-code @confirm)) - (reset! show-error true) - - :else (reset! show-error false)))}]]] - [rn/view - [quo/text - {:color :secondary - :align :center - :size :small} - (i18n/label :t/change-pairing-description)]]]] - [toolbar/toolbar - {:show-border? true - :right [quo/button - {:on-press on-submit - :accessibility-label :onboarding-next-button - :disabled (or (nil? @confirm) - (not valid-pairing-code) - (not valid-form)) - :type :secondary - :after :main-icons/next} - (i18n/label :t/change-pairing)]}]])))) diff --git a/src/legacy/status_im/ui/screens/keycard/pin/styles.cljs b/src/legacy/status_im/ui/screens/keycard/pin/styles.cljs deleted file mode 100644 index aceed4aa11..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/pin/styles.cljs +++ /dev/null @@ -1,121 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.pin.styles - (:require - [legacy.status-im.ui.components.colors :as colors])) - -(def pin-container - {:flex 1 - :flex-direction :column - :justify-content :space-between}) - -(defn info-container - [small-screen?] - {:height 44 - :width "100%" - :justify-content :center - :margin-top (if small-screen? 14 10)}) - -(defn error-container - [y-translation opacity] - {:left 0 - :right 0 - :align-items :center - :position :absolute - :transform [{:translateY y-translation}] - :opacity opacity - :justify-content :center}) - -(defn error-text - [small-screen?] - {:position :absolute - :color colors/red - :font-size (if small-screen? 12 15) - :text-align :center}) - -(defn retry-container - [y-translation opacity] - {:left 0 - :right 0 - :align-items :center - :position :absolute - :transform [{:translateY y-translation}] - :opacity opacity - :justify-content :center}) - -(defn center-container - [title] - {:flex-direction :column - :align-items :center - :margin-top (if title 20 5)}) - -(def center-title-text - {:typography :header}) - -(def create-pin-text - {:padding-top 8 - :width 314 - :text-align :center - :color colors/gray}) - -(def pin-indicator-container - {:flex-direction :row - :justify-content :space-between - :align-items :center - :height 22 - :margin-top 5}) - -(defn pin-indicator - [pressed? error?] - {:width 8 - :height 8 - :background-color (if error? - colors/red - (if pressed? - colors/blue - colors/black-transparent)) - :border-radius 50 - :margin-horizontal 5}) - -(defn puk-indicator - [error?] - {:width 8 - :height 8 - :background-color (if error? - colors/red - colors/black-transparent) - :border-radius 50 - :margin-horizontal 5}) - -(def numpad-container - {:margin-top 18}) - -(defn numpad-row-container - [small-screen?] - {:flex-direction :row - :justify-content :center - :align-items :center - :margin-vertical (if small-screen? 4 10)}) - -(defn numpad-button - [small-screen?] - {:width (if small-screen? 50 64) - :margin-horizontal (if small-screen? 10 14) - :height (if small-screen? 50 64) - :align-items :center - :justify-content :center - :flex-direction :row - :border-radius (/ (if small-screen? 50 64) 2) - :background-color colors/blue-light}) - -(defn numpad-delete-button - [small-screen?] - (assoc (numpad-button small-screen?) :background-color colors/white)) - -(defn numpad-empty-button - [small-screen?] - (assoc (numpad-button small-screen?) - :background-color colors/white - :border-color colors/white)) - -(def numpad-button-text - {:font-size 22 - :color colors/blue}) diff --git a/src/legacy/status_im/ui/screens/keycard/pin/views.cljs b/src/legacy/status_im/ui/screens/keycard/pin/views.cljs deleted file mode 100644 index 598951959f..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/pin/views.cljs +++ /dev/null @@ -1,289 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.pin.views - (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]]) - (:require - [legacy.status-im.ui.components.animation :as animation] - [legacy.status-im.ui.components.checkbox.view :as checkbox] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.pin.styles :as styles] - [re-frame.core :as re-frame] - [react-native.platform :as platform] - [reagent.core :as reagent] - [utils.i18n :as i18n])) - -(def default-pin-retries-number 3) -(def default-puk-retries-number 5) - -(defn numpad-button - [n step enabled? small-screen?] - [react/touchable-highlight - {:on-press #(when enabled? - (re-frame/dispatch [:keycard.ui/pin-numpad-button-pressed n step])) - :accessibility-label (str "numpad-button-" n)} - [react/view (styles/numpad-button small-screen?) - [react/text {:style styles/numpad-button-text} - n]]]) - -(defn numpad-row - [[a b c] step enabled? small-screen?] - [react/view (styles/numpad-row-container small-screen?) - [numpad-button a step enabled? small-screen?] - [numpad-button b step enabled? small-screen?] - [numpad-button c step enabled? small-screen?]]) - -(defn numpad - [step enabled? small-screen?] - [react/view styles/numpad-container - [numpad-row [1 2 3] step enabled? small-screen?] - [numpad-row [4 5 6] step enabled? small-screen?] - [numpad-row [7 8 9] step enabled? small-screen?] - [react/view (styles/numpad-row-container small-screen?) - [react/view (styles/numpad-empty-button small-screen?)] - [numpad-button 0 step enabled? small-screen?] - [react/touchable-highlight - {:on-press #(when enabled? - (re-frame/dispatch [:keycard.ui/pin-numpad-delete-button-pressed step]))} - [react/view (styles/numpad-delete-button small-screen?) - [icons/icon :main-icons/backspace {:color colors/blue}]]]]]) - -(defn pin-indicators - [pin error?] - [react/view styles/pin-indicator-container - (map-indexed - (fn [i n] - (let [pressed? (number? n)] - ^{:key i} [react/view (styles/pin-indicator pressed? error?)])) - (concat pin (repeat (- 6 (count pin)) nil)))]) - -(defn puk-indicators - [puk error?] - [react/view - {:margin-top 28 - :flex-direction :row - :justify-content :space-between} - (map-indexed - (fn [i puk-group] - ^{:key i} - [react/view - (merge styles/pin-indicator-container - {:margin-top 8 - :margin 12}) - (map-indexed - (fn [j n] - (if (number? n) - ^{:key j} - [react/text - {:style {:font-size 20 - :width 18 - :color (if error? - colors/red - colors/black)}} - n] - ^{:key j} [react/view (styles/puk-indicator error?)])) - puk-group)]) - (partition 4 - (concat puk - (repeat (- 12 (count puk)) - nil))))]) - -(defn save-password - [] - (let [{:keys [save-password?]} @(re-frame/subscribe [:profile/login]) - auth-method @(re-frame/subscribe [:auth-method])] - (when-not (and platform/android? (not auth-method)) - [react/view - {:style {:flex-direction :row}} - [checkbox/checkbox - {:checked? save-password? - :style {:margin-right 10}}] - ;; should be reimplemented - ;;:on-value-change #(re-frame/dispatch [:multiaccounts/save-password %])}] - [react/text (i18n/label :t/keycard-dont-ask-card)]]))) - -(defn bezier-easing - [] - (.bezier ^js animation/easing 0.77 0.000 0.175 1)) - -(defn animate-info-in - "animation that makes the error message appear for a few seconds, then - replaces it with the number of attempts left" - [error-y-translation error-opacity retries-y-translation retries-opacity] - (animation/start - (animation/anim-sequence - [(animation/parallel - [(animation/timing error-opacity - {:toValue 1 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true}) - (animation/timing error-y-translation - {:toValue 0 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true})]) - (animation/anim-delay 2200) - (animation/parallel - [(animation/timing error-opacity - {:toValue 0 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true}) - (animation/timing error-y-translation - {:toValue 8 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true}) - (animation/timing retries-opacity - {:toValue 1 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true}) - (animation/timing retries-y-translation - {:toValue 0 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true})])]))) - -(defn animate-info-out - [retries-y-translation retries-opacity] - (animation/start - (animation/parallel - [(animation/timing retries-opacity - {:toValue 0 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true}) - (animation/timing retries-y-translation - {:toValue -8 - :easing (bezier-easing) - :duration 400 - :useNativeDriver true})]))) - -(defn pin-view - [{:keys [retry-counter]}] - (let [error-y-translation (animation/create-value -8) - error-opacity (animation/create-value 0) - retries-y-translation (animation/create-value (if retry-counter 0 -8)) - retries-opacity (animation/create-value (if retry-counter 1 0)) - !error? (reagent/atom false)] - (reagent/create-class - {:component-did-update - (fn [this [_ previous-props]] - (let [[_ props] (.-argv (.-props ^js this)) - previous-status (:status previous-props) - new-status (:status props)] - (case new-status - :error (when (or (nil? previous-status) - (= :verifying previous-status)) - (reset! !error? true) - (animate-info-in error-y-translation - error-opacity - retries-y-translation - retries-opacity) - (js/setTimeout (fn [] (reset! !error? false)) 3000)) - :verifying (do - (animation/set-value error-y-translation -8) - (animate-info-out retries-y-translation - retries-opacity)) - nil))) - :reagent-render - (fn [{:keys [pin title-label description-label step error-label status - retry-counter small-screen? save-password-checkbox?]}] - (let [enabled? (and (not= status :verifying) - (not @!error?)) - puk? (or (= step :puk) (= step :puk-original) (= step :puk-confirmation))] - [react/scroll-view - [react/view styles/pin-container - [react/view (styles/center-container title-label) - (when title-label - [react/text {:style styles/center-title-text} - (i18n/label title-label)]) - (when description-label - [react/text - {:style styles/create-pin-text - :number-of-lines 2} - (i18n/label description-label)]) - (when save-password-checkbox? - [save-password]) - [react/view {:style (styles/info-container small-screen?)} - (when error-label - [react/animated-view {:style (styles/error-container error-y-translation error-opacity)} - [react/text {:style (styles/error-text small-screen?)} - (i18n/label error-label)]]) - [react/animated-view - {:style (styles/retry-container retries-y-translation retries-opacity)} - (cond - (and retry-counter (= retry-counter 1)) - [react/nested-text - {:style {:text-align :center - :color colors/gray}} - (i18n/label (if puk? - :t/pin-one-attempt-blocked-before - :t/pin-one-attempt-frozen-before)) - [{:style {:color colors/black - :font-weight "700"}} - (i18n/label :t/pin-one-attempt)] - (i18n/label (if puk? - :t/pin-one-attempt-blocked-after - :t/pin-one-attempt-frozen-after))] - - (and retry-counter - (< retry-counter - (if puk? - default-puk-retries-number - default-pin-retries-number))) - [react/text - {:style {:text-align :center - :color colors/gray}} - (i18n/label :t/pin-retries-left {:number retry-counter})] - :else - nil)]] - (if puk? - [puk-indicators pin @!error?] - [pin-indicators pin @!error?]) - [numpad step enabled? small-screen?]]]]))}))) - -(def pin-retries 3) -(def puk-retries 5) - -(defview enter-pin - [] - (letsubs [pin [:keycard/pin] - step [:keycard/pin-enter-step] - status [:keycard/pin-status] - pin-retry-counter [:keycard/pin-retry-counter] - puk-retry-counter [:keycard/puk-retry-counter] - error-label [:keycard/pin-error-label]] - (let [;; TODO(rasom): retarded hack to prevent state mess on opening pin - ;; sheet on another tab and returning back to this screen. Should be - ;; properly rewritten so that different instances of pin-view do not - ;; mess with state unrelated to them. - step (or step :current)] - [pin-view - {:pin pin - :retry-counter (if (= step :puk) - (when (< puk-retry-counter puk-retries) puk-retry-counter) - (when (< pin-retry-counter pin-retries) pin-retry-counter)) - :title-label (case step - :current :t/current-pin - :login :t/current-pin - :import-multiaccount :t/current-pin - :original :t/create-a-pin - :confirmation :t/repeat-pin - :puk :t/enter-puk-code - :puk-original :t/create-a-puk - :puk-confirmation :t/repeat-puk - :t/current-pin) - :description-label (case step - :current :t/current-pin-description - :sign :t/current-pin-description - :import-multiaccount :t/current-pin-description - :login :t/login-pin-description - :puk :t/enter-puk-code-description - :puk-original :t/new-puk-description - :puk-confirmation :t/new-puk-description - :t/new-pin-description) - :step step - :status status - :error-label error-label}]))) diff --git a/src/legacy/status_im/ui/screens/keycard/recovery/views.cljs b/src/legacy/status_im/ui/screens/keycard/recovery/views.cljs deleted file mode 100644 index bc4aadcd2a..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/recovery/views.cljs +++ /dev/null @@ -1,281 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.recovery.views - (:require - [legacy.status-im.keycard.recovery :as keycard.recovery] - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.components.toolbar :as bottom-toolbar] - [legacy.status-im.ui.components.tooltip.views :as tooltip] - [legacy.status-im.ui.components.topbar :as topbar] - [legacy.status-im.ui.screens.keycard.pin.views :as pin.views] - [legacy.status-im.ui.screens.keycard.styles :as styles] - [legacy.status-im.ui.screens.keycard.views :as keycard.views] - [legacy.status-im.utils.core :as utils.core] - [re-frame.core :as re-frame] - [status-im.constants :as constants] - [utils.i18n :as i18n]) - (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]])) - -(defn intro - [] - [:<> - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - - [react/view - {:margin-top 16 - :width 311} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-recovery-intro-header)]] - - [react/view - {:margin-top 16 - :width 311} - [react/text - {:style {:font-size 15 - :line-height 22 - :color colors/gray - :text-align :center}} - (i18n/label :t/keycard-recovery-intro-text)]] - - [react/view {:margin-top 33} - [react/touchable-highlight - {:on-press #(.openURL ^js react/linking - constants/keycard-integration-link)} - [react/view - {:flex-direction :row - :align-items :center - :justify-content :center} - [react/text - {:style {:text-align :center - :color colors/blue}} - (i18n/label :t/learn-more-about-keycard)] - [icons/tiny-icon :tiny-icons/tiny-external - {:color colors/blue - :container-style {:margin-left 5}}]]]]] - - [react/view - {:align-items :center - :justify-content :center} - [react/image - {:source (resources/get-image :keycard) - :style {:width 144 - :height 114}}]] - - [react/view {:margin-bottom 50} - [quo/button - {:on-press #(re-frame/dispatch [:keycard.recovery.intro.ui/begin-recovery-pressed])} - (i18n/label :t/keycard-recovery-intro-button-text)]]]]) - -(defview pin - [] - (letsubs [card-pin [:keycard/pin] - status [:keycard/pin-status] - error-label [:keycard/pin-error-label] - small-screen? [:dimensions/small-screen?] - retry-counter [:keycard/retry-counter]] - [react/view styles/container - [topbar/topbar - {:navigation {:on-press #(re-frame/dispatch [::keycard.recovery/cancel-pressed]) - :label (i18n/label :t/cancel)} - :title (when-not (#{:frozen-card :blocked-card} status) - (i18n/label :t/step-i-of-n - {:number 2 - :step 2}))}] - (case status - :frozen-card - [keycard.views/frozen-card] - - :blocked-card - [keycard.views/blocked-card] - - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/enter-your-code)]]] - [pin.views/pin-view - {:pin card-pin - :retry-counter retry-counter - :small-screen? small-screen? - :status status - :error-label error-label - :step :import-multiaccount}]])])) - -(defview pair - [] - (letsubs [pair-code [:keycard-pair-code] - error [:keycard-setup-error] - {:keys [free-pairing-slots]} [:keycard-application-info]] - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/enter-pair-code)]] - [react/view - {:margin-top 16 - :width "85%" - :align-items :center} - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/enter-pair-code-description)]] - (when free-pairing-slots - [react/view - {:align-items :center - :margin-top 20} - [react/text - {:style {:text-align :center - :color (if (> 3 free-pairing-slots) colors/red colors/gray)}} - (i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])] - [react/view - [react/view - {:padding 16 - :justify-content :center - :margin-bottom 100} - [quo/text-input - {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) - :auto-focus true - :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) - :placeholder (i18n/label :t/pair-code-placeholder) - :monospace true}]] - [react/view - {:margin-top 5 - :width 250} - [tooltip/tooltip error]]] - [bottom-toolbar/toolbar - {:right - [quo/button - {:on-press #(re-frame/dispatch [:keycard.onboarding.pair.ui/next-pressed]) - :disabled (empty? pair-code) - :type :secondary - :after :main-icon/next} - (i18n/label :t/pair-card)]}]])) - -(defview success - [] - (letsubs [address [:keycard-multiaccount-wallet-address] - whisper-public-key [:keycard-multiaccount-whisper-public-key]] - [react/view styles/container - [topbar/topbar {:navigation :none}] - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-recovery-success-header)]]] - [react/view - {:flex-direction :column - :flex 1 - :justify-content :center - :align-items :center} - [react/view - {:margin-horizontal 16 - :flex-direction :column} - [react/text - {:style {:text-align :center - :color colors/black - :font-weight "500"} - :number-of-lines 1 - :ellipsize-mode :middle} - whisper-public-key] - [quo/text - {:style {:margin-top 4} - :monospace true - :align :center - :color :secondary - :number-of-lines 1 - :ellipsize-mode :middle} - (utils.core/truncate-str address 14 true)]]] - [react/view {:margin-bottom 50} - [quo/button {:on-press #(re-frame/dispatch [:keycard.recovery.success/finish-pressed])} - (i18n/label :t/finish)]]]])) - -(defview no-key - [] - (letsubs [card-state [:keycard-card-state]] - [react/view styles/container - [topbar/topbar {:navigation :none}] - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :align-items :center} - [react/view {:margin-top 16} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/keycard-recovery-no-key-header)]] - [react/view - {:margin-top 16 - :width "85%" - :align-items :center} - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/keycard-recovery-no-key-text)]]] - [react/view - {:flex-direction :column - :flex 1 - :justify-content :center - :align-items :center} - [react/view - {:margin-horizontal 16 - :flex-direction :column} - [react/view - {:align-items :center - :justify-content :center} - (if (= card-state :init) - [react/image - {:source (resources/get-image :keycard) - :style {:width 144 - :height 114}}] - [react/image - {:source (resources/get-image :keycard-empty) - :style {:width 165 - :height 110}}])]]] - [react/view {:margin-bottom 50} - [quo/button - {:test-id :generate-new-key - :on-press #(re-frame/dispatch [:keycard.recovery.no-key.ui/generate-key-pressed])} - (i18n/label :t/generate-new-key)] - [quo/button - {:type :secondary - :on-press #(re-frame/dispatch [:navigate-back])} - (i18n/label :t/cancel)]]]])) diff --git a/src/legacy/status_im/ui/screens/keycard/settings/views.cljs b/src/legacy/status_im/ui/screens/keycard/settings/views.cljs deleted file mode 100644 index e453e614bf..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/settings/views.cljs +++ /dev/null @@ -1,143 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.settings.views - (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]]) - (:require - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.list.item :as list.item] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.views :as keycard.views] - [re-frame.core :as re-frame] - [status-im.constants :as constants] - [utils.i18n :as i18n])) - -(defn- activity-indicator - [loading?] - (when loading? - [react/view {:margin-top 35} - [react/activity-indicator - {:animating true - :size :large}]])) - -(defn- reset-card-next-button - [disabled?] - [react/view - {:margin-right 6 - :margin-bottom 8} - [quo/button - ;; TODO: Should have label?: - {:on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed]) - :disabled disabled? - :type :secondary - :after :main-icon/next}]]) - -(defview reset-card - [] - (letsubs [disabled? [:keycard-reset-card-disabled?]] - [:<> - [react/view - {:margin-top 71 - :flex 1 - :align-items :center} - [react/image - {:source (resources/get-image :warning-sign) - :style {:width 160 - :height 160}}]] - [react/view - {:flex 1 - :padding-horizontal 30} - [react/text - {:style {:typography :header - :text-align :center}} - (i18n/label :t/reset-card-description)] - [activity-indicator disabled?]] - [react/view - {:flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :height 68 - :border-top-width 1 - :border-color colors/black-transparent} - [react/view {:flex 1}] - [reset-card-next-button disabled?]]])) - -(defn- card-blocked - [] - [react/view - [react/text - {:style {:font-size 20 - :text-align :center - :padding-horizontal 40}} - (i18n/label :t/keycard-blocked)]]) - -(defview keycard-settings - [] - (letsubs [paired-on [:keycard-paired-on] - puk-retry-counter [:keycard/puk-retry-counter] - pairing [:keycard-multiaccount-pairing]] - [react/scroll-view {:flex 1} - [react/view - {:margin-top 47 - :align-items :center} - [react/image - {:source (resources/get-image :keycard-card) - :style {:width 255 - :height 160}}] - (when paired-on - [react/view {:margin-top 27} - [react/text - (i18n/label :t/linked-on {:date paired-on})]])] - [react/view {:padding-vertical 16} - (if (zero? puk-retry-counter) - [card-blocked] - [:<> - [list.item/list-item - {:icon :main-icons/help - :size :small - :title (i18n/label :t/help-capitalized) - :on-press #(.openURL ^js react/linking - constants/faq-keycard)}] - (when pairing - [:<> - [list.item/list-item - {:icon :main-icons/add - :size :small - :title (i18n/label :t/change-pin) - :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed :pin])}] - [list.item/list-item - {:icon :main-icons/security - :size :small - :title (i18n/label :t/change-puk) - :accessibility-label "change-puk" - :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed - :puk])}] - [list.item/list-item - {:icon :main-icons/password - :size :small - :title (i18n/label :t/change-pairing) - :accessibility-label "change-pairing" - :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed - :pairing])}] - [list.item/list-item - {:icon :main-icons/keycard - :size :small - :title (i18n/label :t/keycard-backup) - :accessibility-label "create-backup-keycard" - :on-press #(re-frame/dispatch [:keycard-settings.ui/backup-card-pressed - :backup-card])}] - ;; TODO(rasom): uncomment this when unpairing will be enabled - ;; https://github.com/status-im/status-mobile/issues/9227 - #_[list/list-item - {:icon :main-icons/close - :size :small - :title (i18n/label :t/unpair-card) - :on-press #(re-frame/dispatch [:keycard-settings.ui/unpair-card-pressed])}]])])]])) - -(defn reset-pin - [] - [keycard.views/login-pin - {:back-button-handler - :navigate-back - :hide-login-actions? true - :default-enter-step :reset}]) diff --git a/src/legacy/status_im/ui/screens/keycard/styles.cljs b/src/legacy/status_im/ui/screens/keycard/styles.cljs deleted file mode 100644 index 1e23350f1e..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/styles.cljs +++ /dev/null @@ -1,5 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.styles) - -(def container - {:flex 1 - :justify-content :space-between}) diff --git a/src/legacy/status_im/ui/screens/keycard/views.cljs b/src/legacy/status_im/ui/screens/keycard/views.cljs deleted file mode 100644 index b53004a54f..0000000000 --- a/src/legacy/status_im/ui/screens/keycard/views.cljs +++ /dev/null @@ -1,461 +0,0 @@ -(ns legacy.status-im.ui.screens.keycard.views - (:require - [clojure.string :as string] - [legacy.status-im.bottom-sheet.events :as bottom-sheet] - [legacy.status-im.keycard.login :as keycard.login] - [legacy.status-im.react-native.resources :as resources] - [legacy.status-im.ui.components.colors :as colors] - [legacy.status-im.ui.components.core :as quo] - [legacy.status-im.ui.components.icons.icons :as icons] - [legacy.status-im.ui.components.list.item :as list.item] - [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.components.toolbar :as toolbar] - [legacy.status-im.ui.components.topbar :as topbar] - [legacy.status-im.ui.screens.chat.photos :as photos] - [legacy.status-im.ui.screens.keycard.frozen-card.view :as frozen-card.view] - [legacy.status-im.ui.screens.keycard.pin.views :as pin.views] - [legacy.status-im.ui.screens.keycard.styles :as styles] - [re-frame.core :as re-frame] - [reagent.core :as reagent] - [status-im.constants :as constants] - [status-im.contexts.profile.utils :as profile.utils] - [status-im.navigation.events :as navigation] - [utils.i18n :as i18n] - [utils.re-frame :as rf]) - (:require-macros [legacy.status-im.utils.views :refer [defview letsubs]])) - -;; NOTE(Ferossgp): Seems like it should be in popover -(defn blank - [] - [react/view - {:flex 1 - :justify-content :center - :align-items :center - :background-color colors/gray-transparent-40} - [react/view - {:background-color colors/white - :height 433 - :width "85%" - :border-radius 16 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:margin-top 32 - :padding-horizontal 34} - [react/text - {:style {:typography :title-bold - :text-align :center}} - (i18n/label :t/blank-keycard-title)] - [react/view {:margin-top 16} - [react/text - {:style {:color colors/gray - :line-height 22 - :text-align :center}} - (i18n/label :t/blank-keycard-text)]]] - [react/view - [react/image - {:source (resources/get-image :keycard) - :resize-mode :center - :style {:width 144 - :height 114}}]] - [react/view {:margin-bottom 32} - [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} - (i18n/label :t/ok-got-it)]]]]) - -;; NOTE(Ferossgp): Seems like it should be in popover -(defn wrong - [] - [react/view - {:flex 1 - :justify-content :center - :align-items :center - :background-color colors/gray-transparent-40} - [react/view - {:background-color colors/white - :height 413 - :width "85%" - :border-radius 16 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:margin-top 32 - :padding-horizontal 34} - [react/text - {:style {:typography :title-bold - :text-align :center}} - (i18n/label :t/wrong-keycard-title)] - [react/view {:margin-top 16} - [react/text - {:style {:color colors/gray - :line-height 22 - :text-align :center}} - (i18n/label :t/wrong-keycard-text)]]] - [react/view - [react/image - {:source (resources/get-image :keycard-wrong) - :style {:width 255 - :height 124}}]] - [react/view {:margin-bottom 32} - [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} - (i18n/label :t/ok-got-it)]]]]) - -(defn unpaired - [] - [react/view - {:flex 1 - :justify-content :center - :align-items :center - :background-color colors/gray-transparent-40} - [react/view - {:background-color colors/white - :height 433 - :width "85%" - :border-radius 16 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:margin-top 32 - :padding-horizontal 34} - [react/text - {:style {:typography :title-bold - :text-align :center}} - (i18n/label :t/unpaired-keycard-title)] - [react/view {:margin-top 16} - [react/text - {:style {:color colors/gray - :line-height 22 - :text-align :center}} - (i18n/label :t/unpaired-keycard-text)]]] - [react/view - [react/image - {:source (resources/get-image :keycard-wrong) - :style {:width 255 - :height 124}}]] - [react/view - {:margin-bottom 32 - :flex-direction :column - :align-items :center} - [quo/button - {:on-press #(re-frame/dispatch [:keycard.login.ui/pair-card-pressed])} - (i18n/label :t/pair-this-card)] - [react/view {:margin-top 27} - [quo/button - {:type :secondary - :on-press #(re-frame/dispatch [:navigate-back])} - (i18n/label :t/dismiss)]]]]]) - -;; NOTE(Ferossgp): Seems like it should be in popover -(defn not-keycard - [] - [react/view - {:flex 1 - :justify-content :center - :align-items :center - :background-color colors/gray-transparent-40} - [react/view - {:background-color colors/white - :height 453 - :width "85%" - :border-radius 16 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view {:margin-top 32} - [react/text - {:style {:typography :title-bold - :text-align :center}} - (i18n/label :t/not-keycard-title)] - [react/view - {:margin-top 16 - :padding-horizontal 38} - [react/text - {:style {:color colors/gray - :line-height 22 - :text-align :center}} - (i18n/label :t/not-keycard-text)]]] - [react/view - {:margin-top 16 - :align-items :center} - [react/image - {:source (resources/get-image :not-keycard) - :style {:width 144 - :height 120}}] - [react/view {:margin-top 40} - [react/touchable-highlight - {:on-press #(.openURL ^js react/linking - constants/keycard-integration-link)} - [react/view - {:flex-direction :row - :align-items :center - :justify-content :center} - [react/text - {:style {:text-align :center - :color colors/blue}} - (i18n/label :t/learn-more-about-keycard)] - [icons/tiny-icon :tiny-icons/tiny-external - {:color colors/blue - :container-style {:margin-left 5}}]]]]] - [react/view {:margin-bottom 32} - [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} - (i18n/label :t/ok-got-it)]]]]) - -(defn photo - [_ _] - (reagent/create-class - {:should-component-update - (fn [_ [_ _] [_ new-account]] - (not (nil? new-account))) - - :reagent-render - (fn [account small-screen?] - ;;TODO this should be done in a subscription - [photos/photo (profile.utils/photo account) - {:size (if small-screen? 45 61)}])})) - -(defn access-is-reset - [{:keys [hide-login-actions?]}] - [react/view - {:style {:flex 1 - :align-items :center}} - [react/view - {:style {:flex 1 - :align-items :center - :justify-content :center}} - [react/view - {:style - {:background-color colors/green-transparent-10 - :margin-bottom 32 - :width 40 - :height 40 - :align-items :center - :justify-content :center - :border-radius 20}} - [icons/icon - :main-icons/check - {:color colors/green}]] - [react/text {:style {:typography :header}} - (i18n/label :t/keycard-access-reset)] - [react/text (i18n/label :t/keycard-can-use-with-new-passcode)]] - (when-not hide-login-actions? - [react/view - {:style {:width 260 - :margin-bottom 15}} - [react/view - {:align-items :center - :padding-horizontal 32} - [quo/button - {:on-press #(re-frame/dispatch - [::keycard.login/login-after-reset])} - (i18n/label :t/open)]]])]) - -(defn frozen-card - [] - [frozen-card.view/frozen-card - {:show-dismiss-button? false}]) - -(defn blocked-card - [{:keys [show-dismiss-button?]}] - [react/view - {:style (when-not show-dismiss-button? - {:flex 1})} - [react/view - {:margin-top 24 - :margin-horizontal 24 - :align-items :center} - [react/view - {:background-color colors/red-transparent-10 - :width 32 - :height 32 - :border-radius 16 - :align-items :center - :justify-content :center} - [icons/icon - :main-icons/cancel - {:color colors/red - :width 20 - :height 20}]] - [react/text - {:style {:typography :title-bold - :margin-top 16 - :margin-bottom 8}} - (i18n/label :t/keycard-is-blocked-title)] - [react/text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/keycard-is-blocked-details)] - [react/text "\n"] - [react/nested-text - {:style {:color colors/gray - :text-align :center}} - (i18n/label :t/keycard-is-blocked-instructions)] - [react/view {:style {:margin-top 24}} - [quo/button - {:on-press #(re-frame/dispatch [:keycard-settings.ui/recovery-card-pressed false])} - (i18n/label :t/keycard-is-frozen-factory-reset)]] - (when show-dismiss-button? - [react/view - {:margin-top 24 - :margin-bottom 24} - [quo/button - {:on-press #(re-frame/dispatch [::keycard.login/frozen-keycard-popover-dismissed]) - :type :secondary} - (i18n/label :t/dismiss)]])]]) - -(defn blocked-card-popover - [] - [blocked-card {:show-dismiss-button? true}]) - -(defview login-pin - [{:keys [back-button-handler - hide-login-actions? - default-enter-step] - :or {default-enter-step :login}}] - (letsubs [pin [:keycard/pin] - enter-step [:keycard/pin-enter-step] - status [:keycard/pin-status] - error-label [:keycard/pin-error-label] - login-multiaccount [:profile/login] - multiaccount [:profile/profile] - small-screen? [:dimensions/small-screen?] - retry-counter [:keycard/retry-counter]] - (let [{:keys [name] :as account} (or login-multiaccount multiaccount) - ;; TODO(rasom): this hack fixes state mess when more then two - ;; pin-view instances are used at the same time. Should be properly - ;; refactored instead - enter-step (or enter-step default-enter-step)] - [react/view styles/container - [topbar/topbar - (merge - (when-not hide-login-actions? - {:right-accessories [{:icon :main-icons/more - :on-press #(re-frame/dispatch - [:keycard.login.pin.ui/more-icon-pressed])}]}) - {:title (cond - (#{:reset :reset-confirmation} enter-step) - (i18n/label :t/keycard-reset-passcode) - - (and (= :puk enter-step) - (not= :blocked-card status)) - (i18n/label :t/enter-puk-code)) - :navigation {:on-press #(re-frame/dispatch - [(or back-button-handler - :keycard.login.pin.ui/cancel-pressed)])}} - (when (#{:reset :reset-confirmation} enter-step) - {:subtitle (i18n/label :t/keycard-enter-new-passcode - {:step (if (= :reset enter-step) 1 2)})}))] - [react/scroll-view {:style {:flex 1}} - [react/view - {:flex 1 - :flex-direction :column - :justify-content :space-between - :align-items :center} - [react/view - {:flex-direction :column - :justify-content :center - :align-items :center - :height 140} - [react/view - {:margin-horizontal 16 - :flex-direction :column} - [react/view - {:justify-content :center - :align-items :center - :flex-direction :row} - [react/view - {:width (if small-screen? 50 69) - :height (if small-screen? 50 69) - :justify-content :center - :align-items :center} - [photo account small-screen?] - [react/view - {:justify-content :center - :align-items :center - :width (if small-screen? 18 24) - :height (if small-screen? 18 24) - :border-radius (if small-screen? 18 24) - :position :absolute - :right 0 - :bottom 0 - :background-color colors/white - :border-width 1 - :border-color colors/black-transparent} - [react/image - {:source (resources/get-image :keycard-key) - :style {:width (if small-screen? 6 8) - :height (if small-screen? 11 14)}}]]]] - [react/text - {:style {:text-align :center - :margin-top (if small-screen? 8 12) - :color colors/black - :font-weight "500"} - :number-of-lines 1 - :ellipsize-mode :middle} - name]]] - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:keycard-settings.ui/recovery-card-pressed - (boolean login-multiaccount)])} - [react/view - {:flex-direction :row - :align-items :center - :justify-content :center} - [react/text - {:style {:text-align :center - :margin-bottom (if small-screen? 8 12) - :color colors/blue}} - (string/lower-case (i18n/label (if login-multiaccount - :t/keycard-recover - :t/keycard-is-frozen-factory-reset)))]]] - (cond - (= :after-unblocking status) - [access-is-reset - {:hide-login-actions? hide-login-actions?}] - - (= :frozen-card status) - [frozen-card] - - (= :blocked-card status) - [blocked-card] - - :else - [pin.views/pin-view - {:pin pin - :retry-counter retry-counter - :small-screen? small-screen? - :status status - :error-label error-label - :step enter-step - :save-password-checkbox? (not (contains? - #{:reset :reset-confirmation :puk} - enter-step))}]) - (if hide-login-actions? - [react/view - {:flex-direction :row - :height 32}] - [toolbar/toolbar - {:center [quo/button - {:on-press #(re-frame/dispatch - [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) - :type :secondary} - (i18n/label :t/recover-key)]}])]]]))) - -(rf/defn get-new-key - {:events [:multiaccounts.create.ui/get-new-key]} - [{:keys [db] :as cofx}] - (rf/merge cofx - (bottom-sheet/hide-bottom-sheet-old) - (navigation/navigate-to :get-your-keys nil))) - -(defn- more-sheet-content - [] - [react/view {:flex 1} - [list.item/list-item - {:theme :accent - :title (i18n/label :t/create-new-key) - :icon :main-icons/profile - :on-press #(re-frame/dispatch [:multiaccounts.create.ui/get-new-key])}]]) - -(def more-sheet - {:content more-sheet-content}) diff --git a/src/legacy/status_im/ui/screens/popover/views.cljs b/src/legacy/status_im/ui/screens/popover/views.cljs index 3872c333c8..20e433f238 100644 --- a/src/legacy/status_im/ui/screens/popover/views.cljs +++ b/src/legacy/status_im/ui/screens/popover/views.cljs @@ -5,8 +5,6 @@ [legacy.status-im.ui.components.animation :as anim] [legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.frozen-card.view :as frozen-card] - [legacy.status-im.ui.screens.keycard.views :as keycard.views] [legacy.status-im.ui.screens.profile.user.views :as profile.user] [legacy.status-im.ui.screens.reset-password.views :as reset-password.views] [legacy.status-im.ui.screens.signing.sheets :as signing-sheets] @@ -145,12 +143,6 @@ (= :transaction-data view) [signing/transaction-data] - (= :frozen-card view) - [frozen-card/frozen-card] - - (= :blocked-card view) - [keycard.views/blocked-card-popover] - (= :password-reset-popover view) [reset-password.views/reset-password-popover] diff --git a/src/legacy/status_im/ui/screens/screens.cljs b/src/legacy/status_im/ui/screens/screens.cljs index b8e22dd4f6..e1a68b8274 100644 --- a/src/legacy/status_im/ui/screens/screens.cljs +++ b/src/legacy/status_im/ui/screens/screens.cljs @@ -21,13 +21,6 @@ [legacy.status-im.ui.screens.glossary.view :as glossary] [legacy.status-im.ui.screens.group.views :as group-chat] [legacy.status-im.ui.screens.help-center.views :as help-center] - [legacy.status-im.ui.screens.keycard.authentication-method.views :as keycard.authentication] - [legacy.status-im.ui.screens.keycard.onboarding.views :as keycard.onboarding] - [legacy.status-im.ui.screens.keycard.pairing.views :as keycard.pairing] - [legacy.status-im.ui.screens.keycard.pin.views :as keycard.pin] - [legacy.status-im.ui.screens.keycard.recovery.views :as keycard.recovery] - [legacy.status-im.ui.screens.keycard.settings.views :as keycard.settings] - [legacy.status-im.ui.screens.keycard.views :as keycard] [legacy.status-im.ui.screens.link-previews-settings.views :as link-previews-settings] [legacy.status-im.ui.screens.log-level-settings.views :as log-level-settings] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] @@ -497,130 +490,6 @@ :top? true}} :component contact/profile-view} - ;KEYCARD - {:name :keycard-onboarding-intro - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.onboarding/intro} - {:name :keycard-onboarding-puk-code - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - ;;TODO dynamic - :component keycard.onboarding/puk-code} - {:name :keycard-onboarding-pin - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - ;;TODO dynamic - :component keycard.onboarding/pin} - {:name :keycard-recovery-pair - :options {:topBar {:title {:text (i18n/label :t/step-i-of-n {:number 2 :step 1})}} - :insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.recovery/pair} - - {:name :keycard-recovery-pin - ;;TODO dynamic - :options {:insets {:bottom? true - :top? true}} - :component keycard.recovery/pin} - {:name :keycard-wrong - ;;TODO move to popover? - :options {:insets {:bottom? true - :top? true}} - :component keycard/wrong} - {:name :not-keycard - :options {:insets {:bottom? true - :top? true}} - ;;TODO move to popover? - :component keycard/not-keycard} - {:name :keycard-onboarding-recovery-phrase - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.onboarding/recovery-phrase} - {:name :keycard-onboarding-recovery-phrase-confirm-word1 - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.onboarding/recovery-phrase-confirm-word} - {:name :keycard-onboarding-recovery-phrase-confirm-word2 - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.onboarding/recovery-phrase-confirm-word} - {:name :keycard-recovery-intro - :insets {:bottom? true} - :component keycard.recovery/intro} - {:name :keycard-recovery-success - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.recovery/success} - {:name :keycard-recovery-no-key - :options {:insets {:bottom? true - :top? true} - :popGesture false - :hardwareBackButton {:dismissModalOnPress false - :popStackOnPress false}} - :component keycard.recovery/no-key} - {:name :keycard-authentication-method - :options {:insets {:bottom? true - :top? true}} - :component keycard.authentication/keycard-authentication-method} - {:name :keycard-login-pin - :options {:insets {:bottom? true - :top? true}} - :component keycard/login-pin} - {:name :keycard-blank - :options {:insets {:bottom? true - :top? true}} - :component keycard/blank} - {:name :keycard-unpaired - :options {:insets {:bottom? true - :top? true}} - :component keycard/unpaired} - {:name :keycard-settings - :options {:topBar {:title {:text (i18n/label :t/status-keycard)}} - :insets {:bottom? true - :top? true}} - :component keycard.settings/keycard-settings} - {:name :reset-card - :options {:topBar {:title {:text (i18n/label :t/reset-card)}} - :insets {:bottom? true - :top? true}} - :component keycard.settings/reset-card} - {:name :keycard-pin - ;;TODO dynamic title - :options {:insets {:bottom? true - :top? true}} - :component keycard.settings/reset-pin} - {:name :enter-pin-settings - :insets {:bottom? true} - :component keycard.pin/enter-pin} - {:name :change-pairing-code - :insets {:bottom? true} - :component keycard.pairing/change-pairing-code} - ;; BUG REPORT {:name :bug-report :options {:insets {:top? true}} diff --git a/src/legacy/status_im/ui/screens/signing/views.cljs b/src/legacy/status_im/ui/screens/signing/views.cljs index 762d9b019b..9e8e345478 100644 --- a/src/legacy/status_im/ui/screens/signing/views.cljs +++ b/src/legacy/status_im/ui/screens/signing/views.cljs @@ -3,7 +3,6 @@ (:require [clojure.string :as string] [legacy.status-im.ethereum.tokens :as tokens] - [legacy.status-im.keycard.common :as keycard.common] [legacy.status-im.react-native.resources :as resources] [legacy.status-im.signing.eip1559 :as eip1559] [legacy.status-im.ui.components.bottom-panel.views :as bottom-panel] @@ -14,8 +13,6 @@ [legacy.status-im.ui.components.icons.icons :as icons] [legacy.status-im.ui.components.list.item :as list.item] [legacy.status-im.ui.components.react :as react] - [legacy.status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] - [legacy.status-im.ui.screens.keycard.pin.views :as pin.views] [legacy.status-im.ui.screens.signing.sheets :as sheets] [legacy.status-im.ui.screens.signing.styles :as styles] [legacy.status-im.ui.screens.wallet.components.views :as wallet.components] @@ -23,7 +20,6 @@ [legacy.status-im.utils.utils :as utils] [legacy.status-im.wallet.utils :as wallet.utils] [re-frame.core :as re-frame] - [react-native.platform :as platform] [reagent.core :as reagent] [status-im.contexts.profile.utils :as profile.utils] [utils.i18n :as i18n] @@ -106,25 +102,6 @@ (when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])})) (i18n/label :t/cancel)]]]) -(views/defview keycard-pin-view - [] - (views/letsubs [pin [:keycard/pin] - small-screen? [:dimensions/small-screen?] - error-label [:keycard/pin-error-label] - enter-step [:keycard/pin-enter-step] - status [:keycard/pin-status] - retry-counter [:keycard/retry-counter]] - (let [enter-step (or enter-step :sign) - margin-bottom (if platform/ios? 40 0)] - [react/view {:margin-bottom margin-bottom} - [pin.views/pin-view - {:pin pin - :retry-counter retry-counter - :step enter-step - :small-screen? small-screen? - :status status - :error-label error-label}]]))) - (defn sign-with-keycard-button [amount-error gas-error] (let [disabled? (or amount-error gas-error)] @@ -150,126 +127,11 @@ [react/text phrase]]) (defn- keycard-view - [{:keys [keycard-step]} phrase] + [_ phrase] [react/view [signing-phrase-view phrase] - (case keycard-step - :pin [keycard-pin-view] - [react/view {:align-items :center :margin-top 16 :margin-bottom 40} - [sign-with-keycard-button nil nil]])]) - -(defn redeem-tx-header - [account receiver small-screen?] - (fn [] - [react/view {:style {:align-self :stretch :margin-top 30}} - [separator] - [react/view - {:style {:flex-direction :row - :justify-content :space-between - :align-items :center - :padding-left 16 - :margin-vertical 8}} - [react/text {:style {:flex 2 :margin-right 16}} (i18n/label :t/keycard-redeem-title)] - [react/text - {:number-of-lines 1 - :ellipsize-mode :middle - :style {:padding-left 16 - :color colors/gray - :flex 3}} - (if account (:name account) receiver)] - (when account - [react/view {:style {:flex 1 :padding-left 8}} - [chat-icon/custom-icon-view-list (:name account) (:color account) (if small-screen? 20 32)]])] - [separator]])) - -(defn signature-request-header - [amount currency small-screen? fiat-amount fiat-currency] - (fn [] - [react/view {:style {:align-self :stretch :margin-vertical 30}} - [react/nested-text - {:style {:font-weight "500" - :font-size (if small-screen? 34 44) - :text-align :center}} - (str amount " ") - [{:style {:color colors/gray}} currency]] - [react/text - {:style {:font-size 19 - :text-align :center - :margin-bottom 16}} - (str fiat-amount " " fiat-currency)] - [separator]])) - -(defn terminal-button - [{:keys [on-press theme disabled? height]} label] - [react/touchable-opacity - {:disabled disabled? - :on-press on-press - :style {:height height - :border-radius 16 - :flex 1 - :justify-content :center - :align-items :center - :background-color (if (= theme :negative) - colors/red-transparent-10 - colors/blue-light)}} - [quo/text - {:size :large - :number-of-lines 1 - :color (if (= theme :negative) - :negative - :link) - :weight :medium} - label]]) - -(defn signature-request-footer - [keycard-step small-screen?] - (fn [] - [react/view {:style {:padding 16 :align-items :center}} - [react/view {:style {:flex-direction :row}} - [terminal-button - {:disabled? (= keycard-step :success) - :height (if small-screen? 52 64) - :on-press #(re-frame/dispatch [:show-popover {:view :transaction-data}])} - (i18n/label :t/show-transaction-data)]]])) - -(defn signature-request - [{:keys [formatted-data account fiat-amount fiat-currency keycard-step]} - connected? - small-screen?] - (let [message (:message formatted-data)] - [react/view (assoc (styles/message) :padding-vertical 16) - [keycard-sheet/connect-keycard - {:on-connect ::keycard.common/on-card-connected - :on-disconnect ::keycard.common/on-card-disconnected - :connected? connected? - :on-cancel #(re-frame/dispatch [:signing.ui/cancel-is-pressed]) - :params - (cond - (:receiver message) {:title (i18n/label :t/confirmation-request) - :header (redeem-tx-header account - (:receiver message) - small-screen?) - :footer (signature-request-footer keycard-step small-screen?) - :small-screen? small-screen? - :state-translations {:init {:title :t/keycard-redeem-tx - :description :t/keycard-redeem-tx-desc}}} - (:currency message) {:title (i18n/label :t/confirmation-request) - :header (signature-request-header (:formatted-amount message) - (:formatted-currency message) - small-screen? - fiat-amount - fiat-currency) - :footer (signature-request-footer keycard-step small-screen?) - :small-screen? small-screen?} - :else {:title (i18n/label :t/confirmation-request) - :header (signature-request-header (:formatted-amount message) - (:formatted-currency message) - - small-screen? - fiat-amount - fiat-currency) - :footer (signature-request-footer keycard-step small-screen?) - :small-screen? small-screen?})}]])) + [react/view {:align-items :center :margin-top 16 :margin-bottom 40} + [sign-with-keycard-button nil nil]]]) (defn- transaction-data-item [data] @@ -342,23 +204,19 @@ (views/defview message-sheet [] - (views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign-message] - small-screen? [:dimensions/small-screen?] - keycard [:keycard]] - (if (= type :pinless) - [signature-request sign (:card-connected? keycard) small-screen?] - [react/view (styles/message) - [react/view styles/message-header - [react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])} - [react/view {:padding 6} - [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]] - [separator] - [react/view {:padding-top 16 :flex 1} - [react/view styles/message-border - [react/scroll-view - [react/text (or formatted-data "")]]] - [password-view sign]]]))) + (views/letsubs [{:keys [formatted-data] :as sign} [:signing/sign-message]] + [react/view (styles/message) + [react/view styles/message-header + [react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])} + [react/view {:padding 6} + [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]] + [separator] + [react/view {:padding-top 16 :flex 1} + [react/view styles/message-border + [react/scroll-view + [react/text (or formatted-data "")]]] + [password-view sign]]])) (defn error-item [] diff --git a/src/legacy/status_im/ui/screens/wallet/add_new/views.cljs b/src/legacy/status_im/ui/screens/wallet/add_new/views.cljs index d62be0efbd..85880f9b6c 100644 --- a/src/legacy/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/legacy/status_im/ui/screens/wallet/add_new/views.cljs @@ -10,7 +10,6 @@ [legacy.status-im.ui.components.react :as react] [legacy.status-im.ui.components.toolbar :as toolbar] [legacy.status-im.ui.components.topbar :as topbar] - [legacy.status-im.ui.screens.keycard.pin.views :as pin.views] [legacy.status-im.ui.screens.wallet.account-settings.views :as account-settings] [native-module.core :as native-module] [re-frame.core :as re-frame] @@ -127,28 +126,9 @@ (re-frame/dispatch [:set-in [:add-account :account-error] nil]) (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])]) -(defview pin +(defn pin [] - (letsubs [card-pin [:keycard/pin] - status [:keycard/pin-status] - error-label [:keycard/pin-error-label] - retry-counter [:keycard/retry-counter]] - [react/keyboard-avoiding-view - {:style {:flex 1} - :ignore-offset true} - [topbar/topbar - {:navigation :none - :right-accessories - [{:label (i18n/label :t/cancel) - :on-press #(re-frame/dispatch [:keycard/new-account-pin-sheet-hide])}]}] - [pin.views/pin-view - {:pin card-pin - :status status - :retry-counter retry-counter - :title-label :t/current-pin - :description-label :t/current-pin-description - :error-label error-label - :step :export-key}]])) + [react/view]) (defview add-account-view []