Merge branch 'develop' into 16845

doc/decisions/0014-wallet-team.md

@@ -27,3 +27,4 @@ The team members for the initial wallet team are:
 - @ulisesmac
 - @erikseppanen
 - @mmilad75
+- @tumanov-alex

nix/mobile/android/default.nix

@@ -15,19 +15,11 @@ rec {
     ];
 
     inputsFrom = [
-      release
+      (release {})
       androidShell
     ];
 
     shellHook = ''
-      export ANDROID_SDK_ROOT="${androidPkgs.sdk}"
-      export ANDROID_NDK_ROOT="${androidPkgs.ndk}"
-
-      export STATUS_NIX_MAVEN_REPO="${deps.gradle}"
-
-      # required by some makefile targets
-      export STATUS_GO_ANDROID_LIBDIR=${status-go}
-
       # check if node modules changed and if so install them
       $STATUS_MOBILE_HOME/nix/scripts/node_modules.sh ${deps.nodejs-patched}
     '';

nix/mobile/android/release.nix

@@ -30,6 +30,9 @@ let
   # Pass secretsFile for POKT_TOKEN to jsbundle build
   builtJsBundle = jsbundle { inherit secretsFile; };
 
+  # Map ANDROID_ABI_INCLUDE to status-go targets
+  androidAbiIncludeSplit = lib.splitString ";" androidAbiInclude;
+
 
   envFileName =
     if androidAbiInclude == "x86"                  then ".env.e2e"
@@ -77,20 +80,25 @@ in stdenv.mkDerivation rec {
   ANDROID_ABI_SPLIT = androidAbiSplit;
   ANDROID_ABI_INCLUDE = androidAbiInclude;
 
-  # Android SDK/NDK for use by Gradle
-  ANDROID_SDK_ROOT = "${androidPkgs.sdk}";
-  ANDROID_NDK_ROOT = "${androidPkgs.ndk}";
-
   # Fix for ERR_OSSL_EVP_UNSUPPORTED error.
   NODE_OPTIONS = "--openssl-legacy-provider";
 
-  # Used by the Android Gradle build script in android/build.gradle
-  STATUS_GO_ANDROID_LIBDIR = status-go;
-
   phases = [
-    "unpackPhase" "secretsPhase" "buildPhase" "checkPhase" "installPhase"
+    "shellHook" "unpackPhase" "secretsPhase" "buildPhase" "checkPhase" "installPhase"
   ];
 
+  # We use shellHook as a single place to setup env vars for both build derivation and shell
+  shellHook = ''
+    # Used by the Android Gradle build script in android/build.gradle
+    export STATUS_GO_ANDROID_LIBDIR=${ status-go { abis = androidAbiIncludeSplit; } }
+
+    # Android SDK/NDK for use by Gradle
+    export ANDROID_SDK_ROOT="${androidPkgs.sdk}"
+    export ANDROID_NDK_ROOT="${androidPkgs.ndk}"
+
+    export STATUS_NIX_MAVEN_REPO="${deps.gradle}"
+  '';
+
   unpackPhase = ''
     cp -ar $src/. ./
     chmod u+w -R ./

nix/shells.nix

@@ -66,7 +66,7 @@ let
     # helpers for use with target argument
     ios = targets.mobile.ios.shell;
     android = targets.mobile.android.shell;
-    status-go = targets.status-go.mobile.android;
+    status-go = targets.status-go.mobile.android {};
   };
 
   # for merging the default shell with others

nix/status-go/mobile/default.nix

