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

feat(wallet): add ability to send a token (#18242)

This commit is contained in:
Jamie Caprani 2024-01-05 15:04:39 +00:00 committed by GitHub
parent 4edb14bb5f
commit 947a1ef29c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 293 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/quo/components/utilities/token/view.cljs
View File

@ -37,13 +37,14 @@
(def ^:private b64-png-image-prefix "data:image/png;base64,")
(defn temp-empty-symbol
[token size]
[token size style]
[rn/view
{:style (token-style {:justify-content :center
:align-items :center
:border-radius 20
:border-width 1
:border-color :grey}
{:style (token-style (merge {:justify-content :center
:align-items :center
:border-radius 20
:border-width 1
:border-color :grey}
style)
size)}
[quo/text {:style {:color :grey}}
(some-> token
@ -73,6 +74,6 @@
[rn/image
{:style (token-style style size)
:source source}]
[temp-empty-symbol token size])))
[temp-empty-symbol token size style])))
(def view (schema/instrument #'view-internal ?schema))

45
src/quo/components/wallet/summary_info/view.cljs
View File

@ -2,6 +2,7 @@
(:require
[quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.avatars.user-avatar.view :as user-avatar]
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
[quo.components.markdown.text :as text]
[quo.components.wallet.summary-info.style :as style]
[quo.foundations.colors :as colors]
@ -26,24 +27,29 @@
(defn networks
[values theme]
(let [{:keys [ethereum optimism arbitrum]} values]
(let [{:keys [ethereum optimism arbitrum]} values
show-optimism? (pos? optimism)
show-arbitrum? (pos? arbitrum)]
[rn/view
{:style style/networks-container
:accessibility-label :networks}
[network-amount
{:network :ethereum
:amount (str ethereum " ETH")
:divider? true
:theme theme}]
[network-amount
{:network :optimism
:amount (str optimism " ETH")
:divider? true
:theme theme}]
[network-amount
{:network :arbitrum
:amount (str arbitrum " ETH")
:theme theme}]]))
(when (pos? ethereum)
[network-amount
{:network :ethereum
:amount (str ethereum " ETH")
:divider? (or show-arbitrum? show-optimism?)
:theme theme}])
(when show-optimism?
[network-amount
{:network :optimism
:amount (str optimism " OPT")
:divider? show-arbitrum?
:theme theme}])
(when show-arbitrum?
[network-amount
{:network :arbitrum
:amount (str arbitrum " ARB")
:theme theme}])]))
(defn- view-internal
[{:keys [theme type account-props networks? values]}]
@ -51,8 +57,13 @@
{:style (style/container networks? theme)}
[rn/view
{:style style/info-container}
(if (= type :status-account)
[account-avatar/view account-props]
(case type
:status-account [account-avatar/view account-props]
:saved-account [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)]
:account [wallet-user-avatar/wallet-user-avatar
(assoc account-props
:size :size-32
:neutral? true)]
[user-avatar/user-avatar account-props])
[rn/view {:style {:margin-left 8}}
(when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)])

6
src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs
View File

@ -25,11 +25,11 @@
size
theme
blur?
container-style]}]
[rn/view {:style {:flex 1}}
container-style]
:or {container-style {:flex 1}}}]
[rn/view {:style container-style}
[quo/slide-button
{:size size
:container-style container-style
:customization-color customization-color
:on-reset (when @reset-slider? #(reset! reset-slider? false))
:on-complete #(authorize/authorize {:on-close on-close

2
src/status_im/common/data_store/wallet.cljs → src/status_im/contexts/wallet/data_store.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.common.data-store.wallet
(ns status-im.contexts.wallet.data-store
(:require
[clojure.set :as set]
[clojure.string :as string]

2
src/status_im/contexts/wallet/events.cljs
View File

@ -4,7 +4,7 @@
[camel-snake-kebab.extras :as cske]
[clojure.string :as string]
[react-native.background-timer :as background-timer]
[status-im.common.data-store.wallet :as data-store]
[status-im.contexts.wallet.data-store :as data-store]
[status-im.contexts.wallet.events.collectibles]
[status-im.contexts.wallet.item-types :as item-types]
[status-im.contexts.wallet.temp :as temp]

89
src/status_im/contexts/wallet/send/events.cljs
View File

@ -1,6 +1,9 @@
(ns status-im.contexts.wallet.send.events
(:require
[camel-snake-kebab.core :as csk]
[camel-snake-kebab.extras :as cske]
[status-im.constants :as constants]
[status-im.contexts.wallet.send.utils :as send-utils]
[taoensso.timbre :as log]
[utils.money :as money]
[utils.number]
@ -8,6 +11,7 @@
(rf/reg-event-fx :wallet/select-address-tab
(fn [{:keys [db]} [tab]]
{:db (assoc-in db [:wallet :ui :send :select-address-tab] tab)}))
(rf/reg-event-fx :wallet/select-send-account-address
@ -17,10 +21,14 @@
(rf/reg-event-fx :wallet/suggested-routes-success
(fn [{:keys [db]} [suggested-routes timestamp]]
(when (= (get-in db [:wallet :ui :send :suggested-routes-call-timestamp]) timestamp)
{:db (-> db
(assoc-in [:wallet :ui :send :suggested-routes] suggested-routes)
(assoc-in [:wallet :ui :send :route] (first (:Best suggested-routes)))
(assoc-in [:wallet :ui :send :loading-suggested-routes?] false))})))
(let [suggested-routes-data (cske/transform-keys csk/->kebab-case suggested-routes)
chosen-route (->> suggested-routes-data
:best
first)]
{:db (-> db
(assoc-in [:wallet :ui :send :suggested-routes] suggested-routes-data)
(assoc-in [:wallet :ui :send :route] chosen-route)
(assoc-in [:wallet :ui :send :loading-suggested-routes?] false))}))))
(rf/reg-event-fx :wallet/suggested-routes-error
(fn [{:keys [db]} [_error]]
@ -47,8 +55,9 @@
:fx [[:navigate-to-within-stack [:wallet-send-input-amount stack-id]]]}))
(rf/reg-event-fx :wallet/send-select-amount
(fn [{:keys [db]} [{:keys [amount]}]]
{:db (assoc-in db [:wallet :ui :send :amount] amount)}))
(fn [{:keys [db]} [{:keys [amount stack-id]}]]
{:db (assoc-in db [:wallet :ui :send :amount] amount)
:fx [[:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
(rf/reg-event-fx :wallet/get-suggested-routes
(fn [{:keys [db now]} [amount]]
@ -59,7 +68,7 @@
token-id (:symbol token)
network-preferences []
gas-rates constants/gas-rate-medium
amount-in (money/amount-in-hex amount token-decimal)
amount-in (send-utils/amount-in-hex amount token-decimal)
from-address wallet-address
disabled-from-chain-ids []
disabled-to-chain-ids []
@ -88,3 +97,69 @@
{:event :wallet/get-suggested-routes
:error error
:params request-params}))}]})))
(rf/reg-event-fx :wallet/add-authorized-transaction
(fn [{:keys [db]} [transaction]]
(let [transaction-hashes (:hashes transaction)
chain-id (key (first transaction-hashes))
tx-id (first (val (first transaction-hashes)))
transaction-detes {:status :pending
:id (:id transaction)
:chain-id chain-id}]
{:db (assoc-in db [:wallet :transactions tx-id] transaction-detes)
:fx [[:dispatch [:navigate-to :wallet-transaction-progress]]]})))
(defn- transaction-bridge
[{:keys [from-address to-address route]}]
(let [{:keys [from bridge-name amount-out gas-amount gas-fees]} route
{:keys [gas-price max-fee-per-gas-medium max-priority-fee-per-gas]} gas-fees]
[{:BridgeName bridge-name
:ChainID (:chain-id from)
:TransferTx {:From from-address
:To to-address
:Gas (money/to-hex gas-amount)
:GasPrice (money/to-hex (money/->wei :gwei gas-price))
:Value amount-out
:Nonce nil
:MaxFeePerGas (money/to-hex (money/->wei :gwei max-fee-per-gas-medium))
:MaxPriorityFeePerGas (money/to-hex (money/->wei :gwei max-priority-fee-per-gas))
:Input ""
:Data "0x"}}]))
(defn- multi-transaction-command
[{:keys [from-address to-address from-asset to-asset amount-out transfer-type]
:or {transfer-type constants/send-type-transfer}}]
{:fromAddress from-address
:toAddress to-address
:fromAsset from-asset
:toAsset to-asset
:fromAmount amount-out
:type transfer-type})
(rf/reg-event-fx :wallet/send-transaction
(fn [{:keys [db]} [sha3-pwd]]
(let [route (get-in db [:wallet :ui :send :route])
from-address (get-in db [:wallet :current-viewing-account-address])
to-address (get-in db [:wallet :ui :send :to-address])
token (get-in db [:wallet :ui :send :token])
token-id (:symbol token)
request-params [(multi-transaction-command {:from-address from-address
:to-address to-address
:from-asset token-id
:to-asset token-id
:amount-out (:amount-out route)})
(transaction-bridge {:to-address to-address
:from-address from-address
:route route})
sha3-pwd]]
{:json-rpc/call [{:method "wallet_createMultiTransaction"
:params request-params
:on-success (fn [result]
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:wallet/add-authorized-transaction result]))
:on-error (fn [error]
(log/error "failed to send transaction"
{:event :wallet/send-transaction
:error error
:params request-params}))}]})))

18
src/status_im/contexts/wallet/send/transaction_confirmation/style.cljs
View File

@ -1,13 +1,9 @@
(ns status-im.contexts.wallet.send.transaction-confirmation.style
(:require [quo.foundations.colors :as colors]))
(defn container
[margin-top]
{:position :absolute
:top margin-top
:right 0
:left 0
:bottom 0})
(def detail-item
{:flex 1
:height 36})
(def content-container
{:padding-top 12
@ -29,11 +25,9 @@
:border-width 1
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
(def slide-button-container
{:position :absolute
:right 20
:left 20
:bottom 20})
(def details-title-container
{:padding-horizontal 20
:padding-bottom 16})
(defn section-label
[theme]

268
src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs
View File

@ -1,17 +1,18 @@
(ns status-im.contexts.wallet.send.transaction-confirmation.view
(:require
[legacy.status-im.utils.utils :as utils]
[quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im.common.resources :as resources]
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.common.standard-authentication.core :as standard-auth]
[status-im.contexts.wallet.send.transaction-confirmation.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- transaction-title
[]
[{:keys [token-symbol amount account to-address]}]
[rn/view {:style style/content-container}
[rn/view {:style {:flex-direction :row}}
[quo/text
@ -21,7 +22,8 @@
:accessibility-label :send-label}
(i18n/label :t/send)]
[quo/summary-tag
{:label "150 ETH"
{:token token-symbol
:label (str amount " " token-symbol)
:type :token
:image-source :eth}]]
[rn/view
@ -34,10 +36,10 @@
:accessibility-label :send-label}
(i18n/label :t/from)]
[quo/summary-tag
{:label "Collectibles vault"
{:label (:name account)
:type :account
:emoji "🍑"
:customization-color :purple}]]
:emoji (:emoji account)
:customization-color (:color account)}]]
[rn/view
{:style {:flex-direction :row
:margin-top 4}}
@ -48,13 +50,11 @@
: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}]]])
{:type :address
:label (utils/get-shortened-address to-address)}]]])
(defn- transaction-from
[status-account-props theme]
(defn- user-summary
[{:keys [amount account-props theme label accessibility-label summary-type]}]
[rn/view
{:style {:padding-horizontal 20
:padding-bottom 16}}
@ -62,134 +62,134 @@
{:size :paragraph-2
:weight :medium
:style (style/section-label theme)
:accessibility-label :summary-from-label}
(i18n/label :t/from-capitalized)]
:accessibility-label accessibility-label}
label]
[quo/summary-info
{:type :status-account
{:type summary-type
:networks? true
:values {:ethereum 150
:optimism 50
:arbitrum 25}
:account-props status-account-props}]])
(defn- transaction-to
[user-props theme]
[rn/view
{:style {:padding-horizontal 20
:padding-bottom 16}}
[quo/text
{:size :paragraph-2
:weight :medium
:style (style/section-label theme)
: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 user-props}]])
:values {:ethereum amount}
:account-props account-props}]])
(defn- transaction-details
[theme]
[rn/view
{:style {:padding-horizontal 20
:padding-bottom 16}}
[quo/text
{:size :paragraph-2
:weight :medium
:style (style/section-label theme)
: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 (i18n/label :t/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 (i18n/label :t/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 (i18n/label :t/user-gets {:name "Mark"})
:subtitle "149.99 ETH"}]]])
[{:keys [estimated-time-min max-fees token amount to-address theme]}]
(let [currency-symbol (rf/sub [:profile/currency-symbol])]
[rn/view
{:style style/details-title-container}
[quo/text
{:size :paragraph-2
:weight :medium
:style (style/section-label theme)
:accessibility-label :summary-from-label}
(i18n/label :t/details)]
[rn/view
{:style (style/details-container theme)}
[quo/data-item
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? false
:card? false
:label :none
:status :default
:size :small
:title (i18n/label :t/est-time)
:subtitle (i18n/label :t/time-in-mins {:minutes (str estimated-time-min)})}]
[quo/data-item
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? false
:card? false
:label :none
:status :default
:size :small
:title (i18n/label :t/max-fees)
:subtitle (i18n/label :t/amount-with-currency-symbol
{:amount (str max-fees)
:symbol currency-symbol})}]
[quo/data-item
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? false
:card? false
:label :none
:status :default
:size :small
:title (i18n/label :t/user-gets {:name (utils/get-shortened-address to-address)})
:subtitle (str amount " " (:symbol token))}]]]))
(defn- f-view-internal
(defn- view-internal
[_]
(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 "🍔"})}]
(let [on-close #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])
send-transaction-data (rf/sub [:wallet/wallet-send])
token (:token send-transaction-data)
token-symbol (:symbol token)
amount (:amount send-transaction-data)
route (:route send-transaction-data)
estimated-time-min (:estimated-time route)
max-fees "-"
to-address (:to-address send-transaction-data)
account (rf/sub [:wallet/current-viewing-account])
account-color (:color account)
from-account-props {:customization-color account-color
:size 32
:emoji (:emoji account)
:type :default
:name (:name account)
:address (utils/get-shortened-address (:address account))}
user-props {:full-name to-address
:address (utils/get-shortened-address to-address)}]
(prn route)
(fn [{:keys [theme]}]
[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"}]}]
[transaction-title]
[transaction-from status-account-props theme]
[transaction-to user-props theme]
[transaction-details theme]
[rn/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 #(js/alert "Not implemented yet")
:track-icon (if biometric-auth? :i/face-id :password)
:track-text (i18n/label :t/slide-to-send)}]]]])))
(defn view-internal
[props]
[:f> f-view-internal props])
[floating-button-page/view
{:header [quo/page-nav
{:icon-name :i/arrow-left
:on-press on-close
:margin-top (safe-area/get-top)
:background :blur
:accessibility-label :top-bar
:right-side [{:icon-name :i/advanced
:on-press #(js/alert
"to be implemented")
:accessibility-label :advanced-options}]}]
:footer [standard-auth/slide-button
{:size :size-48
:track-text (i18n/label :t/slide-to-send)
:container-style {:z-index 2}
:customization-color account-color
:on-auth-success #(rf/dispatch [:wallet/send-transaction %])
:auth-button-label (i18n/label :t/confirm)}]
:gradient-cover? true
:customization-color (:color account)}
[rn/view
[transaction-title
{:token-symbol token-symbol
:amount amount
:account account
:to-address to-address}]
[user-summary
{:amount amount
:summary-type :status-account
:accessibility-label :summary-from-label
:label (i18n/label :t/from-capitalized)
:account-props from-account-props
:theme theme}]
[user-summary
{:amount amount
:summary-type :account
:accessibility-label :summary-to-label
:label (i18n/label :t/to-capitalized)
:account-props user-props
:theme theme}]
[transaction-details
{:estimated-time-min estimated-time-min
:max-fees max-fees
:token token
:amount amount
:to-address to-address
:theme theme}]]]])))
(def view (quo.theme/with-theme view-internal))

