Change share-qr-code component to reflect design changes

doc/debugging.md

@@ -7,13 +7,13 @@
 
 To start `re-frisk`, execute the following command:
 ```bash
-$ yarn shadow-cljs run re-frisk-remote.core/start
+yarn shadow-cljs run re-frisk-remote.core/start
 ```
 
 or you can also use make:
 
 ```bash
-$ make run-re-frisk
+make run-re-frisk
 ```
 
 A server will be started at http://localhost:4567. It might show "not connected" at first. Don't worry and just start using the app. The events and state will populate.

src/quo/components/share/share_qr_code/component_spec.cljs

@@ -73,10 +73,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press
@@ -101,10 +97,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press

src/quo/components/share/share_qr_code/style.cljs

@@ -18,19 +18,26 @@
 
 ;;; Header
 (def header-container
+  {:margin-bottom 12})
+
+(def header-title-container
+  {:margin-bottom   20
+   :flex-direction  :row
+   :justify-content :space-between
+   :overflow        :hidden})
+
+(def header-and-avatar-container
   {:flex-direction :row
-   :margin-bottom  12})
+   :align-items    :center
+   :word-wrap      :no-wrap})
+
+(def flex-direction-row
+  {:flex-direction :row})
 
 (def header-tab-active {:background-color colors/white-opa-20})
 (def header-tab-inactive {:background-color colors/white-opa-5})
 (def space-between-tabs {:width 8})
 
