[#16329] QR code variants (#17221)

* Rename wallet-user-avatar's `:color` prop to `:customization-color`
* Refactor QR code component and implement all variants
  - Improve preview screen
* Update QR code usages
* Remove `status-im2.common.qr-code-viewer.view/qr-code-view` component
to keep only one implementation.
* Remove the node dependency:
  "qrcode": "^1.4.1"

package.json

@@ -35,7 +35,6 @@
     "functional-red-black-tree": "^1.0.1",
     "i18n-js": "^3.3.0",
     "node-libs-react-native": "^1.2.1",
-    "qrcode": "^1.4.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.10",

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

@@ -35,7 +35,7 @@
    :indicator-size   status indicator outer radius, set to nil or 0 when no indicator
    :indicator-border `indicator-size`-`indicator-border` is the inner radius
    :indicator-color  color for status indicator
-   :theme   :light or :dark
+   :theme            :light or :dark
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -28,11 +28,11 @@
 (defn wallet-user-avatar
   "params, first name, last name, color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name color size]
+  [{:keys [f-name l-name customization-color size]
-    :or   {f-name "John"
+    :or   {f-name              "John"
-           l-name "Doe"
+           l-name              "Doe"
-           color  :red
+           customization-color :red
-           size   :x-large}}]
+           size                :x-large}}]
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
@@ -41,8 +41,8 @@
         l-name-initial (-> l-name
                            string/upper-case
                            (subs 0 1))
-        circle-color   (colors/custom-color color 50 20)
+        circle-color   (colors/custom-color customization-color 50 20)
-        text-color     (colors/custom-color-by-theme color 50 60)]
+        text-color     (colors/custom-color-by-theme customization-color 50 60)]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size

src/quo2/components/share/qr_code/style.cljs

@@ -1,14 +1,44 @@
 (ns quo2.components.share.qr-code.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def container
+(defn container
-  {:flex-direction  :row
+  [size]
-   :justify-content :center})
+  (if size
+    {:width  size
+     :height size}
+    {:flex 1}))
 
-(defn image
+(def avatar-overlay
-  [width height]
+  {:position        :absolute
-  {:width            width
+   :top             0
-   :height           height
+   :right           0
+   :left            0
+   :bottom          0
+   :justify-content :center
+   :align-items     :center})
+
+(defn qr-image
+  [size]
+  {:width            (or size "100%")
+   :height           (or size "100%")
    :background-color colors/white-opa-70
    :border-radius    12
    :aspect-ratio     1})
+
+(def ^:private avatar-container-common
+  {:width            68
+   :height           68
+   :justify-content  :center
+   :align-items      :center
+   :background-color colors/white})
+
+(def avatar-container-circular
+  (assoc avatar-container-common :border-radius 33))
+
+(def avatar-container-rounded
+  (assoc avatar-container-common :border-radius 16))
+
+(def community-logo-image
+  {:width         64
+   :height        64
+   :border-radius 32})

src/quo2/components/share/qr_code/view.cljs

@@ -1,12 +1,76 @@
 (ns quo2.components.share.qr-code.view
-  (:require [quo2.components.share.qr-code.style :as style]
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.channel-avatar.view :as channel-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.avatars.wallet-user-avatar :as wallet-avatar]
+            [quo2.components.share.qr-code.style :as style]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]))
 
