feat: add enter scan code view

src/status_im2/contexts/syncing/enter_sync_code/style.cljs

@@ -0,0 +1,73 @@
+(ns status-im2.contexts.syncing.enter-sync-code.style
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.typography :as typography]
+            [react-native.platform :as platform]))
+
+(def container-text-input
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal 20})
+
+(defn text-input-container
+  [invalid?]
+  {:padding-top      1
+   :padding-left     12
+   :padding-right    7
+   :padding-bottom   7
+   :flex             1
+   :flex-direction   :row
+   :background-color colors/neutral-95
+   :border-width     1
+   :border-radius    12
+   :border-color     (if invalid?
+                       colors/danger-50-opa-40
+                       colors/neutral-80)})
+
+(defn text-input
+  []
+  (merge typography/monospace
+         typography/paragraph-1
+         {:flex       1
+          :margin-top (if platform/android?
+                        4
+                        0)
+          :padding    0
+          :color      colors/white}))
+
+(def label-texts-container
+  {:flex-direction :row
+   :height         18
+   :margin-bottom  8})
+
+(def button-paste
+  {:margin-top 6})
+
+(def clear-icon
+  {:size  20
+   :color colors/neutral-80-opa-30})
+
+(def right-icon-touchable-area
+  {:margin-left   8
+   :padding-right 4
+   :padding-top   6
+   :margin-bottom 4})
+
+(def button-confirm
+  {:margin-left  20
+   :margin-right 20
+   :margin-top   12})
+
+(def label-pairing
+  {:color       "rgba(255, 255, 255, 0.40)"
+   :font-size   13
+   :font-weight "500"})
+
+(def label-container
+  {:flex-direction :row
+   :margin-left    20
+   :margin-top     20
+   :margin-bottom  8})
+
+(def continue-button-container
+  {:margin-top         12
+   :padding-horizontal 22})

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

@@ -0,0 +1,83 @@
+(ns status-im2.contexts.syncing.enter-sync-code.view
+  (:require [clojure.string :as string]
+            [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [react-native.core :as rn]
+            [react-native.clipboard :as clipboard]
+            [utils.i18n :as i18n]
+            [status-im2.contexts.syncing.enter-sync-code.style :as style]
+            [quo2.components.icon :as icon]
+            [utils.debounce :as debounce]
+            [utils.re-frame :as rf]
+            [status-im2.contexts.syncing.utils :as sync-utils]))
+
+(defn view
+  []
+  (let [default-value           (reagent/atom nil)
+        clipboard               (reagent/atom nil)
+        submit-button-disabled? (reagent/atom true)
+        profile-color           (rf/sub [:profile/customization-color])]
+    (fn []
+      (clipboard/get-string #(reset! clipboard %))
+      (let [invalid?           false
+            show-paste-button? (string/blank? @default-value)]
+        [:<>
+         [rn/view
+          {:style style/label-container}
+          [rn/text {:style style/label-pairing}
+           (i18n/label :t/type-pairing-code)]]
+         [rn/view {:style style/container-text-input}
+          [rn/view {:style (style/text-input-container invalid?)}
+           [rn/text-input
+            {:style                  (style/text-input)
+             :default-value          @default-value
+             :placeholder            (i18n/label :t/type-some-chat-key)
+             :on-change-text         (fn [scan-code]
+                                       (reset! default-value scan-code)
+                                       (reset! submit-button-disabled? false))
+             :blur-on-submit         true
+             :return-key-type        :done
+             :accessibility-label    :enter-contact-code-input
+             :auto-capitalize        :none
+             :placeholder-text-color (colors/theme-colors
+                                      colors/neutral-40
+                                      colors/neutral-50)
+             :multiline              true}]
+           (if show-paste-button?
+             [rn/view {:style style/button-paste}
+              [quo/button
+               {:on-press (fn []
+                            (reset! default-value @clipboard)
+                            (reset! submit-button-disabled? false))
+                :type     :outline
+                :size     24}
+               (i18n/label :t/paste)]]
+
+             [rn/touchable-opacity
+              {:accessibility-label :input-right-icon
+               :style               style/right-icon-touchable-area
+               :on-press            (fn [_]
+                                      (reset! default-value nil)
+                                      (reset! submit-button-disabled? true))}
+              [icon/icon :i/clear style/clear-icon]])]]
+         [rn/view {:style style/continue-button-container}
+          [quo/button
+           {:type                :primary
+            :disabled            @submit-button-disabled?
+            :theme               :dark
+            :customization-color profile-color
+            :style               style/button-confirm
+            :on-press            (fn [_]
+                                   (if (sync-utils/valid-connection-string? @default-value)
+                                     (debounce/debounce-and-dispatch
+                                      [:syncing/input-connection-string-for-bootstrapping
+                                       @default-value]
+                                      300)
+                                     (rf/dispatch [:toasts/upsert
+                                                   {:icon :i/info
+                                                    :icon-color colors/danger-50
+                                                    :theme :dark
+                                                    :text (i18n/label
+                                                           :t/error-this-is-not-a-sync-qr-code)}])))}
+           (i18n/label :t/confirm)]]]))))

src/status_im2/contexts/syncing/scan_sync_code/style.cljs

@@ -135,6 +135,8 @@
 
 (def enter-sync-code-container
   {:margin-top      20
+   :padding-left    20
+   :padding-right   20
    :justify-content :center
    :align-items     :center})
 
@@ -165,3 +167,5 @@
    :right         0
    :bottom        0
    :border-radius 16})
+
+

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

@@ -19,7 +19,8 @@
             [utils.debounce :as debounce]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
-            [utils.transforms :as transforms]))
+            [utils.transforms :as transforms]
+            [status-im2.contexts.syncing.enter-sync-code.view :as enter-sync-code]))
 
 ;; Android allow local network access by default. So, we need this check on iOS only.
 (defonce preflight-check-passed? (reagent/atom (if platform/ios? false true)))
@@ -200,15 +201,6 @@
     [viewfinder qr-view-finder]
     [camera-and-local-network-access-permission-view]))
 
-(defn- enter-sync-code-tab
-  []
-  [rn/view {:style style/enter-sync-code-container}
-   [quo/text
-    {:size   :paragraph-1
-     :weight :medium
-     :style  {:color colors/white}}
-    "Yet to be implemented"]])
-
 (defn- f-bottom-view
   [insets translate-y]
   [rn/touchable-without-feedback
@@ -386,8 +378,8 @@
                      :transform [{:translate-y content-translate-y}]}
                     {})}
            (case @active-tab
-             1 [scan-qr-code-tab @qr-view-finder]
-             2 [enter-sync-code-tab]
+             1 [scan-qr-code-tab qr-view-finder]
+             2 [enter-sync-code/view]
              nil)]
           [rn/view {:style style/flex-spacer}]
           (when show-bottom-view? [bottom-view insets bottom-view-translate-y])

translations/en.json

@@ -2264,5 +2264,6 @@
     "community-unmuted": "Community unmuted",
     "retake": "Retake",
     "use-photo": "Use Photo",
-    "photo-caps": "PHOTO"
+    "photo-caps": "PHOTO",
+    "type-pairing-code": "Type or paste pairing code"
 }