WIP: debugging

Co-authored-by: Siddarth Kumar <siddarthkay@gmail.com>
Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>

shadow-cljs.edn

@@ -45,6 +45,9 @@
    ;; To match the folder created by Nix build of JSBundle.
    :output-dir "result"
    :init-fn status-im.core/init
+   :build-hooks [(status-im.setup.build-hooks.worklets/transform-output)
+                 (status-im.setup.build-hooks.worklets/optimize-start)
+                 (status-im.setup.build-hooks.worklets/optimize-output)]
    ;; When false, the Shadow-CLJS watcher won't automatically refresh
    ;; the target files (a.k.a hot reload). When false, you can manually
    ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.

src/quo/components/buttons/button/properties.cljs

@@ -4,11 +4,15 @@
 
 (def backgrounds #{:photo :blur})
 
+;; Note: We hardcode the :light theme for the background-color and apply an overlay when necessary, such
+;; as for dark themes and pressed states. This approach is taken because, for communities, we only have
+;; one color available, which is the light theme version.
+;; For more information, see the related issue: https://github.com/status-im/status-mobile/issues/16396
 (defn- custom-color-type
-  [customization-color icon-only? theme]
+  [customization-color icon-only?]
   {:icon-color                  colors/white-opa-70
    :label-color                 colors/white
-   :background-color            (colors/resolve-color customization-color theme)
+   :background-color            (colors/resolve-color customization-color :light)
    :border-radius               (when icon-only? 24)
    :overlay-customization-color customization-color})
 
@@ -87,8 +91,7 @@
                                  type)]
     (cond
       (contains? #{:primary :positive :danger} type) (custom-color-type customization-color
-                                                                        icon-only?
-                                                                        theme)
+                                                                        icon-only?)
       (and (= :photo background) (= type :grey))     (grey-photo theme pressed?)
       (and (= :blur background) (= type :grey))      (grey-blur theme pressed?)
       (and (= :blur background) (= type :outline))   (outline-blur theme pressed?)

src/quo/components/tags/collectible_tag/style.cljs

@@ -0,0 +1,50 @@
+(ns quo.components.tags.collectible-tag.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn container
+  [size options blur? theme]
+  (let [hold? (= options :hold)]
+    (merge {:background-color (if blur?
+                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+            :flex-direction   :row
+            :align-items      :center
+            :padding-left     2
+            :border-width     (if hold? 1 0)
+            :border-radius    0
+            :border-color     (colors/resolve-color :success theme)}
+           (condp = size
+             :size-24 {:height        (if hold? 26 24)
+                       :padding-right 10
+                       :border-radius 8}
+             :size-32 {:height        (if hold? 34 32)
+                       :padding-right 12
+                       :border-radius 10}))))
+
+(defn options-icon
+  [size]
+  (assoc
+   (condp = size
+     :size-24 {:right -8
+               :top   -8}
+     :size-32 {:right -6
+               :top   -6})
+   :position
+   :absolute))
+
+(defn collectible-img
+  [size]
+  (condp = size
+    :size-24 {:width         20
+              :height        20
+              :margin-right  6
+              :border-radius 6}
+    :size-32 {:width         28
+              :height        28
+              :margin-right  8
+              :border-radius 8}))
+
+(defn label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo/components/tags/collectible_tag/view.cljs

@@ -0,0 +1,70 @@
+(ns quo.components.tags.collectible-tag.view
+  (:require
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.collectible-tag.style :as style]
+    [quo.theme]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]
+    [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:options {:optional true} [:maybe [:enum false :add :hold]]]
+      [:size {:optional true} [:enum :size-24 :size-32]]
+      [:blur? {:optional true} :boolean]
+      [:theme :schema.common/theme]
+      [:collectible-img-src [:or :int :string]]
+      [:collectible-name :string]
+      [:collectible-id :string]
+      [:container-width :number]
+      [:on-layout {:optional true} [:maybe fn?]]]]]
+   :any])
+
+(defn- view-internal
+  []
+  (fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id
+               container-width on-layout]
+        :or   {size :size-24}}]
+    [rn/view
+     {:on-layout on-layout}
+     [hole-view/hole-view
+      {:holes (if options
+                [{:x            (- container-width
+                                   (case size
+                                     :size-24 10
+                                     :size-32 12
+                                     nil))
+                  :y            (case size
+                                  :size-24 -6
+                                  :size-32 -4
+                                  nil)
+                  :width        16
+                  :height       16
+                  :borderRadius 8}]
+                [])}
+      [rn/view {:style (style/container size options blur? theme)}
+       [rn/image {:style (style/collectible-img size) :source collectible-img-src}]
+       [text/text
+        {:size   :paragraph-2
+         :weight :medium
+         :style  (style/label theme)}
+        collectible-name]
+       [text/text
+        {:size        :paragraph-2
+         :weight      :medium
+         :margin-left 5
+         :style       (style/label theme)}
+        collectible-id]]]
+     (when options
+       [rn/view {:style (style/options-icon size)}
+        [icons/icon (if (= options :hold) :i/hold :i/add-token)
+         {:size     20
+          :no-color true}]])]))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/amount_input/component_spec.cljs

@@ -0,0 +1,43 @@
+(ns quo.components.wallet.amount-input.component-spec
+  (:require
+    [oops.core :as oops]
+    [quo.components.wallet.amount-input.view :as amount-input]
+    [quo.foundations.colors :as colors]
+    [test-helpers.component :as h]))
+
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
+(h/describe "Amount input component"
+  (h/test "Renders with default value"
+    (let [text-expected 0]
+      (render [amount-input/view {:init-value text-expected}])
+      (h/is-truthy (h/query-by-label-text :amount-input))
+      (h/is-equal (oops/oget (h/get-by-label-text :amount-input) "props" "value")
+                  (str text-expected))))
+
+  (h/test "When the value = minimum dec button is disabled"
+    (render [amount-input/view
+             {:init-value 0
+              :min-value  0}])
+    (h/is-truthy
+     (oops/oget (h/get-by-label-text :amount-input-dec-button) "props" "accessibilityState" "disabled")))
+
+  (h/test "When the value = maximum inc button is disabled"
+    (render [amount-input/view
+             {:init-value 100
+              :max-value  100}])
+    (h/is-truthy
+     (oops/oget (h/get-by-label-text :amount-input-inc-button) "props" "accessibilityState" "disabled")))
+
+  (h/test "Renders the error state"
+    (render [amount-input/view {:status :error}])
+    (h/is-equal (colors/resolve-color :danger :light)
+                (oops/oget (h/get-by-label-text :amount-input) "props" "style" "color")))
+
+  (h/test "on-change-text function is fired"
+    (let [on-change-text (h/mock-fn)]
+      (render [amount-input/view {:on-change-text on-change-text}])
+      (h/fire-event :change-text (h/get-by-label-text :amount-input) "100")
+      (h/was-called on-change-text))))

src/quo/components/wallet/amount_input/schema.cljs

@@ -0,0 +1,21 @@
+(ns quo.components.wallet.amount-input.schema)
+
+(def return-key-types
+  [:enum :done :go :next :search :send :none :previous :default
+   :emergency-call :google :join :route :yahoo])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:status {:optional true} [:maybe [:enum :default :error]]]
+      [:theme :schema.common/theme]
+      [:on-change-text {:optional true} [:maybe fn?]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:auto-focus? {:optional true} [:maybe :boolean]]
+      [:min-value {:optional true} [:maybe :int]]
+      [:max-value {:optional true} [:maybe :int]]
+      [:return-key-type {:optional true} [:maybe return-key-types]]
+      [:init-value {:optional true} [:maybe :int]]]]]
+   :any])

src/quo/components/wallet/amount_input/style.cljs

@@ -0,0 +1,17 @@
+(ns quo.components.wallet.amount-input.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction  :row
+   :justify-content :center
+   :align-items     :center})
+
+(def input-container {:flex 1})
+
+(defn input-text
+  [theme type]
+  {:padding 0
+   :color   (if (= type :error)
+              (colors/resolve-color :danger theme)
+              (colors/theme-colors colors/neutral-100 colors/white theme))})

src/quo/components/wallet/amount_input/view.cljs

