Merge branch 'develop' into ff/account-card-component

README.md

@@ -2,7 +2,9 @@
 
 [<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" alt="Get it on Google Play" height="80"/>](https://play.google.com/store/apps/details?id=im.status.ethereum)
 [<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"/>](https://f-droid.org/packages/im.status.ethereum/)
-[<img src="doc/github_badge.png" alt="Get it on Github" height="80"/>](https://github.com/status-im/status-mobile/releases)
+
+
+[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.
 
@@ -20,41 +22,38 @@ If this interests you, **help us make Status a reality** - anyone can contribute
 
 ## How to Contribute?
 
-Go straight to the [docs](https://status.im/docs) or [join our chat](https://join.status.im/chat/public/status) and choose what interests you:
+Go straight to the [docs](doc/) and choose what interests you:
 
 - **Developer** Developers are the heart of software and to keep Status beating
 we need all the help we can get! If you're looking to code in ClojureScript or
 Golang then Status is the project for you! We use React Native and there is even
 some Java/Objective-C too! Want to learn more about it? Start by reading our
-[Developer Introduction](https://status.im/developer_tools/) which guides you
+[Developer Introduction](doc/starting-guide.md) which guides you
 through the technology stack and start browsing [beginner
 issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20).
 Then you can read how to [Build
-Status](https://status.im/technical/build_status/), which talks about managing
-project dependencies, coding guidelines and testing procedures. The [doc/](doc/)
-directory also has valuable information for contributors.
+Status](doc/starting-guide.md), which talks about managing
+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)
 
 - **Specification / Documentation**
-John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, head over to our [docs](https://status.im/docs) and see how you can improve what we have.
+John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & 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. [Jump into our chat](https://join.status.im/chat/public/status) and discuss with the team how you can contribute!
+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](https://status.im/technical/build_status/) 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 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!
 
 - **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)
 
-## Status API
-View our [API Docs](https://status.im/developer_tools/status_web_api.html) and learn how to integrate your DApp into Status. You can read more about how to add your DApp to Status [here](https://status.im/developer_tools/add_your_dapp.html).
-
 ## 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/).
@@ -68,12 +67,8 @@ Without the dedication of these outstanding individuals, Status would not exist.
 
 ## Contact us
 
-Feel free to email us at [support@status.im](mailto:support@status.im) or better yet, [join our chat](https://join.status.im/chat/public/status).
+Feel free to email us at [support@status.im](mailto:support@status.im).
 
 ## License
 
 Licensed under the [Mozilla Public License v2.0](https://github.com/status-im/status-mobile/blob/develop/LICENSE.md)
-
-## Testing Supported by
-
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)](https://www.browserstack.com/automate/public-build/SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)

doc/README.md

@@ -24,6 +24,7 @@
 
 [Patching](patching.md)
 
+[Creating a pixel perfect UI](pixel-perfection.md)
 
 ## Testing
 

doc/new-guidelines.md

@@ -80,6 +80,52 @@ This mistake mostly happens with functional components
 
 it's important to name functional components with `f-` prefix
 
+### Component props and API scheme to match Figma as closely as possible
+
+Ideally, the prop names for components (particularly in quo2 Design System) should match the Figma properties as best as possible. This makes it easier for the developer using that component to configure it correctly for the screen it is being used on and avoids unnecessary overwrites and adjustments being made.
+
+#### Avoid unnecessarily grouping categories to reduce the number of props
+For example in Figma if there is a component and it has the following variants:
+
+|theme: "light" blur: "False"|theme: "dark" blur: "False"|theme: "light" blur: "True"|theme: "dark"  blur: "True"|
+|----------------------------|---------------------------|---------------------------|---------------------------|
+| type :neutral label "ABC"  | type :neutral label "ABC" |                           |                           |
+| type :active  label "ABC"  | type :active  label "ABC" |                           |                           |
+| type :danger  label "ABC"  | type :danger  label "ABC" | type :danger label "ABC"  | type :danger label "ABC"  |
+
+```clojure
+;; bad
+"theme - :light or :dark
+type - can be :neutral :active :danger :danger-blur"
+(defn my-component [{:keys [theme type]} label])
+
+;; good
+"theme - :light or :dark
+ type - can be :neutral :active :danger
+ blur? - boolean
+"
+(defn my-component [{:keys [theme blur? type]} label])
+```
+
+Please note this is only for the external API of the component and there should be no restriction of how the component manages its internal API as that will not affect the developer using the component with the issues described above.
+
+In some cases this is not always possible or does not make sense. However the thought process should be how easy will it be for another developer to use this component with the correct configuration given the screen designs for Figma.
+
+#### Avoid unnecessarily renaming props 
+In general it can be helpful to avoid renaming props from their counterpart in Figma.
+
+For example if Figma has sizes `:small`, `:medium` and `:large`
+
+```clojure
+;; bad
+":size - :little, :default or :big"
+(defn my-component [{:keys [size]}])
+
+;; good
+":size - :small, :medium or :large"
+(defn my-component [{:keys [size]}])
+```
+
 ### Component styles
 
 Prefer to define styles in a separate file named `style.cljs`, colocated with

doc/pixel-perfection.md

@@ -0,0 +1,17 @@
+# Pixel Perfection
+The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.
+
+Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. 
+
+To test your implementation is correct you can take the following steps
+
+- Open a new Figma file so that you have write privileges. 
+- Copy in the component or screen from the Figma file.
+
+- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+
+- To get the right size, set your screenshot to width 375px
+
+![](images/pixel-perfection/layer-width.png)
+
+- Lower the opacity so you can see it sitting on top of the Figma mock ups. 

src/js/worklets/shell/constants.js

@@ -1,18 +1,18 @@
 import { Easing } from 'react-native-reanimated';
 
 // Home Stack States
-export const CLOSE_WITH_ANIMATION = 0;
-export const OPEN_WITH_ANIMATION = 1;
-export const CLOSE_WITHOUT_ANIMATION = 2;
-export const OPEN_WITHOUT_ANIMATION = 3;
+export const CLOSE_WITHOUT_ANIMATION = 0;
+export const OPEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_WITH_ANIMATION = 2;
+export const OPEN_WITH_ANIMATION = 3;
 
 // Floating Screen States
-export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 0;
-export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 1;
-export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
-export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
-export const CLOSE_SCREEN_WITHOUT_ANIMATION = 4;
-export const OPEN_SCREEN_WITHOUT_ANIMATION = 5;
+export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
+export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
+export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
+export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
+export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;
 
 export const SHELL_ANIMATION_TIME = 200;
 

src/quo2/components/community/community_list_view.cljs

@@ -29,52 +29,6 @@
     unread-messages?
     [unread-grey-dot :unviewed-messages-public]))
 
-(defn communities-list-view-item
-  [props
-   {:keys [name
-           locked?
-           status
-           muted?
-           unread-messages?
-           unread-mentions-count
-           community-icon
-           tokens]}]
-  [rn/view
-   {:style (merge (style/community-card 16)
-                  {:margin-bottom 12})}
-   [rn/touchable-highlight
-    (merge {:style {:height        56
-                    :border-radius 16}}
-           props)
-    [rn/view {:style style/detail-container}
-     [rn/view (style/list-info-container)
-      [community-icon/community-icon
-       {:images community-icon} 32]
-      [rn/view
-       {:flex              1
-        :margin-horizontal 12}
-       [text/text
-        {:weight              :semi-bold
-         :size                :paragraph-1
-         :accessibility-label :community-name-text
-         :number-of-lines     1
-         :ellipsize-mode      :tail
-         :style               {:color (when muted?
-                                        (colors/theme-colors
-                                         colors/neutral-40
-                                         colors/neutral-60))}}
-        name]
-       [community-view/community-stats-column
-        {:type :list-view}]]
-      (if (= status :gated)
-        [community-view/permission-tag-container
-         {:locked? locked?
-          :tokens  tokens}]
-        [notification-view
-         {:muted?                muted?
-          :unread-mentions-count unread-mentions-count
-          :unread-messages?      unread-messages?}])]]]])
-
 (defn communities-membership-list-item
   [props
    {:keys [name

src/quo2/components/community/community_view.cljs

@@ -5,13 +5,17 @@
             [quo2.components.tags.permission-tag :as permission]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
-            [quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
-            [react-native.core :as rn]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.gesture :as gesture]
+            utils.money))
 
 (defn community-stats
-  [{:keys [icon members-count icon-color]}]
-  [rn/view (style/stats-count-container)
-   [rn/view {:margin-right 4}
+  [{:keys [icon members-count icon-color accessibility-label]}]
+  [rn/view
+   {:accessibility-label accessibility-label
+    :style               (style/stats-count-container)}
+   [rn/view {:margin-right 2}
     [icons/icon icon
      {:container-style {:align-items     :center
                         :justify-content :center}
@@ -20,29 +24,32 @@
       :color           icon-color}]]
    [text/text
     {:weight :regular
-     :size   :paragraph-1}
+     :size   :paragraph-2}
     members-count]])
 
 (defn community-stats-column
-  [{:keys [type]}]
-  (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+  [{:keys [type theme blur? members-count active-count]}]
+  (let [icon-color (if (and (= :dark theme) blur?)
+                     colors/white-opa-40
+                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
     [rn/view
      (if (= type :card-view)
        (style/card-stats-container)
        (style/list-stats-container))
      [community-stats
-      {:icon          :i/group
-       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from
-                               ;;outside this component
-       :icon-color    icon-color}]
+      {:accessibility-label :stats-members-count
+       :icon                :i/group
+       :members-count       (utils.money/format-amount members-count)
+       :icon-color          icon-color}]
      [community-stats
-      {:icon          :i/lightning
-       :members-count "112.1K"
-       :icon-color    icon-color}]]))
+      {:accessibility-label :stats-active-count
+       :icon                :i/active-members
+       :members-count       (utils.money/format-amount active-count)
+       :icon-color          icon-color}]]))
 
 (defn community-tags
   [{:keys [tags container-style last-item-style]}]
-  [gesture-handler/scroll-view
+  [gesture/scroll-view
    {:shows-horizontal-scroll-indicator false
     :horizontal                        true
     :style                             container-style}
@@ -84,13 +91,16 @@
        :style               {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container
-  [{:keys [locked? tokens on-press]}]
+(defn- permission-tag-container-internal
+  [{:keys [locked? blur? tokens on-press theme]}]
   [permission/tag
-   {:background-color (colors/theme-colors
-                       colors/neutral-10
-                       colors/neutral-80)
-    :locked?          locked?
-    :tokens           tokens
-    :size             24
-    :on-press         on-press}])
+   {:accessibility-label :permission-tag
+    :background-color    (if (and (= :dark theme) blur?)
+                           colors/white-opa-10
+                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+    :locked?             locked?
+    :tokens              tokens
+    :size                24
+    :on-press            on-press}])
+
+(def permission-tag-container (theme/with-theme permission-tag-container-internal))

src/quo2/components/list_items/community/component_spec.cljs

@@ -0,0 +1,70 @@
+(ns quo2.components.list-items.community.component-spec
+  (:require [quo2.components.list-items.community.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Community list"
+  (h/test "default render"
+    (h/render [component/view {}])
+    (h/is-truthy (h/get-by-label-text :community-item-title))
+    (h/is-null (h/query-by-label-text :community-item-info)))
+
+  (h/describe "type share"
+    (h/test "renders"
+      (h/render [component/view
+                 {:type     :share
+                  :title    "Title"
+                  :subtitle "Subtitle"}])
+      (h/is-truthy (h/get-by-text "# Title"))
+      (h/is-truthy (h/get-by-text "Subtitle"))
+      (h/is-null (h/query-by-label-text :community-item-info))))
+
+  (h/describe "type engage"
+    (h/test "default, no info"
+      (h/render [component/view {:type :engage}])
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :navigation"
+      (h/render [component/view {:type :engage :info :navigation}])
+      (h/is-truthy (h/get-by-label-text :info-navigation)))
+
+    (h/test "info is :token-gated"
+      (h/render [component/view {:type :engage :info :token-gated}])
+      (h/is-truthy (h/get-by-label-text :info-token-gated)))
+
+    (h/test "info is :muted"
+      (h/render [component/view {:type :engage :info :muted}])
+      (h/is-truthy (h/get-by-label-text :info-muted)))
+
+    (h/test "info is :notification"
+      (h/render [component/view {:type :engage :info :notification}])
+      (h/is-truthy (h/get-by-label-text :info-notification-dot)))
+
+    (h/test "info is :mention"
+      (h/render [component/view
+                 {:type         :engage
+                  :info         :mention
+                  :unread-count 9000}])
+      (h/is-truthy (h/get-by-text "99+"))))
+
+  (h/describe "type discover"
+    (h/test "default, no info, no member stats"
+      (h/render [component/view {:type :discover}])
+      (h/is-null (h/query-by-label-text :stats-members-count))
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :token-gated, show member stats"
+      (let [on-press-info (h/mock-fn)]
+        (h/render [component/view
+                   {:type          :discover
+                    :info          :token-gated
+                    :locked?       true
+                    :blur?         false
+                    :on-press-info on-press-info
+                    :members       {:members-count 9876 :active-count 1350}
+                    :tokens        [{:id 1 :group [{:id 1}]}]}])
+        (h/is-truthy (h/get-by-label-text :community-item-info))
+        (h/is-truthy (h/get-by-label-text :permission-tag))
+        (h/is-truthy (h/get-by-label-text :stats-members-count))
+        (h/is-truthy (h/get-by-label-text :stats-active-count))
+        (h/fire-event :press (h/get-by-label-text :permission-tag))
+        (h/was-called on-press-info)))))