From 0d6bd9c15df6e985f01903d44478241a1a0cfe7c Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 5 Jun 2024 19:10:48 +0300 Subject: [PATCH] [#19734] feat: share saved address QR (#20315) --- .../sheets/address_options/view.cljs | 6 +- .../sheets/share_address/style.cljs | 10 ++ .../sheets/share_address/view.cljs | 100 ++++++++++++++++++ .../settings/wallet/saved_addresses/view.cljs | 13 +-- src/status_im/navigation/screens.cljs | 6 ++ 5 files changed, 128 insertions(+), 7 deletions(-) create mode 100644 src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/style.cljs create mode 100644 src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/view.cljs diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/sheets/address_options/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/address_options/view.cljs index f6a741df3f..fbe1a059de 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/sheets/address_options/view.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/address_options/view.cljs @@ -56,6 +56,10 @@ :shell? true :content (fn [] [remove-address/view opts])}]) + [opts]) + open-show-address-qr (rn/use-callback + #(rf/dispatch [:open-modal + :screen/settings.share-saved-address opts]) [opts])] [quo/action-drawer [[{:icon :i/arrow-up @@ -91,7 +95,7 @@ {:icon :i/qr-code :label (i18n/label :t/show-address-qr) :blur? true - :on-press not-implemented/alert + :on-press open-show-address-qr :accessibility-label :show-address-qr-code} {:icon :i/edit :label (i18n/label :t/edit-account) diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/style.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/style.cljs new file mode 100644 index 0000000000..dad3273a7f --- /dev/null +++ b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/style.cljs @@ -0,0 +1,10 @@ +(ns status-im.contexts.settings.wallet.saved-addresses.sheets.share-address.style) + +(def screen-container + {:flex 1}) + +(def top-container + {:margin-bottom 8}) + +(def qr-wrapper + {:padding-horizontal 20}) diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/view.cljs new file mode 100644 index 0000000000..3099e7b7b4 --- /dev/null +++ b/src/status_im/contexts/settings/wallet/saved_addresses/sheets/share_address/view.cljs @@ -0,0 +1,100 @@ +(ns status-im.contexts.settings.wallet.saved-addresses.sheets.share-address.view + (:require + [quo.core :as quo] + [react-native.core :as rn] + [react-native.platform :as platform] + [status-im.contexts.settings.wallet.saved-addresses.sheets.share-address.style :as style] + [status-im.contexts.wallet.common.utils :as utils] + [status-im.contexts.wallet.common.utils.networks :as network-utils] + [status-im.contexts.wallet.sheets.network-preferences.view :as network-preferences] + [utils.i18n :as i18n] + [utils.image-server :as image-server] + [utils.re-frame :as rf])) + +(def qr-size 500) + +(defn- navigate-back + [] + (rf/dispatch [:navigate-back])) + +(defn- share-action + [address share-title] + (rf/dispatch [:open-share + {:options (if platform/ios? + {:activityItemSources [{:placeholderItem {:type :text + :content address} + :item {:default {:type :text + :content + address}} + :linkMetadata {:title share-title}}]} + {:title share-title + :subject share-title + :message address + :isNewTask true})}])) + +(defn- open-preferences + [selected-networks set-selected-networks] + (let [on-save (fn [chain-ids] + (rf/dispatch [:hide-bottom-sheet]) + (set-selected-networks (map network-utils/id->network chain-ids))) + sheet-content (fn [] + [network-preferences/view + {:blur? true + :selected-networks (set selected-networks) + :on-save on-save + :button-label (i18n/label :t/display)}])] + (rf/dispatch [:show-bottom-sheet + {:theme :dark + :shell? true + :content sheet-content}]))) + +(defn view + [] + (let [{:keys [name address customization-color + network-preferences-names]} (rf/sub [:get-screen-params]) + [wallet-type set-wallet-type] (rn/use-state :legacy) + [selected-networks set-selected-networks] (rn/use-state network-preferences-names) + on-settings-press (rn/use-callback #(open-preferences + selected-networks + set-selected-networks) + [selected-networks]) + on-legacy-press (rn/use-callback #(set-wallet-type :legacy)) + on-multichain-press (rn/use-callback #(set-wallet-type :multichain)) + share-title (str name " " (i18n/label :t/address)) + qr-url (rn/use-memo #(utils/get-wallet-qr + {:wallet-type wallet-type + :selected-networks selected-networks + :address address}) + [wallet-type selected-networks address]) + qr-media-server-uri (rn/use-memo + #(image-server/get-qr-image-uri-for-any-url + {:url qr-url + :port (rf/sub [:mediaserver/port]) + :qr-size qr-size + :error-level :highest}) + [qr-url])] + [quo/overlay + {:type :shell + :top-inset? true} + [rn/view {:style style/screen-container} + [quo/page-nav + {:icon-name :i/close + :on-press navigate-back + :background :blur + :accessibility-label :top-bar}] + [quo/page-top + {:title (i18n/label :t/share-address) + :container-style style/top-container}] + [rn/view {:style style/qr-wrapper} + [quo/share-qr-code + {:type :saved-address + :address wallet-type + :qr-image-uri qr-media-server-uri + :qr-data qr-url + :networks selected-networks + :on-share-press #(share-action qr-url share-title) + :full-name name + :customization-color customization-color + :on-legacy-press on-legacy-press + :on-multichain-press on-multichain-press + :on-settings-press on-settings-press}]]]])) diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs index 0acb718387..70ccf94415 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs @@ -20,7 +20,7 @@ :container-style style/empty-container-style}])) (defn- saved-address - [{:keys [name address chain-short-names customization-color has-ens? ens]}] + [{:keys [name address chain-short-names customization-color has-ens? ens network-preferences-names]}] (let [full-address (str chain-short-names address) on-press-saved-address (rn/use-callback #(rf/dispatch @@ -29,11 +29,12 @@ :shell? true :content (fn [] [address-options/view - {:address address - :chain-short-names chain-short-names - :full-address full-address - :name name - :customization-color customization-color}])}]) + {:address address + :chain-short-names chain-short-names + :full-address full-address + :name name + :network-preferences-names network-preferences-names + :customization-color customization-color}])}]) [address chain-short-names full-address name customization-color])] [quo/saved-address {:blur? true diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 3967cb5d7d..dea050acb4 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -66,6 +66,8 @@ [status-im.contexts.settings.wallet.saved-addresses.add-address-to-save.view :as wallet-add-address-to-save] [status-im.contexts.settings.wallet.saved-addresses.save-address.view :as wallet-save-address] + [status-im.contexts.settings.wallet.saved-addresses.sheets.share-address.view :as + share-saved-address] [status-im.contexts.settings.wallet.saved-addresses.view :as saved-addresses-settings] [status-im.contexts.settings.wallet.wallet-options.view :as wallet-options] [status-im.contexts.shell.activity-center.view :as activity-center] @@ -557,6 +559,10 @@ :options options/transparent-modal-screen-options :component wallet-add-address-to-save/view} + {:name :screen/settings.share-saved-address + :options options/transparent-screen-options + :component share-saved-address/view} + {:name :screen/settings-messages :options options/transparent-modal-screen-options :component settings.messages/view}