Commit Graph

175 Commits

Author SHA1 Message Date
Pascal Precht e3c195dc22 uiux: introduce stickermarket components to status library 2020-09-29 13:58:57 -04:00
Pascal Precht 961a370002 uiux: introduce Emoji popup components for new chat input 2020-09-29 13:57:52 -04:00
Pascal Precht dcc0a1d321 uiux: introduce StatusChatCommandsPopup component 2020-09-29 13:57:52 -04:00
Pascal Precht bd63ae6bab feat: introduce StatusChatCommandButton
This is a new version of our `ChatCommandButton` so it is an actual
`Button` element.
2020-09-29 13:48:36 -04:00
Pascal Precht 8142d30289 refactor(StatusRoundButton): use SVGImage for better rendering 2020-09-29 13:48:27 -04:00
Pascal Precht 0e4a6196fc feat: introduce StatusIconButton component
This component is similar to a StatusRoundButton that holds an icon.
However, the StatusRoundButton has a fixed number of variations based on the
designs. Sometimes we need clickable icons that have a different look and feel
E.g. in the chat input component.

This component aims to cover that use case.
2020-09-29 13:48:21 -04:00
emizzle 2c9d042152 fix: Support dark mode for onboarding screens
Related to #599.

![Imgur](https://imgur.com/vKTadPM.png)
![Imgur](https://imgur.com/PHMzGxC.png)

This PR is based off of #1036, which supports system colors at app startup, meaning the onboarding screens may be in dark mode, if the user has their system set to dark mode. This PR fixes the onboarding screens so they support dark mode.

It also:
1. Adds radio buttons to the `AccountList` component, as per the design
2. Adds `qsTr` where missing on the onboarding screens
3. Fixes some minor design issues
4. Updates the modals titles to match the design
5.  Uses reusable Status components where possible. `EnterSeedPhraseModal` and `GenKeyModal` could have used the `StatusRoundButton` component, but there were some limitations that preventing this from being possible.
2020-09-29 13:30:33 -04:00
emizzle c236e01fc8 feat: Support system dark mode theme
Supports system dark mode. Changes the user appearance setting to a 3-way setting of System, Light, Dark.

New accounts will have their appearance setting set to "System", which uses the system setting to determine if dark mode should be applied.

Breaking change: Users who had their settings on Light Theme, will now get the system theme (light or dark). Users who had their theme set to Dark, will now get the Light theme.

At startup, the onboarding screens will have the system-level setting of dark mode applied or not. Once, logged in, the user settings will be applied.

## Note
An appearance setting of "System" is not dynamic to the system-level setting. This means that if a user has "System" set for their appearance (and ie, the user has light mode set), and then user then changes their system setting from light to dark, the app will not respond until it is restarted. This is due to a limitation of Qt not having a reliable way to propagate these changes to QML.
2020-09-29 13:30:13 -04:00
emizzle 5eabcd2725 feat: Add loading and reload states to stickers/packs
Related to: #586.

Adds a loading state to stickers, so that a loading indicator appears while the sticker is being downloaded from IPFS.

In the case of a network failure or timetout, a reload button is shown instead. Once network is restored and the reload button is clicked, the image is reloaded from the network, going through the same lifecycle of showing the loading state first.
2020-09-29 13:27:50 -04:00
hydr063n 2a59ab402d fix: top bar theme color 2020-09-29 13:26:01 -04:00
Jonathan Rainville eb7b9c2383 chore: fix qml warnings in a couple of components 2020-09-23 15:16:34 -04:00
Pascal Precht 599f788e67
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components
These components are used to render the chat info in the top bar of the chat view.
`StatusChatInfoButton` is an clickable button that will open chat info dialogs.

Closes #923
2020-09-23 08:53:23 +02:00
Pascal Precht fac0e50e37 feat: introduce StatusIdenticon components
This component introduces `StatusLetterIdenticon`, `StatusImageIdenticon`
and `StatusIdenticon`.

- `StatusLetterIdenticon` renders an identicon with a single letter based on a
name.
- `StatusImageIdenticon` renders an actual image based on an identicon URL
- `StatusIdenticon` is a composition of the former both, but with a loading mechanism
  to decide which should be rendered

The commit also ensures all of these components are used respectively throughout
the application.
2020-09-23 08:52:30 +02:00
Richard Ramos 16468960f7 fix: code review 2020-09-22 09:37:41 -04:00
Richard Ramos efac44057a fix: rebase gone wrong 2020-09-22 09:37:41 -04:00
Richard Ramos 9ae739a8ce fix: transactions can have a 0 value 2020-09-22 09:37:41 -04:00
Pascal Precht 18797970db uiux: fine-tune StatusSwitch and StatusRadioButton components 2020-09-21 12:53:06 -04:00
Pascal Precht afcb61397f feat: introduce StatusSectionMenuItem component 2020-09-21 12:53:06 -04:00
Pascal Precht b74209f6fe feat: introduce StatusSectionHeadline component 2020-09-21 12:55:21 +02:00
Pascal Precht f0939a01fe chore: update i18n 2020-09-18 17:23:35 -04:00
Jonathan Rainville 7c116f8ea7 fix: fix missing import is StatusTooltip 2020-09-17 15:50:29 -04:00
Pascal Precht fd361a7b03 chore: move StatusToolTip into library 2020-09-17 15:40:01 -04:00
Pascal Precht 70d50110cd feat: introduce StatusSwitch component 2020-09-17 15:17:08 -04:00
Pascal Precht 44e3e6d581 feat: introduce StatusRadioButton component 2020-09-17 15:17:01 -04:00
Pascal Precht c6cc426f22 chore: move StatusSlider into UI library 2020-09-17 15:16:40 -04:00
Pascal Precht 9c1613acf8 uiux(Wallet): improve readability of high value balances
Uses `toLocaleString()` polyfill to insert `.` and/or `,` as
needed based on currently selected locale.

Closes #845
2020-09-17 15:16:16 -04:00
Pascal Precht e0adc3056e chore: update translations
Closes #801 #841
2020-09-17 15:16:09 -04:00
emizzle c9c1dce6ea fix: Sticker market dark mode support 2020-09-17 12:22:00 -04:00
Pascal Precht 4f94588199 uiux: ensure components have proper theme text color
Closes #899
2020-09-16 16:57:31 -04:00
Pascal Precht 8b941c179f feat: add need help section
Closes #844
2020-09-16 16:57:18 -04:00
Jonathan Rainville 103f02b289 feat: show toast message for transaction status changes 2020-09-14 14:48:26 -04:00
Jonathan Rainville f1e1462529 feat: make ToastButton close only with button and after 4 seconds 2020-09-11 16:55:36 -04:00
Jonathan Rainville e184408749 feat: add link in the ToastMessage 2020-09-11 16:55:36 -04:00
Jonathan Rainville e8a202cfae refactor: change pending state to be handled by a StatusButon instead 2020-09-11 16:55:36 -04:00
Jonathan Rainville d41100fa98 feat: add ToastMessage component in shared 2020-09-11 16:55:36 -04:00
Jonathan Rainville ef53f3d90e fix: fix Address component to expand on click 2020-09-11 16:55:36 -04:00
emizzle 8e2acbe009 feat: disable selection of "contact" in send modal
Disable the selection of "contact" in the send transaction modal, because right now, this is not possible, but it will be in the future. Once we get this working, we can uncomment it.
2020-09-11 14:40:51 -04:00
Iuri Matias 212f33b3c0 filter out watch only accounts in account list for sending transactions 2020-09-11 14:40:31 -04:00
emizzle 366fdc15a1 feat: show stickers purchased from non-main account
Fixes: #815

Previously, only stickers purchased from the main status account were shown. Now, stickers purchased from any of the accounts are shown.

Accounts include any accounts returned by `accounts_getAccounts` and are non-chat accounts.
2020-09-11 12:01:08 -04:00
emizzle 2c7dd929ad feat: enable token transactions
Fixes #788.
Fixes #853.
Fixes #856.

refactor: gas estimation and transaction sends have been abstracted to  allow calling `estimateGas`, `send`, and `call` on the contract method (similar to the web3 API).

Moved sticker pack gas estimation and purchase tx over to the new API

*Sticker purchase:*
 - gas estimate is done using new API and debounced using a timer

*Wallet send transaction:*
 - tokens can now be sent
 - gas is estimated correctly for a token tx, and debounced using a timer

***NOTE***
1. If attempting to send tokens on testnet, you must use a custom token as the token addresses in the pre-built list are for mainnet and will not work on testnet.
2. The new API should support all existing gas estimates, send txs, and calls. The loading of sticker pack data, balance, count, purchased sticker packs, etc, can be moved over to the new API. Almost all of the `eth_sendTransaction`, `eth_gasEstimate`, and `eth_call` could be move over as well (that's the idea at least).
2020-09-11 12:01:08 -04:00
Pascal Precht 729a2781f0 feat(TransactionModal): introduce async validation for ENS names
This commit extends the AddressInput to perform ENS lookups when valid
ENS values are entered. The lookup happens asynchronously, so we show a loading
indicator as the request is happening.

Closes #790
2020-09-10 13:40:42 -04:00
Jonathan Rainville 348e0a9bdc fix: address review comments for the send forms 2020-09-09 15:03:45 -04:00
Jonathan Rainville 6b3cac31bc feat: enable sending chat requests 2020-09-09 15:03:45 -04:00
Jonathan Rainville 60492b4db1 feat: add chat command bubbles for received txs 2020-09-09 15:03:45 -04:00
Richard Ramos 17f1f72113 fix: using loaders for status button animations 2020-09-07 10:21:41 -04:00
emizzle cc4127df03 fix: Revert SVGImage component change due to bluriness 2020-09-04 16:17:06 -04:00
emizzle d8b0145eb3 feat: Add Sticker purchase transaction modal
Add gas estimate for sticker pack purchase.

Update transaction for sticker pack purchase.

Add GasValidator component which validates gas is selected correctly and displays an error message if not. This component is not visible until it is not valid (at which point the valdiation error message is displayed).

In a future PR, need to:
1. estimate gas for token txfer (sendTransaction) via a normalised method for estimating gas for EthSend
2. move sticker pack purchase to use an EthSend object so gas can be estimated and tx sent
2020-09-04 16:13:33 -04:00
emizzle 1e020a203c feat(tx-comps): Send transaction modal
Fixes #669.

Composes all tx components to create a send transaction modal for the wallet.

1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality.
2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components.
3. Add an isValid property to all tx comps for pristine validation state.
4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties.
5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner.
6. Fix ReceiveModal to allow for pre-selected account based on current wallet account.
7. Add focused border colour to Input component.
8. Fix issue with last TransactionStackGroup input not being able to obtain focus.
9. Fix fiatBalance not appearing on initial load on AccountSelector.
10. Fix selected asset updated properly when assets changed in the AssetSelector component.
11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this.
12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component.
13. Move validation from ContactSelector to the Select component.

1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet.
2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress.
3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication.
4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time.

1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app.
2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-09-03 15:32:55 -04:00
Richard Ramos e95e052575 fix: profile icons 2020-08-31 11:34:01 -04:00
Pascal Precht 27a140e844 fix(StatusRoundButton): fixes binding loop and removes type property
As per discussion, there's no "primary" and "secondary" type in round buttons.
They just appear in different sizes (44x44, 40x40, 32x32). The size determines
their look & feel
2020-08-28 11:32:10 -04:00