[8069] feature - [Profile] My profile edit and share screens

Signed-off-by: Andrey Shovkoplyas <[email protected]>

deps.edn

@@ -11,6 +11,7 @@
          status-im/timbre            {:mvn/version "4.10.0-2-status"}
          com.taoensso/encore         {:mvn/version "2.94.0"}
          hickory                     {:mvn/version "0.7.1"}
+         cljs-bean                   {:mvn/version "1.3.0"}
          com.cognitect/transit-cljs  {:mvn/version "0.8.248"}
          status-im/pluto             {:mvn/version "iteration-4-9"}
          mvxcvi/alphabase            {:mvn/version "1.0.0"}

project.clj

@@ -18,6 +18,7 @@
                  [status-im/timbre "4.10.0-2-status"]
                  [com.taoensso/encore "2.94.0"]
                  [hickory "0.7.1"]
+                 [cljs-bean "1.3.0"]
                  [com.cognitect/transit-cljs "0.8.248"]
                  [status-im/pluto "iteration-4-9"]
                  [mvxcvi/alphabase "1.0.0"]

src/status_im/ens/core.cljs

@@ -11,7 +11,8 @@
             [status-im.ui.screens.navigation :as navigation]
             [status-im.utils.fx :as fx]
             [status-im.utils.money :as money]
