diff --git a/src/status_im/chat/commands/impl/transactions.cljs b/src/status_im/chat/commands/impl/transactions.cljs index 4429695c6f..a23e8e64d3 100644 --- a/src/status_im/chat/commands/impl/transactions.cljs +++ b/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. diff --git a/src/status_im/chat/commands/impl/transactions/styles.cljs b/src/status_im/chat/commands/impl/transactions/styles.cljs index ad127ac441..375488d0df 100644 --- a/src/status_im/chat/commands/impl/transactions/styles.cljs +++ b/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}) diff --git a/src/status_im/chat/commands/impl/transactions/subs.cljs b/src/status_im/chat/commands/impl/transactions/subs.cljs new file mode 100644 index 0000000000..4b894f5b6f --- /dev/null +++ b/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)]))) diff --git a/src/status_im/extensions/registry.cljs b/src/status_im/extensions/registry.cljs index 184654c017..cbf57ae666 100644 --- a/src/status_im/extensions/registry.cljs +++ b/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))