most of the ui in place, polishing pending

Author: briansztamfater

src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs

@@ -1,19 +1,36 @@
-(ns status-im2.contexts.wallet.send.transaction-confirmation.style)
+(ns status-im2.contexts.wallet.send.transaction-confirmation.style
+  (:require [quo.foundations.colors :as colors]))
 
 (defn container
   [margin-top]
-  {:flex       1
-   :margin-top margin-top})
+  {:position :absolute
+   :top      margin-top
+   :right    0
+   :left     0
+   :bottom   0})
+
+(def content-container
+  {:padding-top        12
+   :padding-horizontal 20
+   :padding-bottom     32})
 
 (def title-container
-  {:margin-horizontal 20
-   :margin-vertical   12})
+  {:margin-right 4})
 
-(def empty-container-style
-  {:justify-content :center
-   :flex            1
-   :margin-bottom   44})
+(defn details-container
+  [theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :height             52
+   :padding-horizontal 12
+   :padding-top        7
+   :padding-bottom     8
+   :border-radius      16
+   :border-width       1
+   :border-color       (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
 
-(def search-input-container
-  {:padding-horizontal 20
-   :padding-vertical   8})
+(def slide-button-container
+  {:position :absolute
+   :right    20
+   :left     20
+   :bottom   20})

src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -1,176 +1,187 @@
 (ns status-im2.contexts.wallet.send.transaction-confirmation.view
   (:require
-    [clojure.string :as string]
     [quo.core :as quo]
     [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.send.transaction-confirmation.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(def tabs-data
-  [{:id :tab/assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
-   {:id :tab/collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}])
-
-(defn- network-names
-  [balances-per-chain]
-  (mapv (fn [chain-id-keyword]
-          (let [chain-id-str (name chain-id-keyword)
-                chain-id     (js/parseInt chain-id-str)]
-            (case chain-id
-              10    {:source (quo.resources/get-network :optimism)}
-              42161 {:source (quo.resources/get-network :arbitrum)}
-              5     {:source (quo.resources/get-network :ethereum)}
-              1     {:source (quo.resources/get-network :ethereum)}
-              :unknown))) ; Default case if the chain-id is not recognized
-        (keys balances-per-chain)))
-
-(defn- asset-component
-  []
-  (fn [token _ _ _]
-    (let [on-press                #(js/alert "Not implemented yet")
-          total-balance           (reduce +
-                                          (map #(js/parseFloat (:balance %))
-                                               (vals (:balancesPerChain token))))
-          total-balance-formatted (.toFixed total-balance 2)
-          currency                :usd
-          currency-symbol         "$"
-          price-fiat-currency     (get-in token [:marketValuesPerCurrency currency :price])
-          balance-fiat            (* total-balance price-fiat-currency)
-          balance-fiat-formatted  (.toFixed balance-fiat 2)
-          networks-list           (network-names (:balancesPerChain token))]
-      [quo/token-network
-       {:token       (quo.resources/get-token (keyword (string/lower-case (:symbol token))))
-        :label       (:name token)
-        :token-value (str total-balance-formatted " " (:symbol token))
-        :fiat-value  (str currency-symbol balance-fiat-formatted)
-        :networks    networks-list
-        :on-press    on-press}])))
-
-(defn- asset-list
-  [account-address search-text]
-  (let [tokens          (rf/sub [:wallet/tokens])
-        account-tokens  (get tokens (keyword account-address))
-        sorted-tokens   (sort-by :name compare account-tokens)
-        filtered-tokens (filter #(or (string/starts-with? (string/lower-case (:name %))
-                                                          (string/lower-case search-text))
-                                     (string/starts-with? (string/lower-case (:symbol %))
-                                                          (string/lower-case search-text)))
-                                sorted-tokens)]
-    [rn/view {:style {:flex 1}}
-     [rn/flat-list
-      {:data                         filtered-tokens
-       :content-container-style      {:padding-horizontal 8}
-       :keyboard-should-persist-taps :handled
-       :key-fn                       :id
-       :on-scroll-to-index-failed    identity
-       :render-fn                    asset-component}]]))
-
-(defn- tab-view
-  [account search-text selected-tab]
-  (case selected-tab
-    :tab/assets       [asset-list account search-text]
-    :tab/collectibles [quo/empty-state
-                       {:title           (i18n/label :t/no-collectibles)
-                        :description     (i18n/label :t/no-collectibles-description)
-                        :placeholder?    true
-                        :container-style style/empty-container-style}]))
-
-(defn- search-input
-  [search-text]
-  (let [on-change-text #(reset! search-text %)]
-    (fn []
-      [rn/view {:style style/search-input-container}
-       [quo/input
-        {:small?         true
-         :placeholder    (i18n/label :t/search-assets)
-         :icon-name      :i/search
-         :value          @search-text
-         :on-change-text on-change-text}]])))
-
 (defn- f-view-internal
-  [account-address]
-  (let [margin-top      (safe-area/get-top)
-        selected-tab    (reagent/atom (:id (first tabs-data)))
-        search-text     (reagent/atom "")
-        account-address (string/lower-case (or account-address
-                                               (rf/sub [:get-screen-params :wallet-accounts])))
-        on-close        #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])
-        #_status-account-props
-        #_{:customization-color :purple
-           :size                32
-           :emoji               "🍑"
-           :type                :default
-           :name                "Collectibles vault"
-           :address             "0x0ah...78b"}
-        #_user-props
-        #_{:full-name           "M L"
-           :status-indicator?   false
-           :size                :small
-           :ring-background     (resources/get-mock-image :ring)
-           :customization-color :blue
-           :name                "Mark Libot"
-           :address             "0x0ah...78b"
-           :status-account      (merge status-account-props {:size 16})}]
+  [theme]
+  (let [reset-slider?        (reagent/atom false)
+        margin-top           (safe-area/get-top)
+        biometric-auth?      true
+        on-close             #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])
+        status-account-props {:customization-color :purple
+                              :size                32
+                              :emoji               "🍑"
+                              :type                :default
+                              :name                "Collectibles vault"
+                              :address             "0x0ah...78b"}
+        user-props           {:full-name           "M L"
+                              :status-indicator?   false
+                              :size                :small
+                              :ring-background     (resources/get-mock-image :ring)
+                              :customization-color :blue
+                              :name                "Mark Libot"
+                              :address             "0x0ah...78b"
+                              :status-account      (merge status-account-props
+                                                          {:size  16
+                                                           :name  "New house"
+                                                           :emoji "🍔"})}]
     (fn []
-      [rn/scroll-view
-       {:content-container-style      (style/container margin-top)
-        :keyboard-should-persist-taps :handled
-        :scroll-enabled               false}
-       [quo/page-nav
-        {:icon-name           :i/arrow-left
-         :on-press            on-close
-         :accessibility-label :top-bar
-         :right-side          :account-switcher
-         :account-switcher    {:customization-color :purple
-                               :on-press            #(js/alert "Not implemented yet")
-                               :state               :default
-                               :emoji               "🍑"}}]
-       [quo/text-combinations
-        {:title                     (i18n/label :t/select-asset)
-         :container-style           style/title-container
-         :title-accessibility-label :title-label}]
-       #_[quo/summary-info
+      [rn/view {:style {:flex 1}}
+       [quo/gradient-cover
+        {:customization-color :purple}]
+       [rn/view
+        {:style (style/container margin-top)}
+        [quo/page-nav
+         {:icon-name           :i/arrow-left
+          :on-press            on-close
+          :accessibility-label :top-bar
+          :right-side          {:icon-name           :i/advanced
+                                :on-press            (fn callback [] nil)
+                                :accessibility-label "Advanced"}
+          :account-switcher    {:customization-color :purple
+                                :on-press            #(js/alert "Not implemented yet")
+                                :state               :default
+                                :emoji               "🍑"}}]
+        [rn/view {:style style/content-container}
+         [rn/view {:style {:flex-direction :row}}
+          [quo/text
+           {:size                :heading-1
+            :weight              :semi-bold
+            :style               style/title-container
+            :accessibility-label :send-label}
+           (i18n/label :t/send)]
+          [quo/summary-tag
+           {:label        "150 ETH"
+            :type         :token
+            :image-source (quo.resources/get-token :eth)}]]
+         [rn/view
+          {:style {:flex-direction :row
+                   :margin-top     4}}
+          [quo/text
+           {:size                :heading-1
+            :weight              :semi-bold
+            :style               style/title-container
+            :accessibility-label :send-label}
+           (i18n/label :t/from)]
+          [quo/summary-tag
+           {:label               "Collectibles vault"
+            :type                :account
+            :emoji               "🍑"
+            :customization-color :purple}]]
+         [rn/view
+          {:style {:flex-direction :row
+                   :margin-top     4}}
+          [quo/text
+           {:size                :heading-1
+            :weight              :semi-bold
+            :style               style/title-container
+            :accessibility-label :send-label}
+           (i18n/label :t/to)]
+          [quo/summary-tag
+           {:label               "Mark Libot"
+            :type                :user
+            :image-source        (resources/get-mock-image :user-picture-male4)
+            :customization-color :magenta}]]]
+        [rn/view
+         {:style {:padding-horizontal 20
+                  :padding-bottom     16}}
+         [quo/text
+          {:size                :paragraph-2
+           :weight              :medium
+           :style               {:margin-bottom 8}
+           :accessibility-label :summary-from-label}
+          (i18n/label :t/from-capitalized)]
+         [quo/summary-info
           {:type          :status-account
            :networks?     true
            :values        {:ethereum 150
                            :optimism 50
                            :arbitrum 25}
-           :account-props user-props}]
-       #_[quo/summary-info
-          {:type          :status-account
+           :account-props status-account-props}]]
+        [rn/view
+         {:style {:padding-horizontal 20
+                  :padding-bottom     16}}
+         [quo/text
+          {:size                :paragraph-2
+           :weight              :medium
+           :style               {:margin-bottom 8}
+           :accessibility-label :summary-from-label}
+          (i18n/label :t/to-capitalized)]
+         [quo/summary-info
+          {:type          :user
            :networks?     true
            :values        {:ethereum 150
                            :optimism 50
                            :arbitrum 25}
-           :account-props status-account-props}]
-       #_[rn/view
-          [quo/data-item]
-          [quo/data-item]
-          [quo/data-item]]
-       #_[quo/slide-button
-          {:size                size
-           :container-style     container-style
-           :customization-color customization-color
+           :account-props user-props}]]
+        [rn/view
+         {:style {:padding-horizontal 20
+                  :padding-bottom     16}}
+         [quo/text
+          {:size                :paragraph-2
+           :weight              :medium
+           :style               {:margin-bottom 8}
+           :accessibility-label :summary-from-label}
+          (i18n/label :t/details)]
+         [rn/view
+          {:style (style/details-container theme)}
+          [quo/data-item
+           {:container-style {:flex   1
+                              :height 36}
+            :blur?           false
+            :description     :default
+            :icon-right?     false
+            :card?           false
+            :label           :none
+            :status          :default
+            :size            :small
+            :title           "Est. time"
+            :subtitle        "3-5 min"}]
+          [quo/data-item
+           {:container-style {:flex   1
+                              :height 36}
+            :blur?           false
+            :description     :default
+            :icon-right?     false
+            :card?           false
+            :label           :none
+            :status          :default
+            :size            :small
+            :title           "Max fees"
+            :subtitle        "€188,70"}]
+          [quo/data-item
+           {:container-style {:flex   1
+                              :height 36}
+            :blur?           false
+            :description     :default
+            :icon-right?     false
+            :card?           false
+            :label           :none
+            :status          :default
+            :size            :small
+            :title           "Mark gets"
+            :subtitle        "149.99 ETH"}]]]
+        [rn/safe-area-view
+         {:style style/slide-button-container}
+         [quo/slide-button
+          {:size                :size/s-48
+           :customization-color :purple
            :on-reset            (when @reset-slider? #(reset! reset-slider? false))
-           :on-complete         #(authorize {:on-close              on-close
-                                             :auth-button-icon-left auth-button-icon-left
-                                             :theme                 theme
-                                             :blur?                 blur?
-                                             :customization-color   customization-color
-                                             :on-enter-password     on-enter-password
-                                             :biometric-auth?       biometric-auth?
-                                             :on-auth-success       on-auth-success
-                                             :on-auth-fail          on-auth-fail
-                                             :auth-button-label     auth-button-label})
+           :on-complete         #(js/alert "Not implemented yet")
            :track-icon          (if biometric-auth? :i/face-id :password)
-           :track-text          track-text}]])))
+           :track-text          "Slide to send"}]]]])))
 
 (defn- view-internal
-  [{:keys [account-address]}]
-  [:f> f-view-internal account-address])
+  [{:keys [theme]}]
+  [:f> f-view-internal theme])
 
 (def view (quo.theme/with-theme view-internal))

translations/en.json

@@ -2385,5 +2385,6 @@
     "keypairs": "Keypairs",
     "keypairs-description": "Select keypair to derive your new account from",
     "confirm-account-origin": "Confirm account origin",
-    "select-asset": "Select asset"
+    "select-asset": "Select asset",
+    "details": "Details"
 }