Skip to content

Commit

Permalink
Change share-qr-code component to reflect design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tumanov-alex
tumanov-alex committed Dec 12, 2023
1 parent e5179d3 commit e283aaf
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 115 deletions.
4 changes: 2 additions & 2 deletions doc/debugging.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 0 additions & 8 deletions src/quo/components/share/share_qr_code/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
37 changes: 22 additions & 15 deletions src/quo/components/share/share_qr_code/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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})
Expand All @@ -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)

Expand All @@ -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)
Expand Down
156 changes: 66 additions & 90 deletions src/quo/components/share/share_qr_code/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,74 @@
(: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]
[react-native.platform :as platform]
[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]
Expand All @@ -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)}
Expand All @@ -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
Expand All @@ -121,53 +116,34 @@
: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
:background :blur
: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
Expand Down

0 comments on commit e283aaf

Please sign in to comment.