diff --git a/src/quo/components/share/share_qr_code/component_spec.cljs b/src/quo/components/share/share_qr_code/component_spec.cljs index 26991c26d5..7e5a336b2d 100644 --- a/src/quo/components/share/share_qr_code/component_spec.cljs +++ b/src/quo/components/share/share_qr_code/component_spec.cljs @@ -2,9 +2,64 @@ (:require [quo.components.share.share-qr-code.view :as share-qr-code] [test-helpers.component :as h])) +(def qr-label "Text shown below QR") + +(def default-props + {:qr-data qr-label + :qr-image-uri "test-uri" + :full-name "Default name"}) + +(def profile-props + {:type :profile + :profile-picture 123}) + +(def wallet-props {:networks '(:ethereum)}) + +(def text-press-event + {:test-name "Text pressed" + :accessibility-label :share-qr-code-info-text + :event-name :press + :callback-prop-key :on-text-press}) + +(def text-long-press-event + {:test-name "Text long pressed" + :accessibility-label :share-qr-code-info-text + :event-name :long-press + :callback-prop-key :on-text-long-press}) + +(def share-press-event + {:test-name "Share button" + :accessibility-label :link-to-profile + :event-name :press + :callback-prop-key :on-share-press}) + +(def multichain-press-event + {:test-name "Multichain tab pressed" + :accessibility-label :share-qr-code-multichain-tab + :event-name :press + :callback-prop-key :on-multichain-press}) + +(def legacy-press-event + {:test-name "Legacy tab pressed" + :accessibility-label :share-qr-code-legacy-tab + :event-name :press + :callback-prop-key :on-legacy-press}) + +(def settings-press-event + {:test-name "Settings pressed" + :accessibility-label :share-qr-code-settings + :event-name :press + :callback-prop-key :on-settings-press}) + (defn render-share-qr-code - [{share-qr-type :type :as props}] - (let [component-rendered (h/render [share-qr-code/view {:type share-qr-type}]) + [props] + ;; NOTE: rendering the profile type first, so that the re-render is triggered. + ;; Passing a :key breaks it for some reason. + (let [component-rendered (h/render [share-qr-code/view + (merge + default-props + profile-props + {:qr-data "initial-render"})]) rerender-fn (h/get-rerender-fn component-rendered) share-qr-code (h/get-by-label-text :share-qr-code)] ;; Fires on-layout since it's needed to render the content @@ -13,23 +68,52 @@ (h/describe "Share QR Code component" (h/describe "Renders share-qr-code component in all types" - (let [qr-label "Text shown below QR"] - (h/test "Profile" - (render-share-qr-code {:type :profile - :qr-data qr-label}) - (h/is-truthy (h/get-by-text qr-label))) + (h/test "Profile" + (render-share-qr-code (merge default-props + profile-props)) + (h/is-truthy (h/get-by-text qr-label))) - (h/test "Wallet Legacy" - (render-share-qr-code {:type :wallet-legacy - :qr-data qr-label - :emoji "👻"}) - (h/is-truthy (h/get-by-text qr-label))) + (h/test "Wallet Legacy" + (render-share-qr-code (merge default-props + wallet-props + {:type :wallet + :address :legacy})) + (h/is-truthy (h/get-by-text qr-label))) - (h/test "Wallet Multichain" - (render-share-qr-code {:type :wallet-multichain - :qr-data qr-label - :emoji "👻"}) - (h/is-truthy (h/get-by-text qr-label))))) + (h/test "Wallet multichain" + (render-share-qr-code (merge default-props + wallet-props + {:type :wallet + :address :multichain})) + (h/is-truthy (h/get-by-text qr-label))) + + (h/test "Saved address legacy" + (render-share-qr-code (merge default-props + wallet-props + {:type :saved-address + :address :legacy})) + (h/is-truthy (h/get-by-text qr-label))) + + (h/test "Saved address multichain" + (render-share-qr-code (merge default-props + wallet-props + {:type :saved-address + :address :multichain})) + (h/is-truthy (h/get-by-text qr-label))) + + (h/test "Watched address legacy" + (render-share-qr-code (merge default-props + wallet-props + {:type :watched-address + :address :legacy})) + (h/is-truthy (h/get-by-text qr-label))) + + (h/test "Watched address multichain" + (render-share-qr-code (merge default-props + wallet-props + {:type :watched-address + :address :multichain})) + (h/is-truthy (h/get-by-text qr-label)))) (h/describe "Fires all events for all types" (letfn [(test-fire-events [props test-seq] @@ -44,68 +128,86 @@ (h/describe "Profile" (test-fire-events - {:type :profile} - [{:test-name "Text pressed" - :accessibility-label :share-qr-code-info-text - :event-name :press - :callback-prop-key :on-text-press} - {:test-name "Text long pressed" - :accessibility-label :share-qr-code-info-text - :event-name :long-press - :callback-prop-key :on-text-long-press} - {:test-name "Share button" - :accessibility-label :link-to-profile - :event-name :press - :callback-prop-key :on-share-press}])) + (merge default-props + profile-props) + [text-press-event + text-long-press-event + share-press-event])) (h/describe "Wallet Legacy" (test-fire-events - {:type :wallet-legacy :emoji "👽"} - [{:test-name "Text pressed" - :accessibility-label :share-qr-code-info-text - :event-name :press - :callback-prop-key :on-text-press} - {:test-name "Text long pressed" - :accessibility-label :share-qr-code-info-text - :event-name :long-press - :callback-prop-key :on-text-long-press} - {:test-name "Share button pressed" - :accessibility-label :link-to-profile - :event-name :press - :callback-prop-key :on-share-press} - {:test-name "Legacy tab pressed" - :accessibility-label :share-qr-code-legacy-tab - :event-name :press - :callback-prop-key :on-legacy-press} - {:test-name "Multichain tab pressed" - :accessibility-label :share-qr-code-multichain-tab - :event-name :press - :callback-prop-key :on-multichain-press}])) + (merge default-props + wallet-props + {:type :wallet + :address :legacy + :emoji "👻"}) + [text-press-event + text-long-press-event + share-press-event + multichain-press-event + legacy-press-event])) (h/describe "Wallet Multichain" (test-fire-events - {:type :wallet-multichain :emoji "👽"} - [{:test-name "Text pressed" - :accessibility-label :share-qr-code-info-text - :event-name :press - :callback-prop-key :on-text-press} - {:test-name "Text long pressed" - :accessibility-label :share-qr-code-info-text - :event-name :long-press - :callback-prop-key :on-text-long-press} - {:test-name "Share button pressed" - :accessibility-label :link-to-profile - :event-name :press - :callback-prop-key :on-share-press} - {:test-name "Legacy tab pressed" - :accessibility-label :share-qr-code-legacy-tab - :event-name :press - :callback-prop-key :on-legacy-press} - {:test-name "Multichain tab pressed" - :accessibility-label :share-qr-code-multichain-tab - :event-name :press - :callback-prop-key :on-multichain-press} - {:test-name "Settings pressed" - :accessibility-label :share-qr-code-settings - :event-name :press - :callback-prop-key :on-settings-press}]))))) + (merge default-props + wallet-props + {:type :wallet + :address :multichain + :emoji "👻"}) + [text-press-event + text-long-press-event + share-press-event + legacy-press-event + multichain-press-event + settings-press-event])) + + (h/describe "Saved Address Legacy" + (test-fire-events + (merge default-props + wallet-props + {:type :saved-address + :address :legacy}) + [text-press-event + text-long-press-event + share-press-event + legacy-press-event + multichain-press-event])) + + (h/describe "Saved Address Multichain" + (test-fire-events + (merge default-props + wallet-props + {:type :saved-address :address :multichain}) + [text-press-event + text-long-press-event + share-press-event + legacy-press-event + multichain-press-event + settings-press-event])) + + (h/describe "Watched Address Legacy" + (test-fire-events + (merge default-props + wallet-props + {:type :watched-address + :address :legacy + :emoji "👽"}) + [text-press-event + text-long-press-event + share-press-event + legacy-press-event + multichain-press-event])) + + (h/describe "Watched Address Multichain" + (test-fire-events + (merge default-props + wallet-props + {:type :watched-address + :address :multichain + :emoji "👽"}) + [text-press-event + text-long-press-event + share-press-event + legacy-press-event + multichain-press-event + settings-press-event]))))) diff --git a/src/quo/components/share/share_qr_code/schema.cljs b/src/quo/components/share/share_qr_code/schema.cljs new file mode 100644 index 0000000000..c637f36ab6 --- /dev/null +++ b/src/quo/components/share/share_qr_code/schema.cljs @@ -0,0 +1,68 @@ +(ns quo.components.share.share-qr-code.schema + (:require + [quo.foundations.resources :as resources])) + +(defn- valid-network? + [network] + (-> network resources/get-network boolean)) + +(def ?base + [:map + [:type [:enum :profile :wallet :saved-address :watched-address]] + [:full-name :string] + [:qr-image-uri :string] + [:qr-data :string] + [:on-text-press {:optional true} [:maybe fn?]] + [:on-text-long-press {:optional true} [:maybe fn?]] + [:on-share-press {:optional true} [:maybe fn?]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:unblur-on-android? {:optional true} [:maybe :boolean]]]) + +(def ?emoji :string) + +(def ?profile + [:map + [:type [:= :profile]] + [:profile-picture :schema.common/image-source]]) + +(def ?wallet + [:map + [:type [:= :wallet]] + [:emoji {:optional true} [:maybe ?emoji]]]) + +(def ?address-multichain + [:map + [:address [:= :multichain]] + [:on-settings-press {:optional true} fn?]]) + +(def ?address-base + [:merge + [:map + [:networks [:sequential [:fn valid-network?]]] + [:on-legacy-press {:optional true} [:maybe fn?]] + [:on-multichain-press {:optional true} [:maybe fn?]] + [:address [:enum :legacy :multichain]]] + [:multi {:dispatch :address} + [:multichain ?address-multichain]]]) + +(def ?saved-address + [:map + [:type [:= :saved-address]] + [:on-settings-press {:optional true} fn?]]) + +(def ?watched-address + [:map + [:type [:= :watched-address]] + [:emoji {:optional true} [:maybe ?emoji]]]) + +(def ?schema + [:=> + [:catn + [:props + [:multi {:dispatch :type} + [:profile [:merge ?base ?profile]] + [:wallet [:merge ?base ?address-base ?wallet]] + [:saved-address [:merge ?base ?address-base ?saved-address]] + [:watched-address [:merge ?base ?address-base ?watched-address]]]]] + :any]) + diff --git a/src/quo/components/share/share_qr_code/style.cljs b/src/quo/components/share/share_qr_code/style.cljs index 9b13f07dd9..fd61ebdd82 100644 --- a/src/quo/components/share/share_qr_code/style.cljs +++ b/src/quo/components/share/share_qr_code/style.cljs @@ -106,3 +106,6 @@ {:color (-> network-short-name (get-network-full-name :unknown) (colors/resolve-color nil))}) + +(def watched-account-icon + {:margin-left 4}) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index f614cec244..f74961c2bb 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -3,19 +3,25 @@ [clojure.string :as string] [oops.core :as oops] [quo.components.avatars.account-avatar.view :as account-avatar] + [quo.components.avatars.user-avatar.view :as user-avatar] + [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] [quo.components.buttons.button.view :as button] [quo.components.gradient.gradient-cover.view :as gradient-cover] + [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.components.share.qr-code.view :as qr-code] + [quo.components.share.share-qr-code.schema :as component-schema] [quo.components.share.share-qr-code.style :as style] [quo.components.tabs.tab.view :as tab] + [quo.foundations.colors :as colors] [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] + [schema.core :as schema] [utils.i18n :as i18n])) (defn- header - [{:keys [share-qr-type on-legacy-press on-multichain-press]}] + [{:keys [on-legacy-press on-multichain-press address]}] [rn/view {:style style/header-container} [tab/view {:accessibility-label :share-qr-code-legacy-tab @@ -23,7 +29,7 @@ :active-item-container-style style/header-tab-active :item-container-style style/header-tab-inactive :size 24 - :active (= :wallet-legacy share-qr-type) + :active (= :legacy address) :on-press on-legacy-press} (i18n/label :t/legacy)] [rn/view {:style style/space-between-tabs}] @@ -33,7 +39,7 @@ :active-item-container-style style/header-tab-active :item-container-style style/header-tab-inactive :size 24 - :active (= :wallet-multichain share-qr-type) + :active (= :multichain address) :on-press on-multichain-press} (i18n/label :t/multichain)]]) @@ -121,77 +127,69 @@ :on-press on-settings-press} :i/advanced]]) +(defn- header-icon + [{:keys [share-qr-type customization-color emoji profile-picture full-name]}] + (case share-qr-type + :profile [user-avatar/user-avatar + {:size :small + :status-indicator? false + :profile-picture profile-picture + :customization-color customization-color}] + (:wallet :watched-address) [account-avatar/view + {:customization-color customization-color + :emoji emoji + :size 32}] + :saved-address [wallet-user-avatar/wallet-user-avatar + {:size :size-32 + :customization-color customization-color + :full-name full-name}] + nil)) + (defn- share-qr-code [{:keys [share-qr-type qr-image-uri component-width customization-color full-name - profile-picture emoji on-share-press] + profile-picture emoji on-share-press address] :as props}] [:<> [rn/view {:style style/gradient-bg} [gradient-cover/view {:customization-color customization-color :height 463}]] [rn/view {:style style/content-container} - [rn/view - {:style style/share-qr-container} - [rn/view - {:style style/share-qr-inner-container} - [account-avatar/view - {:customization-color customization-color - :emoji emoji - :size 32}] + [rn/view {:style style/share-qr-container} + [rn/view {:style style/share-qr-inner-container} + [header-icon props] [text/text {:size :heading-2 :weight :semi-bold - :style {:margin-left 8}} full-name]] + :style {:margin-left 8}} full-name] + (when (= share-qr-type :watched-address) + [icons/icon + :i/reveal + {:color colors/white-opa-40 + :container-style style/watched-account-icon}])] [share-button {:on-press on-share-press}]] - (when (#{:wallet-legacy :wallet-multichain} share-qr-type) + (when (not= share-qr-type :profile) [header props]) [quo.theme/provider {:theme :light} [qr-code/view {:qr-image-uri qr-image-uri :size (style/qr-code-size component-width) - :avatar (if (= share-qr-type :profile) - :profile - :wallet-account) + :avatar (case share-qr-type + :profile :profile + (:watched-address :wallet) :wallet-account + :saved-address :saved-address + nil) :customization-color customization-color :full-name full-name :profile-picture profile-picture :emoji emoji}]] [rn/view {:style style/bottom-container} - (case share-qr-type - :profile [profile-bottom props] - :wallet-legacy [wallet-legacy-bottom props] - :wallet-multichain [wallet-multichain-bottom props] - nil)]]]) + (if (= share-qr-type :profile) + [profile-bottom props] + (case address + :legacy [wallet-legacy-bottom props] + :multichain [wallet-multichain-bottom props] + nil))]]]) (defn- view-internal - "Receives the following properties: - - type: :profile | :wallet-legacy | :wallet-multichain - - qr-image-uri: Image source value. - - qr-data: Text to show below the QR code. - - on-text-press: Callback for the `qr-data` text. - - on-text-long-press: Callback for the `qr-data` text. - - on-share-press: Callback for the share button. - - customization-color: Custom color for the QR code component. - - unblur-on-android?: [Android only] disables blur for this component. - - Depending on the `type`, different properties are accepted: - `:profile` - - full-name: User full name. - - profile-picture: map ({:source image-source}) or any image source. - `:wallet-legacy` - - emoji: Emoji in a string to show in the QR code. - - on-legacy-press: Callback for the legacy tab. - - on-multichain-press: Callback for the multichain tab. - `:wallet-multichain` - - networks: A vector of network names as keywords (`[:ethereum, :my-net, ...]`). - - on-settings-press: Callback for the settings button. - - emoji: Emoji in a string to show in the QR code. - - on-legacy-press: Callback for the legacy tab. - - on-multichain-press: Callback for the multichain tab. - - WARNING on Android: - Sometimes while using a blur layer on top of another on Android, this component looks - bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it. - " [props] (reagent/with-let [component-width (reagent/atom nil) container-component [rn/view {:background-color style/overlay-color}]] @@ -207,5 +205,6 @@ (assoc :component-width @component-width) (clojure.set/rename-keys {:type :share-qr-type}))]))]])) - -(def view (quo.theme/with-theme view-internal)) +(def view + (quo.theme/with-theme + (schema/instrument #'view-internal component-schema/?schema))) diff --git a/src/status_im/common/qr_codes/view.cljs b/src/status_im/common/qr_codes/view.cljs index 1594a15560..a3da20fa1a 100644 --- a/src/status_im/common/qr_codes/view.cljs +++ b/src/status_im/common/qr_codes/view.cljs @@ -54,38 +54,43 @@ (defn share-qr-code "Receives the following properties: - - type: :profile | :wallet-legacy | :wallet-multichain - - qr-data: Text to encode in the QR code - - qr-data-label-shown: Text to show below the QR code - - on-text-press: Callback for the `qr-data-label-shown` text. - - on-text-long-press: Callback for the `qr-data-label-shown` text. - - on-share-press: Callback for the share button. - - customization-color: Custom color for the QR code component. - - unblur-on-android?: [Android only] disables blur for this component. - - Depending on the `type`, different properties are accepted: - `:profile` - - full-name: User full name. - - profile-picture: map ({:source image-source}) or any image source. - `:wallet-legacy` - - emoji: Emoji in a string to show in the QR code. - - on-info-press: Callback for the info icon. - - on-legacy-press: Callback for the legacy tab. - - on-multichain-press: Callback for the multichain tab. - `:wallet-multichain` - - networks: A vector of network names (`[:ethereum, :optimism, :my-net, ,,,]`) - they will add network prefixes to the address in - `qr-data-label-shown` and the QR code generated. - - on-settings-press: Callback for the settings button. - - emoji: Emoji in a string to show in the QR code. - - on-info-press: Callback for the info icon. - - on-legacy-press: Callback for the legacy tab. - - on-multichain-press: Callback for the multichain tab." - [{:keys [qr-data qr-data-label-shown networks] + - type: :profile | :wallet | :saved-address | :watched-address + - qr-image-uri: Image source value. + - qr-data: Text to show below the QR code. + - on-text-press: Callback for the `qr-data` text. + - on-text-long-press: Callback for the `qr-data` text. + - on-share-press: Callback for the share button. + - customization-color: Custom color for the QR code component. + - unblur-on-android?: [Android only] disables blur for this component. + - full-name: User full name. + + Depending on the `type`, different properties are accepted: + `:profile` + - profile-picture: map ({:source image-source}) or any image source. + `:wallet` + - networks: A vector of network names as keywords (`[:ethereum, :my-net, ...]`). + - emoji: Emoji in a string to show in the QR code. + - on-legacy-press: Callback for the legacy tab. + - on-multichain-press: Callback for the multichain tab. + - address: :legacy | :multichain + `:saved-address` + - networks: A vector of network names as keywords (`[:ethereum, :my-net, ...]`). + - on-settings-press: Callback for the settings button. + - on-legacy-press: Callback for the legacy tab. + - address: :legacy | :multichain + - on-multichain-press: Callback for the multichain tab. + `:watched-address` + - networks: A vector of network names as keywords (`[:ethereum, :my-net, ...]`). + - on-settings-press: Callback for the settings button. + - emoji: Emoji in a string to show in the QR code. + - on-legacy-press: Callback for the legacy tab. + - address: :legacy | :multichain + - on-multichain-press: Callback for the multichain tab." + [{:keys [qr-data qr-data-label-shown networks address] share-qr-type :type :as props}] (let [label (or qr-data-label-shown qr-data) - string-to-encode (if (= share-qr-type :wallet-multichain) + string-to-encode (if (and (= share-qr-type :wallet) (= address :multichain)) (get-qr-data-for-wallet-multichain qr-data networks) qr-data) qr-media-server-uri (image-server/get-qr-image-uri-for-any-url diff --git a/src/status_im/contexts/preview/quo/share/share_qr_code.cljs b/src/status_im/contexts/preview/quo/share/share_qr_code.cljs index 67ee718cd4..f8f0cbcd70 100644 --- a/src/status_im/contexts/preview/quo/share/share_qr_code.cljs +++ b/src/status_im/contexts/preview/quo/share/share_qr_code.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.preview.quo.share.share-qr-code (:require [quo.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.resources :as resources] [status-im.contexts.preview.quo.preview :as preview] @@ -15,8 +14,23 @@ {:key :type :type :select :options [{:key :profile} - {:key :wallet-legacy} - {:key :wallet-multichain}]}]) + {:key :wallet} + {:key :saved-address} + {:key :watched-address}]}]) + +(def possible-networks [:ethereum :optimism :arbitrum :myNet]) + +(def networks-selector + {:key :networks + :type :select + :options [{:key (take 1 possible-networks) + :value "Ethereum"} + {:key (take 2 possible-networks) + :value "Ethereum and Optimism"} + {:key (take 3 possible-networks) + :value "Ethereum, Optimism and Arbitrum"} + {:key (take 4 possible-networks) + :value "Ethereum, Optimism, Arbitrum and unknown"}]}) (def profile-descriptor [{:key :profile-picture @@ -24,40 +38,44 @@ :options [{:key (resources/get-mock-image :user-picture-female2) :value "User 1"} {:key (resources/get-mock-image :user-picture-male4) - :value "User 2"} - {:key nil - :value "No picture"}]} + :value "User 2"}]} {:key :full-name :type :text} (preview/customization-color-option)]) -(def wallet-legacy-descriptor - [{:key :emoji +(def wallet-descriptor + [{:key :address + :type :select + :options [{:key :legacy} + {:key :multichain}]} + {:key :emoji :type :select :options [{:key "🐈"} {:key "👻"} {:key "🐧"}]} + networks-selector (preview/customization-color-option)]) -(def possible-networks [:ethereum :optimism :arbitrum :myNet]) +(def saved-address-descriptor + [{:key :address + :type :select + :options [{:key :legacy} + {:key :multichain}]} + networks-selector + (preview/customization-color-option)]) -(def wallet-multichain-descriptor - [{:key :emoji +(def watched-address-descriptor + [{:key :address + :type :select + :options [{:key :legacy} + {:key :multichain}]} + {:key :emoji :type :select :options [{:key "🐈"} {:key "👻"} {:key "🐧"}]} - (preview/customization-color-option) - {:key :networks - :type :select - :options [{:key (take 1 possible-networks) - :value "Ethereum"} - {:key (take 2 possible-networks) - :value "Ethereum and Optimism"} - {:key (take 3 possible-networks) - :value "Ethereum, Optimism and Arbitrum"} - {:key (take 4 possible-networks) - :value "Ethereum, Optimism, Arbitrum and unknown"}]}]) + networks-selector + (preview/customization-color-option)]) (defn- get-network-short-name-url [network] @@ -84,22 +102,23 @@ (defn view [] (let [state (reagent/atom {:type :profile + :address :legacy :qr-data profile-link :on-share-press #(js/alert "share pressed") :on-text-press #(js/alert "text pressed") :on-text-long-press #(js/alert "text long press") - :profile-picture nil + :profile-picture (resources/get-mock-image :user-picture-female2) :full-name "My User" :customization-color :purple :emoji "🐈" - :on-info-press #(js/alert "Info pressed") :on-legacy-press #(js/alert (str "Tab " % " pressed")) :on-multichain-press #(js/alert (str "Tab " % " pressed")) :networks (take 2 possible-networks) :on-settings-press #(js/alert "Settings pressed")}) _ (add-watch state :change set-qr-data-based-on-type)] (fn [] - (let [qr-url (if (= (:type @state) :wallet-multichain) + (let [qr-url (if (and (= (:address @state) :multichain) + (not= (:type @state) :profile)) (as-> (:networks @state) $ (map get-network-short-name-url $) (apply str $) @@ -112,31 +131,20 @@ :error-level :highest}) typed-descriptor (concat descriptor (case (:type @state) - :profile profile-descriptor - :wallet-legacy wallet-legacy-descriptor - :wallet-multichain wallet-multichain-descriptor + :profile profile-descriptor + :wallet wallet-descriptor + :saved-address saved-address-descriptor + :watched-address watched-address-descriptor nil))] [preview/preview-container {:state state :descriptor typed-descriptor - :component-container-style {:padding-horizontal 0}} - [rn/view - {:style {:flex 1 - :justify-content :flex-end - :align-items :center - :padding-horizontal 20 - :padding-vertical 30}} - [rn/view - {:style {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0}} - [rn/image - {:style {:flex 1 - :resize-mode :stretch} - :source (resources/get-mock-image :dark-blur-bg)}]] - [quo/share-qr-code - (assoc @state - :qr-image-uri qr-media-server-uri - :qr-data qr-url)]]])))) + :blur? true + :blur-height 500 + :component-container-style {:padding-horizontal 0} + :show-blur-background? true + :blur-dark-only? true} + [quo/share-qr-code + (assoc @state + :qr-image-uri qr-media-server-uri + :qr-data qr-url)]])))) diff --git a/src/status_im/contexts/shell/share/wallet/view.cljs b/src/status_im/contexts/shell/share/wallet/view.cljs index e04e6c2b7b..f5ff9148c2 100644 --- a/src/status_im/contexts/shell/share/wallet/view.cljs +++ b/src/status_im/contexts/shell/share/wallet/view.cljs @@ -48,7 +48,7 @@ [props] (let [{:keys [account width index]} props selected-networks (reagent/atom [:ethereum :optimism :arbitrum]) - wallet-type (reagent/atom :wallet-legacy)] + wallet-type (reagent/atom :legacy)] (fn [] (let [share-title (str (:name account) " " (i18n/label :t/address)) qr-url (utils/get-wallet-qr {:wallet-type @wallet-type @@ -62,7 +62,8 @@ [rn/view {:style {:height qr-size :width width :margin-left (if (zero? index) 0 -30)}} [rn/view {:style style/qr-code-container} [quo/share-qr-code - {:type @wallet-type + {:type :wallet + :address @wallet-type :qr-image-uri qr-media-server-uri :qr-data qr-url :networks @selected-networks @@ -71,8 +72,8 @@ :full-name (:name account) :customization-color (:color account) :emoji (:emoji account) - :on-multichain-press #(reset! wallet-type :wallet-multichain) - :on-legacy-press #(reset! wallet-type :wallet-legacy) + :on-multichain-press #(reset! wallet-type :multichain) + :on-legacy-press #(reset! wallet-type :legacy) :on-settings-press #(open-preferences @selected-networks)}]]])))) (def wallet-qr-code-item (memoize wallet-qr-code-item-internal)) diff --git a/src/status_im/contexts/wallet/common/utils.cljs b/src/status_im/contexts/wallet/common/utils.cljs index f06d451f3c..0ab58ea48c 100644 --- a/src/status_im/contexts/wallet/common/utils.cljs +++ b/src/status_im/contexts/wallet/common/utils.cljs @@ -182,7 +182,7 @@ (defn get-wallet-qr [{:keys [wallet-type selected-networks address]}] - (if (= wallet-type :wallet-multichain) + (if (= wallet-type :multichain) (as-> selected-networks $ (map qr-codes/get-network-short-name-url $) (apply str $) diff --git a/src/status_im/contexts/wallet/common/utils_test.cljs b/src/status_im/contexts/wallet/common/utils_test.cljs index 8eac92a613..e52f4e4252 100644 --- a/src/status_im/contexts/wallet/common/utils_test.cljs +++ b/src/status_im/contexts/wallet/common/utils_test.cljs @@ -94,10 +94,10 @@ (deftest test-get-wallet-qr (testing "Test get-wallet-qr function" - (let [wallet-multichain {:wallet-type :wallet-multichain + (let [wallet-multichain {:wallet-type :multichain :selected-networks [:ethereum :optimism] :address "x000"} - wallet-singlechain {:wallet-type :wallet-singlechain + wallet-singlechain {:wallet-type :singlechain :selected-networks [:ethereum :optimism] :address "x000"}] diff --git a/src/status_im/contexts/wallet/share_address/view.cljs b/src/status_im/contexts/wallet/share_address/view.cljs index 18e00f4995..f593b1de24 100644 --- a/src/status_im/contexts/wallet/share_address/view.cljs +++ b/src/status_im/contexts/wallet/share_address/view.cljs @@ -49,27 +49,28 @@ (defn view [] (let [padding-top (:top (safe-area/get-insets)) - wallet-type (reagent/atom :wallet-legacy) + wallet-type (reagent/atom :legacy) ;; Design team is yet to confirm the default selected networks here. ;; Should be the current selected for the account or all the networks always selected-networks (reagent/atom [:ethereum :optimism :arbitrum])] (fn [] - (let [{:keys [address color emoji] :as account} (rf/sub [:wallet/current-viewing-account]) - share-title (str (:name account) " " (i18n/label :t/address)) - qr-url (utils/get-wallet-qr {:wallet-type @wallet-type - :selected-networks - @selected-networks - :address address}) - qr-media-server-uri (image-server/get-qr-image-uri-for-any-url - {:url qr-url - :port (rf/sub [:mediaserver/port]) - :qr-size qr-size - :error-level :highest}) - {:keys [status]} (rf/sub [:get-screen-params]) - title (case status - :share (i18n/label :t/share-address) - :receive (i18n/label :t/receive) - nil)] + (let [{:keys [address color emoji watch-only?] + :as account} (rf/sub [:wallet/current-viewing-account]) + share-title (str (:name account) " " (i18n/label :t/address)) + qr-url (utils/get-wallet-qr {:wallet-type @wallet-type + :selected-networks + @selected-networks + :address address}) + qr-media-server-uri (image-server/get-qr-image-uri-for-any-url + {:url qr-url + :port (rf/sub [:mediaserver/port]) + :qr-size qr-size + :error-level :highest}) + {:keys [status]} (rf/sub [:get-screen-params]) + title (case status + :share (i18n/label :t/share-address) + :receive (i18n/label :t/receive) + nil)] [quo/overlay {:type :shell} [rn/view {:flex 1 @@ -87,7 +88,8 @@ :title title}] [rn/view {:style {:padding-horizontal 20}} [quo/share-qr-code - {:type @wallet-type + {:type (if watch-only? :watched-address :wallet) + :address @wallet-type :qr-image-uri qr-media-server-uri :qr-data qr-url :networks @selected-networks @@ -96,6 +98,6 @@ :full-name (:name account) :customization-color color :emoji emoji - :on-legacy-press #(reset! wallet-type :wallet-legacy) - :on-multichain-press #(reset! wallet-type :wallet-multichain) + :on-legacy-press #(reset! wallet-type :legacy) + :on-multichain-press #(reset! wallet-type :multichain) :on-settings-press #(open-preferences selected-networks)}]]]]))))