First implementation of the unsigned transactions list

src/status_im/components/button/styles.cljs

@@ -0,0 +1,57 @@
+(ns status-im.components.button.styles
+  (:require [status-im.components.styles :as st]))
+
+(def border-color st/color-white-transparent-2)
+
+(def button-borders
+  {:background-color border-color
+   :margin           5
+   :border-radius    8})
+
+(def action-buttons-container
+  (merge
+    button-borders
+    {:flex-direction :row}))
+
+(def action-button
+  {:flex-basis         0
+   :flex               1
+   :align-items        :center})
+
+(def action-button-center
+  (merge action-button
+         {:border-color       border-color
+          :border-left-width  1
+          :border-right-width 1}))
+
+(def action-button-text
+  {:font-size          18
+   :font-weight        "normal"
+   :color              st/color-white
+   :padding-horizontal 16
+   :padding-vertical   9})
+
+(def primary-button
+  (merge
+    action-button
+    button-borders
+    {:background-color st/color-blue4}))
+
+(def primary-button-text
+  (merge
+    action-button-text
+    {:color st/color-white}))
+
+(def secondary-button
+  (merge
+    action-button
+    button-borders
+    {:background-color st/color-blue4-transparent}))
+
+(def secondary-button-text
+  (merge
+    action-button-text
+    {:color   st/color-blue4}))
+
+(def action-button-text-disabled
+  (merge action-button-text {:opacity 0.4}))

src/status_im/components/button/view.cljs

@@ -0,0 +1,33 @@
+(ns status-im.components.button.view
+  (:require [cljs.spec.alpha :as s]
+            [status-im.components.button.styles :as cst]
+            [status-im.components.react :as rn]))
+
+(defn button [{:keys [on-press style text text-style disabled?]
+               :or {style cst/action-button}}]
+  [rn/touchable-highlight (when (and on-press (not disabled?)) {:on-press on-press})
+   [rn/view {:style style}
+    [rn/text {:style      (or text-style
+                              (if disabled? cst/action-button-text-disabled cst/action-button-text))
+              :font       :medium
+              :uppercase? false}
+     text]]])
+
+(defn primary-button [m]
+  (button (merge {:style cst/primary-button :text-style cst/primary-button-text} m)))
+
+(defn secondary-button [m]
+  (button (merge {:style cst/secondary-button :text-style cst/secondary-button-text} m)))
+
+(defn- first-or-last [i v] (or (zero? i) (= i (dec (count v)))))
+
+(defn- button-style [i v] (if (first-or-last i v) cst/action-button cst/action-button-center))
+
+(defn buttons
+  ([v] (buttons {} v))
+  ([m v]
+   [rn/view {:style (merge cst/action-buttons-container m)}
+    (doall
+      (map-indexed
+        (fn [i m] ^{:key i} [button (merge m {:style (button-style i v)})])
+        v))]))

src/status_im/components/list/styles.cljs

@@ -0,0 +1,34 @@
+(ns status-im.components.list.styles
+  (:require [status-im.components.styles :as st]
+            [status-im.utils.platform :as p]))
+
+(def item
+  {:flex            1
+   :flex-direction  :row})
+
+(def item-text-view
+  {:flex            1
+   :flex-direction  :column})
+
+(def primary-text
+  {:font-size  20
+   :color      st/color-black
+   :margin-top 13})
+
+(def secondary-text
+  {:font-size  16
+   :color      st/color-gray4
+   :margin-top 6})
+
+(def item-icon
+  {:width  40
+   :height 40
+   :margin 14})
+
+(def primary-action item-icon)
+
+(def secondary-action item-icon)
+
+(def action-buttons
+  {:flex            1
+   :flex-direction  :row})

src/status_im/components/list/views.cljs

