[BUG #2881] Migrated wallet main screen to latest mockups
|
@ -9197,4 +9197,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<rect id="Rectangle-9" x="4" y="7" width="16" height="2" rx="1" />
|
<rect id="Rectangle-9" x="4" y="7" width="16" height="2" rx="1" />
|
||||||
<rect id="Rectangle-9" x="6" y="11" width="12" height="2" rx="1" />
|
<rect id="Rectangle-9" x="6" y="11" width="12" height="2" rx="1" />
|
||||||
|
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 396 B |
|
@ -1,4 +1,4 @@
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path fill="" d="M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon">
|
<path fill="" d="M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon">
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 843 B After Width: | Height: | Size: 825 B |
|
@ -1,3 +1,3 @@
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path fill="" d="M12.2559385,5.07823738 L7.65424355,11.1734058 C7.64404466,11.1891311 7.63564653,11.2059534 7.62920748,11.2235556 C7.58177398,11.3532234 7.64843799,11.4967923 7.7781057,11.5442257 L9.96725492,12.3450342 C11.0857046,12.7541722 11.8136967,13.8367442 11.7707182,15.0269023 L11.6076877,18.5415284 L15.9083371,12.169203 C15.976325,12.0124611 15.9163264,11.8659814 15.7889745,11.8126415 L12.7760403,10.5507067 C12.0568154,10.2494672 11.6236676,10.5087149 11.7138462,9.73418434 L12.2559385,5.07823738 Z M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon"></path>
|
<path fill="" d="M12.2559385,5.07823738 L7.65424355,11.1734058 C7.64404466,11.1891311 7.63564653,11.2059534 7.62920748,11.2235556 C7.58177398,11.3532234 7.64843799,11.4967923 7.7781057,11.5442257 L9.96725492,12.3450342 C11.0857046,12.7541722 11.8136967,13.8367442 11.7707182,15.0269023 L11.6076877,18.5415284 L15.9083371,12.169203 C15.976325,12.0124611 15.9163264,11.8659814 15.7889745,11.8126415 L12.7760403,10.5507067 C12.0568154,10.2494672 11.6236676,10.5087149 11.7138462,9.73418434 L12.2559385,5.07823738 Z M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
@ -1,4 +1,4 @@
|
||||||
<svg >
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<path fill="000000" d="M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z" id="Oval-7"></path>
|
<path fill="000000" d="M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z" id="Oval-7"></path>
|
||||||
<path fill="000000" d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z" id="Oval-7"></path>
|
<path fill="000000" d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z" id="Oval-7"></path>
|
||||||
</svg >
|
</svg >
|
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 737 B |
|
@ -1,4 +1,4 @@
|
||||||
<svg width="24px" height="24px">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
<g fill-rule="nonzero" fill="#000000">
|
<g fill-rule="nonzero" fill="#000000">
|
||||||
<path d="M13,5.41421356 L13,14 C13,14.5522847 12.5522847,15 12,15 C11.4477153,15 11,14.5522847 11,14 L11,5.41421356 L8.70710678,7.70710678 C8.31658249,8.09763107 7.68341751,8.09763107 7.29289322,7.70710678 C6.90236893,7.31658249 6.90236893,6.68341751 7.29289322,6.29289322 L11.2928932,2.29289322 C11.6834175,1.90236893 12.3165825,1.90236893 12.7071068,2.29289322 L16.7071068,6.29289322 C17.0976311,6.68341751 17.0976311,7.31658249 16.7071068,7.70710678 C16.3165825,8.09763107 15.6834175,8.09763107 15.2928932,7.70710678 L13,5.41421356 L13,5.41421356 Z M3,11 C3,10.4477153 3.44771525,10 4,10 C4.55228475,10 5,10.4477153 5,11 L5,18 C5,18.5522847 5.44771525,19 6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,11 C19,10.4477153 19.4477153,10 20,10 C20.5522847,10 21,10.4477153 21,11 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,11 Z"></path>
|
<path d="M13,5.41421356 L13,14 C13,14.5522847 12.5522847,15 12,15 C11.4477153,15 11,14.5522847 11,14 L11,5.41421356 L8.70710678,7.70710678 C8.31658249,8.09763107 7.68341751,8.09763107 7.29289322,7.70710678 C6.90236893,7.31658249 6.90236893,6.68341751 7.29289322,6.29289322 L11.2928932,2.29289322 C11.6834175,1.90236893 12.3165825,1.90236893 12.7071068,2.29289322 L16.7071068,6.29289322 C17.0976311,6.68341751 17.0976311,7.31658249 16.7071068,7.70710678 C16.3165825,8.09763107 15.6834175,8.09763107 15.2928932,7.70710678 L13,5.41421356 L13,5.41421356 Z M3,11 C3,10.4477153 3.44771525,10 4,10 C4.55228475,10 5,10.4477153 5,11 L5,18 C5,18.5522847 5.44771525,19 6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,11 C19,10.4477153 19.4477153,10 20,10 C20.5522847,10 21,10.4477153 21,11 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,11 Z"></path>
|
||||||
</g>
|
</g>
|
||||||
|
|
Before Width: | Height: | Size: 979 B After Width: | Height: | Size: 1.0 KiB |
|
@ -1,3 +1,3 @@
|
||||||
<svg width="16px" height="8px" viewBox="0 0 16 8">
|
<svg width="16" height="8" viewBox="0 0 16 8">
|
||||||
<path fill="none" d="M0,0 L15.969209,0.0223819541 L9.39011025,6.60148066 C8.60906167,7.38252924 7.34273171,7.38252924 6.56168312,6.60148066 L6.55741249,6.59719708 L0,0 Z"/>
|
<path fill="none" d="M0,0 L15.969209,0.0223819541 L9.39011025,6.60148066 C8.60906167,7.38252924 7.34273171,7.38252924 6.56168312,6.60148066 L6.55741249,6.59719708 L0,0 Z"/>
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 230 B |
|
@ -1,9 +1,8 @@
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-108 65.9 24 24" >
|
||||||
width="24px" height="24px" viewBox="-108 65.9 24 24" style="enable-background:new -108 65.9 24 24;" xml:space="preserve">
|
<g>
|
||||||
<g fill="">
|
<path fill="" d="M-89.4,75.9l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l4-4c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.6-0.3-0.8l-4-4
|
||||||
<path d="M-89.4,75.9l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l4-4c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.6-0.3-0.8l-4-4
|
|
||||||
c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l2.3,2.3H-97c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1H-89.4z"/>
|
c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l2.3,2.3H-97c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1H-89.4z"/>
|
||||||
<path d="M-102.6,81.9h7.6c0.5,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7.6l2.3-2.3c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0l-4,4
|
<path fill="" d="M-102.6,81.9h7.6c0.5,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7.6l2.3-2.3c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0l-4,4
|
||||||
c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.2,0.1,0.4,0.3,0.6l4,4c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4L-102.6,81.9z"/>
|
c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.2,0.1,0.4,0.3,0.6l4,4c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4L-102.6,81.9z"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 728 B After Width: | Height: | Size: 577 B |
|
@ -94,7 +94,6 @@
|
||||||
:in-contacts "In contacts"
|
:in-contacts "In contacts"
|
||||||
:remove-from-contacts "Remove from contacts"
|
:remove-from-contacts "Remove from contacts"
|
||||||
:start-conversation "Start conversation"
|
:start-conversation "Start conversation"
|
||||||
:send-transaction "Send transaction"
|
|
||||||
:testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address"
|
:testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address"
|
||||||
:mainnet-text "You’re on the Mainnet. Real ETH will be sent"
|
:mainnet-text "You’re on the Mainnet. Real ETH will be sent"
|
||||||
|
|
||||||
|
@ -310,8 +309,6 @@
|
||||||
:wallet-manage-assets "Manage Assets"
|
:wallet-manage-assets "Manage Assets"
|
||||||
:signing-phrase-description "Sign the transaction by entering your password. Make sure that the words above match your secret signing phrase"
|
:signing-phrase-description "Sign the transaction by entering your password. Make sure that the words above match your secret signing phrase"
|
||||||
:wallet-insufficient-funds "Insufficient funds"
|
:wallet-insufficient-funds "Insufficient funds"
|
||||||
:wallet-my-token "My {{symbol}}"
|
|
||||||
:wallet-market-value "Market value"
|
|
||||||
:request-transaction "Request transaction"
|
:request-transaction "Request transaction"
|
||||||
:send-request "Send request"
|
:send-request "Send request"
|
||||||
:share "Share"
|
:share "Share"
|
||||||
|
@ -344,6 +341,9 @@
|
||||||
:sign-later-title "Sign transaction later?"
|
:sign-later-title "Sign transaction later?"
|
||||||
:sign-later-text "Check the transaction history to sign this transaction"
|
:sign-later-text "Check the transaction history to sign this transaction"
|
||||||
:not-applicable "Not applicable for unsigned transactions"
|
:not-applicable "Not applicable for unsigned transactions"
|
||||||
|
:send-transaction "Send transaction"
|
||||||
|
:receive-transaction "Receive transaction"
|
||||||
|
:transaction-history "Transaction History"
|
||||||
|
|
||||||
;; Wallet Send
|
;; Wallet Send
|
||||||
:wallet-choose-recipient "Choose Recipient"
|
:wallet-choose-recipient "Choose Recipient"
|
||||||
|
|
|
@ -124,7 +124,7 @@
|
||||||
:move-to-internal-failure-message "いくつかの重要なファイルを外部メディアに保存します。続行するには、許可が必要です。(将来的には外部メディアを使用しないようにします。)"
|
:move-to-internal-failure-message "いくつかの重要なファイルを外部メディアに保存します。続行するには、許可が必要です。(将来的には外部メディアを使用しないようにします。)"
|
||||||
:debug-enabled "デバッグサーバーを起動しました! *status-dev-cli scan*を実行すると、同じネットワーク上のコンピュータからサーバーを見つけることができます。"
|
:debug-enabled "デバッグサーバーを起動しました! *status-dev-cli scan*を実行すると、同じネットワーク上のコンピュータからサーバーを見つけることができます。"
|
||||||
|
|
||||||
;;phone types
|
;;phone types
|
||||||
:phone-e164 "国際 1"
|
:phone-e164 "国際 1"
|
||||||
:phone-international "国際 2"
|
:phone-international "国際 2"
|
||||||
:phone-national "国内"
|
:phone-national "国内"
|
||||||
|
@ -304,8 +304,6 @@
|
||||||
:wallet-manage-assets "資産の管理"
|
:wallet-manage-assets "資産の管理"
|
||||||
:signing-phrase-description "パスワードを入力して取引に署名します。 上記の単語があなたの秘密の署名句に一致することを確認してください"
|
:signing-phrase-description "パスワードを入力して取引に署名します。 上記の単語があなたの秘密の署名句に一致することを確認してください"
|
||||||
:wallet-insufficient-funds "残高不足"
|
:wallet-insufficient-funds "残高不足"
|
||||||
:wallet-my-token "わたしの {{symbol}}"
|
|
||||||
:wallet-market-value "市場価値"
|
|
||||||
:request-transaction "取引をリクエストする"
|
:request-transaction "取引をリクエストする"
|
||||||
:send-request "リクエストを送信する"
|
:send-request "リクエストを送信する"
|
||||||
:share "シェア"
|
:share "シェア"
|
||||||
|
|
|
@ -305,8 +305,6 @@
|
||||||
:wallet-manage-assets "Hantera tillgångar"
|
:wallet-manage-assets "Hantera tillgångar"
|
||||||
:signing-phrase-description "Skriv under transaktionen genom att ange ditt lösenord. Kontrollera att orden ovan motsvarar din hemliga underskriftsfras"
|
:signing-phrase-description "Skriv under transaktionen genom att ange ditt lösenord. Kontrollera att orden ovan motsvarar din hemliga underskriftsfras"
|
||||||
:wallet-insufficient-funds "Otillräckligt kapital"
|
:wallet-insufficient-funds "Otillräckligt kapital"
|
||||||
:wallet-my-token "Mina {{symbol}}"
|
|
||||||
:wallet-market-value "Marknadsvärde"
|
|
||||||
:request-transaction "Begär transaktion"
|
:request-transaction "Begär transaktion"
|
||||||
:send-request "Skicka begäran"
|
:send-request "Skicka begäran"
|
||||||
:share "Dela"
|
:share "Dela"
|
||||||
|
|
|
@ -305,8 +305,6 @@
|
||||||
:wallet-manage-assets "Управління Активами"
|
:wallet-manage-assets "Управління Активами"
|
||||||
:signing-phrase-description "Підпишіть транзакцію, ввівши свій пароль. Переконайтеся, що слова вище відповідають вашій секретній фразі підпису"
|
:signing-phrase-description "Підпишіть транзакцію, ввівши свій пароль. Переконайтеся, що слова вище відповідають вашій секретній фразі підпису"
|
||||||
:wallet-insufficient-funds "Недостатньо коштів"
|
:wallet-insufficient-funds "Недостатньо коштів"
|
||||||
:wallet-my-token "Мій {{symbol}}"
|
|
||||||
:wallet-market-value "Ринкова вартість"
|
|
||||||
:request-transaction "Запит транзакції"
|
:request-transaction "Запит транзакції"
|
||||||
:send-request "Надіслати запит"
|
:send-request "Надіслати запит"
|
||||||
:share "Поділитися"
|
:share "Поділитися"
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
(ns status-im.ui.components.action-sheet
|
||||||
|
(:require [status-im.i18n :as i18n]
|
||||||
|
[status-im.utils.utils :as utils]
|
||||||
|
[status-im.react-native.js-dependencies :as rn-dependencies]))
|
||||||
|
|
||||||
|
(defn- callback [options]
|
||||||
|
(fn [index]
|
||||||
|
(when (< index (count options))
|
||||||
|
(when-let [handler (:actione (nth options index))]
|
||||||
|
(handler)))))
|
||||||
|
|
||||||
|
(defn- options [options]
|
||||||
|
(let [destructive-opt-index (utils/first-index :destructive? options)] ;; TODO Can only be a single destructive?
|
||||||
|
(clj->js (merge {:options (conj (mapv :label options) (i18n/label :t/cancel))
|
||||||
|
:cancelButtonIndex (count options)}
|
||||||
|
(when destructive-opt-index
|
||||||
|
{:destructiveButtonIndex destructive-opt-index})))))
|
||||||
|
|
||||||
|
(defn show [{:keys [title message options callback]}]
|
||||||
|
(.showActionSheetWithOptions (.-ActionSheetIOS rn-dependencies/react-native)
|
||||||
|
(merge (options options)
|
||||||
|
(when title {:title title})
|
||||||
|
(when message {:message message}))
|
||||||
|
callback))
|
|
@ -0,0 +1,6 @@
|
||||||
|
(ns status-im.ui.components.colors)
|
||||||
|
|
||||||
|
(def white "#ffffff")
|
||||||
|
(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color on dark background
|
||||||
|
(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background
|
||||||
|
(def blue "#4360df") ;; Used as main wallet color
|
|
@ -4,7 +4,8 @@
|
||||||
[status-im.utils.platform :as platform]
|
[status-im.utils.platform :as platform]
|
||||||
[status-im.ui.components.styles :as styles]
|
[status-im.ui.components.styles :as styles]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.react-native.js-dependencies :as rn-dependencies]))
|
[status-im.react-native.js-dependencies :as rn-dependencies])
|
||||||
|
(:refer-clojure :exclude [use]))
|
||||||
|
|
||||||
(defn get-property [name]
|
(defn get-property [name]
|
||||||
(aget rn-dependencies/svg name))
|
(aget rn-dependencies/svg name))
|
||||||
|
@ -20,7 +21,7 @@
|
||||||
(def g (get-class "G"))
|
(def g (get-class "G"))
|
||||||
(def rect (get-class "Rect"))
|
(def rect (get-class "Rect"))
|
||||||
(def path (get-class "Path"))
|
(def path (get-class "Path"))
|
||||||
(def use-def (get-class "Use"))
|
(def use (get-class "Use"))
|
||||||
(def defs (get-class "Defs"))
|
(def defs (get-class "Defs"))
|
||||||
|
|
||||||
(def icons {:icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg")
|
(def icons {:icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg")
|
||||||
|
@ -78,8 +79,6 @@
|
||||||
(if platform/ios? :icons/dots-horizontal :icons/dots-vertical)
|
(if platform/ios? :icons/dots-horizontal :icons/dots-vertical)
|
||||||
n))
|
n))
|
||||||
|
|
||||||
(def default-viewbox {:width 24 :height 24 :viewBox "0 0 24 24"})
|
|
||||||
|
|
||||||
(defn icon
|
(defn icon
|
||||||
([name] (icon name nil))
|
([name] (icon name nil))
|
||||||
([name {:keys [color container-style style accessibility-label]
|
([name {:keys [color container-style style accessibility-label]
|
||||||
|
@ -88,22 +87,19 @@
|
||||||
[react/view {:style container-style
|
[react/view {:style container-style
|
||||||
:accessibility-label accessibility-label}
|
:accessibility-label accessibility-label}
|
||||||
(if-let [icon-fn (get icons (normalize-property-name name))]
|
(if-let [icon-fn (get icons (normalize-property-name name))]
|
||||||
(into []
|
(icon-fn
|
||||||
(concat
|
(cond
|
||||||
[svg (merge default-viewbox style)]
|
(keyword? color)
|
||||||
(icon-fn
|
(case color
|
||||||
(cond
|
:dark styles/icon-dark-color
|
||||||
(keyword? color)
|
:gray styles/icon-gray-color
|
||||||
(case color
|
:blue styles/color-light-blue
|
||||||
:dark styles/icon-dark-color
|
:active styles/color-blue4
|
||||||
:gray styles/icon-gray-color
|
:white styles/color-white
|
||||||
:blue styles/color-light-blue
|
:red styles/icon-red-color
|
||||||
:active styles/color-blue4
|
styles/icon-dark-color)
|
||||||
:white styles/color-white
|
(string? color)
|
||||||
:red styles/icon-red-color
|
color
|
||||||
styles/icon-dark-color)
|
:else
|
||||||
(string? color)
|
styles/icon-dark-color))
|
||||||
color
|
|
||||||
:else
|
|
||||||
styles/icon-dark-color))))
|
|
||||||
(throw (js/Error. (str "Unknown icon: " name))))]))
|
(throw (js/Error. (str "Unknown icon: " name))))]))
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
[status-im.utils.platform :as platform]))
|
[status-im.utils.platform :as platform]))
|
||||||
|
|
||||||
(def item
|
(def item
|
||||||
{:flex-direction :row})
|
{:flex-direction :row
|
||||||
|
:justify-content :center
|
||||||
|
:height 64})
|
||||||
|
|
||||||
(def item-content-view
|
(def item-content-view
|
||||||
{:flex 1
|
{:flex 1
|
||||||
|
@ -27,7 +29,7 @@
|
||||||
|
|
||||||
(def primary-text-only
|
(def primary-text-only
|
||||||
(merge primary-text-base
|
(merge primary-text-base
|
||||||
{:padding-vertical 22}))
|
{:padding-vertical 16}))
|
||||||
|
|
||||||
(def secondary-text
|
(def secondary-text
|
||||||
{:font-size 16
|
{:font-size 16
|
||||||
|
@ -38,20 +40,35 @@
|
||||||
{:width 40
|
{:width 40
|
||||||
:height 40})
|
:height 40})
|
||||||
|
|
||||||
|
(def icon-size 24)
|
||||||
|
(def icon-wrapper-size (+ icon-size (* 2 8)))
|
||||||
|
|
||||||
|
(def item-icon-wrapper
|
||||||
|
{:width icon-wrapper-size
|
||||||
|
:height icon-wrapper-size
|
||||||
|
:align-items :center
|
||||||
|
:justify-content :center})
|
||||||
|
|
||||||
(def item-icon
|
(def item-icon
|
||||||
{:width 24
|
{:width icon-size
|
||||||
:height 24})
|
:height icon-size})
|
||||||
|
|
||||||
|
(def horizontal-margin 16)
|
||||||
|
(def vertical-margin 12)
|
||||||
|
|
||||||
(def left-item-wrapper
|
(def left-item-wrapper
|
||||||
{:margin 14})
|
{:justify-content :center
|
||||||
|
:margin-left horizontal-margin
|
||||||
|
:margin-vertical vertical-margin})
|
||||||
|
|
||||||
(def content-item-wrapper
|
(def content-item-wrapper
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:margin-right 16})
|
:justify-content :center
|
||||||
|
:margin-left horizontal-margin})
|
||||||
|
|
||||||
(def right-item-wrapper
|
(def right-item-wrapper
|
||||||
{:margin-right 16
|
{:justify-content :center
|
||||||
:justify-content :center})
|
:margin-right horizontal-margin})
|
||||||
|
|
||||||
(def base-separator
|
(def base-separator
|
||||||
{:height 1
|
{:height 1
|
||||||
|
|
|
@ -19,9 +19,9 @@
|
||||||
[section-list {:sections [{:title \"\" :key :unik :render-fn render :data {:title \"\" :subtitle \"\"}}]}]
|
[section-list {:sections [{:title \"\" :key :unik :render-fn render :data {:title \"\" :subtitle \"\"}}]}]
|
||||||
"
|
"
|
||||||
(:require [reagent.core :as reagent]
|
(:require [reagent.core :as reagent]
|
||||||
[reagent.impl.template :as temp]
|
|
||||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
|
||||||
[status-im.ui.components.checkbox.view :as checkbox]
|
[status-im.ui.components.checkbox.view :as checkbox]
|
||||||
|
[status-im.ui.components.colors :as colors]
|
||||||
|
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||||
[status-im.ui.components.list.styles :as styles]
|
[status-im.ui.components.list.styles :as styles]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.utils.platform :as platform]))
|
[status-im.utils.platform :as platform]))
|
||||||
|
@ -49,7 +49,7 @@
|
||||||
(defn item-icon
|
(defn item-icon
|
||||||
[{:keys [icon style icon-opts]}]
|
[{:keys [icon style icon-opts]}]
|
||||||
{:pre [(not (nil? icon))]}
|
{:pre [(not (nil? icon))]}
|
||||||
[react/view {:style style}
|
[react/view {:style (merge styles/item-icon-wrapper style)}
|
||||||
[vector-icons/icon icon (merge icon-opts {:style styles/item-icon})]])
|
[vector-icons/icon icon (merge icon-opts {:style styles/item-icon})]])
|
||||||
|
|
||||||
(defn item-image
|
(defn item-image
|
||||||
|
@ -63,8 +63,10 @@
|
||||||
[react/text {:style styles/primary-text} primary])
|
[react/text {:style styles/primary-text} primary])
|
||||||
|
|
||||||
(defn item-primary-only
|
(defn item-primary-only
|
||||||
[primary]
|
([s] (item-primary-only nil s))
|
||||||
[react/text {:style styles/primary-text-only} primary])
|
([{:keys [style]} s]
|
||||||
|
[react/text {:style (merge styles/primary-text-only style)}
|
||||||
|
s]))
|
||||||
|
|
||||||
(defn item-secondary
|
(defn item-secondary
|
||||||
[secondary]
|
[secondary]
|
||||||
|
@ -79,6 +81,11 @@
|
||||||
[react/view {:style (merge style styles/item-checkbox)}
|
[react/view {:style (merge style styles/item-checkbox)}
|
||||||
[checkbox/checkbox props]])
|
[checkbox/checkbox props]])
|
||||||
|
|
||||||
|
(def item-icon-forward
|
||||||
|
[item-icon {:style styles/item-icon
|
||||||
|
:icon :icons/forward
|
||||||
|
:icon-opts {:color colors/white-transparent}}])
|
||||||
|
|
||||||
(defn- wrap-render-fn [f]
|
(defn- wrap-render-fn [f]
|
||||||
(fn [data]
|
(fn [data]
|
||||||
(reagent/as-element (f (.-item data) (.-index data) (.-separators data)))))
|
(reagent/as-element (f (.-item data) (.-index data) (.-separators data)))))
|
||||||
|
@ -109,7 +116,7 @@
|
||||||
(-clj->js [x] (.-value x))
|
(-clj->js [x] (.-value x))
|
||||||
(-key->js [x] (.-value x))
|
(-key->js [x] (.-value x))
|
||||||
IEncodeClojure
|
IEncodeClojure
|
||||||
(-js->clj [x options] (.-value x)))
|
(-js->clj [x _] (.-value x)))
|
||||||
|
|
||||||
(defn- to-js-array
|
(defn- to-js-array
|
||||||
"Converts a collection to a JS array (but leave content as is)"
|
"Converts a collection to a JS array (but leave content as is)"
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
(ns status-im.ui.components.sortable-list-view
|
(ns status-im.ui.components.sortable-list-view
|
||||||
(:require [reagent.core :as r]
|
(:require [reagent.core :as r]
|
||||||
[status-im.ui.components.react :refer [view
|
[status-im.ui.components.react :as react]
|
||||||
touchable-highlight
|
|
||||||
list-item]]
|
|
||||||
[status-im.react-native.js-dependencies :as rn-dependencies]))
|
[status-im.react-native.js-dependencies :as rn-dependencies]))
|
||||||
|
|
||||||
(def sortable-listview-class
|
(def sortable-listview-class
|
||||||
|
@ -13,10 +11,10 @@
|
||||||
(assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true))
|
(assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true))
|
||||||
:render-row #(render-row (js->clj % :keywordize-keys true)))])
|
:render-row #(render-row (js->clj % :keywordize-keys true)))])
|
||||||
|
|
||||||
(defn touchable [inner]
|
(defn- touchable [inner]
|
||||||
[touchable-highlight (js->clj (.-props (r/current-component)))
|
[react/touchable-highlight (js->clj (.-props (r/current-component)))
|
||||||
[view
|
[react/view
|
||||||
inner]])
|
inner]])
|
||||||
|
|
||||||
(defn sortable-item [inner]
|
(defn sortable-item [inner]
|
||||||
(list-item [touchable inner]))
|
(react/list-item [touchable inner]))
|
||||||
|
|
|
@ -80,9 +80,8 @@
|
||||||
{:ios (create-status-bar-style {:background-color styles/color-blue4})
|
{:ios (create-status-bar-style {:background-color styles/color-blue4})
|
||||||
:android (create-status-bar-style {:translucent? true})})
|
:android (create-status-bar-style {:translucent? true})})
|
||||||
|
|
||||||
(defstyle view-wallet
|
(def view-wallet
|
||||||
{:ios (create-view-style {:background-color styles/color-blue4})
|
(create-view-style {:background-color styles/color-blue4}))
|
||||||
:android (create-view-style {:background-color styles/color-blue5})})
|
|
||||||
|
|
||||||
;; :default
|
;; :default
|
||||||
(defstyle status-bar-default
|
(defstyle status-bar-default
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
(ns status-im.ui.components.status-bar.view
|
(ns status-im.ui.components.status-bar.view
|
||||||
(:require [status-im.ui.components.react :as ui]
|
(:require [status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.status-bar.styles :as styles]))
|
[status-im.ui.components.status-bar.styles :as styles]))
|
||||||
|
|
||||||
(defn status-bar [{type :type}]
|
(defn status-bar [{type :type}]
|
||||||
|
@ -13,6 +13,6 @@
|
||||||
:transaction [styles/status-bar-transaction styles/view-transaction]
|
:transaction [styles/status-bar-transaction styles/view-transaction]
|
||||||
:wallet [styles/status-bar-wallet styles/view-wallet]
|
:wallet [styles/status-bar-wallet styles/view-wallet]
|
||||||
[styles/status-bar-default styles/view-default])]
|
[styles/status-bar-default styles/view-default])]
|
||||||
[ui/view
|
[react/view
|
||||||
[ui/status-bar status-bar-style]
|
[react/status-bar status-bar-style]
|
||||||
[ui/view {:style view-style}]]))
|
[react/view {:style view-style}]]))
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
(defn list-white [handler]
|
(defn list-white [handler]
|
||||||
{:icon :icons/transaction-history
|
{:icon :icons/transaction-history
|
||||||
:icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}}
|
:icon-opts {:color :white}
|
||||||
:handler handler})
|
:handler handler})
|
||||||
|
|
||||||
(defn add-wallet [handler]
|
(defn add-wallet [handler]
|
||||||
|
|
|
@ -14,8 +14,6 @@
|
||||||
status-im.ui.screens.wallet.send.subs
|
status-im.ui.screens.wallet.send.subs
|
||||||
status-im.ui.screens.wallet.settings.subs
|
status-im.ui.screens.wallet.settings.subs
|
||||||
status-im.ui.screens.wallet.transactions.subs
|
status-im.ui.screens.wallet.transactions.subs
|
||||||
status-im.ui.screens.wallet.wallet-list.subs
|
|
||||||
status-im.ui.screens.wallet.assets.subs
|
|
||||||
status-im.ui.screens.network-settings.subs
|
status-im.ui.screens.network-settings.subs
|
||||||
status-im.bots.subs))
|
status-im.bots.subs))
|
||||||
|
|
||||||
|
|
|
@ -37,22 +37,17 @@
|
||||||
[status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal]]
|
[status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal]]
|
||||||
[status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]]
|
[status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]]
|
||||||
[status-im.ui.screens.wallet.request.views :refer [request-transaction]]
|
[status-im.ui.screens.wallet.request.views :refer [request-transaction]]
|
||||||
[status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]]
|
|
||||||
[status-im.ui.screens.wallet.components.views :as wallet.components]
|
[status-im.ui.screens.wallet.components.views :as wallet.components]
|
||||||
[status-im.ui.screens.wallet.send.views :as wallet.send]
|
[status-im.ui.screens.wallet.send.views :as wallet.send]
|
||||||
[status-im.ui.screens.wallet.settings.views :as wallet-settings]
|
[status-im.ui.screens.wallet.settings.views :as wallet-settings]
|
||||||
[status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
|
[status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
|
||||||
[status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]]
|
[status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]]
|
||||||
[status-im.ui.screens.wallet.assets.views :as wallet-assets]
|
|
||||||
|
|
||||||
[status-im.ui.components.status-bar.view :as status-bar]
|
[status-im.ui.components.status-bar.view :as status-bar]
|
||||||
|
|
||||||
[status-im.ui.screens.discover.search-results.views :as discover-search]
|
[status-im.ui.screens.discover.search-results.views :as discover-search]
|
||||||
[status-im.ui.screens.discover.recent-statuses.views :as discover-recent]
|
[status-im.ui.screens.discover.recent-statuses.views :as discover-recent]
|
||||||
[status-im.ui.screens.discover.all-dapps.views :as discover-all-dapps]
|
[status-im.ui.screens.discover.all-dapps.views :as discover-all-dapps]
|
||||||
[status-im.ui.screens.discover.popular-hashtags.views :as discover-popular]
|
[status-im.ui.screens.discover.popular-hashtags.views :as discover-popular]
|
||||||
[status-im.ui.screens.discover.dapp-details.views :as discover-dapp-details]
|
[status-im.ui.screens.discover.dapp-details.views :as discover-dapp-details]
|
||||||
|
|
||||||
[status-im.ui.screens.network-settings.views :refer [network-settings]]
|
[status-im.ui.screens.network-settings.views :refer [network-settings]]
|
||||||
[status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]]
|
[status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]]
|
||||||
[status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]]
|
[status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]]
|
||||||
|
@ -74,14 +69,12 @@
|
||||||
(let [current-view (validate-current-view view-id signed-up?)]
|
(let [current-view (validate-current-view view-id signed-up?)]
|
||||||
(let [component (case current-view
|
(let [component (case current-view
|
||||||
(:home :wallet :my-profile) main-tabs
|
(:home :wallet :my-profile) main-tabs
|
||||||
:wallet-list wallet-list-screen
|
|
||||||
:wallet-send-transaction send-transaction
|
:wallet-send-transaction send-transaction
|
||||||
:wallet-transaction-sent transaction-sent
|
:wallet-transaction-sent transaction-sent
|
||||||
:choose-recipient choose-recipient
|
:choose-recipient choose-recipient
|
||||||
:wallet-request-transaction request-transaction
|
:wallet-request-transaction request-transaction
|
||||||
(:transactions-history :unsigned-transactions) wallet-transactions/transactions
|
(:transactions-history :unsigned-transactions) wallet-transactions/transactions
|
||||||
:wallet-transaction-details wallet-transactions/transaction-details
|
:wallet-transaction-details wallet-transactions/transaction-details
|
||||||
(:wallet-my-token :wallet-market-value) wallet-assets/my-token-main
|
|
||||||
:wallet-send-assets wallet.components/send-assets
|
:wallet-send-assets wallet.components/send-assets
|
||||||
:wallet-request-assets wallet.components/request-assets
|
:wallet-request-assets wallet.components/request-assets
|
||||||
:new-chat new-chat
|
:new-chat new-chat
|
||||||
|
|
|
@ -1,123 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.styles
|
|
||||||
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
|
|
||||||
(:require [status-im.ui.components.styles :as styles]
|
|
||||||
[status-im.ui.screens.main-tabs.styles :as tabs.styles]
|
|
||||||
[status-im.utils.platform :as platform]))
|
|
||||||
|
|
||||||
;; TODO(goranjovic) - the following styles will be removed once reusable components
|
|
||||||
;; from other Wallet screens have been generalized and extracted
|
|
||||||
;; The main difference is in colors - Wallet main screen uses blue background and
|
|
||||||
;; white or very light text colors, while on assets screens its usually black text on white background
|
|
||||||
|
|
||||||
(defnstyle tab [active?]
|
|
||||||
{:flex 1
|
|
||||||
:height tabs.styles/tab-height
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center
|
|
||||||
:border-bottom-width (if active? 2 1)
|
|
||||||
:border-bottom-color (if active?
|
|
||||||
styles/color-blue4
|
|
||||||
styles/color-gray10-transparent)})
|
|
||||||
|
|
||||||
(def tabs-container
|
|
||||||
{:flex-direction :row})
|
|
||||||
|
|
||||||
(defnstyle tab-title [active?]
|
|
||||||
{:ios {:font-size 15}
|
|
||||||
:android {:font-size 14}
|
|
||||||
:text-align :center
|
|
||||||
:color (if active?
|
|
||||||
styles/color-blue4
|
|
||||||
styles/color-black)})
|
|
||||||
|
|
||||||
(def total-balance-container
|
|
||||||
{:padding-top 20
|
|
||||||
:padding-bottom 24
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center})
|
|
||||||
|
|
||||||
(def total-balance
|
|
||||||
{:flex-direction :row})
|
|
||||||
|
|
||||||
(def total-balance-value
|
|
||||||
{:font-size 37
|
|
||||||
:color styles/color-black})
|
|
||||||
|
|
||||||
(defstyle total-balance-currency
|
|
||||||
{:font-size 37
|
|
||||||
:margin-left 9
|
|
||||||
:color styles/color-gray4
|
|
||||||
:android {:letter-spacing 1.5}
|
|
||||||
:ios {:letter-spacing 1.16}})
|
|
||||||
|
|
||||||
(def value-variation
|
|
||||||
{:flex-direction :row
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(defstyle value-variation-title
|
|
||||||
{:font-size 14
|
|
||||||
:color styles/color-gray4
|
|
||||||
:android {:letter-spacing -0.18}
|
|
||||||
:ios {:letter-spacing -0.2}})
|
|
||||||
|
|
||||||
(defstyle main-button-text
|
|
||||||
{:color styles/color-blue4
|
|
||||||
:padding-horizontal nil
|
|
||||||
:android {:font-size 13
|
|
||||||
:letter-spacing 0.46}
|
|
||||||
:ios {:font-size 15
|
|
||||||
:letter-spacing -0.2}})
|
|
||||||
|
|
||||||
(defstyle transactions-title
|
|
||||||
{:margin-left 16
|
|
||||||
:color styles/color-gray4})
|
|
||||||
|
|
||||||
;; TODO(goranjovic): Generalize this and the set of buttons from main Wallet screen
|
|
||||||
;; into a single component e.g. button-set that would receive an ordered collection
|
|
||||||
;; of button descriptions (text, handler, disabled?, etc) and render them properly
|
|
||||||
;; while managing the position dependent formatting under the hood.
|
|
||||||
;; https://github.com/status-im/status-react/issues/2492
|
|
||||||
(defn- border [position]
|
|
||||||
(let [radius (if platform/ios? 8 4)]
|
|
||||||
(case position
|
|
||||||
:first {:border-bottom-left-radius radius
|
|
||||||
:border-top-left-radius radius
|
|
||||||
:ios {:border-width 1}
|
|
||||||
:border-right-color styles/color-blue4}
|
|
||||||
:last {:border-bottom-right-radius radius
|
|
||||||
:border-top-right-radius radius
|
|
||||||
:ios {:border-top-width 1
|
|
||||||
:border-right-width 1
|
|
||||||
:border-bottom-width 1}}
|
|
||||||
{:android {:border-left-width 1
|
|
||||||
:border-right-width 1}
|
|
||||||
:ios {:border-top-width 1
|
|
||||||
:border-right-width 1
|
|
||||||
:border-bottom-width 1}
|
|
||||||
:border-right-color styles/color-blue4})))
|
|
||||||
|
|
||||||
(defnstyle button-bar [position]
|
|
||||||
(merge {:border-color styles/color-white-transparent-3
|
|
||||||
:background-color styles/color-blue4-transparent}
|
|
||||||
(border position)))
|
|
||||||
|
|
||||||
(def token-toolbar-container
|
|
||||||
{:height 130
|
|
||||||
:align-items :flex-start})
|
|
||||||
|
|
||||||
(def token-toolbar
|
|
||||||
{:flex-direction :column
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:height 130})
|
|
||||||
|
|
||||||
(defstyle token-name-title
|
|
||||||
{:margin-top 8
|
|
||||||
:margin-bottom 4
|
|
||||||
:android {:font-size 16}
|
|
||||||
:ios {:font-size 17}})
|
|
||||||
|
|
||||||
(defstyle token-symbol-title
|
|
||||||
{:color styles/color-gray4
|
|
||||||
:android {:font-size 14}
|
|
||||||
:ios {:font-size 15}})
|
|
|
@ -1,8 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.subs
|
|
||||||
(:require [re-frame.core :as re-frame]))
|
|
||||||
|
|
||||||
;; TODO(goranjovic) - the USD value is currently hardcoded, will be replaced with actual data
|
|
||||||
;; in a different PR
|
|
||||||
(re-frame/reg-sub :token-balance
|
|
||||||
(fn [{:keys [wallet-selected-asset]}]
|
|
||||||
(assoc wallet-selected-asset :usd-value 0.93)))
|
|
|
@ -1,95 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.assets.views
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
|
||||||
(:require [status-im.ui.components.react :as react]
|
|
||||||
[status-im.ui.components.status-bar.view :as status-bar]
|
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
|
||||||
[status-im.ui.components.button.view :as button]
|
|
||||||
[status-im.i18n :as i18n]
|
|
||||||
[status-im.ui.components.styles :as component.styles]
|
|
||||||
[status-im.ui.components.button.styles :as button.styles]
|
|
||||||
[status-im.ui.screens.wallet.components.views :as components]
|
|
||||||
[status-im.ui.screens.wallet.assets.styles :as assets.styles]
|
|
||||||
[status-im.ui.screens.wallet.main.styles :as main.styles]
|
|
||||||
[status-im.ui.components.styles :as components.styles]
|
|
||||||
[status-im.ui.screens.wallet.transactions.views :as transactions]
|
|
||||||
[status-im.utils.utils :as utils]
|
|
||||||
[status-im.ui.components.chat-icon.styles :as chat-icon.styles]
|
|
||||||
[status-im.utils.money :as money]))
|
|
||||||
|
|
||||||
|
|
||||||
(defview my-token-tab-title [active?]
|
|
||||||
(letsubs [ {:keys [symbol]} [:token-balance]]
|
|
||||||
[react/text {:uppercase? true
|
|
||||||
:style (assets.styles/tab-title active?)}
|
|
||||||
(i18n/label :t/wallet-my-token {:symbol symbol})]))
|
|
||||||
|
|
||||||
(defview my-token-tab-content []
|
|
||||||
(letsubs [syncing? [:syncing?]
|
|
||||||
{:keys [symbol
|
|
||||||
amount
|
|
||||||
decimals
|
|
||||||
usd-value]} [:token-balance]]
|
|
||||||
[react/view components.styles/flex
|
|
||||||
[react/view {:style assets.styles/total-balance-container}
|
|
||||||
[react/view {:style assets.styles/total-balance}
|
|
||||||
[react/text {:style assets.styles/total-balance-value} (money/to-fixed (money/token->unit (or amount (money/bignumber 0)) decimals))]
|
|
||||||
[react/text {:style assets.styles/total-balance-currency} symbol]]
|
|
||||||
[react/view {:style assets.styles/value-variation}
|
|
||||||
[react/text {:style assets.styles/value-variation-title}
|
|
||||||
(str usd-value " " "USD")]
|
|
||||||
[components/change-display 0.05]]
|
|
||||||
[react/view {:style (merge button.styles/buttons-container main.styles/buttons)}
|
|
||||||
[button/button {:disabled? syncing?
|
|
||||||
:on-press #(utils/show-popup "TODO" "Not implemented yet!")
|
|
||||||
:style (assets.styles/button-bar :first)
|
|
||||||
:text-style assets.styles/main-button-text}
|
|
||||||
(i18n/label :t/wallet-send-token {:symbol symbol})]
|
|
||||||
[button/button {:disabled? true
|
|
||||||
:on-press #(utils/show-popup "TODO" "Not implemented yet!")
|
|
||||||
:style (assets.styles/button-bar :last)
|
|
||||||
:text-style assets.styles/main-button-text}
|
|
||||||
(i18n/label :t/wallet-exchange)]]]
|
|
||||||
[react/view
|
|
||||||
[react/text {:style assets.styles/transactions-title} (i18n/label :t/transactions)]
|
|
||||||
[react/view {:flex-direction :row}
|
|
||||||
[transactions/history-list]]]]))
|
|
||||||
|
|
||||||
(defn market-value-tab-title [active?]
|
|
||||||
[react/text {:uppercase? true
|
|
||||||
:style (assets.styles/tab-title active?)}
|
|
||||||
(i18n/label :t/wallet-market-value)])
|
|
||||||
|
|
||||||
(defn market-value-tab-content []
|
|
||||||
[react/view
|
|
||||||
[react/text
|
|
||||||
"Market value goes here"]])
|
|
||||||
|
|
||||||
(def tabs-list
|
|
||||||
[{:view-id :wallet-my-token
|
|
||||||
:content my-token-tab-title
|
|
||||||
:screen my-token-tab-content}
|
|
||||||
{:view-id :wallet-market-value
|
|
||||||
:content market-value-tab-title
|
|
||||||
:screen market-value-tab-content}])
|
|
||||||
|
|
||||||
(defn token-toolbar [name symbol icon]
|
|
||||||
[react/view assets.styles/token-toolbar
|
|
||||||
[react/image (assoc icon :style (chat-icon.styles/image-style 64))]
|
|
||||||
[react/text {:style assets.styles/token-name-title}
|
|
||||||
name]
|
|
||||||
[react/text {:style assets.styles/token-symbol-title}
|
|
||||||
symbol]])
|
|
||||||
|
|
||||||
(defview my-token-main []
|
|
||||||
(letsubs [current-tab [:get :view-id]
|
|
||||||
{:keys [symbol name icon]} [:token-balance]]
|
|
||||||
[react/view {:style component.styles/flex}
|
|
||||||
[status-bar/status-bar]
|
|
||||||
[toolbar/toolbar {:style assets.styles/token-toolbar-container}
|
|
||||||
toolbar/default-nav-back
|
|
||||||
[token-toolbar name symbol icon]]
|
|
||||||
;;(andrey julien) cleanup
|
|
||||||
#_[tabs/swipable-tabs tabs-list current-tab true
|
|
||||||
{:navigation-event :navigation-replace
|
|
||||||
:tab-style assets.styles/tab
|
|
||||||
:tabs-container-style assets.styles/tabs-container}]]))
|
|
|
@ -190,8 +190,7 @@
|
||||||
|
|
||||||
(def tooltip-triangle
|
(def tooltip-triangle
|
||||||
{:width 16
|
{:width 16
|
||||||
:height 8
|
:height 8})
|
||||||
:viewBox "0 0 16 8"})
|
|
||||||
|
|
||||||
(def recipient-name-container
|
(def recipient-name-container
|
||||||
{:padding-right 6})
|
{:padding-right 6})
|
||||||
|
|
|
@ -204,10 +204,4 @@
|
||||||
{:show-confirmation {:title (i18n/label :t/transactions-delete)
|
{:show-confirmation {:title (i18n/label :t/transactions-delete)
|
||||||
:content (i18n/label :t/transactions-delete-content)
|
:content (i18n/label :t/transactions-delete-content)
|
||||||
:confirm-button-text (i18n/label :t/confirm)
|
:confirm-button-text (i18n/label :t/confirm)
|
||||||
:on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}}))
|
:on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}}))
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
|
||||||
:navigate-to-asset
|
|
||||||
(fn [{:keys [db]} [_ asset]]
|
|
||||||
{:db (assoc db :wallet-selected-asset asset)
|
|
||||||
:dispatch [:navigate-to :wallet-my-token]}))
|
|
|
@ -1,7 +1,7 @@
|
||||||
(ns status-im.ui.screens.wallet.main.styles
|
(ns status-im.ui.screens.wallet.main.styles
|
||||||
(:require-macros [status-im.utils.styles :refer [defstyle]])
|
(:require-macros [status-im.utils.styles :refer [defstyle]])
|
||||||
(:require [status-im.ui.components.styles :as styles]
|
(:require [status-im.ui.components.styles :as styles]
|
||||||
[status-im.utils.platform :as platform]))
|
[status-im.ui.components.colors :as colors]))
|
||||||
|
|
||||||
;; Toolbar
|
;; Toolbar
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
(def toolbar-title-text
|
(def toolbar-title-text
|
||||||
{:flex -1
|
{:flex -1
|
||||||
:color styles/color-white
|
:color colors/white
|
||||||
:font-size 17})
|
:font-size 17})
|
||||||
|
|
||||||
(def toolbar-icon
|
(def toolbar-icon
|
||||||
|
@ -23,12 +23,10 @@
|
||||||
;; Main section
|
;; Main section
|
||||||
|
|
||||||
(def main-section
|
(def main-section
|
||||||
{:background-color styles/color-blue4})
|
{:background-color colors/blue})
|
||||||
|
|
||||||
(def total-balance-container
|
(def total-balance-container
|
||||||
{:padding-top 20
|
{:align-items :center
|
||||||
:padding-bottom 24
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center})
|
:justify-content :center})
|
||||||
|
|
||||||
(def total-balance
|
(def total-balance
|
||||||
|
@ -36,7 +34,11 @@
|
||||||
|
|
||||||
(def total-balance-value
|
(def total-balance-value
|
||||||
{:font-size 37
|
{:font-size 37
|
||||||
:color styles/color-white})
|
:color colors/white})
|
||||||
|
|
||||||
|
(def total-value
|
||||||
|
{:font-size 14
|
||||||
|
:color styles/color-white-transparent})
|
||||||
|
|
||||||
(defstyle total-balance-currency
|
(defstyle total-balance-currency
|
||||||
{:font-size 37
|
{:font-size 37
|
||||||
|
@ -45,16 +47,6 @@
|
||||||
:android {:letter-spacing 1.5}
|
:android {:letter-spacing 1.5}
|
||||||
:ios {:letter-spacing 1.16}})
|
:ios {:letter-spacing 1.16}})
|
||||||
|
|
||||||
(def value-variation
|
|
||||||
{:flex-direction :row
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(defstyle value-variation-title
|
|
||||||
{:font-size 14
|
|
||||||
:color styles/color-white-transparent-6
|
|
||||||
:android {:letter-spacing -0.18}
|
|
||||||
:ios {:letter-spacing -0.2}})
|
|
||||||
|
|
||||||
(defstyle buttons
|
(defstyle buttons
|
||||||
{:margin-top 34
|
{:margin-top 34
|
||||||
:android {:margin-horizontal 21}
|
:android {:margin-horizontal 21}
|
||||||
|
@ -68,11 +60,27 @@
|
||||||
:ios {:font-size 15
|
:ios {:font-size 15
|
||||||
:letter-spacing -0.2}})
|
:letter-spacing -0.2}})
|
||||||
|
|
||||||
|
;; Actions section
|
||||||
|
|
||||||
|
(def action-section
|
||||||
|
{:background-color colors/blue})
|
||||||
|
|
||||||
|
(def action
|
||||||
|
{:background-color colors/white-light-transparent
|
||||||
|
:border-radius 50})
|
||||||
|
|
||||||
|
(def action-label
|
||||||
|
{:color :white})
|
||||||
|
|
||||||
|
(def action-separator
|
||||||
|
{:height 1
|
||||||
|
:background-color colors/white-transparent
|
||||||
|
:margin-left 70})
|
||||||
|
|
||||||
;; Assets section
|
;; Assets section
|
||||||
|
|
||||||
(def asset-section
|
(def asset-section
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:background-color styles/color-white
|
|
||||||
:padding-vertical 16})
|
:padding-vertical 16})
|
||||||
|
|
||||||
(def asset-section-title
|
(def asset-section-title
|
||||||
|
@ -101,7 +109,7 @@
|
||||||
|
|
||||||
(defstyle add-asset-text
|
(defstyle add-asset-text
|
||||||
{:font-size 16
|
{:font-size 16
|
||||||
:ios {:color styles/color-blue4}
|
:ios {:color colors/blue}
|
||||||
:android {:color styles/color-black}})
|
:android {:color styles/color-black}})
|
||||||
|
|
||||||
(def asset-item-currency
|
(def asset-item-currency
|
||||||
|
@ -109,14 +117,5 @@
|
||||||
:color styles/color-gray4
|
:color styles/color-gray4
|
||||||
:margin-left 6})
|
:margin-left 6})
|
||||||
|
|
||||||
(def corner-dot
|
|
||||||
{:position :absolute
|
|
||||||
:top 12
|
|
||||||
:right 6
|
|
||||||
:width 4
|
|
||||||
:height 4
|
|
||||||
:border-radius 2
|
|
||||||
:background-color styles/color-cyan})
|
|
||||||
|
|
||||||
(defn asset-border [color]
|
(defn asset-border [color]
|
||||||
{:border-color color :border-width 1 :border-radius 32})
|
{:border-color color :border-width 1 :border-radius 32})
|
||||||
|
|
|
@ -1,46 +1,32 @@
|
||||||
(ns status-im.ui.screens.wallet.main.views
|
(ns status-im.ui.screens.wallet.main.views
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
||||||
(:require [re-frame.core :as re-frame]
|
(:require [re-frame.core :as re-frame]
|
||||||
[status-im.ui.components.button.view :as btn]
|
[status-im.i18n :as i18n]
|
||||||
|
[status-im.ui.components.colors :as colors]
|
||||||
|
[status-im.ui.components.styles :as components.styles]
|
||||||
[status-im.ui.components.list.views :as list]
|
[status-im.ui.components.list.views :as list]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
|
||||||
[status-im.ui.components.toolbar.actions :as act]
|
[status-im.ui.components.toolbar.actions :as act]
|
||||||
[status-im.i18n :as i18n]
|
[status-im.ui.components.toolbar.view :as toolbar]
|
||||||
[status-im.utils.config :as config]
|
|
||||||
[status-im.utils.ethereum.core :as ethereum]
|
|
||||||
[status-im.utils.ethereum.tokens :as tokens]
|
|
||||||
[status-im.ui.screens.wallet.main.styles :as styles]
|
[status-im.ui.screens.wallet.main.styles :as styles]
|
||||||
[status-im.ui.screens.wallet.styles :as wallet.styles]
|
[status-im.ui.screens.wallet.styles :as wallet.styles]
|
||||||
[status-im.ui.screens.wallet.utils :as wallet.utils]
|
[status-im.ui.screens.wallet.utils :as wallet.utils]
|
||||||
[status-im.ui.components.styles :as components.styles]
|
[status-im.ui.screens.wallet.views :as wallet.views]
|
||||||
[status-im.ui.components.button.styles :as button.styles]
|
[status-im.utils.config :as config]
|
||||||
[status-im.ui.screens.wallet.views :as wallet.views]))
|
[status-im.utils.ethereum.core :as ethereum]
|
||||||
|
[status-im.utils.ethereum.tokens :as tokens]
|
||||||
(defn toolbar-title []
|
[status-im.utils.platform :as platform]))
|
||||||
[react/view {:style styles/toolbar-title-container}
|
|
||||||
[react/text {:style styles/toolbar-title-text
|
|
||||||
:font :toolbar-title
|
|
||||||
:number-of-lines 1}
|
|
||||||
(i18n/label :t/main-wallet)]])
|
|
||||||
|
|
||||||
(def transaction-history-action
|
|
||||||
{:icon :icons/transaction-history
|
|
||||||
:icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} styles/toolbar-icon)
|
|
||||||
:handler #(re-frame/dispatch [:navigate-to :transactions-history])})
|
|
||||||
|
|
||||||
(defn toolbar-view []
|
(defn toolbar-view []
|
||||||
[toolbar/toolbar {:style wallet.styles/toolbar}
|
[toolbar/toolbar {:style wallet.styles/toolbar}
|
||||||
nil
|
nil
|
||||||
[toolbar/content-wrapper
|
[toolbar/content-wrapper]
|
||||||
[toolbar-title]]
|
|
||||||
[toolbar/actions
|
[toolbar/actions
|
||||||
[(assoc (act/opts [{:text (i18n/label :t/wallet-manage-assets)
|
[(assoc (act/opts [{:text (i18n/label :t/wallet-manage-assets)
|
||||||
:value #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}])
|
:value #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}])
|
||||||
:icon-opts {:color :white})
|
:icon-opts {:color :white})]]])
|
||||||
transaction-history-action]]])
|
|
||||||
|
|
||||||
(defn main-section [usd-value syncing? error-message]
|
(defn- total-section [usd-value syncing? error-message]
|
||||||
[react/view {:style styles/main-section}
|
[react/view {:style styles/main-section}
|
||||||
(if syncing?
|
(if syncing?
|
||||||
wallet.views/wallet-syncing
|
wallet.views/wallet-syncing
|
||||||
|
@ -50,17 +36,34 @@
|
||||||
[react/view {:style styles/total-balance}
|
[react/view {:style styles/total-balance}
|
||||||
[react/text {:style styles/total-balance-value} usd-value]
|
[react/text {:style styles/total-balance-value} usd-value]
|
||||||
[react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
|
[react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
|
||||||
[react/view {:style (merge button.styles/buttons-container styles/buttons)}
|
[react/text {:style styles/total-value} (i18n/label :t/wallet-total-value)]]])
|
||||||
[btn/button {:disabled? syncing?
|
|
||||||
:on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction])
|
(defn- render-action [{:keys [name icon action]}]
|
||||||
:style (button.styles/button-bar :first) :text-style styles/main-button-text}
|
[react/touchable-highlight {:on-press action}
|
||||||
(i18n/label :t/wallet-send)]
|
[react/view
|
||||||
[btn/button {:disabled? syncing?
|
[list/item
|
||||||
:on-press #(re-frame/dispatch [:navigate-to :wallet-request-transaction])
|
[list/item-icon {:icon icon :style styles/action :icon-opts {:color :white}}]
|
||||||
:style (button.styles/button-bar :other) :text-style styles/main-button-text}
|
[list/item-primary-only {:style styles/action-label}
|
||||||
(i18n/label :t/wallet-request)]
|
name]
|
||||||
[btn/button {:disabled? true :style (button.styles/button-bar :last) :text-style styles/main-button-text}
|
list/item-icon-forward]]])
|
||||||
(i18n/label :t/wallet-exchange)]]]])
|
|
||||||
|
(def actions
|
||||||
|
[{:name (i18n/label :t/send-transaction)
|
||||||
|
:icon :icons/arrow-right
|
||||||
|
:action #(re-frame/dispatch [:navigate-to :wallet-send-transaction])}
|
||||||
|
{:name (i18n/label :t/receive-transaction)
|
||||||
|
:icon :icons/arrow-left
|
||||||
|
:action #(re-frame/dispatch [:navigate-to :wallet-request-transaction])}
|
||||||
|
{:name (i18n/label :t/transaction-history)
|
||||||
|
:icon :icons/transaction-history
|
||||||
|
:action #(re-frame/dispatch [:navigate-to :transactions-history])}])
|
||||||
|
|
||||||
|
(defn- action-section []
|
||||||
|
[react/view styles/action-section
|
||||||
|
[list/flat-list
|
||||||
|
{:separator (when platform/ios? [react/view styles/action-separator])
|
||||||
|
:data actions
|
||||||
|
:render-fn render-action}]])
|
||||||
|
|
||||||
(defn- render-asset [{:keys [symbol icon decimals amount]}]
|
(defn- render-asset [{:keys [symbol icon decimals amount]}]
|
||||||
[react/view
|
[react/view
|
||||||
|
@ -76,19 +79,20 @@
|
||||||
:number-of-lines 1}
|
:number-of-lines 1}
|
||||||
(clojure.core/name symbol)]]]])
|
(clojure.core/name symbol)]]]])
|
||||||
|
|
||||||
(defn current-tokens [visible-tokens network]
|
(defn- current-tokens [visible-tokens network]
|
||||||
(filter #(contains? visible-tokens (:symbol %)) (tokens/tokens-for (ethereum/network->chain-keyword network))))
|
(filter #(contains? visible-tokens (:symbol %)) (tokens/tokens-for (ethereum/network->chain-keyword network))))
|
||||||
|
|
||||||
(defn asset-section [network balance visible-tokens prices-loading? balance-loading?]
|
(defn- asset-section [network balance visible-tokens prices-loading? balance-loading?]
|
||||||
(let [tokens (current-tokens visible-tokens network)
|
(let [tokens (current-tokens visible-tokens network)
|
||||||
assets (map #(assoc % :amount (get balance (:symbol %))) (concat [tokens/ethereum] (when config/erc20-enabled? tokens)))]
|
assets (map #(assoc % :amount (get balance (:symbol %))) (concat [tokens/ethereum] (when config/erc20-enabled? tokens)))]
|
||||||
[react/view {:style styles/asset-section}
|
[react/view styles/asset-section
|
||||||
[react/text {:style styles/asset-section-title} (i18n/label :t/wallet-assets)]
|
[react/text {:style styles/asset-section-title} (i18n/label :t/wallet-assets)]
|
||||||
[list/flat-list
|
[list/flat-list
|
||||||
{:data assets
|
{:default-separator? true
|
||||||
:render-fn render-asset
|
:data assets
|
||||||
:on-refresh #(re-frame/dispatch [:update-wallet (when config/erc20-enabled? (map :symbol tokens))])
|
:render-fn render-asset
|
||||||
:refreshing (boolean (or prices-loading? balance-loading?))}]]))
|
:on-refresh #(re-frame/dispatch [:update-wallet (when config/erc20-enabled? (map :symbol tokens))])
|
||||||
|
:refreshing (boolean (or prices-loading? balance-loading?))}]]))
|
||||||
|
|
||||||
(defview wallet []
|
(defview wallet []
|
||||||
(letsubs [network [:network]
|
(letsubs [network [:network]
|
||||||
|
@ -102,5 +106,6 @@
|
||||||
[react/view {:style wallet.styles/wallet-container}
|
[react/view {:style wallet.styles/wallet-container}
|
||||||
[toolbar-view]
|
[toolbar-view]
|
||||||
[react/view components.styles/flex
|
[react/view components.styles/flex
|
||||||
[main-section portfolio-value syncing? error-message]
|
[total-section portfolio-value syncing? error-message]
|
||||||
|
[action-section]
|
||||||
[asset-section network balance visible-tokens prices-loading? balance-loading?]]]))
|
[asset-section network balance visible-tokens prices-loading? balance-loading?]]]))
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
(ns status-im.ui.screens.wallet.styles
|
(ns status-im.ui.screens.wallet.styles
|
||||||
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
|
(:require-macros [status-im.utils.styles :refer [defstyle]])
|
||||||
(:require [status-im.ui.components.styles :as styles]))
|
(:require [status-im.ui.components.colors :as colors]
|
||||||
|
[status-im.ui.components.styles :as styles]))
|
||||||
|
|
||||||
;; errors
|
;; errors
|
||||||
|
|
||||||
|
@ -11,7 +12,7 @@
|
||||||
:margin-top 6}
|
:margin-top 6}
|
||||||
:android {:border-radius 4
|
:android {:border-radius 4
|
||||||
:margin-top 18}
|
:margin-top 18}
|
||||||
:background-color styles/color-blue5})
|
:background-color colors/blue})
|
||||||
|
|
||||||
(defstyle error-message-container
|
(defstyle error-message-container
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
@ -21,7 +22,7 @@
|
||||||
:android {:padding-vertical 10}})
|
:android {:padding-vertical 10}})
|
||||||
|
|
||||||
|
|
||||||
(defnstyle exclamation [color]
|
(defn exclamation [color]
|
||||||
{:background-color color
|
{:background-color color
|
||||||
:border-radius 100
|
:border-radius 100
|
||||||
:width 16
|
:width 16
|
||||||
|
@ -29,7 +30,7 @@
|
||||||
:margin-right 6})
|
:margin-right 6})
|
||||||
|
|
||||||
(def error-message
|
(def error-message
|
||||||
{:color styles/color-white
|
{:color colors/white
|
||||||
:font-size 13})
|
:font-size 13})
|
||||||
|
|
||||||
(def error-exclamation
|
(def error-exclamation
|
||||||
|
@ -44,9 +45,8 @@
|
||||||
{:flex 1})
|
{:flex 1})
|
||||||
|
|
||||||
(defstyle toolbar
|
(defstyle toolbar
|
||||||
{:ios {:background-color styles/color-blue4}
|
{:background-color colors/blue
|
||||||
:android {:background-color styles/color-blue5
|
:android {:elevation 0}})
|
||||||
:elevation 0}})
|
|
||||||
|
|
||||||
(def buttons-container
|
(def buttons-container
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
@ -67,7 +67,7 @@
|
||||||
|
|
||||||
(def wallet-modal-container
|
(def wallet-modal-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:background-color styles/color-blue4})
|
:background-color colors/blue})
|
||||||
|
|
||||||
(def choose-participant-container
|
(def choose-participant-container
|
||||||
{:margin-top 16
|
{:margin-top 16
|
||||||
|
|
|
@ -19,12 +19,6 @@
|
||||||
[{:keys [id]}]
|
[{:keys [id]}]
|
||||||
(re-frame/dispatch [:wallet/discard-unsigned-transaction-with-confirmation id]))
|
(re-frame/dispatch [:wallet/discard-unsigned-transaction-with-confirmation id]))
|
||||||
|
|
||||||
;; TODO (andrey) implement
|
|
||||||
(defn unsigned-action [unsigned-transactions-count]
|
|
||||||
[toolbar/text-action {:disabled? (zero? unsigned-transactions-count)
|
|
||||||
:handler #(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}
|
|
||||||
(i18n/label :t/transactions-sign-all)])
|
|
||||||
|
|
||||||
(defn history-action [filter?]
|
(defn history-action [filter?]
|
||||||
(merge
|
(merge
|
||||||
{:icon :icons/filter
|
{:icon :icons/filter
|
||||||
|
@ -35,7 +29,7 @@
|
||||||
(and (every? :checked? (:type filter-data))
|
(and (every? :checked? (:type filter-data))
|
||||||
(every? :checked? (:tokens filter-data))))
|
(every? :checked? (:tokens filter-data))))
|
||||||
|
|
||||||
(defn- toolbar-view [current-tab unsigned-transactions-count filter-data]
|
(defn- toolbar-view [current-tab filter-data]
|
||||||
[toolbar/toolbar {:flat? true}
|
[toolbar/toolbar {:flat? true}
|
||||||
toolbar/default-nav-back
|
toolbar/default-nav-back
|
||||||
[toolbar/content-title (i18n/label :t/transactions)]
|
[toolbar/content-title (i18n/label :t/transactions)]
|
||||||
|
@ -44,7 +38,7 @@
|
||||||
:unsigned-transactions nil)]) ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count]
|
:unsigned-transactions nil)]) ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count]
|
||||||
|
|
||||||
|
|
||||||
(defn action-buttons [{:keys [id to value] :as transaction}]
|
(defn action-buttons [{:keys [id] :as transaction}]
|
||||||
[react/view {:style transactions.styles/action-buttons}
|
[react/view {:style transactions.styles/action-buttons}
|
||||||
[button/primary-button {:style {:margin-right 12}
|
[button/primary-button {:style {:margin-right 12}
|
||||||
:on-press #(re-frame/dispatch [:wallet/show-sign-transaction id])}
|
:on-press #(re-frame/dispatch [:wallet/show-sign-transaction id])}
|
||||||
|
@ -104,7 +98,6 @@
|
||||||
(defn- empty-text [s] [react/text {:style transactions.styles/empty-text} s])
|
(defn- empty-text [s] [react/text {:style transactions.styles/empty-text} s])
|
||||||
|
|
||||||
(defn filtered-transaction? [transaction filter-data]
|
(defn filtered-transaction? [transaction filter-data]
|
||||||
;; TODO(jeluard) extend to token when available
|
|
||||||
(:checked? (some #(when (= (:type transaction) (:id %)) %) (:type filter-data))))
|
(:checked? (some #(when (= (:type transaction) (:id %)) %) (:type filter-data))))
|
||||||
|
|
||||||
(defn update-transactions [m filter-data]
|
(defn update-transactions [m filter-data]
|
||||||
|
@ -139,23 +132,15 @@
|
||||||
content
|
content
|
||||||
[list/item-checkbox {:checked? checked? :on-value-change #(re-frame/dispatch [:wallet.transactions/filter path %])}]])
|
[list/item-checkbox {:checked? checked? :on-value-change #(re-frame/dispatch [:wallet.transactions/filter path %])}]])
|
||||||
|
|
||||||
#_ ;; TODO(jeluard) Will be used for ERC20 tokens
|
|
||||||
(defn- item-filter-tokens [{:keys [symbol label checked?]}]
|
|
||||||
[item-filter {:icon (transaction-type->icon :pending) :checked? checked?} ;; TODO(jeluard) add proper token icon
|
|
||||||
[list/item-content
|
|
||||||
[list/item-primary label]
|
|
||||||
[list/item-secondary symbol]]])
|
|
||||||
|
|
||||||
(defn- render-item-filter [{:keys [id label checked?]}]
|
(defn- render-item-filter [{:keys [id label checked?]}]
|
||||||
[item-filter {:icon (transaction-type->icon id) :checked? checked? :path {:type id}}
|
[item-filter {:icon (transaction-type->icon id) :checked? checked? :path {:type id}}
|
||||||
[list/item-content
|
[list/item-content
|
||||||
[list/item-primary-only label]]])
|
[list/item-primary-only label]]])
|
||||||
|
|
||||||
(defn- wrap-filter-data [m]
|
(defn- wrap-filter-data [m]
|
||||||
;; TODO(jeluard) Restore tokens filtering once token support is added
|
|
||||||
[{:title (i18n/label :t/transactions-filter-type)
|
[{:title (i18n/label :t/transactions-filter-type)
|
||||||
:key :type
|
:key :type
|
||||||
:render-fn render-item-filter ;(list/wrap-render-fn item-filter-type)
|
:render-fn render-item-filter
|
||||||
:data (:type m)}])
|
:data (:type m)}])
|
||||||
|
|
||||||
(defview filter-history []
|
(defview filter-history []
|
||||||
|
@ -204,12 +189,11 @@
|
||||||
^{:key view-id} [tab view-id content (= view-id current-view-id)])])
|
^{:key view-id} [tab view-id content (= view-id current-view-id)])])
|
||||||
|
|
||||||
(defview transactions []
|
(defview transactions []
|
||||||
(letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count]
|
(letsubs [current-tab [:get :view-id]
|
||||||
current-tab [:get :view-id]
|
|
||||||
filter-data [:wallet.transactions/filters]]
|
filter-data [:wallet.transactions/filters]]
|
||||||
[react/view {:style styles/flex}
|
[react/view {:style styles/flex}
|
||||||
[status-bar/status-bar]
|
[status-bar/status-bar]
|
||||||
[toolbar-view current-tab unsigned-transactions-count filter-data]
|
[toolbar-view current-tab filter-data]
|
||||||
[tabs current-tab]
|
[tabs current-tab]
|
||||||
[(case current-tab
|
[(case current-tab
|
||||||
:transactions-history history-list
|
:transactions-history history-list
|
||||||
|
|
|
@ -1,85 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.wallet-list.styles
|
|
||||||
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
|
|
||||||
(:require [status-im.ui.components.styles :as st]
|
|
||||||
[status-im.utils.platform :as platform]))
|
|
||||||
|
|
||||||
(def screen-container
|
|
||||||
{:flex 1
|
|
||||||
:background-color st/color-white})
|
|
||||||
|
|
||||||
(def wallet-colors
|
|
||||||
{:blue-1 "#4360df"
|
|
||||||
:gray-1 "#3c3d4e"})
|
|
||||||
|
|
||||||
(def toolbar
|
|
||||||
{:elevation 0
|
|
||||||
:border-bottom-width 1
|
|
||||||
:border-color st/color-light-gray2})
|
|
||||||
|
|
||||||
(def toolbar-icon
|
|
||||||
{:width 24
|
|
||||||
:height 24})
|
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;
|
|
||||||
;; Wallet list ;;
|
|
||||||
;;;;;;;;;;;;;;;;;
|
|
||||||
|
|
||||||
(def wallet-list-screen
|
|
||||||
{:flex 1
|
|
||||||
:padding 16
|
|
||||||
:padding-bottom 0})
|
|
||||||
|
|
||||||
(def wallet-list
|
|
||||||
{:padding-bottom 16})
|
|
||||||
|
|
||||||
(def wallet-list-title
|
|
||||||
{:font-size 14
|
|
||||||
:margin-bottom 15
|
|
||||||
:color st/color-gray4})
|
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;
|
|
||||||
;; List item ;;
|
|
||||||
;;;;;;;;;;;;;;;
|
|
||||||
|
|
||||||
(defstyle wallet-item
|
|
||||||
{:flex 1
|
|
||||||
:flex-direction :row
|
|
||||||
:align-items :center
|
|
||||||
:padding 16
|
|
||||||
:margin-bottom 12
|
|
||||||
:android {:border-radius 4
|
|
||||||
:padding-right 12}
|
|
||||||
:ios {:border-radius 8
|
|
||||||
:padding-right 8}})
|
|
||||||
|
|
||||||
(def active-wallet-item
|
|
||||||
{:background-color (get wallet-colors :blue-1)})
|
|
||||||
|
|
||||||
(def wallet-info
|
|
||||||
{:flex-grow 1})
|
|
||||||
|
|
||||||
(def wallet-name
|
|
||||||
{:font-size 14
|
|
||||||
:color st/color-white})
|
|
||||||
|
|
||||||
(def total-balance
|
|
||||||
{:margin-top 5
|
|
||||||
:margin-bottom 5
|
|
||||||
:flex-direction :row})
|
|
||||||
|
|
||||||
(def total-balance-value
|
|
||||||
{:font-size 26
|
|
||||||
:color st/color-white})
|
|
||||||
|
|
||||||
(def total-balance-currency
|
|
||||||
(merge total-balance-value {:margin-left 6
|
|
||||||
:opacity 0.4}))
|
|
||||||
|
|
||||||
(def asset-list
|
|
||||||
{:font-size 14
|
|
||||||
:color st/color-white
|
|
||||||
:opacity 0.6})
|
|
||||||
|
|
||||||
(def select-wallet-icon
|
|
||||||
{:height 24
|
|
||||||
:width 24})
|
|
|
@ -1,13 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.wallet-list.subs
|
|
||||||
(:require [re-frame.core :as re-frame]))
|
|
||||||
|
|
||||||
;; TODO(jeluard) update when adding multiple wallet support. This will probably require changes to app-db
|
|
||||||
|
|
||||||
(re-frame/reg-sub
|
|
||||||
:wallet.list/all
|
|
||||||
:<- [:portfolio-value]
|
|
||||||
(fn [portfolio-value]
|
|
||||||
[{:name "Main wallet"
|
|
||||||
:assets []
|
|
||||||
:amount portfolio-value
|
|
||||||
:active? true}]))
|
|
|
@ -1,51 +0,0 @@
|
||||||
(ns status-im.ui.screens.wallet.wallet-list.views
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
|
||||||
(:require [clojure.string :as string]
|
|
||||||
[re-frame.core :as re-frame]
|
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.ui.components.react :as react]
|
|
||||||
[status-im.ui.components.status-bar.view :as status-bar]
|
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
|
||||||
[status-im.ui.components.toolbar.actions :as actions]
|
|
||||||
[status-im.i18n :as i18n]
|
|
||||||
[status-im.ui.screens.wallet.wallet-list.styles :as styles]
|
|
||||||
[status-im.utils.utils :as utils]))
|
|
||||||
|
|
||||||
(defn- toolbar-view [transactions]
|
|
||||||
[toolbar/toolbar {:style styles/toolbar}
|
|
||||||
[toolbar/nav-clear-text (i18n/label :t/done) #(re-frame/dispatch [:navigate-back])]
|
|
||||||
[toolbar/content-title (i18n/label :t/wallets)]
|
|
||||||
[toolbar/actions
|
|
||||||
[(actions/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]])
|
|
||||||
|
|
||||||
(defn- select-wallet []
|
|
||||||
(utils/show-popup "TODO" "Not implemented!"))
|
|
||||||
|
|
||||||
(defn- wallet-list-item [{:keys [name amount assets active?]}]
|
|
||||||
(let [asset-list (string/join " " (concat [(i18n/label :t/eth)] assets))]
|
|
||||||
[react/touchable-highlight {:on-press select-wallet}
|
|
||||||
[react/view {:style (merge styles/wallet-item (if active? styles/active-wallet-item))}
|
|
||||||
[react/view {:style styles/wallet-info}
|
|
||||||
[react/text {:style styles/wallet-name} name]
|
|
||||||
[react/view {:style styles/total-balance}
|
|
||||||
[react/text {:style styles/total-balance-value} amount]
|
|
||||||
[react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
|
|
||||||
[react/text {:style styles/asset-list} asset-list]]
|
|
||||||
[react/icon :forward_gray styles/select-wallet-icon]]]))
|
|
||||||
|
|
||||||
(defview wallet-list []
|
|
||||||
(letsubs [wallets [:wallet.list/all]]
|
|
||||||
[react/scroll-view {:style styles/wallet-list-screen}
|
|
||||||
[react/text {:style styles/wallet-list-title}
|
|
||||||
(i18n/label :t/your-wallets)]
|
|
||||||
[list/flat-list {:data wallets
|
|
||||||
:render-fn wallet-list-item
|
|
||||||
:style styles/wallet-list
|
|
||||||
:scrollEnabled false}]]))
|
|
||||||
|
|
||||||
(defview wallet-list-screen []
|
|
||||||
[]
|
|
||||||
[react/view {:style styles/screen-container}
|
|
||||||
[status-bar/status-bar]
|
|
||||||
[toolbar-view]
|
|
||||||
[wallet-list]])
|
|
|
@ -15,7 +15,7 @@
|
||||||
(catch Exception _ ""))))
|
(catch Exception _ ""))))
|
||||||
(apply str)))
|
(apply str)))
|
||||||
|
|
||||||
(def svg-tags #{:g :rect :path :use :defs})
|
(def svg-tags #{:svg :g :rect :path :use :defs})
|
||||||
|
|
||||||
(defmacro slurp-svg [file]
|
(defmacro slurp-svg [file]
|
||||||
"Reads svg file, and return function (fn [color] ..), which returns hiccup structure for react-native-svg lib
|
"Reads svg file, and return function (fn [color] ..), which returns hiccup structure for react-native-svg lib
|
||||||
|
@ -35,20 +35,19 @@
|
||||||
"
|
"
|
||||||
(let [svg (-> (clojure.core/slurp file)
|
(let [svg (-> (clojure.core/slurp file)
|
||||||
(string/replace #"[\n]\s*" ""))
|
(string/replace #"[\n]\s*" ""))
|
||||||
svg-hiccup (first (map hickory/as-hiccup (hickory/parse-fragment svg)))
|
svg-hiccup (hickory/as-hiccup (first (hickory/parse-fragment svg)))
|
||||||
color (gensym "args")]
|
color (gensym "args")]
|
||||||
`(fn [~color]
|
`(fn [~color]
|
||||||
~(into []
|
~(into []
|
||||||
(clojure.walk/prewalk
|
(clojure.walk/postwalk-replace {:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272
|
||||||
(fn [node]
|
(clojure.walk/prewalk
|
||||||
(if (svg-tags node)
|
(fn [node]
|
||||||
(if (= :use node)
|
(if (svg-tags node)
|
||||||
(symbol "use-def")
|
(symbol (name node))
|
||||||
(symbol (name node)))
|
(if (vector? node)
|
||||||
(if (vector? node)
|
(let [[k v] node]
|
||||||
(let [[k v] node]
|
(if (and (= :fill k) v)
|
||||||
(if (and (= :fill k) v)
|
[k color]
|
||||||
[k color]
|
node))
|
||||||
node))
|
node)))
|
||||||
node)))
|
svg-hiccup))))))
|
||||||
(rest (rest svg-hiccup)))))))
|
|