Wallet/Account Permissions Quo Component (#18224)

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

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

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

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)

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]

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}

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

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