Wallet: bridge screen (#17758)

* wallet: bridge screen

src/quo/components/wallet/address_text/view.cljs

@@ -7,10 +7,10 @@
 
 (defn- colored-network-text
   [theme network]
-  (let [{:keys [name short-name]} network]
+  (let [{:keys [network-name short-name]} network]
     [text/text
      {:size  :paragraph-2
-      :style {:color (colors/resolve-color name theme)}}
+      :style {:color (colors/resolve-color network-name theme)}}
      (str short-name ":")]))
 
 (defn- view-internal

src/status_im2/contexts/wallet/account/bridge/style.cljs

@@ -0,0 +1,14 @@
+(ns status-im2.contexts.wallet.account.bridge.style)
+
+(def header-container
+  {:padding-horizontal 20
+   :padding-vertical   12})
+
+(def input-container
+  {:padding-horizontal 20
+   :padding-vertical   8})
+
+(def list-content-container
+  {:padding-horizontal 8
+   :padding-top        4
+   :padding-bottom     8})

src/status_im2/contexts/wallet/account/bridge/view.cljs

@@ -0,0 +1,42 @@
+(ns status-im2.contexts.wallet.account.bridge.view
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [react-native.core :as rn]
+    [status-im2.contexts.wallet.account.bridge.style :as style]
+    [status-im2.contexts.wallet.common.sheets.account-options.view :as account-options]
+    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn network-logo
+  [item]
+  {:source (quo.resources/get-network (:network-name item))})
+
+(defn view
+  []
+  (let [networks       (rf/sub [:wallet/network-details])
+        networks-logos (map network-logo networks)]
+    [rn/view {:style {:flex 1}}
+     [quo/page-nav
+      {:icon-name           :i/close
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :top-bar
+       :right-side          :account-switcher
+       :account-switcher    {:customization-color :purple
+                             :on-press            #(rf/dispatch [:show-bottom-sheet
+                                                                 {:content account-options/view
+                                                                  :gradient-cover? true
+                                                                  :customization-color :purple}])
+                             :emoji               "🍑"}}]
+     [quo/text-combinations
+      {:container-style style/header-container
+       :title           (i18n/label :t/bridge)}]
+     [quo/input
+      {:container-style style/input-container
+       :icon-name       :i/search
+       :placeholder     (i18n/label :t/search-assets)}]
+     [rn/flat-list
+      {:data                    (temp/bridge-token-list networks-logos)
+       :render-fn               quo/token-network
+       :content-container-style style/list-content-container}]]))

src/status_im2/contexts/wallet/account/style.cljs

@@ -1,13 +1,5 @@
 (ns status-im2.contexts.wallet.account.style)
 
-(def container
-  {:flex 1})
-
 (def tabs
   {:padding-left     20
    :padding-vertical 12})
-
-(def drawer-section-label
-  {:padding-horizontal 20
-   :padding-top        12
-   :padding-bottom     8})

src/status_im2/contexts/wallet/account/tabs/about/view.cljs

