status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet: About Tab (#17556) 

* wallet about tab
This commit is contained in:
Omar Basem 2023-10-10 09:30:10 +04:00 committed by GitHub
parent d4cc0189d2
commit bcc175041a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 142 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo2/components/settings/data_item/style.cljs
View File

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

25
src/quo2/components/settings/data_item/view.cljs
View File

@ -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,6 +73,8 @@
{:size size
:blur? blur?
:theme theme}]
(if custom-subtitle
[custom-subtitle props]
[left-subtitle
{:theme theme
:size size
@ -79,10 +84,10 @@
:blur? blur?
:subtitle subtitle
:customization-color customization-color
:emoji emoji}])])
: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}])]))))

28
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

@ -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]]])))
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true}
[quo/data-item @state]])))

10
src/status_im2/contexts/wallet/account/style.cljs
View File

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

6
src/status_im2/contexts/wallet/account/tabs/about/style.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns status-im2.contexts.wallet.account.tabs.about.style)
(def about-tab
{:flex 1
:padding-horizontal 20
:padding-vertical 8})

60
src/status_im2/contexts/wallet/account/tabs/about/view.cljs Normal file
View File

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

6
src/status_im2/contexts/wallet/account/tabs/style.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns status-im2.contexts.wallet.account.tabs.style)
(def empty-container-style
{:justify-content :center
:flex 1
:margin-bottom 44})

10
src/status_im2/contexts/wallet/account/tabs/view.cljs
View File

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

2
src/status_im2/contexts/wallet/account/view.cljs
View File

@ -53,4 +53,4 @@
:data tabs-data
:on-change #(reset! selected-tab %)
:scrollable? true}]
[tabs/view @selected-tab]])))
[tabs/view {:selected-tab @selected-tab}]])))

24
src/status_im2/contexts/wallet/common/temp.cljs
View File

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

9
translations/en.json
View File

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