@@ -0,0 +1,23 @@
+(ns status-im.components.list.views
+  (:require [status-im.components.react :as rn]
+            [reagent.core :as r]
+            [status-im.components.common.common :as common]
+            [status-im.utils.platform :as p]))
+
+(def flat-list-class (rn/get-class "FlatList"))
+
+(defn- wrap-render-fn [f]
+  (fn [o]
+    (let [{:keys [item index separators]} (js->clj o :keywordize-keys true)]
+      (r/as-element (f item index separators)))))
+
+(defn flat-list
+  "A wrapper for FlatList.
+   See https://facebook.github.io/react-native/docs/flatlist.html"
+  ([data render-fn] (flat-list data render-fn {}))
+  ([data render-fn props]
+   [flat-list-class (merge {:data (clj->js data)
+                            :renderItem (wrap-render-fn render-fn)
+                            :keyExtractor (fn [_ i] i)}
+                           (when p/ios? {:ItemSeparatorComponent (fn [] (r/as-element [common/list-separator]))})
+                           props)]))

src/status_im/components/main_tabs.cljs

@@ -10,7 +10,7 @@
             [status-im.ui.screens.chats-list.views :refer [chats-list]]
             [status-im.ui.screens.discover.views :refer [discover]]
             [status-im.ui.screens.contacts.views :refer [contact-groups-list]]
-            [status-im.ui.screens.wallet.main-screen.views :refer [wallet]]
+            [status-im.ui.screens.wallet.main.views :refer [wallet]]
             [status-im.utils.config :as config]
             [status-im.components.tabs.views :refer [tabs]]
             [status-im.components.tabs.styles :as st]

src/status_im/components/react.cljs

@@ -40,7 +40,6 @@
 
 (def list-view-class (get-class "ListView"))
 (def scroll-view (get-class "ScrollView"))
-(def flat-list-class (get-class "FlatList"))
 (def web-view (get-class "WebView"))
 (def keyboard-avoiding-view-class (get-class "KeyboardAvoidingView"))
 
@@ -106,19 +105,7 @@
            :resizeMode "contain"
            :style      style}]))
 
-(defn- wrap-render-fn [f]
+;; TODO Migrate to new FlatList and SectionList when appropriate (see components.list). ListView will eventually get deprecated
-  (fn [o]
-    (let [{:keys [item index separators]} (js->clj o :keywordize-keys true)]
-      (r/as-element (f item index separators)))))
-
-(defn flat-list
-  "A function wrapping the creation of FlatList.
-   See https://facebook.github.io/react-native/docs/flatlist.html"
-  ([data render-fn] (flat-list data render-fn {}))
-  ([data render-fn props]
-   [flat-list-class (merge {:data (clj->js data) :renderItem (wrap-render-fn render-fn) :keyExtractor (fn [_ i] i)} props)]))
-
-;; TODO Migrate to new FlatList and SectionList when appropriate. ListView will eventually get deprecated
 ;; see https://facebook.github.io/react-native/docs/using-a-listview.html
 (defn list-view [props]
   [list-view-class (merge {:enableEmptySections true} props)])

src/status_im/components/styles.cljs

@@ -5,6 +5,7 @@
 (def color-blue2 "#5b6dee")
 (def color-blue3 "#424fae")
 (def color-blue4 "#4360df")
+(def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
 (def color-blue5 "#3c56c8")
 (def color-blue-transparent "#7099e632")
 (def color-black "#000000")

src/status_im/translations/en.cljs

@@ -330,4 +330,7 @@
 
    ;; wallet
    :transactions                          "Transactions"
-   :transactions-sign-all "Sign all"})
+   :transactions-to                       "To"
+   :transactions-sign                     "Sign"
+   :transactions-sign-all                 "Sign all"
+   :transactions-delete                   "Delete"})

src/status_im/ui/screens/wallet/history/styles.cljs

@@ -1,46 +1,14 @@
 (ns status-im.ui.screens.wallet.history.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyle]])
+  (:require [status-im.components.styles :as st]))
-  (:require [status-im.components.styles :as common]))
 
 (def wallet-transactions-container
   {:flex             1
-   :background-color common/color-white})
+   :background-color st/color-white})
 
