Skip to content

Commit

Permalink
[#17023] Share qr code variants (#17736)
Browse files Browse the repository at this point in the history
* Align docstring

* Create share-qr-code component

* Remove empty style file

* Implement common.share-qr-code including call to media server

* Add share-qr-code preview screen

* Use share-qr-code component in shell's share screen

* Add tests and some fixes
  • Loading branch information
ulisesmac authored and yevh-berdnyk committed Dec 8, 2023
1 parent 107246d commit 6ae5cf9
Show file tree
Hide file tree
Showing 11 changed files with 715 additions and 204 deletions.
10 changes: 5 additions & 5 deletions src/quo/components/list_items/preview_list/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
(defn- view-internal
"[preview-list opts items]
opts
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
:size :size-32 | :size-24 | :size-20 | :size-16 | :size-14
:number number of items in the list (optional)
:blur? overflow-label blur?}
items preview list items (only 4 items is required for preview)
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
:size :size-32 | :size-24 | :size-20 | :size-16 | :size-14
:number number of items in the list (optional)
:blur? overflow-label blur?}
items preview list items (only 4 items is required for preview)
"
[{:keys [type size number blur?]} items]
(let [size-key (if (contains? properties/sizes size) size :size-24)
Expand Down
147 changes: 116 additions & 31 deletions src/quo/components/share/share_qr_code/component_spec.cljs
Original file line number Diff line number Diff line change
@@ -1,34 +1,119 @@
(ns quo.components.share.share-qr-code.component-spec
(:require
[quo.components.share.share-qr-code.view :as share-qr-code]
[test-helpers.component :as h]))
(:require [quo.components.share.share-qr-code.view :as share-qr-code]
[test-helpers.component :as h]))

(defn render-share-qr-code
[{share-qr-type :type :as props}]
(let [component-rendered (h/render [share-qr-code/view {:type share-qr-type}])
rerender-fn (h/get-rerender-fn component-rendered)
share-qr-code (h/get-by-label-text :share-qr-code)]
;; Fires on-layout since it's needed to render the content
(h/fire-event :layout share-qr-code #js {:nativeEvent #js {:layout #js {:width 500}}})
(rerender-fn [share-qr-code/view props])))

(h/describe "Share QR Code component"
(h/test "renders share qr code component"
(h/render [share-qr-code/view
{:link-title " A test title"}])
(-> (js/expect (h/get-by-text "A test title"))
(.toBeTruthy)))

(h/test "renders share qr code url"
(h/render [share-qr-code/view
{:qr-url " A test url"}])
(-> (js/expect (h/get-by-text "A test url"))
(.toBeTruthy)))

(h/test "on press link event fires"
(let [event (h/mock-fn)]
(h/render [share-qr-code/view
{:url-on-press event
:qr-url " A test url"}])
(h/fire-event :press (h/get-by-text "A test url"))
(-> (js/expect event)
(.toHaveBeenCalledTimes 1))))

(h/test "on press share event fires"
(let [event (h/mock-fn)]
(h/render [share-qr-code/view
{:share-on-press event}])
(h/fire-event :press (h/get-by-label-text :share-profile))
(-> (js/expect event)
(.toHaveBeenCalledTimes 1)))))
(h/describe "Renders share-qr-code component in all types"
(let [qr-label "Text shown below QR"]
(h/test "Profile"
(render-share-qr-code {:type :profile
:qr-data qr-label})
(h/is-truthy (h/get-by-text qr-label)))

(h/test "Wallet Legacy"
(render-share-qr-code {:type :wallet-legacy
:qr-data qr-label
:emoji "👻"})
(h/is-truthy (h/get-by-text qr-label)))

(h/test "Wallet Multichain"
(render-share-qr-code {:type :wallet-multichain
:qr-data qr-label
:emoji "👻"})
(h/is-truthy (h/get-by-text qr-label)))))

(h/describe "Fires all events for all types"
(letfn [(test-fire-events [props test-seq]
(doseq [{:keys [test-name event-name
callback-prop-key
accessibility-label]} test-seq
:let [event-fn (h/mock-fn)]]
(h/test test-name
(render-share-qr-code (assoc props callback-prop-key event-fn))
(h/fire-event event-name (h/get-by-label-text accessibility-label))
(h/was-called-times event-fn 1))))]

(h/describe "Profile"
(test-fire-events
{:type :profile}
[{:test-name "Text pressed"
:accessibility-label :share-qr-code-info-text
:event-name :press
:callback-prop-key :on-text-press}
{:test-name "Text long pressed"
:accessibility-label :share-qr-code-info-text
:event-name :long-press
:callback-prop-key :on-text-long-press}
{:test-name "Share button"
:accessibility-label :link-to-profile
:event-name :press
:callback-prop-key :on-share-press}]))

(h/describe "Wallet Legacy"
(test-fire-events
{:type :wallet-legacy :emoji "👽"}
[{:test-name "Text pressed"
:accessibility-label :share-qr-code-info-text
:event-name :press
:callback-prop-key :on-text-press}
{:test-name "Text long pressed"
:accessibility-label :share-qr-code-info-text
:event-name :long-press
:callback-prop-key :on-text-long-press}
{:test-name "Share button pressed"
: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
:callback-prop-key :on-legacy-press}
{:test-name "Multichain tab pressed"
:accessibility-label :share-qr-code-multichain-tab
:event-name :press
:callback-prop-key :on-multichain-press}]))

(h/describe "Wallet Multichain"
(test-fire-events
{:type :wallet-multichain :emoji "👽"}
[{:test-name "Text pressed"
:accessibility-label :share-qr-code-info-text
:event-name :press
:callback-prop-key :on-text-press}
{:test-name "Text long pressed"
:accessibility-label :share-qr-code-info-text
:event-name :long-press
:callback-prop-key :on-text-long-press}
{:test-name "Share button pressed"
: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
:callback-prop-key :on-legacy-press}
{:test-name "Multichain tab pressed"
:accessibility-label :share-qr-code-multichain-tab
:event-name :press
:callback-prop-key :on-multichain-press}
{:test-name "Settings pressed"
:accessibility-label :share-qr-code-settings
:event-name :press
:callback-prop-key :on-settings-press}])))))
145 changes: 108 additions & 37 deletions src/quo/components/share/share_qr_code/style.cljs
Original file line number Diff line number Diff line change
@@ -1,45 +1,116 @@
(ns quo.components.share.share-qr-code.style
(:require
[quo.foundations.colors :as colors]))

(def qr-code-container
{:padding-top 12
:padding-horizontal 12
:padding-bottom 8
:border-radius 16
:background-color colors/white-opa-5
:flex-direction :column
:justify-content :center
:align-items :center})

(def profile-address-column
{:margin-horizontal :auto
:flex 4})

(def profile-address-container
{:flex-direction :row
:justify-content :space-between
:margin-top 6})
(:require [quo.foundations.colors :as colors]))

