(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`
This commit is contained in:
Siddarth Kumar 2023-04-27 19:25:49 +05:30 committed by GitHub
parent 8e49a06dbe
commit 2eed30be8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 13 deletions

View File

@ -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 []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}]
[rn/view
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[quo/qr-code
{:source (resources/get-mock-image :qr-code)
:height 250
:width 250}]]]]))
(let [state (reagent/atom {:text "https://status.im"
:error-correction-level :highest})
text (reagent/cursor state [:text])
error-correction-level (reagent/cursor state [:error-correction-level])
media-server-uri (reagent/atom "")]
(fn []
(reset! media-server-uri (image-server/get-qr-image-uri-for-any-url
{:url @text
:port (rf/sub [:mediaserver/port])
:error-level @error-correction-level
:qr-size 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
[]

View File

@ -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))