[#18495] Fix token not ready for next screen (#18532)

* Fix exception thrown re-frame don't have the subs' value ready

* Make Token malli schema more lenient

*  Make `get-standard-crypto-format` able to work with `nil` values

*  Refactor token screen to move subscriptions inside render function

* Make token input reactive to on-swap

* Remove `crypto-currency?` atom to properly react to state changes

* Fix component tests

src/quo/components/utilities/token/view.cljs

@@ -12,7 +12,7 @@
    [:cat
     [:map {:closed true}
      [:size {:optional true :default 32} [:or keyword? pos-int?]]
-     [:token {:optional true} [:or keyword? string?]]
+     [:token {:optional true} [:maybe [:or keyword? string?]]]
      [:style {:optional true} map?]
      ;; Ignores `token` and uses this as parameter to `rn/image`'s source.
      [:image-source {:optional true} [:maybe [:or :schema.common/image-source :string]]]]]

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

@@ -111,33 +111,32 @@
          :value (if controlled-input? value @value-atom)}]])))
 
 (defn- view-internal
-  [{:keys [on-swap]}]
-  (let [width          (:width (rn/get-window))
-        value-atom     (reagent/atom nil)
-        crypto?        (reagent/atom true)
-        handle-on-swap (fn []
-                         (swap! crypto? not)
-                         (when on-swap
-                           (on-swap @crypto?)))]
-    (fn [{:keys [theme container-style value] :as props}]
-      [rn/view {:style (merge (style/main-container width) container-style)}
-       [rn/view {:style style/amount-container}
-        [input-section
-         (assoc props
-                :value-atom value-atom
-                :crypto?    @crypto?)]
-        [button/button
-         {:icon                true
-          :icon-only?          true
-          :size                32
-          :on-press            handle-on-swap
-          :type                :outline
-          :accessibility-label :reorder}
-         :i/reorder]]
-       [divider-line/view {:container-style (style/divider theme)}]
-       [data-info
-        (assoc props
-               :crypto? @crypto?
-               :amount  (or value @value-atom))]])))
+  []
+  (let [width      (:width (rn/get-window))
+        value-atom (reagent/atom nil)
+        crypto?    (reagent/atom true)]
+    (fn [{:keys [theme container-style value on-swap] :as props}]
+      (let [handle-on-swap (fn []
+                             (swap! crypto? not)
+                             (when on-swap (on-swap @crypto?)))]
+        [rn/view {:style (merge (style/main-container width) container-style)}
+         [rn/view {:style style/amount-container}
+          [input-section
+           (assoc props
+                  :value-atom value-atom
+                  :crypto?    @crypto?)]
+          [button/button
+           {:icon                true
+            :icon-only?          true
+            :size                32
+            :on-press            handle-on-swap
+            :type                :outline
+            :accessibility-label :reorder}
+           :i/reorder]]
+         [divider-line/view {:container-style (style/divider theme)}]
+         [data-info
+          (assoc props
+                 :crypto? @crypto?
+                 :amount  (or value @value-atom))]]))))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/common/utils.cljs

@@ -74,11 +74,13 @@
 (defn get-standard-crypto-format
   "For full details: https://github.com/status-im/status-mobile/issues/18225"
   [{:keys [market-values-per-currency]} token-units]
-  (let [price          (get-in market-values-per-currency [:usd :price])
-        one-cent-value (if (pos? price) (/ 0.01 price) 0)
-        decimals-count (calc-max-crypto-decimals one-cent-value)]
-    (if (money/equal-to token-units 0)
-      "0"
+  (if (or (nil? token-units)
+          (nil? market-values-per-currency)
+          (money/equal-to token-units 0))
+    "0"
+    (let [price          (-> market-values-per-currency :usd :price)
+          one-cent-value (if (pos? price) (/ 0.01 price) 0)
+          decimals-count (calc-max-crypto-decimals one-cent-value)]
       (if (< token-units one-cent-value)
         (str "<" (remove-trailing-zeroes (.toFixed one-cent-value decimals-count)))
         (remove-trailing-zeroes (.toFixed token-units decimals-count))))))

src/status_im/contexts/wallet/send/events.cljs

@@ -58,7 +58,8 @@
  (fn [{:keys [db]}]
    {:db (update-in db [:wallet :ui :send] dissoc :recipient :to-address)}))
 
-(rf/reg-event-fx :wallet/select-send-address
+(rf/reg-event-fx
+ :wallet/select-send-address
  (fn [{:keys [db]} [{:keys [address token recipient stack-id]}]]
    (let [[prefix to-address] (utils/split-prefix-and-address address)
          prefix-seq          (string/split prefix #":")
@@ -75,7 +76,8 @@
               [:wallet-send-input-amount stack-id]
               [:wallet-select-asset stack-id])]]})))
 
-(rf/reg-event-fx :wallet/update-receiver-networks
+(rf/reg-event-fx
+ :wallet/update-receiver-networks
  (fn [{:keys [db]} [selected-networks]]
    {:db (assoc-in db [:wallet :ui :send :selected-networks] selected-networks)}))
 
@@ -84,11 +86,10 @@
    {:db (-> db
             (update-in [:wallet :ui :send] dissoc :collectible)
             (assoc-in [:wallet :ui :send :token] token))
-    :fx [[:dispatch-later
-          {:ms       1
-           :dispatch [:navigate-to-within-stack [:wallet-send-input-amount stack-id]]}]]}))
+    :fx [[:navigate-to-within-stack [:wallet-send-input-amount stack-id]]]}))
 
-(rf/reg-event-fx :wallet/send-select-token-drawer
+(rf/reg-event-fx
+ :wallet/send-select-token-drawer
  (fn [{:keys [db]} [{:keys [token]}]]
    {:db (assoc-in db [:wallet :ui :send :token] token)}))
 

src/status_im/contexts/wallet/send/input_amount/component_spec.cljs

@@ -53,8 +53,9 @@
   (h/test "Default render"
     (h/setup-subs sub-mocks)
     (h/render [input-amount/view
-               {:crypto-decimals 2
-                :limit-crypto    250}])
+               {:crypto-decimals          2
+                :limit-crypto             250
+                :initial-crypto-currency? false}])
     (h/is-truthy (h/get-by-text "0"))
     (h/is-truthy (h/get-by-text "ETH"))
     (h/is-truthy (h/get-by-text "$0.00"))
@@ -65,9 +66,10 @@
     (h/setup-subs sub-mocks)
     (let [on-confirm (h/mock-fn)]
       (h/render [input-amount/view
-                 {:on-confirm      on-confirm
-                  :crypto-decimals 10
-                  :limit-crypto    1000}])
+                 {:on-confirm               on-confirm
+                  :crypto-decimals          10
+                  :limit-crypto             1000
+                  :initial-crypto-currency? false}])
 
       (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
@@ -88,9 +90,10 @@
 
     (let [on-confirm (h/mock-fn)]
       (h/render [input-amount/view
-                 {:crypto-decimals 10
-                  :limit-crypto    1000
-                  :on-confirm      on-confirm}])
+                 {:crypto-decimals          10
+                  :limit-crypto             1000
+                  :on-confirm               on-confirm
+                  :initial-crypto-currency? false}])
 
       (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/fire-event :press (h/query-by-label-text :keyboard-key-2))