parent
162f02ea27
commit
cf11743f87
Binary file not shown.
After Width: | Height: | Size: 915 B |
Binary file not shown.
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
After Width: | Height: | Size: 140 B |
Binary file not shown.
After Width: | Height: | Size: 143 B |
|
@ -1,77 +0,0 @@
|
|||
(ns quo2.components.wallet.lowest-price
|
||||
(:require [clojure.string :as string]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(def centrify
|
||||
{:style {:flex-direction :row
|
||||
:justify-content :center
|
||||
:align-items :center}})
|
||||
|
||||
(defn border-alignment
|
||||
[value-bg-color]
|
||||
{:style {:align-self :flex-start
|
||||
:padding-horizontal 16
|
||||
:padding-vertical 2
|
||||
:flex-grow 0.25
|
||||
:border-radius 4
|
||||
:background-color value-bg-color}})
|
||||
|
||||
(def line-dots-props
|
||||
{:ellipsize-mode :middle
|
||||
:number-of-lines 1
|
||||
:font-size 10
|
||||
:line-height 2})
|
||||
|
||||
(defn dots
|
||||
"Returns the dots"
|
||||
[few-of-dots?]
|
||||
(let [dots-text (->> ". "
|
||||
(repeat (if few-of-dots?
|
||||
16
|
||||
48))
|
||||
string/join
|
||||
(str " "))]
|
||||
dots-text))
|
||||
|
||||
(defn dots-comp
|
||||
"Returns the dots adding their styles"
|
||||
[few-of-dots?]
|
||||
[rn/view
|
||||
{:style {:align-items :center
|
||||
:bottom 5}}
|
||||
[rn/text line-dots-props (dots few-of-dots?)]])
|
||||
|
||||
(defn lowest-price-value-comp
|
||||
"Component responsible for the top and bottom values"
|
||||
[top-value top-value-bg-color top-value-text-color]
|
||||
[rn/view (border-alignment top-value-bg-color)
|
||||
[rn/text
|
||||
{:style {:color top-value-text-color
|
||||
:text-align :center}} top-value]])
|
||||
|
||||
(defn lowest-price-styles
|
||||
[margin-top]
|
||||
{:style {:flex-direction :column
|
||||
:width "100%"
|
||||
:overflow :hidden
|
||||
:margin-top (int margin-top)
|
||||
:justify-content :center}})
|
||||
|
||||
(defn lowest-price
|
||||
"Shows the lowest price component"
|
||||
[{:keys [top-value
|
||||
bottom-value
|
||||
margin-top
|
||||
top-value-text-color
|
||||
top-value-bg-color
|
||||
bottom-value-bg-color
|
||||
bottom-value-text-color]}]
|
||||
[rn/view (lowest-price-styles margin-top)
|
||||
[rn/view centrify
|
||||
[dots-comp true]
|
||||
[lowest-price-value-comp top-value top-value-bg-color top-value-text-color]
|
||||
[dots-comp false]]
|
||||
[rn/view centrify
|
||||
[dots-comp false]
|
||||
[lowest-price-value-comp bottom-value bottom-value-bg-color bottom-value-text-color]
|
||||
[dots-comp true]]])
|
|
@ -1,53 +0,0 @@
|
|||
(ns quo2.components.wallet.network-amount
|
||||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn network-amount
|
||||
"[network-amount opts]
|
||||
opts
|
||||
{:style style ;; extra styles for the container (takes precedence)
|
||||
:network-name \"Mainnet\" ;; shown network name
|
||||
:icon :i/ethereum ;; key of icon belonging to the network
|
||||
:eth-value 1.2345678 ;; shown ETH value}"
|
||||
[{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
|
||||
[rn/view
|
||||
(merge {:accessibility-label :network-amount
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:border-radius 16
|
||||
:padding 6}
|
||||
style)
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
[rn/view
|
||||
{:flex-direction :column
|
||||
:align-self :flex-start
|
||||
:padding-top 3
|
||||
:padding-right 4}
|
||||
[icon/icon icon
|
||||
{:size 40
|
||||
:no-color true
|
||||
:container-style {:width 12
|
||||
:height 12}}]]
|
||||
[rn/view
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
|
||||
eth-value \space (:eth labels)]
|
||||
[rn/view
|
||||
{:style {:border-right-width (when show-right-border? 1)
|
||||
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
|
||||
:padding-left 8
|
||||
:align-self :center
|
||||
:height 8}}]]
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :label
|
||||
:style {:color colors/neutral-50}}
|
||||
(:on labels) \space network-name]]]])
|
|
@ -0,0 +1,10 @@
|
|||
(ns quo2.components.wallet.network-amount.component-spec
|
||||
(:require [test-helpers.component :as h]
|
||||
[quo2.components.wallet.network-amount.view :as network-amount]))
|
||||
|
||||
(h/describe "Wallet: Network Amount"
|
||||
(h/test "Amount renders"
|
||||
(h/render [network-amount/view
|
||||
{:amount "5.123"
|
||||
:token :eth}])
|
||||
(h/is-truthy (h/get-by-text "5.123 ETH"))))
|
|
@ -0,0 +1,17 @@
|
|||
(ns quo2.components.wallet.network-amount.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def container
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:height 18})
|
||||
|
||||
(def text
|
||||
{:margin-left 4
|
||||
:margin-right 8})
|
||||
|
||||
(defn divider
|
||||
[theme]
|
||||
{:width 1
|
||||
:height 8
|
||||
:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
|
|
@ -0,0 +1,24 @@
|
|||
(ns quo2.components.wallet.network-amount.view
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.wallet.network-amount.style :as style]
|
||||
[quo2.foundations.resources :as resources]))
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [amount token theme]}]
|
||||
[rn/view {:style style/container}
|
||||
[rn/image
|
||||
{:source (resources/tokens token)
|
||||
:style {:width 12 :height 12}}]
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style style/text}
|
||||
(str amount " " (string/upper-case (clj->js token)))]
|
||||
[rn/view
|
||||
{:style (style/divider theme)}]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
|
@ -1,52 +0,0 @@
|
|||
(ns quo2.components.wallet.network-breakdown
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.components.wallet.network-amount :refer [network-amount]]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn network-breakdown
|
||||
[{:keys [top-value network-conversions labels]}]
|
||||
[rn/view
|
||||
{:style {:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-95)
|
||||
:padding-horizontal 40
|
||||
:padding-top 24
|
||||
:border-radius 16
|
||||
:height 126
|
||||
:width 390
|
||||
:overflow :hidden}}
|
||||
[rn/view
|
||||
{:style {:border-bottom-width 1
|
||||
:border-bottom-color (colors/theme-colors
|
||||
colors/neutral-20
|
||||
colors/neutral-70)
|
||||
:padding-vertical 6}}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:style {:color (colors/theme-colors
|
||||
colors/neutral-100
|
||||
colors/white)
|
||||
:font-size 19}}
|
||||
(str top-value)]]
|
||||
[rn/scroll-view
|
||||
{:horizontal true
|
||||
:style {:text-align :center
|
||||
:margin-top 6
|
||||
:width 340}}
|
||||
(let [last-item-idx (-> network-conversions
|
||||
count
|
||||
dec)]
|
||||
(map-indexed
|
||||
(fn [idx {:keys [conversion network icon]}]
|
||||
[rn/view
|
||||
{:style (cond-> {:flex-direction :row}
|
||||
(not= idx 0) (assoc :margin-left -4))
|
||||
:key idx}
|
||||
[network-amount
|
||||
{:show-right-border? (not= idx last-item-idx)
|
||||
:icon icon
|
||||
:network-name network
|
||||
:eth-value conversion
|
||||
:labels labels}]])
|
||||
network-conversions))]])
|
|
@ -1,127 +0,0 @@
|
|||
(ns quo2.components.wallet.token-overview
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(def container-style
|
||||
{:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
|
||||
|
||||
(defn price-direction
|
||||
[price-change increase decrease neutral]
|
||||
(cond
|
||||
(pos? price-change) increase
|
||||
(neg? price-change) decrease
|
||||
:else neutral))
|
||||
|
||||
(defn price-color
|
||||
[direction]
|
||||
(price-direction direction colors/success-50 colors/danger-50 colors/neutral-50))
|
||||
|
||||
(defn divider
|
||||
[direction]
|
||||
[rn/view
|
||||
{:style {:height 10
|
||||
:margin-left 4
|
||||
:margin-right 4
|
||||
:width 1
|
||||
:background-color (price-direction direction
|
||||
colors/success-50-opa-40
|
||||
colors/danger-50-opa-40
|
||||
colors/divider-light)}}])
|
||||
|
||||
(defn get-direction
|
||||
[percentage-change]
|
||||
(if (zero? (js/parseInt percentage-change))
|
||||
0
|
||||
(/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change)))))
|
||||
|
||||
(defn trim-minus
|
||||
[percentage-change]
|
||||
(if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change))
|
||||
|
||||
(defn token-price
|
||||
"[token-price opts \"label\"]
|
||||
opts
|
||||
{
|
||||
:currency :currency-key
|
||||
:price :string
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn
|
||||
[{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:size :paragraph-2} label]
|
||||
[text/text
|
||||
{:style {:margin-top 4}
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:size :heading-2} (str currency price)]
|
||||
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction))
|
||||
[icons/icon (if (>= direction 0) :i/price-increase12 :i/price-decrease12)
|
||||
{:no-color true
|
||||
:width 14
|
||||
:height 14
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}}
|
||||
(str (trim-minus percentage-change) "%")]]])))
|
||||
|
||||
(defn token-balance
|
||||
"[token-balance opts \"label\"]
|
||||
opts
|
||||
{
|
||||
:token string
|
||||
:token-img-src :token-img-src
|
||||
:currency :currency-key
|
||||
:account-balance :string
|
||||
:price :string
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn [{:keys [token token-img-src currency account-balance price percentage-change]
|
||||
:or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text
|
||||
{:weight :regular
|
||||
:number-of-lines 1
|
||||
:size :paragraph-1} (str "Account " token " Balance")]
|
||||
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:weight :semi-bold
|
||||
:size :heading-1} (str currency account-balance)]
|
||||
[rn/image
|
||||
{:source token-img-src
|
||||
:style {:height 32
|
||||
:width 32}}]]
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction))
|
||||
[icons/icon (if (pos? direction) :i/price-increase :i/price-decrease)
|
||||
{:no-color true
|
||||
:size 12
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}} (str currency price)]
|
||||
[divider direction]
|
||||
[text/text
|
||||
{:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}}
|
||||
(str (trim-minus percentage-change) "%")]]])))
|
||||
|
|
@ -100,7 +100,8 @@
|
|||
quo2.components.tags.tag
|
||||
quo2.components.tags.tags
|
||||
quo2.components.tags.token-tag
|
||||
quo2.components.text-combinations.title.view))
|
||||
quo2.components.text-combinations.title.view
|
||||
quo2.components.wallet.network-amount.view))
|
||||
|
||||
(def separator quo2.components.common.separator.view/separator)
|
||||
|
||||
|
@ -283,5 +284,10 @@
|
|||
(def url-preview-list quo2.components.links.url-preview-list.view/view)
|
||||
(def link-preview quo2.components.links.link-preview.view/view)
|
||||
|
||||
|
||||
;;;; GRADIENT
|
||||
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
|
||||
|
||||
;;;; WALLET
|
||||
(def network-amount quo2.components.wallet.network-amount.view/view)
|
||||
|
||||
|
|
|
@ -45,4 +45,5 @@
|
|||
[quo2.components.settings.settings-list.component-spec]
|
||||
[quo2.components.settings.category.component-spec]
|
||||
[quo2.components.share.share-qr-code.component-spec]
|
||||
[quo2.components.tags.status-tags-component-spec]))
|
||||
[quo2.components.tags.status-tags-component-spec]
|
||||
[quo2.components.wallet.network-amount.component-spec]))
|
||||
|
|
|
@ -9,3 +9,17 @@
|
|||
(defn get-image
|
||||
[k]
|
||||
(get ui k))
|
||||
|
||||
(def tokens
|
||||
{:eth (js/require "../resources/images/tokens/mainnet/ETH.png")
|
||||
:knc (js/require "../resources/images/tokens/mainnet/KNC.png")
|
||||
:mana (js/require "../resources/images/tokens/mainnet/MANA.png")
|
||||
:rare (js/require "../resources/images/tokens/mainnet/RARE.png")
|
||||
:dai (js/require "../resources/images/tokens/mainnet/DAI.png")
|
||||
:fxc (js/require "../resources/images/tokens/mainnet/FXC.png")
|
||||
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
|
||||
:snt (js/require "../resources/images/tokens/mainnet/SNT.png")})
|
||||
|
||||
(defn get-token
|
||||
[k]
|
||||
(get tokens k))
|
||||
|
|
|
@ -77,16 +77,6 @@
|
|||
:user-picture-male4 (js/require "../resources/images/mock2/user_picture_male4.png")
|
||||
:user-picture-male5 (js/require "../resources/images/mock2/user_picture_male5.png")})
|
||||
|
||||
(def tokens
|
||||
{:eth (js/require "../resources/images/tokens/mainnet/ETH.png")
|
||||
:knc (js/require "../resources/images/tokens/mainnet/KNC.png")
|
||||
:mana (js/require "../resources/images/tokens/mainnet/MANA.png")
|
||||
:rare (js/require "../resources/images/tokens/mainnet/RARE.png")
|
||||
:dai (js/require "../resources/images/tokens/mainnet/DAI.png")
|
||||
:fxc (js/require "../resources/images/tokens/mainnet/FXC.png")
|
||||
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
|
||||
:snt (js/require "../resources/images/tokens/mainnet/SNT.png")})
|
||||
|
||||
(def parallax-video
|
||||
{:biometrics [(js/require "../resources/videos2/biometrics_01.mp4")
|
||||
(js/require "../resources/videos2/biometrics_02.mp4")
|
||||
|
@ -107,7 +97,3 @@
|
|||
(defn get-themed-image
|
||||
[k k2]
|
||||
(get ui (if (colors/dark?) k k2)))
|
||||
|
||||
(defn get-token
|
||||
[k]
|
||||
(get tokens k))
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
(ns status-im2.contexts.quo-preview.community.token-gating
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im2.common.resources :as resources]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[quo2.core :as quo]))
|
||||
(:require
|
||||
[quo2.foundations.resources :as resources]
|
||||
[reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[quo2.core :as quo]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Tokens sufficient"
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
(ns status-im2.contexts.quo-preview.drawers.permission-drawers
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.resources :as quo.resources]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.common.resources :as resources]))
|
||||
|
||||
|
@ -43,7 +44,7 @@
|
|||
[quo/text {:style {:margin-right 4}} "Hold"]
|
||||
[quo/token-tag
|
||||
{:size :small
|
||||
:token-img-src (resources/get-token :eth)} "ETH"]
|
||||
:token-img-src (quo.resources/get-token :eth)} "ETH"]
|
||||
[quo/text {:style {:margin-left 4}} "To post"]])
|
||||
|
||||
(defn example-3
|
||||
|
|
|
@ -97,14 +97,11 @@
|
|||
[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.wallet.lowest-price :as lowest-price]
|
||||
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
|
||||
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
|
||||
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
|
||||
[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]
|
||||
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]))
|
||||
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
|
||||
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]))
|
||||
|
||||
(def screens-categories
|
||||
{:foundations [{:name :shadows
|
||||
|
@ -392,16 +389,7 @@
|
|||
:text-combinations [{:name :title
|
||||
:options {:topBar {:visible true}}
|
||||
:component title/preview-title}]
|
||||
:wallet [{:name :lowest-price
|
||||
:options {:topBar {:visible true}}
|
||||
:component lowest-price/preview-lowest-price}
|
||||
{:name :token-overview
|
||||
:options {:topBar {:visible true}}
|
||||
:component token-overview/preview-token-overview}
|
||||
{:name :network-breakdown
|
||||
:options {:topBar {:visible true}}
|
||||
:component network-breakdown/preview-network-breakdown}
|
||||
{:name :network-amount
|
||||
:wallet [{:name :network-amount
|
||||
:options {:topBar {:visible true}}
|
||||
:component network-amount/preview}]
|
||||
:keycard [{:name :keycard-component
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
[quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.common.resources :as resources]
|
||||
[quo2.foundations.resources :as quo2.resources]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.settings.reorder-item.types :as types]))
|
||||
|
||||
|
@ -22,7 +23,7 @@
|
|||
:title "Status"}}
|
||||
{:id 3
|
||||
:type types/item
|
||||
:data {:image (resources/tokens :eth)
|
||||
:data {:image (quo2.resources/tokens :eth)
|
||||
:image-size 21
|
||||
:right-icon :i/world
|
||||
:title "Ethereum"}}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.token-tag
|
||||
(:require [quo2.components.tags.token-tag :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.resources :as resources]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[status-im2.common.resources :as resources]))
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Size:"
|
||||
|
|
|
@ -1,60 +0,0 @@
|
|||
(ns status-im2.contexts.quo-preview.wallet.lowest-price
|
||||
(:require [quo2.components.wallet.lowest-price :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Top value"
|
||||
:key :top-value
|
||||
:type :text}
|
||||
{:label "Top value background color"
|
||||
:key :top-value-bg-color
|
||||
:type :text}
|
||||
{:label "Top value text color"
|
||||
:key :top-value-text-color
|
||||
:type :text}
|
||||
{:label "Bottom value"
|
||||
:key :bottom-value
|
||||
:type :text}
|
||||
{:label "Bottom value background color"
|
||||
:key :bottom-value-bg-color
|
||||
:type :text}
|
||||
{:label "Bottom value text color"
|
||||
:key :bottom-value-text-color
|
||||
:type :text}
|
||||
{:label "Margin top"
|
||||
:key :margin-top
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:top-value 20
|
||||
:bottom-value 20
|
||||
:top-value-bg-color colors/neutral-100
|
||||
:top-value-text-color colors/white
|
||||
:bottom-value-bg-color colors/neutral-100
|
||||
:bottom-value-text-color colors/white})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/lowest-price @state]]]])))
|
||||
|
||||
(defn preview-lowest-price
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white
|
||||
colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
:keyboard-should-persist-taps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
|
@ -1,68 +1,31 @@
|
|||
(ns status-im2.contexts.quo-preview.wallet.network-amount
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.wallet.network-amount :refer [network-amount]]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
(:require
|
||||
[quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def ^:private networks
|
||||
[{:icon :i/ethereum :name "Mainnet"}
|
||||
{:icon :i/arbitrum :name "Arbitrum"}
|
||||
{:icon :i/optimism :name "Optimism"}
|
||||
{:icon :i/zksync :name "zkSync"}])
|
||||
|
||||
(defn- networks->options
|
||||
[networks]
|
||||
(for [{:keys [name]
|
||||
:as network}
|
||||
networks]
|
||||
{:key network
|
||||
:value name}))
|
||||
|
||||
(def ^:private descriptors
|
||||
[{:label "ETH Value"
|
||||
:key :eth-value
|
||||
(def descriptor
|
||||
[{:label "Amount:"
|
||||
:key :amount
|
||||
:type :text}
|
||||
{:label "Network"
|
||||
:key :network
|
||||
{:label "Token:"
|
||||
:key :token
|
||||
:type :select
|
||||
:options (networks->options networks)}])
|
||||
|
||||
(def ^:private default-network
|
||||
(first networks))
|
||||
|
||||
(defn- state->opts
|
||||
[{:keys [eth-value network show-right-border?]
|
||||
:or {eth-value 5.123456
|
||||
show-right-border? true}}]
|
||||
{:network-name (:name (or network default-network))
|
||||
:icon (:icon (or network default-network))
|
||||
:eth-value eth-value
|
||||
:show-right-border? show-right-border?})
|
||||
|
||||
(defn- cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:labels {:eth (i18n/label :t/eth)
|
||||
:on (string/lower-case (i18n/label :t/on))}})]
|
||||
(fn []
|
||||
[rn/view
|
||||
{:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptors]
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:align-items :center}
|
||||
[network-amount (state->opts @state)]]])))
|
||||
:options [{:key :eth
|
||||
:value "ETH"}
|
||||
{:key :snt
|
||||
:value "SNT"}]}])
|
||||
|
||||
(defn preview
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
:keyboard-should-persist-taps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
(let [state (reagent/atom {:amount "5.123456"
|
||||
:token :eth})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:padding-horizontal 20}}
|
||||
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
|
||||
[quo/network-amount @state]]])))
|
||||
|
|
|
@ -1,75 +0,0 @@
|
|||
(ns status-im2.contexts.quo-preview.wallet.network-breakdown
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.wallet.network-breakdown :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Ethereum Value"
|
||||
:key :top-value
|
||||
:type :text}
|
||||
{:label "Conversion"
|
||||
:key :conversion
|
||||
:type :text}
|
||||
{:label "Network"
|
||||
:key :network
|
||||
:type :text}
|
||||
{:label "Icon"
|
||||
:key :icon
|
||||
:type :select
|
||||
:options [{:key :main-icons/arbitrum
|
||||
:value "Arbitrum"}
|
||||
{:key :main-icons/optimism
|
||||
:value "Optimism"}
|
||||
{:key :main-icons/zksync
|
||||
:value "ZK Sync"}
|
||||
{:key :main-icons/arbitrum
|
||||
:value "Arbitrum"}
|
||||
{:key :main-icons/ethereum
|
||||
:value "Ethereum"}]}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:icon :main-icons/arbitrum
|
||||
:network "Mainnet"
|
||||
:conversion "5.1234"
|
||||
:top-value "10 ETH"
|
||||
:labels {:eth (i18n/label :t/eth)
|
||||
:on (string/lower-case (i18n/label :t/on))}})]
|
||||
(fn []
|
||||
[rn/view
|
||||
{:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/network-breakdown @state]]
|
||||
[rn/touchable-opacity
|
||||
{:style {:background-color colors/neutral-100
|
||||
:width 100}
|
||||
:on-press (fn []
|
||||
(swap! state update-in
|
||||
[:network-conversions]
|
||||
conj
|
||||
{:conversion (:conversion @state)
|
||||
:icon (:icon @state)
|
||||
:network (:network @state)}))}
|
||||
[rn/text {:style {:color colors/white}} "Add current conversion"]]])))
|
||||
|
||||
(defn preview-network-breakdown
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white
|
||||
colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
:keyboard-should-persist-taps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
|
@ -1,74 +0,0 @@
|
|||
(ns status-im2.contexts.quo-preview.wallet.token-overview
|
||||
(:require [quo2.components.wallet.token-overview :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im.utils.currency :as currencies]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[status-im2.common.resources :as resources]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Token:"
|
||||
:key :token
|
||||
:type :select
|
||||
:options [{:key "SNT"
|
||||
:value "SNT"}
|
||||
{:key "ETH"
|
||||
:value "ETH"}]}
|
||||
|
||||
{:label "Account Balance:"
|
||||
:key :account-balance
|
||||
:type :text}
|
||||
{:label "Price:"
|
||||
:key :price
|
||||
:type :text}
|
||||
{:label "Percentage-Increase:"
|
||||
:key :percentage-change
|
||||
:type :text}
|
||||
{:label "Currency:"
|
||||
:key :currency
|
||||
:type :select
|
||||
:options [{:key :usd
|
||||
:value "$"}
|
||||
{:key :eur
|
||||
:value "€"}]}])
|
||||
|
||||
(def eth-token (resources/get-token :eth))
|
||||
(def snt-token (resources/get-token :snt))
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:token "ETH"
|
||||
:account-balance "3.00"
|
||||
:price "1.00"
|
||||
:percentage-change "-3.0"
|
||||
:currency (get-in currencies/currencies [:usd :symbol])})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view
|
||||
{:border :black
|
||||
:border-width 1
|
||||
:align-items :center}
|
||||
[quo2/token-balance
|
||||
(assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
|
||||
[rn/view
|
||||
{:padding-vertical 25
|
||||
:align-items :center}]
|
||||
[quo2/token-price
|
||||
(assoc @state
|
||||
:token-img-src (if (= (:token @state) "ETH") eth-token snt-token)
|
||||
:label (i18n/label :token-price))]]]])))
|
||||
|
||||
(defn preview-token-overview
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
:keyboard-should-persist-taps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
Loading…
Reference in New Issue