(def outer-container
{:border-radius 16
:width "100%"
:overflow :hidden})

(def overlay-color colors/white-opa-5)

(def ^:private padding-horizontal 12)

(def content-container
{:z-index 1
:padding-horizontal padding-horizontal
:padding-top 12
:padding-bottom 8})

;;; Header
(def header-container
{:flex-direction :row
:margin-bottom 12})

(def header-tab-active {:background-color colors/white-opa-20})
(def header-tab-inactive {:background-color colors/white-opa-5})
(def space-between-tabs {:width 8})

(def info-icon
{:margin-left :auto
:align-self :center})

(def info-icon-color colors/white-opa-40)

;;; QR code
(defn qr-code-size
[total-width]
(- total-width (* 2 padding-horizontal)))

;;; Bottom part
(def bottom-container
{:margin-top 8
:flex-direction :row
:justify-content :space-between})

(def profile-address-content-container
{:padding-top 2
:align-self :flex-start})
(def title {:color colors/white-opa-40})

(def profile-address-content
{:color colors/white})
(def share-button-size 32)
(def ^:private share-button-gap 16)

(def profile-address-label
{:color colors/white-opa-40})
(defn share-button-container
[alignment]
{:justify-content (if (= alignment :top) :flex-start :center)
:margin-left share-button-gap})

(def share-button-container
{:flex 1
:flex-direction :column
:justify-content :center
:align-items :flex-end})
(defn data-text
[total-width]
{:width (- total-width (* 2 padding-horizontal) share-button-size share-button-gap)})

(def icon-container
{:height 36
;;; Wallet variants
(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
:padding-bottom 12})
:margin-bottom 8})

(def wallet-multichain-data-container {:margin-top 4})

;;; 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)

(def dashed-line
{:flex-direction :row
:margin-left -1})

(def line
{:background-color colors/white-opa-20
:width dashed-line-width
:height 1})

(def line-space
{:width dashed-line-space
:height 1})

(defn number-lines-and-spaces-to-fill
[component-width]
(let [line-and-space-width (+ dashed-line-width dashed-line-space)
width-to-fill (- component-width (* 2 padding-for-divider))
number-of-lines (* (/ width-to-fill line-and-space-width) 2)]
(inc (int number-of-lines))))

(def ^:private get-network-full-name
{"eth" :ethereum
"opt" :optimism
"arb1" :arbitrum})

(defn network-short-name-text
[network-short-name]
{:color (-> network-short-name
(get-network-full-name :unknown)
(colors/resolve-color nil))})
Loading

0 comments on commit 6ae5cf9

Please sign in to comment.