Add transaction_sheet

Add locked input component, tests, styles
Add translations
Add duration icons

Remove extra code

Use theme from context

Add missing code

Update styles
Update gas icon (previous was not reacting to size change)
Use text from components instead of rn/text

Fix styling for transaction sheet preview, locked input & account selector components
Fix purple 50 color since it doesn't match design

Work on PR suggestions
Fix style to be pixel-perfect

Comment-in tests

Fix style

Add docs for locked-input component

Remove extra code

Fixed design discrepancies

Fix font-weight

Fix purple color in account selector

Remove unused icons

Fix linter

Fix tests

fix for airplane mode

[161108] Optimize message styling when there's multiple mentions on top of each other (#16505)

Fix failing mute till test (#16453)

fix navigation to community from discover communities screen (#16702)

Update version to 0.162.3

[#16703] The display name is not resolved in chats for user sender after relogin (#16704)

Mute community

* mute and unmute community

status-im/status-go@dfdaa72...e6187ae

* mute and unmute community and all community chats

status-im/status-go@dfdaa72...3abc86e

* updated statu-go

status-im/status-go@dfdaa72...919123e

* refactored mute chat drawer

status-im/status-go@d3e650d...3af0b17

* refactored mute chat drawer

status-im/status-go@dfdaa72...3af0b17

* fixing mute channels

* fixed mute community channels

* update community chats mute status

status-im/status-go@dfdaa72...dc50ac2

* added mute and unmute community toast

status-im/status-go@dfdaa72...c06f7a6

* unmute community when atleast one community channel is unmuted

status-im/status-go@dfdaa72...e691c47

* updated status-go

status-im/status-go@b2e56f5...c52718c

* updated status-go version v0.162.5

[Fix] Scroll to bottom on editing message (#16630)

This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

Refactor `Bottom Sheet` to use Theme Context (#16710)

This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme.

Changes done:

In Bottom Sheet:
 - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma)
 - Fix the Icon colour for danger in light mode
 - Updated Quo2 Preview to provide an option for the bottom sheet theme

In Action Drawer:
 - Refactor the Action Drawer component to consume theme context

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

Revert extra commits

Revert extra commits

Revert extra changes

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
@@ -204,6 +205,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/view)

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/status_im2/contexts/quo_preview/main.cljs

@@ -101,6 +101,8 @@
     [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.keycard.keycard :as keycard]
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
@@ -413,6 +415,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",