@@ -0,0 +1,81 @@
+(ns quo.components.wallet.amount-input.view
+  (:require
+    [quo.components.buttons.button.view :as button]
+    [quo.components.markdown.text :as text]
+    [quo.components.wallet.amount-input.schema :as amount-input.schema]
+    [quo.components.wallet.amount-input.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
+
+(defn- amount-button
+  [{:keys [theme accessibility-label disabled? icon on-press]}]
+  [button/button
+   {:icon-only?          true
+    :theme               theme
+    :disabled?           disabled?
+    :type                :outline
+    :accessibility-label accessibility-label
+    :size                32
+    :on-press            on-press}
+   icon])
+
+(defn- process-amount
+  [input-value min-value max-value]
+  (let [parsed-input-value (parse-double input-value)]
+    (cond
+      (nil? parsed-input-value)  min-value
+      (>= input-value max-value) max-value
+      (<= input-value min-value) min-value
+      :else                      parsed-input-value)))
+
+(defn- view-internal
+  [{:keys [init-value]}]
+  (let [init-value   (or init-value 0)
+        value        (reagent/atom init-value)
+        on-dec-press #(swap! value dec)
+        on-inc-press #(swap! value inc)]
+    (fn [{:keys [theme status min-value max-value auto-focus?
+                 return-key-type container-style on-change-text]}]
+      (let [min-value (or min-value 0)
+            max-value (or max-value 999999999)]
+        [rn/view
+         {:style (merge style/container container-style)}
+         [amount-button
+          {:theme               theme
+           :accessibility-label :amount-input-dec-button
+           :icon                :i/remove
+           :on-press            on-dec-press
+           :disabled?           (>= min-value @value)}]
+         [rn/view {:style style/input-container}
+          [rn/text-input
+           {:style
+            (text/text-style
+             {:size   :heading-1
+              :weight :semi-bold
+              :align  :center
+              :style  (style/input-text theme (or status :default))})
+            :accessibility-label :amount-input
+            :editable true
+            :auto-focus (or auto-focus? false)
+            :value (str @value)
+            :keyboard-appearance (quo.theme/theme-value :light :dark theme)
+            :return-key-type (or return-key-type :done)
+            :input-mode :numeric
+            :on-change-text (fn [input-value]
+                              (let [processed-amount (process-amount input-value min-value max-value)]
+                                (reset! value processed-amount)
+                                (when on-change-text
+                                  (on-change-text processed-amount))
+                                (reagent/flush)))}]] ; Fixes the input flickering issue when typing.
+         [amount-button
+          {:theme               theme
+           :icon                :i/add
+           :accessibility-label :amount-input-inc-button
+           :on-press            on-inc-press
+           :disabled?           (>= @value max-value)}]]))))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal amount-input.schema/?schema)))

src/quo/components/wallet/confirmation_progress/component_spec.cljs

@@ -2,7 +2,6 @@
   (:require [quo.core :as quo]
             [test-helpers.component :as h]))
 
-(def ^:private theme :light)
 
 (defn- get-test-data
   [{:keys [state network]
@@ -18,94 +17,99 @@
   (h/test "component renders when state is sending and network is optimism"
     (h/render-with-theme-provider [quo/confirmation-propgress
                                    (get-test-data {:state   :sending
-                                                   :network :optimism})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+                                                   :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box))))
 
-  (h/test "component renders when state is confirmed and network is optimism"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :confirmed
-                                                   :network :optimism})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is confirmed and network is optimism"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :confirmed
+                    :network :optimism})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is finalising and network is optimism"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :finalising
-                                                   :network :optimism})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is finalising and network is optimism"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :finalising
+                    :network :optimism})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is finalized and network is optimism"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :finalized
-                                                   :network :optimism})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is finalized and network is optimism"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :finalized
+                    :network :optimism})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is error and network is optimism"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :error
-                                                   :network :optimism})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is error and network is optimism"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :error
+                    :network :optimism})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is sending and network is arbitrum"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :sending
-                                                   :network :arbitrum})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is sending and network is arbitrum"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :sending
+                    :network :arbitrum})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is confirmed and network is arbitrum"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :confirmed
-                                                   :network :arbitrum})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is confirmed and network is arbitrum"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :confirmed
+                    :network :arbitrum})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is finalising and network is arbitrum"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :finalising
-                                                   :network :arbitrum})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is finalising and network is arbitrum"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :finalising
+                    :network :arbitrum})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is finalized and network is arbitrum"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :finalized
-                                                   :network :arbitrum})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is finalized and network is arbitrum"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :finalized
+                    :network :arbitrum})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is error and network is arbitrum"
-    (h/render-with-theme-provider [quo/confirmation-propgress
-                                   (get-test-data {:state   :error
-                                                   :network :arbitrum})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :progress-box)))
+(h/test "component renders when state is error and network is arbitrum"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state   :error
+                    :network :arbitrum})])
+  (h/is-truthy (h/get-by-label-text :progress-box)))
 
-  (h/test "component renders when state is pending and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {})] theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+(h/test "component renders when state is pending and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress (get-test-data {})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
-  (h/test "component renders when state is sending and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :sending})] theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+(h/test "component renders when state is sending and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress (get-test-data {:state :sending})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
-  (h/test "component renders when state is confirmed and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :confirmed})] theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+(h/test "component renders when state is confirmed and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress (get-test-data {:state :confirmed})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
-  (h/test "component renders when state is finalising and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalising})]
-                                  theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+(h/test "component renders when state is finalising and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress (get-test-data {:state :finalising})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
-  (h/test "component renders when state is finalized and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :finalized})] theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+(h/test "component renders when state is finalized and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress (get-test-data {:state :finalized})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
-  (h/test "component renders when state is error and network is mainnet"
-    (h/render-with-theme-provider [quo/confirmation-propgress (get-test-data {:state :error})] theme)
-    (h/is-truthy (h/get-by-label-text :mainnet-progress-box))))
+(h/test "component renders when state is error and network is mainnet"
+  (h/render-with-theme-provider
+   [quo/confirmation-propgress
+    (get-test-data {:state :error})])
+  (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))

src/quo/components/wallet/network_amount/component_spec.cljs

@@ -5,7 +5,8 @@
 
 (h/describe "Wallet: Network Amount"
   (h/test "Amount renders"
-    (h/render [network-amount/view
-               {:amount "5.123"
-                :token  :eth}])
+    (h/render-with-theme-provider
+     [network-amount/view
+      {:amount "5.123"
+       :token  :eth}])
     (h/is-truthy (h/get-by-text "5.123 ETH"))))

src/quo/components/wallet/network_amount/view.cljs

@@ -5,7 +5,18 @@
     [quo.components.utilities.token.view :as token]
     [quo.components.wallet.network-amount.style :as style]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:amount {:optional true} [:maybe :string]]
+      [:token {:optional true} [:or :keyword :string]]
+      [:theme :schema.common/theme]]]]
+   :any])
 
 (defn- view-internal
   [{:keys [amount token theme]}]
@@ -19,4 +30,4 @@
    [rn/view
     {:style (style/divider theme)}]])
 