-(def toolbar-buttons-container
+(def toolbar-right-action
-  {:flex-direction  :row
+  {:color        st/color-blue4
-   :flex-shrink     1
+   :font-size    18
-   :justify-content :space-between
-   :width           68
    :margin-right 12})
 
-(def item
-  {:flex-direction  :row
-   :flex            1})
-
-(def item-text-view
-  {:flex            1
-   :flex-direction  :column})
-
-(def primary-text
-  {:flex      1
-   :font-size 16
-   :color     common/color-black})
-
-(def secondary-text
-  {:font-size 16
-   :color     common/color-gray4})
-
-(def item-icon
-  {:width  40
-   :height 40})
-
-(def secondary-action
-  (merge item-icon {:align-self "flex-end"}))
-
-;;;;;;;;;;;;;;;;;;
-;; Main section ;;
-;;;;;;;;;;;;;;;;;;
-
 (def main-section
-  {:padding 16
+  {:background-color st/color-white})
-   :background-color common/color-white})

src/status_im/ui/screens/wallet/history/views.cljs

@@ -1,13 +1,16 @@
 (ns status-im.ui.screens.wallet.history.views
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [status-im.components.react :as rn]
+  (:require [status-im.components.button.view :as btn]
+            [status-im.components.react :as rn]
+            [status-im.components.list.styles :as list-st]
+            [status-im.components.list.views :as list]
             [status-im.components.toolbar-new.view :as toolbar]
             [status-im.ui.screens.wallet.history.styles :as st]
             [status-im.i18n :as i18n]))
 
 (defn unsigned-action []
-  [rn/view {:style st/toolbar-buttons-container}
+  [rn/text {:style st/toolbar-right-action}
-   [rn/text (i18n/label :t/transactions-sign-all)]])
+   (i18n/label :t/transactions-sign-all)])
 
 (defn toolbar-view []
   [toolbar/toolbar
@@ -22,24 +25,27 @@
 
 (defn render-transaction
   [item]
-  [rn/view {:style st/item}
+  [rn/view {:style list-st/item}
-
    [rn/image {:source {:uri :console}
-              :style  st/item-icon}]
+              :style  list-st/item-icon}]
-#_
+   [rn/view {:style list-st/item-text-view}
-   [rn/icon :dropdown-white #_(icon-status (:status item)) st/item-icon]
-
-   [rn/view {:style st/item-text-view}
     (let [m (:content item)]
-      [rn/text {:style st/primary-text} (str (:value m) " " (:symbol m))])
+      [rn/text {:style list-st/primary-text} (str (:value m) " " (:symbol m))])
-    [rn/text {:style st/secondary-text} (:to item)]]
+    [rn/text {:style list-st/secondary-text} (str (i18n/label :t/transactions-to) " " (:to item))]
-   [rn/icon :forward_gray st/secondary-action]])
+    [rn/view {:style list-st/action-buttons}
+     [btn/primary-button {:text (i18n/label :t/transactions-sign)}]
+     [btn/secondary-button {:text (i18n/label :t/transactions-delete)}]]]
+   [rn/icon :forward_gray list-st/secondary-action]])
+
+(def dummy-transaction-data
+  [{:to "0xAAAAA" :content {:value "0,4909" :symbol "ETH"}}
+   {:to "0xAAAAA" :content {:value "10000" :symbol "SGT"}}])
 
 (defn main-section []
   [rn/view {:style st/main-section}
-   (rn/flat-list [{:to "0xAAAAA"   :content {:value "5" :symbol "ETH"} :status :pending}
+   [list/flat-list dummy-transaction-data render-transaction]])
-                  {:from "0xAAAAA" :content {:value "5" :symbol "ETH"} :status :sent}
+
-                  {:to "0xAAAAA"   :content {:value "5" :symbol "ETH"} :status :pending}] render-transaction)])
+;; TODO must reflect selected wallet
 
 (defview wallet-transactions []
   []

src/status_im/ui/screens/wallet/main/styles.cljs

@@ -1,4 +1,4 @@
-(ns status-im.ui.screens.wallet.main-screen.styles
+(ns status-im.ui.screens.wallet.main.styles
   (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.components.styles :as common]
             [status-im.utils.platform :as platform]))
@@ -81,37 +81,8 @@
   {:font-size 12
    :color     common/color-green-2})
 