-(defn qr-code
+(defn- avatar-image
-  [{:keys [source width height]}]
+  [{avatar-type :avatar
-  [rn/view
+    :as         props}]
-   {:style style/container}
+  [rn/view {:style style/avatar-overlay}
+   [rn/view
+    {:style (if (= avatar-type :wallet-account)
+              style/avatar-container-rounded
+              style/avatar-container-circular)}
+    (case avatar-type
+      :profile
+      [user-avatar/user-avatar
+       (assoc props
+              :size              :size-64
+              :status-indicator? false
+              :online?           false
+              :ring?             false)]
+
+      :wallet-account
+      [account-avatar/view (assoc props :size :size-64 :type :default)]
+
+      :community
+      [rn/image
+       {:style  style/community-logo-image
+        :source (:picture props)}]
+
+      :channel
+      [channel-avatar/view (assoc props :locked? nil :size :size-64)]
+
+      :saved-address
+      [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)]
+
+      nil)]])
+
+(defn view
+  "Receives a URL to show a QR code with an avatar (optional) over it.
+   Parameters:
+     - qr-image-uri: A valid uri representing the QR code to display using `fast-image`
+     - size: if not provided, the QR code image will grow according to its parent
+     - avatar: Type of the avatar, defaults to `:none` and it can be:
+         `:profile`, `:wallet-account`, `:community`, `:channel` or `:saved-address`
+
+   Depending on the type selected, different properties are accepted:
+   `:profile`:
+     - profile-picture
+     - full-name
+     - customization-color
+   `:wallet-account`
+     - emoji
+     - customization-color
+   `:community`
+     - picture
+   `:channel`
+      - emoji
+      - customization-color
+   `:saved-address`
+      - f-name
+      - l-name
+      - customization-color"
+  [{:keys [avatar size qr-image-uri]
+    :or   {avatar :none}
+    :as   props}]
+  [rn/view {:style (style/container size)}
    [fast-image/fast-image
-    {:source source
+    {:style  (style/qr-image size)
-     :style  (style/image width height)}]])
+     :source {:uri qr-image-uri}}]
+   (when-not (= avatar :none)
+     [avatar-image props])])

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

