diff --git a/resources/images/icons2/20x20/derivated-path@2x.png b/resources/images/icons2/20x20/derivated-path@2x.png new file mode 100644 index 0000000000..2f6ba45fd1 Binary files /dev/null and b/resources/images/icons2/20x20/derivated-path@2x.png differ diff --git a/resources/images/icons2/20x20/derivated-path@3x.png b/resources/images/icons2/20x20/derivated-path@3x.png new file mode 100644 index 0000000000..e98ff3ee23 Binary files /dev/null and b/resources/images/icons2/20x20/derivated-path@3x.png differ diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs index 37b5f8f1d7..58cba2cf57 100644 --- a/src/quo2/components/buttons/button/view.cljs +++ b/src/quo2/components/buttons/button/view.cljs @@ -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]" diff --git a/src/quo2/components/buttons/slide_button/view.cljs b/src/quo2/components/buttons/slide_button/view.cljs index 8417ab5636..c8146cb163 100644 --- a/src/quo2/components/buttons/slide_button/view.cljs +++ b/src/quo2/components/buttons/slide_button/view.cljs @@ -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)} diff --git a/src/quo2/components/colors/color_picker/style.cljs b/src/quo2/components/colors/color_picker/style.cljs index 3df1061fd3..e2fe145666 100644 --- a/src/quo2/components/colors/color_picker/style.cljs +++ b/src/quo2/components/colors/color_picker/style.cljs @@ -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}) diff --git a/src/quo2/components/gradient/gradient_cover/view.cljs b/src/quo2/components/gradient/gradient_cover/view.cljs index 1fba46c0af..488920debf 100644 --- a/src/quo2/components/gradient/gradient_cover/view.cljs +++ b/src/quo2/components/gradient/gradient_cover/view.cljs @@ -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)) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs index 92b9d8608a..143d69d26c 100644 --- a/src/quo2/components/inputs/title_input/style.cljs +++ b/src/quo2/components/inputs/title_input/style.cljs @@ -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}) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index ff11611ee3..301f9bc1f6 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -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 diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index efe9d11438..2f45b4cebf 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -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}]) diff --git a/src/status_im2/contexts/wallet/common/utils.cljs b/src/status_im2/contexts/wallet/common/utils.cljs new file mode 100644 index 0000000000..80506a66aa --- /dev/null +++ b/src/status_im2/contexts/wallet/common/utils.cljs @@ -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 #" "))) diff --git a/src/status_im2/contexts/wallet/create_account/style.cljs b/src/status_im2/contexts/wallet/create_account/style.cljs new file mode 100644 index 0000000000..4f6a37c02d --- /dev/null +++ b/src/status_im2/contexts/wallet/create_account/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 588deeb7fd..08634f8756 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -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)) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 51ed42fd4f..8149ae8f61 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -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}] diff --git a/translations/en.json b/translations/en.json index b56ea26461..fe59cdae76 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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" }