diff --git a/src/quo2/components/settings/data_item/style.cljs b/src/quo2/components/settings/data_item/style.cljs index 31d689ea34..cd87c72578 100644 --- a/src/quo2/components/settings/data_item/style.cljs +++ b/src/quo2/components/settings/data_item/style.cljs @@ -3,8 +3,7 @@ (defn container [size card? blur? theme] - {:flex 1 - :flex-direction :row + {:flex-direction :row :justify-content :space-between :padding-vertical (when (= size :default) 8) :padding-horizontal (when (= size :default) 12) diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs index 18cdaf2252..cd772a6e2d 100644 --- a/src/quo2/components/settings/data_item/view.cljs +++ b/src/quo2/components/settings/data_item/view.cljs @@ -57,8 +57,11 @@ (i18n/label :t/days)])]) (defn- left-side - [{:keys [theme title status size blur? description icon subtitle label icon-color customization-color - emoji]}] + "The description can either be given as a string `description` or a component `custom-subtitle`" + [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color + customization-color + emoji] + :as props}] [rn/view {:style style/left-side} [left-title {:title title @@ -70,19 +73,21 @@ {:size size :blur? blur? :theme theme}] - [left-subtitle - {:theme theme - :size size - :description description - :icon icon - :icon-color icon-color - :blur? blur? - :subtitle subtitle - :customization-color customization-color - :emoji emoji}])]) + (if custom-subtitle + [custom-subtitle props] + [left-subtitle + {:theme theme + :size size + :description description + :icon icon + :icon-color icon-color + :blur? blur? + :subtitle subtitle + :customization-color customization-color + :emoji emoji}]))]) (defn- right-side - [{:keys [label icon-right? icon-color communities-list]}] + [{:keys [label icon-right? icon icon-color communities-list]}] [rn/view {:style style/right-container} (case label :preview [preview-list/view @@ -95,16 +100,15 @@ nil) (when icon-right? [rn/view {:style (style/right-icon label)} - [icons/icon - (if (= :none label) - :i/copy - :i/chevron-right) + [icons/icon icon {:accessibility-label :icon-right :color icon-color :size 20}]])]) (def view-internal - (fn [{:keys [blur? card? icon-right? label status size theme on-press communities-list] :as props}] + (fn [{:keys [blur? card? icon-right? icon label status size theme on-press communities-list + container-style] + :as props}] (let [icon-color (if (or blur? (= :dark theme)) colors/neutral-40 colors/neutral-50)] @@ -114,12 +118,13 @@ {:accessibility-label :data-item :disabled (not icon-right?) :on-press on-press - :style (style/container size card? blur? theme)} + :style (merge (style/container size card? blur? theme) container-style)} [left-side props] (when (and (= :default status) (not= :small size)) [right-side {:label label :icon-right? icon-right? + :icon icon :icon-color icon-color :communities-list communities-list}])])))) diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index f252b37df5..db961a0c4b 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -1,11 +1,8 @@ (ns status-im2.contexts.quo-preview.settings.data-item (:require [quo2.core :as quo] - [react-native.core :as rn] - [quo2.foundations.colors :as colors] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources] - [react-native.blur :as blur])) + [status-im2.common.resources :as resources])) (def descriptor [{:label "Blur:" @@ -72,23 +69,12 @@ :icon :i/placeholder :emoji "🎮" :customization-color :yellow - :communities-list communities-list}) - blur? (reagent/cursor state [:blur?])] + :communities-list communities-list})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - (when @blur? - [blur/view - {:style {:position :absolute - :left 0 - :right 0 - :bottom 0 - :height 75 - :background-color colors/neutral-80-opa-70} - :overlay-color :transparent}]) - [rn/view - {:style {:align-items :center - :padding-vertical 10 - :margin-horizontal 20}} - [quo/data-item @state]]]))) + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true} + [quo/data-item @state]]))) diff --git a/src/status_im2/contexts/wallet/account/style.cljs b/src/status_im2/contexts/wallet/account/style.cljs index 3faa6a5186..bf878cbcd7 100644 --- a/src/status_im2/contexts/wallet/account/style.cljs +++ b/src/status_im2/contexts/wallet/account/style.cljs @@ -3,13 +3,3 @@ (def tabs {:padding-left 20 :padding-vertical 12}) - -(def wip - {:justify-content :center - :align-items :center - :flex 1}) - -(def empty-container-style - {:justify-content :center - :flex 1 - :margin-bottom 44}) diff --git a/src/status_im2/contexts/wallet/account/tabs/about/style.cljs b/src/status_im2/contexts/wallet/account/tabs/about/style.cljs new file mode 100644 index 0000000000..a87bb22804 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/about/style.cljs @@ -0,0 +1,6 @@ +(ns status-im2.contexts.wallet.account.tabs.about.style) + +(def about-tab + {:flex 1 + :padding-horizontal 20 + :padding-vertical 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 new file mode 100644 index 0000000000..d91c52ebb9 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs @@ -0,0 +1,60 @@ +(ns status-im2.contexts.wallet.account.tabs.about.view + (:require + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [status-im2.contexts.wallet.account.tabs.about.style :as style])) + +(defn description + [{:keys [address]}] + [quo/text {:size :paragraph-2} + (map (fn [network] + ^{:key (str network)} + [quo/text + {:size :paragraph-2 + :weight :medium + :style {:color (colors/custom-color network)}} + (str (subs (name network) 0 3) (when (= network :arbitrum) "1") ":")]) + temp/network-names) + [quo/text + {:size :paragraph-2 + :weight :monospace} + address]]) + +(defn about-options + [] + [quo/action-drawer + [[{:icon :i/link + :accessibility-label :view-on-eth + :label (i18n/label :t/view-on-eth) + :right-icon :i/external} + {:icon :i/link + :accessibility-label :view-on-opt + :label (i18n/label :t/view-on-opt) + :right-icon :i/external} + {:icon :i/link + :accessibility-label :view-on-arb + :label (i18n/label :t/view-on-arb) + :right-icon :i/external} + {:icon :i/copy + :accessibility-label :copy-address + :label (i18n/label :t/copy-address)} + {:icon :i/qr-code + :accessibility-label :show-address-qr + :label (i18n/label :t/show-address-qr)} + {:icon :i/share + :accessibility-label :share-address + :label (i18n/label :t/share-address)}]]]) + +(defn view + [] + [rn/view {:style style/about-tab} + [quo/data-item + (merge temp/data-item-state + {:custom-subtitle (fn [] [description {:address temp/address}]) + :container-style {:margin-bottom 12} + :on-press #(rf/dispatch [:show-bottom-sheet {:content about-options}])})] + [quo/account-origin temp/account-origin-state]]) diff --git a/src/status_im2/contexts/wallet/account/tabs/style.cljs b/src/status_im2/contexts/wallet/account/tabs/style.cljs new file mode 100644 index 0000000000..de78eb9094 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/style.cljs @@ -0,0 +1,6 @@ +(ns status-im2.contexts.wallet.account.tabs.style) + +(def empty-container-style + {:justify-content :center + :flex 1 + :margin-bottom 44}) diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs index 98cb760267..45c14a534a 100644 --- a/src/status_im2/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs @@ -2,12 +2,13 @@ (:require [quo2.core :as quo] [react-native.core :as rn] - [status-im2.contexts.wallet.account.style :as style] + [status-im2.contexts.wallet.account.tabs.style :as style] [status-im2.contexts.wallet.common.temp :as temp] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [status-im2.contexts.wallet.account.tabs.about.view :as about])) (defn view - [selected-tab] + [{:keys [selected-tab]}] (case selected-tab :assets [rn/flat-list {:render-fn quo/token-value @@ -33,5 +34,4 @@ :description (i18n/label :t/no-collectibles-description) :placeholder? true :container-style style/empty-container-style}] - [rn/view {:style style/wip} - [quo/text "[WIP]"]])) + [about/view])) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 906bd70b81..bd71e06062 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -53,4 +53,4 @@ :data tabs-data :on-change #(reset! selected-tab %) :scrollable? true}] - [tabs/view @selected-tab]]))) + [tabs/view {:selected-tab @selected-tab}]]))) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 3fb6613236..88bb343a6a 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -4,6 +4,7 @@ [quo2.core :as quo] [quo2.foundations.resources :as quo.resources] [react-native.core :as rn] + [status-im2.common.resources :as resources] [status-im2.constants :as constants] [status-im2.contexts.wallet.common.utils :as utils] [utils.i18n :as i18n] @@ -140,3 +141,26 @@ :alignment :flex-start} :description :text :description-props {:text (string/replace constants/path-default-wallet #"/" " / ")}}]) + +(def network-names [:ethereum :optimism :arbitrum]) + +(def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4") + +(def data-item-state + {:description :default + :icon-right? true + :icon :i/options + :card? true + :label :none + :status :default + :size :default + :title "Address" + :customization-color :yellow}) + +(def account-origin-state + {:type :default-keypair + :stored :on-keycard + :profile-picture (resources/get-mock-image :user-picture-male5) + :derivation-path (string/replace constants/path-default-wallet #"/" " / ") + :user-name "Alisher Yakupov" + :on-press #(js/alert "pressed")}) diff --git a/translations/en.json b/translations/en.json index 8d355cbc71..e2dd00f9e9 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2333,9 +2333,14 @@ "enter-eth": "Enter any ETH address or ENS name.", "eth-or-ens": "ETH address or ENS name.", "type-pairing-code": "Type or paste pairing code", - "scan-sync-code-placeholder": "cs2:4FH...", "overview": "Overview", "traits": "Traits", "opensea": "OpenSea", - "mainnet": "Mainnet" + "mainnet": "Mainnet", + "scan-sync-code-placeholder": "cs2:4FH...", + "view-on-eth": "View on Etherscan", + "view-on-opt": "View on Optimism Explorer", + "view-on-arb": "View on Arbiscan", + "copy-address": "Copy address", + "show-address-qr": "Show address QR" }