[#6931] Introduce selection list component for extensions

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/extensions/core.cljs

@@ -20,7 +20,8 @@
             status-im.extensions.ethereum
             [status-im.utils.ethereum.tokens :as tokens]
             [status-im.utils.ethereum.core :as ethereum]
-            [status-im.chat.commands.sending :as commands-sending]))
+            [status-im.chat.commands.sending :as commands-sending]
+            [status-im.ui.components.icons.vector-icons :as icons]))
 
 (re-frame/reg-fx
  ::identity-event
@@ -245,6 +246,15 @@
      (when-let [command (last (first (filter #(= (ffirst %) (name hook-id)) (:id->command db))))]
        (commands-sending/send cofx current-chat-id command params)))))
 
+(handlers/register-handler-fx
+ :extensions/show-selection-screen
+ (fn [cofx [_ _ {:keys [on-select] :as params}]]
+   (navigation/navigate-to-cofx cofx
+                                :selection-modal-screen
+                                (assoc params :on-select #(do
+                                                            (re-frame/dispatch [:navigate-back])
+                                                            (re-frame/dispatch (on-select %)))))))
+
 (defn operation->fn [k]
   (case k
     :plus   +
@@ -324,10 +334,14 @@
     (into [react/view o] (map wrap-view-child children))
     (into [react/view {} (wrap-view-child o)] (map wrap-view-child children))))
 
+(defn icon [o]
+  [icons/icon (:key o) o])
+
 (def capacities
   {:components {'view               {:value view}
                 'text               {:value text}
                 'touchable-opacity  {:value touchable-opacity :properties {:on-press :event}}
+                'icon               {:value icon :properties {:key :keyword :color :keyword}}
                 'image              {:value image :properties {:uri :string}}
                 'input              {:value input :properties {:on-change :event :placeholder :string :keyboard-type :keyword}}
                 'button             {:value button :properties {:enabled :boolean :disabled :boolean :on-click :event}}
@@ -352,6 +366,10 @@
                 {:permissions [:read]
                  :value       :alert
                  :arguments   {:value :string}}
+                'selection-screen
+                {:permissions [:read]
+                 :value       :extensions/show-selection-screen
+                 :arguments   {:items :vector :on-select :event :render :view :title :string :extractor-key :keyword}}
                 'chat.command/set-parameter
                 {:permissions [:read]
                  :value       :extensions.chat.command/set-parameter
@@ -460,7 +478,7 @@
                                :method?    :string
                                :params?    :vector
                                :nonce?     :string
-                               :on-result :event}}
+                               :on-result  :event}}
                 'ethereum/logs
                 {:permissions [:read]
                  :value       :extensions/ethereum-logs
@@ -469,20 +487,20 @@
                                :address?   :vector
                                :topics?    :vector
                                :blockhash? :string
-                               :on-result :event}}
+                               :on-result  :event}}
                 'ethereum/resolve-ens
                 {:permissions [:read]
                  :value       :extensions/ethereum-resolve-ens
-                 :arguments   {:name       :string
+                 :arguments   {:name      :string
                                :on-result :event}}
                 'ethereum/call
                 {:permissions [:read]
                  :value       :extensions/ethereum-call
-                 :arguments   {:to         :string
+                 :arguments   {:to        :string
-                               :method     :string
+                               :method    :string
-                               :params?    :vector
+                               :params?   :vector
-                               :outputs?   :vector
+                               :outputs?  :vector
-                               :on-result  :event}}}
+                               :on-result :event}}}
    :hooks      {:chat.command    commands/command-hook
                 :wallet.settings settings/hook}})
 

src/status_im/ui/screens/db.cljs

@@ -136,6 +136,7 @@
 (spec/def :navigation.screen-params/collectibles-list map?)
 
 (spec/def :navigation.screen-params/show-extension map?)
+(spec/def :navigation.screen-params/selection-modal-screen map?)
 
 (spec/def :navigation/screen-params (spec/nilable (spec/keys :opt-un [:navigation.screen-params/network-details
                                                                       :navigation.screen-params/browser
@@ -145,7 +146,8 @@
                                                                       :navigation.screen-params/edit-contact-group
                                                                       :navigation.screen-params/dapp-description
                                                                       :navigation.screen-params/collectibles-list
-                                                                      :navigation.screen-params/show-extension])))
+                                                                      :navigation.screen-params/show-extension
+                                                                      :navigation.screen-params/selection-modal-screen])))
 
 (spec/def :desktop/desktop (spec/nilable any?))
 (spec/def ::tooltips (spec/nilable any?))

src/status_im/ui/screens/extensions/views.cljs

@@ -48,3 +48,24 @@
                                                        {:justify-content :center})
                        :empty-component         [react/text {:style styles/empty-list}
                                                  (i18n/label :t/no-extension)]}]]]))
+
+(defn- render-selection-item [render on-select]
+  (fn [item]
+    [react/touchable-highlight {:on-press #(on-select item)}
+     [render item]]))
+
+(views/defview selection-modal-screen []
+  (views/letsubs [{:keys [items render title extractor-key on-select]} [:get-screen-params :selection-modal-screen]]
+    [react/view {:flex 1}
+     [status-bar/status-bar]
+     [toolbar/toolbar {}
+      toolbar/default-nav-close
+      [toolbar/content-title title]]
+     [react/view styles/wrapper
+      [list/flat-list {:data                    items
+                       :default-separator?      false
+                       :key-fn                  extractor-key
+                       :render-fn               (render-selection-item render on-select)
+                       :content-container-style {:justify-content :center}
+                       :empty-component         [react/text {:style styles/empty-list}
+                                                 "No items"]}]]]))

src/status_im/ui/screens/views.cljs

@@ -42,7 +42,7 @@
             [status-im.ui.screens.network-settings.views :refer [network-settings]]
             [status-im.ui.screens.network-settings.network-details.views :refer [network-details]]
             [status-im.ui.screens.network-settings.edit-network.views :refer [edit-network]]
-            [status-im.ui.screens.extensions.views :refer [extensions-settings]]
+            [status-im.ui.screens.extensions.views :refer [extensions-settings selection-modal-screen]]
             [status-im.ui.screens.log-level-settings.views :refer [log-level-settings]]
             [status-im.ui.screens.fleet-settings.views :refer [fleet-settings]]
             [status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]]
@@ -248,6 +248,10 @@
          {:headerMode       "none"
           :initialRouteName "wallet"})}
 
+       :selection-modal-screen
+       {:screen (nav-reagent/stack-screen
+                 (wrap-modal :selection-modal-screen selection-modal-screen))}
+
        :wallet-send-modal-stack
        {:screen
         (nav-reagent/stack-navigator (stack-screens {:wallet-send-transaction-modal