-(def view (quo.theme/with-theme view-internal))
+(def view (quo.theme/with-theme (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/network_bridge/component_spec.cljs

@@ -4,37 +4,37 @@
     [test-helpers.component :as h]))
 
 (h/describe "Wallet: Network Bridge"
-  (h/test "Amount renders"
-    (h/render [network-bridge/view
-               {:amount  "50 SNT"
-                :network :ethereum
-                :status  :default}])
+  (h/test "Amount render-with-theme-providers"
+    (h/render-with-theme-provider [network-bridge/view
+                                   {:amount  "50 SNT"
+                                    :network :ethereum
+                                    :status  :default}])
     (h/is-truthy (h/get-by-text "50 SNT")))
 
-  (h/test "Network label renders"
-    (h/render [network-bridge/view
-               {:amount  "50 SNT"
-                :network :optimism
-                :status  :default}])
+  (h/test "Network label render"
+    (h/render-with-theme-provider [network-bridge/view
+                                   {:amount  "50 SNT"
+                                    :network :optimism
+                                    :status  :default}])
     (h/is-truthy (h/get-by-text "Optimism")))
 
   (h/test "Locked state"
-    (h/render [network-bridge/view
-               {:amount  "50 SNT"
-                :network :optimism
-                :status  :locked}])
+    (h/render-with-theme-provider [network-bridge/view
+                                   {:amount  "50 SNT"
+                                    :network :optimism
+                                    :status  :locked}])
     (h/is-truthy (h/get-by-label-text :lock)))
 
   (h/test "Loading state"
-    (h/render [network-bridge/view
-               {:amount  "50 SNT"
-                :network :optimism
-                :status  :loading}])
+    (h/render-with-theme-provider [network-bridge/view
+                                   {:amount  "50 SNT"
+                                    :network :optimism
+                                    :status  :loading}])
     (h/is-truthy (h/get-by-label-text :loading)))
 
   (h/test "Disabled state"
-    (h/render [network-bridge/view
-               {:amount  "50 SNT"
-                :network :optimism
-                :status  :disabled}])
+    (h/render-with-theme-provider [network-bridge/view
+                                   {:amount  "50 SNT"
+                                    :network :optimism
+                                    :status  :disabled}])
     (h/has-style (h/get-by-label-text :container) {:opacity 0.3})))

src/quo/components/wallet/network_bridge/view.cljs

@@ -7,7 +7,8 @@
     [quo.foundations.colors :as colors]
     [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [schema.core :as schema]))
 
 (defn network-bridge-add
   [{:keys [network state theme container-style on-press]}]
@@ -24,6 +25,22 @@
         (= network :ethereum) "Mainnet"
         :else                 (string/capitalize (name network))))
 
+(def ^:private ?network-bridge-status
+  [:enum :add :loading :locked :disabled :default])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:theme :schema.common/theme]
+      [:network {:optional true} [:maybe :keyword]]
+      [:status {:optional true} [:maybe ?network-bridge-status]]
+      [:amount {:optional true} [:maybe :string]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:on-press {:optional true} [:maybe fn?]]]]]
+   :any])
+
 (defn view-internal
   [{:keys [theme network status amount container-style on-press] :as args}]
   (if (= status :add)
@@ -62,4 +79,6 @@
         :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
        (network->text network)]]]))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/network_routing/component_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo.components.wallet.network-routing.component-spec
   (:require [oops.core :as oops]
             [quo.components.wallet.network-routing.view :as network-routing]
+            quo.theme
             [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
@@ -11,17 +12,18 @@
                        :requesting-data?   false
                        :on-amount-selected (fn [_new-amount _network-idx] nil)}]
     (h/test "Renders Default"
-      (h/render [network-routing/view default-props])
+      (h/render-with-theme-provider [network-routing/view default-props])
       (h/is-truthy (h/get-by-label-text :network-routing)))
 
     (h/test "Renders bars inside"
-      (let [component   (h/render [network-routing/view default-props])
+      (let [component   (h/render-with-theme-provider [network-routing/view default-props])
             rerender-fn #((oops/oget component "rerender") (reagent/as-element %))
             component   (h/get-by-label-text :network-routing)]
         ;; Fires on-layout callback since the total width is required
         (h/fire-event :layout component #js {:nativeEvent #js {:layout #js {:width 1000}}})
         ;; Update props to trigger rerender, otherwise it won't be updated
-        (rerender-fn [network-routing/view (assoc default-props :requesting-data? true)])
+        (rerender-fn [quo.theme/provider {:theme :light}
+                      [network-routing/view (assoc default-props :requesting-data? true)]])
         ;; Check number of networks rendered
         (->> (js->clj (h/query-all-by-label-text :network-routing-bar))
              (count)

src/quo/components/wallet/network_routing/view.cljs

@@ -8,6 +8,7 @@
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
+    [schema.core :as schema]
     [utils.number]))
 
 (def ^:private timeouts (atom {}))
@@ -172,6 +173,22 @@
             [rn/view {:style (style/max-limit-bar-background network-name)}]
             [dashed-line network-name]])]))))
 
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:networks {:optional true}
+       [:maybe
+        [:sequential
+         [:map
+          [:amount :int]
+          [:max-amount :int]
+          [:network-name [:or :string :keyword]]]]]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:theme :schema.common/theme]]]]
+   :any])
+
 (defn view-internal
   [{:keys [networks container-style theme] :as params}]
   (reagent/with-let [total-width (reagent/atom nil)]
@@ -186,4 +203,6 @@
      (doseq [[_ living-timeout] @timeouts]
        (js/clearTimeout living-timeout)))))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/progress_bar/view.cljs

@@ -2,7 +2,19 @@
   (:require
     [quo.components.wallet.progress-bar.style :as style]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:theme :schema.common/theme]
+      [:progressed-value {:optional true} [:maybe [:or :string :int]]]
+      [:full-width? {:optional true} [:maybe :boolean]]]]]
+   :any])
 
 (defn- view-internal
   [{:keys [full-width?] :as props}]
@@ -12,4 +24,6 @@
    (when full-width?
      [rn/view {:style (style/progressed-bar props)}])])
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/summary_info/component_spec.cljs

@@ -13,48 +13,49 @@
 
 (h/describe "Wallet: Summary Info"
   (h/test "Type of `status-account` title renders"
-    (h/render [summary-info/view
-               {:type          :status-account
-                :networks?     true
-                :values        {:ethereum 150
-                                :optimism 50
-                                :arbitrum 25}
-                :account-props status-account-props}])
+    (h/render-with-theme-provider [summary-info/view
+                                   {:type          :status-account
+                                    :networks?     true
+                                    :values        {:ethereum 150
+                                                    :optimism 50
+                                                    :arbitrum 25}
+                                    :account-props status-account-props}])
     (h/is-truthy (h/get-by-text "Collectibles vault")))
 
   (h/test "Type of `user` title renders"
-    (h/render [summary-info/view
-               {:type          :user
-                :networks?     true
-                :values        {:ethereum 150
-                                :optimism 50
-                                :arbitrum 25}
-                :account-props {:full-name           "M L"
-                                :status-indicator?   false
-                                :size                :small
-                                :customization-color :blue
-                                :name                "Mark Libot"
-                                :address             "0x0ah...78b"
-                                :status-account      (merge status-account-props {:size 16})}}])
+    (h/render-with-theme-provider [summary-info/view
+                                   {:type          :user
+                                    :networks?     true
+                                    :values        {:ethereum 150
+                                                    :optimism 50
+                                                    :arbitrum 25}
+                                    :account-props {:full-name           "M L"
+                                                    :status-indicator?   false
+                                                    :size                :small
+                                                    :customization-color :blue
+                                                    :name                "Mark Libot"
+                                                    :address             "0x0ah...78b"
+                                                    :status-account      (merge status-account-props
+                                                                                {:size 16})}}])
     (h/is-truthy (h/get-by-text "Mark Libot"))
     (h/is-truthy (h/get-by-text "Collectibles vault")))
 
   (h/test "Networks true render"
-    (h/render [summary-info/view
-               {:type          :status-account
-                :networks?     true
-                :values        {:ethereum 150
-                                :optimism 50
-                                :arbitrum 25}
-                :account-props status-account-props}])
+    (h/render-with-theme-provider [summary-info/view
+                                   {:type          :status-account
+                                    :networks?     true
+                                    :values        {:ethereum 150
+                                                    :optimism 50
+                                                    :arbitrum 25}
+                                    :account-props status-account-props}])
     (h/is-truthy (h/get-by-label-text :networks)))
 
   (h/test "Networks false render"
-    (h/render [summary-info/view
-               {:type          :status-account
-                :networks?     false
-                :values        {:ethereum 150
-                                :optimism 50
-                                :arbitrum 25}
-                :account-props status-account-props}])
+    (h/render-with-theme-provider [summary-info/view
+                                   {:type          :status-account
+                                    :networks?     false
+                                    :values        {:ethereum 150
+                                                    :optimism 50
+                                                    :arbitrum 25}
+                                    :account-props status-account-props}])
     (h/is-null (h/query-by-label-text :networks))))

src/quo/components/wallet/summary_info/view.cljs

@@ -8,7 +8,8 @@
     [quo.foundations.colors :as colors]
     [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [schema.core :as schema]))
 
 (defn- network-amount
   [{:keys [network amount divider? theme]}]
@@ -51,6 +52,18 @@
          :amount  (str (:amount arbitrum) " " (or (:token-symbol arbitrum) "ARB"))
          :theme   theme}])]))
 
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:theme :schema.common/theme]
+      [:type [:enum :status-account :saved-account :account :user]]
+      [:account-props {:optional true} [:maybe :map]]
+      [:networks? {:optional true} [:maybe :boolean]]
+      [:values {:optional true} [:maybe :map]]]]]
+   :any])
+
 (defn- view-internal
   [{:keys [theme type account-props networks? values]}]
   [rn/view
@@ -91,4 +104,6 @@
        {:style (style/line-divider theme)}]
       [networks values theme]])])
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/wallet/transaction_progress/component_spec.cljs

@@ -2,8 +2,6 @@
   (:require [quo.core :as quo]
             [test-helpers.component :as h]))
 