@@ -57,9 +57,9 @@
    [quo/data-item
     (merge temp/data-item-state
            {:custom-subtitle (fn [] [quo/address-text
-                                     {:networks [{:name :ethereum :short-name "eth"}
+                                     {:networks [{:network-name :ethereum :short-name "eth"}
-                                                 {:name :optimism :short-name "opt"}
+                                                 {:network-name :optimism :short-name "opt"}
-                                                 {:name :arbitrum :short-name "arb1"}]
+                                                 {:network-name :arbitrum :short-name "arb1"}]
                                       :address  temp/address
                                       :format   :long}])
             :container-style {:margin-bottom 12}

src/status_im2/contexts/wallet/account/view.cljs

@@ -5,39 +5,12 @@
     [reagent.core :as reagent]
     [status-im2.contexts.wallet.account.style :as style]
     [status-im2.contexts.wallet.account.tabs.view :as tabs]
+    [status-im2.contexts.wallet.common.sheets.account-options.view :as account-options]
     [status-im2.contexts.wallet.common.temp :as temp]
     [status-im2.contexts.wallet.common.utils :as utils]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn account-options
-  []
-  [:<>
-   [quo/drawer-top temp/account-data]
-   [quo/action-drawer
-    [[{:icon                :i/edit
-       :accessibility-label :edit
-       :label               (i18n/label :t/edit-account)
-       :on-press            #(rf/dispatch [:navigate-to :wallet-edit-account])}
-      {:icon                :i/copy
-       :accessibility-label :copy-address
-       :label               (i18n/label :t/copy-address)}
-      {:icon                :i/share
-       :accessibility-label :share-account
-       :label               (i18n/label :t/share-account)}
-      {:icon                :i/delete
-       :accessibility-label :remove-account
-       :label               (i18n/label :t/remove-account)
-       :danger?             true}]]]
-   [quo/divider-line {:container-style {:margin-top 8}}]
-   [quo/section-label
-    {:section         (i18n/label :t/select-another-account)
-     :container-style style/drawer-section-label}]
-   [rn/flat-list
-    {:data      temp/other-accounts
-     :render-fn (fn [account] [quo/account-item {:account-props account}])
-     :style     {:margin-horizontal 8}}]])
-
 (defn buy-drawer
   []
   [:<>
@@ -63,7 +36,7 @@
       (let [account-address (or account-address (rf/sub [:get-screen-params :wallet-accounts]))
             account         (rf/sub [:wallet/account account-address])
             networks        (rf/sub [:wallet/network-details])]
-        [rn/view {:style style/container}
+        [rn/view {:style {:flex 1}}
          [quo/page-nav
           {:type              :wallet-networks
            :background        :blur
@@ -74,8 +47,8 @@
            :right-side        :account-switcher
            :account-switcher  {:customization-color :purple
                                :on-press            #(rf/dispatch [:show-bottom-sheet
-                                                                   {:content             account-options
+                                                                   {:content account-options/view
-                                                                    :gradient-cover?     true
+                                                                    :gradient-cover? true
                                                                     :customization-color :purple}])
                                :emoji               "🍑"}}]
          [quo/account-overview
@@ -85,9 +58,10 @@
            :customization-color :blue}]
          [quo/wallet-graph {:time-frame :empty}]
          [quo/wallet-ctas
-          {:send-action #(rf/dispatch [:open-modal :wallet-select-address])
+          {:send-action   #(rf/dispatch [:open-modal :wallet-select-address])
-           :buy-action  #(rf/dispatch [:show-bottom-sheet
+           :buy-action    #(rf/dispatch [:show-bottom-sheet
-                                       {:content buy-drawer}])}]
+                                         {:content buy-drawer}])
+           :bridge-action #(rf/dispatch [:open-modal :wallet-bridge])}]
          [quo/tabs
           {:style          style/tabs
            :size           32

src/status_im2/contexts/wallet/address_watch/style.cljs

@@ -10,10 +10,9 @@
    :padding-horizontal 20
    :align-items        :flex-end})
 
-(defn button-container
+(def button-container
-  [bottom]
   {:position        :absolute
-   :bottom          (+ bottom 12)
+   :bottom          12
    :left            20
    :right           20
    :justify-content :center

src/status_im2/contexts/wallet/address_watch/view.cljs

@@ -5,7 +5,6 @@
     [quo.theme :as quo.theme]
     [react-native.clipboard :as clipboard]
     [react-native.core :as rn]
-    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im2.contexts.wallet.address-watch.style :as style]
     [utils.i18n :as i18n]
@@ -13,13 +12,9 @@
 
 (defn view-internal
   []
-  (let [top         (safe-area/get-top)
+  (let [input-value (reagent/atom "")]
-        bottom      (safe-area/get-bottom)
-        input-value (reagent/atom "")]
     (fn []
-      [rn/view
+      [rn/view {:style {:flex 1}}
-       {:style {:flex       1
-                :margin-top top}}
        [quo/page-nav
         {:type      :no-title
          :icon-name :i/close
@@ -42,7 +37,7 @@
         [quo/button
          {:icon-only? true
           :type       :outline} :i/scan]]
-       [rn/view {:style (style/button-container bottom)}
+       [rn/view {:style style/button-container}
         [quo/text "[WIP] Bottom Actions"]]])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/network_preferences/style.cljs

@@ -1,5 +0,0 @@
-(ns status-im2.contexts.wallet.common.network-preferences.style)
-
-(def data-item
-  {:margin-horizontal 20
-   :margin-vertical   8})

src/status_im2/contexts/wallet/common/sheets/account_options/style.cljs

@@ -0,0 +1,6 @@
+(ns status-im2.contexts.wallet.common.sheets.account-options.style)
+
+(def drawer-section-label
+  {:padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     8})

src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs

@@ -0,0 +1,35 @@
+(ns status-im2.contexts.wallet.common.sheets.account-options.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im2.contexts.wallet.common.sheets.account-options.style :as style]
+            [status-im2.contexts.wallet.common.temp :as temp]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  [:<>
+   [quo/drawer-top temp/account-data]
+   [quo/action-drawer
+    [[{:icon                :i/edit
+       :accessibility-label :edit
+       :label               (i18n/label :t/edit-account)
+       :on-press            #(rf/dispatch [:navigate-to :wallet-edit-account])}
+      {:icon                :i/copy
+       :accessibility-label :copy-address
+       :label               (i18n/label :t/copy-address)}
+      {:icon                :i/share
+       :accessibility-label :share-account
+       :label               (i18n/label :t/share-account)}
+      {:icon                :i/delete
+       :accessibility-label :remove-account
+       :label               (i18n/label :t/remove-account)
+       :danger?             true}]]]
+   [quo/divider-line {:container-style {:margin-top 8}}]
+   [quo/section-label
+    {:section         (i18n/label :t/select-another-account)
+     :container-style style/drawer-section-label}]
+   [rn/flat-list
+    {:data      temp/other-accounts
+     :render-fn (fn [account] [quo/account-item {:account-props account}])
+     :style     {:margin-horizontal 8}}]])

src/status_im2/contexts/wallet/common/sheets/network_preferences/style.cljs

@@ -0,0 +1,5 @@
+(ns status-im2.contexts.wallet.common.sheets.network-preferences.style)
+
+(def data-item
+  {:margin-horizontal 20
+   :margin-vertical   8})

src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs

@@ -1,9 +1,9 @@
-(ns status-im2.contexts.wallet.common.network-preferences.view
+(ns status-im2.contexts.wallet.common.sheets.network-preferences.view
   (:require [quo.core :as quo]
             [quo.foundations.colors :as colors]
             [quo.foundations.resources :as resources]
             [quo.theme :as quo.theme]
-            [status-im2.contexts.wallet.common.network-preferences.style :as style]
+            [status-im2.contexts.wallet.common.sheets.network-preferences.style :as style]
             [utils.i18n :as i18n]))
 
 (def mainnet

src/status_im2/contexts/wallet/common/temp.cljs

@@ -109,9 +109,9 @@
    :customization-color :blue})
 
 (def network-names
-  [{:name :ethereum :short-name "eth"}
+  [{:network-name :ethereum :short-name "eth"}
-   {:name :optimism :short-name "opt"}
+   {:network-name :optimism :short-name "opt"}
-   {:name :arbitrum :short-name "arb1"}])
+   {:network-name :arbitrum :short-name "arb1"}])
 
 (def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4")
 
@@ -152,9 +152,9 @@
 (def account-data
   {:title                "Trip to Vegas"
    :type                 :account
-   :networks             [{:name :ethereum :short-name "eth"}
+   :networks             [{:network-name :ethereum :short-name "eth"}
-                          {:name :optimism :short-name "opt"}
+                          {:network-name :optimism :short-name "opt"}
-                          {:name :arbitrum :short-name "arb1"}]
+                          {:network-name :arbitrum :short-name "arb1"}]
    :description          "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4"
    :account-avatar-emoji "🍑"
    :customization-color  :purple})
@@ -164,13 +164,13 @@
     :emoji               "🍿"
     :name                "New House"
     :address             "0x21af6E0Ba4C4530735616e1Ee7ff5FbCB726f493"
-    :networks            [{:name :ethereum :short-name "eth"}
+    :networks            [{:network-name :ethereum :short-name "eth"}
-                          {:name :optimism :short-name "opt"}]}
+                          {:network-name :optimism :short-name "opt"}]}
    {:customization-color :blue
     :emoji               "🎮"
     :name                "My savings"
     :address             "0x43cf6E0Ba4C4530735616e1Ee7ff5FbCB726f98d"
-    :networks            [{:name :ethereum :short-name "eth"}]}])
+    :networks            [{:network-name :ethereum :short-name "eth"}]}])
 
 (def asset-snt
   {:size       24
@@ -268,3 +268,27 @@
     :image             :icon-avatar
     :image-props       {:icon (status.resources/get-service-image :latamex)}
     :on-press          #(rn/open-url "https://latamex.com")}])
+
+(defn bridge-token-list
+  [networks-list]
+  [{:token               (quo.resources/get-token :snt)
+    :label               "Status"
+    :token-value         "0.00 SNT"
+    :fiat-value          "€0.00"
+    :networks            networks-list
+    :state               :default
+    :customization-color :blue}
+   {:token               (quo.resources/get-token :eth)
+    :label               "Ethereum"
+    :token-value         "0.00 ETH"
+    :fiat-value          "€0.00"
+    :networks            networks-list
+    :state               :default
+    :customization-color :blue}
+   {:token               (quo.resources/get-token :dai)
+    :label               "Dai"
+    :token-value         "0.00 DAI"
+    :fiat-value          "€0.00"
+    :networks            networks-list
+    :state               :default
+    :customization-color :blue}])

src/status_im2/contexts/wallet/create_account/view.cljs

@@ -54,9 +54,7 @@
         [primary-name _]      (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
         {window-width :width} (rn/get-window)]
     (fn [{:keys [theme]}]
-      [rn/view
+      [rn/view {:style {:flex 1}}
-       {:style {:flex       1
-                :margin-top top}}
        [quo/page-nav
         {:type       :no-title
          :background :blur

src/status_im2/contexts/wallet/edit_account/view.cljs

@@ -2,9 +2,9 @@
   (:require [quo.core :as quo]
             [quo.theme :as quo.theme]
             [reagent.core :as reagent]
-            [status-im2.contexts.wallet.common.network-preferences.view :as network-preferences]
             [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
              create-or-edit-account]
+            [status-im2.contexts.wallet.common.sheets.network-preferences.view :as network-preferences]
             [status-im2.contexts.wallet.edit-account.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -40,9 +40,9 @@
          :card?           true
          :title           (i18n/label :t/address)
          :custom-subtitle (fn [] [quo/address-text
-                                  {:networks [{:name :ethereum :short-name "eth"}
+                                  {:networks [{:network-name :ethereum :short-name "eth"}
-                                              {:name :optimism :short-name "opt"}
+                                              {:network-name :optimism :short-name "opt"}
-                                              {:name :arbitrum :short-name "arb1"}]
+                                              {:network-name :arbitrum :short-name "arb1"}]
                                    :address  account-address
                                    :format   :long}])
          :on-press        (fn []

src/status_im2/navigation/screens.cljs

@@ -37,6 +37,7 @@
     [status-im2.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
     [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
+    [status-im2.contexts.wallet.account.bridge.view :as bridge]
     [status-im2.contexts.wallet.account.view :as wallet-accounts]
     [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch]
     [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
@@ -44,7 +45,6 @@
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
-    [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
     [status-im2.contexts.wallet.scan-account.view :as scan-address]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im2.navigation.options :as options]
@@ -251,23 +251,28 @@
      :component wallet-edit-account/view}
 
     {:name      :wallet-address-watch
+     :options   {:insets {:top?    true
+                          :bottom? true}}
      :component wallet-address-watch/view}
 
+    {:name      :wallet-bridge
+     :options   {:insets                 {:top? true}
+                 :modalPresentationStyle :overCurrentContext}
+     :component bridge/view}
+
+    {:name      :wallet-edit-derivation-path
+     :component wallet-edit-derivation-path/view}
+
     {:name      :wallet-collectible
      :component wallet-collectible/view}
 
     {:name      :wallet-create-account
+     :options   {:insets {:top? true}}
      :component wallet-create-account/view}
 
-    {:name      :wallet-edit-derivation-path
-     :component wallet-edit-derivation-path/view}
-
     {:name      :wallet-saved-address
      :component wallet-saved-address/view}
 
-    {:name      :wallet-saved-addresses
-     :component wallet-saved-addresses/view}
-
     {:name      :wallet-select-address
      :options   {:modalPresentationStyle :overCurrentContext}
      :component wallet-select-address/view}

translations/en.json

@@ -2367,12 +2367,12 @@
     "network-preferences-desc": "Select which network this address is happy to receive funds on",
     "layer-2": "Layer 2",
     "manage-tokens": "Manage tokens",
-    "sign transactions": "sign transactions",
     "edit-derivation-path": "Edit derivation path",
     "path-format": "Path format",
-    "derivation-path": "Derivation path",
     "reset": "Reset",
     "reveal-address": "Reveal address",
     "derive-addresses": "Derive addresses",
-    "address-activity": "This address has activity"
+    "address-activity": "This address has activity",
+    "sign transactions": "sign transactions",
+    "search-assets": "Search assets"
 }