Merge branch 'develop' into 17509

Makefile

@@ -362,6 +362,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	@@scripts/check-metro-shadow-process.sh
 	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
@@ -370,6 +371,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	@scripts/check-metro-shadow-process.sh
 	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \

README.md

@@ -6,17 +6,17 @@
 
 [Get it on Github](https://github.com/status-im/status-mobile/releases)
 
-Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middle men and `go-ethereum` running directly on your device.
+Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middlemen and `go-ethereum` running directly on your device.
 
 [![Getting started with Status](https://i.imgur.com/C0aZZEL.jpg)](https://www.youtube.com/watch?v=oDCSEmS9c3o "Getting started with Status")
 
 ## Why?
 
 We believe in a medium of pure free trade, economies with fair, permission-less access and a world without intermediaries. We want to create policies that can exist between friends or scale globally, we want to communicate securely and be uninhibited by legacy systems.
 
-We want to take responsibility for our data, the way we conduct ourselves privately and promote this way of life to a mass audience.
+We want to take responsibility for our data, and the way we conduct ourselves privately and promote this way of life to a mass audience.
 
-We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provide us a path forward.
+We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provide us with a path forward.
 
 If this interests you, **help us make Status a reality** - anyone can contribute and we need everyone at any skill level to participate.
 
@@ -37,26 +37,26 @@ project dependencies, coding guidelines and testing procedures.
 Check out our [coding guidelines](doc/new-guidelines.md).
 
 - **Community Management**
-Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
+Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and the long-lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
 
 - **Specification / Documentation**
-John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers and Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.
+John Dewey once said, "Education is not preparation for life; education is life *itself* ". Developers and Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.
 
 - **Blog Writing**
 Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page.
 
 - **Testers**
-It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
+It's bug-hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user checks out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
 
 - **Security**
 Status is a visual interface to make permanent changes on the Blockchain, it handles crypto-tokens that have real value and allows 3rd party code execution. Security is paramount to its success. You are given permission to break Status as hard as you can, as long as you share your findings with the community!
 
 - **Evangelism**
-Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
+Help us spread the word! Tell a friend *right now*, in fact, tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
 
 ## Give me Binaries!
 
-You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/) or by [building it yourself](https://status.im/technical/build_status/).
+You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/), or by [building it yourself](https://status.im/technical/build_status/).
 
 ## Core Contributors
 

doc/debugging.md

@@ -99,3 +99,38 @@ Also to inspect logs in a more flexible manner, instead of the strict output fro
 adb logcat | grep 'ReactNativeJS\|StatusModule\|GoLog'
 ```
 
+### From @clauxx (visual debugging):
+
+When building/fixing/refactoring components, it can be annoying to set-up the component for instant visual feedback (i.e. finding it in the UI when fixing/refactoring; finding a place for it when building from scratch). Very often if the location of the screen containing your component nested deeply in the app, you might have to do a lot of repeated navigation, nevermind logging in every time the app reloads (even with fast refresh disabled this happens quite often).
+
+To alleviate this discomfort and make the development cycle more *pleasant*, you can use one of the following options (*_both of which involve the ... REPL ༼ つ ╹ ╹ ༽つ, so make sure you have that set-up with your IDE/editor_*)
+
+#### REPL-ing to a screen
+
+This one is straightforward, just evaluate a navigation dispatch form from anywhere:
+
+```cljs
+(comment (rf/dispatch [:navigate-to :your-favorite-buggy-screen]))
+```
+
+> TIP: you can run this from an untracked user namespace `(ns user)`, from which you can experiment or interact with the REPL. This is where I usually keep my development navigation forms.
+
+#### REPL-ing a component
+
+This is also straighforward, but there are some small differences. Just like above, we only have to evaluate a dispatch form, as follows:
+
+```cljs
+;; example debugging a quo component, although it could be any other component e.g. from the `status-im2` ns.
+(comment (re-frame/dispatch [:dev/preview-component
+                      [quo/slide-button
+                       {:track-icon          :face-id
+                        :track-text          "preview component example"
+                        :customization-color :blue
+                        :on-complete         identity}]]))
+```
+
+When evaluated, a full-screen bottom sheet will appear with your component inside. You can make changes to the props or the component internals and re-evaluate the changed forms, after which the component will be re-mounted without running a reload (unless you save the file). Other times it's quicker to just hit save and the component will be reloaded as usual (except for the props you evaluated, which have to be re-evaluated when changed).
+
+> TIP: You can have multiple versions of the component as separate comments to check for the component variations
+
+> TIP: You can leave `comment` blocks at the end of component files (other than quo, since can be previewed in other ways) with usages of components, which other developers can use for visualisation/testing.

ios/Podfile.lock

@@ -765,7 +765,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: b2dc21e263319892469d656dc58fc26fb03eadab
+  RNReanimated: 62e43ee6baafb9ba3d3af1857d7fd23a1d41bff0
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

scripts/check-metro-shadow-process.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+if pgrep -f 'shadow-cljs watch mobile' > /dev/null; then
+    echo "Error: make run-clojure is already running in another terminal" >&2
+    echo "Please close that terminal before running this command." >&2
+    exit 1
+fi
+
+if pgrep -f 'react-native start' > /dev/null; then
+    echo "Error: make run-metro is already running in another terminal" >&2
+    echo "Please close that terminal before running this command." >&2
+    exit 1
+fi
+
+exit 0

src/dev/component_preview/events.cljs

@@ -0,0 +1,25 @@
+(ns dev.component-preview.events
+  (:require
+    [quo.core :as quo]
+    [re-frame.core :as re-frame]))
+
+(def preview-screen-name :dev-component-preview)
+
+(when js/goog.DEBUG
+  (re-frame/reg-event-fx :dev/preview-component
+   (fn [{:keys [db]} [[component-tag props & args]]]
+     (let [view-id   (:view-id db)
+           ;; NOTE: re-render on every evaluation e.g. reset component state without changes
+           component (into [component-tag (assoc props :key (random-uuid))] args)
+           navigate? (not= view-id preview-screen-name)]
+       (cond-> {:db (assoc db :dev/previewed-component component)}
+         navigate? (assoc :fx [[:dispatch [:navigate-to preview-screen-name]]]))))))
+
+;; Usage example
+(comment
+  (re-frame/dispatch [:dev/preview-component
+                      [quo/slide-button
+                       {:track-icon          :face-id
+                        :track-text          ":debug-component example"
+                        :customization-color :blue
+                        :on-complete         identity}]]))

src/dev/component_preview/view.cljs

@@ -0,0 +1,16 @@
+(ns dev.component-preview.view
+  (:require
+    [react-native.core :as rn]
+    [utils.re-frame :as rf]))
+
+(def ^:private container-style
+  {:flex               1
+   :padding-horizontal 20
+   :padding-top        80
+   :align-items        :center})
+
+(defn view
+  []
+  (let [component (rf/sub [:dev/previewed-component])]
+    [rn/view {:style container-style}
+     (when component component)]))

src/quo/components/colors/color/constants.cljs

@@ -0,0 +1,3 @@
+(ns quo.components.colors.color.constants)
+
+(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)

src/quo/components/colors/color/style.cljs

@@ -1,24 +1,38 @@
 (ns quo.components.colors.color.style
   (:require
+    [quo.components.colors.color.constants :as constants]
     [quo.foundations.colors :as colors]))
 
-(def color-button-common
-  {:width             48
-   :height            48
-   :border-width      4
-   :border-radius     24
-   :margin-horizontal 4
-   :transform         [{:rotate "45deg"}]
-   :border-color      :transparent})
+(defn color-button-common
+  [window-width]
+  {:width         48
+   :height        48
+   :border-width  4
+   :border-radius 24
+   :margin-right  (-> window-width
+                      (- constants/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
+                                                                 ;identical to Figma on iPhone 11
+                                                                 ;Pro, So we're using it's VW here.
+                      (/ 6) ;Dividing by an appropriate factor to get a reasonable value for each VW
+                            ;on other devices (This will yield 0 on iPhone 11 Pro, Which is what we
+                            ;want)
+                      (+ 8)) ;Add same margin that's on Figma for 11 Pro, This value will increase
+                             ;based on the device VW because of the division above.
+   :transform     [{:rotate "45deg"}]
+   :border-color  :transparent})
 
 (defn color-button
-  [color selected?]
-  (merge color-button-common
-         (when selected?
-           {:border-top-color    (colors/alpha color 0.4)
-            :border-end-color    (colors/alpha color 0.4)
-            :border-bottom-color (colors/alpha color 0.2)
-            :border-start-color  (colors/alpha color 0.2)})))
+  ([color selected?]
+   (color-button color selected? nil nil))
+  ([color selected? idx window-width]
+   (merge (color-button-common window-width)
+          (when selected?
+            {:border-top-color    (colors/alpha color 0.4)
+             :border-end-color    (colors/alpha color 0.4)
+             :border-bottom-color (colors/alpha color 0.2)
+             :border-start-color  (colors/alpha color 0.2)}
+            (when (zero? idx)
+              {:margin-left -4})))))
 
 (defn color-circle
   [color border?]

src/quo/components/colors/color/view.cljs

@@ -19,7 +19,9 @@
            selected?
            on-press
            blur?
-           theme]
+           theme
+           idx
+           window-width]
     :as   props}]
   (let [border?   (and (not blur?) (not selected?))
         hex-color (if (= :feng-shui color)
@@ -29,7 +31,7 @@
                                          theme))]
 
     [rn/pressable
-     {:style               (style/color-button hex-color selected?)
+     {:style               (style/color-button hex-color selected? idx window-width)
       :accessibility-label :color-picker-item
       :on-press            #(on-press color)}
      (if (and (= :feng-shui color) (not selected?))

src/quo/components/colors/color_picker/view.cljs

@@ -17,20 +17,22 @@
    - `default-selected` Default selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected]}]
+  [{:keys [default-selected window-width]}]
   (let [selected (reagent/atom default-selected)]
     (fn [{:keys [blur? on-change feng-shui? container-style]}]
       [rn/scroll-view
        {:horizontal                        true
         :shows-horizontal-scroll-indicator false
         :content-container-style           container-style}
-       (doall (map (fn [color]
-                     [color/view
-                      {:selected? (= color @selected)
-                       :on-press  #(on-change-handler selected % on-change)
-                       :blur?     blur?
-                       :key       color
-                       :color     color}])
-                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                   ;; https://github.com/status-im/status-mobile/discussions/16676
-                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+       (doall (map-indexed (fn [idx color]
+                             [color/view
+                              {:selected?    (= color @selected)
+                               :on-press     #(on-change-handler selected % on-change)
+                               :blur?        blur?
+                               :key          color
+                               :color        color
+                               :idx          idx
+                               :window-width window-width}])
+                           ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                           ;; https://github.com/status-im/status-mobile/discussions/16676
+                           (if feng-shui? (conj color-list :feng-shui) color-list)))])))

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

@@ -7,25 +7,26 @@
 (def empty-username "Account 1")
 
 (defn get-test-data
-  [type watch-only? empty-type? loading? metrics?]
+  [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
   {:name                (if empty-type? empty-username username)
    :balance             "€1,000.00"
    :percentage-value    "50%"
    :amount              "€500.00"
    :customization-color :blue
    :watch-only?         watch-only?
    :loading?            loading?
-   :metrics?            metrics?
+   :metrics?            (not no-metrics?)
    :type                type})
 
 (h/describe "Account_card tests"
   (h/test "Renders Default"
-    (let [data (get-test-data :default false false false true)]
+    (let [data (get-test-data {:type :default})]
       (h/render [account-card/view data])
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Watch-Only"
-    (let [data (get-test-data :watch-only true false false true)]
+    (let [data (get-test-data {:type        :watch-only
+                               :watch-only? true})]
       (h/render [account-card/view data])
       (h/is-truthy (h/get-by-text username))))
 
@@ -35,10 +36,16 @@
       (h/is-truthy (h/get-by-label-text :add-account))))
 
   (h/test "Renders Empty"
-    (let [data (get-test-data :empty false true false true)]
+    (let [data (get-test-data {:type        :empty
+                               :empty-type? true})]
       (h/render [account-card/view data])
       (h/is-truthy (h/get-by-text empty-username))))
 
+  (h/test "Renders Missing Keypair"
+    (let [data (get-test-data {:type :missing-keypair})]
+      (h/render [account-card/view data])
+      (h/is-truthy (h/get-by-text username))))
+
   (h/test "Add account on press fires correctly"
     (let [on-press (h/mock-fn)
           data     {:type     :add-account
@@ -48,16 +55,20 @@
       (h/was-called on-press)))
 
   (h/test "Renders component without metrics"
-    (let [data (get-test-data :default false false false false)]
+    (let [data (get-test-data {:type        :default
+                               :no-metrics? true})]
       (h/render [account-card/view data])
       (h/is-falsy (h/query-by-label-text :metrics))))
 
   (h/test "Renders loading state"
-    (let [data (get-test-data :default false false true true)]
+    (let [data (get-test-data {:type     :default
+                               :loading? true})]
       (h/render [account-card/view data])
       (h/is-truthy (h/get-by-label-text :loading))))
 
   (h/test "Renders loading state without metrics"
-    (let [data (get-test-data :default false false true false)]
+    (let [data (get-test-data {:type        :default
+                               :no-metrics? true
+                               :loading?    true})]
       (h/render [account-card/view data])
       (h/is-falsy (h/query-by-label-text :metrics)))))