@@ -1,10 +1,18 @@
 { callPackage, meta, source, goBuildLdFlags }:
 
 {
-  android = callPackage ./build.nix {
+  android = {abis ? [ "armeabi-v7a" "arm64-v8a" "x86" ]}: callPackage ./build.nix {
     platform = "android";
     platformVersion = "23";
-    targets = [ "android/arm" "android/arm64" "android/386" ];
+    # Hide different arch naming in gomobile from Android builds.
+    targets = let
+      abiMap = {
+        "armeabi-v7a" = "android/arm";
+        "arm64-v8a"   = "android/arm64";
+        "x86"         = "android/386";
+        "x86_64"      = "android/amd64";
+        };
+      in map (arch: abiMap."${arch}") abis;
     outputFileName = "status-go-${source.shortRev}.aar";
     inherit meta source goBuildLdFlags;
   };

package.json

@@ -66,13 +66,13 @@
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "2.11.0",
     "react-native-redash": "^16.0.11",
-    "react-native-svg": "13.10.0",
     "react-native-shake": "^3.3.1",
     "react-native-share": "^8.2.2",
     "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#refs/tags/v2.5.39",
+    "react-native-svg": "13.10.0",
     "react-native-touch-id": "^4.4.1",
-    "react-native-transparent-video": "git+https://github.com/status-im/react-native-transparent-video.git#refs/tags/0.0.9",
+    "react-native-transparent-video": "git+https://github.com/status-im/react-native-transparent-video.git#refs/tags/0.1.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
     "react-syntax-highlighter": "^15.5.0",
     "rn-emoji-keyboard": "0.7.0",

src/mocks/js_dependencies.cljs

@@ -10,14 +10,14 @@
 ;; (-> reanimated/slide-out-up-animation (.damping 20) .springify (.stiffness 300))
 (js/eval
  "
-var globalThis
-if (typeof window === \"undefined\") {
-  globalThis = global
-} else {
-  globalThis = window
-}
-globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
-")
+ var globalThis
+ if (typeof window === \"undefined\") {
+   globalThis = global
+ } else {
+   globalThis = window
+ }
+ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
+ ")
 
 (def action-button #js {:default #js {:Item #js {}}})
 (def config #js {:default #js {}})
@@ -139,15 +139,17 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def react-native-share #js {:default {}})
 (def react-native-svg
   #js
-   {:ClipPath #js {:render identity}
-    :Circle   #js {:render identity}
-    :Defs     #js {:render identity}
-    :G        #js {:render identity}
-    :Path     #js {:render identity}
-    :Rect     #js {:render identity}
-    :SvgUri   #js {:render identity}
-    :SvgXml   #js {:render identity}
-    :default  #js {:render identity}})
+   {:ClipPath       #js {:render identity}
+    :Circle         #js {:render identity}
+    :Defs           #js {:render identity}
+    :G              #js {:render identity}
+    :Path           #js {:render identity}
+    :Rect           #js {:render identity}
+    :SvgUri         #js {:render identity}
+    :SvgXml         #js {:render identity}
+    :LinearGradient #js {:render identity}
+    :Stop           #js {:render identity}
+    :default        #js {:render identity}})
 (def react-native-webview #js {:default {}})
 (def react-native-audio-toolkit
   #js

src/quo2/components/avatars/group_avatar/style.cljs

@@ -3,12 +3,12 @@
 
 (defn container
   [{:keys [container-size customization-color theme]}]
-  {:width container-size
-   :height container-size
-   :align-items :center
-   :justify-content :center
-   :border-radius (/ container-size 2)
-   :background-color
-   (colors/theme-colors (colors/custom-color customization-color 50)
-                        (colors/custom-color customization-color 60)
-                        theme)})
+  {:width            container-size
+   :height           container-size
+   :align-items      :center
+   :justify-content  :center
+   :border-radius    (/ container-size 2)
+   :overflow         :hidden
+   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
+                                          (colors/custom-color customization-color 60)
+                                          theme)})

src/quo2/components/avatars/group_avatar/view.cljs

@@ -7,25 +7,24 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:icon      {:x-small 12
-               :small   16
-               :medium  16
-               :large   20
-               :x-large 32}
-   :container {:x-small 20
-               :small   28
-               :medium  32
-               :large   48
-               :x-large 80}})
+  {:size/s-20 {:icon      12
+               :container 20}
+   :size/s-28 {:icon      16
+               :container 28}
+   :size/s-32 {:icon      16
+               :container 32}
+   :size/s-48 {:icon      20
+               :container 48}
+   :size/s-80 {:icon      32
+               :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
-               customization-color :blue
-               picture             nil}}]
-    (let [container-size (get-in sizes [:container size])
-          icon-size      (get-in sizes [:icon size])]
+        :or   {size                :size/s-20
+               customization-color :blue}}]
+    (let [container-size (get-in sizes [size :container])
+          icon-size      (get-in sizes [size :icon])]
       [rn/view
        {:style (style/container {:container-size      container-size
                                  :customization-color customization-color

src/quo2/components/avatars/icon_avatar.cljs

@@ -1,15 +1,16 @@
 (ns quo2.components.avatars.icon-avatar
   (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
 (def sizes
   {:big    48
    :medium 32
    :small  20})
 
-(defn icon-avatar
-  [{:keys [size icon color opacity]
+(defn icon-avatar-internal
+  [{:keys [size icon color opacity border? theme]
     :or   {opacity 20}}]
   (let [component-size (size sizes)
         circle-color   (colors/custom-color color 50 opacity)
@@ -22,9 +23,13 @@
      {:style {:width            component-size
               :height           component-size
               :border-radius    component-size
+              :border-width     (when border? 1)
+              :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
               :background-color circle-color
               :justify-content  :center
               :align-items      :center}}
      [icons/icon icon
       {:size  icon-size
        :color icon-color}]]))
+
+(def icon-avatar (quo.theme/with-theme icon-avatar-internal))

src/quo2/components/avatars/user_avatar/view.cljs

@@ -99,6 +99,10 @@
                        :ring?            ring?})}
                (:uri profile-picture)
                profile-picture
+
+               (number? profile-picture)
+               profile-picture
+
                :else {:uri profile-picture})}])]))
 
 (def user-avatar (quo2.theme/with-theme user-avatar-internal))

src/quo2/components/buttons/dynamic_button/view.cljs

@@ -61,6 +61,7 @@
         :active-opacity      1
         :hit-slop            {:top 5 :bottom 5 :left 5 :right 5}
         :pointer-events      :auto
+        :style               {:height 24}
         :accessibility-label type}
        [rn/view
         {:style (merge

src/quo2/components/buttons/wallet_button/component_spec.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.buttons.wallet-button.component-spec
+  (:require [quo2.components.buttons.wallet-button.view :as wallet-button]
+            [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of wallet button component"
+    (h/render [wallet-button/view
+               {:icon                :i/placeholder
+                :accessibility-label "test-button"}])
+    (h/is-truthy (h/get-by-label-text "test-button")))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-called event)))
+
+  (h/test "button on-press disabled when disabled"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"
+                  :disabled?           true}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-not-called event)))
+
+  (h/test "button on-long-press works"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-long-press       event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :long-press (h/get-by-label-text "test-button"))
+      (h/was-called event))))
+

