View & preview implemented

Signed-off-by: Julien Eluard <[email protected]>

Author: janherich

src/status_im/chat/commands/impl/transactions.cljs

@@ -23,7 +23,8 @@
             [status-im.ui.screens.wallet.choose-recipient.events :as choose-recipient.events]
             [status-im.ui.screens.currency-settings.subs :as currency-settings.subs]
             [status-im.models.transactions :as wallet.transactions]
-            [status-im.ui.screens.navigation :as navigation]))
+            [status-im.ui.screens.navigation :as navigation]
+            status-im.chat.commands.impl.transactions.subs))
 
 ;; common `send/request` functionality
 
@@ -51,7 +52,10 @@
        [react/image {:source (-> asset :icon :source)
                      :style  transactions-styles/asset-icon}]
        [react/text {:style transactions-styles/asset-symbol} name]]
-      [react/text {:style transactions-styles/nft-asset-amount} (money/to-fixed amount)]]]))
+      [react/text {:style {:font-size     16
+                           :color         colors/gray
+                           :padding-right 14}}
+       (money/to-fixed amount)]]]))
 
 (def assets-separator [react/view transactions-styles/asset-separator])
 
@@ -116,14 +120,25 @@
                         :border-radius   2
                         :border-width    1
                         :border-color    colors/gray}
-            [svgimage/svgimage {:style    transactions-styles/nft-token-icon
-                                :source   {:uri image_url}}]
+            [svgimage/svgimage {:style  {:width        100
+                                         :height       100
+                                         :margin-left  20
+                                         :margin-right 20}
+                                :source {:uri image_url}}]
             [react/text {} name]]])
         collectible-tokens)])))
 
 (defn choose-nft-token-suggestion [selected-event-creator]
   [choose-nft-token selected-event-creator])
 
+(defview nft-token [{:keys [name image_url] :as token}]
+  [react/view {:flex-direction :column
+               :align-items    :center}
+   [svgimage/svgimage {:style  {:width  100
+                                :height 100}
+                       :source {:uri image_url}}]
+   [react/text {} name]])
+
 ;;TODO(goranjovic): currently we only allow tokens which are enabled in Manage assets here
 ;; because balances are only fetched for them. Revisit this decision with regard to battery/network consequences
 ;; if we were to update all balances.

src/status_im/chat/commands/impl/transactions/styles.cljs

@@ -23,17 +23,6 @@
 (def asset-symbol
   {:color colors/black})
 
-(def nft-asset-amount
-  {:font-size     16
-   :color         colors/gray
-   :padding-right 14})
-
-(def nft-token-icon
-  {:width        100
-   :height       100
-   :margin-left  20
-   :margin-right 20})
-
 (def asset-name
   {:color        colors/gray
    :padding-left 4})

src/status_im/chat/commands/impl/transactions/subs.cljs

@@ -0,0 +1,8 @@
+(ns status-im.chat.commands.impl.transactions.subs
+  (:require [re-frame.core :as re-frame]))
+
+(re-frame/reg-sub
+ :get-collectible-token
+ :<- [:collectibles]
+ (fn [collectibles [_ nft-symbol token-id]]
+   (get-in collectibles [(keyword nft-symbol) (js/parseInt token-id)])))

src/status_im/extensions/registry.cljs

@@ -12,6 +12,8 @@
 (def components
   {'view           react/view
    'text           react/text
+   'nft-token      transactions/nft-token
+   'send-status    transactions/send-status
    'asset-selector transactions/choose-nft-asset-suggestion
    'token-selector transactions/choose-nft-token-suggestion})
 
@@ -21,11 +23,9 @@
   (reduce (fn [capacities hook]
             (assoc-in capacities [:hooks (host/id hook)] hook))
           {:components    components
-           :queries       #{:get-in}
+           :queries       #{:get-in :get-collectible-token}
            :events        #{:set-in}
-           :permissions   {:read  {:include-paths #{[:network]
-                                                    [:current-chat-id]
-                                                    [:chats #".*"]}}
+           :permissions   {:read  {:include-paths #{[:chats #".*"]}}
                            :write {:include-paths #{}}}}
           app-hooks))