diff --git a/src/status_im/ui/screens/network_settings/network_details/views.cljs b/src/status_im/ui/screens/network_settings/network_details/views.cljs new file mode 100644 index 0000000000..039498e07c --- /dev/null +++ b/src/status_im/ui/screens/network_settings/network_details/views.cljs @@ -0,0 +1,36 @@ +(ns status-im.ui.screens.network-settings.network-details.views + (:require-macros [status-im.utils.views :as views]) + (:require + [re-frame.core :as rf] + [status-im.ui.components.status-bar.view :as status-bar] + [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.react :as react] + [status-im.i18n :as i18n] + [status-im.ui.screens.network-settings.styles :as st] + [status-im.ui.screens.network-settings.views :as network-settings])) + +(views/defview network-details [] + (views/letsubs [{:keys [networks/selected-network]} [:get-screen-params] + {:keys [network]} [:get-current-account]] + (let [{:keys [id name config]} selected-network + connected? (= id network)] + [react/view {:flex 1} + [status-bar/status-bar] + [toolbar/simple-toolbar] + [network-settings/network-badge + {:name name + :connected? connected?}] + (when-not connected? + [react/touchable-highlight {:on-press #(rf/dispatch [:connect-network id])} + [react/view st/connect-button-container + [react/view {:style st/connect-button + :accessibility-label :network-connect-button} + [react/text {:style st/connect-button-label + :uppercase? true} + (i18n/label :t/connect)]] + [react/text {:style st/connect-button-description} + (i18n/label :t/connecting-requires-login)]]]) + [react/view st/network-config-container + [react/text {:style st/network-config-text + :accessibility-label :network-details-text} + config]]]))) diff --git a/src/status_im/ui/screens/network_settings/views.cljs b/src/status_im/ui/screens/network_settings/views.cljs index 5a6f595843..942735581c 100644 --- a/src/status_im/ui/screens/network_settings/views.cljs +++ b/src/status_im/ui/screens/network_settings/views.cljs @@ -15,6 +15,16 @@ [react/view (styles/network-icon connected? size) [vector-icons/icon :icons/network {:color (if connected? :white :gray)}]]) +(defn network-badge [& [{:keys [name connected?]}]] + [react/view styles/network-badge + [network-icon connected? 56] + [react/view {:padding-left 16} + [react/text {:style styles/badge-name-text} + (or name (i18n/label :t/new-network))] + (when connected? + [react/text {:style styles/badge-connected-text} + (i18n/label :t/connected)])]]) + (defn actions-view [] [react/view action-button-styles/actions-list]) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 21813c2ae1..4e978bcc4e 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -39,6 +39,7 @@ [status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]] [status-im.ui.screens.wallet.components.views :refer [contact-code recent-recipients recipient-qr-code]] [status-im.ui.screens.network-settings.views :refer [network-settings]] + [status-im.ui.screens.network-settings.network-details.views :refer [network-details]] [status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]] [status-im.ui.screens.browser.views :refer [browser]] [status-im.ui.screens.add-new.open-dapp.views :refer [open-dapp dapp-description]] @@ -150,6 +151,7 @@ :login login :recover recover :network-settings network-settings + :network-details network-details :offline-messaging-settings offline-messaging-settings :recent-recipients recent-recipients :recipient-qr-code recipient-qr-code