mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-10 13:46:35 +00:00
ce7e6b8d51
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
204 lines
6.0 KiB
QML
204 lines
6.0 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtGraphicalEffects 1.13
|
|
import "../../../imports"
|
|
import "../../../shared"
|
|
import "./components"
|
|
|
|
Item {
|
|
property int selectedAccount: 0
|
|
property var changeSelectedAccount: function(newIndex) {
|
|
if (newIndex > walletModel.accounts) {
|
|
return
|
|
}
|
|
selectedAccount = newIndex
|
|
walletModel.setCurrentAccountByIndex(newIndex)
|
|
}
|
|
id: walletInfoContainer
|
|
width: 340
|
|
Layout.minimumWidth: 300
|
|
|
|
Rectangle {
|
|
id: walletInfoHeader
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 0
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 0
|
|
height: walletValueTextContainer.y + walletValueTextContainer.height + Theme.padding
|
|
color: Theme.white
|
|
z: 1
|
|
border.width: 0
|
|
|
|
StyledText {
|
|
id: title
|
|
x: 143
|
|
y: 16
|
|
text: qsTr("Wallet")
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Theme.padding
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
font.weight: Font.Bold
|
|
font.pixelSize: 17
|
|
}
|
|
|
|
Item {
|
|
id: walletValueTextContainer
|
|
x: 16
|
|
y: 52
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Theme.padding
|
|
anchors.top: title.bottom
|
|
anchors.topMargin: Theme.padding
|
|
height: walletAmountValue.height + totalValue.height
|
|
|
|
StyledTextEdit {
|
|
id: walletAmountValue
|
|
color: "black"
|
|
text: walletModel.totalFiatBalance
|
|
selectByMouse: true
|
|
cursorVisible: true
|
|
readOnly: true
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 1
|
|
font.weight: Font.Medium
|
|
font.pixelSize: 30
|
|
}
|
|
|
|
StyledText {
|
|
id: totalValue
|
|
color: Theme.darkGrey
|
|
text: "Total value"
|
|
anchors.left: walletAmountValue.left
|
|
anchors.leftMargin: 0
|
|
anchors.top: walletAmountValue.bottom
|
|
anchors.topMargin: 0
|
|
font.weight: Font.Medium
|
|
font.pixelSize: 13
|
|
}
|
|
}
|
|
|
|
AddAccount { x: 288 ;y: 59}
|
|
}
|
|
|
|
Component {
|
|
id: walletDelegate
|
|
|
|
Rectangle {
|
|
property bool selected: index == selectedAccount
|
|
|
|
id: rectangle
|
|
height: 64
|
|
color: selected ? Theme.blue : Theme.transparent
|
|
radius: Theme.radius
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Theme.padding
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Theme.padding
|
|
|
|
Image {
|
|
id: walletIcon
|
|
width: 12
|
|
height: 12
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Theme.smallPadding
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Theme.padding
|
|
source: "../../img/walletIcon.svg"
|
|
}
|
|
ColorOverlay {
|
|
anchors.fill: walletIcon
|
|
source: walletIcon
|
|
color: selected || !iconColor ? Theme.transparent : iconColor // change image color
|
|
}
|
|
StyledText {
|
|
id: walletName
|
|
text: name
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Theme.smallPadding
|
|
anchors.left: walletIcon.right
|
|
anchors.leftMargin: 10
|
|
font.pixelSize: 15
|
|
font.weight: Font.Medium
|
|
color: selected ? Theme.white : Theme.black
|
|
}
|
|
StyledText {
|
|
id: walletAddress
|
|
text: address
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: parent.width/2
|
|
elide: Text.ElideMiddle
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: Theme.smallPadding
|
|
anchors.left: walletName.left
|
|
anchors.leftMargin: 0
|
|
font.pixelSize: 15
|
|
font.weight: Font.Medium
|
|
color: selected ? Theme.white : Theme.darkGrey
|
|
opacity: selected ? 0.7 : 1
|
|
}
|
|
StyledText {
|
|
id: walletBalance
|
|
text: balance
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Theme.smallPadding
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Theme.padding
|
|
font.pixelSize: 15
|
|
font.weight: Font.Medium
|
|
color: selected ? Theme.white : Theme.black
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
changeSelectedAccount(index)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ListView {
|
|
id: listView
|
|
anchors.bottom: parent.bottom
|
|
anchors.top: walletInfoHeader.bottom
|
|
spacing: 5
|
|
anchors.right: parent.right
|
|
anchors.left: parent.left
|
|
|
|
delegate: walletDelegate
|
|
|
|
ListModel {
|
|
id: exampleWalletModel
|
|
ListElement {
|
|
name: "Status account"
|
|
address: "0xcfc9f08bbcbcb80760e8cb9a3c1232d19662fc6f"
|
|
balance: "12.00 USD"
|
|
iconColor: "#7CDA00"
|
|
}
|
|
|
|
ListElement {
|
|
name: "Test account 1"
|
|
address: "0x2Ef1...E0Ba"
|
|
balance: "12.00 USD"
|
|
iconColor: "#FA6565"
|
|
}
|
|
ListElement {
|
|
name: "Status account"
|
|
address: "0x2Ef1...E0Ba"
|
|
balance: "12.00 USD"
|
|
iconColor: "#7CDA00"
|
|
}
|
|
}
|
|
|
|
model: walletModel.accounts
|
|
// model: exampleWalletModel
|
|
}
|
|
|
|
}
|
|
|
|
/*##^##
|
|
Designer {
|
|
D{i:0;formeditorColor:"#ffffff";formeditorZoom:0.75;height:770;width:340}
|
|
}
|
|
##^##*/
|