src/quo2/components/buttons/wallet_button/style.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.buttons.wallet-button.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-border-color
+  [{:keys [pressed? theme]}]
+  (if (= pressed? true)
+    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
+
+(defn main
+  [{:keys [pressed? theme disabled?]}]
+  {:border-color    (get-border-color {:pressed? pressed?
+                                       :theme    theme})
+   :border-width    1
+   :border-radius   10
+   :width           32
+   :height          32
+   :justify-content :center
+   :align-items     :center
+   :opacity         (when disabled? 0.3)})

src/quo2/components/buttons/wallet_button/view.cljs

@@ -0,0 +1,29 @@
+(ns quo2.components.buttons.wallet-button.view
+  (:require
+    [quo2.components.buttons.wallet-button.style :as style]
+    [quo2.components.icon :as quo2.icons]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn- view-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [on-press on-long-press disabled? icon accessibility-label container-style theme]}]
+      [rn/pressable
+       {:accessibility-label (or accessibility-label :wallet-button)
+        :on-press            on-press
+        :on-press-in         #(reset! pressed? true)
+        :on-press-out        #(reset! pressed? nil)
+        :on-long-press       on-long-press
+        :disabled            disabled?
+        :style               (merge (style/main {:pressed?  @pressed?
+                                                 :theme     theme
+                                                 :disabled? disabled?})
+                                    container-style)}
+       [quo2.icons/icon icon
+        {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]])))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/buttons/wallet_ctas/component_spec.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.buttons.wallet-ctas.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.buttons.wallet-ctas.view :as wallet-ctas]))
+
+(h/describe "Wallet CTAs test"
+  (h/test "Buttons render"
+    (h/render [wallet-ctas/view])
+    (h/is-truthy (h/get-by-label-text :buy))
+    (h/is-truthy (h/get-by-label-text :send))
+    (h/is-truthy (h/get-by-label-text :receive))
+    (h/is-truthy (h/get-by-label-text :bridge))))

src/quo2/components/buttons/wallet_ctas/style.cljs

@@ -0,0 +1,16 @@
+(ns quo2.components.buttons.wallet-ctas.style)
+
+(def container
+  {:padding-top        24
+   :padding-bottom     12
+   :padding-horizontal 20
+   :flex-direction     :row
+   :justify-content    :center
+   :flex               1
+   :max-height         106})
+
+(def button-container
+  {:padding-vertical 8
+   :width            77.75
+   :justify-content  :center
+   :align-items      :center})