diff --git a/resources/images/icons/arbitrum40@2x.png b/resources/images/icons/arbitrum40@2x.png new file mode 100644 index 0000000000..c95ee9c091 Binary files /dev/null and b/resources/images/icons/arbitrum40@2x.png differ diff --git a/resources/images/icons/arbitrum40@3x.png b/resources/images/icons/arbitrum40@3x.png new file mode 100644 index 0000000000..c95ee9c091 Binary files /dev/null and b/resources/images/icons/arbitrum40@3x.png differ diff --git a/resources/images/icons/ethereum40@2x.png b/resources/images/icons/ethereum40@2x.png new file mode 100644 index 0000000000..09e1fbc108 Binary files /dev/null and b/resources/images/icons/ethereum40@2x.png differ diff --git a/resources/images/icons/ethereum40@3x.png b/resources/images/icons/ethereum40@3x.png new file mode 100644 index 0000000000..09e1fbc108 Binary files /dev/null and b/resources/images/icons/ethereum40@3x.png differ diff --git a/resources/images/icons/optimism40@2x.png b/resources/images/icons/optimism40@2x.png new file mode 100644 index 0000000000..72d25e0ab2 Binary files /dev/null and b/resources/images/icons/optimism40@2x.png differ diff --git a/resources/images/icons/optimism40@3x.png b/resources/images/icons/optimism40@3x.png new file mode 100644 index 0000000000..72d25e0ab2 Binary files /dev/null and b/resources/images/icons/optimism40@3x.png differ diff --git a/resources/images/icons/zksync40@2x.png b/resources/images/icons/zksync40@2x.png new file mode 100644 index 0000000000..d8f30d7d6f Binary files /dev/null and b/resources/images/icons/zksync40@2x.png differ diff --git a/resources/images/icons/zksync40@3x.png b/resources/images/icons/zksync40@3x.png new file mode 100644 index 0000000000..d8f30d7d6f Binary files /dev/null and b/resources/images/icons/zksync40@3x.png differ diff --git a/src/quo2/components/info/network_amount.cljs b/src/quo2/components/info/network_amount.cljs new file mode 100644 index 0000000000..7862b1ec93 --- /dev/null +++ b/src/quo2/components/info/network_amount.cljs @@ -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]]]]) \ No newline at end of file diff --git a/src/quo2/components/info/network_breakdown.cljs b/src/quo2/components/info/network_breakdown.cljs new file mode 100644 index 0000000000..d861e4dca3 --- /dev/null +++ b/src/quo2/components/info/network_breakdown.cljs @@ -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))]]) \ No newline at end of file diff --git a/src/quo2/screens/info/network_amount.cljs b/src/quo2/screens/info/network_amount.cljs new file mode 100644 index 0000000000..c125d0c326 --- /dev/null +++ b/src/quo2/screens/info/network_amount.cljs @@ -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}]]) \ No newline at end of file diff --git a/src/quo2/screens/info/network_breakdown.cljs b/src/quo2/screens/info/network_breakdown.cljs new file mode 100644 index 0000000000..2ffbc4337c --- /dev/null +++ b/src/quo2/screens/info/network_breakdown.cljs @@ -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}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index f0dfcc11d8..1b49929224 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -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}