(chore) : Improve QR code quo2 component (#15755)

This PR adds the ability to :

- Generate a QR by passing any url.
- See different error correction levels.
- Shows the media server url for that specific QR code.
- Moved media server URI generation logic to `image_server.cljs`

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

@@ -2,22 +2,57 @@
   (:require [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [quo2.core :as quo]
-            [status-im2.common.resources :as resources]))
+            [utils.image-server :as image-server]
+            [utils.re-frame :as rf]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "URL For QR"
+    :key   :text
+    :type  :text}
+   {:label   "Error Correction Level:"
+    :key     :error-correction-level
+    :type    :select
+    :options [{:key   :low
+               :value "Low"}
+              {:key   :medium
+               :value "Medium"}
+              {:key   :quart
+               :value "Quart"}
+              {:key   :highest
+               :value "Highest"}]}])
 
 (defn cool-preview
   []
-  (fn []
+  (let [state                  (reagent/atom {:text                   "https://status.im"
-    [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+                                              :error-correction-level :highest})
-     [rn/view {:style {:padding-bottom 150}}
+        text                   (reagent/cursor state [:text])
-      [rn/view {:style {:flex 1}}]
+        error-correction-level (reagent/cursor state [:error-correction-level])
-      [rn/view
+        media-server-uri       (reagent/atom "")]
-       {:style {:padding-vertical 60
+    (fn []
-                :flex-direction   :row
+      (reset! media-server-uri (image-server/get-qr-image-uri-for-any-url
-                :justify-content  :center}}
+                                {:url         @text
-       [quo/qr-code
+                                 :port        (rf/sub [:mediaserver/port])
-        {:source (resources/get-mock-image :qr-code)
+                                 :error-level @error-correction-level
-         :height 250
+                                 :qr-size     250}))
-         :width  250}]]]]))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [preview/customizer state descriptor]
+        [rn/view {:style {:flex 1}}]
+        [rn/view
+         {:style {:padding-vertical 60
+                  :flex-direction   :row
+                  :justify-content  :center}}
+         [rn/view
+          [quo/qr-code
+           {:source {:uri @media-server-uri}
+            :height 250
+            :width  250}]
+
+          [rn/view
+           [rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
+            @media-server-uri]]]]]])))
 
 (defn preview-qr-code
   []

src/utils/image_server.cljs

@@ -5,6 +5,8 @@
 (def ^:const identicons-action "/messages/identicons")
 (def ^:const account-images-action "/accountImages")
 (def ^:const contact-images-action "/contactImages")
+(def ^:const generate-qr-action "/GenerateQRCode")
+(def ^:const status-profile-base-url "https://join.status.im/u/")
 
 (defn timestamp [] (datetime/timestamp))
 
@@ -14,6 +16,15 @@
     :light 1
     :dark  2))
 
+(defn correction-level->index
+  [level]
+  (case (keyword level)
+    :low     1
+    :medium  2
+    :quart   3
+    :highest 4
+    4))
+
 (defn get-identicons-uri
   [port public-key theme]
   (str image-server-uri-prefix
@@ -58,3 +69,45 @@
        "&clock="
        clock
        "&addRing=1"))
+
+(defn get-account-qr-image-uri
+  [{:keys [key-uid public-key port qr-size]}]
+  (let [profile-qr-url         (str status-profile-base-url public-key)
+        base-64-qr-url         (js/btoa profile-qr-url)
+        profile-image-type     "large"
+        error-correction-level (correction-level->index :highest)
+        superimpose-profile?   true
+        media-server-url       (str image-server-uri-prefix
+                                    port
+                                    generate-qr-action
+                                    "?level="
+                                    error-correction-level
+                                    "&url="
+                                    base-64-qr-url
+                                    "&keyUid="
+                                    key-uid
+                                    "&allowProfileImage="
+                                    superimpose-profile?
+                                    "&size="
+                                    qr-size
+                                    "&imageName="
+                                    profile-image-type)]
+    media-server-url))
+
+(defn get-qr-image-uri-for-any-url
+  [{:keys [url port qr-size error-level]}]
+  (let [qr-url-base64          (js/btoa url)
+        error-correction-level (correction-level->index error-level)
+        superimpose-profile?   false
+        media-server-url       (str image-server-uri-prefix
+                                    port
+                                    generate-qr-action
+                                    "?level="
+                                    error-correction-level
+                                    "&url="
+                                    qr-url-base64
+                                    "&allowProfileImage="
+                                    superimpose-profile?
+                                    "&size="
+                                    qr-size)]
+    media-server-url))