@@ -8,15 +8,11 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [source link-title
+  [{:keys [qr-image-uri link-title url-on-press url-on-long-press qr-url share-on-press]}]
-           url-on-press url-on-long-press qr-url share-on-press]}]
   [blur/ios-view
    {:style     style/qr-code-container
     :blur-type :light}
-   [qr-code/qr-code
+   [qr-code/view {:qr-image-uri qr-image-uri}]
-    {:source source
-     :width  "100%"
-     :height 311}]
    [rn/view {:style style/profile-address-container}
     [rn/view {:style style/profile-address-column}
      [text/text

src/quo2/core.cljs

@@ -335,7 +335,7 @@
 (def settings-item quo2.components.settings.settings-item.view/view)
 
 ;;;; Share
-(def qr-code quo2.components.share.qr-code.view/qr-code)
+(def qr-code quo2.components.share.qr-code.view/view)
 (def share-qr-code quo2.components.share.share-qr-code.view/view)
 
 ;;;; SWITCHER

src/status_im/ui/screens/profile/user/views.cljs

@@ -19,7 +19,7 @@
             [status-im.utils.gfycat.core :as gfy]
             [status-im.utils.universal-links.utils :as universal-links]
             [status-im.utils.utils :as utils]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [status-im2.common.qr-codes.view :as qr-codes]
             [status-im2.config :as config]
             [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :as views]))
@@ -32,7 +32,9 @@
       [react/view {:on-layout #(reset! width (-> ^js % .-nativeEvent .-layout .-width))}
        [react/view {:style {:padding-top 16 :padding-horizontal 16}}
         (when @width
-          [qr-code-viewer/qr-code-view (- @width 32) address])
+          [qr-codes/qr-code
+           {:url  address
+            :size (- @width 32)}])
         (when ens-name
           [react/view
            [copyable-text/copyable-text-view

src/status_im/ui/screens/wallet/request/views.cljs

@@ -4,10 +4,10 @@
             [reagent.core :as reagent]
             [utils.ethereum.eip.eip55 :as eip55]
             [status-im.ethereum.eip681 :as eip681]
-            [utils.i18n :as i18n]
             [status-im.ui.components.copyable-text :as copyable-text]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [status-im.ui.components.react :as react]
-            [status-im.ui.components.react :as react])
+            [status-im2.common.qr-codes.view :as qr-codes]
+            [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview share-address
@@ -18,9 +18,9 @@
     [react/view {:on-layout #(reset! width (-> ^js % .-nativeEvent .-layout .-width))}
      [react/view {:style {:padding-top 16 :padding-horizontal 16}}
       (when @width
-        [qr-code-viewer/qr-code-view
+        [qr-codes/qr-code
-         (- @width 32)
+         {:url  (eip681/generate-uri address {:chain-id chain-id})
-         (eip681/generate-uri address {:chain-id chain-id})])
+          :size (- @width 32)}])
       [copyable-text/copyable-text-view
        {:label           :t/ethereum-address
         :container-style {:margin-top 12 :margin-bottom 4}

src/status_im2/common/qr_code_viewer/style.cljs

@@ -1,15 +0,0 @@
-(ns status-im2.common.qr-code-viewer.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def qr-code-padding 16)
-
-(defn qr-code-container
-  [width]
-  {:align-self         :center
-   :width              width
-   :height             width
-   :padding-horizontal 16
-   :background-color   colors/white
-   :align-items        :center
-   :justify-content    :center
-   :border-radius      8})

src/status_im2/common/qr_code_viewer/view.cljs

@@ -1,31 +0,0 @@
-(ns status-im2.common.qr-code-viewer.view
-  (:require ["qrcode" :as qr-code-js]
-            [cljs-bean.core :as bean]
-            [reagent.core :as reagent]
-            [status-im2.common.qr-code-viewer.style :as style]
-            [react-native.core :as rn]
-            [react-native.svg :as svg]))
-
-(defn qr-code
-  [{:keys [size value]}]
-  (let [uri (reagent/atom nil)]
-    (.toString
-     qr-code-js
-     value
-     (bean/->js {:margin 0 :width size})
-     #(reset! uri %2))
-    (fn []
-      (when @uri
-        [svg/svgxml {:xml @uri :width size :height size}]))))
-
-(defn qr-code-view
-  "Qr Code view including the frame.
-  Note: `size` includes frame with `style/qr-code-padding.`"
-  [size value]
-  (when (and size value)
-    [rn/view
-     {:style               (style/qr-code-container size)
-      :accessibility-label :qr-code-image}
-     [qr-code
-      {:value value
-       :size  (- size (* style/qr-code-padding 2))}]]))

src/status_im2/common/qr_codes/view.cljs

@@ -0,0 +1,37 @@
+(ns status-im2.common.qr-codes.view
+  (:require [quo2.core :as quo]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]))
+
+(defn qr-code
+  "Receives a URL to show a QR code with an avatar (optional) over it.
+   Parameters:
+     - url: String to transform to QR
+     - size: if not provided, the QR code image will grow according to its parent
+     - avatar: Type of the avatar, defaults to `:none` and it can be:
+         `:profile`, `:wallet-account`, `:community`, `:channel` or `:saved-address`
+
+   Depending on the type selected, different properties are accepted:
+   `:profile`:
+     - profile-picture
+     - full-name
+     - customization-color
+   `:wallet-account`
+     - emoji
+     - customization-color
+   `:community`
+     - picture
+   `:channel`
+      - emoji
+      - customization-color
+   `:saved-address`
+      - f-name
+      - l-name
+      - customization-color"
+  [{:keys [url size] :as props}]
+  (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
+                             {:url         url
+                              :port        (rf/sub [:mediaserver/port])
+                              :qr-size     (or 400 (int size))
+                              :error-level :highest})]
+    [quo/qr-code (assoc props :qr-image-uri qr-media-server-uri)]))

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -18,14 +18,14 @@
               {:key :size-64}
               {:key   :x-large
                :value "X Large"}]}
-   (preview/customization-color-option {:key :color})])
+   (preview/customization-color-option {:key :customization-color})])
 
 (defn view
   []
-  (let [state (reagent/atom {:first-name "empty"
+  (let [state (reagent/atom {:first-name          "empty"
-                             :last-name  "name"
+                             :last-name           "name"
-                             :size       :x-large
+                             :size                :x-large
-                             :color      :indigo})]
+                             :customization-color :indigo})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
        [quo/wallet-user-avatar @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -392,7 +392,7 @@
                        {:name      :section-label
                         :component section-label/preview}]
    :share             [{:name      :qr-code
-                        :component qr-code/preview-qr-code}
+                        :component qr-code/preview}
                        {:name      :share-qr-code
                         :component share-qr-code/preview-share-qr-code}]
    :switchers         [{:name      :group-messaging-card

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

@@ -1,55 +1,104 @@
 (ns status-im2.contexts.quo-preview.share.qr-code
-  (:require [react-native.core :as rn]
+  (:require [quo2.core :as quo]
-            [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
-            [utils.image-server :as image-server]
+            [react-native.core :as rn]
-            [utils.re-frame :as rf]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]))
 
 (def descriptor
-  [{:label "URL For QR"
+  [{:key  :url
-    :key   :text
+    :type :text}
-    :type  :text}
+   {:key     :avatar
-   {:label   "Error Correction Level:"
-    :key     :error-correction-level
     :type    :select
-    :options [{:key   :low
+    :options [{:key :none}
-               :value "Low"}
+              {:key :profile}
-              {:key   :medium
+              {:key :wallet-account}
-               :value "Medium"}
+              {:key :community}
-              {:key   :quart
+              {:key :channel}
-               :value "Quart"}
+              {:key :saved-address}]}
-              {:key   :highest
+   {:key     :size
-               :value "Highest"}]}])
+    :type    :select
+    :options [{:key 250} {:key 311} {:key 350}]}])
 
-(defn preview-qr-code
+(def profile-descriptor
+  [{:key     :profile-picture
+    :type    :select
+    :options [{:key   (resources/get-mock-image :user-picture-male5)
+               :value "User"}
+              {:key   nil
+               :value "None"}]}
+   (preview/customization-color-option)
+   {:key  :full-name
+    :type :text}])
+
+(def wallet-account-descriptor
+  [{:key     :emoji
+    :type    :select
+    :options [{:key "🍒"}
+              {:key "🐧"}
+              {:key "🍨"}]}
+   (preview/customization-color-option)])
+
+(def channel-descriptor
+  [{:key     :emoji
+    :type    :select
+    :options [{:key "🍒"}
+              {:key "🐧"}
+              {:key "🍨"}]}
+   (preview/customization-color-option)])
+
+(def saved-address-descriptor
+  [{:key  :f-name
+    :type :text}
+   {:key  :l-name
+    :type :text}
+   (preview/customization-color-option)])
+
+(defn preview
   []
-  (let [state                  (reagent/atom {:text                   "https://status.im"
+  (let [media-server-port (rf/sub [:mediaserver/port])
-                                              :error-correction-level :highest})
+        state             (reagent/atom
-        text                   (reagent/cursor state [:text])
+                           {:url                 "https://join.status.im/status"
-        error-correction-level (reagent/cursor state [:error-correction-level])
+                            :size                250
-        media-server-uri       (reagent/atom "")]
+                            :avatar              :none
+                            :profile-picture     (resources/get-mock-image :user-picture-male5)
+                            :customization-color :army
+                            :full-name           "Full Name"
+                            :emoji               "🍒"
+                            :picture             (resources/get-mock-image :community-logo)
+                            :f-name              "First Name"
+                            :l-name              "Last Name"})]
     (fn []
-      (reset! media-server-uri (image-server/get-qr-image-uri-for-any-url
+      (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
-                                {:url         @text
+                                 {:url         (:url @state)
-                                 :port        (rf/sub [:mediaserver/port])
+                                  :qr-size     (:size @state)
-                                 :error-level @error-correction-level
+                                  :port        media-server-port
-                                 :qr-size     250}))
+                                  :error-level :highest})]
-      [preview/preview-container
+        [preview/preview-container
-       {:state      state
+         {:component-container-style {:flex            1
-        :descriptor descriptor}
+                                      :justify-content :center
-       [rn/view {:style {:padding-bottom 150}}
+                                      :align-items     :center
-        [rn/view {:style {:flex 1}}]
+                                      :margin-vertical 12}
-        [rn/view
+          :state                     state
-         {:style {:padding-vertical 60
+          :descriptor                (concat descriptor
-                  :flex-direction   :row
+                                             (case (:avatar @state)
-                  :justify-content  :center}}
+                                               :profile        profile-descriptor
-         [rn/view
+                                               :wallet-account wallet-account-descriptor
-          [quo/qr-code
+                                               :channel        channel-descriptor
-           {:source {:uri @media-server-uri}
+                                               :saved-address  saved-address-descriptor
-            :height 250
+                                               nil))}
-            :width  250}]
+         [quo/qr-code
+          (cond-> @state
+            :always
+            (assoc :qr-image-uri qr-media-server-uri)
 
-          [rn/view
+            ;; `:channel` variant receives colors as hex strings instead of keywords
-           [rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
+            (= (:avatar @state) :channel)
-            @media-server-uri]]]]]])))
+            (update :customization-color colors/custom-color 60))]
+
+         [rn/view {:style {:margin 12}}
+          [quo/text "URL:"]
+          [quo/text (:url @state)]]]))))

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

@@ -1,10 +1,10 @@
 (ns status-im2.contexts.quo-preview.share.share-qr-code
-  (:require [react-native.core :as rn]
+  (:require [quo2.core :as quo]
-            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]
+            [utils.image-server :as image-server]
-            [reagent.core :as reagent]))
+            [utils.re-frame :as rf]))
-
 
 (def descriptor
   [{:label "URL"
@@ -20,23 +20,28 @@
                              :link-title   "Link to profile"
                              :url          "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})]
     (fn []
-      [preview/preview-container
+      (let [qr-media-server-uri (image-server/get-qr-image-uri-for-any-url
-       {:state      state
+                                 {:url         (:url @state)
-        :descriptor descriptor}
+                                  :port        (rf/sub [:mediaserver/port])
-       [rn/view {:style {:padding-bottom 150}}
+                                  :qr-size     300
-        [rn/view {:style {:flex 1}}]
+                                  :error-level :highest})]
-        [rn/view
+        [preview/preview-container
-         {:style {:padding-vertical 60
+         {:state      state
-                  :justify-content  :center}}
+          :descriptor descriptor}
-         [preview/blur-view
+         [rn/view {:style {:padding-bottom 150}}
-          {:show-blur-background? true
+          [rn/view {:style {:flex 1}}]
-           :height                600
+          [rn/view
-           :blur-view-props       {:padding-top        20
+           {:style {:padding-vertical 60
-                                   :padding-horizontal 20}}
+                    :justify-content  :center}}
-          [quo/share-qr-code
+           [preview/blur-view
-           {:source            (resources/get-mock-image :qr-code)
+            {:show-blur-background? true
-            :link-title        (:link-title @state)
+             :height                600
-            :url-on-press      #(js/alert "url pressed")
+             :blur-view-props       {:padding-top        20
-            :url-on-long-press #(js/alert "url long pressed")
+                                     :padding-horizontal 20}}
-            :share-on-press    #(js/alert "share pressed")
+            [quo/share-qr-code
-            :qr-url            (:url @state)}]]]]])))
+             {:qr-image-uri      qr-media-server-uri
+              :link-title        (:link-title @state)
+              :url-on-press      #(js/alert "url pressed")
+              :url-on-long-press #(js/alert "url long pressed")
+              :share-on-press    #(js/alert "share pressed")
+              :qr-url            (:url @state)}]]]]]))))

src/status_im2/contexts/shell/share/view.cljs

@@ -1,17 +1,19 @@
 (ns status-im2.contexts.shell.share.view
-  (:require [utils.i18n :as i18n]
+  (:require [clojure.string :as string]
             [quo2.core :as quo]
-            [react-native.core :as rn]
-            [status-im2.contexts.shell.share.style :as style]
-            [utils.re-frame :as rf]
-            [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
-            [status-im.ui.components.list-selection :as list-selection]
+            [react-native.core :as rn]
-            [utils.image-server :as image-server]
             [react-native.navigation :as navigation]
-            [clojure.string :as string]
+            [reagent.core :as reagent]
+            [status-im.multiaccounts.core :as multiaccounts]
+            [status-im.ui.components.list-selection :as list-selection]
+            [status-im2.common.qr-codes.view :as qr-codes]
+            [status-im2.contexts.shell.share.style :as style]
             [utils.address :as address]
+            [utils.i18n :as i18n]
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]
             [react-native.platform :as platform]))
 
 (defn header
@@ -43,27 +45,24 @@
 
 (defn profile-tab
   [window-width]
-  (let [{:keys [emoji-hash
+  (let [{:keys [emoji-hash compressed-key customization-color display-name]
-                compressed-key
+         :as   profile}   (rf/sub [:profile/profile])
-                key-uid]} (rf/sub [:profile/profile])
-        port              (rf/sub [:mediaserver/port])
-        emoji-hash-string (string/join emoji-hash)
         qr-size           (int (- window-width 64))
+        profile-url       (str image-server/status-profile-base-url compressed-key)
+        profile-photo-uri (:uri (multiaccounts/displayed-photo profile))
         abbreviated-url   (address/get-abbreviated-profile-url
                            image-server/status-profile-base-url-without-https
                            compressed-key)
-        profile-url       (str image-server/status-profile-base-url compressed-key)
+        emoji-hash-string (string/join emoji-hash)]
-        source-uri        (image-server/get-account-qr-image-uri
-                           {:key-uid    key-uid
-                            :public-key compressed-key
-                            :port       port
-                            :qr-size    qr-size})]
     [:<>
      [rn/view {:style style/qr-code-container}
-      [quo/qr-code
+      [qr-codes/qr-code
-       {:source {:uri source-uri}
+       {:url                 profile-url
-        :width  qr-size
+        :size                qr-size
-        :height qr-size}]
+        :avatar              :profile
+        :full-name           display-name
+        :customization-color customization-color
+        :profile-picture     profile-photo-uri}]
       [rn/view {:style style/profile-address-container}
        [rn/view {:style style/profile-address-column}
         [quo/text

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -3,11 +3,11 @@
             [quo2.foundations.colors :as colors]
             [react-native.clipboard :as clipboard]
             [react-native.core :as rn]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [react-native.hooks :as hooks]
             [reagent.core :as reagent]
+            [status-im2.common.qr-codes.view :as qr-codes]
             [status-im2.common.resources :as resources]
             [status-im2.common.standard-authentication.standard-auth.view :as standard-auth]
-            [react-native.hooks :as hooks]
             [status-im2.contexts.syncing.setup-syncing.style :as style]
             [status-im2.contexts.syncing.utils :as sync-utils]
             [utils.datetime :as datetime]
@@ -76,12 +76,14 @@
            (i18n/label :t/setup-syncing)]]
          [rn/view {:style style/qr-container}
           (if (sync-utils/valid-connection-string? @code)
-            [rn/view {:style {:margin-horizontal 12}}
+            [qr-codes/qr-code {:url @code}]
-             [qr-code-viewer/qr-code-view 311 @code]]
+            [rn/view {:style {:flex-direction :row}}
-            [quo/qr-code
+             [rn/image
-             {:source (resources/get-image :qr-code)
+              {:source (resources/get-image :qr-code)
-              :height 220
+               :style  {:width            "100%"
-              :width  "100%"}])
+                        :background-color colors/white-opa-70
+                        :border-radius    12
+                        :aspect-ratio     1}}]])
           (when (sync-utils/valid-connection-string? @code)
             [rn/view
              {:style style/valid-cs-container}

yarn.lock

@@ -3580,25 +3580,7 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-alloc-unsafe@^1.1.0:
+buffer-from@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
-  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
-
-buffer-alloc@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
-  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
-  dependencies:
-    buffer-alloc-unsafe "^1.1.0"
-    buffer-fill "^1.0.0"
-
-buffer-fill@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
-  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
-
-buffer-from@^1.0.0, buffer-from@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
@@ -3617,14 +3599,6 @@ buffer@^4.3.0, buffer@^4.9.1:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.4.3:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -4527,11 +4501,6 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-dijkstrajs@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
-  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
-
 dom-serializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
@@ -5984,11 +5953,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -8485,7 +8449,7 @@ plist@^3.0.2:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
-pngjs@^3.3.0, pngjs@^3.4.0:
+pngjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
@@ -8701,19 +8665,6 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-qrcode@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
-  integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
-  dependencies:
-    buffer "^5.4.3"
-    buffer-alloc "^1.2.0"
-    buffer-from "^1.1.1"
-    dijkstrajs "^1.0.1"
-    isarray "^2.0.1"
-    pngjs "^3.3.0"
-    yargs "^13.2.4"
-
 query-string@^6.13.5:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -11075,7 +11026,7 @@ yargs-parser@^21.1.1:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs@^13.2.2, yargs@^13.2.4:
+yargs@^13.2.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==