-(def ^:private theme :light)
-
 (defn- get-test-data
   [{:keys [state network]
     :or   {state :pending network :mainnet}}]
@@ -31,195 +29,206 @@
 
 (h/describe "Transaction Progress"
   (h/test "component renders without props"
-    (h/render-with-theme-provider [quo/transaction-progress] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is pending and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :sending
-                                                   :network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :sending
+                      :network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :confirmed
-                                                   :network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :confirmed
+                      :network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalising
-                                                   :network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalising
+                      :network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalized
-                                                   :network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalized
+                      :network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :error
-                                                   :network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :error
+                      :network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :sending
-                                                   :network :optimism})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :sending
+                      :network :optimism})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :confirmed
-                                                   :network :optimism})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :confirmed
+                      :network :optimism})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalising
-                                                   :network :optimism})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalising
+                      :network :optimism})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalized
-                                                   :network :optimism})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalized
+                      :network :optimism})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :error
-                                                   :network :optimism})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :error
+                      :network :optimism})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :sending
-                                                   :network :arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :sending
+                      :network :arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :confirmed
-                                                   :network :arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :confirmed
+                      :network :arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalising
-                                                   :network :arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalising
+                      :network :arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :finalized
-                                                   :network :arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :finalized
+                      :network :arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:state   :error
-                                                   :network :arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress
+      (get-test-data {:state   :error
+                      :network :arbitrum})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is pending and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is sending and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :sending})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:state :sending})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is confirmed and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :confirmed})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:state :confirmed})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalising and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalising})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:state :finalising})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is finalized and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :finalized})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:state :finalized})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "component renders when state is error and network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:state :error})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:state :error})])
     (h/is-truthy (h/get-by-label-text :transaction-progress)))
 
   (h/test "mainnet progress box is visible network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {})])
     (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
 
   (h/test "arbitrum-optimism progress box is visible network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "arbitrum progress box is visible network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :arbitrum})])
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "optimism progress box is visible network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism})])
     (h/is-truthy (h/get-all-by-label-text :progress-box)))
 
   (h/test "title is visible network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {})])
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism})])
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "title is visible network is arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :arbitrum})])
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "context tag is visible network is optimism-arbitrum"
-    (h/render-with-theme-provider [quo/transaction-progress
-                                   (get-test-data {:network :optimism-arbitrum})]
-                                  theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is mainnet"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {})])
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :optimism})] theme)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :optimism})])
     (h/is-truthy (h/get-by-label-text :context-tag)))
 
   (h/test "context tag is visible network is optimism"
-    (h/render-with-theme-provider [quo/transaction-progress (get-test-data {:network :arbitrum})] theme)
-    (h/is-truthy (h/get-by-label-text :context-tag)))
-)
+    (h/render-with-theme-provider
+     [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :context-tag))))

src/quo/core.cljs

@@ -135,6 +135,7 @@
     quo.components.tabs.account-selector
     quo.components.tabs.segmented-tab
     quo.components.tabs.tabs.view
+    quo.components.tags.collectible-tag.view
     quo.components.tags.context-tag.view
     quo.components.tags.network-tags.view
     quo.components.tags.number-tag.view
@@ -156,6 +157,7 @@
     quo.components.wallet.account-overview.view
     quo.components.wallet.account-permissions.view
     quo.components.wallet.address-text.view
+    quo.components.wallet.amount-input.view
     quo.components.wallet.confirmation-progress.view
     quo.components.wallet.keypair.view
     quo.components.wallet.network-amount.view
@@ -387,6 +389,7 @@
 (def account-selector quo.components.tabs.account-selector/account-selector)
 
 ;;;; Tags
+(def collectible-tag quo.components.tags.collectible-tag.view/view)
 (def context-tag quo.components.tags.context-tag.view/view)
 (def network-tags quo.components.tags.network-tags.view/view)
 (def number-tag quo.components.tags.number-tag.view/view)
@@ -414,6 +417,7 @@
 (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 amount-input quo.components.wallet.amount-input.view/view)
 (def confirmation-propgress quo.components.wallet.confirmation-progress.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)

src/quo/core_spec.cljs

@@ -90,6 +90,7 @@
     quo.components.wallet.account-origin.component-spec
     quo.components.wallet.account-overview.component-spec
     quo.components.wallet.account-permissions.component-spec
+    quo.components.wallet.amount-input.component-spec
     quo.components.wallet.confirmation-progress.component-spec
     quo.components.wallet.keypair.component-spec
     quo.components.wallet.network-amount.component-spec

src/react_native/reanimated.cljs

@@ -20,7 +20,8 @@
                      LinearTransition
                      enableLayoutAnimations
                      useAnimatedScrollHandler
-                     runOnJS)]
+                     runOnJS)
+     :as reanimated*]
     ["react-native-redash" :refer (withPause)]
     [oops.core :as oops]
     [react-native.flat-list :as rn-flat-list]
@@ -113,6 +114,8 @@
   (when (and anim (some? v))
     (set! (.-value anim) v)))
 
