Omar Basem
GitHub
parent
715fc13d46
commit
79994e2dbf
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 923 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -31,16 +31,17 @@
|
|||
(colors/theme-colors colors/danger-50 colors/danger-60 theme))
|
||||
gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
|
||||
fill-color (colors/theme-colors colors/white colors/neutral-95)]
|
||||
(if (= time-frame :empty)
|
||||
[rn/view
|
||||
{:accessibility-label :illustration
|
||||
:style style/illustration}
|
||||
[text/text {:style {:color colors/white}}
|
||||
"Illustration here"]]
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors gradient-colors
|
||||
:start {:x 0 :y 1}
|
||||
:end {:x 0 :y 0}
|
||||
:style style/gradient-background}
|
||||
(if (= time-frame :empty)
|
||||
[rn/view
|
||||
{:accessibility-label :illustration
|
||||
:style style/illustration}
|
||||
[text/text "Illustration here"]]
|
||||
[rn/view {:accessibility-label :line-chart}
|
||||
[charts/line-chart
|
||||
{:height 96
|
||||
|
|
@ -65,6 +66,6 @@
|
|||
:disable-scroll true
|
||||
:y-axis-label-width 0.01
|
||||
:labels-extra-height -36
|
||||
:x-axis-label-text-style style/x-axis-label-text-style}]])]))
|
||||
:x-axis-label-text-style style/x-axis-label-text-style}]]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
(ns quo2.components.list-items.token-value.component-spec
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[test-helpers.component :as h]
|
||||
[quo2.components.list-items.token-value.view :as token-value]))
|
||||
|
||||
|
|
@ -18,34 +17,6 @@
|
|||
:fiat-change "€0.00"}}])
|
||||
(h/is-truthy (h/get-by-text "Status")))
|
||||
|
||||
(h/test "Pressed state"
|
||||
(h/render [token-value/view
|
||||
{:token :snt
|
||||
:state :pressed
|
||||
:status :empty
|
||||
:customization-color :blue
|
||||
:metrics? true
|
||||
:values {:crypto-value "0.00"
|
||||
:fiat-value "€0.00"
|
||||
:percentage-change "0.00"
|
||||
:fiat-change "€0.00"}}])
|
||||
(h/has-style (h/get-by-label-text :container)
|
||||
{:backgroundColor (colors/custom-color-by-theme :blue 50 50 5 5)}))
|
||||
|
||||
(h/test "Active state"
|
||||
(h/render [token-value/view
|
||||
{:token :snt
|
||||
:state :active
|
||||
:status :empty
|
||||
:customization-color :blue
|
||||
:metrics? true
|
||||
:values {:crypto-value "0.00"
|
||||
:fiat-value "€0.00"
|
||||
:percentage-change "0.00"
|
||||
:fiat-change "€0.00"}}])
|
||||
(h/has-style (h/get-by-label-text :container)
|
||||
{:backgroundColor (colors/custom-color-by-theme :blue 50 50 10 10)}))
|
||||
|
||||
(h/test "Status change"
|
||||
(h/render [token-value/view
|
||||
{:token :snt
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
|
||||
(defn container
|
||||
[color bg-opacity theme]
|
||||
{:width 359
|
||||
:height 56
|
||||
{:height 56
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 8
|
||||
:border-radius 12
|
||||
|
|
|
|||
|
|
@ -8,21 +8,31 @@
|
|||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.foundations.common :as common]
|
||||
[quo2.components.list-items.token-value.style :as style]))
|
||||
[quo2.components.list-items.token-value.style :as style]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- internal-view
|
||||
[{:keys [theme customization-color state status token metrics? values]}]
|
||||
(let [bg-opacity (case state
|
||||
[{:keys [theme customization-color status token metrics? values on-press]}]
|
||||
(let [state (reagent/atom :default)]
|
||||
(fn []
|
||||
(let [bg-opacity (case @state
|
||||
:active 10
|
||||
:pressed 5
|
||||
0)
|
||||
{:keys [crypto-value fiat-value percentage-change fiat-change]} values]
|
||||
[rn/view
|
||||
[rn/pressable
|
||||
{:style (style/container customization-color bg-opacity theme)
|
||||
:on-press-in #(reset! state :pressed)
|
||||
:on-press-out #(reset! state :default)
|
||||
:on-press (fn []
|
||||
(reset! state :active)
|
||||
(js/setTimeout #(reset! state :default) 300)
|
||||
on-press)
|
||||
:accessibility-label :container}
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
:align-items :center
|
||||
:flex 1}}
|
||||
[rn/image
|
||||
{:source (resources/tokens token)
|
||||
:style {:width 32
|
||||
|
|
@ -55,6 +65,6 @@
|
|||
{:style {:margin-left 4}
|
||||
:accessibility-label :arrow-icon}
|
||||
[icon/icon (if (= status :positive) :i/positive :i/negative)
|
||||
(style/arrow-icon status theme)]])])]]))
|
||||
(style/arrow-icon status theme)]])])]]))))
|
||||
|
||||
(def view (quo.theme/with-theme internal-view))
|
||||
|
|
|
|||
|
|
@ -107,7 +107,8 @@
|
|||
:icon true
|
||||
:accessibility-label :add-account
|
||||
:on-press on-press
|
||||
:customization-color customization-color}
|
||||
:customization-color customization-color
|
||||
:icon-only? true}
|
||||
:i/add]])
|
||||
|
||||
(defn- view-internal
|
||||
|
|
|
|||
|
|
@ -2,16 +2,15 @@
|
|||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def container-info
|
||||
{:flex 1
|
||||
:padding-horizontal 20
|
||||
{:padding-horizontal 20
|
||||
:padding-top 12
|
||||
:padding-bottom 32})
|
||||
:flex-grow 1
|
||||
:padding-bottom 32
|
||||
:max-height 98})
|
||||
|
||||
(def container-info-top
|
||||
{:flex-direction :row
|
||||
:flex 1
|
||||
:justify-content :space-between
|
||||
:align-items :center})
|
||||
:justify-content :space-between})
|
||||
|
||||
(def network-dropdown
|
||||
{:border-color colors/neutral-50
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(ns quo2.components.wallet.wallet-overview.view
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as quo2]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.components.wallet.wallet-overview.style :as style]
|
||||
|
|
@ -20,36 +20,40 @@
|
|||
bars))
|
||||
|
||||
;; temporary placeholder for network dropdown component
|
||||
(defn- network-dropdown
|
||||
(defn- network-dropdown-temporary
|
||||
[]
|
||||
[:<>
|
||||
[rn/view {:style style/network-dropdown}]])
|
||||
[rn/view
|
||||
{:style (merge style/network-dropdown
|
||||
{:justify-content :center
|
||||
:align-items :center})}
|
||||
[text/text "[WIP]"]]])
|
||||
|
||||
(defn- view-info-top
|
||||
[{:keys [state balance theme]}]
|
||||
[rn/view {:style style/container-info-top}
|
||||
(if (= state :loading)
|
||||
(loading-bars [{:width 201 :height 20 :margin 0}] theme)
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:size :heading-1
|
||||
:style (style/style-text-heading theme)}
|
||||
balance])
|
||||
[network-dropdown]])
|
||||
[network-dropdown-temporary]])
|
||||
|
||||
(defn- view-metrics
|
||||
[metrics currency-change percentage-change]
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (style/color-metrics metrics)}}
|
||||
percentage-change]
|
||||
[rn/view
|
||||
{:style (style/dot-separator metrics)}]
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (style/color-metrics metrics)
|
||||
|
|
@ -74,14 +78,14 @@
|
|||
{:width 10 :height 10 :margin 0}]
|
||||
theme)])
|
||||
(when (and (= state :default) (= time-frame :selected))
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (style/style-text-paragraph theme)}
|
||||
date])
|
||||
(when (and (= state :default) (= time-frame :custom))
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (style/style-text-paragraph theme)}
|
||||
|
|
@ -89,14 +93,14 @@
|
|||
[icons/icon :i/positive-right
|
||||
{:color (style/color-text-paragraph theme)
|
||||
:size 16}]
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (style/style-text-paragraph theme)}
|
||||
end-date]])
|
||||
(when (and (= state :default) (not (#{:none :selected} time-frame)))
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
[quo2/text
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (style/color-text-paragraph theme)
|
||||
|
|
@ -108,9 +112,8 @@
|
|||
(defn- view-internal
|
||||
[props]
|
||||
[rn/view {:style style/container-info}
|
||||
[rn/view {:style {:flex 1}}
|
||||
[view-info-top props]
|
||||
[view-info-bottom props]]])
|
||||
[view-info-bottom props]])
|
||||
|
||||
(def view
|
||||
(quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -6,4 +6,5 @@
|
|||
|
||||
(def token-label
|
||||
{:eth "Ethereum"
|
||||
:snt "Status"})
|
||||
:snt "Status"
|
||||
:dai "Dai"})
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
(get ui k))
|
||||
|
||||
(def tokens
|
||||
{:eth (js/require "../resources/images/tokens/mainnet/ETH.png")
|
||||
{:eth (js/require "../resources/images/tokens/mainnet/ETH-token.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")
|
||||
|
|
@ -25,6 +25,6 @@
|
|||
(get tokens k))
|
||||
|
||||
(def networks
|
||||
{:ethereum (js/require "../resources/images/tokens/mainnet/ETH.png")
|
||||
{:ethereum (js/require "../resources/images/tokens/mainnet/ETH-network.png")
|
||||
:optimism (js/require "../resources/images/tokens/mainnet/OP.png")
|
||||
:arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")})
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@
|
|||
:on-press #(rf/dispatch [:activity-center/open])})
|
||||
:i/activity-center]]]))
|
||||
|
||||
;; TODO: should be moved to quo2 https://github.com/status-im/status-mobile/issues/16964
|
||||
(defn top-nav
|
||||
"[top-nav props]
|
||||
props
|
||||
|
|
|
|||
|
|
@ -50,8 +50,9 @@
|
|||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view
|
||||
{:style {:flex 1}}
|
||||
[rn/view {:style {:min-height 300}} [preview/customizer state descriptor]]
|
||||
[rn/view
|
||||
{:style {:align-items :center
|
||||
:margin-top 50}} [quo/token-value @state]]]])))
|
||||
:margin-top 50}}
|
||||
[quo/token-value @state]]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(ns status-im2.contexts.quo-preview.wallet.wallet-overview
|
||||
(:require [quo2.core :as quo2]
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo2/wallet-overview @state]]]])))
|
||||
[quo/wallet-overview @state]]]])))
|
||||
|
||||
(defn preview-wallet-overview
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
(ns status-im2.contexts.wallet.home.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def tabs
|
||||
{:padding-horizontal 20
|
||||
:padding-top 8
|
||||
:padding-bottom 12})
|
||||
|
||||
(def empty-container
|
||||
{:justify-content :center
|
||||
:align-items :center
|
||||
:margin-bottom 44
|
||||
:flex 1})
|
||||
|
||||
(def image-placeholder
|
||||
{:width 80
|
||||
:height 80
|
||||
:background-color colors/danger})
|
||||
|
||||
(def accounts-list
|
||||
{:padding-horizontal 20
|
||||
:padding-top 32
|
||||
:padding-bottom 12
|
||||
:max-height 112})
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
(ns status-im2.contexts.wallet.home.temp
|
||||
(:require [quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn wallet-temporary-navigation
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}}
|
||||
[quo/text {} "TEMPORARY NAVIGATION"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
|
||||
"Navigate to Account"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
|
||||
"Create Account"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
|
||||
"Saved Addresses"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
|
||||
"Collectibles"]])
|
||||
|
||||
(def wallet-overview-state
|
||||
{:state :default
|
||||
:time-frame :none
|
||||
:metrics :none
|
||||
:balance "€0.00"
|
||||
:date "20 Nov 2023"
|
||||
:begin-date "16 May"
|
||||
:end-date "25 May"
|
||||
:currency-change "€0.00"
|
||||
:percentage-change "0.00%"})
|
||||
|
||||
(def account-cards
|
||||
[{:name "Account 1"
|
||||
:balance "€0.00"
|
||||
:percentage-value "€0.00"
|
||||
:customization-color :blue
|
||||
:type :empty
|
||||
:emoji "🍑"}
|
||||
{:customization-color :blue
|
||||
:on-press #(js/alert "Button pressed")
|
||||
:type :add-account}])
|
||||
|
||||
(def tokens
|
||||
[{:token :snt
|
||||
:state :default
|
||||
:status :empty
|
||||
:customization-color :blue
|
||||
:values {:crypto-value "0.00"
|
||||
:fiat-value "€0.00"
|
||||
:percentage-change "0.00"
|
||||
:fiat-change "€0.00"}}
|
||||
{:token :eth
|
||||
:state :default
|
||||
:status :empty
|
||||
:customization-color :blue
|
||||
:values {:crypto-value "0.00"
|
||||
:fiat-value "€0.00"
|
||||
:percentage-change "0.00"
|
||||
:fiat-change "€0.00"}}
|
||||
{:token :dai
|
||||
:state :default
|
||||
:status :empty
|
||||
:customization-color :blue
|
||||
:values {:crypto-value "0.00"
|
||||
:fiat-value "€0.00"
|
||||
:percentage-change "0.00"
|
||||
:fiat-change "€0.00"}}])
|
||||
|
|
@ -1,38 +1,63 @@
|
|||
(ns status-im2.contexts.wallet.home.view
|
||||
(:require [react-native.core :as rn]
|
||||
(:require
|
||||
[react-native.core :as rn]
|
||||
[quo2.core :as quo]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[utils.re-frame :as rf]))
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.common.home.view :as common.home]
|
||||
[status-im2.contexts.wallet.home.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.wallet.home.temp :as temp]))
|
||||
|
||||
(defn wallet-temporary-navigation
|
||||
(def tabs-data
|
||||
[{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
|
||||
{:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
|
||||
{:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}])
|
||||
|
||||
(defn collectibles
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}}
|
||||
[quo/text {} "TEMPORARY NAVIGATION"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
|
||||
"Navigate to Account"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
|
||||
"Create Account"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
|
||||
"Saved Addresses"]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
|
||||
"Collectibles"]])
|
||||
[rn/view {:style style/empty-container}
|
||||
[rn/view {:style style/image-placeholder}]
|
||||
[quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-collectibles)]
|
||||
[quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-collectibles-description)]])
|
||||
|
||||
(defn activity
|
||||
[]
|
||||
[rn/view {:style style/empty-container}
|
||||
[rn/view {:style style/image-placeholder}]
|
||||
[quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-activity)]
|
||||
[quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-activity-description)]])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [top (safe-area/get-top)]
|
||||
(let [top (safe-area/get-top)
|
||||
selected-tab (reagent/atom (:id (first tabs-data)))]
|
||||
(fn []
|
||||
[rn/view
|
||||
{:style {:margin-top top
|
||||
:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}}
|
||||
[quo/button
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:on-press (fn [] (rf/dispatch [:show-bottom-sheet {:content wallet-temporary-navigation}]))
|
||||
:container-style {:position :absolute
|
||||
:top 20
|
||||
:right 20}} :i/options]
|
||||
[quo/text {} "New Wallet Home"]]))
|
||||
:flex 1}}
|
||||
[common.home/top-nav {:type :grey}]
|
||||
[quo/wallet-overview temp/wallet-overview-state]
|
||||
[rn/pressable
|
||||
{:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])}
|
||||
[quo/wallet-graph {:time-frame :empty}]]
|
||||
[rn/flat-list
|
||||
{:style style/accounts-list
|
||||
:data temp/account-cards
|
||||
:horizontal true
|
||||
:separator [rn/view {:style {:width 12}}]
|
||||
:render-fn quo/account-card}]
|
||||
[quo/tabs
|
||||
{:style style/tabs
|
||||
:size 32
|
||||
:default-active @selected-tab
|
||||
:data tabs-data
|
||||
:on-change #(reset! selected-tab %)}]
|
||||
(case @selected-tab
|
||||
:assets [rn/flat-list
|
||||
{:render-fn quo/token-value
|
||||
:data temp/tokens
|
||||
:content-container-style {:padding-horizontal 8}}]
|
||||
:collectibles [collectibles]
|
||||
[activity])])))
|
||||
|
|
|
|||
|
|
@ -1021,7 +1021,7 @@
|
|||
"new-public-group-chat": "Join public chat",
|
||||
"next": "Next",
|
||||
"no": "No",
|
||||
"no-collectibles": "No collectibles available",
|
||||
"no-collectibles": "No collectibles",
|
||||
"no-keycard-applet-on-card": "No Keycard applet on card",
|
||||
"no-pairing-slots-available": "This card is already paired to 5 devices and cannot pair to this one. Please use one of the paired devices, log in with this card and free up pairing slots on the card",
|
||||
"no-result": "No results",
|
||||
|
|
@ -2274,5 +2274,10 @@
|
|||
"one-year": "1 year",
|
||||
"retake": "Retake",
|
||||
"use-photo": "Use Photo",
|
||||
"photo-caps": "PHOTO"
|
||||
"photo-caps": "PHOTO",
|
||||
"assets": "Assets",
|
||||
"collectibles": "Collectibles",
|
||||
"no-collectibles-description": "Don't be a bored ape",
|
||||
"no-activity": "No activity",
|
||||
"no-activity-description": "C'mon do something..."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue