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

move keycard native module, removed outdated code (#18252)

This commit is contained in:
flexsurfer 2023-12-20 13:53:53 +01:00 committed by GitHub
parent b70493691c
commit 800ca19c08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 74 additions and 3390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/legacy/status_im/keycard/keycard.cljs → src/keycard/keycard.cljs
View File

@ -1,4 +1,4 @@
(ns legacy.status-im.keycard.keycard) (ns keycard.keycard)
(defprotocol Keycard (defprotocol Keycard
(start-nfc [this args]) (start-nfc [this args])
@ -35,8 +35,4 @@
(import-keys [this args]) (import-keys [this args])
(get-keys [this args]) (get-keys [this args])
(sign [this args]) (sign [this args])
(sign-typed-data [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]))

47
src/legacy/status_im/keycard/real_keycard.cljs → src/keycard/real_keycard.cljs
View File

@ -1,11 +1,8 @@
(ns legacy.status-im.keycard.real-keycard (ns keycard.real-keycard
(:require (:require
["react-native" :as rn] ["react-native" :as rn]
["react-native-status-keycard" :default status-keycard] ["react-native-status-keycard" :default status-keycard]
[clojure.string :as string] [keycard.keycard :as keycard]
[legacy.status-im.keycard.keycard :as keycard]
[legacy.status-im.utils.deprecated-types :as types]
[native-module.core :as native-module]
[react-native.platform :as platform] [react-native.platform :as platform]
[taoensso.timbre :as log] [taoensso.timbre :as log]
[utils.address :as address])) [utils.address :as address]))
@ -275,7 +272,6 @@
(defn sign (defn sign
[{pin :pin path :path card-hash :hash on-success :on-success on-failure :on-failure}] [{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) (when (and pin card-hash)
(if path (if path
(.. status-keycard (.. status-keycard
@ -295,35 +291,6 @@
(then on-success) (then on-success)
(catch on-failure)))) (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 [] (defrecord RealKeycard []
keycard/Keycard keycard/Keycard
(keycard/start-nfc [_this args] (keycard/start-nfc [_this args]
@ -395,12 +362,4 @@
(keycard/sign [_this args] (keycard/sign [_this args]
(sign args)) (sign args))
(keycard/sign-typed-data [_this args] (keycard/sign-typed-data [_this args]
(sign-typed-data 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)))

4
src/legacy/status_im/bottom_sheet/sheets.cljs
View File

@ -2,7 +2,6 @@
(:require (:require
[legacy.status-im.bottom-sheet.view :as bottom-sheet] [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.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] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
[quo.theme :as theme] [quo.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
@ -23,9 +22,6 @@
(= view :mobile-network-offline) (= view :mobile-network-offline)
(merge mobile-network-settings/offline-sheet) (merge mobile-network-settings/offline-sheet)
(= view :keycard.login/more)
(merge keycard/more-sheet)
(= view :learn-more) (= view :learn-more)
(merge about-app/learn-more)) (merge about-app/learn-more))
page-theme (:theme options)] page-theme (:theme options)]

55
src/legacy/status_im/keycard/card.cljs
View File

@ -1,11 +1,15 @@
(ns legacy.status-im.keycard.card (ns legacy.status-im.keycard.card
(:require (:require
[legacy.status-im.keycard.keycard :as keycard] [clojure.string :as string]
[legacy.status-im.keycard.real-keycard :as real-keycard] [keycard.keycard :as keycard]
[keycard.real-keycard :as real-keycard]
[legacy.status-im.keycard.simulated-keycard :as simulated-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] [re-frame.core :as re-frame]
[status-im.config :as config] [status-im.config :as config]
[taoensso.timbre :as log])) [taoensso.timbre :as log]
[utils.transforms :as types]))
(defonce card (defonce card
(if config/keycard-test-menu-enabled? (if config/keycard-test-menu-enabled?
@ -523,16 +527,37 @@
(error-object->map response)]))})) (error-object->map response)]))}))
(defn save-multiaccount-and-login (defn save-multiaccount-and-login
[args] [{:keys [key-uid multiaccount-data password settings node-config accounts-data chat-key]}]
(keycard/save-multiaccount-and-login card args)) (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 (defn login
[args] [{:keys [key-uid multiaccount-data password] :as args}]
(keycard/login card 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 (defn send-transaction-with-signature
[args] [{:keys [transaction signature on-completed]}]
(keycard/send-transaction-with-signature card args)) (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 (defn start-nfc
[args] [args]
@ -547,5 +572,13 @@
(keycard/set-nfc-message card args)) (keycard/set-nfc-message card args))
(defn delete-multiaccount-before-migration (defn delete-multiaccount-before-migration
[args] [{:keys [key-uid on-success on-error]}]
(keycard/delete-multiaccount-before-migration card args)) (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)))))))

14
src/legacy/status_im/keycard/common.cljs
View File

@ -4,7 +4,6 @@
[legacy.status-im.bottom-sheet.events :as bottom-sheet] [legacy.status-im.bottom-sheet.events :as bottom-sheet]
[legacy.status-im.keycard.nfc :as nfc] [legacy.status-im.keycard.nfc :as nfc]
[legacy.status-im.popover.core :as popover] [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.deprecated-types :as types]
[legacy.status-im.utils.keychain.core :as keychain] [legacy.status-im.utils.keychain.core :as keychain]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
@ -172,16 +171,6 @@
(assoc-in [:keycard :on-card-read] nil) (assoc-in [:keycard :on-card-read] nil)
(assoc-in [:keycard :last-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 (rf/defn show-connection-sheet-component
[{:keys [db] :as cofx} [{:keys [db] :as cofx}
{:keys [on-card-connected on-card-read handler] {:keys [on-card-connected on-card-read handler]
@ -201,8 +190,7 @@
:show-handle? false :show-handle? false
:backdrop-dismiss? false :backdrop-dismiss? false
:disable-drag? true :disable-drag? true
:back-button-cancel false :back-button-cancel false}})
:content (keycard-sheet-content on-cancel connected? nil)}})
(when on-card-read (when on-card-read
(set-on-card-read on-card-read)) (set-on-card-read on-card-read))
(set-on-card-connected on-card-connected) (set-on-card-connected on-card-connected)

49
src/legacy/status_im/keycard/simulated_keycard.cljs
View File

@ -1,18 +1,16 @@
(ns legacy.status-im.keycard.simulated-keycard (ns legacy.status-im.keycard.simulated-keycard
(:require (:require
[clojure.string :as string] [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.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.deprecated-types :as types]
[legacy.status-im.utils.utils :as utils]
[native-module.core :as native-module] [native-module.core :as native-module]
[re-frame.core :as re-frame] re-frame.db
[re-frame.db :as re-frame.db]
[status-im.constants :as constants] [status-im.constants :as constants]
[taoensso.timbre :as log] [taoensso.timbre :as log]
[utils.address :as address] [utils.address :as address]
[utils.i18n :as i18n])) [utils.i18n :as i18n]
[utils.re-frame :as re-frame]))
(def kk1-password "000000") (def kk1-password "000000")
(def default-pin "111111") (def default-pin "111111")
@ -82,8 +80,7 @@
(defn- later (defn- later
[f] [f]
(when f (when f (js/setTimeout f 500)))
(utils/set-timeout f 500)))
(defn pin-error (defn pin-error
[] []
@ -488,28 +485,6 @@
[args] [args]
(log/warn "sign-typed-data not implemented" 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 [] (defrecord SimulatedKeycard []
keycard/Keycard keycard/Keycard
(keycard/start-nfc [_this args] (keycard/start-nfc [_this args]
@ -610,16 +585,4 @@
(get-keys args)) (get-keys args))
(keycard/sign [_this args] (keycard/sign [_this args]
(log/debug "simulated card sign") (log/debug "simulated card sign")
(sign args)) (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)))

102
src/legacy/status_im/ui/screens/home/styles.cljs
View File

@ -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})

329
src/legacy/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -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]]]))

