status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Initial Commit for first send screen: 

- Update toolbar text
- Add frame for camera/qr
- Add button for choose contacts
- Add button for address from clipboard
- Add button for browse photos

Set recipient from clipboard.

Added functionality and event handling necessary to set recipient
from clipboard.

Add choose-recipient event to assoc into the database

Add QR code scanning to first screen

Add vector icons for copy and select image

Fix svg

Fix rebase, localize labels

Add checkmark icon (this is a placeholder, current svg won't render)

Remove leak from develop

Vertical alignment fixes

Vertically align maps in view

Address review comments

Fix rebase reference problems/styling issues

Small style tweaks, fix icon

Fix small design issues

Indentation fixes

Address review points

Fix indentation

Prevent permissions request on ios

On ios, a permissions request results in a null reference error,
do a platform check before performing a permissions request.

Fix compile error
This commit is contained in:
angusiguess 2017-09-06 16:55:49 -04:00 committed by Roman Volosovskyi
parent d9db548e57
commit 3b4d140ef6
16 changed files with 210 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/icons/copy_from.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill-rule="evenodd">
<path fill="" d="M12.9523459 9.3457654C12.9523459 9.3457654 15.37242 11.8333296 15.37242 11.8333296C15.7392617 12.2104016 16.3466826 12.2140899 16.7191152 11.831271C17.0941444 11.4457832 17.0924445 10.8287017 16.7211179 10.4470197C16.7211179 10.4470197 12.6710186 6.2839728 12.6710186 6.2839728C12.4879266 6.0957748 12.2449051 6.0005883 12.0010811 6.000045C11.7540421 5.9976158 11.5116592 6.0934713 11.3263261 6.2839728C11.3263261 6.2839728 7.27622683 10.4470197 7.27622683 10.4470197C6.90938515 10.8240917 6.9057969 11.4484521 7.27822956 11.831271C7.65325874 12.2167589 8.2535982 12.2150116 8.62492479 11.8333296C8.62492479 11.8333296 11.0449989 9.3457654 11.0449989 9.3457654C11.0449989 9.3457654 11.0449989 17.02424249 11.0449989 17.02424249C11.0449989 17.55332626 11.4719731 18.0 11.9986724 18.0C12.5290437 18.0 12.9523459 17.56313848 12.9523459 17.02424249C12.9523459 17.02424249 12.9523459 9.3457654 12.9523459 9.3457654C12.9523459 9.3457654 12.9523459 9.3457654 12.9523459 9.3457654" />
<path fill="" d="M2.0 4.0C2.0 4.0 22.0 4.0 22.0 4.0C22.5522847 4.0 23.0 3.55228475 23.0 3.0C23.0 2.44771525 22.5522847 2.0 22.0 2.0C22.0 2.0 2.0 2.0 2.0 2.0C1.44771525 2.0 1.0 2.44771525 1.0 3.0C1.0 3.55228475 1.44771525 4.0 2.0 4.0C2.0 4.0 2.0 4.0 2.0 4.0M2.0 22.0C2.0 22.0 22.0 22.0 22.0 22.0C22.5522847 22.0 23.0 21.5522847 23.0 21.0C23.0 20.4477153 22.5522847 20.0 22.0 20.0C22.0 20.0 2.0 20.0 2.0 20.0C1.44771525 20.0 1.0 20.4477153 1.0 21.0C1.0 21.5522847 1.44771525 22.0 2.0 22.0C2.0 22.0 2.0 22.0 2.0 22.0"
fill-rule="nonzero" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
resources/icons/flash_active.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="" d="M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon">
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 843 B

4
src/status_im/components/icons/vector_icons.cljs
View File

@ -39,10 +39,12 @@
:icons/address (slurp-svg "./resources/icons/address.svg")
:icons/arrow-left (slurp-svg "./resources/icons/arrow_left.svg")
:icons/arrow-right (slurp-svg "./resources/icons/arrow_right.svg")
:icons/flash-active (slurp-svg "./resources/icons/flash_active.svg")
:icons/attach (slurp-svg "./resources/icons/attach.svg")
:icons/back (slurp-svg "./resources/icons/back.svg")
:icons/browse (slurp-svg "./resources/icons/browse.svg")
:icons/close (slurp-svg "./resources/icons/close.svg")
:icons/copy-from (slurp-svg "./resources/icons/copy_from.svg")
:icons/dots-horizontal (slurp-svg "./resources/icons/dots_horizontal.svg")
:icons/dots-vertical (slurp-svg "./resources/icons/dots_vertical.svg")
:icons/exclamation_mark (slurp-svg "./resources/icons/exclamation_mark.svg")
@ -100,4 +102,4 @@
color
:else
styles/icon-dark-color))))
(throw (js/Error. (str "Unknown icon: " name))))]))
(throw (js/Error. (str "Unknown icon: " name))))]))