+(def interpolate* reanimated*/interpolate)
+
 (defn interpolate
   ([shared-value input-range output-range]
    (interpolate shared-value input-range output-range nil))

src/status_im/config.cljs

@@ -167,5 +167,5 @@
 
 (def default-kdf-iterations 3200)
 
-(def community-accounts-selection-enabled? true)
+(def community-accounts-selection-enabled? (enabled? (get-config :ACCOUNT_SELECTION_ENABLED "0")))
 (def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1")))

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -151,7 +151,6 @@
                  :icon                :i/pin
                  :counter-value       pins-count
                  :on-press            (fn []
-                                        (rf/dispatch [:dismiss-keyboard])
                                         (rf/dispatch [:pin-message/show-pins-bottom-sheet
                                                       chat-id]))}
                 {:accessibility-label :action-button-mute

src/status_im/contexts/communities/overview/events.cljs

@@ -10,16 +10,16 @@
    {:db (-> db
             (assoc-in [:community-channels-permissions community-id]
                       (data-store/rpc->channel-permissions (:channels response)))
-            (assoc-in [:communities/channel-permissions-check community-id] false))}))
+            (assoc-in [:communities community-id :checking-all-channels-permissions?] false))}))
 
 (rf/reg-event-fx :communities/check-all-community-channels-permissions-failed
  (fn [{:keys [db]} [community-id]]
-   {:db (assoc-in db [:communities/channel-permissions-check community-id] false)}))
+   {:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] false)}))
 
 (rf/reg-event-fx :communities/check-all-community-channels-permissions
  (fn [{:keys [db]} [community-id]]
    (when (get-in db [:communities community-id])
-     {:db (assoc-in db [:communities/channel-permissions-check community-id] true)
+     {:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] true)
       :fx [[:json-rpc/call
             [{:method     "wakuext_checkAllCommunityChannelsPermissions"
               :params     [{:CommunityID community-id}]
@@ -38,19 +38,21 @@
    (let [token-permissions-check (cond-> result
                                    based-on-client-selection? (assoc :based-on-client-selection? true))]
      {:db (-> db
-              (assoc-in [:communities/permissions-check community-id] {:checking? false
-                                                                       :check token-permissions-check})
-              )})))
+              (assoc-in [:communities community-id :checking-permissions?] false)
+              (assoc-in [:communities community-id :token-permissions-check]
+                        token-permissions-check))})))
 
 (rf/reg-event-fx :communities/check-permissions-to-join-community-failed
  (fn [{:keys [db]} [community-id]]
-   {:db (assoc-in db [:communities/permissions-check community-id :checking?] false)}))
+   {:db (assoc-in db [:communities community-id :checking-permissions?] false)}))
 
 (rf/reg-event-fx :communities/check-permissions-to-join-community
  (fn [{:keys [db]} [community-id addresses based-on-client-selection?]]
    (when-let [community (get-in db [:communities community-id])]
      (when-not (:checking-permissions? community)
-       {:db            (assoc-in db [:communities/permissions-check community-id :checking?] true)
+       {:db            (-> db
+                           (assoc-in [:communities community-id :checking-permissions?] true)
+                           (assoc-in [:communities community-id :can-request-access?] false))
         :json-rpc/call [{:method     "wakuext_checkPermissionsToJoinCommunity"
                          :params     [(cond-> {:communityId community-id}
                                         addresses

src/status_im/contexts/communities/overview/view.cljs

@@ -110,82 +110,66 @@
    [rn/view
     [quo/icon :i/info {:no-color true}]]])
 
-(defn- network-not-supported
-  []
-  [quo/text (i18n/label :network-not-supported)])
-
-(defn- request-access-button
-  [id color]
-  [quo/button
-   {:on-press            (if config/community-accounts-selection-enabled?
-                           #(rf/dispatch [:open-modal :community-account-selection
-                                          {:community-id id}])
-                           #(rf/dispatch [:open-modal :community-requests-to-join {:id id}]))
-    :accessibility-label :show-request-to-join-screen-button
-    :customization-color color
-    :icon-left           :i/communities}
-   (i18n/label :t/request-to-join)])
-
 (defn- token-requirements
-  [{:keys [id color role-permissions?]}]
+  [{:keys [id color]}]
   (let [{:keys [can-request-access?
-                no-member-permission?
-                tokens
-                networks-not-supported?
+                number-of-hold-tokens tokens
                 highest-permission-role]} (rf/sub [:community/token-gated-overview id])
         highest-role-text
         (i18n/label
          (communities.utils/role->translation-key highest-permission-role :t/member))]
-    (cond
-
-      networks-not-supported?
-      [network-not-supported]
-
-      (or (not role-permissions?) no-member-permission?)
-      [request-access-button id color]
-
-      :else
-      [rn/view {:style (style/token-gated-container)}
-       [rn/view
-        {:style {:padding-horizontal 12
-                 :flex-direction     :row
-                 :align-items        :center
-                 :justify-content    :space-between
-                 :flex               1}}
-        [quo/text {:weight :medium}
-         (if (and can-request-access? highest-permission-role)
-           (i18n/label :t/you-eligible-to-join-as {:role highest-role-text})
-           (i18n/label :t/you-not-eligible-to-join))]
-        [info-button]]
+    [rn/view {:style (style/token-gated-container)}
+     [rn/view
+      {:style {:padding-horizontal 12
+               :flex-direction     :row
+               :align-items        :center
+               :justify-content    :space-between
+               :flex               1}}
+      [quo/text {:weight :medium}
+       (if can-request-access?
+         (i18n/label :t/you-eligible-to-join-as {:role highest-role-text})
+         (i18n/label :t/you-not-eligible-to-join))]
+      [info-button]]
+     (when (pos? number-of-hold-tokens)
        [quo/text {:style {:padding-horizontal 12 :padding-bottom 18} :size :paragraph-2}
         (if can-request-access?
-          (i18n/label :t/you-hodl)
-          (i18n/label :t/you-must-hold))]
-       [quo/token-requirement-list
-        {:tokens   tokens
-         :padding? true}]
-       [quo/button
-        {:on-press            (if config/community-accounts-selection-enabled?
-                                #(rf/dispatch [:open-modal :community-account-selection
-                                               {:community-id id}])
-                                #(rf/dispatch [:open-modal :community-requests-to-join {:id id}]))
-         :accessibility-label :join-community-button
-         :customization-color color
-         :container-style     {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
-         :disabled?           (not can-request-access?)
-         :icon-left           (if can-request-access? :i/unlocked :i/locked)}
-        (i18n/label :t/join-open-community)]])))
-
+          (i18n/label :t/you-hold-number-of-hold-tokens-of-these
+                      {:number-of-hold-tokens number-of-hold-tokens})
+          (i18n/label :t/you-must-hold))])
+     [quo/token-requirement-list
+      {:tokens   tokens
+       :padding? true}]
+     [quo/button
+      {:on-press            (if config/community-accounts-selection-enabled?
+                              #(rf/dispatch [:open-modal :community-account-selection
+                                             {:community-id id}])
+                              #(rf/dispatch [:open-modal :community-requests-to-join {:id id}]))
+       :accessibility-label :join-community-button
+       :customization-color color
+       :container-style     {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
+       :disabled?           (not can-request-access?)
+       :icon-left           (if can-request-access? :i/unlocked :i/locked)}
+      (i18n/label :t/join-open-community)]]))
 
 (defn- join-community
-  [{:keys [id joined permissions role-permissions? can-join?] :as community}]
+  [{:keys [id color joined permissions role-permissions? can-join?] :as community}]
   (let [pending?        (rf/sub [:communities/my-pending-request-to-join id])
         access-type     (get-access-type (:access permissions))
         unknown-access? (= access-type :unknown-access)
         invite-only?    (= access-type :invite-only)]
     [:<>
      (when-not (or joined pending? invite-only? unknown-access?)
-       [token-requirements community])
+       (if role-permissions?
+         [token-requirements community]
+         [quo/button
+          {:on-press            (if config/community-accounts-selection-enabled?
+                                  #(rf/dispatch [:open-modal :community-account-selection
+                                                 {:community-id id}])
+                                  #(rf/dispatch [:open-modal :community-requests-to-join {:id id}]))
+           :accessibility-label :show-request-to-join-screen-button
+           :customization-color color
+           :icon-left           :i/communities}
+          (i18n/label :t/request-to-join)]))
      (when (not (or pending? role-permissions? can-join?))
        [quo/text
         {:size   :paragraph-2
@@ -253,16 +237,14 @@
     :description-accessibility-label :community-description}])
 
 (defn- community-content
-  [id]
+  [{:keys [id]}]
   (rf/dispatch [:communities/check-all-community-channels-permissions id])
-  (fn [id {:keys [on-category-layout
-               collapsed?
-               on-first-channel-height-changed] :as something}]
-
-    (let [{:keys [name description joined spectated images tags color id membership-permissions?]
+  (fn [{:keys [name description joined spectated images tags color id membership-permissions?]
         :as   community}
-          (rf/sub [:communities/community id])
-          joined-or-spectated (or joined spectated)
+       {:keys [on-category-layout
+               collapsed?
+               on-first-channel-height-changed]}]
+    (let [joined-or-spectated (or joined spectated)
           chats-by-category   (rf/sub [:communities/categorized-channels id])]
       [:<>
        [rn/view {:style style/community-content-container}
@@ -313,24 +295,20 @@
                (and (>= scroll-height (+ height first-channel-height))
                     category)))))
 
+(defn- community-scroll-page
+  [{:keys [joined]}]
+  (let [scroll-height        (reagent/atom 0)
+        categories-heights   (reagent/atom {})
+        first-channel-height (reagent/atom 0)
         ;; We track the initial value of joined
         ;; as we open the page to avoid switching
         ;; from not collapsed to collapsed if the
         ;; user is on this page
-
-(defn- community-scroll-page
-  [id initial-joined? name images]
-  (let [scroll-height        (reagent/atom 0)
-        categories-heights   (reagent/atom {})
-        first-channel-height (reagent/atom 0)
-        on-category-layout   (partial add-category-height categories-heights)
-        on-first-channel-height-changed (fn [height categories]
-             (swap! categories-heights select-keys categories)
-             (reset! first-channel-height height))]
-    (fn [id joined name images]
+        initial-joined?      joined]
+    (fn [{:keys [id name images] :as community}]
       (let [cover          {:uri (get-in images [:banner :uri])}
             logo           {:uri (get-in images [:thumbnail :uri])}
-            collapsed?     (and initial-joined? joined)
+            collapsed?     (and initial-joined? (:joined community))
             overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
         [scroll-page/scroll-page
          {:cover-image      cover
@@ -353,22 +331,24 @@
                                         @first-channel-height
                                         @categories-heights)}]}
          [community-content
-          id
-          {:on-category-layout              on-category-layout
+          community
+          {:on-category-layout              (partial add-category-height categories-heights)
            :collapsed?                      collapsed?
            :on-first-channel-height-changed
            ;; Here we set the height of the component and we filter out the categories, as some
            ;; might have been removed.
-           on-first-channel-height-changed}]]))))
+           (fn [height categories]
+             (swap! categories-heights select-keys categories)
+             (reset! first-channel-height height))}]]))))
 
 (defn- community-card-page-view
   [id]
-  (let [{:keys [id joined name images]
+  (let [{:keys [id joined]
          :as   community} (rf/sub [:communities/community id])]
     (when community
       (when joined
         (rf/dispatch [:activity-center.notifications/dismiss-community-overview id]))
-      [community-scroll-page id joined name images])))
+      [community-scroll-page community])))
 
 (defn view
   [id]

src/status_im/contexts/preview/quo/main.cljs

@@ -158,6 +158,7 @@
     [status-im.contexts.preview.quo.tabs.account-selector :as account-selector]
     [status-im.contexts.preview.quo.tabs.segmented-tab :as segmented]
     [status-im.contexts.preview.quo.tabs.tabs :as tabs]
+    [status-im.contexts.preview.quo.tags.collectible-tag :as collectible-tag]
     [status-im.contexts.preview.quo.tags.context-tags :as context-tags]
     [status-im.contexts.preview.quo.tags.network-tags :as network-tags]
     [status-im.contexts.preview.quo.tags.number-tag :as number-tag]
@@ -178,6 +179,7 @@
     [status-im.contexts.preview.quo.wallet.account-overview :as
      account-overview]
     [status-im.contexts.preview.quo.wallet.account-permissions :as account-permissions]
+    [status-im.contexts.preview.quo.wallet.amount-input :as amount-input]
     [status-im.contexts.preview.quo.wallet.confirmation-progress :as
      confirmation-progress]
     [status-im.contexts.preview.quo.wallet.keypair :as keypair]
@@ -457,7 +459,9 @@
                         :component tabs/view}
                        {:name      :account-selector
                         :component account-selector/view}]
-   :tags              [{:name      :context-tags
+   :tags              [{:name      :collectible-tag
+                        :component collectible-tag/view}
+                       {:name      :context-tags
                         :component context-tags/view}
                        {:name      :network-tags
                         :component network-tags/view}
@@ -493,6 +497,8 @@
                         :component account-overview/view}
                        {:name      :account-permissions
                         :component account-permissions/view}
+                       {:name      :amount-input
+                        :component amount-input/view}
                        {:name      :confirmation-progress
                         :component confirmation-progress/view}
                        {:name :keypair :component keypair/view}

src/status_im/contexts/preview/quo/tags/collectible_tag.cljs

@@ -0,0 +1,51 @@
+(ns status-im.contexts.preview.quo.tags.collectible-tag
+  (:require
+    [oops.core :refer [oget]]
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key     :size
+    :type    :select
+    :options [{:key   :size-24
+               :value "Size 24"}
+              {:key   :size-32
+               :value "Size 32"}]}
+   {:key     :options
+    :type    :select
+    :options [{:key   false
+               :value false}
+              {:key   :add
+               :value :add}
+              {:key   :hold
+               :value :hold}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key  :collectible-name
+    :type :text}
+   {:key  :collectible-id
+    :type :text}])
+
+(defn view
+  []
+  (let [state     (reagent/atom {:size                :size-24
+                                 :collectible-name    "Collectible"
+                                 :collectible-id      "#123"
+                                 :collectible-img-src (resources/mock-images :collectible)
+                                 :options             false
+                                 :blur?               false
+                                 :container-width     0})
+        on-layout #(swap! state assoc
+                     :container-width
+                     (oget % :nativeEvent :layout :width))]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :descriptor            descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/collectible-tag (assoc @state :on-layout on-layout)]]])))