-;;;;;;;;;;;;;;;;;;;;
+(def buttons
-;; Action buttons ;;
+  {:margin-top 34})
-;;;;;;;;;;;;;;;;;;;;
-
-(def action-buttons-container
-  {:flex-direction   :row
-   :background-color common/color-white-transparent-2
-   :margin-top       34
-   :margin-left      5
-   :margin-right     5
-   :border-radius    4})
-
-(def action-button
-  {:padding-vertical   13
-   :padding-horizontal 18
-   :flex-basis         0
-   :flex               1
-   :align-items        :center})
-
-(def action-button-center
-  (merge action-button
-         {:border-color       common/color-white-transparent-2
-          :border-left-width  1
-          :border-right-width 1}))
-
-(def action-button-text
-  {:font-size 13
-   :color     common/color-white})
-
-(def action-button-text-disabled
-  (merge action-button-text {:opacity 0.4}))
 
 ;;;;;;;;;;;;;;;;;;;;
 ;; Assets section ;;

src/status_im/ui/screens/wallet/main/views.cljs

@@ -1,8 +1,9 @@
-(ns status-im.ui.screens.wallet.main-screen.views
+(ns status-im.ui.screens.wallet.main.views
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [clojure.string :as string]
             [re-frame.core :as rf]
             [status-im.components.common.common :as common]
+            [status-im.components.button.view :as btn]
             [status-im.components.drawer.view :as drawer]
             [status-im.components.react :as rn]
             [status-im.components.toolbar-new.view :as toolbar]
@@ -10,7 +11,7 @@
             [status-im.i18n :as i18n]
             [status-im.utils.listview :as lw]
             [status-im.utils.platform :as platform]
-            [status-im.ui.screens.wallet.main-screen.styles :as st]))
+            [status-im.ui.screens.wallet.main.styles :as st]))
 
 (defn toolbar-title []
   [rn/view {:style st/toolbar-title-container}
@@ -30,30 +31,6 @@
                     :custom-content [toolbar-title]
                     :custom-action  [toolbar-buttons]}])
 
-;; TODO: Use standard signature and move to action-button namespace
-(defn action-button [{:keys [on-press view-style text-style text]}]
-  [rn/touchable-highlight {:on-press on-press}
-   [rn/view {:style view-style}
-    [rn/text {:style      text-style
-              :font       :medium
-              :uppercase? false} text]]])
-
-;; TODO: button to go to send screen
-(defn action-buttons []
-  [rn/view {:style st/action-buttons-container}
-   [action-button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
-                   :view-style st/action-button
-                   :text-style st/action-button-text
-                   :text "Send"}]
-   [action-button {:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
-                   :view-style st/action-button-center
-                   :text-style st/action-button-text
-                   :text "Request"}]
-   [action-button {:on-press (fn [] )
-                   :view-style st/action-button
-                   :text-style st/action-button-text-disabled
-                   :text "Exchange"}]])
-
 (defn main-section []
   [rn/view {:style st/main-section}
    [rn/view {:style st/total-balance-container}
@@ -64,7 +41,13 @@
      [rn/text {:style st/value-variation-title} "Total value"]
      [rn/view {:style st/today-variation-container}
       [rn/text {:style st/today-variation} "+5.43%"]]]
-    [action-buttons]]])
+    [btn/buttons st/buttons
+     [{:text     "Send"
+       :on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])}
+      {:text     "Request"
+       :on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])}
+      {:text      "Exchange"
+       :disabled? true}]]]])
 
 (defn asset-list-item [[id {:keys [currency amount] :as row}]]
   [rn/view {:style st/asset-item-container}

src/status_im/ui/screens/wallet/send/styles.cljs

@@ -1,17 +1,12 @@
 (ns status-im.ui.screens.wallet.send.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require [status-im.components.styles :as st]))
-  (:require [status-im.components.styles :as common]
-            [status-im.utils.platform :as platform]))
-
-;; XXX: Copy paste from main wallet
-;; TODO: Transfer to common space
 
 (def wallet-container
   {:flex             1
-   :background-color common/color-white})
+   :background-color st/color-white})
 
 (def toolbar
-  {:background-color common/color-blue5
+  {:background-color st/color-blue5
    :elevation        0})
 
 (def toolbar-title-container
@@ -20,7 +15,7 @@
    :margin-left    6})
 
 (def toolbar-title-text
-  {:color        common/color-white
+  {:color        st/color-white
    :font-size    17
    :margin-right 4})
 
@@ -37,127 +32,3 @@
    :justify-content :space-between
    :width           68
    :margin-right    12})
