Feat: wallet create account screen UI (#17118)
* feat: wallet create account
This commit is contained in:
parent
a47998a7a0
commit
a4717ae5d0
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
|
@ -26,7 +26,8 @@
|
|||
track-icon
|
||||
disabled?
|
||||
customization-color
|
||||
size]}]
|
||||
size
|
||||
container-style]}]
|
||||
(let [x-pos (reanimated/use-shared-value 0)
|
||||
dimensions (partial utils/get-dimensions
|
||||
(or @track-width constants/default-width)
|
||||
|
@ -49,7 +50,8 @@
|
|||
sliding-complete?)}
|
||||
[reanimated/view
|
||||
{:test-ID :slide-button-track
|
||||
:style (style/track disabled? customization-color (dimensions :track-height))
|
||||
:style (merge (style/track disabled? customization-color (dimensions :track-height))
|
||||
container-style)
|
||||
:on-layout (when-not (some? @track-width)
|
||||
on-track-layout)}
|
||||
[reanimated/view {:style (style/track-cover interpolate-track)}
|
||||
|
|
|
@ -2,8 +2,7 @@
|
|||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def color-picker-container
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
{:flex-direction :row
|
||||
:flex-wrap :wrap
|
||||
:justify-content :space-between})
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
[react-native.linear-gradient :as linear-gradient]))
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [customization-color] :or {customization-color :blue}}]
|
||||
[{:keys [customization-color container-style] :or {customization-color :blue}}]
|
||||
(let [color-top (colors/custom-color customization-color 50 20)
|
||||
color-bottom (colors/custom-color customization-color 50 0)]
|
||||
[linear-gradient/linear-gradient
|
||||
|
@ -13,6 +13,6 @@
|
|||
:colors [color-top color-bottom]
|
||||
:start {:x 0 :y 0}
|
||||
:end {:x 0 :y 1}
|
||||
:style style/root-container}]))
|
||||
:style (merge style/root-container container-style)}]))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
@ -40,6 +40,7 @@
|
|||
(defn title-text
|
||||
[disabled? blur? theme]
|
||||
{:text-align-vertical :bottom
|
||||
:padding 0
|
||||
:color (if disabled?
|
||||
(get-disabled-color blur? theme)
|
||||
(colors/theme-colors colors/neutral-100 colors/white theme))})
|
||||
|
@ -50,7 +51,6 @@
|
|||
|
||||
(def container
|
||||
{:flex-direction :row
|
||||
:flex 1
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
|
|
|
@ -19,7 +19,8 @@
|
|||
placeholder
|
||||
max-length
|
||||
default-value
|
||||
theme]
|
||||
theme
|
||||
container-style]
|
||||
:or {max-length 0
|
||||
auto-focus false
|
||||
default-value ""}}]
|
||||
|
@ -31,7 +32,7 @@
|
|||
(on-change-text v)))]
|
||||
(fn [{:keys [customization-color disabled?]}]
|
||||
[rn/view
|
||||
{:style style/container}
|
||||
{:style (merge style/container container-style)}
|
||||
[rn/view {:style style/text-input-container}
|
||||
[rn/text-input
|
||||
{:style
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
(ns status-im2.contexts.wallet.common.temp
|
||||
(:require [quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[utils.re-frame :as rf]))
|
||||
(:require
|
||||
[quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.wallet.common.utils :as utils]))
|
||||
|
||||
(defn wallet-temporary-navigation
|
||||
[]
|
||||
|
@ -30,18 +33,6 @@
|
|||
: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 "🍑"
|
||||
:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
|
||||
{:customization-color :blue
|
||||
:on-press #(js/alert "Button pressed")
|
||||
:type :add-account}])
|
||||
|
||||
(def tokens
|
||||
[{:token :snt
|
||||
:state :default
|
||||
|
@ -73,3 +64,17 @@
|
|||
:account-name "Account 1"
|
||||
:account :default
|
||||
:customization-color :blue})
|
||||
|
||||
(defn keypair-string
|
||||
[full-name]
|
||||
(let [first-name (utils/get-first-name full-name)]
|
||||
(i18n/label :t/keypair-title {:name first-name})))
|
||||
|
||||
(defn create-account-state
|
||||
[name]
|
||||
[{:title (keypair-string name)
|
||||
:button-props {:title (i18n/label :t/edit)}
|
||||
:left-icon :i/placeholder}
|
||||
{:title (i18n/label :t/derivation-path)
|
||||
:button-props {:title (i18n/label :t/edit)}
|
||||
:left-icon :i/derivated-path}])
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
(ns status-im2.contexts.wallet.common.utils
|
||||
(:require [clojure.string :as string]))
|
||||
|
||||
(defn get-first-name
|
||||
[full-name]
|
||||
(first (string/split full-name #" ")))
|
|
@ -0,0 +1,47 @@
|
|||
(ns status-im2.contexts.wallet.create-account.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn gradient-cover-container
|
||||
[top]
|
||||
{:position :absolute
|
||||
:top (- top)
|
||||
:left 0
|
||||
:right 0
|
||||
:z-index -1})
|
||||
|
||||
(def account-avatar-container
|
||||
{:padding-horizontal 20
|
||||
:padding-top 12})
|
||||
|
||||
(def reaction-button-container
|
||||
{:position :absolute
|
||||
:bottom 0
|
||||
:left 80})
|
||||
|
||||
(def title-input-container
|
||||
{:padding-horizontal 20
|
||||
:padding-top 12
|
||||
:padding-bottom 16})
|
||||
|
||||
(def color-picker-container
|
||||
{:padding-vertical 12
|
||||
:padding-horizontal 20})
|
||||
|
||||
(defn color-label
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:padding-bottom 4})
|
||||
|
||||
(defn divider-line
|
||||
[theme]
|
||||
{:border-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
|
||||
:padding-top 12
|
||||
:padding-bottom 8
|
||||
:border-bottom-width 1})
|
||||
|
||||
(defn slide-button-container
|
||||
[bottom]
|
||||
{:position :absolute
|
||||
:bottom (+ bottom 12)
|
||||
:left 20
|
||||
:right 20})
|
|
@ -1,16 +1,81 @@
|
|||
(ns status-im2.contexts.wallet.create-account.view
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.core :as quo]
|
||||
[re-frame.core :as rf]))
|
||||
(:require
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.core :as quo]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.wallet.common.temp :as temp]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.contexts.wallet.create-account.style :as style]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn view
|
||||
(def diamond-emoji "\uD83D\uDC8E")
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center}}
|
||||
(let [top (safe-area/get-top)
|
||||
bottom (safe-area/get-bottom)
|
||||
account-color (reagent/atom :blue)
|
||||
emoji (reagent/atom diamond-emoji)
|
||||
{:keys [public-key]} (rf/sub [:profile/profile])
|
||||
display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))]
|
||||
(fn [{:keys [theme]}]
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:margin-top top}}
|
||||
[quo/page-nav
|
||||
{:type :no-title
|
||||
:background :blur
|
||||
:right-side [{:icon-name :i/info}]
|
||||
:icon-name :i/close
|
||||
:on-press #(rf/dispatch [:navigate-back])}]
|
||||
[quo/gradient-cover
|
||||
{:customization-color @account-color
|
||||
:container-style (style/gradient-cover-container top)}]
|
||||
[rn/view
|
||||
{:style style/account-avatar-container}
|
||||
[quo/account-avatar
|
||||
{:customization-color @account-color
|
||||
:size 80
|
||||
:emoji @emoji
|
||||
:type :default}]
|
||||
[quo/button
|
||||
{:size 32
|
||||
:type :grey
|
||||
:background :photo
|
||||
:icon-only? true
|
||||
:on-press #(js/alert "pressed")
|
||||
:container-style style/reaction-button-container} :i/reaction]]
|
||||
[quo/title-input
|
||||
{:color :red
|
||||
:placeholder "Type something here"
|
||||
:max-length 24
|
||||
:blur? true
|
||||
:disabled? false
|
||||
:default-value "Account 2"
|
||||
:container-style style/title-input-container}]
|
||||
[rn/view
|
||||
{:style style/color-picker-container}
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/color-label theme)}
|
||||
(i18n/label :t/colour)]
|
||||
[quo/color-picker
|
||||
{:selected @account-color
|
||||
:on-change #(reset! account-color %)}]]
|
||||
[rn/view {:style (style/divider-line theme)}]
|
||||
[quo/category
|
||||
{:list-type :settings
|
||||
:label (i18n/label :t/origin)
|
||||
:data (temp/create-account-state display-name)}]
|
||||
[quo/slide-button
|
||||
{:track-text (i18n/label :t/slide-create)
|
||||
:track-icon :face-id
|
||||
:customization-color @account-color
|
||||
:on-complete (fn []
|
||||
(js/alert "Functionality not implemented"))
|
||||
:container-style (style/slide-button-container bottom)}]])))
|
||||
|
||||
[quo/text {} "CREATE ACCOUNT"]
|
||||
[quo/divider-label]
|
||||
[quo/button {:on-press #(rf/dispatch [:navigate-back])}
|
||||
"NAVIGATE BACK"]])
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
@ -10,6 +10,33 @@
|
|||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.wallet.common.temp :as temp]))
|
||||
|
||||
(defn new-account
|
||||
[]
|
||||
[quo/action-drawer
|
||||
[[{:icon :i/add
|
||||
:accessibility-label :start-a-new-chat
|
||||
:label (i18n/label :t/add-account)
|
||||
:sub-label (i18n/label :t/add-account-description)
|
||||
:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
|
||||
{:icon :i/reveal
|
||||
:accessibility-label :add-a-contact
|
||||
:label (i18n/label :t/add-address)
|
||||
:sub-label (i18n/label :t/add-address-description)
|
||||
:add-divider? true}]]])
|
||||
|
||||
(def account-cards
|
||||
[{:name "Account 1"
|
||||
:balance "€0.00"
|
||||
:percentage-value "€0.00"
|
||||
:customization-color :blue
|
||||
:type :empty
|
||||
:emoji "🍑"
|
||||
:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
|
||||
{:customization-color :blue
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet {:content new-account}])
|
||||
:type :add-account}])
|
||||
|
||||
(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}
|
||||
|
@ -30,7 +57,7 @@
|
|||
[quo/wallet-graph {:time-frame :empty}]]
|
||||
[rn/flat-list
|
||||
{:style style/accounts-list
|
||||
:data temp/account-cards
|
||||
:data account-cards
|
||||
:horizontal true
|
||||
:separator [rn/view {:style {:width 12}}]
|
||||
:render-fn quo/account-card}]
|
||||
|
|
|
@ -25,8 +25,6 @@
|
|||
"add": "Add",
|
||||
"added": "added",
|
||||
"add-a-watch-account": "Add a watch-only address",
|
||||
"add-account": "Add an account",
|
||||
"add-account-description": "You can import any type of Ethereum account to add it to your Status wallet",
|
||||
"add-account-incorrect-password": "Password seems to be incorrect. Enter the password you use to unlock the app.",
|
||||
"add-an-account": "Add an account",
|
||||
"add-bootnode": "Add bootnode",
|
||||
|
@ -2289,5 +2287,12 @@
|
|||
"about": "About",
|
||||
"no-permissions": "No permissions",
|
||||
"no-dapps": "No connected dApps",
|
||||
"days": "Days"
|
||||
"days": "Days",
|
||||
"add-account": "Add account",
|
||||
"add-account-description": "Create new or import existing account",
|
||||
"add-address": "Add address to watch",
|
||||
"add-address-description": "Watch a public address or ENS name",
|
||||
"colour": "Colour",
|
||||
"origin": "Origin",
|
||||
"slide-create": "Slide to create account"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue