[issue-13557] Network breakdown and Network amount components (#13781)
This commit is contained in:
Ibrahem Khalil
GitHub
parent
260f342bb7
commit
b4d95b240d
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
(ns quo2.components.info.network-amount
|
||||
(:require [clojure.string :as string]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn network-amount
|
||||
"[network-amount opts]
|
||||
opts
|
||||
{:style style ;; extra styles for the container (takes precedence)
|
||||
:network-name \"Mainnet\" ;; shown network name
|
||||
:icon :main-icons2/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] :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/black colors/white)}}
|
||||
eth-value \space (i18n/label :t/eth)]
|
||||
[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}}
|
||||
(string/lower-case (i18n/label :t/on)) \space network-name]]]])
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
(ns quo2.components.info.network-breakdown
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.info.network-amount :refer [network-amount]]))
|
||||
|
||||
(defn network-breakdown
|
||||
[{:keys [top-value network-conversions]}]
|
||||
[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/black
|
||||
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}]])
|
||||
network-conversions))]])
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
(ns quo2.screens.info.network-amount
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.info.network-amount :refer [network-amount]]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def ^:private networks
|
||||
[{:icon :main-icons2/ethereum :name "Mainnet"}
|
||||
{:icon :main-icons2/arbitrum :name "Arbitrum"}
|
||||
{:icon :main-icons2/optimism :name "Optimism"}
|
||||
{:icon :main-icons2/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
|
||||
:type :text}
|
||||
{:label "Network"
|
||||
:key :network
|
||||
: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 nil)]
|
||||
(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)]]])))
|
||||
|
||||
(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}]])
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
(ns quo2.screens.info.network-breakdown
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.network-breakdown :as quo2]))
|
||||
|
||||
(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"})]
|
||||
(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/black
|
||||
: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
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
@ -38,6 +38,8 @@
|
|||
[quo2.screens.tags.status-tags :as status-tags]
|
||||
[quo2.screens.tags.token-tag :as token-tag]
|
||||
[quo2.screens.wallet.token-overview :as token-overview]
|
||||
[quo2.screens.info.network-breakdown :as network-breakdown]
|
||||
[quo2.screens.info.network-amount :as network-amount]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(def screens-categories
|
||||
|
|
@ -82,7 +84,13 @@
|
|||
:component information-box/preview-information-box}
|
||||
{:name :lowest-price
|
||||
:insets {:top false}
|
||||
:component lowest-price/preview-lowest-price}]
|
||||
:component lowest-price/preview-lowest-price}
|
||||
{:name :network-breakdown
|
||||
:insets {:top false}
|
||||
:component network-breakdown/preview-network-breakdown}
|
||||
{:name :network-amount
|
||||
:insets {:top false}
|
||||
:component network-amount/preview}]
|
||||
:list-items [{:name :channel
|
||||
:insets {:top false}
|
||||
:component channel/preview-channel}
|
||||
|
|
|
|||
Loading…
Reference in New Issue