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
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.
Currently, exceptions thrown during transactions or gas estimation that were spawned in another thread are not being propagated, due to a limitation in nim (see https://nim-lang.org/docs/manual_experimental.html#parallel-amp-spawn).
This means any exceptions from status-go were not propagated correctly and would cause the app to crash. This includes entering the wrong password when trying to send a transaction.
The issue was addressed by passing a `success` variable by reference, which is set to false if an exception was thrown by status-go.
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).
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
The problem was that the BigInt lib did not handle decimals at all. `divMod` only let the remainder be what is after the dot. So I created my own divde and multiply methods to move the dot depending on the number of decimals
- Determine if the recent transaction history is being fetched or available before obtaining the first 20 transactions
- On account change, reset the selected tab to show the asset list
- Collectibles were kinda pixelated/blurry (not anymore)
Fixes#806
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
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...`
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
- link color in compact mode
- channel links did not have a #
- clicking on a mention should show that profile
- The AddChat button image didn't reposition when closing
Necessary cases are:
- Onboarding to show the list of 5 accounts
- In QML when we show it to the user for the backup
- Change it to a Loader, so the component and its memory is cleaned when closed
So far our `IconButton` hasn't been a proper button control which comes
with many downsides, such as:
- Some default button behaviours need to be simulated (e.g. `onClicked`)
- Any support built-in features for all controls in QML like `ToolTip` aren't can't be used
- There are probably accessibility aspects to it as well
We use the `IconButton` in many different places. Sometimes it doesn't
even act as a button, but just as an icon. I suggest we introduce a separate
`StatusIcon` component for that in future changes.
This commit turns the `IconButton` into a proper `RoundButton`, restoring
the control behaviour and features we get from QML.
This also required to expose the `icon` property as a `iconImg`,
because a `RoundButton` already comes with an `icon`.
On the other hand, we could remove the `onClick` simulation and can now
take advantage of components like `ToolTip`.
This commit fine-tunes the layout of the advanced modal input controls.
It also adds validation so that only numeric values are accepted as
gas price and gas limit values
Add receive modal in the wallet to show a QR code and address selector
Improve Input component to be able to show a Copy button that copies to clipboard
Improve AccountSelector modal to be able to not show details and fix eliding
When tokens are added/removed, the asset list in the AssetAndAmountInput is updated.
The selected asset can be specified by the parent component which is needed for things like sticker market where we need to set SNT as the fixed token.
Improved the validation for the component:
- validate() can be called externally
- validation display is handled internally and messages can be customised
- validation error messages are handled by the Input component and validation UX is consistent with other tx components
- Added an nsbp in front of paragraphs, otherwise the alignment property was ignored
- Enabled richformat for channel list to avoid emoji overlap in last message
Remove all `walletModel` references from the `AccountSelector` component, as the component should not be aware of the API's existence.
Pass currency to `AccountSelector` component.
- Show welcome page only when there are no ens names registered
- If you already have an ens username for the current account, connect and mark it as preferred name
- State machine navigation
Fixes#670.
Component spec based on https://www.notion.so/emizzle/Wallet-transaction-components-2003b78a8d0d41c4ab3d21eb2496fb20.
Changes the current Select shared component to a model databound component. This means we can bind directly to `QAbstractListModel`'s coming from Nim instead of needing manipulating the data in to javascript objects. The changes to the Select component will be used for the upcoming Asset selector shared component.
This introduces the ability to:
- list search existing contacts
- block contacts
- unblock contacts
- list blocked contacts
- remove contacts
- search and add contacts
Closes#608
Adds settings API for getting current network details.
Uses the current network details to display the correct etherscan link in QML (etherscan URL is a setting in the current network settings).
Allow switching to Ropsten by flipping a toggle switch in Profile > Advanced settings.
When switching networks, note that installed stickers will be uninstalled, and recent stickers will be removed. Sticker packs can be reinstalled after login. Purchased sticker packs will not need to be re-purchased, but will need to be re-installed.
Mailserver fleet information will **not** be updated. This can be controlled by a separate (undeveloped yet) setting.
Sticker pack details retreived from contract:
- pack data decoded from contract response
- data contains contentHash which, once decoded, contains an IPFS identifier
- futher pack data in EDN format is downloaded from IPFS
- the EDN info is decoded in to a StickerPack
List of available packs from contract are obtained separately from list of installed contracts (stored as a setting in Status-go).
Sticker market contains dynamic list of sticker packs. The sticker button shown for each pack has all states defined (in the design) for all UI states (ie bought, free, installed, pending, etc)
Add modal popup showing sticker pack details and list of stickers to be un/installed. Contains a "larger" version of the sticker pack button with many differnt UI states defined.
Uninstallation of a sticker pack removes those sticker pack's stickers from the recent sticker list and persists the list
Simplify the view model by including stickers, instead of setting an "activeStickerPackId" property. This allowed for display of sticker pack stickers to be displayed in the modal popup separately from the sticker packs shown in the market.
Add sticker popup
Add send sticker message
Add ability to select sticker pack and show stickers for pack with scroll
1. Sticker history
2. Install sticker packs
3. Sticker market
1. Sticker packs are installed on app start up until installation of sticker pack functionality is added
2. Optimisations such as preloading images to be done so that sticker images are not downloaded each time.
Replaces PR #105.
Implement a `pkg-macos` target that ultimately results in `Status.dmg` being
written to `pkg/`. Due to [limitations][limits] of the OpenSSL `.dylib`s in
`/usr/lib/` on macOS, `libssl.a` and `libcrypto.a` are statically linked into
`bin/nim_status_client` from a [Homebrew][brew] "bottle" that is compatible
with macOS 10.13 (the oldest macOS version compatible with Qt v5.14).
`pkg-macos` creates an `.app` bundle layout in `tmp/macos/dist` based partly on
information in a very helpful [StackOverflow answer][so-answer]. Note the part
of the answer (toward the end) that explains a problem with the working
directory and how to fix it. That's the reason for the `nim_status_client.sh`
script introduced in this commit (it gets copied into the bundle). It's also
the reason for having `Info.plist` copied into the bundle before `macdeployqt`
is run (see below) and then overwriting it with `Info.runner.plist` before
creating the `.dmg` file. The app icons file `status-icon.icns` was taken from
`deployment/macos/` in the [status-react][sr] repo.
The [`macdeployqt`][macdeployqt] tool is used to copy the needed portions of Qt
into the bundle; it automatically updates `rpath`, etc. so the
`nim_status_client` executable in the bundle can locate the libs within the
bundle.
`macdeployqt` is run twice, for the "outer" and "inner" `.app` bundles,
because of an apparent bug in `macdeployqt` that results in QtWebEngine related
resources not being processed correctly on the first pass. This results in some
bloat in the final bundle but it seems unavoidable at present.
The [create-dmg][cdmg] tool is used to package the bundle into a `.dmg`
file. There are two reasons for this:
1. It produces a nice looking icon for the `.dmg` that overlays the Status logo
on an external disk icon.
2. `Info.plist` needs to be overwritten after running `macdeployqt` (see
explanation above) but before creating the `.dmg` file. If we passed the `-dmg`
cli option to `macdeployqt` to have it generate the `.dmg` file then it
wouldn't be possible to overwrite `Info.plist`.
So there is a cosmetic reason and a practical reason for using another
tool. Probably the biggest downside is that `create-dmg` is implemented in
Node.js so it needs to be installed with `npm`; that's the reason this commit
introduces `package.json`, etc. Note that zero code from `node_modules` ends up
in the `.app` bundle or the `.dmg` file.
Code signing of the macOS `.app` bundle and `.dmg` is attempted if the
environment variable `MACOS_CODESIGN_IDENT` is defined. In that case, the
environment variable `MACOS_KEYCHAIN_OPT` may optionally be defined with the
path to a preferred keychain database file.
Refactor a number of sections in the Makefile for consistency's sake, e.g. the
`appimage` target becomes `pkg-linux` and ultimately results in
`NimStatusClient-x86_64.AppImage` being written to `pkg/`.
Make a number of changes to bring the Linux packaging steps up-to-date and use
the `-qmlimport` cli option of `linuxdeployqt` to simplify resolution of Qt
plugins.
Note that `make pkg` will correctly resolve to `make pkg-linux` or `make
pkg-macos` depending on the OS in use.
Consistently use lower-case "c" in the name of *components* directories and
imports.
[limits]: https://developer.apple.com/forums/thread/124782
[brew]: https://brew.sh/
[so-answer]: https://stackoverflow.com/a/3251285
[sr]: https://github.com/status-im/status-react/tree/develop/deployment/macos
[macdeployqt]: https://doc.qt.io/qt-5/macos-deployment.html
[cdmg]: https://github.com/sindresorhus/create-dmg
There's still some things that needs to be done (possibly in future commits):
[ ] Asset icons need to be determined so they can be displayed along the transaction
[ ] Transaction values need to be converted to decimal values
[ ] Date-time formatting
[ ] Grouping of transactions by days
display real contacts on profile
query contacts
add contact in form
fixes
fixes
display contacts
cleanup
cleanup
remove echo
refactor to use profile instead of contact model
Move the onboarding/login state machine to the top level in main.qml, so that logout events can trigger new states.
Add Loader to statemachine so that each component is lazy-loaded. Initial tests saved 50MB of memory on startup.
Currently, logging out, then logging back in to the same or different account results in a doubling-up of chats/messages/wallet accounts. These need to be reset, however I need help doing that and it would delayed and blown out this PR further. This reset has been done for Onboarding and Login, but needs to be done for chats, wallet, mailservers, etc.
Having all the different input types in one file made it simpler to design, but created an issue with memory, because all the aliases, properties and images were created for all types even if you only used a basic Input. I tried using Loaders, but making aliases within loaders is super painful/impossible in some cases.
This commit extends the profile popup to align more with the application
designs. There's still work left to be done such as showing/hiding the
qrcode view or copying data to the clipboard.
The profilepopup also relies on context data at the moment and should rather
receive its data via the newly introduced `getContractByID()` API proposed in
https://github.com/status-im/status-go/pull/1987
Similar to its `footer` content, ModalPopup can now receive header components
allowing consumers to design the header part of the modal to their likings.
Usage:
```
ModalPopup {
id: popup
header: Item {
...
}
...
}
```
The header section will take the height of the root element of the substree
passed to `header`
simply chat views by reacting to model events
abstract join event from join event call; react to join channel event
remove unneded if else
move left channel to event
refactor getChannelColor
refactor getChannelColor
rename sendMessage method
cleanup
move random color to channels list
remove toChatType
remove toChatType
display a sticker when a content type sticker message is received
display a sticker when a content type sticker message is received
display a sticker when a content type sticker message is received
display sticker
fix height and default value
cleanup
cleanup
cleanup
use constants for the content type
default views for when there is no chat opened + chat links
add channel component
update other layouts
fix problem with alias
add test channels
fix merge conflict
add mouse hand pointer to chat list; add simple FAQ (testing QT urls)
refactor wallet to use asset model
move some of wallet logic away from the controller
move ChatMessage to model
move chatItem model
organize models folder
simplify chat message and chat item
rename messageList to message_list
simply addresses in the controller
rename mailservers list
refactor how profile is set
refactor/simplify profile view
refactor/simplify adding mailservers
rename wallet view
simplify wallet assets
rename nodeView to view
extract channel list view
extract channel list view
refactor channel list / chats view
move signals out of app folder
simplify callRPC
add raw rpc method and make node section use it
add node model
move accounts model inside onboard controller (for now)
make events usage consistent among models and controllers; separate model events from app events
make mouse show hand cursor when hovering over chat list
add FAQ url
simplify controllers and views, make everything more consistent
refactor wallet to use asset model
move some of wallet logic away from the controller
move ChatMessage to model
move chatItem model
organize models folder
simplify chat message and chat item
rename messageList to message_list
simply addresses in the controller
rename mailservers list
refactor how profile is set
refactor/simplify profile view
refactor/simplify adding mailservers
rename wallet view
simplify wallet assets
rename nodeView to view
extract channel list view
extract channel list view
refactor channel list / chats view
move signals out of app folder
address code reviews
Work on this PR started before the build system was updated and at one point I
upgraded `nim_status_client.nimble` to use NimScript so the nimble command
would stop warning that the old format was being used. In team chat it was
discussed that since we're no longer using nimble for package management we
could simply delete `nim_status_client.nimble` to avoid confusion, which can be
done in another PR.
Introduce a BrowserLayout stub so the index will be calcualted correctly re:
the active tab.
Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`,
respectively.
Introduce ProfileLayout which uses a "LeftTab" approach similar to that of
WalletLayout. There remains quite a bit of styling work to be done in
ProfileLayout and its LeftTab. Also, it may be better to start over using a
SplitView like the ChatLayout, I'm not really sure.
It wasn't clear what should be the default view for the right-pane when Profile
is selected in the left-most TabBar. In this PR, it defaults to showing the
view corresponding to the ENS usernames button.
In the archived Figma for the desktop design, it seemed a picture could be set,
e.g. there is a headshot of a woman used in the Profile screen. To that end I
explored how to take a square image and clip/mask it so it appears round and I
included a larger placeholder image for that purpose. In the new design, and
with respect to mobile, it may not be possible to set a profile picture so the
code that rounds the image can maybe be dropped.
Onboarding carousel completed
Redo folder restructuring
NOTES:
1. nim_status_client binary is output to `./bin/nim_status_client`, so you'll need to update your workflow to run this file. README has been updated to reflect this. Also, if you're running VSCode, instructions for code reload were added.
2. All `ui` files now live in `ui/`
3. All lib files (ie `libstatus`) now live in `lib/`
4. Removed the Qt Creater user project file as this is unique to each user
5. Moved the project file to `ui/`, so just open up the `ui` folder in Qt creator and it should locate the project file
6. `-d:release` removed from compilation as it wasn't needed
7. Broke up main.qml in to the main app and onboarding components, however this should be broken down further into more reusable components
8. Click "Get started" to show chat
Format some files using nimpretty
Michael Bradley, Jr
Pascal Precht
Iuri Matias
Jonathan Rainville
Richard Ramos
emizzle
hydr063n
Dean Eigenmann