Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 tumanov-alex
|
bb30b99284 | ||
|
tumanov-alex
|
2f2ad8a06a |
+2
-2
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -18,19 +18,26 @@
|
||||
|
||||
;;; 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})
|
||||
(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]
|
||||
@@ -44,6 +51,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,49 +73,12 @@
|
||||
(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})
|
||||
|
||||
;;; 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 wallet-multichain-container {:flex 1})
|
||||
|
||||
(def ^:private get-network-full-name
|
||||
{"eth" :ethereum
|
||||
|
||||
@@ -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,60 @@
|
||||
[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 +84,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 +100,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 +115,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 +142,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
|
||||
@@ -211,14 +186,12 @@
|
||||
- profile-picture: map ({:source image-source}) or any image source.
|
||||
`:wallet-legacy`
|
||||
- emoji: Emoji in a string to show in the QR code.
|
||||
- on-info-press: Callback for the info icon.
|
||||
- on-legacy-press: Callback for the legacy tab.
|
||||
- on-multichain-press: Callback for the multichain tab.
|
||||
`:wallet-multichain`
|
||||
- networks: A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
|
||||
- on-settings-press: Callback for the settings button.
|
||||
- emoji: Emoji in a string to show in the QR code.
|
||||
- on-info-press: Callback for the info icon.
|
||||
- on-legacy-press: Callback for the legacy tab.
|
||||
- on-multichain-press: Callback for the multichain tab.
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
[status-im2.contexts.onboarding.common.carousel.view :as carousel]
|
||||
[status-im2.contexts.shell.jump-to.state :as shell.state]
|
||||
[utils.i18n :as i18n]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def header-text
|
||||
@@ -78,6 +79,7 @@
|
||||
[rn/view
|
||||
{:style style/background-container
|
||||
:on-layout store-screen-height}
|
||||
(log/info "sooqa" progress drag-amount is-dragging?)
|
||||
[carousel/view
|
||||
{:animate? animate?
|
||||
:progress progress
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
[status-im2.contexts.onboarding.identifiers.profile-card.view :as profile-card]
|
||||
[status-im2.contexts.onboarding.identifiers.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def header-text
|
||||
@@ -38,6 +39,7 @@
|
||||
[])
|
||||
[:<>
|
||||
[rn/view {:style style/page-container}
|
||||
(log/info "sooqa" progress drag-amount is-dragging?)
|
||||
[carousel/view
|
||||
{:animate? true
|
||||
:progress progress
|
||||
|
||||
@@ -92,7 +92,6 @@
|
||||
:full-name "My User"
|
||||
:customization-color :purple
|
||||
:emoji "🐈"
|
||||
:on-info-press #(js/alert "Info pressed")
|
||||
:on-legacy-press #(js/alert (str "Tab " % " pressed"))
|
||||
:on-multichain-press #(js/alert (str "Tab " % " pressed"))
|
||||
:networks (take 2 possible-networks)
|
||||
|
||||
@@ -94,6 +94,15 @@
|
||||
{:padding-horizontal screen-padding
|
||||
:margin-vertical 8})
|
||||
|
||||
(def wip-style
|
||||
{:color colors/white
|
||||
:text-align :center})
|
||||
(def wallet-tab-container
|
||||
{})
|
||||
|
||||
(def background-container
|
||||
{:background-color colors/neutral-95
|
||||
:flex-direction :row
|
||||
:position :absolute
|
||||
:overflow :hidden
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})
|
||||
|
||||
@@ -1,16 +1,23 @@
|
||||
(ns status-im2.contexts.shell.share.view
|
||||
(:require
|
||||
[oops.core :refer [oget]]
|
||||
[react-native.async-storage :as async-storage]
|
||||
[clojure.string :as string]
|
||||
[quo.core :as quo]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.common.resources :as resources]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.list-selection :as list-selection]
|
||||
[status-im2.common.qr-codes.view :as qr-codes]
|
||||
[status-im2.contexts.onboarding.common.carousel.animation :as carousel.animation]
|
||||
[status-im2.contexts.onboarding.common.carousel.view :as carousel]
|
||||
[status-im2.contexts.profile.utils :as profile.utils]
|
||||
[status-im2.contexts.shell.jump-to.state :as shell.state]
|
||||
[status-im2.contexts.shell.share.style :as style]
|
||||
[utils.address :as address]
|
||||
[utils.i18n :as i18n]
|
||||
@@ -105,9 +112,81 @@
|
||||
:post-copy-message (i18n/label :t/emoji-hash-copied)}])}
|
||||
:i/copy]]]]))
|
||||
|
||||
(def header-text
|
||||
[{:text (i18n/label :t/join-decentralised-communities)
|
||||
:sub-text (i18n/label :t/participate-in-the-metaverse)}
|
||||
{:text (i18n/label :t/chat-with-friends)
|
||||
:sub-text (i18n/label :t/with-full-encryption)}
|
||||
{:text (i18n/label :t/own-your-crypto)
|
||||
:sub-text (i18n/label :t/use-the-multichain-wallet)}
|
||||
{:text (i18n/label :t/discover-web3)
|
||||
:sub-text (i18n/label :t/explore-the-decentralized-web)}])
|
||||
|
||||
(defn background-image
|
||||
[content-width]
|
||||
[rn/image
|
||||
{:style {:resize-mode :stretch
|
||||
:resize-method :scale
|
||||
:margin-top 32
|
||||
:width content-width}
|
||||
:source (resources/get-image :onboarding-illustration)}])
|
||||
|
||||
(defonce progress (atom nil))
|
||||
(defonce paused? (atom nil))
|
||||
(defonce is-dragging? (atom nil))
|
||||
(defonce drag-amount (atom nil))
|
||||
|
||||
(defn store-screen-height
|
||||
[evt]
|
||||
(let [window-height (:height (rn/get-window))
|
||||
height (or (oget evt "nativeEvent" "layout" "height") 0)
|
||||
width (or (oget evt "nativeEvent" "layout" "width") 0)]
|
||||
;; Layout height calculation
|
||||
;; 1. Make sure height is more than width, and on-layout is not fired while the
|
||||
;; screen is horizontal
|
||||
;; 2. Initialize values with 0 in case of nil
|
||||
;; 3. In the case of notch devices, the dimensions height will be smaller than
|
||||
;; on-layout,
|
||||
;; (without status bar height included)
|
||||
;; https://github.com/status-im/status-mobile/issues/14633
|
||||
;; 4. In the case of devices without a notch, both heights should be the same,
|
||||
;; but actual values differ in some pixels, so arbitrary 5 pixels is allowed
|
||||
(when (and (> height width)
|
||||
(>= (+ height 5) (or window-height 0))
|
||||
(not= height @shell.state/screen-height))
|
||||
(reset! shell.state/screen-height height)
|
||||
(async-storage/set-item! :screen-height height))))
|
||||
|
||||
(defn wallet-tab
|
||||
[]
|
||||
[rn/text {:style style/wip-style} "not implemented"])
|
||||
(let [view-id (rf/sub [:view-id])
|
||||
animate? true
|
||||
window-width (rf/sub [:dimensions/window-width])]
|
||||
(when animate?
|
||||
(carousel.animation/use-initialize-animation progress paused? animate? is-dragging? drag-amount))
|
||||
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(reanimated/set-shared-value @paused? (not= view-id :intro))
|
||||
(fn []
|
||||
(when (= view-id :generating-keys)
|
||||
(carousel.animation/cleanup-animation progress paused?))))
|
||||
[view-id])
|
||||
|
||||
[rn/view
|
||||
{:style style/background-container
|
||||
:on-layout store-screen-height}
|
||||
[carousel/view
|
||||
{:animate? animate?
|
||||
:progress progress
|
||||
:paused? false
|
||||
:header-text header-text
|
||||
:is-dragging? is-dragging?
|
||||
:drag-amount drag-amount
|
||||
:header-background true
|
||||
:gesture :swipeable
|
||||
:background [background-image (* 4 window-width)]}]]))
|
||||
;[rn/view {:style style/wallet-tab-container}]
|
||||
|
||||
(defn tab-content
|
||||
[]
|
||||
@@ -125,9 +204,11 @@
|
||||
:label (i18n/label :t/profile)}
|
||||
{:id :wallet
|
||||
:label (i18n/label :t/wallet)}]}]]
|
||||
(if (= @selected-tab :profile)
|
||||
[profile-tab]
|
||||
[wallet-tab])])))
|
||||
;(if (= @selected-tab :profile)
|
||||
; [profile-tab]
|
||||
; [wallet-tab])
|
||||
[wallet-tab]
|
||||
])))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
|
||||
Reference in New Issue
Block a user