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/Account Permissions Quo Component (#18224)

This commit is contained in:
Ajay Sivan 2023-12-20 21:24:13 +05:30 committed by GitHub
parent d0e624afd7
commit 04184b41e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 286 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/quo/components/wallet/account_permissions/component_spec.cljs Normal file
View File

@ -0,0 +1,74 @@
(ns quo.components.wallet.account-permissions.component-spec
(:require
[quo.components.wallet.account-permissions.view :as account-permissions]
[test-helpers.component :as h]
[utils.address :as utils]))
(defn- render
[component]
(h/render-with-theme-provider component :light))
(def ^:private account
{:name "Trip to Vegas"
:address "0x2f0fbf0a93c5999e9b4410848403a02b38983eb2"
:emoji "😊"
:customization-color :blue})
(h/describe "Wallet: Account Permissions"
(h/test "basic render"
(render [account-permissions/view
{:account account}])
(h/is-truthy (h/get-by-label-text :wallet-account-permissions)))
(h/test "render with correct account name, emoji and address"
(render [account-permissions/view
{:account account}])
(h/is-truthy (h/get-by-text (:name account)))
(h/is-truthy (h/get-by-text (:emoji account)))
(h/is-truthy (h/get-by-text (utils/get-short-wallet-address (:address account)))))
(h/test "render without keycard"
(render [account-permissions/view
{:account account}])
(h/is-falsy (h/query-by-label-text :wallet-account-permissions-keycard)))
(h/test "render with keycard"
(render [account-permissions/view
{:account account
:keycard? true}])
(h/is-truthy (h/get-by-label-text :wallet-account-permissions-keycard)))
(h/test "render with token details"
(render [account-permissions/view
{:account account
:token-details [{:token "SNT"
:amount "100"}]}])
(h/is-truthy (h/get-by-text "100 SNT")))
(h/test "render with multiple token details"
(render [account-permissions/view
{:account account
:token-details [{:token "SNT"
:amount "100"}
{:token "ETH"
:amount "18"}
{:token "BTM"
:amount "1000"}]}])
(h/is-truthy (h/get-by-text "100 SNT"))
(h/is-truthy (h/get-by-text "18 ETH"))
(h/is-truthy (h/get-by-text "1000 BTM")))
(h/test "render with no relevant tokens"
(render [account-permissions/view
{:account account
:token-details []}])
(h/is-truthy (h/get-by-translation-text :t/no-relevant-tokens)))
(h/test "render checked? & on-change"
(let [mock-on-change (h/mock-fn)]
(render [account-permissions/view
{:account account
:on-change mock-on-change
:checked? true}])
(h/fire-event :press (h/get-by-label-text :checkbox-on))
(h/was-called-with mock-on-change false))))

37
src/quo/components/wallet/account_permissions/style.cljs Normal file
View File

@ -0,0 +1,37 @@
(ns quo.components.wallet.account-permissions.style
(:require [quo.foundations.colors :as colors]))
(defn container
[theme]
{:font-size 30
:border-radius 16
:border-width 1
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
(def row1
{:flex-direction :row
:height 56
:padding-horizontal 12
:align-items :center})
(def account-details
{:flex 1
:margin-horizontal 8})
(def name-and-keycard
{:flex-direction :row
:align-items :center
:gap 4})
(def row2-content
{:flex-direction :row
:flex-wrap :wrap
:margin-vertical 4
:margin-horizontal 8})
(def no-relevant-tokens
{:color colors/neutral-40
:margin 4})
(def token-and-text
{:margin 4})

95
src/quo/components/wallet/account_permissions/view.cljs Normal file
View File

@ -0,0 +1,95 @@
(ns quo.components.wallet.account-permissions.view
(:require [quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.dividers.divider-line.view :as divider-line]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.selectors.selectors.view :as selectors]
[quo.components.wallet.account-permissions.style :as style]
[quo.components.wallet.address-text.view :as address-text]
[quo.components.wallet.required-tokens.view :as required-tokens]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:account
[:map {:closed true}
[:name [:maybe :string]]
[:address [:maybe :string]]
[:emoji [:maybe :string]]
[:customization-color [:maybe [:or :string :keyword]]]]]
[:token-details {:optional true} [:maybe [:vector required-tokens/?schema]]]
[:keycard? {:optional true} [:maybe :boolean]]
[:checked? {:optional true} [:maybe :boolean]]
[:disabled? {:optional true} [:maybe :boolean]]
[:on-change {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]]]]
:any])
(defn- token-details-section
[tokens]
(when tokens
[:<>
[divider-line/view]
[rn/view {:style style/row2-content}
(if (empty? tokens)
[text/text
{:size :paragraph-2
:style style/no-relevant-tokens}
(i18n/label :t/no-relevant-tokens)]
(let [token-length (dec (count tokens))]
(map-indexed (fn [idx {:keys [token amount]}]
^{:key idx}
[required-tokens/view
{:container-style style/token-and-text
:type :token
:amount amount
:token token
:divider? (not= token-length idx)}])
tokens)))]]))
(defn- view-internal
[{:keys
[checked? disabled? on-change token-details keycard? theme]
{:keys
[name address emoji customization-color]} :account}]
[rn/view
{:style (style/container theme)
:accessibility-label :wallet-account-permissions}
[rn/view {:style style/row1}
[account-avatar/view
{:size 32
:emoji emoji
:customization-color customization-color}]
[rn/view {:style style/account-details}
[rn/view {:style style/name-and-keycard}
[text/text
{:size :paragraph-1
:weight :semi-bold} name]
(when keycard?
[icons/icon :i/keycard-card
{:accessibility-label :wallet-account-permissions-keycard
:size 20
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]
[address-text/view
{:address address
:format :short}]]
[selectors/view
{:type :checkbox
:checked? checked?
:disabled? disabled?
:on-change on-change}]]
[token-details-section token-details]])
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

2
src/quo/core.cljs
View File

@ -149,6 +149,7 @@
quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view
quo.components.wallet.account-overview.view
quo.components.wallet.account-permissions.view
quo.components.wallet.address-text.view
quo.components.wallet.confirmation-progress.view
quo.components.wallet.keypair.view
@ -401,6 +402,7 @@
(def account-card quo.components.wallet.account-card.view/view)
(def account-origin quo.components.wallet.account-origin.view/view)
(def account-overview quo.components.wallet.account-overview.view/view)
(def account-permissions quo.components.wallet.account-permissions.view/view)
(def address-text quo.components.wallet.address-text.view/view)
(def confirmation-propgress quo.components.wallet.confirmation-progress.view/view)
(def keypair quo.components.wallet.keypair.view/view)

1
src/quo/core_spec.cljs
View File

@ -84,6 +84,7 @@
[quo.components.wallet.account-card.component-spec]
[quo.components.wallet.account-origin.component-spec]
[quo.components.wallet.account-overview.component-spec]
[quo.components.wallet.account-permissions.component-spec]
[quo.components.wallet.confirmation-progress.component-spec]
[quo.components.wallet.keypair.component-spec]
[quo.components.wallet.network-amount.component-spec]

3
src/status_im/contexts/quo_preview/main.cljs
View File

@ -172,6 +172,7 @@
[status-im.contexts.quo-preview.wallet.account-origin :as account-origin]
[status-im.contexts.quo-preview.wallet.account-overview :as
account-overview]
[status-im.contexts.quo-preview.wallet.account-permissions :as account-permissions]
[status-im.contexts.quo-preview.wallet.confirmation-progress :as confirmation-progress]
[status-im.contexts.quo-preview.wallet.keypair :as keypair]
[status-im.contexts.quo-preview.wallet.network-amount :as network-amount]
@ -473,6 +474,8 @@
{:name :account-origin :component account-origin/view}
{:name :account-overview
:component account-overview/view}
{:name :account-permissions
:component account-permissions/view}
{:name :confirmation-progress
:component confirmation-progress/view}
{:name :keypair :component keypair/view}

72
src/status_im/contexts/quo_preview/wallet/account_permissions.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns status-im.contexts.quo-preview.wallet.account-permissions
(:require
[quo.core :as quo]
[reagent.core :as reagent]
[status-im.contexts.quo-preview.preview :as preview]))
(def ^:private descriptor
[{:key :name
:type :text}
{:key :address
:type :text}
{:key :emoji
:type :text}
(preview/customization-color-option {:key :account-color})
{:key :keycard?
:type :boolean}
{:key :checked?
:type :boolean}
{:key :disabled?
:type :boolean}
{:key :token-details
:type :select
:options [{:key :no-tokens}
{:key :empty-token-list}
{:key :1-token}
{:key :3-tokens}
{:key :5-tokens}]}])
(def ^:private token-details
{:no-tokens nil
:empty-token-list []
:1-token [{:token "SNT"
:amount "100"}]
:3-tokens [{:token "SNT"
:amount "100"}
{:token "ETH"
:amount "18"}
{:token "BTM"
:amount "1000"}]
:5-tokens [{:token "SNT"
:amount "100"}
{:token "ETH"
:amount "18"}
{:token "BTM"
:amount "1000"}
{:token "CFI"
:amount "1"}
{:token "CK"
:amount "18"}]})
(defn view
[]
(let [state (reagent/atom {:name "Trip to Vegas"
:address "0x2f0fbf0a93c5999e9b4410848403a02b38983eb2"
:emoji "😊"
:account-color :blue
:token-details :no-tokens
:keycard? true
:checked? true
:disabled? false})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/account-permissions
{:account {:name (:name @state)
:address (:address @state)
:emoji (:emoji @state)
:customization-color (:account-color @state)}
:token-details (token-details (:token-details @state))
:keycard? (:keycard? @state)
:checked? (:checked? @state)
:disabled? (:disabled? @state)
:on-change (fn [checked?] (swap! state assoc :checked? checked?))}]])))

3
translations/en.json
View File

@ -2437,5 +2437,6 @@
"save-image-to-photos": "Save image to Photos",
"copy-all-details": "Copy all details",
"share-details": "Share details",
"what-are-you-waiting-for": "What are you waiting for?"
"what-are-you-waiting-for": "What are you waiting for?",
"no-relevant-tokens": "No relevant tokens"
}