59
src/legacy/status_im/ui/screens/keycard/authentication_method/styles.cljs
View File

@ -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})

49
src/legacy/status_im/ui/screens/keycard/authentication_method/views.cljs
View File

@ -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])}]]]])

52
src/legacy/status_im/ui/screens/keycard/components/description.cljs
View File

@ -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]])))

369
src/legacy/status_im/ui/screens/keycard/components/keycard_animation.cljs
View File

@ -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}]])})))

22
src/legacy/status_im/ui/screens/keycard/components/style.cljs
View File

@ -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})

30
src/legacy/status_im/ui/screens/keycard/components/turn_nfc.cljs
View File

@ -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)]]])

56
src/legacy/status_im/ui/screens/keycard/frozen_card/view.cljs
View File

@ -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)]])]])

87
src/legacy/status_im/ui/screens/keycard/keycard_interaction.cljs
View File

@ -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)])])

392
src/legacy/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -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)]}]]]))))

103
src/legacy/status_im/ui/screens/keycard/pairing/views.cljs
View File

@ -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)]}]]))))

121
src/legacy/status_im/ui/screens/keycard/pin/styles.cljs
View File

@ -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})

289
src/legacy/status_im/ui/screens/keycard/pin/views.cljs
View File

@ -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}])))

281
src/legacy/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -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)]]]]))

143
src/legacy/status_im/ui/screens/keycard/settings/views.cljs
View File

@ -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}])

5
src/legacy/status_im/ui/screens/keycard/styles.cljs
View File

@ -1,5 +0,0 @@
(ns legacy.status-im.ui.screens.keycard.styles)
(def container
{:flex 1
:justify-content :space-between})

461
src/legacy/status_im/ui/screens/keycard/views.cljs
View File

@ -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})

8
src/legacy/status_im/ui/screens/popover/views.cljs
View File

