diff --git a/resources/images/ui2/keycard-chip-dark@2x.png b/resources/images/ui2/keycard-chip-dark@2x.png new file mode 100644 index 0000000000..3b37157fb2 Binary files /dev/null and b/resources/images/ui2/keycard-chip-dark@2x.png differ diff --git a/resources/images/ui2/keycard-chip-dark@3x.png b/resources/images/ui2/keycard-chip-dark@3x.png new file mode 100644 index 0000000000..94d49c0a7e Binary files /dev/null and b/resources/images/ui2/keycard-chip-dark@3x.png differ diff --git a/resources/images/ui2/keycard-chip-light@2x.png b/resources/images/ui2/keycard-chip-light@2x.png new file mode 100644 index 0000000000..62074329be Binary files /dev/null and b/resources/images/ui2/keycard-chip-light@2x.png differ diff --git a/resources/images/ui2/keycard-chip-light@3x.png b/resources/images/ui2/keycard-chip-light@3x.png new file mode 100644 index 0000000000..60d0797da8 Binary files /dev/null and b/resources/images/ui2/keycard-chip-light@3x.png differ diff --git a/resources/images/ui2/keycard-logo@2x.png b/resources/images/ui2/keycard-logo@2x.png new file mode 100644 index 0000000000..8de3316fa8 Binary files /dev/null and b/resources/images/ui2/keycard-logo@2x.png differ diff --git a/resources/images/ui2/keycard-logo@3x.png b/resources/images/ui2/keycard-logo@3x.png new file mode 100644 index 0000000000..b7ed894e37 Binary files /dev/null and b/resources/images/ui2/keycard-logo@3x.png differ diff --git a/resources/images/ui2/keycard-watermark@2x.png b/resources/images/ui2/keycard-watermark@2x.png new file mode 100644 index 0000000000..9ddecf65b3 Binary files /dev/null and b/resources/images/ui2/keycard-watermark@2x.png differ diff --git a/resources/images/ui2/keycard-watermark@3x.png b/resources/images/ui2/keycard-watermark@3x.png new file mode 100644 index 0000000000..887b0d9344 Binary files /dev/null and b/resources/images/ui2/keycard-watermark@3x.png differ diff --git a/src/quo2/components/keycard/component_spec.cljs b/src/quo2/components/keycard/component_spec.cljs new file mode 100644 index 0000000000..350259efed --- /dev/null +++ b/src/quo2/components/keycard/component_spec.cljs @@ -0,0 +1,20 @@ +(ns quo2.components.keycard.component-spec + (:require [quo2.components.keycard.view :as keycard] + [test-helpers.component :as h] + [utils.i18n :as i18n])) + +(h/describe "keycard component" + (h/test "Render of keycard component when: Status = Empty, Locked = False" + (h/render [keycard/keycard]) + (-> (h/expect (h/query-by-label-text :holder-name)) + (h/is-equal (i18n/label :t/empty-keycard)))) + + (h/test "Render of keycard component when: Status = Filled, Locked = False" + (h/render [keycard/keycard {:holder-name? "Alisha"}]) + (-> (h/expect (h/query-by-label-text :holder-name)) + (h/is-equal (i18n/label :t/user-keycard {:name :holder-name})))) + + (h/test "Render of keycard component when: Status = Filled, Locked = True" + (h/render [keycard/keycard {:holder-name? "Alisha"}]) + (-> (h/expect (h/query-by-label-text :holder-name)) + (h/is-equal (i18n/label :t/user-keycard {:name :holder-name}))))) diff --git a/src/quo2/components/keycard/style.cljs b/src/quo2/components/keycard/style.cljs new file mode 100644 index 0000000000..d7791c6e0c --- /dev/null +++ b/src/quo2/components/keycard/style.cljs @@ -0,0 +1,42 @@ +(ns quo2.components.keycard.style + (:require [quo2.foundations.colors :as colors])) + +(def keycard-height 210) +(def keycard-chip-height 28) + +(defn card-container + [locked?] + {:overflow :hidden + :height keycard-height + :align-items :flex-start + :justify-content :space-between + :border-width 1 + :border-color (if locked? + colors/white-opa-5 + (colors/theme-colors colors/neutral-20 colors/neutral-80)) + :border-style :solid + :border-radius 16 + :padding 16 + :background-color (if locked? + (colors/theme-colors colors/danger colors/danger-opa-40) + (colors/theme-colors colors/neutral-5 colors/neutral-90))}) + +(defn keycard-logo + [locked?] + {:tint-color (if locked? colors/white (colors/theme-colors colors/neutral-100 colors/white))}) + +(defn keycard-watermark + [locked?] + {:position :absolute + :tint-color (if locked? colors/white-opa-5 (colors/theme-colors colors/neutral-100 colors/white)) + :align-self :center + :height 280.48 + :transform [{:rotate "-30deg"} {:translateY -30}] + :opacity (when-not locked? 0.02) + :z-index 1}) + +(def keycard-chip + {:height keycard-chip-height + :position :absolute + :right 16 + :top (/ (- keycard-height 28) 2)}) diff --git a/src/quo2/components/keycard/view.cljs b/src/quo2/components/keycard/view.cljs new file mode 100644 index 0000000000..ae2b462c38 --- /dev/null +++ b/src/quo2/components/keycard/view.cljs @@ -0,0 +1,38 @@ +(ns quo2.components.keycard.view + (:require [react-native.core :as rn] + [quo2.components.keycard.style :as style] + [quo2.components.tags.tag :as tag] + [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as resources] + [utils.i18n :as i18n])) + +(defn keycard + "This component based on the following properties: + - :holder-name - Can be owner's name. Default is Empty + - :locked? - Boolean to specify whether the keycard is locked or not + " + [{:keys [holder-name locked?]}] + (let [label (if (boolean holder-name) + (i18n/label :t/user-keycard {:name holder-name}) + (i18n/label :t/empty-keycard))] + [rn/view {:style (style/card-container locked?)} + [rn/image + {:source (resources/get-image :keycard-logo) + :style (style/keycard-logo locked?)}] + [rn/image + {:source (resources/get-image + (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light)) + :style style/keycard-chip}] + [rn/image + {:source (resources/get-image :keycard-watermark) + :style (style/keycard-watermark locked?)}] + [tag/tag + {:size 32 + :type (when locked? :icon) + :label label + :labelled? true + :blurred? true + :resource (when locked? :i/locked) + :accessibility-label :holder-name + :icon-color colors/white-70-blur + :override-theme (when locked? :dark)}]])) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 41454db17b..2ea9056018 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -38,6 +38,7 @@ quo2.components.inputs.recovery-phrase.view quo2.components.inputs.search-input.view quo2.components.inputs.title-input.view + quo2.components.keycard.view quo2.components.links.url-preview-list.view quo2.components.links.url-preview.view quo2.components.links.link-preview.view @@ -126,6 +127,7 @@ ;;;; CARDS (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card) +(def keycard quo2.components.keycard.view/keycard) ;;;; COLORS (def color-picker quo2.components.colors.color-picker.view/view) diff --git a/src/quo2/foundations/resources.cljs b/src/quo2/foundations/resources.cljs new file mode 100644 index 0000000000..b897bc5bd5 --- /dev/null +++ b/src/quo2/foundations/resources.cljs @@ -0,0 +1,11 @@ +(ns quo2.foundations.resources) + +(def ui + {:keycard-logo (js/require "../resources/images/ui2/keycard-logo.png") + :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png") + :keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png") + :keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")}) + +(defn get-image + [k] + (get ui k)) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 3a8c043da2..9f59ea213c 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -15,7 +15,10 @@ :use-keycard (js/require "../resources/images/ui2/keycard.png") :onboarding-illustration (js/require "../resources/images/ui2/onboarding_illustration.png") :qr-code (js/require "../resources/images/ui2/qr-code.png") - }) + :keycard-logo (js/require "../resources/images/ui2/keycard-logo.png") + :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png") + :keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png") + :keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")}) (def mock-images {:coinbase (js/require "../resources/images/mock2/coinbase.png") diff --git a/src/status_im2/contexts/quo_preview/keycard/keycard.cljs b/src/status_im2/contexts/quo_preview/keycard/keycard.cljs new file mode 100644 index 0000000000..b92373a40a --- /dev/null +++ b/src/status_im2/contexts/quo_preview/keycard/keycard.cljs @@ -0,0 +1,37 @@ +(ns status-im2.contexts.quo-preview.keycard.keycard + (:require [status-im2.contexts.quo-preview.preview :as preview] + [react-native.core :as rn] + [quo2.foundations.colors :as colors] + [reagent.core :as reagent] + [quo2.core :as quo])) + +(def descriptor + [{:label "Holder" + :key :holder-name + :type :text} + {:label "Locked?" + :key :locked? + :type :boolean}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:holder-name nil + :locked? true})] + (fn + [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view [preview/customizer state descriptor] + [quo/keycard + {:holder-name? (:holder-name @state) + :locked? (:locked? @state)}]]]))) + +(defn preview-keycard + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1}} + [rn/flat-list + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 350a7a5417..71d08cc6f7 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -90,7 +90,8 @@ [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] - [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview])) + [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] + [status-im2.contexts.quo-preview.keycard.keycard :as keycard])) (def screens-categories {:foundations [{:name :shadows @@ -344,7 +345,10 @@ :component network-breakdown/preview-network-breakdown} {:name :network-amount :options {:topBar {:visible true}} - :component network-amount/preview}]}) + :component network-amount/preview}] + :keycard [{:name :keycard-component + :options {:topBar {:visible true}} + :component keycard/preview-keycard}]}) (def screens (flatten (map val screens-categories))) diff --git a/src/status_im2/setup/i18n_test.cljs b/src/status_im2/setup/i18n_test.cljs index e51e13def9..81bcf38019 100644 --- a/src/status_im2/setup/i18n_test.cljs +++ b/src/status_im2/setup/i18n_test.cljs @@ -992,7 +992,9 @@ :your-data-belongs-to-you :your-data-belongs-to-you-description :your-recovery-phrase - :your-recovery-phrase-description}) + :your-recovery-phrase-description + :empty-keycard + :user-keycard}) ;; NOTE: the rest checkpoints are based on the previous one, defined ;; like this: diff --git a/translations/en.json b/translations/en.json index 759e8f5ce9..c334b7a667 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1687,6 +1687,8 @@ "database-reset-content": "Chats, contacts and settings have been deleted. You can use your account with your Keycard", "database-reset-warning": "Database will be reset. Chats, contacts and settings will be deleted", "empty-keycard-required": "Requires an empty Keycard", + "empty-keycard": "Empty Keycard", + "user-keycard": "{{name}} Card", "current": "Current", "choose-storage": "Choose storage", "choose-new-location-for-keystore": "Choose a new location to save your keystore file",