9
src/status_im/contexts/wallet/send/transaction_progress/view.cljs
View File

@ -20,7 +20,10 @@
(defn view
[]
(let [status (reagent/atom :sending)
(let [current-address (rf/sub [:wallet/current-viewing-account-address])
leave-page (fn []
(rf/dispatch [:navigate-to :wallet-accounts current-address]))
status (reagent/atom :sending)
{:keys [color]} (rf/sub [:wallet/current-viewing-account])]
[floating-button-page/view
{:header [quo/page-nav
@ -28,11 +31,11 @@
:background :blur
:icon-name :i/close
:margin-top (safe-area/get-top)
:on-press #(rf/dispatch [:navigate-back])
:on-press leave-page
:accessibility-label :top-bar}]
:footer [quo/button
{:customization-color color
:on-press #(rf/dispatch [:navigate-back])}
:on-press leave-page}
(i18n/label :t/done)]
:customization-color color
:gradient-cover? true}

6
src/status_im/contexts/wallet/send/utils.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns status-im.contexts.wallet.send.utils
(:require [utils.money :as money]))
(defn amount-in-hex
[amount token-decimal]
(money/to-hex (money/mul (money/bignumber amount) (money/from-decimal token-decimal))))

10
src/status_im/contexts/wallet/send/utils_test.cljs Normal file
View File

@ -0,0 +1,10 @@
(ns status-im.contexts.wallet.send.utils-test
(:require [cljs.test :refer [deftest is testing]]
[status-im.contexts.wallet.send.utils :as utils]))
(deftest test-amount-in-hex
(testing "Test amount-in-hex function"
(let [amount 1
decimal 18]
(is (= (utils/amount-in-hex amount decimal)
"0xde0b6b3a7640000")))))

1
src/status_im/navigation/screens.cljs
View File

@ -338,7 +338,6 @@
:component wallet-select-asset/view}
{:name :wallet-transaction-confirmation
:options {:insets {:bottom? true}}
:component wallet-transaction-confirmation/view}
{:name :wallet-transaction-progress

5
src/status_im/subs/wallet/send.cljs
View File

@ -8,3 +8,8 @@
:<- [:wallet/ui]
(fn [ui]
(get-in ui [:send :select-address-tab])))
(rf/reg-sub
:wallet/wallet-send
:<- [:wallet/ui]
:-> :send)

5
src/status_im/subs/wallet/wallet.cljs
View File

@ -29,11 +29,6 @@
:<- [:wallet]
:-> :ui)
(rf/reg-sub
:wallet/wallet-send
:<- [:wallet/ui]
:-> :send)
(rf/reg-sub
:wallet/tokens-loading?
:<- [:wallet/ui]

3
src/utils/money.cljs
View File

@ -247,6 +247,3 @@
[:=> [:cat [:maybe :int]]
[:maybe :string]])
(defn amount-in-hex
[amount token-decimal]
(to-hex (mul (bignumber amount) (from-decimal token-decimal))))

4
translations/en.json
View File

@ -2447,5 +2447,7 @@
"no-relevant-tokens": "No relevant tokens",
"from-label": "From",
"to-label": "To",
"oops-wrong-word": "Oops! Wrong word"
"oops-wrong-word": "Oops! Wrong word",
"time-in-mins": "{{minutes}} min",
"amount-with-currency-symbol": "{{symbol}} {{amount}}"
}