diff --git a/resources/images/icons/gas@2x.png b/resources/images/icons/gas@2x.png deleted file mode 100644 index 688640dd9b4..00000000000 Binary files a/resources/images/icons/gas@2x.png and /dev/null differ diff --git a/resources/images/icons/gas@3x.png b/resources/images/icons/gas@3x.png deleted file mode 100644 index 67da2c7315e..00000000000 Binary files a/resources/images/icons/gas@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/duration@2x.png b/resources/images/icons2/20x20/duration@2x.png index 752a036b8da..6fd0f27dcbb 100644 Binary files a/resources/images/icons2/20x20/duration@2x.png and b/resources/images/icons2/20x20/duration@2x.png differ diff --git a/resources/images/icons2/20x20/duration@3x.png b/resources/images/icons2/20x20/duration@3x.png index 7b146e1b8cd..c473cb1037a 100644 Binary files a/resources/images/icons2/20x20/duration@3x.png and b/resources/images/icons2/20x20/duration@3x.png differ diff --git a/resources/images/icons2/20x20/gas@2x.png b/resources/images/icons2/20x20/gas@2x.png index f209033ce9c..3f7ae336d71 100644 Binary files a/resources/images/icons2/20x20/gas@2x.png and b/resources/images/icons2/20x20/gas@2x.png differ diff --git a/resources/images/icons2/20x20/gas@3x.png b/resources/images/icons2/20x20/gas@3x.png index 2f0ee84b92c..e69614cd95a 100644 Binary files a/resources/images/icons2/20x20/gas@3x.png and b/resources/images/icons2/20x20/gas@3x.png differ diff --git a/src/quo2/components/inputs/locked_input/component_spec.cljs b/src/quo2/components/inputs/locked_input/component_spec.cljs new file mode 100644 index 00000000000..ddcf0ed469a --- /dev/null +++ b/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")))) diff --git a/src/quo2/components/inputs/locked_input/style.cljs b/src/quo2/components/inputs/locked_input/style.cljs new file mode 100644 index 00000000000..348c9ec4b2e --- /dev/null +++ b/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}) diff --git a/src/quo2/components/inputs/locked_input/view.cljs b/src/quo2/components/inputs/locked_input/view.cljs new file mode 100644 index 00000000000..d3d06332978 --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2d1e6df19a3..b87f08c6ba9 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index e8f7597f363..2435be3cf1f 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index f79ff964059..91dce574c5e 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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"}}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 8c6ce99bab4..f6ee60017c9 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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} diff --git a/src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs b/src/status_im2/contexts/quo_preview/transaction_sheet/transaction_sheet.cljs new file mode 100644 index 00000000000..1555e9ba8ed --- /dev/null +++ b/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"]]]]) diff --git a/translations/en.json b/translations/en.json index 6205386ed43..86a0781df62 100644 --- a/translations/en.json +++ b/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",