-            [status-im.signing.core :as signing])
+            [status-im.signing.core :as signing]
+            [status-im.ethereum.eip55 :as eip55])
   (:refer-clojure :exclude [name]))
 
 (defn fullname [custom-domain? username]
@@ -47,7 +48,7 @@
 
 (defn- on-resolve [registry custom-domain? username address public-key s]
   (cond
-    (= (ethereum/normalized-address address) (ethereum/normalized-address s))
+    (= (eip55/address->checksum address) (eip55/address->checksum s))
     (resolver/pubkey registry (fullname custom-domain? username)
                      #(re-frame/dispatch [:ens/set-state username (if (= % public-key) :connected :owned)]))
 

src/status_im/ethereum/eip55.cljs

@@ -9,11 +9,17 @@
 
 (defn utils [] (dependencies/web3-utils))
 
+(def hex-prefix "0x")
+
 (defn address->checksum
   "Converts an arbitrary case address to one with correct checksum case."
   [address]
   (when address
-    (.toChecksumAddress (utils) address)))
+    (.toChecksumAddress
+     (utils)
+     (if (string/starts-with? address hex-prefix)
+       address
+       (str hex-prefix address)))))
 
 (defn valid-address-checksum?
   "Checks address checksum validity."

src/status_im/popover/core.cljs

@@ -11,4 +11,4 @@
 (fx/defn hide-popover
   {:events [:hide-popover]}
   [{:keys [db]}]
-  {:db (dissoc db :popover/popover)})
+  {:db (dissoc db :popover/popover)})

src/status_im/ui/components/chat_icon/screen.cljs

@@ -169,5 +169,11 @@
 (defn my-profile-icon [{{:keys [photo-path name]} :multiaccount
                         edit?                     :edit?}]
   (let [color colors/default-chat-color
-        size  56]
+        size  64]
+    [profile-icon-view photo-path name color edit? size {}]))
+
+(defn my-profile-header-icon [{{:keys [photo-path name]} :multiaccount
+                               edit?                     :edit?}]
+  (let [color colors/default-chat-color
+        size  40]
     [profile-icon-view photo-path name color edit? size {}]))

src/status_im/ui/components/copyable_text.cljs

@@ -0,0 +1,90 @@
+(ns status-im.ui.components.copyable-text
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [reagent.core :as reagent]
+            [status-im.ui.components.react :as react]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.animation :as animation]
+            [status-im.ui.components.typography :as typography]))
+
+(defn hide-cue-atom [anim-opacity anim-y cue-atom]
+  (animation/start
+   (animation/parallel
+    [(animation/timing anim-opacity
+                       {:toValue         0
+                        :duration        140
+                        :delay           1000
+                        :easing          (.-ease (animation/easing))
+                        :useNativeDriver true})
+     (animation/timing anim-y
+                       {:toValue         0
+                        :duration        140
+                        :delay           1000
+                        :easing          (.-ease (animation/easing))
+                        :useNativeDriver true})])
+   #(reset! cue-atom false)))
+
+(defn show-cue-atom [anim-opacity anim-y cue-atom y]
+  (when @cue-atom
+    (animation/start
+     (animation/parallel
+      [(animation/timing anim-opacity
+                         {:toValue         1
+                          :duration        140
+                          :easing          (.-ease (animation/easing))
+                          :useNativeDriver true})
+       (animation/timing anim-y
+                         {:toValue         y
+                          :duration        140
+                          :easing          (.-ease (animation/easing))
+                          :useNativeDriver true})])
+     #(hide-cue-atom anim-opacity anim-y cue-atom))))
+
+(defn copy-action-visual-cue [anim-opacity anim-y width cue-atom]
+  [react/animated-view {:style {:opacity          anim-opacity
+                                :transform        [{:translateY anim-y}]
+                                :height           34
+                                :max-width        @width
+                                :position         :absolute
+                                :border-radius    8
+                                :align-self       :center
+                                :z-index          (if @cue-atom 1 -1)
+                                :align-items      :center
+                                :justify-content  :center
+                                :shadow-offset    {:width 0 :height 4}
+                                :shadow-radius    12
+                                :shadow-opacity   1
+                                :shadow-color     "rgba(0, 34, 51, 0.08)"
+                                :background-color colors/white}}
+   [react/view {:padding-horizontal 16
+                :padding-vertical   7
+                :border-radius      8
+                :background-color   colors/white
+                :shadow-offset      {:width 0 :height 2}
+                :shadow-radius      4
+                :shadow-opacity     1
+                :shadow-color       "rgba(0, 34, 51, 0.16)"}
+    [react/text {:style {:typography :main-medium :line-height 20 :font-size 14}}
+     (i18n/label :sharing-copied-to-clipboard)]]])
+
+(defview copyable-text-view [{:keys [label copied-text]} content]
+  (letsubs [cue-atom     (reagent/atom false)
+            width        (reagent/atom nil)
+            anim-y       (animation/create-value 0)
+            anim-opacity (animation/create-value 0)]
+    [react/view
+     [copy-action-visual-cue anim-opacity anim-y width cue-atom]
+     [react/touchable-opacity
+      {:active-opacity (if @cue-atom 1 0.7)
+       :style          {:margin-top 12 :margin-bottom 4}
+       :on-press       #(when (not @cue-atom)
+                          (reset! cue-atom true)
+                          (show-cue-atom anim-opacity anim-y cue-atom -22)
+                          (react/copy-to-clipboard copied-text))}
+      [react/view
+       [react/text {:style {:font-size 13 :line-height 18 :font-weight "500"
+                            :color colors/gray :margin-bottom 4}}
+        (i18n/label label)]
+       [react/view
+        {:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))}
+        content]]]]))

src/status_im/ui/components/large_toolbar.cljs

@@ -0,0 +1,144 @@
+(ns status-im.ui.components.large-toolbar
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [reagent.core :as reagent]
+            [cljs-bean.core :refer [->clj ->js]]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.list.views :as list.views]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.toolbar.styles :as toolbar.styles]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.animation :as animation]))
+
+(def hidden (reagent/atom 0))
+(def shown (reagent/atom 100))
+(def minimized-header-visible? (reagent/atom false))
+(def initial-on-show-done? (volatile! false))
+
+(defview animated-content-wrapper [header-in-toolbar has-nav? show?]
+  (letsubs [anim-opacity (animation/create-value 0)
+            to-hide      (reagent/atom false)]
+    {:component-will-update
+     (fn [_ [_ _ _ show?]]
+       (cond
+         (and (not @to-hide) show?)
+         (animation/start
+          (animation/timing
+           anim-opacity
+           {:toValue 1
+            :duration 200
+            :easing (.-ease (animation/easing))
+            :useNativeDriver true})
+          #(reset! to-hide true))
+
+         (and @to-hide (not show?))
+         (animation/start
+          (animation/timing
+           anim-opacity
+           {:toValue 0
+            :duration 200
+            :easing (.-ease (animation/easing))
+            :useNativeDriver true})
+          #(reset! to-hide false))))}
+    [react/animated-view
+     {:style (cond-> {:flex           1
+                      :align-self     :stretch
+                      :opacity        anim-opacity}
+               (false? has-nav?)
+               (assoc :margin-left -40 :margin-right 40))}
+     header-in-toolbar]))
+
+(defn on-viewable-items-changed [threshold interporlation-step]
+  (fn [info]
+    (let [changed   (->> (->clj info)
+                         :changed
+                         (filter #(= 1 (:index %))))
+          viewable? (when (seq changed)
+                      (->> changed
+                           first
+                           :isViewable))]
+      (when (and @initial-on-show-done? (not (nil? viewable?)))
+        (if (= threshold 0)
+          (if viewable?
+            (reset! minimized-header-visible? false)
+            (reset! minimized-header-visible? true))
+          (if viewable?
+            (do (swap! hidden - interporlation-step) (swap! shown + interporlation-step))
+            (do (swap! hidden + interporlation-step) (swap! shown - interporlation-step))))))))
+
+(defonce viewability-config-callback-pairs
+  (let [interporlation-step 20]
+    (->js
+     (vec
+      (for [threshold (range 0 (+ 100 interporlation-step) interporlation-step)]
+        {:viewabilityConfig      {:itemVisiblePercentThreshold threshold}
+         :onViewableItemsChanged (on-viewable-items-changed threshold interporlation-step)})))))
+
+;; header-in-toolbar - component - small header in toolbar
+;; nav-item          - component/nil - if nav-item like back button is needed, else nil
+;; action-items      - status-im.ui.components.toolbar.view/actions 
+(defn minimized-toolbar [header-in-toolbar nav-item action-items]
+  (let [has-nav? (boolean nav-item)]
+    [toolbar/toolbar
+     {:transparent? true
+      :style        {:z-index   100
+                     :elevation 9}}
+     nav-item
+     [animated-content-wrapper header-in-toolbar has-nav? @minimized-header-visible?]
+     action-items]))
+
+;; header   - component that serves as large header without any top/bottom padding
+;;            top(4px high) and bottom(16px high and with border) padding
+;;            are assumed to be constant
+;;            this is wrapped with padding components and merged with content
+;; content  - vector - of the rest(from header) of the list components
+;;            wrapped header and content form the data prop of flat-list
+;; list-ref - atom - a reference to flat-list for the purpose of invoking its
+;;            methods
+(defview flat-list-with-large-header [header content list-ref]
+  (letsubs [window-width [:dimensions/window-width]]
+    {:component-did-mount #(do (reset! hidden 0) (reset! shown 100)
+                               (reset! minimized-header-visible? false)
+                               (vreset! initial-on-show-done? false))}
+    (let [header-top-padding [react/view {:height 4}]
+          ;; header bottom padding with border-bottom
+          ;; fades out as it approaches toolbar shadow
+          header-bottom      [react/animated-view
+                              {:style {:height              16
+                                       :opacity             (/ @shown 100)
+                                       :border-bottom-width 1
+                                       :border-bottom-color colors/gray-lighter}}]
+          wrapped-data       (into [header-top-padding header header-bottom] content)
+          status-bar-height  (get platform/platform-specific :status-bar-default-height)
+          toolbar-shadow-component-height
+          (+ 50 toolbar.styles/toolbar-height (if (zero? status-bar-height) 50 status-bar-height))]
+      [react/view {:flex 1}
+       ;; toolbar shadow
+       [react/animated-view
+        {:style
+         (cond-> {:flex             1
+                  :align-self       :stretch
+                  :position         :absolute
+                  :height           toolbar-shadow-component-height
+                  :width            window-width
+                  :top              (- toolbar-shadow-component-height)
+                  :shadow-radius    8
+                  :shadow-offset    {:width 0 :height 2}
+                  :shadow-opacity   1
+                  :shadow-color     "rgba(0, 9, 26, 0.12)"
+                  :elevation        (if (>= @hidden 40) (- (/ @hidden 10) 2) 0)
+                  :background-color colors/white}
+           platform/ios?
+           (assoc :opacity (if (>= @hidden 40) (/ @hidden 100) 0)))}]
+
+       [list.views/flat-list
+        {:style                          {:z-index -1}
+         :data                           wrapped-data
+         :initial-num-to-render          3
+         :ref                            #(reset! list-ref %)
+         :render-fn                      (fn [item idx] item)
+         :key-fn                         (fn [item idx] (str idx))
+         :on-scroll-begin-drag           #(when (false? @initial-on-show-done?)
+                                            (vreset! initial-on-show-done? true))
+         :viewabilityConfigCallbackPairs viewability-config-callback-pairs
+         :keyboard-should-persist-taps   :handled}]])))

src/status_im/ui/components/status_bar/view.cljs

@@ -55,7 +55,6 @@
     :show-extension-modal            {:type :main}
     :wallet                          {:type :main}
     :wallet-stack                    {:type :main}
-    :profile-qr-viewer               {:type :modal-white}
     :recipient-qr-code               {:type :transparent}
     :wallet-send-assets              {:type :wallet}
     :wallet-request-assets           {:type :wallet}

src/status_im/ui/screens/chat/photos.cljs

@@ -11,6 +11,7 @@
   [react/view {:style (style/photo-container size)}
    [react/image {:source              (utils.image/source photo-path)
                  :style               (style/photo size)
+                 :resize-mode         :cover
                  :accessibility-label (or accessibility-label :chat-icon)}]
    [react/view {:style (style/photo-border size)}]])
 

src/status_im/ui/screens/chat/styles/photos.cljs

@@ -13,7 +13,6 @@
   {:position      :absolute
    :width         size
    :height        size
-   :opacity       0.4
    :border-color  colors/black-transparent
    :border-width  1
    :border-radius (radius size)})

src/status_im/ui/screens/intro/views.cljs

@@ -114,8 +114,9 @@
         {:on-press #(re-frame/dispatch [:intro-wizard/on-key-selected (:id acc)])}
         [react/view {:style (styles/list-item selected?)}
 
-         [react/image {:source {:uri (identicon/identicon public-key)}
-                       :style styles/multiaccount-image}]
+         [react/image {:source      {:uri (identicon/identicon public-key)}
+                       :resize-mode :cover
+                       :style       styles/multiaccount-image}]
          [react/view {:style {:margin-horizontal 16 :flex 1 :justify-content :space-between}}
           [react/text {:style (assoc styles/wizard-text :text-align :left
                                      :color colors/black