fix events and add qr-component for user profile

status-im · Mar 31, 2023 · bd5a5b1 · bd5a5b1
1 parent b84cb59
commit bd5a5b1
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 72 deletions.
diff --git a/src/quo2/components/qr_code/qr.cljs b/src/quo2/components/qr_code/qr.cljs
@@ -0,0 +1,32 @@
+(ns quo2.components.qr-code.qr
+  (:require [react-native.core :as rn]))
+
+(defn user-profile-qr-code
+  [{:keys [key-uid public-key port qr-size]}]
+  (let [profile-qr-url         (str "https://join.status.im/u/" public-key)
+        base-64-qr-url         (js/btoa profile-qr-url)
+        profile-image-type     "large"
+        error-correction-level 4
+        superimpose-profile?   true
+        media-server-url       (str "https://localhost:"
+                                    port
+                                    "/GenerateQRCode?level="
+                                    error-correction-level
+                                    "&url="
+                                    base-64-qr-url
+                                    "&keyUid="
+                                    key-uid
+                                    "&allowProfileImage="
+                                    superimpose-profile?
+                                    "&size="
+                                    qr-size
+                                    "&imageName="
+                                    profile-image-type)]
+    [rn/view
+     {:style {:flex-direction  :row
+              :justify-content :center}}
+     [rn/image
+      {:source {:uri media-server-url}
+       :style  {:width         qr-size
+                :height        qr-size
+                :border-radius 12}}]]))
diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs
@@ -56,6 +56,7 @@
     status-im.wallet.custom-tokens.core
     status-im2.contexts.activity-center.events
     status-im2.contexts.activity-center.notification.contact-requests.events
+    status-im2.contexts.share.events
     status-im2.contexts.shell.events
     status-im2.contexts.onboarding.events
     status-im.chat.models.gaps

diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs
@@ -97,15 +97,7 @@
      [quo/button
       (merge button-common-props
              {:accessibility-label :show-qr-button
-              :on-press            #(rf/dispatch ;;TODO(siddarthkay) :once events ns is fixed get rid of
-                                                 ;;this
-                                     [:show-popover
-                                      {:view                       :profile-share
-                                       :style                      {:margin 0}
-                                       :disable-touchable-overlay? true
-                                       :blur-view?                 true
-                                       :blur-view-props            {:blur-amount 20
-                                                                    :blur-type   :dark}}])})
+              :on-press            #(rf/dispatch [:share/open])})
       :i/qr-code]
      [rn/view
       [unread-indicator]

diff --git a/src/status_im2/contexts/share/events.cljs b/src/status_im2/contexts/share/events.cljs
@@ -1,13 +1,11 @@
 (ns status-im2.contexts.share.events
   (:require [utils.re-frame :as rf]
             [status-im2.common.toasts.events :as toasts]
-            [utils.i18n :as i18n]
             [quo2.foundations.colors :as colors]))
 
-;;TODO(siddarthkay) :figure out why this ns is never found
 (rf/defn open-profile-share-view
   {:events [:share/open]}
-  []
+  [{:keys [db]}]
   {:dispatch [:show-popover
               {:view                       :profile-share
                :style                      {:margin 0}
@@ -16,11 +14,11 @@
                :blur-view-props            {:blur-amount 20
                                             :blur-type   :dark}}]})
 
-;;TODO(siddarthkay) :figure out why this ns is never found
-(rf/defn show-emoji-hash-copied-toast
-  {:events [:share/show-emoji-hash-copied-toast]}
-  [cofx]
+(rf/defn show-successfully-copied-toast
+  {:events [:share/show-successfully-copied-toast]}
+  [cofx toast-label]
   (toasts/upsert cofx
-                 {:icon       :alert
-                  :icon-color colors/danger-50
-                  :text       (i18n/label :t/pin-limit-reached)}))
+                 {:icon           :correct
+                  :icon-color     colors/success-50
+                  :override-theme :dark
+                  :text           toast-label}))
diff --git a/src/status_im2/contexts/share/style.cljs b/src/status_im2/contexts/share/style.cljs
@@ -94,12 +94,6 @@
    :align-items     :center
    :padding-left    12})
 
