From a6d7502455d6065825e891f265cc7bffe2a326d9 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Tue, 7 Nov 2023 07:22:38 +0400 Subject: [PATCH] Wallet: bridge screen (#17758) * wallet: bridge screen --- .../components/wallet/address_text/view.cljs | 4 +- .../contexts/wallet/account/bridge/style.cljs | 14 +++++++ .../contexts/wallet/account/bridge/view.cljs | 42 +++++++++++++++++++ .../contexts/wallet/account/style.cljs | 8 ---- .../wallet/account/tabs/about/view.cljs | 6 +-- .../contexts/wallet/account/view.cljs | 42 ++++--------------- .../contexts/wallet/address_watch/style.cljs | 5 +-- .../contexts/wallet/address_watch/view.cljs | 11 ++--- .../common/network_preferences/style.cljs | 5 --- .../common/sheets/account_options/style.cljs | 6 +++ .../common/sheets/account_options/view.cljs | 35 ++++++++++++++++ .../sheets/network_preferences/style.cljs | 5 +++ .../network_preferences/view.cljs | 4 +- .../contexts/wallet/common/temp.cljs | 42 +++++++++++++++---- .../contexts/wallet/create_account/view.cljs | 4 +- .../contexts/wallet/edit_account/view.cljs | 8 ++-- src/status_im2/navigation/screens.cljs | 19 +++++---- translations/en.json | 6 +-- 18 files changed, 175 insertions(+), 91 deletions(-) create mode 100644 src/status_im2/contexts/wallet/account/bridge/style.cljs create mode 100644 src/status_im2/contexts/wallet/account/bridge/view.cljs delete mode 100644 src/status_im2/contexts/wallet/common/network_preferences/style.cljs create mode 100644 src/status_im2/contexts/wallet/common/sheets/account_options/style.cljs create mode 100644 src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs create mode 100644 src/status_im2/contexts/wallet/common/sheets/network_preferences/style.cljs rename src/status_im2/contexts/wallet/common/{ => sheets}/network_preferences/view.cljs (92%) diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs index d8ea101dee..fb8b8cd89a 100644 --- a/src/quo/components/wallet/address_text/view.cljs +++ b/src/quo/components/wallet/address_text/view.cljs @@ -7,10 +7,10 @@ (defn- colored-network-text [theme network] - (let [{:keys [name short-name]} network] + (let [{:keys [network-name short-name]} network] [text/text {:size :paragraph-2 - :style {:color (colors/resolve-color name theme)}} + :style {:color (colors/resolve-color network-name theme)}} (str short-name ":")])) (defn- view-internal diff --git a/src/status_im2/contexts/wallet/account/bridge/style.cljs b/src/status_im2/contexts/wallet/account/bridge/style.cljs new file mode 100644 index 0000000000..cea6ad623e --- /dev/null +++ b/src/status_im2/contexts/wallet/account/bridge/style.cljs @@ -0,0 +1,14 @@ +(ns status-im2.contexts.wallet.account.bridge.style) + +(def header-container + {:padding-horizontal 20 + :padding-vertical 12}) + +(def input-container + {:padding-horizontal 20 + :padding-vertical 8}) + +(def list-content-container + {:padding-horizontal 8 + :padding-top 4 + :padding-bottom 8}) diff --git a/src/status_im2/contexts/wallet/account/bridge/view.cljs b/src/status_im2/contexts/wallet/account/bridge/view.cljs new file mode 100644 index 0000000000..745a0d29f8 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/bridge/view.cljs @@ -0,0 +1,42 @@ +(ns status-im2.contexts.wallet.account.bridge.view + (:require + [quo.core :as quo] + [quo.foundations.resources :as quo.resources] + [react-native.core :as rn] + [status-im2.contexts.wallet.account.bridge.style :as style] + [status-im2.contexts.wallet.common.sheets.account-options.view :as account-options] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn network-logo + [item] + {:source (quo.resources/get-network (:network-name item))}) + +(defn view + [] + (let [networks (rf/sub [:wallet/network-details]) + networks-logos (map network-logo networks)] + [rn/view {:style {:flex 1}} + [quo/page-nav + {:icon-name :i/close + :on-press #(rf/dispatch [:navigate-back]) + :accessibility-label :top-bar + :right-side :account-switcher + :account-switcher {:customization-color :purple + :on-press #(rf/dispatch [:show-bottom-sheet + {:content account-options/view + :gradient-cover? true + :customization-color :purple}]) + :emoji "🍑"}}] + [quo/text-combinations + {:container-style style/header-container + :title (i18n/label :t/bridge)}] + [quo/input + {:container-style style/input-container + :icon-name :i/search + :placeholder (i18n/label :t/search-assets)}] + [rn/flat-list + {:data (temp/bridge-token-list networks-logos) + :render-fn quo/token-network + :content-container-style style/list-content-container}]])) diff --git a/src/status_im2/contexts/wallet/account/style.cljs b/src/status_im2/contexts/wallet/account/style.cljs index fd44270f1f..bf878cbcd7 100644 --- a/src/status_im2/contexts/wallet/account/style.cljs +++ b/src/status_im2/contexts/wallet/account/style.cljs @@ -1,13 +1,5 @@ (ns status-im2.contexts.wallet.account.style) -(def container - {:flex 1}) - (def tabs {:padding-left 20 :padding-vertical 12}) - -(def drawer-section-label - {:padding-horizontal 20 - :padding-top 12 - :padding-bottom 8}) diff --git a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs index 833b80d5a5..01fe38a390 100644 --- a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs @@ -57,9 +57,9 @@ [quo/data-item (merge temp/data-item-state {:custom-subtitle (fn [] [quo/address-text - {:networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"} - {:name :arbitrum :short-name "arb1"}] + {:networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"} + {:network-name :arbitrum :short-name "arb1"}] :address temp/address :format :long}]) :container-style {:margin-bottom 12} diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 725273fa06..3889f8e5b1 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -5,39 +5,12 @@ [reagent.core :as reagent] [status-im2.contexts.wallet.account.style :as style] [status-im2.contexts.wallet.account.tabs.view :as tabs] + [status-im2.contexts.wallet.common.sheets.account-options.view :as account-options] [status-im2.contexts.wallet.common.temp :as temp] [status-im2.contexts.wallet.common.utils :as utils] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn account-options - [] - [:<> - [quo/drawer-top temp/account-data] - [quo/action-drawer - [[{:icon :i/edit - :accessibility-label :edit - :label (i18n/label :t/edit-account) - :on-press #(rf/dispatch [:navigate-to :wallet-edit-account])} - {:icon :i/copy - :accessibility-label :copy-address - :label (i18n/label :t/copy-address)} - {:icon :i/share - :accessibility-label :share-account - :label (i18n/label :t/share-account)} - {:icon :i/delete - :accessibility-label :remove-account - :label (i18n/label :t/remove-account) - :danger? true}]]] - [quo/divider-line {:container-style {:margin-top 8}}] - [quo/section-label - {:section (i18n/label :t/select-another-account) - :container-style style/drawer-section-label}] - [rn/flat-list - {:data temp/other-accounts - :render-fn (fn [account] [quo/account-item {:account-props account}]) - :style {:margin-horizontal 8}}]]) - (defn buy-drawer [] [:<> @@ -63,7 +36,7 @@ (let [account-address (or account-address (rf/sub [:get-screen-params :wallet-accounts])) account (rf/sub [:wallet/account account-address]) networks (rf/sub [:wallet/network-details])] - [rn/view {:style style/container} + [rn/view {:style {:flex 1}} [quo/page-nav {:type :wallet-networks :background :blur @@ -74,8 +47,8 @@ :right-side :account-switcher :account-switcher {:customization-color :purple :on-press #(rf/dispatch [:show-bottom-sheet - {:content account-options - :gradient-cover? true + {:content account-options/view + :gradient-cover? true :customization-color :purple}]) :emoji "🍑"}}] [quo/account-overview @@ -85,9 +58,10 @@ :customization-color :blue}] [quo/wallet-graph {:time-frame :empty}] [quo/wallet-ctas - {:send-action #(rf/dispatch [:open-modal :wallet-select-address]) - :buy-action #(rf/dispatch [:show-bottom-sheet - {:content buy-drawer}])}] + {:send-action #(rf/dispatch [:open-modal :wallet-select-address]) + :buy-action #(rf/dispatch [:show-bottom-sheet + {:content buy-drawer}]) + :bridge-action #(rf/dispatch [:open-modal :wallet-bridge])}] [quo/tabs {:style style/tabs :size 32 diff --git a/src/status_im2/contexts/wallet/address_watch/style.cljs b/src/status_im2/contexts/wallet/address_watch/style.cljs index 219b9d5fb2..0e52b98216 100644 --- a/src/status_im2/contexts/wallet/address_watch/style.cljs +++ b/src/status_im2/contexts/wallet/address_watch/style.cljs @@ -10,10 +10,9 @@ :padding-horizontal 20 :align-items :flex-end}) -(defn button-container - [bottom] +(def button-container {:position :absolute - :bottom (+ bottom 12) + :bottom 12 :left 20 :right 20 :justify-content :center diff --git a/src/status_im2/contexts/wallet/address_watch/view.cljs b/src/status_im2/contexts/wallet/address_watch/view.cljs index 787dd7194a..602bcb1c74 100644 --- a/src/status_im2/contexts/wallet/address_watch/view.cljs +++ b/src/status_im2/contexts/wallet/address_watch/view.cljs @@ -5,7 +5,6 @@ [quo.theme :as quo.theme] [react-native.clipboard :as clipboard] [react-native.core :as rn] - [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im2.contexts.wallet.address-watch.style :as style] [utils.i18n :as i18n] @@ -13,13 +12,9 @@ (defn view-internal [] - (let [top (safe-area/get-top) - bottom (safe-area/get-bottom) - input-value (reagent/atom "")] + (let [input-value (reagent/atom "")] (fn [] - [rn/view - {:style {:flex 1 - :margin-top top}} + [rn/view {:style {:flex 1}} [quo/page-nav {:type :no-title :icon-name :i/close @@ -42,7 +37,7 @@ [quo/button {:icon-only? true :type :outline} :i/scan]] - [rn/view {:style (style/button-container bottom)} + [rn/view {:style style/button-container} [quo/text "[WIP] Bottom Actions"]]]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/common/network_preferences/style.cljs b/src/status_im2/contexts/wallet/common/network_preferences/style.cljs deleted file mode 100644 index fa08ca5cd8..0000000000 --- a/src/status_im2/contexts/wallet/common/network_preferences/style.cljs +++ /dev/null @@ -1,5 +0,0 @@ -(ns status-im2.contexts.wallet.common.network-preferences.style) - -(def data-item - {:margin-horizontal 20 - :margin-vertical 8}) diff --git a/src/status_im2/contexts/wallet/common/sheets/account_options/style.cljs b/src/status_im2/contexts/wallet/common/sheets/account_options/style.cljs new file mode 100644 index 0000000000..e95dbad264 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/sheets/account_options/style.cljs @@ -0,0 +1,6 @@ +(ns status-im2.contexts.wallet.common.sheets.account-options.style) + +(def drawer-section-label + {:padding-horizontal 20 + :padding-top 12 + :padding-bottom 8}) diff --git a/src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs b/src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs new file mode 100644 index 0000000000..3c1f47bf5f --- /dev/null +++ b/src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs @@ -0,0 +1,35 @@ +(ns status-im2.contexts.wallet.common.sheets.account-options.view + (:require [quo.core :as quo] + [react-native.core :as rn] + [status-im2.contexts.wallet.common.sheets.account-options.style :as style] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn view + [] + [:<> + [quo/drawer-top temp/account-data] + [quo/action-drawer + [[{:icon :i/edit + :accessibility-label :edit + :label (i18n/label :t/edit-account) + :on-press #(rf/dispatch [:navigate-to :wallet-edit-account])} + {:icon :i/copy + :accessibility-label :copy-address + :label (i18n/label :t/copy-address)} + {:icon :i/share + :accessibility-label :share-account + :label (i18n/label :t/share-account)} + {:icon :i/delete + :accessibility-label :remove-account + :label (i18n/label :t/remove-account) + :danger? true}]]] + [quo/divider-line {:container-style {:margin-top 8}}] + [quo/section-label + {:section (i18n/label :t/select-another-account) + :container-style style/drawer-section-label}] + [rn/flat-list + {:data temp/other-accounts + :render-fn (fn [account] [quo/account-item {:account-props account}]) + :style {:margin-horizontal 8}}]]) diff --git a/src/status_im2/contexts/wallet/common/sheets/network_preferences/style.cljs b/src/status_im2/contexts/wallet/common/sheets/network_preferences/style.cljs new file mode 100644 index 0000000000..1eec4dc054 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/sheets/network_preferences/style.cljs @@ -0,0 +1,5 @@ +(ns status-im2.contexts.wallet.common.sheets.network-preferences.style) + +(def data-item + {:margin-horizontal 20 + :margin-vertical 8}) diff --git a/src/status_im2/contexts/wallet/common/network_preferences/view.cljs b/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs similarity index 92% rename from src/status_im2/contexts/wallet/common/network_preferences/view.cljs rename to src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs index 73840282de..155374701f 100644 --- a/src/status_im2/contexts/wallet/common/network_preferences/view.cljs +++ b/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs @@ -1,9 +1,9 @@ -(ns status-im2.contexts.wallet.common.network-preferences.view +(ns status-im2.contexts.wallet.common.sheets.network-preferences.view (:require [quo.core :as quo] [quo.foundations.colors :as colors] [quo.foundations.resources :as resources] [quo.theme :as quo.theme] - [status-im2.contexts.wallet.common.network-preferences.style :as style] + [status-im2.contexts.wallet.common.sheets.network-preferences.style :as style] [utils.i18n :as i18n])) (def mainnet diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index eafba9ef46..ae556ac795 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -109,9 +109,9 @@ :customization-color :blue}) (def network-names - [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"} - {:name :arbitrum :short-name "arb1"}]) + [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"} + {:network-name :arbitrum :short-name "arb1"}]) (def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4") @@ -152,9 +152,9 @@ (def account-data {:title "Trip to Vegas" :type :account - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"} - {:name :arbitrum :short-name "arb1"}] + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"} + {:network-name :arbitrum :short-name "arb1"}] :description "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4" :account-avatar-emoji "🍑" :customization-color :purple}) @@ -164,13 +164,13 @@ :emoji "🍿" :name "New House" :address "0x21af6E0Ba4C4530735616e1Ee7ff5FbCB726f493" - :networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"}]} + :networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"}]} {:customization-color :blue :emoji "🎮" :name "My savings" :address "0x43cf6E0Ba4C4530735616e1Ee7ff5FbCB726f98d" - :networks [{:name :ethereum :short-name "eth"}]}]) + :networks [{:network-name :ethereum :short-name "eth"}]}]) (def asset-snt {:size 24 @@ -268,3 +268,27 @@ :image :icon-avatar :image-props {:icon (status.resources/get-service-image :latamex)} :on-press #(rn/open-url "https://latamex.com")}]) + +(defn bridge-token-list + [networks-list] + [{:token (quo.resources/get-token :snt) + :label "Status" + :token-value "0.00 SNT" + :fiat-value "€0.00" + :networks networks-list + :state :default + :customization-color :blue} + {:token (quo.resources/get-token :eth) + :label "Ethereum" + :token-value "0.00 ETH" + :fiat-value "€0.00" + :networks networks-list + :state :default + :customization-color :blue} + {:token (quo.resources/get-token :dai) + :label "Dai" + :token-value "0.00 DAI" + :fiat-value "€0.00" + :networks networks-list + :state :default + :customization-color :blue}]) diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 187e9326c9..f3009e7ebd 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -54,9 +54,7 @@ [primary-name _] (first (rf/sub [:contacts/contact-two-names-by-identity public-key])) {window-width :width} (rn/get-window)] (fn [{:keys [theme]}] - [rn/view - {:style {:flex 1 - :margin-top top}} + [rn/view {:style {:flex 1}} [quo/page-nav {:type :no-title :background :blur diff --git a/src/status_im2/contexts/wallet/edit_account/view.cljs b/src/status_im2/contexts/wallet/edit_account/view.cljs index 001363d2a9..f7a2a0884f 100644 --- a/src/status_im2/contexts/wallet/edit_account/view.cljs +++ b/src/status_im2/contexts/wallet/edit_account/view.cljs @@ -2,9 +2,9 @@ (:require [quo.core :as quo] [quo.theme :as quo.theme] [reagent.core :as reagent] - [status-im2.contexts.wallet.common.network-preferences.view :as network-preferences] [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as create-or-edit-account] + [status-im2.contexts.wallet.common.sheets.network-preferences.view :as network-preferences] [status-im2.contexts.wallet.edit-account.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -40,9 +40,9 @@ :card? true :title (i18n/label :t/address) :custom-subtitle (fn [] [quo/address-text - {:networks [{:name :ethereum :short-name "eth"} - {:name :optimism :short-name "opt"} - {:name :arbitrum :short-name "arb1"}] + {:networks [{:network-name :ethereum :short-name "eth"} + {:network-name :optimism :short-name "opt"} + {:network-name :arbitrum :short-name "arb1"}] :address account-address :format :long}]) :on-press (fn [] diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index a2acffaf48..2a583f66bf 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -37,6 +37,7 @@ [status-im2.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page] [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing] [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] + [status-im2.contexts.wallet.account.bridge.view :as bridge] [status-im2.contexts.wallet.account.view :as wallet-accounts] [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.collectible.view :as wallet-collectible] @@ -44,7 +45,6 @@ [status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] - [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses] [status-im2.contexts.wallet.scan-account.view :as scan-address] [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im2.navigation.options :as options] @@ -251,23 +251,28 @@ :component wallet-edit-account/view} {:name :wallet-address-watch + :options {:insets {:top? true + :bottom? true}} :component wallet-address-watch/view} + {:name :wallet-bridge + :options {:insets {:top? true} + :modalPresentationStyle :overCurrentContext} + :component bridge/view} + + {:name :wallet-edit-derivation-path + :component wallet-edit-derivation-path/view} + {:name :wallet-collectible :component wallet-collectible/view} {:name :wallet-create-account + :options {:insets {:top? true}} :component wallet-create-account/view} - {:name :wallet-edit-derivation-path - :component wallet-edit-derivation-path/view} - {:name :wallet-saved-address :component wallet-saved-address/view} - {:name :wallet-saved-addresses - :component wallet-saved-addresses/view} - {:name :wallet-select-address :options {:modalPresentationStyle :overCurrentContext} :component wallet-select-address/view} diff --git a/translations/en.json b/translations/en.json index eb5e8ffad5..28b545a243 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2367,12 +2367,12 @@ "network-preferences-desc": "Select which network this address is happy to receive funds on", "layer-2": "Layer 2", "manage-tokens": "Manage tokens", - "sign transactions": "sign transactions", "edit-derivation-path": "Edit derivation path", "path-format": "Path format", - "derivation-path": "Derivation path", "reset": "Reset", "reveal-address": "Reveal address", "derive-addresses": "Derive addresses", - "address-activity": "This address has activity" + "address-activity": "This address has activity", + "sign transactions": "sign transactions", + "search-assets": "Search assets" }