5
src/status_im/components/react.cljs
View File

@ -155,6 +155,11 @@
(defn copy-to-clipboard [text]
(.setString (.-Clipboard rn-dependencies/react-native) text))
(defn get-from-clipboard [clbk]
(let [clipboard-contents (.getString (.-Clipboard rn-dependencies/react-native))]
(.then clipboard-contents #(clbk %))))
;; Emoji
(def emoji-picker-class rn-dependencies/emoji-picker)

1
src/status_im/components/styles.cljs
View File

@ -11,6 +11,7 @@
(def color-black "#000000")
(def color-purple "#a187d5")
(def color-gray-transparent-light "rgba(0, 0, 0, 0.1)")
(def color-gray-transparent-medium-light "rgba(0, 0, 0, 0.2)")
(def color-gray-transparent "rgba(0, 0, 0, 0.4)")
(def color-gray4-transparent "rgba(147, 155, 161, 0.2)")
(def color-gray10-transparent "rgba(184, 193, 199, 0.5)")

6
src/status_im/components/toolbar_new/styles.cljs
View File

@ -30,6 +30,11 @@
:android {:padding-left 18}
:ios {:align-items :center}})
(def toolbar-title-container
{:flex 1
:flex-direction :column
:margin-left 6})
(defstyle toolbar-title-text
{:color styles/text1-color
:letter-spacing -0.2
@ -101,4 +106,3 @@
(def toolbar-text-action-disabled {:color styles/color-gray7})
(def item-text-white-background {:color styles/color-blue4})

7
src/status_im/components/toolbar_new/view.cljs
View File

@ -48,10 +48,13 @@
(defn content-title
([title] (content-title nil title))
([title-style title]
[content-wrapper
(content-title title-style title nil nil))
([title-style title subtitle-style subtitle]
[rn/view {:style tst/toolbar-title-container}
[rn/text {:style (merge tst/toolbar-title-text title-style)
:font :toolbar-title}
title]]))
title]
(when subtitle [rn/text {:style subtitle-style} subtitle])]))
;; Actions

9
src/status_im/translations/en.cljs
View File

@ -374,6 +374,13 @@
:transactions-filter-tokens "Tokens"
:transactions-filter-type "Type"
:transactions-filter-select-all "Select all"
;; Wallet Send
:wallet-send-transaction "Send Transaction"
:wallet-send-step-one "Step 1 of 3"
:wallet-choose-recipient "Choose Recipient"
:wallet-choose-from-contacts "Choose From Contacts"
:wallet-address-from-clipboard "Use Address From Clipboard"
:wallet-browse-photos "Browse Photos"
;network settings
:new-network "New network"
@ -393,4 +400,4 @@
:remove-network "Remove network"
:network-settings "Network settings"
:edit-network-warning "Be careful, editing the network data may disable this network for you"
:connecting-requires-login "Connecting to another network requires login"})
:connecting-requires-login "Connecting to another network requires login"})

1
src/status_im/ui/screens/events.cljs
View File

@ -17,6 +17,7 @@
status-im.ui.screens.profile.events
status-im.ui.screens.qr-scanner.events
status-im.ui.screens.wallet.events
status-im.ui.screens.wallet.send.events
[re-frame.core :refer [dispatch reg-fx reg-cofx]]
[status-im.native-module.core :as status]
[status-im.components.permissions :as permissions]

1
src/status_im/ui/screens/subs.cljs
View File