src/status_im/contexts/preview/quo/wallet/amount_input.cljs

@@ -0,0 +1,29 @@
+(ns status-im.contexts.preview.quo.wallet.amount-input
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key  :max-value
+    :type :number}
+   {:key  :min-value
+    :type :number}
+   {:key  :init-value
+    :type :number}
+   {:type    :select
+    :key     :status
+    :options [{:key :default}
+              {:key :error}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:max-value  10000
+                             :min-value  0
+                             :init-value 1
+                             :status     :default})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/amount-input @state]])))

src/status_im/contexts/profile/settings/header/avatar.cljs

@@ -1,34 +1,36 @@
-(ns status-im.contexts.profile.settings.header.avatar
+(ns ^:workletize status-im.contexts.profile.settings.header.avatar
   (:require [quo.core :as quo]
             [quo.theme :as quo.theme]
             [react-native.reanimated :as reanimated]
             [status-im.contexts.profile.settings.header.style :as style]))
 
-(def scroll-animation-input-range [0 50])
-(def header-extrapolation-option
-  {:extrapolateLeft  "clamp"
-   :extrapolateRight "clamp"})
-
 (defn f-avatar
   [{:keys [scroll-y full-name online? profile-picture customization-color]}]
-  (let [image-scale-animation       (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [1 0.4]
-                                                            header-extrapolation-option)
-        image-top-margin-animation  (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [0 20]
-                                                            header-extrapolation-option)
-        image-side-margin-animation (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [0 -20]
-                                                            header-extrapolation-option)
-        theme                       (quo.theme/get-theme)]
-    [reanimated/view
-     {:style (style/avatar-container theme
-                                     image-scale-animation
-                                     image-top-margin-animation
-                                     image-side-margin-animation)}
+  (let [avatar-total-size     88
+        border-height         4
+        translation-to-bottom (fn [scale inverse-scale]
+                                (js* "'worklet'")
+                                (let [current-avatar-size (* avatar-total-size (- 1 scale))
+                                      current-center      (/ current-avatar-size 2)]
+                                  (* current-center inverse-scale)))
+        transform             (reanimated/use-animated-style
+                               (fn []
+                                 (js* "'worklet'")
+                                 (let [scale         (reanimated/interpolate*
+                                                      (.-value scroll-y)
+                                                      #js [0 48]
+                                                      #js [1 0.4]
+                                                      "clamp")
+                                       inverse-scale (/ 1 scale)
+                                       translation   (translation-to-bottom scale inverse-scale)
+                                       bottom        (* border-height inverse-scale (- 1 scale))]
+                                   #js
+                                    {:transform #js
+                                                 [#js {:scale scale}
+                                                  #js {:translateX (- translation)}
+                                                  #js {:translateY (- translation bottom)}]})))
+        theme                 (quo.theme/get-theme)]
+    [reanimated/view {:style [transform (style/avatar-container theme)]}
      [quo/user-avatar
       {:full-name           full-name
        :online?             online?

src/status_im/contexts/profile/settings/header/header_shape.cljs

@@ -1,10 +1,11 @@
-(ns status-im.contexts.profile.settings.header.header-shape
+(ns ^:workletize status-im.contexts.profile.settings.header.header-shape
   (:require [quo.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [react-native.svg :as svg]
             [status-im.contexts.profile.settings.header.style :as style]))
 
+
 (defn left-radius
   [background-color]
   [svg/svg {:width "20" :height "20" :viewBox "0 0 20 20" :fill "none"}
@@ -21,13 +22,17 @@
 
 (defn f-view
   [{:keys [scroll-y customization-color theme]}]
-  (let [background-color  (colors/resolve-color customization-color theme 40)
-        opacity-animation (reanimated/interpolate scroll-y
-                                                  [0 45 50]
-                                                  [1 1 0])]
+  (let [background-color (colors/resolve-color customization-color theme 40)
+        opacity          (reanimated/use-animated-style
+                          (fn []
+                            (js* "'worklet'")
+                            #js
+                             {:opacity (reanimated/interpolate* (.-value scroll-y)
+                                                                #js [0 45 50]
+                                                                #js [1 1 0])}))]
     [:<>
      [rn/view {:style (style/header-middle-shape background-color)}]
-     [reanimated/view {:style (style/radius-container opacity-animation)}
+     [reanimated/view {:style [opacity style/radius-container]}
       [left-radius background-color]
       [right-radius background-color]]]))
 

src/status_im/contexts/profile/settings/header/style.cljs

@@ -27,19 +27,13 @@
    :height           48
    :flex-grow        1})
 
-(defn radius-container
-  [opacity-animation]
-  {:opacity         opacity-animation
-   :flex-direction  :row
+(def radius-container
+  {:flex-direction  :row
    :justify-content :space-between})
 
 (defn avatar-container
-  [theme scale-animation top-margin-animation side-margin-animation]
-  [{:transform     [{:scale scale-animation}]
-    :margin-top    top-margin-animation
-    :margin-left   side-margin-animation
-    :margin-bottom side-margin-animation}
-   {:align-items   :flex-start
-    :border-width  4
-    :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
-    :border-radius 100}])
+  [theme]
+  {:align-items   :flex-start
+   :border-width  4
+   :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
+   :border-radius 44})

src/status_im/contexts/wallet/edit_account/view.cljs

@@ -33,7 +33,8 @@
                   {:account    edited-account-data
                    :on-success #(show-save-account-toast updated-key)}])))
 
-(def view
+(defn view
+  []
   (let [edited-account-name  (reagent/atom nil)
         show-confirm-button? (reagent/atom false)
         on-change-color      (fn [edited-color {:keys [color] :as account}]

src/status_im/navigation/events.cljs

@@ -147,13 +147,13 @@
 
 (rf/defn show-bottom-sheet
   {:events [:show-bottom-sheet]}
-  [{:keys [db]} content]
+  [{:keys [db] :as cofx} content]
   (let [{:keys [sheets hide?]} (:bottom-sheet db)]
-    (rf/merge {:db (update-in db [:bottom-sheet :sheets] #(conj % content))}
+    (rf/merge cofx
+              {:db               (update-in db [:bottom-sheet :sheets] #(conj % content))
+               :dismiss-keyboard nil}
               #(when-not hide?
-                 (if (seq sheets)
-                   (hide-bottom-sheet %)
-                   {:show-bottom-sheet nil})))))
+                 (if (seq sheets) (hide-bottom-sheet %) {:show-bottom-sheet nil})))))
 
 ;; LEGACY (should be removed in status 2.0)
 (rf/defn hide-signing-sheet

src/status_im/setup/build_hooks/worklets.clj

@@ -0,0 +1,101 @@
+(ns status-im.setup.build-hooks.worklets
+  (:require [clojure.set])
+  (:import (java.io BufferedReader InputStreamReader PrintWriter)))
+
+(defn- update-js-output
+  [build-state code-processed]
+  (reduce-kv (fn [prev-build-state ns-key new-code]
+               (assoc-in prev-build-state [:output ns-key :js] new-code))
+             build-state
+             code-processed))
+
+(defn- get-workletized-code!
+  [code-seq store-atom]
+  (doall
+   (map (fn [[[_ filepath :as ns-key] js-code]]
+           (println "Workletizing:" filepath) ;; TODO: debug remove
+           (try
+             (let [command       "node workletize-code.js"
+                   process       (.exec (Runtime/getRuntime) command)
+                   output-stream (.getOutputStream process)
+                   writer        (PrintWriter. output-stream)
+                   reader        (BufferedReader. (InputStreamReader. (.getInputStream process)))]
+               (.println writer js-code)
+               (.flush writer)
+               (.close writer)
+
+               (let [output     (apply str (interleave (line-seq reader) (repeat "\n")))
+                     exit-code (.waitFor process)]
+                 (println ">>>>>>>>>>>>>>>>>>>>>>>>EXIT CODE:" exit-code)
+                 (println "RESULT for "filepath ":\n\n" output "\n\n")
+                 (swap! store-atom assoc ns-key output)))
+
+             (catch Exception e
+               (println (str "Exception while workletizing: " filepath "\n")
+                        (.getMessage e)))))
+         code-seq)))
+
+(defn- get-js-code-with-ns
+  [build-state-output file-path]
+  (let [ns-key  [:shadow.build.classpath/resource file-path]
+        js-code (get-in build-state-output [ns-key :js])]
+    [ns-key js-code]))
+
+(defn- get-files-to-workletize
+  [{:keys [shadow.build/build-info compiler-env] :as _build-state}]
+  (let [files-compiled      (->> build-info
+                                 :compiled
+                                 (map second)
+                                 (set))
+        namespaces-metadata (->> compiler-env
+                                 :cljs.analyzer/namespaces
+                                 vals
+                                 (map :meta))
+        files-marked        (->> namespaces-metadata
+                                 (filter :workletize)
+                                 (map :file)
+                                 (set))]
+    (clojure.set/intersection files-compiled files-marked)))
+
+(defn transform-output
+  {:shadow.build/stage :compile-finish}
+  [{:keys [output] :as build-state}]
+  (tap> [:start build-state])
+  (let [files-to-workletize  (get-files-to-workletize build-state)
+        js-code-with-ns      (map #(get-js-code-with-ns output %) files-to-workletize)
+        code-processed-store (atom {})]
+    (get-workletized-code! js-code-with-ns code-processed-store)
+    (tap> [:end (update-js-output build-state @code-processed-store)])
+    (update-js-output build-state @code-processed-store)
+    (println "\n\n>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> CODE PROCESSED <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
+    (prn @code-processed-store)
+    (println ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ______________ <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<\n\n")
+    )
+  build-state
+  )
+
+(defn optimize-start
+  {:shadow.build/stage :optimize-prepare}
+  [{:keys [output] :as build-state}]
+  (let [files-to-workletize (get-files-to-workletize build-state)
+        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
+        ]
+    (println "START ---------------------------------------------------------" )
+    (prn js-code-with-ns)
+    (println "================================================================---------------------------------------------------------" )
+    #_(println "output: ---------------------------------------------------------------"
+               js-code-with-ns)
+    build-state))
+
+(defn optimize-output
+  {:shadow.build/stage :optimize-finish}
+  [{:keys [output] :as build-state}]
+  (let [files-to-workletize (get-files-to-workletize build-state)
+        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
+        ]
+    (println "END ---------------------------------------------------------" )
+    (prn js-code-with-ns)
+    (println "================================================================---------------------------------------------------------" )
+    #_(println "output: ---------------------------------------------------------------"
+               js-code-with-ns)
+    build-state))

src/status_im/subs/communities.cljs

@@ -1,10 +1,10 @@
 (ns status-im.subs.communities
   (:require
     [clojure.string :as string]
+    [legacy.status-im.data-store.communities :as data-store]
     [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
     [re-frame.core :as re-frame]
     [status-im.constants :as constants]
-    [status-im.contexts.wallet.common.utils :as wallet.utils]
     [utils.i18n :as i18n]))
 
 (re-frame/reg-sub
@@ -298,50 +298,58 @@
  (fn [collapsed-categories [_ community-id]]
    (get collapsed-categories community-id)))
 
-
-(defn token-requirement->token
-  [checking-permissions?
-   token-images
-   {:keys [satisfied criteria]}]
-  (let [sym    (:symbol criteria)
-        amount (:amount criteria)]
-    {:symbol      sym
-     :sufficient? satisfied
-     :loading?    checking-permissions?
-     :amount      (wallet.utils/remove-trailing-zeroes amount)
-     :img-src     (get token-images sym)}))
-
-(re-frame/reg-sub
- :communities/checking-permissions-by-id
- :<- [:communities/permissions-check]
- (fn [permissions [_ id]]
-   (get permissions id)))
+(defn- permission-id->permission-value
+  [token-permissions permission-id]
+  (get (into {} token-permissions) permission-id))
 
 (re-frame/reg-sub
  :community/token-gated-overview
  (fn [[_ community-id]]
-   [(re-frame/subscribe [:communities/community community-id])
-    (re-frame/subscribe [:communities/checking-permissions-by-id community-id])])
- (fn [[{:keys [token-images]}
-       {:keys [checking? check]}] _]
-   (let [highest-role            (:highestRole check)
-         networks-not-supported? (:networksNotSupported check)
-         lowest-role             (last (:roles check))
-         highest-permission-role (:type highest-role)
-         can-request-access?     (and (boolean highest-permission-role) (not networks-not-supported?))]
+   [(re-frame/subscribe [:communities/community community-id])])
+ (fn [[{:keys [token-permissions-check token-permissions checking-permissions? token-images]}] _]
+   (let [can-request-access? (:satisfied token-permissions-check)
+         highest-permission-role
+         (when can-request-access?
+           (->> token-permissions-check
+                :permissions
+                (reduce-kv
+                 (fn [highest-permission-role permission-id {:keys [criteria]}]
+                   (if-let [permission-type
+                            (and (first criteria)
+                                 (some #{(:type (permission-id->permission-value token-permissions
+                                                                                 permission-id))}
+                                       constants/community-role-permissions))]
+                     (if highest-permission-role
+                       (min highest-permission-role permission-type)
+                       permission-type)
+                     highest-permission-role))
+                 nil)))
+         highest-permission-role (if (and can-request-access? (nil? highest-permission-role))
+                                   constants/community-token-permission-become-member
+                                   highest-permission-role)]
      {:can-request-access?     can-request-access?
       :highest-permission-role highest-permission-role
-      :networks-not-supported? networks-not-supported?
-      :no-member-permission?   (and highest-permission-role
-                                    (not (-> check :highestRole :criteria)))
-      :tokens                  (map (fn [{:keys [tokenRequirement]}]
-                                      (map
-                                       (partial token-requirement->token
-                                                checking?
-                                                token-images)
-                                       tokenRequirement))
-                                    (or (:criteria highest-role)
-                                        (:criteria lowest-role)))})))
+      :number-of-hold-tokens   (reduce
+                                (fn [acc [_ {:keys [criteria]}]]
+                                  (reduce #(+ %1 (if %2 1 0)) acc criteria))
+                                0
+                                (:permissions token-permissions-check))
+      :tokens                  (->>
+                                 token-permissions
+                                 (filter (fn [[_ permission]]
+                                           (data-store/role-permission? permission)))
+                                 (map (fn [[perm-key {:keys [token_criteria]}]]
+                                        (let [check-criteria (get-in token-permissions-check
+                                                                     [:permissions perm-key :criteria])]
+                                          (map
+                                           (fn [{sym :symbol amount :amount} sufficient?]
+                                             {:symbol      sym
+                                              :sufficient? (when (seq check-criteria) sufficient?)
+                                              :loading?    checking-permissions?
+                                              :amount      amount
+                                              :img-src     (get token-images sym)})
+                                           token_criteria
+                                           (or check-criteria token_criteria))))))})))
 
 (re-frame/reg-sub
  :community/images

src/status_im/subs/communities_test.cljs

@@ -382,74 +382,88 @@
   [sub-name]
   (let
     [checking-permissions? true
-     token-image-eth       "data:image/jpeg;base64,/9j/2w"
-     community             {:id community-id
-                            :checking-permissions? checking-permissions?
-                            :permissions {:access 3}
-                            :highest-permission-role constants/community-token-permission-become-admin
-                            :token-images {"ETH" token-image-eth}
-                            :name "Community super name"
-                            :chats {"89f98a1e-6776-4e5f-8626-8ab9f855253f"
-                                    {:description "x"
-                                     :emoji       "🎲"
-                                     :permissions {:access 1}
-                                     :color       "#88B0FF"
-                                     :name        "random"
-                                     :categoryID  "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
-                                     :id          "89f98a1e-6776-4e5f-8626-8ab9f855253f"
-                                     :position    4
-                                     :can-post?   false
-                                     :members     {"0x04" {"roles" [1]}}}
-                                    "a076358e-4638-470e-a3fb-584d0a542ce6"
-                                    {:description "General channel for the community"
-                                     :emoji       "🐷 "
-                                     :permissions {:access 1}
-                                     :color       "#4360DF"
-                                     :name        "general"
-                                     :categoryID  "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
-                                     :id          "a076358e-4638-470e-a3fb-584d0a542ce6"
-                                     :position    0
-                                     :can-post?   false
-                                     :members     {"0x04" {"roles" [1]}}}}
-                            :token-permissions-check
-                            {:satisfied true
-                             :highestRole {:type     constants/community-token-permission-become-admin
-                                           :criteria [{:tokenRequirement [{:satisfied true
-                                                                           :criteria {:contract_addresses
-                                                                                      {:5 "0x0"}
-                                                                                      :type 1
-                                                                                      :symbol "DAI"
-                                                                                      :amount "5.0"
-                                                                                      :decimals 18}}]}
-                                                      {:tokenRequirement [{:satisfied false
-                                                                           :criteria  {:type     1
-                                                                                       :symbol   "ETH"
-                                                                                       :amount   "0.002"
-                                                                                       :decimals 18}}]}]}
-
-                             :permissions
-                             {:a3dd5b6b-d93b-452c-b22a-09a8f42ec566 {:criteria [true false
-                                                                                true]}}
-                             :validCombinations
-                             [{:address  "0xd722eaa60dc73e334b588d34ba66a3b27e537783"
-                               :chainIds nil}
-                              {:address  "0x738d3146831c5871fa15872b409e8f360e341784"
-                               :chainIds [5 420]}]}
-                            :members {"0x04" {"roles" [1]}}
-                            :can-request-access? false
-                            :outroMessage "bla"
-                            :verified false}]
+     token-image-eth "data:image/jpeg;base64,/9j/2w"
+     community {:id                      community-id
+                :checking-permissions?   checking-permissions?
+                :permissions             {:access 3}
+                :highest-permission-role constants/community-token-permission-become-admin
+                :token-images            {"ETH" token-image-eth}
+                :token-permissions       [[:permission-id-01
+                                           {:id "permission-id-01"
+                                            :type constants/community-token-permission-can-view-channel
+                                            :token_criteria [{:contract_addresses {:5 "0x0"}
+                                                              :type               1
+                                                              :symbol             "SNT"
+                                                              :amount             "0.002"
+                                                              :decimals           18}]
+                                            :chat_ids [(str community-id
+                                                            "89f98a1e-6776-4e5f-8626-8ab9f855253f")]}]
+                                          [:permission-id-02
+                                           {:id "permission-id-02"
+                                            :type constants/community-token-permission-become-admin
+                                            :token_criteria [{:contract_addresses {:5 "0x0"}
+                                                              :type               1
+                                                              :symbol             "DAI"
+                                                              :amount             "5.0"
+                                                              :decimals           18}]
+                                            :chat_ids [(str community-id
+                                                            "89f98a1e-6776-4e5f-8626-8ab9f855253f")]}]
+                                          [:permission-id-03
+                                           {:id "permission-id-03"
+                                            :type constants/community-token-permission-become-member
+                                            :token_criteria [{:contract_addresses {:5 "0x0"}
+                                                              :type               1
+                                                              :symbol             "ETH"
+                                                              :amount             "0.001"
+                                                              :decimals           18}]}]]
+                :name                    "Community super name"
+                :chats                   {"89f98a1e-6776-4e5f-8626-8ab9f855253f"
+                                          {:description "x"
+                                           :emoji       "🎲"
+                                           :permissions {:access 1}
+                                           :color       "#88B0FF"
+                                           :name        "random"
+                                           :categoryID  "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
+                                           :id          "89f98a1e-6776-4e5f-8626-8ab9f855253f"
+                                           :position    4
+                                           :can-post?   false
+                                           :members     {"0x04" {"roles" [1]}}}
+                                          "a076358e-4638-470e-a3fb-584d0a542ce6"
+                                          {:description "General channel for the community"
+                                           :emoji       "🐷 "
+                                           :permissions {:access 1}
+                                           :color       "#4360DF"
+                                           :name        "general"
+                                           :categoryID  "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
+                                           :id          "a076358e-4638-470e-a3fb-584d0a542ce6"
+                                           :position    0
+                                           :can-post?   false
+                                           :members     {"0x04" {"roles" [1]}}}}
+                :token-permissions-check {:satisfied true
+                                          :permissions
+                                          {:a3dd5b6b-d93b-452c-b22a-09a8f42ec566 {:criteria [true false
+                                                                                             true]}}
+                                          :validCombinations
+                                          [{:address  "0xd722eaa60dc73e334b588d34ba66a3b27e537783"
+                                            :chainIds nil}
+                                           {:address  "0x738d3146831c5871fa15872b409e8f360e341784"
+                                            :chainIds [5 420]}]}
+                :members                 {"0x04" {"roles" [1]}}
+                :can-request-access?     false
+                :outroMessage            "bla"
+                :verified                false}]
     (swap! rf-db/app-db assoc-in [:communities community-id] community)
-    (is (match? {:can-request-access? true
-                 :tokens              [[{:symbol      "DAI"
-                                         :amount      "5"
-                                         :sufficient? true
-                                         :loading?    checking-permissions?}]
-                                       [{:symbol      "ETH"
-                                         :amount      "0.002"
-                                         :sufficient? false
-                                         :loading?    checking-permissions?
-                                         :img-src     token-image-eth}]]}
+    (is (match? {:can-request-access?   true
+                 :number-of-hold-tokens 2
+                 :tokens                [[{:symbol      "DAI"
+                                           :amount      "5.0"
+                                           :sufficient? nil
+                                           :loading?    checking-permissions?}]
+                                         [{:symbol      "ETH"
+                                           :amount      "0.001"
+                                           :sufficient? nil
+                                           :loading?    checking-permissions?
+                                           :img-src     token-image-eth}]]}
                 (rf/sub [sub-name community-id])))))
 
 (h/deftest-sub :communities/airdrop-account

src/status_im/subs/root.cljs

@@ -148,8 +148,6 @@
 (reg-root-key-sub :communities/selected-tab :communities/selected-tab)
 (reg-root-key-sub :contract-communities :contract-communities)
 (reg-root-key-sub :communities/permissioned-balances :communities/permissioned-balances)
-(reg-root-key-sub :communities/permissions-check :communities/permissions-check)
-(reg-root-key-sub :communities/channel-permissions-check :communities/channel-permissions-check)
 
 ;;activity center
 (reg-root-key-sub :activity-center :activity-center)

src/test_helpers/component.cljs

@@ -53,8 +53,10 @@
   (rtl/render (reagent/as-element component)))
 
 (defn render-with-theme-provider
-  [component theme]
-  (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component])))
+  ([component]
+   (render-with-theme-provider component :light))
+  ([component theme]
+   (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component]))))
 
 (def unmount
   "Unmount rendered component.

status-go-version.json

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "chore/debug-token-permissions",
-    "commit-sha1": "b7b7660a534a01099e55ee0e4253f6a9531c7f02",
-    "src-sha256": "0nrmm3j9z6iwlr32mggd3xl63226drvvhrlrhrkgxcpgrgpixcfj"
+    "version": "v0.174.3",
+    "commit-sha1": "c15f9e73654ed2f21887af680d7730dec5bec3e3",
+    "src-sha256": "09jvamavnkii2fikpz2a5d345aspfp5lzlg5lpymz7lyjif4qn1s"
 }

translations/en.json

@@ -2266,8 +2266,6 @@
     "you-not-eligible-to-join": "You’re not eligible to join",
     "you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
     "addresses-dont-contain-tokens-needed": "These addresses don’t contain tokens needed to join",
-    "you-hodl": "You hodl:",
-    "network-not-supported": "Networks not supported",
     "token-gated-communities": "Token gated communities",
     "read-more": "Read more",
     "token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",

workletize-code.js

@@ -0,0 +1,22 @@
+const process = require('process');
+const babel = require('@babel/core');
+const plugin = require('./node_modules/react-native-reanimated/plugin');
+
+function transformString(inputString) {
+  return babel.transformSync(inputString, {
+    filename: '/dev/null',
+    compact: false,
+    plugins: [plugin],
+  }).code;
+}
+
+process.stdin.setEncoding('utf8');
+let input = '';
+process.stdin.on('data', (chunk) => {
+  input += chunk;
+});
+
+process.stdin.on('end', () => {
+  const result = transformString(input);
+  process.stdout.write(result);
+});