Wallet: About Tab (#17556)

* wallet about tab

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)

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}])]))))
 

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]])))

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})

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})

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]])

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})

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]))

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}]])))

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")})

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"
 }