From e283aaf89db0182fab5ca4f7951f09472e1333b9 Mon Sep 17 00:00:00 2001 From: tumanov-alex Date: Mon, 20 Nov 2023 14:33:17 +0100 Subject: [PATCH] Change share-qr-code component to reflect design changes --- doc/debugging.md | 4 +- .../share/share_qr_code/component_spec.cljs | 8 - .../components/share/share_qr_code/style.cljs | 37 +++-- .../components/share/share_qr_code/view.cljs | 156 ++++++++---------- 4 files changed, 90 insertions(+), 115 deletions(-) diff --git a/doc/debugging.md b/doc/debugging.md index ff8806f4b0cb..8eef52c2895b 100644 --- a/doc/debugging.md +++ b/doc/debugging.md @@ -7,13 +7,13 @@ To start `re-frisk`, execute the following command: ```bash -$ yarn shadow-cljs run re-frisk-remote.core/start +yarn shadow-cljs run re-frisk-remote.core/start ``` or you can also use make: ```bash -$ make run-re-frisk +make run-re-frisk ``` A server will be started at http://localhost:4567. It might show "not connected" at first. Don't worry and just start using the app. The events and state will populate. diff --git a/src/quo/components/share/share_qr_code/component_spec.cljs b/src/quo/components/share/share_qr_code/component_spec.cljs index 00864029dfbc..26991c26d53f 100644 --- a/src/quo/components/share/share_qr_code/component_spec.cljs +++ b/src/quo/components/share/share_qr_code/component_spec.cljs @@ -73,10 +73,6 @@ :accessibility-label :link-to-profile :event-name :press :callback-prop-key :on-share-press} - {:test-name "Info icon pressed" - :accessibility-label :share-qr-code-info-icon - :event-name :press - :callback-prop-key :on-info-press} {:test-name "Legacy tab pressed" :accessibility-label :share-qr-code-legacy-tab :event-name :press @@ -101,10 +97,6 @@ :accessibility-label :link-to-profile :event-name :press :callback-prop-key :on-share-press} - {:test-name "Info icon pressed" - :accessibility-label :share-qr-code-info-icon - :event-name :press - :callback-prop-key :on-info-press} {:test-name "Legacy tab pressed" :accessibility-label :share-qr-code-legacy-tab :event-name :press diff --git a/src/quo/components/share/share_qr_code/style.cljs b/src/quo/components/share/share_qr_code/style.cljs index 3dfb5f3029e9..0408adde223e 100644 --- a/src/quo/components/share/share_qr_code/style.cljs +++ b/src/quo/components/share/share_qr_code/style.cljs @@ -18,8 +18,21 @@ ;;; Header (def header-container + {:margin-bottom 12}) + +(def header-title-container + {:margin-bottom 20 + :flex-direction :row + :justify-content :space-between + :overflow :hidden}) + +(def header-and-avatar-container {:flex-direction :row - :margin-bottom 12}) + :align-items :center + :word-wrap :no-wrap}) + +(def flex-direction-row + {:flex-direction :row}) (def header-tab-active {:background-color colors/white-opa-20}) (def header-tab-inactive {:background-color colors/white-opa-5}) @@ -44,6 +57,12 @@ (def title {:color colors/white-opa-40}) +(defn header-title + [component-width] + {:color colors/white + :margin-left 8 + :max-width (* component-width 0.7)}) + (def share-button-size 32) (def ^:private share-button-gap 16) @@ -60,26 +79,14 @@ (def wallet-data-and-share-container {:margin-top 2 :flex-direction :row + :align-items :center :justify-content :space-between}) (def wallet-legacy-container {:flex 1}) -(def wallet-multichain-container {:flex 1 :margin-top 4}) - -(def wallet-multichain-networks - {:flex-direction :row - :justify-content :space-between - :margin-bottom 8}) - -(def wallet-multichain-data-container {:margin-top 4}) +(def wallet-multichain-container {:flex 1}) ;;; Dashed line -(def divider-container - {:height 8 - :margin-horizontal 4 - :justify-content :center - :overflow :hidden}) - (def ^:private padding-for-divider (+ padding-horizontal 4)) (def ^:private dashed-line-width 2) (def ^:private dashed-line-space 4) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index 52c5aa0fc719..fa545667cdaa 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -2,14 +2,12 @@ (:require [clojure.set] [clojure.string :as string] [oops.core :as oops] + [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.buttons.button.view :as button] - [quo.components.icon :as icon] - [quo.components.list-items.preview-list.view :as preview-list] [quo.components.markdown.text :as text] [quo.components.share.qr-code.view :as qr-code] [quo.components.share.share-qr-code.style :as style] [quo.components.tabs.tab.view :as tab] - [quo.foundations.resources :as quo.resources] [quo.theme] [react-native.blur :as blur] [react-native.core :as rn] @@ -17,52 +15,61 @@ [reagent.core :as reagent] [utils.i18n :as i18n])) -(defn- line [] [rn/view {:style style/line}]) -(defn- space [] [rn/view {:style style/line-space}]) - -(defn- dashed-line - [width] - (into [rn/view {:style style/dashed-line}] - (take (style/number-lines-and-spaces-to-fill width)) - (cycle [[line] [space]]))) +(defn- share-button + [{:keys [alignment on-press]}] + [rn/view {:style (style/share-button-container alignment)} + [button/button + {:icon-only? true + :type :grey + :background :blur + :size style/share-button-size + :accessibility-label :link-to-profile + :on-press on-press} + :i/share]]) (defn- header - [{:keys [share-qr-type on-info-press on-legacy-press on-multichain-press]}] + [{:keys [share-qr-type on-share-press on-legacy-press on-multichain-press + component-width full-name] + :as props}] [rn/view {:style style/header-container} - [tab/view - {:accessibility-label :share-qr-code-legacy-tab - :id :wallet-legacy-tab - :active-item-container-style style/header-tab-active - :item-container-style style/header-tab-inactive - :size 24 - :active (= :wallet-legacy share-qr-type) - :on-press on-legacy-press} - (i18n/label :t/legacy)] - [rn/view {:style style/space-between-tabs}] - [tab/view - {:accessibility-label :share-qr-code-multichain-tab - :id :wallet-multichain-tab - :active-item-container-style style/header-tab-active - :item-container-style style/header-tab-inactive - :size 24 - :active (= :wallet-multichain share-qr-type) - :on-press on-multichain-press} - (i18n/label :t/multichain)] - [rn/pressable - {:accessibility-label :share-qr-code-info-icon - :style style/info-icon - :on-press on-info-press - :hit-slop 6} - [icon/icon :i/info - {:size 20 - :color style/info-icon-color}]]]) - -(defn- info-label - [share-qr-code-type] - [text/text {:size :paragraph-2 :weight :medium :style style/title} - (if (= share-qr-code-type :profile) - (i18n/label :t/link-to-profile) - (i18n/label :t/wallet-address))]) + [rn/view + {:style style/header-title-container} + [rn/view + {:style style/header-and-avatar-container} + [account-avatar/view + (assoc props + :size 32 + :type :default)] + [text/text + {:size :heading-2 + :weight :semi-bold + :style + (style/header-title component-width) + :number-of-lines 1} + full-name]] + [share-button + {:alignment :top + :on-press on-share-press}]] + [rn/view {:style style/flex-direction-row} + [tab/view + {:accessibility-label :share-qr-code-legacy-tab + :id :wallet-legacy-tab + :active-item-container-style style/header-tab-active + :item-container-style style/header-tab-inactive + :size 24 + :active (= :wallet-legacy share-qr-type) + :on-press on-legacy-press} + (i18n/label :t/legacy)] + [rn/view {:style style/space-between-tabs}] + [tab/view + {:accessibility-label :share-qr-code-multichain-tab + :id :wallet-multichain-tab + :active-item-container-style style/header-tab-active + :item-container-style style/header-tab-inactive + :size 24 + :active (= :wallet-multichain share-qr-type) + :on-press on-multichain-press} + (i18n/label :t/multichain)]]]) (defn- info-text [{:keys [width on-press on-long-press ellipsize?]} qr-data-text] @@ -78,18 +85,6 @@ :ellipsize-mode :middle)) qr-data-text]]) -(defn- share-button - [{:keys [alignment on-press]}] - [rn/view {:style (style/share-button-container alignment)} - [button/button - {:icon-only? true - :type :grey - :background :blur - :size style/share-button-size - :accessibility-label :link-to-profile - :on-press on-press} - :i/share]]) - (defn- network-colored-text [network-short-name] [text/text {:style (style/network-short-name-text network-short-name)} @@ -106,10 +101,10 @@ (conj $ address)))) (defn- profile-bottom - [{:keys [component-width qr-data on-text-press on-text-long-press on-share-press share-qr-type]}] + [{:keys [component-width qr-data on-text-press on-text-long-press on-share-press]}] [:<> [rn/view - [info-label share-qr-type] + [text/text {:size :paragraph-2 :weight :medium :style style/title} (i18n/label :t/link-to-profile)] [info-text {:width component-width :ellipsize? true @@ -121,32 +116,26 @@ :on-press on-share-press}]]) (defn- wallet-legacy-bottom - [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press on-share-press]}] + [{:keys [component-width qr-data on-text-press on-text-long-press]}] [rn/view {:style style/wallet-legacy-container} - [info-label share-qr-type] [rn/view {:style style/wallet-data-and-share-container} [info-text {:width component-width :on-press on-text-press :on-long-press on-text-long-press} qr-data] - [share-button - {:alignment :top - :on-press on-share-press}]]]) - -(def ^:private known-networks #{:ethereum :optimism :arbitrum}) - -(defn- get-network-image-source - [network] - {:source (quo.resources/get-network (get known-networks network :unknown))}) + ]]) (defn wallet-multichain-bottom - [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press - on-share-press networks on-settings-press]}] + [{:keys [component-width qr-data on-text-press on-text-long-press + on-settings-press]}] [rn/view {:style style/wallet-multichain-container} - [rn/view {:style style/wallet-multichain-networks} - [preview-list/view {:type :network :size :size-32} - (map get-network-image-source networks)] + [rn/view {:style style/wallet-data-and-share-container} + [info-text + {:width component-width + :on-press on-text-press + :on-long-press on-text-long-press} + [wallet-multichain-colored-address qr-data]] [button/button {:icon-only? true :type :grey @@ -154,20 +143,7 @@ :size 32 :accessibility-label :share-qr-code-settings :on-press on-settings-press} - :i/advanced]] - [rn/view {:style style/divider-container} - [dashed-line component-width]] - [rn/view {:style style/wallet-multichain-data-container} - [info-label share-qr-type] - [rn/view {:style style/wallet-data-and-share-container} - [info-text - {:width component-width - :on-press on-text-press - :on-long-press on-text-long-press} - [wallet-multichain-colored-address qr-data]] - [share-button - {:alignment :top - :on-press on-share-press}]]]]) + :i/advanced]]]) (defn- share-qr-code [{:keys [share-qr-type qr-image-uri component-width customization-color full-name