-(def info-icon
-  {:margin-left :auto
-   :align-self  :center})
-
-(def info-icon-color colors/white-opa-40)
-
 ;;; QR code
 (defn qr-code-size
   [total-width]
@@ -44,6 +51,12 @@
 
 (def title {:color colors/white-opa-40})
 
+(defn header-title
+  [component-width]
+  {:color       colors/white
+   :margin-left 8
+   :max-width   (* component-width 0.7)})
+
 (def share-button-size 32)
 (def ^:private share-button-gap 16)
 
@@ -60,49 +73,12 @@
 (def wallet-data-and-share-container
   {:margin-top      2
    :flex-direction  :row
+   :align-items     :center
    :justify-content :space-between})
 
 (def wallet-legacy-container {:flex 1})
 
-(def wallet-multichain-container {:flex 1 :margin-top 4})
-
-(def wallet-multichain-networks
-  {:flex-direction  :row
-   :justify-content :space-between
-   :margin-bottom   8})
-
-(def wallet-multichain-data-container {:margin-top 4})
-
-;;; Dashed line
-(def divider-container
-  {:height            8
-   :margin-horizontal 4
-   :justify-content   :center
-   :overflow          :hidden})
-
-(def ^:private padding-for-divider (+ padding-horizontal 4))
-(def ^:private dashed-line-width 2)
-(def ^:private dashed-line-space 4)
-
-(def dashed-line
-  {:flex-direction :row
-   :margin-left    -1})
-
-(def line
-  {:background-color colors/white-opa-20
-   :width            dashed-line-width
-   :height           1})
-
-(def line-space
-  {:width  dashed-line-space
-   :height 1})
-
-(defn number-lines-and-spaces-to-fill
-  [component-width]
-  (let [line-and-space-width (+ dashed-line-width dashed-line-space)
-        width-to-fill        (- component-width (* 2 padding-for-divider))
-        number-of-lines      (* (/ width-to-fill line-and-space-width) 2)]
-    (inc (int number-of-lines))))
+(def wallet-multichain-container {:flex 1})
 
 (def ^:private get-network-full-name
   {"eth"  :ethereum

src/quo/components/share/share_qr_code/view.cljs

@@ -2,14 +2,12 @@
   (:require [clojure.set]
             [clojure.string :as string]
             [oops.core :as oops]
+            [quo.components.avatars.account-avatar.view :as account-avatar]
             [quo.components.buttons.button.view :as button]
-            [quo.components.icon :as icon]
-            [quo.components.list-items.preview-list.view :as preview-list]
             [quo.components.markdown.text :as text]
             [quo.components.share.qr-code.view :as qr-code]
             [quo.components.share.share-qr-code.style :as style]
             [quo.components.tabs.tab.view :as tab]
-            [quo.foundations.resources :as quo.resources]
             [quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
@@ -17,52 +15,60 @@
             [reagent.core :as reagent]
             [utils.i18n :as i18n]))
 
-(defn- line [] [rn/view {:style style/line}])
-(defn- space [] [rn/view {:style style/line-space}])
-
-(defn- dashed-line
-  [width]
-  (into [rn/view {:style style/dashed-line}]
-        (take (style/number-lines-and-spaces-to-fill width))
-        (cycle [[line] [space]])))
+(defn- share-button
+  [{:keys [alignment on-press]}]
+  [rn/view {:style (style/share-button-container alignment)}
+   [button/button
+    {:icon-only?          true
+     :type                :grey
+     :background          :blur
+     :size                style/share-button-size
+     :accessibility-label :link-to-profile
+     :on-press            on-press}
+    :i/share]])
 
 (defn- header
-  [{:keys [share-qr-type on-info-press on-legacy-press on-multichain-press]}]
+  [{:keys [share-qr-type on-share-press on-legacy-press on-multichain-press
+           component-width full-name]
+    :as   props}]
   [rn/view {:style style/header-container}
-   [tab/view
-    {:accessibility-label         :share-qr-code-legacy-tab
-     :id                          :wallet-legacy-tab
-     :active-item-container-style style/header-tab-active
-     :item-container-style        style/header-tab-inactive
-     :size                        24
-     :active                      (= :wallet-legacy share-qr-type)
-     :on-press                    on-legacy-press}
-    (i18n/label :t/legacy)]
-   [rn/view {:style style/space-between-tabs}]
-   [tab/view
-    {:accessibility-label         :share-qr-code-multichain-tab
-     :id                          :wallet-multichain-tab
-     :active-item-container-style style/header-tab-active
-     :item-container-style        style/header-tab-inactive
-     :size                        24
-     :active                      (= :wallet-multichain share-qr-type)
-     :on-press                    on-multichain-press}
-    (i18n/label :t/multichain)]
-   [rn/pressable
-    {:accessibility-label :share-qr-code-info-icon
-     :style               style/info-icon
-     :on-press            on-info-press
-     :hit-slop            6}
-    [icon/icon :i/info
-     {:size  20
-      :color style/info-icon-color}]]])
-
-(defn- info-label
-  [share-qr-code-type]
-  [text/text {:size :paragraph-2 :weight :medium :style style/title}
-   (if (= share-qr-code-type :profile)
-     (i18n/label :t/link-to-profile)
-     (i18n/label :t/wallet-address))])
+   [rn/view
+    {:style style/header-title-container}
+    [rn/view
+     {:style style/header-and-avatar-container}
+     [account-avatar/view
+      (assoc props
+             :size 32
+             :type :default)]
+     [text/text
+      {:size            :heading-2
+       :weight          :semi-bold
+       :style           (style/header-title component-width)
+       :number-of-lines 1}
+      full-name]]
+    [share-button
+     {:alignment :top
+      :on-press  on-share-press}]]
+   [rn/view {:style style/flex-direction-row}
+    [tab/view
+     {:accessibility-label         :share-qr-code-legacy-tab
+      :id                          :wallet-legacy-tab
+      :active-item-container-style style/header-tab-active
+      :item-container-style        style/header-tab-inactive
+      :size                        24
+      :active                      (= :wallet-legacy share-qr-type)
+      :on-press                    on-legacy-press}
+     (i18n/label :t/legacy)]
+    [rn/view {:style style/space-between-tabs}]
+    [tab/view
+     {:accessibility-label         :share-qr-code-multichain-tab
+      :id                          :wallet-multichain-tab
+      :active-item-container-style style/header-tab-active
+      :item-container-style        style/header-tab-inactive
+      :size                        24
+      :active                      (= :wallet-multichain share-qr-type)
+      :on-press                    on-multichain-press}
+     (i18n/label :t/multichain)]]])
 
 (defn- info-text
   [{:keys [width on-press on-long-press ellipsize?]} qr-data-text]
@@ -78,18 +84,6 @@
                         :ellipsize-mode  :middle))
     qr-data-text]])
 