-
-;;;;;;;;;;;;;;;;;;
-;; Main section ;;
-;;;;;;;;;;;;;;;;;;
-
-(def main-section
-  {:padding          16
-   :background-color common/color-blue4})
-
-(def total-balance-container
-  {:margin-top      18
-   :align-items     :center
-   :justify-content :center})
-
-(def total-balance
-  {:flex-direction :row})
-
-(def total-balance-value
-  {:font-size 37
-   :color     common/color-white})
-
-(def total-balance-currency
-  {:font-size   37
-   :margin-left 9
-   :color       common/color-white
-   :opacity     0.4})
-
-(def value-variation
-  {:flex-direction :row
-   :align-items    :center})
-
-(def value-variation-title
-  {:font-size 14
-   :color     common/color-white
-   :opacity   0.6})
-
-(def today-variation-container
-  {:border-radius      4
-   :margin-left        8
-   :padding-horizontal 8
-   :padding-vertical   4
-   :background-color   common/color-green-1})
-
-(def today-variation
-  {:font-size 12
-   :color     common/color-green-2})
-
-;;;;;;;;;;;;;;;;;;;;
-;; Action buttons ;;
-;;;;;;;;;;;;;;;;;;;;
-
-(def action-buttons-container
-  {:flex-direction   :row
-   :background-color common/color-white-transparent-2
-   :margin-top       34
-   :margin-left      5
-   :margin-right     5
-   :border-radius    4})
-
-(def action-button
-  {:padding-vertical   13
-   :padding-horizontal 18
-   :flex-basis         0
-   :flex               1
-   :align-items        :center})
-
-(def action-button-center
-  (merge action-button
-         {:border-color       common/color-white-transparent-2
-          :border-left-width  1
-          :border-right-width 1}))
-
-(def action-button-text
-  {:font-size 13
-   :color     common/color-white})
-
-(def action-button-text-disabled
-  (merge action-button-text {:opacity 0.4}))
-
-;;;;;;;;;;;;;;;;;;;;
-;; Assets section ;;
-;;;;;;;;;;;;;;;;;;;;
-
-(def asset-section
-  {:background-color common/color-white
-   :padding-vertical 16})
-
-(def asset-section-title
-  {:font-size   14
-   :margin-left 16
-   :color       common/color-gray4})
-
-(def asset-item-container
-  {:flex-direction :row
-   :align-items    :center
-   :padding        12})
-
-(def asset-item-currency-icon
-  {:height       40
-   :width        40
-   :margin-right 14})
-
-(def asset-item-value-container
-  {:flex           1
-   :flex-direction :row})
-
-(def asset-item-value
-  {:font-size 16
-   :color     common/color-black})
-
-(def asset-item-currency
-  {:font-size   16
-   :color       common/color-gray4
-   :margin-left 6})
-
-(def asset-item-details-icon
-  {:flex-shrink 1
-   :height      24
-   :width       24})
-
-(def asset-list-separator
-  {:margin-left         70
-   :border-bottom-width 1
-   :border-color        common/color-separator})

src/status_im/ui/screens/wallet/send/views.cljs