@ -5,8 +5,6 @@
[legacy.status-im.ui.components.animation :as anim] [legacy.status-im.ui.components.animation :as anim]
[legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.components.colors :as colors]
[legacy.status-im.ui.components.react :as react] [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.profile.user.views :as profile.user]
[legacy.status-im.ui.screens.reset-password.views :as reset-password.views] [legacy.status-im.ui.screens.reset-password.views :as reset-password.views]
[legacy.status-im.ui.screens.signing.sheets :as signing-sheets] [legacy.status-im.ui.screens.signing.sheets :as signing-sheets]
@ -145,12 +143,6 @@
(= :transaction-data view) (= :transaction-data view)
[signing/transaction-data] [signing/transaction-data]
(= :frozen-card view)
[frozen-card/frozen-card]
(= :blocked-card view)
[keycard.views/blocked-card-popover]
(= :password-reset-popover view) (= :password-reset-popover view)
[reset-password.views/reset-password-popover] [reset-password.views/reset-password-popover]

131
src/legacy/status_im/ui/screens/screens.cljs
View File

@ -21,13 +21,6 @@
[legacy.status-im.ui.screens.glossary.view :as glossary] [legacy.status-im.ui.screens.glossary.view :as glossary]
[legacy.status-im.ui.screens.group.views :as group-chat] [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.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.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.log-level-settings.views :as log-level-settings]
[legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
@ -497,130 +490,6 @@
:top? true}} :top? true}}
:component contact/profile-view} :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 ;; BUG REPORT
{:name :bug-report {:name :bug-report
:options {:insets {:top? true}} :options {:insets {:top? true}}

174
src/legacy/status_im/ui/screens/signing/views.cljs
View File

@ -3,7 +3,6 @@
(:require (:require
[clojure.string :as string] [clojure.string :as string]
[legacy.status-im.ethereum.tokens :as tokens] [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.react-native.resources :as resources]
[legacy.status-im.signing.eip1559 :as eip1559] [legacy.status-im.signing.eip1559 :as eip1559]
[legacy.status-im.ui.components.bottom-panel.views :as bottom-panel] [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.icons.icons :as icons]
[legacy.status-im.ui.components.list.item :as list.item] [legacy.status-im.ui.components.list.item :as list.item]
[legacy.status-im.ui.components.react :as react] [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.sheets :as sheets]
[legacy.status-im.ui.screens.signing.styles :as styles] [legacy.status-im.ui.screens.signing.styles :as styles]
[legacy.status-im.ui.screens.wallet.components.views :as wallet.components] [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.utils.utils :as utils]
[legacy.status-im.wallet.utils :as wallet.utils] [legacy.status-im.wallet.utils :as wallet.utils]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[react-native.platform :as platform]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.contexts.profile.utils :as profile.utils] [status-im.contexts.profile.utils :as profile.utils]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -106,25 +102,6 @@
(when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])})) (when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}))
(i18n/label :t/cancel)]]]) (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 (defn sign-with-keycard-button
[amount-error gas-error] [amount-error gas-error]
(let [disabled? (or amount-error gas-error)] (let [disabled? (or amount-error gas-error)]
@ -150,126 +127,11 @@
[react/text phrase]]) [react/text phrase]])
(defn- keycard-view (defn- keycard-view
[{:keys [keycard-step]} phrase] [_ phrase]
[react/view [react/view
[signing-phrase-view phrase] [signing-phrase-view phrase]
(case keycard-step [react/view {:align-items :center :margin-top 16 :margin-bottom 40}
:pin [keycard-pin-view] [sign-with-keycard-button nil nil]]])
[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?})}]]))
(defn- transaction-data-item (defn- transaction-data-item
[data] [data]
@ -342,23 +204,19 @@
(views/defview message-sheet (views/defview message-sheet
[] []
(views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign-message] (views/letsubs [{:keys [formatted-data] :as sign} [:signing/sign-message]]
small-screen? [:dimensions/small-screen?] [react/view (styles/message)
keycard [:keycard]] [react/view styles/message-header
(if (= type :pinless) [react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)]
[signature-request sign (:card-connected? keycard) small-screen?] [react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}
[react/view (styles/message) [react/view {:padding 6}
[react/view styles/message-header [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]]
[react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)] [separator]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])} [react/view {:padding-top 16 :flex 1}
[react/view {:padding 6} [react/view styles/message-border
[react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]] [react/scroll-view
[separator] [react/text (or formatted-data "")]]]
[react/view {:padding-top 16 :flex 1} [password-view sign]]]))
[react/view styles/message-border
[react/scroll-view
[react/text (or formatted-data "")]]]
[password-view sign]]])))
(defn error-item (defn error-item
[] []

24
src/legacy/status_im/ui/screens/wallet/add_new/views.cljs
View File

@ -10,7 +10,6 @@
[legacy.status-im.ui.components.react :as react] [legacy.status-im.ui.components.react :as react]
[legacy.status-im.ui.components.toolbar :as toolbar] [legacy.status-im.ui.components.toolbar :as toolbar]
[legacy.status-im.ui.components.topbar :as topbar] [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] [legacy.status-im.ui.screens.wallet.account-settings.views :as account-settings]
[native-module.core :as native-module] [native-module.core :as native-module]
[re-frame.core :as re-frame] [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 :account-error] nil])
(re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])]) (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])])
(defview pin (defn pin
[] []
(letsubs [card-pin [:keycard/pin] [react/view])
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}]]))
(defview add-account-view (defview add-account-view
[] []