@ -10,6 +10,7 @@
status-im.ui.screens.profile.subs
status-im.ui.screens.wallet.subs
status-im.ui.screens.wallet.transactions.subs
status-im.ui.screens.wallet.send.subs
status-im.ui.screens.network-settings.subs
status-im.transactions.subs
status-im.bots.subs))

4
src/status_im/ui/screens/wallet/db.cljs
View File

@ -4,6 +4,10 @@
;; (angusiguess) If we add more error types we can treat them as 'one-of' the following
(spec/def :wallet/error #{:error})
(spec/def :wallet.send/recipient string?)
(spec/def :wallet/send (spec/keys :req-un [:wallet.send/recipient]))
(spec/def :wallet/wallet (spec/keys :opt [:wallet/error]))
;; Placeholder namespace for wallet specs, which are a WIP depending on data

12
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -12,7 +12,9 @@
[status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.utils.config :as config]
[status-im.utils.utils :as utils]
[status-im.utils.platform :as platform]
[status-im.ui.screens.wallet.main.styles :as wallet.styles]
[status-im.ui.screens.wallet.views :as wallet.views]))
@ -69,9 +71,13 @@
[change-display change]]
[btn/buttons {:style wallet.styles/buttons :button-text-style wallet.styles/main-button-text}
[{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented!}
{:text (i18n/label :t/wallet-request)
:on-press show-not-implemented!}
:on-press #(do (rf/dispatch [:navigate-to :wallet-send-transaction])
(when platform/android?
(rf/dispatch [:request-permissions [:camera]])))
:disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-request)
:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
:disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-exchange)
:disabled? true}]]]])

8
src/status_im/ui/screens/wallet/send/events.cljs Normal file
View File

@ -0,0 +1,8 @@
(ns status-im.ui.screens.wallet.send.events
(:require [re-frame.core :as re-frame]
[status-im.ui.screens.wallet.db :as wallet.db]))
(re-frame/reg-event-db
:choose-recipient
(fn [db [_ recipient]]
(assoc-in db [:wallet :send :recipient] recipient)))

80
src/status_im/ui/screens/wallet/send/styles.cljs
View File

@ -4,16 +4,16 @@
(def wallet-container
{:flex 1
:background-color styles/color-white})
:background-color styles/color-blue2})
(def wallet-modal-container
{:flex 1
:background-color styles/color-blue4})
(defstyle toolbar
{:ios {:background-color styles/color-blue4}
:android {:background-color styles/color-blue5
:elevation 0}})
(def toolbar
{:background-color styles/color-blue5
:elevation 0
:padding-bottom 10})
(def toolbar-title-container
{:flex 1
@ -30,4 +30,72 @@
:height 24})
(def toolbar-title-icon
(merge toolbar-icon {:opacity 0.4}))
(merge toolbar-icon {:opacity 0.4}))
(def toolbar-buttons-container
{:flex-direction :row
:flex-shrink 1
:justify-content :space-between
:width 68
:margin-right 12})
(def choose-recipient-container
{:flex-direction :row
:padding-top 20
:padding-bottom 20
:justify-content :center})
(def choose-recipient-label
{:color :white})
(def recipient-buttons
{:flex-direction :column
:margin-horizontal 28
:margin-vertical 10
:border-radius 5
:background-color styles/color-blue5})
(def recipient-icon {:margin-right 20})
(def recipient-button
{:flex-direction :row
:justify-content :space-between
:margin-vertical 10
:margin-left 20})
(def recipient-button-text
{:color :white
:font-size 17})
(defn recipient-touchable [divider?]
(cond-> {:border-color styles/color-gray-transparent-medium-light}
divider? (assoc :border-bottom-width 1)))
(def qr-container
{:flex 1
:margin-horizontal 32})
(def preview
{:flex 1
:justify-content :flex-end
:align-items :center})
(defn outer-bezel [{:keys [height width]}]
{:position :absolute
:top -10
:left -10
:border-radius 20
:border-color styles/color-blue2
:border-width 20
:height (+ height 20)
:width (+ width 20)})
(defn inner-bezel [{:keys [height width]}]
{:top 5
:left 5
:position :absolute
:border-radius 20
:border-color :white
:border-width 5
:height (- height 10)
:width (- width 10)})