@@ -1,101 +1,28 @@
 (ns status-im.ui.screens.wallet.send.views
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [clojure.string :as string]
+  (:require [re-frame.core :as rf]
-            [re-frame.core :as rf]
-            [status-im.components.common.common :as common]
-            [status-im.components.drawer.view :as drawer]
             [status-im.components.react :as rn]
             [status-im.components.toolbar-new.view :as toolbar]
-            [status-im.components.toolbar-new.actions :as act]
+            [status-im.ui.screens.wallet.send.styles :as cst]))
-            [status-im.i18n :as i18n]
-            [status-im.utils.listview :as lw]
-            [status-im.utils.platform :as platform]
-            [status-im.ui.screens.wallet.main-screen.styles :as st]))
-
-;; XXX Copy paste from main-screen ns
 
 (defn toolbar-title []
-  [rn/view {:style st/toolbar-title-container}
+  [rn/view {:style cst/toolbar-title-container}
-   [rn/text {:style st/toolbar-title-text
+   [rn/text {:style cst/toolbar-title-text
              :font  :toolbar-title}
-    "Send Transaction"]
+    "Send Transaction"]])
-   [rn/icon :dropdown_white st/toolbar-title-icon]])
 
 (defn toolbar-buttons []
-  [rn/view {:style st/toolbar-buttons-container}
+  [rn/view {:style cst/toolbar-buttons-container}
-   [rn/icon :dots_vertical_white st/toolbar-icon]
+   [rn/icon :dots_vertical_white cst/toolbar-icon]
-   [rn/icon :qr_white st/toolbar-icon]])
+   [rn/icon :qr_white cst/toolbar-icon]])
 
 (defn toolbar-view []
-  [toolbar/toolbar {:style          st/toolbar
+  [toolbar/toolbar {:style          cst/toolbar
-                    :nav-action     (act/list-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))
                     :custom-content [toolbar-title]
                     :custom-action  [toolbar-buttons]}])
 
-(defn action-buttons []
-  [rn/view {:style st/action-buttons-container}
-   [rn/view {:style st/action-button}
-    [rn/text {:style      st/action-button-text
-              :font       :medium
-              :uppercase? true} "Send"]]
-   [rn/view {:style st/action-button-center}
-    [rn/text {:style      st/action-button-text
-              :font       :medium
-              :uppercase? true} "Request"]]
-   [rn/view {:style st/action-button}
-    [rn/text {:style      st/action-button-text-disabled
-              :font       :medium
-              :uppercase? true} "Exchange"]]])
-
-(defn main-section []
-  [rn/view {:style st/main-section}
-   [rn/view {:style st/total-balance-container}
-    [rn/view {:style st/total-balance}
-     [rn/text {:style st/total-balance-value} "12.43"]
-     [rn/text {:style st/total-balance-currency} "USD"]]
-    [rn/view {:style st/value-variation}
-     [rn/text {:style st/value-variation-title} "Total value"]
-     [rn/view {:style st/today-variation-container}
-      [rn/text {:style st/today-variation} "+5.43%"]]]
-    [action-buttons]]])
-
-(defn asset-list-item [[id {:keys [currency amount] :as row}]]
-  [rn/view {:style st/asset-item-container}
-   [rn/image {:source {:uri :launch_logo}
-              :style  st/asset-item-currency-icon}]
-   [rn/view {:style st/asset-item-value-container}
-    [rn/text {:style st/asset-item-value} (str amount)]
-    [rn/text {:style      st/asset-item-currency
-              :uppercase? true}
-     id]]
-   [rn/icon :forward_gray st/asset-item-details-icon]])
-
-(defn render-separator-fn [assets-count]
-  (fn [_ row-id _]
-    (rn/list-item
-     ^{:key row-id}
-     [common/separator {} st/asset-list-separator])))
-
-(defn render-row-fn [row _ _]
-  (rn/list-item
-   [rn/touchable-highlight {:on-press #()}
-    [rn/view
-     [asset-list-item row]]]))
-
-(defn asset-section []
-  (let [assets {"eth" {:currency :eth :amount 0.445}
-                "snt" {:currency :snt :amount 1}
-                "gno" {:currency :gno :amount 0.024794}}]
-    [rn/view {:style st/asset-section}
-     [rn/text {:style st/asset-section-title} "Assets"]
-     [rn/list-view {:dataSource      (lw/to-datasource assets)
-                    :renderSeparator (when platform/ios? (render-separator-fn (count assets)))
-                    :renderRow       render-row-fn}]]))
-
 (defview send-transaction []
   []
-  [rn/view {:style st/wallet-container}
+  [rn/view {:style cst/wallet-container}
    [toolbar-view]
-   [rn/scroll-view
+   [rn/text "Nothing here yet!"]])
-    [main-section]
-    [asset-section]]])

src/status_im/utils/styles.clj

@@ -11,13 +11,13 @@
 
 (defmacro defstyle
   "Defines style symbol.
-   Style parameter may contain plaform specific style:
+   Style parameter may contain platform specific style:
    {:width   100
     :height  125
     :ios     {:height 20}
     :android {:margin-top 3}}
 
-    Reuslting style for Android:
+    Resulting style for Android:
     {:width 100
      :height 125
      :margin-top 3}
@@ -31,7 +31,7 @@
 
 (defmacro defnstyle
   "Defines style function.
-   Style parameter may contain plaform specific style:
+   Style parameter may contain platform specific style:
    {:width   100
     :height  (* a 2)
     :ios     {:height (/ a 2)}