-(defn qr-image
-  [qr-size]
-  {:width         qr-size
-   :height        qr-size
-   :border-radius 12})
-
 (defn set-custom-width
   [section-width]
   {:width section-width})

diff --git a/src/status_im2/contexts/share/view.cljs b/src/status_im2/contexts/share/view.cljs
@@ -7,7 +7,7 @@
             [utils.re-frame :as rf]
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
-            [status-im2.common.toasts.events :as toasts]
+            [quo2.components.qr-code.qr :as qr]
             ;;TODO(siddarthkay) : move these components over to status-im2 ns first
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.react :as react]
@@ -16,24 +16,12 @@
 (def ^:const profile-tab-id 0)
 (def ^:const wallet-tab-id 1)
 
-;;TODO(siddarthkay) :move to some event namespace
-(rf/defn show-successfully-copied-toast
-  {:events [:share/show-successfully-copied-toast]}
-  [cofx toast-label]
-  (toasts/upsert cofx
-                 {:icon           :correct
-                  :icon-color     colors/success-50
-                  :override-theme :dark
-                  :text           toast-label}))
-
-;;TODO(siddarthkay) :move to some util namespace
 (defn copy-text-and-show-toast
   [text toast-label]
   (react/copy-to-clipboard text)
   (js/setTimeout
    #(rf/dispatch [:share/show-successfully-copied-toast toast-label])
-   250)
-)
+   250))
 
 (defn header
   []
@@ -55,41 +43,21 @@
 
 (defn profile-tab
   [window-width]
-  ;;TODO(siddarthkay) : every let binding below should be moved to the QR code component
-  (let [multiaccount           (rf/sub [:multiaccount])
-        emoji-hash             (string/join "" (get multiaccount :emoji-hash))
-        key-uid                (get multiaccount :key-uid)
-        qr-size                (- window-width 64)
-        current-pk             (get multiaccount :public-key)
-        port                   (rf/sub [:mediaserver/port])
-        profile-qr-url         (str "https://join.status.im/u/" current-pk)
-        base-64-qr-url         (js/btoa profile-qr-url)
-        profile-image-type     "large"
-        error-correction-level 4
-        superimpose-profile?   true
-        media-server-url       (str "https://localhost:"
-                                    port
-                                    "/GenerateQRCode?level="
-                                    error-correction-level
-                                    "&url="
-                                    base-64-qr-url
-                                    "&keyUid="
-                                    key-uid
-                                    "&allowProfileImage="
-                                    superimpose-profile?
-                                    "&size="
-                                    qr-size
-                                    "&imageName="
-                                    profile-image-type)]
+  (let [multiaccount   (rf/sub [:multiaccount])
+        emoji-hash     (string/join "" (get multiaccount :emoji-hash))
+        qr-size        (- window-width 64)
+        current-pk     (get multiaccount :public-key)
+        profile-qr-url (str "https://join.status.im/u/" current-pk)
+        port           (rf/sub [:mediaserver/port])
+        key-uid        (get multiaccount :key-uid)]
     [:<>
      [rn/view {:style (style/qr-code-container window-width)}
-      [rn/view
-       {:style {:flex-direction  :row
-                :justify-content :center}}
-       ;;TODO(siddarthkay) :move to seperate QR code component
-       [rn/image
-        {:source {:uri media-server-url}
-         :style  (style/qr-image qr-size)}]]
+      [qr/user-profile-qr-code
+       {:window-width window-width
+        :key-uid      key-uid
+        :qr-size      (- window-width 64)
+        :public-key   current-pk
+        :port         port}]
       [rn/view {:style (style/profile-address-container qr-size)}
        [rn/view {:style style/profile-address-column}
         [quo/text