From 04184b41e5ef5509f208eac35706c76e7c028239 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Wed, 20 Dec 2023 21:24:13 +0530 Subject: [PATCH] Wallet/Account Permissions Quo Component (#18224) --- .../account_permissions/component_spec.cljs | 74 +++++++++++++++ .../wallet/account_permissions/style.cljs | 37 ++++++++ .../wallet/account_permissions/view.cljs | 95 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/status_im/contexts/quo_preview/main.cljs | 3 + .../wallet/account_permissions.cljs | 72 ++++++++++++++ translations/en.json | 3 +- 8 files changed, 286 insertions(+), 1 deletion(-) create mode 100644 src/quo/components/wallet/account_permissions/component_spec.cljs create mode 100644 src/quo/components/wallet/account_permissions/style.cljs create mode 100644 src/quo/components/wallet/account_permissions/view.cljs create mode 100644 src/status_im/contexts/quo_preview/wallet/account_permissions.cljs diff --git a/src/quo/components/wallet/account_permissions/component_spec.cljs b/src/quo/components/wallet/account_permissions/component_spec.cljs new file mode 100644 index 0000000000..48f2a2fe29 --- /dev/null +++ b/src/quo/components/wallet/account_permissions/component_spec.cljs @@ -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)))) diff --git a/src/quo/components/wallet/account_permissions/style.cljs b/src/quo/components/wallet/account_permissions/style.cljs new file mode 100644 index 0000000000..8446ca7207 --- /dev/null +++ b/src/quo/components/wallet/account_permissions/style.cljs @@ -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}) diff --git a/src/quo/components/wallet/account_permissions/view.cljs b/src/quo/components/wallet/account_permissions/view.cljs new file mode 100644 index 0000000000..89496bbd27 --- /dev/null +++ b/src/quo/components/wallet/account_permissions/view.cljs @@ -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))) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index dde141b2aa..f34633719c 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -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) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index dc67a4bfac..224d42c66b 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -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] diff --git a/src/status_im/contexts/quo_preview/main.cljs b/src/status_im/contexts/quo_preview/main.cljs index b361a72a6e..c00fe68b35 100644 --- a/src/status_im/contexts/quo_preview/main.cljs +++ b/src/status_im/contexts/quo_preview/main.cljs @@ -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} diff --git a/src/status_im/contexts/quo_preview/wallet/account_permissions.cljs b/src/status_im/contexts/quo_preview/wallet/account_permissions.cljs new file mode 100644 index 0000000000..019d230d29 --- /dev/null +++ b/src/status_im/contexts/quo_preview/wallet/account_permissions.cljs @@ -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?))}]]))) diff --git a/translations/en.json b/translations/en.json index 510957f627..cd3de152b5 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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" }