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

Update Wallet: Share QR Code #18454 (#18479) 

* add icon

* fix lint issues

* fix preview props and header icon

* fix watched-address icon condition

* fix header tabs

* draft

* fix network name in multichain mode

* fix lint issues

* update tests

* update comments

* add background color

* update preview file

* update usages

* feat: add schema to quo/share-qr-code component

* test: fixed & re-factored tests after adding schema

* bring back gradient structure

* fix scrolling issue

* fix lint issues

* fix usage

---------

Co-authored-by: Lungu Cristian <lungucristian95@gmail.com>
This commit is contained in:
mmilad75 2024-02-07 17:08:41 +03:30 committed by GitHub
parent 052d88b531
commit 484ab919b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 422 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
src/quo/components/share/share_qr_code/component_spec.cljs
View File

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

68
src/quo/components/share/share_qr_code/schema.cljs Normal file
View File

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

3
src/quo/components/share/share_qr_code/style.cljs
View File

@ -106,3 +106,6 @@
{:color (-> network-short-name
(get-network-full-name :unknown)
(colors/resolve-color nil))})
(def watched-account-icon
{:margin-left 4})

105
src/quo/components/share/share_qr_code/view.cljs
View File

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

61
src/status_im/common/qr_codes/view.cljs
View File

@ -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.
- 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`
- 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]
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

106
src/status_im/contexts/preview/quo/share/share_qr_code.cljs
View File

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

9
src/status_im/contexts/shell/share/wallet/view.cljs
View File

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

2
src/status_im/contexts/wallet/common/utils.cljs
View File

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

4
src/status_im/contexts/wallet/common/utils_test.cljs
View File

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

42
src/status_im/contexts/wallet/share_address/view.cljs
View File

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