move keycard native module, removed outdated code (#18252)
This commit is contained in:
flexsurfer
GitHub
parent
b70493691c
commit
800ca19c08
|
|
@ -1,4 +1,4 @@
|
|||
(ns legacy.status-im.keycard.keycard)
|
||||
(ns keycard.keycard)
|
||||
|
||||
(defprotocol Keycard
|
||||
(start-nfc [this args])
|
||||
|
|
@ -35,8 +35,4 @@
|
|||
(import-keys [this args])
|
||||
(get-keys [this args])
|
||||
(sign [this args])
|
||||
(sign-typed-data [this args])
|
||||
(save-multiaccount-and-login [this args])
|
||||
(login [this args])
|
||||
(send-transaction-with-signature [this args])
|
||||
(delete-multiaccount-before-migration [this args]))
|
||||
(sign-typed-data [this args]))
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
(ns legacy.status-im.keycard.real-keycard
|
||||
(ns keycard.real-keycard
|
||||
(:require
|
||||
["react-native" :as rn]
|
||||
["react-native-status-keycard" :default status-keycard]
|
||||
[clojure.string :as string]
|
||||
[legacy.status-im.keycard.keycard :as keycard]
|
||||
[legacy.status-im.utils.deprecated-types :as types]
|
||||
[native-module.core :as native-module]
|
||||
[keycard.keycard :as keycard]
|
||||
[react-native.platform :as platform]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.address :as address]))
|
||||
|
|
@ -275,7 +272,6 @@
|
|||
|
||||
(defn sign
|
||||
[{pin :pin path :path card-hash :hash on-success :on-success on-failure :on-failure}]
|
||||
(log/debug "keycard sign" "path" path)
|
||||
(when (and pin card-hash)
|
||||
(if path
|
||||
(.. status-keycard
|
||||
|
|
@ -295,35 +291,6 @@
|
|||
(then on-success)
|
||||
(catch on-failure))))
|
||||
|
||||
(defn save-multiaccount-and-login
|
||||
[{:keys [key-uid multiaccount-data password settings node-config accounts-data chat-key]}]
|
||||
(native-module/save-multiaccount-and-login-with-keycard
|
||||
key-uid
|
||||
(types/clj->json multiaccount-data)
|
||||
password
|
||||
(types/clj->json settings)
|
||||
node-config
|
||||
(types/clj->json accounts-data)
|
||||
chat-key))
|
||||
|
||||
(defn login
|
||||
[args]
|
||||
(native-module/login-with-keycard (assoc args :node-config {:ProcessBackedupMessages false})))
|
||||
|
||||
(defn send-transaction-with-signature
|
||||
[{:keys [transaction signature on-completed]}]
|
||||
(native-module/send-transaction-with-signature transaction signature on-completed))
|
||||
|
||||
(defn delete-multiaccount-before-migration
|
||||
[{:keys [key-uid on-success on-error]}]
|
||||
(native-module/delete-multiaccount
|
||||
key-uid
|
||||
(fn [result]
|
||||
(let [{:keys [error]} (types/json->clj result)]
|
||||
(if-not (string/blank? error)
|
||||
(on-error error)
|
||||
(on-success))))))
|
||||
|
||||
(defrecord RealKeycard []
|
||||
keycard/Keycard
|
||||
(keycard/start-nfc [_this args]
|
||||
|
|
@ -395,12 +362,4 @@
|
|||
(keycard/sign [_this args]
|
||||
(sign args))
|
||||
(keycard/sign-typed-data [_this args]
|
||||
(sign-typed-data args))
|
||||
(keycard/save-multiaccount-and-login [_this args]
|
||||
(save-multiaccount-and-login args))
|
||||
(keycard/login [_this args]
|
||||
(login args))
|
||||
(keycard/send-transaction-with-signature [_this args]
|
||||
(send-transaction-with-signature args))
|
||||
(keycard/delete-multiaccount-before-migration [_ args]
|
||||
(delete-multiaccount-before-migration args)))
|
||||
(sign-typed-data args)))
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
(:require
|
||||
[legacy.status-im.bottom-sheet.view :as bottom-sheet]
|
||||
[legacy.status-im.ui.screens.about-app.views :as about-app]
|
||||
[legacy.status-im.ui.screens.keycard.views :as keycard]
|
||||
[legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
|
|
@ -23,9 +22,6 @@
|
|||
(= view :mobile-network-offline)
|
||||
(merge mobile-network-settings/offline-sheet)
|
||||
|
||||
(= view :keycard.login/more)
|
||||
(merge keycard/more-sheet)
|
||||
|
||||
(= view :learn-more)
|
||||
(merge about-app/learn-more))
|
||||
page-theme (:theme options)]
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
(ns legacy.status-im.keycard.card
|
||||
(:require
|
||||
[legacy.status-im.keycard.keycard :as keycard]
|
||||
[legacy.status-im.keycard.real-keycard :as real-keycard]
|
||||
[clojure.string :as string]
|
||||
[keycard.keycard :as keycard]
|
||||
[keycard.real-keycard :as real-keycard]
|
||||
[legacy.status-im.keycard.simulated-keycard :as simulated-keycard]
|
||||
[legacy.status-im.node.core :as node]
|
||||
[native-module.core :as native-module]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.config :as config]
|
||||
[taoensso.timbre :as log]))
|
||||
[taoensso.timbre :as log]
|
||||
[utils.transforms :as types]))
|
||||
|
||||
(defonce card
|
||||
(if config/keycard-test-menu-enabled?
|
||||
|
|
@ -523,16 +527,37 @@
|
|||
(error-object->map response)]))}))
|
||||
|
||||
(defn save-multiaccount-and-login
|
||||
[args]
|
||||
(keycard/save-multiaccount-and-login card args))
|
||||
[{:keys [key-uid multiaccount-data password settings node-config accounts-data chat-key]}]
|
||||
(if config/keycard-test-menu-enabled?
|
||||
(native-module/save-account-and-login
|
||||
key-uid
|
||||
(types/clj->json multiaccount-data)
|
||||
password
|
||||
(types/clj->json settings)
|
||||
node-config
|
||||
(types/clj->json accounts-data))
|
||||
(native-module/save-multiaccount-and-login-with-keycard
|
||||
key-uid
|
||||
(types/clj->json multiaccount-data)
|
||||
password
|
||||
(types/clj->json settings)
|
||||
node-config
|
||||
(types/clj->json accounts-data)
|
||||
chat-key)))
|
||||
|
||||
(defn login
|
||||
[args]
|
||||
(keycard/login card args))
|
||||
[{:keys [key-uid multiaccount-data password] :as args}]
|
||||
(if config/keycard-test-menu-enabled?
|
||||
(native-module/login-with-config key-uid multiaccount-data password node/login-node-config)
|
||||
(native-module/login-with-keycard (assoc args :node-config {:ProcessBackedupMessages false}))))
|
||||
|
||||
(def account-password (native-module/sha3 "no password"))
|
||||
|
||||
(defn send-transaction-with-signature
|
||||
[args]
|
||||
(keycard/send-transaction-with-signature card args))
|
||||
[{:keys [transaction signature on-completed]}]
|
||||
(if config/keycard-test-menu-enabled?
|
||||
(native-module/send-transaction transaction account-password on-completed)
|
||||
(native-module/send-transaction-with-signature transaction signature on-completed)))
|
||||
|
||||
(defn start-nfc
|
||||
[args]
|
||||
|
|
@ -547,5 +572,13 @@
|
|||
(keycard/set-nfc-message card args))
|
||||
|
||||
(defn delete-multiaccount-before-migration
|
||||
[args]
|
||||
(keycard/delete-multiaccount-before-migration card args))
|
||||
[{:keys [key-uid on-success on-error]}]
|
||||
(if config/keycard-test-menu-enabled?
|
||||
(on-success)
|
||||
(native-module/delete-multiaccount
|
||||
key-uid
|
||||
(fn [result]
|
||||
(let [{:keys [error]} (types/json->clj result)]
|
||||
(if-not (string/blank? error)
|
||||
(on-error error)
|
||||
(on-success)))))))
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
[legacy.status-im.bottom-sheet.events :as bottom-sheet]
|
||||
[legacy.status-im.keycard.nfc :as nfc]
|
||||
[legacy.status-im.popover.core :as popover]
|
||||
[legacy.status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
|
||||
[legacy.status-im.utils.deprecated-types :as types]
|
||||
[legacy.status-im.utils.keychain.core :as keychain]
|
||||
[re-frame.core :as re-frame]
|
||||
|
|
@ -172,16 +171,6 @@
|
|||
(assoc-in [:keycard :on-card-read] nil)
|
||||
(assoc-in [:keycard :last-on-card-read] nil))})
|
||||
|
||||
(defn keycard-sheet-content
|
||||
[on-cancel connected? params]
|
||||
(fn []
|
||||
[keycard-sheet/connect-keycard
|
||||
{:on-cancel #(re-frame/dispatch on-cancel)
|
||||
:connected? connected?
|
||||
:params params
|
||||
:on-connect ::on-card-connected
|
||||
:on-disconnect ::on-card-disconnected}]))
|
||||
|
||||
(rf/defn show-connection-sheet-component
|
||||
[{:keys [db] :as cofx}
|
||||
{:keys [on-card-connected on-card-read handler]
|
||||
|
|
@ -201,8 +190,7 @@
|
|||
:show-handle? false
|
||||
:backdrop-dismiss? false
|
||||
:disable-drag? true
|
||||
:back-button-cancel false
|
||||
:content (keycard-sheet-content on-cancel connected? nil)}})
|
||||
:back-button-cancel false}})
|
||||
(when on-card-read
|
||||
(set-on-card-read on-card-read))
|
||||
(set-on-card-connected on-card-connected)
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
(ns legacy.status-im.keycard.simulated-keycard
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[legacy.status-im.keycard.keycard :as keycard]
|
||||
[keycard.keycard :as keycard]
|
||||
[legacy.status-im.multiaccounts.create.core :as multiaccounts.create]
|
||||
[legacy.status-im.node.core :as node]
|
||||
[legacy.status-im.utils.deprecated-types :as types]
|
||||
[legacy.status-im.utils.utils :as utils]
|
||||
[native-module.core :as native-module]
|
||||
[re-frame.core :as re-frame]
|
||||
[re-frame.db :as re-frame.db]
|
||||
re-frame.db
|
||||
[status-im.constants :as constants]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.address :as address]
|
||||
[utils.i18n :as i18n]))
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as re-frame]))
|
||||
|
||||
(def kk1-password "000000")
|
||||
(def default-pin "111111")
|
||||
|
|
@ -82,8 +80,7 @@
|
|||
|
||||
(defn- later
|
||||
[f]
|
||||
(when f
|
||||
(utils/set-timeout f 500)))
|
||||
(when f (js/setTimeout f 500)))
|
||||
|
||||
(defn pin-error
|
||||
[]
|
||||
|
|
@ -488,28 +485,6 @@
|
|||
[args]
|
||||
(log/warn "sign-typed-data not implemented" args))
|
||||
|
||||
(defn save-multiaccount-and-login
|
||||
[{:keys [key-uid multiaccount-data password settings node-config accounts-data]}]
|
||||
(native-module/save-account-and-login
|
||||
key-uid
|
||||
(types/clj->json multiaccount-data)
|
||||
password
|
||||
(types/clj->json settings)
|
||||
node-config
|
||||
(types/clj->json accounts-data)))
|
||||
|
||||
(defn login
|
||||
[{:keys [key-uid multiaccount-data password]}]
|
||||
(native-module/login-with-config key-uid multiaccount-data password node/login-node-config))
|
||||
|
||||
(defn send-transaction-with-signature
|
||||
[{:keys [transaction on-completed]}]
|
||||
(native-module/send-transaction transaction account-password on-completed))
|
||||
|
||||
(defn delete-multiaccount-before-migration
|
||||
[{:keys [on-success]}]
|
||||
(on-success))
|
||||
|
||||
(defrecord SimulatedKeycard []
|
||||
keycard/Keycard
|
||||
(keycard/start-nfc [_this args]
|
||||
|
|
@ -610,16 +585,4 @@
|
|||
(get-keys args))
|
||||
(keycard/sign [_this args]
|
||||
(log/debug "simulated card sign")
|
||||
(sign args))
|
||||
(keycard/save-multiaccount-and-login [_this args]
|
||||
(log/debug "simulated card save-multiaccount-and-login")
|
||||
(save-multiaccount-and-login args))
|
||||
(keycard/login [_this args]
|
||||
(log/debug "simulated card login")
|
||||
(login args))
|
||||
(keycard/send-transaction-with-signature [_this args]
|
||||
(log/debug "simulated card send-transaction-with-signature")
|
||||
(send-transaction-with-signature args))
|
||||
(keycard/delete-multiaccount-before-migration [_ args]
|
||||
(log/debug "simulated card delete-multiaccount-before-migration")
|
||||
(delete-multiaccount-before-migration args)))
|
||||
(sign args)))
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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]]]))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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])}]]]])
|
||||
|
|
@ -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]])))
|
||||
|
|
@ -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}]])})))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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)]]])
|
||||
|
|
@ -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)]])]])
|
||||
|
|
@ -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)])])
|
||||
|
|
@ -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)]}]]]))))
|
||||
|
|
@ -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)]}]]))))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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}])))
|
||||
|
|
@ -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)]]]]))
|
||||
|
|
@ -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}])
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
(ns legacy.status-im.ui.screens.keycard.styles)
|
||||
|
||||
(def container
|
||||
{:flex 1
|
||||
:justify-content :space-between})
|
||||
|
|
@ -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})
|
||||
|
|
@ -5,8 +5,6 @@
|
|||
[legacy.status-im.ui.components.animation :as anim]
|
||||
[legacy.status-im.ui.components.colors :as colors]
|
||||
[legacy.status-im.ui.components.react :as react]
|
||||
[legacy.status-im.ui.screens.keycard.frozen-card.view :as frozen-card]
|
||||
[legacy.status-im.ui.screens.keycard.views :as keycard.views]
|
||||
[legacy.status-im.ui.screens.profile.user.views :as profile.user]
|
||||
[legacy.status-im.ui.screens.reset-password.views :as reset-password.views]
|
||||
[legacy.status-im.ui.screens.signing.sheets :as signing-sheets]
|
||||
|
|
@ -145,12 +143,6 @@
|
|||
(= :transaction-data view)
|
||||
[signing/transaction-data]
|
||||
|
||||
(= :frozen-card view)
|
||||
[frozen-card/frozen-card]
|
||||
|
||||
(= :blocked-card view)
|
||||
[keycard.views/blocked-card-popover]
|
||||
|
||||
(= :password-reset-popover view)
|
||||
[reset-password.views/reset-password-popover]
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,6 @@
|
|||
[legacy.status-im.ui.screens.glossary.view :as glossary]
|
||||
[legacy.status-im.ui.screens.group.views :as group-chat]
|
||||
[legacy.status-im.ui.screens.help-center.views :as help-center]
|
||||
[legacy.status-im.ui.screens.keycard.authentication-method.views :as keycard.authentication]
|
||||
[legacy.status-im.ui.screens.keycard.onboarding.views :as keycard.onboarding]
|
||||
[legacy.status-im.ui.screens.keycard.pairing.views :as keycard.pairing]
|
||||
[legacy.status-im.ui.screens.keycard.pin.views :as keycard.pin]
|
||||
[legacy.status-im.ui.screens.keycard.recovery.views :as keycard.recovery]
|
||||
[legacy.status-im.ui.screens.keycard.settings.views :as keycard.settings]
|
||||
[legacy.status-im.ui.screens.keycard.views :as keycard]
|
||||
[legacy.status-im.ui.screens.link-previews-settings.views :as link-previews-settings]
|
||||
[legacy.status-im.ui.screens.log-level-settings.views :as log-level-settings]
|
||||
[legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
|
||||
|
|
@ -497,130 +490,6 @@
|
|||
:top? true}}
|
||||
:component contact/profile-view}
|
||||
|
||||
;KEYCARD
|
||||
{:name :keycard-onboarding-intro
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.onboarding/intro}
|
||||
{:name :keycard-onboarding-puk-code
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
;;TODO dynamic
|
||||
:component keycard.onboarding/puk-code}
|
||||
{:name :keycard-onboarding-pin
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
;;TODO dynamic
|
||||
:component keycard.onboarding/pin}
|
||||
{:name :keycard-recovery-pair
|
||||
:options {:topBar {:title {:text (i18n/label :t/step-i-of-n {:number 2 :step 1})}}
|
||||
:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.recovery/pair}
|
||||
|
||||
{:name :keycard-recovery-pin
|
||||
;;TODO dynamic
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard.recovery/pin}
|
||||
{:name :keycard-wrong
|
||||
;;TODO move to popover?
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard/wrong}
|
||||
{:name :not-keycard
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
;;TODO move to popover?
|
||||
:component keycard/not-keycard}
|
||||
{:name :keycard-onboarding-recovery-phrase
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.onboarding/recovery-phrase}
|
||||
{:name :keycard-onboarding-recovery-phrase-confirm-word1
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.onboarding/recovery-phrase-confirm-word}
|
||||
{:name :keycard-onboarding-recovery-phrase-confirm-word2
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.onboarding/recovery-phrase-confirm-word}
|
||||
{:name :keycard-recovery-intro
|
||||
:insets {:bottom? true}
|
||||
:component keycard.recovery/intro}
|
||||
{:name :keycard-recovery-success
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.recovery/success}
|
||||
{:name :keycard-recovery-no-key
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}
|
||||
:popGesture false
|
||||
:hardwareBackButton {:dismissModalOnPress false
|
||||
:popStackOnPress false}}
|
||||
:component keycard.recovery/no-key}
|
||||
{:name :keycard-authentication-method
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard.authentication/keycard-authentication-method}
|
||||
{:name :keycard-login-pin
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard/login-pin}
|
||||
{:name :keycard-blank
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard/blank}
|
||||
{:name :keycard-unpaired
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard/unpaired}
|
||||
{:name :keycard-settings
|
||||
:options {:topBar {:title {:text (i18n/label :t/status-keycard)}}
|
||||
:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard.settings/keycard-settings}
|
||||
{:name :reset-card
|
||||
:options {:topBar {:title {:text (i18n/label :t/reset-card)}}
|
||||
:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard.settings/reset-card}
|
||||
{:name :keycard-pin
|
||||
;;TODO dynamic title
|
||||
:options {:insets {:bottom? true
|
||||
:top? true}}
|
||||
:component keycard.settings/reset-pin}
|
||||
{:name :enter-pin-settings
|
||||
:insets {:bottom? true}
|
||||
:component keycard.pin/enter-pin}
|
||||
{:name :change-pairing-code
|
||||
:insets {:bottom? true}
|
||||
:component keycard.pairing/change-pairing-code}
|
||||
|
||||
;; BUG REPORT
|
||||
{:name :bug-report
|
||||
:options {:insets {:top? true}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
(:require
|
||||
[clojure.string :as string]
|
||||
[legacy.status-im.ethereum.tokens :as tokens]
|
||||
[legacy.status-im.keycard.common :as keycard.common]
|
||||
[legacy.status-im.react-native.resources :as resources]
|
||||
[legacy.status-im.signing.eip1559 :as eip1559]
|
||||
[legacy.status-im.ui.components.bottom-panel.views :as bottom-panel]
|
||||
|
|
@ -14,8 +13,6 @@
|
|||
[legacy.status-im.ui.components.icons.icons :as icons]
|
||||
[legacy.status-im.ui.components.list.item :as list.item]
|
||||
[legacy.status-im.ui.components.react :as react]
|
||||
[legacy.status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
|
||||
[legacy.status-im.ui.screens.keycard.pin.views :as pin.views]
|
||||
[legacy.status-im.ui.screens.signing.sheets :as sheets]
|
||||
[legacy.status-im.ui.screens.signing.styles :as styles]
|
||||
[legacy.status-im.ui.screens.wallet.components.views :as wallet.components]
|
||||
|
|
@ -23,7 +20,6 @@
|
|||
[legacy.status-im.utils.utils :as utils]
|
||||
[legacy.status-im.wallet.utils :as wallet.utils]
|
||||
[re-frame.core :as re-frame]
|
||||
[react-native.platform :as platform]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.contexts.profile.utils :as profile.utils]
|
||||
[utils.i18n :as i18n]
|
||||
|
|
@ -106,25 +102,6 @@
|
|||
(when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}))
|
||||
(i18n/label :t/cancel)]]])
|
||||
|
||||
(views/defview keycard-pin-view
|
||||
[]
|
||||
(views/letsubs [pin [:keycard/pin]
|
||||
small-screen? [:dimensions/small-screen?]
|
||||
error-label [:keycard/pin-error-label]
|
||||
enter-step [:keycard/pin-enter-step]
|
||||
status [:keycard/pin-status]
|
||||
retry-counter [:keycard/retry-counter]]
|
||||
(let [enter-step (or enter-step :sign)
|
||||
margin-bottom (if platform/ios? 40 0)]
|
||||
[react/view {:margin-bottom margin-bottom}
|
||||
[pin.views/pin-view
|
||||
{:pin pin
|
||||
:retry-counter retry-counter
|
||||
:step enter-step
|
||||
:small-screen? small-screen?
|
||||
:status status
|
||||
:error-label error-label}]])))
|
||||
|
||||
(defn sign-with-keycard-button
|
||||
[amount-error gas-error]
|
||||
(let [disabled? (or amount-error gas-error)]
|
||||
|
|
@ -150,126 +127,11 @@
|
|||
[react/text phrase]])
|
||||
|
||||
(defn- keycard-view
|
||||
[{:keys [keycard-step]} phrase]
|
||||
[_ phrase]
|
||||
[react/view
|
||||
[signing-phrase-view phrase]
|
||||
(case keycard-step
|
||||
:pin [keycard-pin-view]
|
||||
[react/view {:align-items :center :margin-top 16 :margin-bottom 40}
|
||||
[sign-with-keycard-button nil nil]])])
|
||||
|
||||
(defn redeem-tx-header
|
||||
[account receiver small-screen?]
|
||||
(fn []
|
||||
[react/view {:style {:align-self :stretch :margin-top 30}}
|
||||
[separator]
|
||||
[react/view
|
||||
{:style {:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:align-items :center
|
||||
:padding-left 16
|
||||
:margin-vertical 8}}
|
||||
[react/text {:style {:flex 2 :margin-right 16}} (i18n/label :t/keycard-redeem-title)]
|
||||
[react/text
|
||||
{:number-of-lines 1
|
||||
:ellipsize-mode :middle
|
||||
:style {:padding-left 16
|
||||
:color colors/gray
|
||||
:flex 3}}
|
||||
(if account (:name account) receiver)]
|
||||
(when account
|
||||
[react/view {:style {:flex 1 :padding-left 8}}
|
||||
[chat-icon/custom-icon-view-list (:name account) (:color account) (if small-screen? 20 32)]])]
|
||||
[separator]]))
|
||||
|
||||
(defn signature-request-header
|
||||
[amount currency small-screen? fiat-amount fiat-currency]
|
||||
(fn []
|
||||
[react/view {:style {:align-self :stretch :margin-vertical 30}}
|
||||
[react/nested-text
|
||||
{:style {:font-weight "500"
|
||||
:font-size (if small-screen? 34 44)
|
||||
:text-align :center}}
|
||||
(str amount " ")
|
||||
[{:style {:color colors/gray}} currency]]
|
||||
[react/text
|
||||
{:style {:font-size 19
|
||||
:text-align :center
|
||||
:margin-bottom 16}}
|
||||
(str fiat-amount " " fiat-currency)]
|
||||
[separator]]))
|
||||
|
||||
(defn terminal-button
|
||||
[{:keys [on-press theme disabled? height]} label]
|
||||
[react/touchable-opacity
|
||||
{:disabled disabled?
|
||||
:on-press on-press
|
||||
:style {:height height
|
||||
:border-radius 16
|
||||
:flex 1
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (if (= theme :negative)
|
||||
colors/red-transparent-10
|
||||
colors/blue-light)}}
|
||||
[quo/text
|
||||
{:size :large
|
||||
:number-of-lines 1
|
||||
:color (if (= theme :negative)
|
||||
:negative
|
||||
:link)
|
||||
:weight :medium}
|
||||
label]])
|
||||
|
||||
(defn signature-request-footer
|
||||
[keycard-step small-screen?]
|
||||
(fn []
|
||||
[react/view {:style {:padding 16 :align-items :center}}
|
||||
[react/view {:style {:flex-direction :row}}
|
||||
[terminal-button
|
||||
{:disabled? (= keycard-step :success)
|
||||
:height (if small-screen? 52 64)
|
||||
:on-press #(re-frame/dispatch [:show-popover {:view :transaction-data}])}
|
||||
(i18n/label :t/show-transaction-data)]]]))
|
||||
|
||||
(defn signature-request
|
||||
[{:keys [formatted-data account fiat-amount fiat-currency keycard-step]}
|
||||
connected?
|
||||
small-screen?]
|
||||
(let [message (:message formatted-data)]
|
||||
[react/view (assoc (styles/message) :padding-vertical 16)
|
||||
[keycard-sheet/connect-keycard
|
||||
{:on-connect ::keycard.common/on-card-connected
|
||||
:on-disconnect ::keycard.common/on-card-disconnected
|
||||
:connected? connected?
|
||||
:on-cancel #(re-frame/dispatch [:signing.ui/cancel-is-pressed])
|
||||
:params
|
||||
(cond
|
||||
(:receiver message) {:title (i18n/label :t/confirmation-request)
|
||||
:header (redeem-tx-header account
|
||||
(:receiver message)
|
||||
small-screen?)
|
||||
:footer (signature-request-footer keycard-step small-screen?)
|
||||
:small-screen? small-screen?
|
||||
:state-translations {:init {:title :t/keycard-redeem-tx
|
||||
:description :t/keycard-redeem-tx-desc}}}
|
||||
(:currency message) {:title (i18n/label :t/confirmation-request)
|
||||
:header (signature-request-header (:formatted-amount message)
|
||||
(:formatted-currency message)
|
||||
small-screen?
|
||||
fiat-amount
|
||||
fiat-currency)
|
||||
:footer (signature-request-footer keycard-step small-screen?)
|
||||
:small-screen? small-screen?}
|
||||
:else {:title (i18n/label :t/confirmation-request)
|
||||
:header (signature-request-header (:formatted-amount message)
|
||||
(:formatted-currency message)
|
||||
|
||||
small-screen?
|
||||
fiat-amount
|
||||
fiat-currency)
|
||||
:footer (signature-request-footer keycard-step small-screen?)
|
||||
:small-screen? small-screen?})}]]))
|
||||
[react/view {:align-items :center :margin-top 16 :margin-bottom 40}
|
||||
[sign-with-keycard-button nil nil]]])
|
||||
|
||||
(defn- transaction-data-item
|
||||
[data]
|
||||
|
|
@ -342,23 +204,19 @@
|
|||
|
||||
(views/defview message-sheet
|
||||
[]
|
||||
(views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign-message]
|
||||
small-screen? [:dimensions/small-screen?]
|
||||
keycard [:keycard]]
|
||||
(if (= type :pinless)
|
||||
[signature-request sign (:card-connected? keycard) small-screen?]
|
||||
[react/view (styles/message)
|
||||
[react/view styles/message-header
|
||||
[react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}
|
||||
[react/view {:padding 6}
|
||||
[react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]]
|
||||
[separator]
|
||||
[react/view {:padding-top 16 :flex 1}
|
||||
[react/view styles/message-border
|
||||
[react/scroll-view
|
||||
[react/text (or formatted-data "")]]]
|
||||
[password-view sign]]])))
|
||||
(views/letsubs [{:keys [formatted-data] :as sign} [:signing/sign-message]]
|
||||
[react/view (styles/message)
|
||||
[react/view styles/message-header
|
||||
[react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}
|
||||
[react/view {:padding 6}
|
||||
[react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]]
|
||||
[separator]
|
||||
[react/view {:padding-top 16 :flex 1}
|
||||
[react/view styles/message-border
|
||||
[react/scroll-view
|
||||
[react/text (or formatted-data "")]]]
|
||||
[password-view sign]]]))
|
||||
|
||||
(defn error-item
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
[legacy.status-im.ui.components.react :as react]
|
||||
[legacy.status-im.ui.components.toolbar :as toolbar]
|
||||
[legacy.status-im.ui.components.topbar :as topbar]
|
||||
[legacy.status-im.ui.screens.keycard.pin.views :as pin.views]
|
||||
[legacy.status-im.ui.screens.wallet.account-settings.views :as account-settings]
|
||||
[native-module.core :as native-module]
|
||||
[re-frame.core :as re-frame]
|
||||
|
|
@ -127,28 +126,9 @@
|
|||
(re-frame/dispatch [:set-in [:add-account :account-error] nil])
|
||||
(re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])])
|
||||
|
||||
(defview pin
|
||||
(defn pin
|
||||
[]
|
||||
(letsubs [card-pin [:keycard/pin]
|
||||
status [:keycard/pin-status]
|
||||
error-label [:keycard/pin-error-label]
|
||||
retry-counter [:keycard/retry-counter]]
|
||||
[react/keyboard-avoiding-view
|
||||
{:style {:flex 1}
|
||||
:ignore-offset true}
|
||||
[topbar/topbar
|
||||
{:navigation :none
|
||||
:right-accessories
|
||||
[{:label (i18n/label :t/cancel)
|
||||
:on-press #(re-frame/dispatch [:keycard/new-account-pin-sheet-hide])}]}]
|
||||
[pin.views/pin-view
|
||||
{:pin card-pin
|
||||
:status status
|
||||
:retry-counter retry-counter
|
||||
:title-label :t/current-pin
|
||||
:description-label :t/current-pin-description
|
||||
:error-label error-label
|
||||
:step :export-key}]]))
|
||||
[react/view])
|
||||
|
||||
(defview add-account-view
|
||||
[]
|
||||
|
|
|
|||
Loading…
Reference in New Issue