status-desktop/ui/app/AppLayouts/Browser/BrowserConnectionModal.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../shared"
import "../../../imports"

Popup {
    property var currentTab
    property var request: ({"hostname": "", "title": "", "permission": ""})
    property string currentAddress: ""

    id: root
    modal: true
    Overlay.modal: Rectangle {
        color: "#60000000"
    }
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
    width: 360
    height: 480
    background: Rectangle {
        color: Style.current.background
        radius: 8
    }
    padding: 0

    function postMessage(isAllowed){
        request.isAllowed = isAllowed;
        provider.web3Response(web3Provider.postMessage(JSON.stringify(request)));
    }

    onClosed: {
        root.destroy();
    }

    // TODO: design required

    ColumnLayout {
        anchors.left: parent.left
        anchors.leftMargin: Style.current.smallPadding
        anchors.right: parent.right
        anchors.rightMargin: Style.current.smallPadding
        spacing: Style.current.bigPadding
        anchors.top: parent.top
        anchors.topMargin: 90

        RowLayout {
            property int imgSize: 40

            id: logoHeader
            spacing: Style.current.halfPadding
            width: 176
            height: imgSize
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

            FaviconImage {
                id: siteImg
                width: logoHeader.imgSize
                height: logoHeader.imgSize
            }

            SVGImage {
                id: dots1
                source: "../../img/dots-icon.svg"
                width: 20
                height: 4
            }

            RoundedIcon {
                source: "../../img/check.svg"
                iconColor: Style.current.primary
                color: Style.current.secondaryBackground
                width: 24
                height: 24
            }

            SVGImage {
                id: dots2
                source: "../../img/dots-icon.svg"
                width: 20
                height: 4
            }

            RoundedIcon {
                source: "../../img/walletIcon.svg"
                iconHeight: 18
                iconWidth: 18
                iconColor: Style.current.primary // TODO use wallet color
                color: Style.current.background
                width: logoHeader.imgSize
                height: logoHeader.imgSize
                border.width: 1
                border.color: Style.current.border
            }
        }

        StyledText {
            id: titleText
            text: qsTr('"%1" woudl like to connect to').arg(request.title)
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            wrapMode: Text.WordWrap
            font.weight: Font.Bold
            font.pixelSize: 17
            horizontalAlignment: Text.AlignHCenter
        }

        AccountSelector {
            id: accountSelector
            label: ""
            width: 190
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            showAccountDetails: false
            accounts: walletModel.accounts
            selectedAccount: walletModel.currentAccount
            currency: walletModel.defaultCurrency
            reset: function() {
                accounts = Qt.binding(function() { return walletModel.accounts })
                selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
            }
            onSelectedAccountChanged: {
                if (!root.currentAddress) {
                    // We just set the account for the first time. Nothing to do here
                    root.currentAddress = selectedAccount.address
                    return
                }
                if (root.currentAddress === selectedAccount.address) {
                    return
                }

                root.currentAddress = selectedAccount.address
                web3Provider.dappsAddress = selectedAccount.address;
                web3Provider.clearPermissions();
                if (selectField.menu.currentIndex !== -1) {
                    walletModel.setCurrentAccountByIndex(selectField.menu.currentIndex-1)
                }
            }
        }


        StyledText {
            id: infoText
            text: {
                switch(request.permission){
                    case Constants.permission_web3: return qsTr("Allowing authorizes this DApp to retrieve your wallet address and enable Web3");
                    case Constants.permission_contactCode: return qsTr("Granting access authorizes this DApp to retrieve your chat key");
                    default: return qsTr("Unknown permission: " + request.permission);
                }
            }
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            font.pixelSize: 15
            horizontalAlignment: Text.AlignHCenter
            color: Style.current.secondaryText
        }

        Row {
            width: childrenRect.width
            spacing: Style.current.padding
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

            StyledButton {
                btnColor: Utils.setColorAlpha(Style.current.danger, 0.1)
                textColor: Style.current.danger
                width: 155
                label: qsTr("Deny")
                onClicked: {
                    postMessage(false);
                    root.close();
                }
            }

            StyledButton {
                btnColor: Utils.setColorAlpha(Style.current.success, 0.1)
                textColor: Style.current.success
                width: 155
                label: qsTr("Allow")
                onClicked: {
                    postMessage(true);
                    root.close();
                }
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;formeditorColor:"#ffffff"}
}
##^##*/