Wallet: bridge screen (#17758)

* wallet: bridge screen
This commit is contained in:
Omar Basem 2023-11-07 07:22:38 +04:00 committed by GitHub
parent 701df811b0
commit a6d7502455
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 175 additions and 91 deletions

View File

@ -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

View File

@ -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})

View File

@ -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}]]))

View File

@ -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})

View File

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

View File

@ -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
:gradient-cover? true
{:content account-options/view
: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])
:buy-action #(rf/dispatch [:show-bottom-sheet
{:content buy-drawer}])}]
{:send-action #(rf/dispatch [:open-modal :wallet-select-address])
:buy-action #(rf/dispatch [:show-bottom-sheet
{:content buy-drawer}])
:bridge-action #(rf/dispatch [:open-modal :wallet-bridge])}]
[quo/tabs
{:style style/tabs
:size 32

View File

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

View File

@ -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)
bottom (safe-area/get-bottom)
input-value (reagent/atom "")]
(let [input-value (reagent/atom "")]
(fn []
[rn/view
{:style {:flex 1
:margin-top top}}
[rn/view {:style {:flex 1}}
[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))

View File

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

View File

@ -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})

View File

@ -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}}]])

View File

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

View File

@ -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

View File

@ -109,9 +109,9 @@
:customization-color :blue})
(def network-names
[{:name :ethereum :short-name "eth"}
{:name :optimism :short-name "opt"}
{:name :arbitrum :short-name "arb1"}])
[{:network-name :ethereum :short-name "eth"}
{:network-name :optimism :short-name "opt"}
{: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"}
{:name :optimism :short-name "opt"}
{:name :arbitrum :short-name "arb1"}]
:networks [{:network-name :ethereum :short-name "eth"}
{:network-name :optimism :short-name "opt"}
{: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"}
{:name :optimism :short-name "opt"}]}
:networks [{:network-name :ethereum :short-name "eth"}
{: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}])

View File

@ -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
{:style {:flex 1
:margin-top top}}
[rn/view {:style {:flex 1}}
[quo/page-nav
{:type :no-title
:background :blur

View File

@ -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"}
{:name :optimism :short-name "opt"}
{:name :arbitrum :short-name "arb1"}]
{:networks [{:network-name :ethereum :short-name "eth"}
{:network-name :optimism :short-name "opt"}
{:network-name :arbitrum :short-name "arb1"}]
:address account-address
:format :long}])
:on-press (fn []

View File

@ -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}

View File

@ -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"
}