From b0d2e6e5d703e69880cc256483acc26486d6d405 Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Wed, 3 Apr 2024 15:57:46 +0100 Subject: [PATCH] Bottom sheet with save and send options not displayed after scanning wallet QR using universal scanner #18928 (#19250) --- .../drawers/drawer_top/component_spec.cljs | 7 +++ .../components/drawers/drawer_top/view.cljs | 15 ++++-- .../list_items/token_network/schema.cljs | 2 +- .../components/share/share_qr_code/style.cljs | 42 --------------- .../components/share/share_qr_code/view.cljs | 23 +++----- .../wallet/address_text/schema.cljs | 7 ++- .../components/wallet/address_text/view.cljs | 53 ++++++++++++------- .../components/wallet/token_input/schema.cljs | 4 +- src/quo/foundations/colors.cljs | 12 +++++ .../contexts/shell/qr_reader/events.cljs | 10 ++++ .../sheets/scanned_wallet_address.cljs | 26 +++++++++ .../contexts/shell/qr_reader/view.cljs | 4 +- .../wallet/common/asset_list/view.cljs | 2 +- src/status_im/contexts/wallet/events.cljs | 10 ++-- .../contexts/wallet/send/events.cljs | 10 ++++ .../contexts/wallet/send/flow_config.cljs | 4 +- .../contexts/wallet/send/from/style.cljs | 7 +++ .../contexts/wallet/send/from/view.cljs | 47 ++++++++++++++++ .../wallet/send/input_amount/view.cljs | 2 +- src/status_im/events.cljs | 1 + src/status_im/navigation/screens.cljs | 6 +++ translations/en.json | 1 + 22 files changed, 200 insertions(+), 95 deletions(-) create mode 100644 src/status_im/contexts/shell/qr_reader/events.cljs create mode 100644 src/status_im/contexts/shell/qr_reader/sheets/scanned_wallet_address.cljs create mode 100644 src/status_im/contexts/wallet/send/from/style.cljs create mode 100644 src/status_im/contexts/wallet/send/from/view.cljs diff --git a/src/quo/components/drawers/drawer_top/component_spec.cljs b/src/quo/components/drawers/drawer_top/component_spec.cljs index fcd057a4fb..10385fe11a 100644 --- a/src/quo/components/drawers/drawer_top/component_spec.cljs +++ b/src/quo/components/drawers/drawer_top/component_spec.cljs @@ -22,6 +22,13 @@ (h/is-truthy (h/get-by-text "Title")) (h/is-truthy (h/get-by-text "Description"))) + (h/test "component renders in address type" + (h/render-with-theme-provider [quo/drawer-top + {:title "0x1" + :type :address}] + theme) + (h/is-truthy (h/get-by-text "0x1"))) + (h/test "component renders in info type" (h/render-with-theme-provider [quo/drawer-top {:title "Title" diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index de4903d0f0..f495bc5373 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -168,11 +168,16 @@ (defn- left-title [{:keys [type label title title-icon theme blur?]}] (case type - :label [text/text - {:weight :medium - :size :paragraph-2 - :style (style/description theme blur?)} - label] + :label [text/text + {:weight :medium + :size :paragraph-2 + :style (style/description theme blur?)} + label] + :address [address-text/view + {:address title + :full-address? true + :weight :semi-bold + :size :heading-2}] [rn/view {:style style/title-container} [text/text {:size :heading-2 diff --git a/src/quo/components/list_items/token_network/schema.cljs b/src/quo/components/list_items/token_network/schema.cljs index 15c69659cc..a6563540e5 100644 --- a/src/quo/components/list_items/token_network/schema.cljs +++ b/src/quo/components/list_items/token_network/schema.cljs @@ -4,7 +4,7 @@ [:=> [:cat [:map - [:token :keyword] + [:token [:or :string :keyword]] [:label :string] [:token-value :string] [:fiat-value :string] diff --git a/src/quo/components/share/share_qr_code/style.cljs b/src/quo/components/share/share_qr_code/style.cljs index fd61ebdd82..2e21fb304e 100644 --- a/src/quo/components/share/share_qr_code/style.cljs +++ b/src/quo/components/share/share_qr_code/style.cljs @@ -16,12 +16,6 @@ :padding-top 12 :padding-bottom 8}) -(def gradient-bg - {:position :absolute - :top 0 - :left 0 - :right 0}) - ;;; Header (def header-container {:flex-direction :row @@ -71,41 +65,5 @@ :justify-content :space-between :flex 1}) -;;; Dashed line -(def ^:private padding-for-divider (+ padding-horizontal 4)) -(def ^:private dashed-line-width 2) -(def ^:private dashed-line-space 4) - -(def dashed-line - {:flex-direction :row - :margin-left -1}) - -(def line - {:background-color colors/white-opa-20 - :width dashed-line-width - :height 1}) - -(def line-space - {:width dashed-line-space - :height 1}) - -(defn number-lines-and-spaces-to-fill - [component-width] - (let [line-and-space-width (+ dashed-line-width dashed-line-space) - width-to-fill (- component-width (* 2 padding-for-divider)) - number-of-lines (* (/ width-to-fill line-and-space-width) 2)] - (inc (int number-of-lines)))) - -(def ^:private get-network-full-name - {"eth" :ethereum - "opt" :optimism - "arb1" :arbitrum}) - -(defn network-short-name-text - [network-short-name] - {: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 6daecf5f9c..a327198633 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -1,6 +1,5 @@ (ns quo.components.share.share-qr-code.view (:require [clojure.set] - [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] @@ -13,6 +12,7 @@ [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.components.wallet.address-text.view :as address-text] [quo.foundations.colors :as colors] [quo.theme] [react-native.core :as rn] @@ -74,21 +74,6 @@ :on-press on-press} :i/share]]) -(defn- network-colored-text - [network-short-name] - [text/text {:style (style/network-short-name-text network-short-name)} - (str network-short-name ":")]) - -(defn- wallet-multichain-colored-address - [full-address] - (let [[networks address] (as-> full-address $ - (string/split $ ":") - [(butlast $) (last $)]) - ->network-hiccup-xf (map #(vector network-colored-text %))] - (as-> networks $ - (into [:<>] ->network-hiccup-xf $) - (conj $ address)))) - (defn- profile-bottom [{:keys [component-width qr-data on-text-press on-text-long-press share-qr-type]}] [rn/view @@ -116,7 +101,11 @@ {:width component-width :on-press on-text-press :on-long-press on-text-long-press} - [wallet-multichain-colored-address qr-data]] + [address-text/view + {:address qr-data + :full-address? true + :weight :regular + :size :paragraph-1}]] [button/button {:icon-only? true :type :grey diff --git a/src/quo/components/wallet/address_text/schema.cljs b/src/quo/components/wallet/address_text/schema.cljs index 5aac406c99..ea68139e84 100644 --- a/src/quo/components/wallet/address_text/schema.cljs +++ b/src/quo/components/wallet/address_text/schema.cljs @@ -10,5 +10,10 @@ [:format {:optional true} [:enum :short :long]] [:theme :schema.common/theme] [:networks {:optional true} - [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]]]]] + [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]] + [:full-address? {:optional true} [:maybe :boolean]] + ;; TODO: size and weight are text schemas and should be imported here + ;; https://github.com/status-im/status-mobile/issues/19443 + [:size {:optional true} [:maybe :keyword]] + [:weight {:optional true} [:maybe :keyword]]]]] :any]) diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs index 8b5eed7f5e..9cb5106356 100644 --- a/src/quo/components/wallet/address_text/view.cljs +++ b/src/quo/components/wallet/address_text/view.cljs @@ -1,5 +1,6 @@ (ns quo.components.wallet.address-text.view - (:require [quo.components.markdown.text :as text] + (:require [clojure.string :as string] + [quo.components.markdown.text :as text] [quo.components.wallet.address-text.schema :as component-schema] [quo.components.wallet.address-text.style :as style] [quo.foundations.colors :as colors] @@ -8,27 +9,39 @@ [utils.address :as utils])) (defn- colored-network-text - [theme network] - (let [{:keys [network-name short-name]} network] - [text/text - {:size :paragraph-2 - :style {:color (colors/resolve-color network-name theme)}} - (str short-name ":")])) + [{:keys [theme network size weight]}] + [text/text + {:size size + :weight weight + :style {:color (colors/resolve-color (keyword network) theme)}} + (str network ":")]) (defn- view-internal - [{:keys [networks address blur? theme format]}] - (let [network-text-xf (map #(colored-network-text theme %)) - address-text [text/text - {:size :paragraph-2 - ;; TODO: monospace font - ;; https://github.com/status-im/status-mobile/issues/17009 - :weight :monospace - :style (style/address-text format blur? theme)} - (if (= format :short) - (utils/get-short-wallet-address address) - address)]] - (as-> networks $ - (into [text/text] network-text-xf $) + [{:keys [networks address blur? theme format full-address? size weight] + :or {size :paragraph-2}}] + (let [network-colored-text (map #(colored-network-text {:theme theme + :network % + :weight weight + :size size})) + [splitted-networks splitted-address] (and full-address? + (as-> address $ + (string/split $ ":") + [(butlast $) (last $)])) + address-internal (if full-address? splitted-address address) + networks-internal (if full-address? + splitted-networks + (map :short-name networks)) + address-text [text/text + {:size size + ;; TODO: monospace font + ;; https://github.com/status-im/status-mobile/issues/17009 + :weight (or weight :monospace) + :style (style/address-text format blur? theme)} + (if (= format :short) + (utils/get-short-wallet-address address-internal) + address-internal)]] + (as-> networks-internal $ + (into [text/text] network-colored-text $) (conj $ address-text)))) (def view diff --git a/src/quo/components/wallet/token_input/schema.cljs b/src/quo/components/wallet/token_input/schema.cljs index e33762864a..117ff863bc 100644 --- a/src/quo/components/wallet/token_input/schema.cljs +++ b/src/quo/components/wallet/token_input/schema.cljs @@ -5,8 +5,8 @@ [:catn [:props [:map - [:token {:optional true} [:maybe :keyword]] - [:currency {:optional true} [:maybe :keyword]] + [:token {:optional true} [:maybe :string :keyword]] + [:currency {:optional true} [:maybe :string :keyword]] [:error? {:optional true} [:maybe :boolean]] [:title {:optional true} [:maybe :string]] [:conversion {:optional true} [:maybe :double]] diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index eddc30f3bc..7181a7c0a3 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -254,6 +254,17 @@ :polygon "#AD71F3" :unknown "#EEF2F5"}) +(def ^:private get-network-full-name + {:eth :ethereum + :opt :optimism + :arb1 :arbitrum}) + +(def ^:private networks-short-name + (reduce (fn [acc [k v]] + (assoc acc k (get networks v))) + {} + get-network-full-name)) + (def socials {:social/link "#647084" :social/facebook "#1877F2" @@ -294,6 +305,7 @@ 60 warning-60}} customization networks + networks-short-name socials)) (defn hex-string? diff --git a/src/status_im/contexts/shell/qr_reader/events.cljs b/src/status_im/contexts/shell/qr_reader/events.cljs new file mode 100644 index 0000000000..f981d1bd5b --- /dev/null +++ b/src/status_im/contexts/shell/qr_reader/events.cljs @@ -0,0 +1,10 @@ +(ns status-im.contexts.shell.qr-reader.events + (:require + [status-im.contexts.shell.qr-reader.sheets.scanned-wallet-address :as scanned-address] + [utils.re-frame :as rf])) + +(rf/reg-event-fx + :generic-scanner/scan-success + (fn [_ [address]] + {:fx [[:dispatch [:navigate-back]] + [:dispatch [:show-bottom-sheet {:content #(scanned-address/view address)}]]]})) diff --git a/src/status_im/contexts/shell/qr_reader/sheets/scanned_wallet_address.cljs b/src/status_im/contexts/shell/qr_reader/sheets/scanned_wallet_address.cljs new file mode 100644 index 0000000000..731848a58a --- /dev/null +++ b/src/status_im/contexts/shell/qr_reader/sheets/scanned_wallet_address.cljs @@ -0,0 +1,26 @@ +(ns status-im.contexts.shell.qr-reader.sheets.scanned-wallet-address + (:require + [quo.core :as quo] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn view + [address] + [:<> + [quo/drawer-top + {:title address + :type :address}] + [quo/action-drawer + [[{:icon :i/send + :accessibility-label :send-asset + :label (i18n/label :t/send-to-this-address) + :on-press (fn [] + (rf/dispatch [:wallet/select-send-address + {:address address + :recipient address + :stack-id :wallet-select-address + :start-flow? true}]))} + {:icon :i/save + :accessibility-label :save-address + :label (i18n/label :t/save-address) + :on-press #(js/alert "feature not implemented")}]]]]) diff --git a/src/status_im/contexts/shell/qr_reader/view.cljs b/src/status_im/contexts/shell/qr_reader/view.cljs index b63b2e481f..737a6a299d 100644 --- a/src/status_im/contexts/shell/qr_reader/view.cljs +++ b/src/status_im/contexts/shell/qr_reader/view.cljs @@ -88,7 +88,9 @@ (load-and-show-profile scanned-text) (eth-address? scanned-text) - (debounce/debounce-and-dispatch [:navigate-to :screen/wallet.accounts scanned-text] 300) + (do + (debounce/debounce-and-dispatch [:generic-scanner/scan-success scanned-text] 300) + (debounce/debounce-and-dispatch [:navigate-change-tab :wallet-stack] 300)) (eip681-address? scanned-text) (do diff --git a/src/status_im/contexts/wallet/common/asset_list/view.cljs b/src/status_im/contexts/wallet/common/asset_list/view.cljs index 2132cb3424..76829fc20f 100644 --- a/src/status_im/contexts/wallet/common/asset_list/view.cljs +++ b/src/status_im/contexts/wallet/common/asset_list/view.cljs @@ -16,7 +16,7 @@ :label (:name token) :token-value (str crypto-formatted " " (:symbol token)) :fiat-value fiat-formatted - :networks (:networks token) + :networks (seq (:networks token)) :on-press #(on-token-press token)}])) (defn view diff --git a/src/status_im/contexts/wallet/events.cljs b/src/status_im/contexts/wallet/events.cljs index 105941c937..296f983d35 100644 --- a/src/status_im/contexts/wallet/events.cljs +++ b/src/status_im/contexts/wallet/events.cljs @@ -43,10 +43,14 @@ (fn [{:keys [db]} [address]] {:db (assoc-in db [:wallet :current-viewing-account-address] address)})) -(rf/reg-event-fx :wallet/close-account-page +(rf/reg-event-fx :wallet/clean-current-viewing-account (fn [{:keys [db]}] - {:db (update db :wallet dissoc :current-viewing-account-address) - :fx [[:dispatch [:pop-to-root :shell-stack]]]})) + {:db (update db :wallet dissoc :current-viewing-account-address)})) + +(rf/reg-event-fx :wallet/close-account-page + (fn [_] + {:fx [[:dispatch [:wallet/clean-current-viewing-account]] + [:dispatch [:pop-to-root :shell-stack]]]})) (rf/reg-event-fx :wallet/get-accounts-success diff --git a/src/status_im/contexts/wallet/send/events.cljs b/src/status_im/contexts/wallet/send/events.cljs index 7b08ba6da1..16e4bb21f1 100644 --- a/src/status_im/contexts/wallet/send/events.cljs +++ b/src/status_im/contexts/wallet/send/events.cljs @@ -357,3 +357,13 @@ {:id :send-transaction-error :type :negative :text (:message error)}]))}]}))) + +(rf/reg-event-fx + :wallet/select-from-account + (fn [_ [{:keys [address stack-id start-flow?]}]] + {:fx [[:dispatch [:wallet/switch-current-viewing-account address]] + [:dispatch + [:wallet/wizard-navigate-forward + {:current-screen stack-id + :start-flow? start-flow? + :flow-id :wallet-flow}]]]})) diff --git a/src/status_im/contexts/wallet/send/flow_config.cljs b/src/status_im/contexts/wallet/send/flow_config.cljs index c5e359e815..0ebe15f564 100644 --- a/src/status_im/contexts/wallet/send/flow_config.cljs +++ b/src/status_im/contexts/wallet/send/flow_config.cljs @@ -1,7 +1,9 @@ (ns status-im.contexts.wallet.send.flow-config) (def steps - [{:screen-id :screen/wallet.select-address + [{:screen-id :screen/wallet.select-from + :skip-step? (fn [db] (some? (get-in db [:wallet :current-viewing-account-address])))} + {:screen-id :screen/wallet.select-address :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :recipient])))} {:screen-id :screen/wallet.select-asset :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :token])))} diff --git a/src/status_im/contexts/wallet/send/from/style.cljs b/src/status_im/contexts/wallet/send/from/style.cljs new file mode 100644 index 0000000000..94ea22b81c --- /dev/null +++ b/src/status_im/contexts/wallet/send/from/style.cljs @@ -0,0 +1,7 @@ +(ns status-im.contexts.wallet.send.from.style) + +(def accounts-list + {:padding-bottom 12}) + +(def accounts-list-container + {:padding-horizontal 8}) diff --git a/src/status_im/contexts/wallet/send/from/view.cljs b/src/status_im/contexts/wallet/send/from/view.cljs new file mode 100644 index 0000000000..500e523f57 --- /dev/null +++ b/src/status_im/contexts/wallet/send/from/view.cljs @@ -0,0 +1,47 @@ +(ns status-im.contexts.wallet.send.from.view + (:require + [quo.core :as quo] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [status-im.common.floating-button-page.view :as floating-button-page] + [status-im.contexts.wallet.common.account-switcher.view :as account-switcher] + [status-im.contexts.wallet.send.from.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- on-press + [address] + (rf/dispatch [:wallet/select-from-account + {:address address + :stack-id :screen/wallet.select-from}])) + +(defn- on-close + [] + (rf/dispatch [:wallet/clean-current-viewing-account]) + (rf/dispatch [:navigate-back])) + +(defn- render-fn + [item] + [quo/account-item + {:on-press #(on-press (:address item)) + :account-props item}]) + +(defn view + [] + (let [accounts (rf/sub [:wallet/accounts-without-watched-accounts])] + [floating-button-page/view + {:footer-container-padding 0 + :header [account-switcher/view + {:on-press on-close + :margin-top (safe-area/get-top) + :switcher-type :select-account}]} + + [quo/page-top + {:title (i18n/label :t/from-label) + :title-accessibility-label :title-label}] + [rn/flat-list + {:style style/accounts-list + :content-container-style style/accounts-list-container + :data accounts + :render-fn render-fn + :shows-horizontal-scroll-indicator false}]])) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index 33d1f85c60..0337985485 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -265,7 +265,7 @@ :currency current-currency :crypto-decimals crypto-decimals :error? @input-error - :networks token-networks + :networks (seq token-networks) :title (i18n/label :t/send-limit {:limit limit-label}) :conversion conversion-rate :show-keyboard? false diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 7c2ff624fb..b0953b123b 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -26,6 +26,7 @@ status-im.contexts.onboarding.events status-im.contexts.profile.events status-im.contexts.profile.settings.events + status-im.contexts.shell.qr-reader.events status-im.contexts.shell.share.events status-im.contexts.syncing.events status-im.contexts.wallet.common.wizard diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 077c272b03..caf1f9923b 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -74,6 +74,7 @@ [status-im.contexts.wallet.create-account.new-keypair.keypair-name.view :as wallet-keypair-name] [status-im.contexts.wallet.create-account.select-keypair.view :as wallet-select-keypair] [status-im.contexts.wallet.create-account.view :as wallet-create-account] + [status-im.contexts.wallet.send.from.view :as wallet-select-from] [status-im.contexts.wallet.send.save-address.view :as wallet-save-address] [status-im.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset] @@ -418,6 +419,11 @@ :insets {:top? true}} :component wallet-select-address/view} + {:name :screen/wallet.select-from + :options {:modalPresentationStyle :overCurrentContext + :insets {:top? true}} + :component wallet-select-from/view} + {:name :screen/wallet.select-asset :options {:insets {:top? true}} :component wallet-select-asset/view} diff --git a/translations/en.json b/translations/en.json index 3883e777d1..c67f0468b0 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2558,6 +2558,7 @@ "keep-key": "KeepKey", "type-your-path": "Type your own derivation path", "default-format": "Default format", + "send-to-this-address": "Send to this address", "address-count": { "one": "1 address", "other": "{{count}} addresses"