-(defn- share-button
-  [{:keys [alignment on-press]}]
-  [rn/view {:style (style/share-button-container alignment)}
-   [button/button
-    {:icon-only?          true
-     :type                :grey
-     :background          :blur
-     :size                style/share-button-size
-     :accessibility-label :link-to-profile
-     :on-press            on-press}
-    :i/share]])
-
 (defn- network-colored-text
   [network-short-name]
   [text/text {:style (style/network-short-name-text network-short-name)}
@@ -106,10 +100,10 @@
       (conj $ address))))
 
 (defn- profile-bottom
-  [{:keys [component-width qr-data on-text-press on-text-long-press on-share-press share-qr-type]}]
+  [{:keys [component-width qr-data on-text-press on-text-long-press on-share-press]}]
   [:<>
    [rn/view
-    [info-label share-qr-type]
+    [text/text {:size :paragraph-2 :weight :medium :style style/title} (i18n/label :t/link-to-profile)]
     [info-text
      {:width         component-width
       :ellipsize?    true
@@ -121,32 +115,26 @@
      :on-press  on-share-press}]])
 
 (defn- wallet-legacy-bottom
-  [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press on-share-press]}]
+  [{:keys [component-width qr-data on-text-press on-text-long-press]}]
   [rn/view {:style style/wallet-legacy-container}
-   [info-label share-qr-type]
    [rn/view {:style style/wallet-data-and-share-container}
     [info-text
      {:width         component-width
       :on-press      on-text-press
       :on-long-press on-text-long-press}
      qr-data]
-    [share-button
-     {:alignment :top
-      :on-press  on-share-press}]]])
-
-(def ^:private known-networks #{:ethereum :optimism :arbitrum})
-
-(defn- get-network-image-source
-  [network]
-  {:source (quo.resources/get-network (get known-networks network :unknown))})
+   ]])
 
 (defn wallet-multichain-bottom
-  [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press
-           on-share-press networks on-settings-press]}]
+  [{:keys [component-width qr-data on-text-press on-text-long-press
+           on-settings-press]}]
   [rn/view {:style style/wallet-multichain-container}
-   [rn/view {:style style/wallet-multichain-networks}
-    [preview-list/view {:type :network :size :size-32}
-     (map get-network-image-source networks)]
+   [rn/view {:style style/wallet-data-and-share-container}
+    [info-text
+     {:width         component-width
+      :on-press      on-text-press
+      :on-long-press on-text-long-press}
+     [wallet-multichain-colored-address qr-data]]
     [button/button
      {:icon-only?          true
       :type                :grey
@@ -154,20 +142,7 @@
       :size                32
       :accessibility-label :share-qr-code-settings
       :on-press            on-settings-press}
-     :i/advanced]]
-   [rn/view {:style style/divider-container}
-    [dashed-line component-width]]
-   [rn/view {:style style/wallet-multichain-data-container}
-    [info-label share-qr-type]
-    [rn/view {:style style/wallet-data-and-share-container}
-     [info-text
-      {:width         component-width
-       :on-press      on-text-press
-       :on-long-press on-text-long-press}
-      [wallet-multichain-colored-address qr-data]]
-     [share-button
-      {:alignment :top
-       :on-press  on-share-press}]]]])
+     :i/advanced]]])
 
 (defn- share-qr-code
   [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
@@ -211,14 +186,12 @@
      - profile-picture: map ({:source image-source}) or any image source.
    `:wallet-legacy`
      - emoji:               Emoji in a string to show in the QR code.
-     - on-info-press:       Callback for the info icon.
      - on-legacy-press:     Callback for the legacy tab.
      - on-multichain-press: Callback for the multichain tab.
    `:wallet-multichain`
      - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
      - on-settings-press:   Callback for the settings button.
      - emoji:               Emoji in a string to show in the QR code.
-     - on-info-press:       Callback for the info icon.
      - on-legacy-press:     Callback for the legacy tab.
      - on-multichain-press: Callback for the multichain tab.
 

src/status_im2/contexts/quo_preview/share/share_qr_code.cljs

@@ -92,7 +92,6 @@
                              :full-name           "My User"
                              :customization-color :purple
                              :emoji               "🐈"
-                             :on-info-press       #(js/alert "Info pressed")
                              :on-legacy-press     #(js/alert (str "Tab " % " pressed"))
                              :on-multichain-press #(js/alert (str "Tab " % " pressed"))
                              :networks            (take 2 possible-networks)