Feat: wallet create account screen UI (#17118)

* feat: wallet create account
This commit is contained in:
Omar Basem 2023-08-29 21:06:36 +04:00 committed by GitHub
parent a47998a7a0
commit a4717ae5d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 198 additions and 41 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -24,7 +24,7 @@
:icon-top :icon-keyword
:icon-left :icon-keyword
:icon-right :icon-keyword}
:customization-color keyword or hexstring
:customization-color keyword or hexstring
:theme :light/:dark
only icon
[button {:icon-only? true} :i/close-circle]"

View File

@ -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)}

View File

@ -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})

View File

@ -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))

View File

@ -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})

View File

@ -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

View File

@ -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}])

View File

@ -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 #" ")))

View File

@ -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})

View File

@ -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))

View File

@ -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}]

View File

@ -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"
}