Test commit erase

src/quo2/components/inputs/locked_input/component_spec.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.inputs.locked-input.component-spec
+  (:require [quo2.components.inputs.locked-input.view :as locked-input]
+            [test-helpers.component :as h]))
+
+(h/describe "Locked Input"
+  (h/test "renders label, value and icon"
+    (h/render [locked-input/locked-input
+               {:label-text "Label"
+                :icon       :i/gas} "Value"])
+    (h/is-truthy (h/query-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Value")))
+
+  (h/test "no value"
+    (h/render [locked-input/locked-input
+               {:label-text "Label"
+                :icon       :i/gas}])
+    (h/is-null (h/query-by-text "Value"))
+    (h/is-truthy (h/get-by-text "Label")))
+
+  (h/test "no emoji"
+    (h/render [locked-input/locked-input
+               {:label-text "Label"} "Value"])
+    (h/is-truthy (h/get-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Value"))))

src/quo2/components/inputs/locked_input/style.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.inputs.locked-input.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn info-box-container
+  [theme]
+  {:flex-direction     :row
+   :border-radius      12
+   :align-items        :center
+   :background-color   (colors/theme-colors colors/neutral-10
+                                            colors/neutral-80-opa-80
+                                            theme)
+   :height             40
+   :padding-horizontal 12
+   :padding-vertical   9
+   :margin-top         4})
+
+(defn info-box-label
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 8})

src/quo2/components/inputs/locked_input/view.cljs

@@ -0,0 +1,44 @@
+(ns quo2.components.inputs.locked-input.view
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]
+            [quo2.components.inputs.locked-input.style :as style]
+            [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]))
+
+(defn- info-box
+  [{:keys [icon value-text theme]}]
+  [rn/view
+   {:style (style/info-box-container theme)}
+   [rn/view
+    (when icon
+      [icons/icon icon
+       {:color (colors/theme-colors colors/neutral-50
+                                    colors/neutral-40
+                                    theme)}])]
+   [text/text
+    {:size  :paragraph-1
+     :style (style/info-box-label theme)} value-text]])
+
+(defn- locked-input-internal
+  [{:keys [label-text icon style theme]} value]
+  [rn/view {:style style}
+   [text/text
+    {:size   :paragraph-2
+     :weight :medium
+     :style  {:color colors/neutral-40}} label-text]
+   [info-box
+    {:theme      theme
+     :icon       icon
+     :value-text value}]])
+
+(def locked-input
+  "Options:
+
+  :label-text - string (default nil) - Text to display above the input
+  :icon - keyword (default nil) - Icon to display in the info box
+  :style - style map (default nil) - Override style for the container
+  :theme - :light/:dark
+
+  :value - string (default nil) - value to display in the info box"
+  (quo.theme/with-theme locked-input-internal))

src/quo2/core.cljs

@@ -49,6 +49,7 @@
     quo2.components.inputs.recovery-phrase.view
     quo2.components.inputs.search-input.view
     quo2.components.inputs.title-input.view
+    quo2.components.inputs.locked-input.view
     quo2.components.keycard.view
     quo2.components.links.link-preview.view
     quo2.components.links.url-preview-list.view
@@ -200,6 +201,7 @@
 (def recovery-phrase-input quo2.components.inputs.recovery-phrase.view/recovery-phrase-input)
 (def search-input quo2.components.inputs.search-input.view/search-input)
 (def title-input quo2.components.inputs.title-input.view/title-input)
+(def locked-input quo2.components.inputs.locked-input.view/locked-input)
 
 ;;;; NUMBERED KEYBOARD
 (def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/keyboard-key)

src/quo2/core_spec.cljs

@@ -24,6 +24,7 @@
     [quo2.components.graph.wallet-graph.component-spec]
     [quo2.components.inputs.input.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
+    [quo2.components.inputs.locked-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
     [quo2.components.keycard.component-spec]

src/quo2/foundations/colors.cljs

@@ -212,7 +212,7 @@
                60 "#1A4E52"}
    :pink      {50 "#F66F8F"
                60 "#C55972"}
-   :purple    {50 "#7140FD"
+   :purple    {50 "#8661C1"
                60 "#5A33CA"}
    :magenta   {50 "#EC266C"
                60 "#BD1E56"}})

src/status_im2/contexts/quo_preview/main.cljs

@@ -99,6 +99,12 @@
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
     [status-im2.contexts.quo-preview.title.title :as title]
+    [status-im2.contexts.quo-preview.transaction-sheet.transaction-sheet :as
+     transaction-sheet]
+    [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
+    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
+    [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
+    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
     [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
@@ -400,6 +406,10 @@
    :text-combinations [{:name      :title
                         :options   {:topBar {:visible true}}
                         :component title/preview-title}]
+   :transaction-sheet [{:name      :transaction-sheet
+                        :options   {:topBar {:visible true}}
+                        :component transaction-sheet/preview-transaction-sheet
+                       }]
    :wallet            [{:name      :account-card
                         :options   {:topBar {:visible true}}
                         :component account-card/preview-account-card}

src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs

@@ -0,0 +1,84 @@
+(ns status-im2.contexts.quo-preview.transaction-sheet.transaction-sheet
+  (:require [quo2.components.tabs.account-selector :as acc-sel]
+            [utils.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im2.contexts.quo-preview.tabs.segmented-tab]
+            [quo2.components.tabs.segmented-tab :as quo2]
+            [status-im2.contexts.shell.jump-to.utils :as utils]
+            [quo2.components.inputs.locked-input.view :as locked-input]
+            [quo2.components.markdown.text :as text]))
+
+(let [{:keys [width]} (utils/dimensions)]
+  (def screen-width width))
+(def account-selector-width (* 0.895 screen-width))
+(def shared-selector-list-data
+  {:show-label?  false
+   :transparent? false
+   :style        {:width  account-selector-width
+                  :height 40}})
+(def unique-selector-list-data
+  [{:account-text  "Drakaris account"
+    :account-emoji "🔥"}
+   {:account-text  "Daenerys account"
+    :account-emoji "👸"}])
+(def selector-list-data
+  (map #(merge % shared-selector-list-data)
+       unique-selector-list-data))
+
+(defn- render-account-selectors
+  [item]
+  [rn/view {:style {:margin-right 10}}
+   [rn/touchable-opacity {:on-press #(js/alert (str "Pressed " (item :account-text)))}
+    [acc-sel/account-selector item]]])
+(defn preview-transaction-sheet
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-90)
+    :flex             1
+    :flex-direction   :column
+    :padding-top      20
+    :padding-left     20}
+   [text/text
+    {:size   :heading-2
+     :weight :semi-bold
+     :style  {:color (colors/theme-colors
+                      colors/black
+                      colors/white)
+             }} "Sign transaction with Rarible"]
+   [quo2/segmented-control
+    {:size            28
+     :blur?           false
+     :default-active  1
+     :container-style {:margin-top   19
+                       :margin-right 20}
+     :data            [{:id    1
+                        :label (i18n/label :t/simple)}
+                       {:id    2
+                        :label (i18n/label :t/advanced)}]}]
+   [rn/view {:style {:margin-top 19}}
+    [text/text
+     {:size   :paragraph-2
+      :weight :medium
+      :style  {:color colors/neutral-40}}
+     (i18n/label
+      :t/select-account)]
+    [rn/flat-list
+     {:data                              selector-list-data
+      :render-fn                         render-account-selectors
+      :horizontal                        true
+      :shows-horizontal-scroll-indicator false
+      :style                             {:margin-top 4}}]
+    [rn/view
+     {:style {:margin-top     11
+              :flex-direction :row}}
+     [locked-input/locked-input
+      {:icon       :i/gas
+       :label-text (i18n/label :t/network-fee)
+       :style      {:margin-right 15
+                    :width        160}} "$1,648.34"]
+     [locked-input/locked-input
+      {:icon       :i/duration
+       :label-text (i18n/label :t/duration-estimate)
+       :style      {:margin-right 18
+                    :width        160}} "~3 min"]]]])

translations/en.json

@@ -738,6 +738,7 @@
     "join-decentralised-communities": "Join Decentralized Communities",
     "http-gateway-error": "Oops, request failed!",
     "sign-request-failed": "Could not sign message",
+    "simple": "Simple",
     "invite-friends": "Invite friends",
     "invite-people": "Invite people",
     "invite-people-from-contacts": "Invite people from contact list",
@@ -784,6 +785,7 @@
     "dapp-starter-pack-title": "Starter Pack",
     "dapp-starter-pack-description": "Here’s some crypto to get you started! Use it to get stickers, an ENS name and try dapps",
     "dapp-starter-pack-accept": "Accept and Open",
+    "duration-estimate": "Duration estimate",
     "starter-pack-coming": "Starter Pack coming your way",
     "starter-pack-coming-description": "Can take a few minutes to hours",
     "starter-pack-received": "Starter Pack received",