6
src/status_im/ui/screens/wallet/send/subs.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns status-im.ui.screens.wallet.send.subs
(:require [re-frame.core :as re-frame]))
(re-frame/reg-sub :camera-dimensions
(fn [db]
(get-in db [:wallet :camera-dimensions])))

79
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -1,17 +1,76 @@
(ns status-im.ui.screens.wallet.send.views
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :as rn]
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as str]
[status-im.components.react :as react]
[re-frame.core :as re-frame]
[status-im.components.button.view :as button]
[status-im.components.styles :as styles]
[status-im.components.status-bar :as status-bar]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.ui.screens.wallet.send.styles :as cst]))
[status-im.components.camera :as camera]
[status-im.utils.utils :as utils]
[status-im.i18n :as i18n]
[status-im.ui.screens.wallet.send.styles :as send.styles]
[status-im.components.icons.vector-icons :as vector-icons]
[reagent.core :as r]))
(defn- show-not-implemented! []
(utils/show-popup "TODO" "Not implemented yet!"))
(defn toolbar-view []
[toolbar/toolbar2 {:style cst/toolbar}
[toolbar/nav-button (act/back-white act/default-handler)]
[toolbar/content-title {:color :white} "Send Transaction"]])
[toolbar/toolbar2 {:style send.styles/toolbar}
[toolbar/nav-button (act/close-white act/default-handler)]
[toolbar/content-title {:color :white} (i18n/label :t/wallet-send-transaction)
{:color styles/color-light-blue} (i18n/label :t/wallet-send-step-one)]
[toolbar/actions [{:icon :icons/flash-active
:icon-opts {:color :white}
:handler show-not-implemented!}]]])
(defn recipient-buttons []
[react/view {:style send.styles/recipient-buttons}
[react/touchable-highlight {:style (send.styles/recipient-touchable true)}
[react/view {:style send.styles/recipient-button}
[react/text {:style send.styles/recipient-button-text}
(i18n/label :t/wallet-choose-from-contacts)]
[vector-icons/icon :icons/contacts {:color :white
:container-style send.styles/recipient-icon}]]]
[react/touchable-highlight {:style (send.styles/recipient-touchable true)
:on-press #(react/get-from-clipboard
(fn [clipboard]
(re-frame/dispatch [:choose-recipient clipboard])))}
[react/view {:style send.styles/recipient-button}
[react/text {:style send.styles/recipient-button-text}
(i18n/label :t/wallet-address-from-clipboard)]
[vector-icons/icon :icons/copy-from {:color :white
:container-style send.styles/recipient-icon}]]]
[react/touchable-highlight {:style (send.styles/recipient-touchable false)}
[react/view {:style send.styles/recipient-button}
[react/text {:style send.styles/recipient-button-text}
(i18n/label :t/wallet-browse-photos)]
[vector-icons/icon :icons/browse {:color :white
:container-style send.styles/recipient-icon}]]]])
(defview send-transaction []
[]
[rn/view {:style cst/wallet-container}
[toolbar-view]
[rn/text "Nothing here yet!"]])
(letsubs [camera-dimensions [:camera-dimensions]]
[react/view {:style send.styles/wallet-container}
[status-bar/status-bar {:type :wallet}]
[toolbar-view]
[react/view {:style send.styles/choose-recipient-container}
[react/text {:style send.styles/choose-recipient-label} (i18n/label :t/wallet-choose-recipient)]]
[react/view {:style send.styles/qr-container
:on-layout #(let [layout (.. % -nativeEvent -layout)]
(re-frame/dispatch [:set-in [:wallet :camera-dimensions]
{:width (.-width layout)
:height (.-height layout)}]))}
[camera/camera {:style send.styles/preview
:aspect :fill
:captureAudio false
:onBarCodeRead (fn [code]
(let [data (-> code
.-data
(str/replace #"ethereum:" ""))]
(re-frame/dispatch [:choose-recipient data])))}]
[react/view {:style (send.styles/outer-bezel camera-dimensions)}]
[react/view {:style (send.styles/inner-bezel camera-dimensions)}]]
[recipient-buttons]]))