Draft: Add support for Multi-Signature-Wallets

quasar.conf.js

@@ -131,7 +131,8 @@ module.exports = configure(function (/* ctx */) {
       env: {
           APP_VERSION: JSON.stringify(appVersion),
           APP_BUILD: JSON.stringify(appBuild),
-          DIST_TAG: JSON.stringify(process.env.DIST_TAG)
+          DIST_TAG: JSON.stringify(process.env.DIST_TAG),
+          MULTISIG_DEPLOYMENT_URL: JSON.stringify(process.env.MULTISIG_DEPLOYMENT_URL)
       },
       vueRouterMode: 'hash', // available values: 'hash', 'history'
 

src/i18n/en-us/index.ts

@@ -28,6 +28,7 @@ export default {
         required_field: 'This field is required',
         something_wrong: 'Something is wrong',
         no_wallet: 'No wallet created yet',
+        no_multisig_support: 'Not supported by Multi-Signature-Wallets',
         invalid_input: 'Invalid input',
 
         // notify
@@ -90,11 +91,43 @@ export default {
         mnemonic_words_count: 'Mnemonic words count',
         action_generate: 'Generate',
         action_import: 'Import',
+        action_multisig: 'Add or import Multi-Signature-Wallet',
         label_wallet_name: 'Wallet Name',
         label_mnemonic: 'Please enter your mnemonic words',
         label_ledger_user: 'Ledger user?',
         action_ledger_link: 'Link Now'
     },
+    newMultiSig: {
+        title: 'New Multi-Signature-Wallet',
+        baseName: 'New MultiSig',
+        action_deploy: 'Deploy',
+        action_import: 'Import',
+        tx_deploy_title: 'Deploy new Multi-Signature-Contract',
+        msg_deploying: 'Deploying new Multi-Signature-Wallet',
+        msg_deployment_failed: 'Deployment failed, please check the deployment transaction',
+        msg_intro: 'A Multi-Signature-Wallet is a Smart Contract deployed on the network. Initially it will have one owner (the address you sign the deployment with). You need to add more owners after deployment.',
+        label_address: 'Multi-Signature-Address',
+        msg_invalid_address: 'Please enter a valid address',
+        msg_invalid_address_checksum: 'Address checksum failed'
+    },
+    ownerMultiSig: {
+        title: 'Manage Owners',
+        title_owners: 'List of Owners',
+        title_add_dialog: 'Add Owner',
+        title_change_required_confirmations: 'Change required confirmations',
+        required_confirmations: 'Number of owners to required to confirm transactions',
+        action_manage_owner: 'Wallet Owners',
+        msg_owner_added: 'Owner added',
+        msg_owner_deleted: 'Owner deleted',
+        msg_owner_existed: 'Owner already exists',
+        msg_delete: 'Are you sure you want to delete the owner?'
+    },
+    transactionsMultiSig: {
+        title: 'Transactions',
+        action_confirm_transaction: 'Confirm Transaction',
+        action_revoke_confirmation: 'Revoke Confirmation',
+        action_execute_transaction: 'Execute Transaction'
+    },
     authenticationDialog: {
         title: 'Authenticate',
         msg_password_error: 'Incorrect password',
@@ -120,7 +153,9 @@ export default {
     address: {
         title: 'Address',
         label_assets: 'Assets',
-        action_receive: 'Receive'
+        action_receive: 'Receive',
+        label_transactions: 'Transactions',
+        label_multisig_transactions: 'Multi-Sig-Transactions'
     },
     asset: {
         title: 'Asset',

src/models.d.ts

@@ -16,7 +16,7 @@ declare namespace M {
     namespace Wallet {
         interface Meta {
             name: string
-            type: 'hd' | 'ledger'
+            type: 'hd' | 'ledger' | 'multisig'
             addresses: string[]
             backedUp?: boolean
         }

src/pages/Address/Controller.vue

@@ -10,6 +10,19 @@
                     :address="address"
                     :name="wallet.meta.name"
                 />
+                <q-btn
+                    v-if="wallet.meta.type === 'multisig'" unelevated class="full-width" :to="{
+                        name: 'transactions-multisig',
+                        params: {
+                            walletId: String(wallet.id),
+                            addressIndex: addressIndex
+                        }
+                    }">
+                    <q-item-section>
+                        <q-item-label>{{multiSigTransactionCount}} {{ $t('address.label_multisig_transactions') }}</q-item-label>
+                    </q-item-section>
+                </q-btn>
+
                 <q-item dense>
                     <q-item-section>
                         <q-item-label header>
@@ -79,6 +92,7 @@ import HeadItem from './HeadItem.vue'
 import AsyncResolve from 'components/AsyncResolve'
 import PageToolbar from 'components/PageToolbar.vue'
 import PageContent from 'components/PageContent.vue'
+import Contract from '../MultiSig/const'
 
 export default Vue.extend({
     components: {
@@ -96,6 +110,21 @@ export default Vue.extend({
         wallet(): Promise<M.Wallet | null> {
             return this.$svc.wallet.get(parseInt(this.walletId))
         },
+        multiSigTransactionCount: {
+            async get(): Promise<string> {
+                if (!this.wallet) {
+                    return '0'
+                }
+
+                const { decoded: { 0: count } } = await this.thor
+                    .account(this.wallet.meta.addresses[0])
+                    .method(Contract.getTransactionCount)
+                    .call()
+
+                return count
+            },
+            default: '0'
+        },
         tokenList: {
             async get(): Promise<M.TokenSpec[]> {
                 const wallet = this.wallet
@@ -114,7 +143,8 @@ export default Vue.extend({
     computed: {
         address(): string {
             return this.wallet ? this.wallet.meta.addresses[parseInt(this.addressIndex)] : ''
-        }
+        },
+        thor(): Connex.Thor { return this.$svc.bc(this.wallet!.gid).thor }
     }
 })
 </script>

src/pages/Index/OptionMenu.vue

@@ -19,12 +19,17 @@ export default Vue.extend({
             return [{
                 label: this.$t('index.action_new_address').toString(),
                 action: () => this.newAddress(),
-                hidden: this.wallet.meta.addresses.length >= MAX_ADDRESS
+                hidden: this.wallet.meta.addresses.length >= MAX_ADDRESS || this.wallet.meta.type === 'multisig'
             },
             {
                 label: this.$t('index.action_backup').toString(),
                 action: () => this.$router.push({ name: 'backup', params: { walletId: this.wallet.id.toString() } }),
-                hidden: this.wallet.meta.type === 'ledger'
+                hidden: ['ledger', 'multisig'].includes(this.wallet.meta.type)
+            },
+            {
+                label: this.$t('ownerMultiSig.action_manage_owner').toString(),
+                action: () => this.$router.push({ name: 'owner-multisig', params: { walletId: this.wallet.id.toString(), gid: this.wallet.gid } }),
+                hidden: this.wallet.meta.type !== 'multisig'
             },
             {
                 label: this.$t('index.action_rename').toString(),

src/pages/MultiSig/New/AddressInputDialog.vue

@@ -0,0 +1,64 @@
+<template>
+    <q-dialog ref="dialog" @hide="$emit('hide')" :position="$q.screen.xs ? 'bottom': 'standard'"
+        :no-backdrop-dismiss="!$q.screen.xs">
+        <q-card class="full-width">
+            <prompt-dialog-toolbar>{{ $t('newWallet.action_import') }}</prompt-dialog-toolbar>
+            <q-card-section>
+                <q-input ref="input" autofocus v-model="state.address" :label="$t('newMultiSig.label_address')"
+                    type="input" outlined :error="!!error" :error-message="error" no-error-icon />
+            </q-card-section>
+            <q-card-actions>
+                <q-btn v-disableFocusHelper class="w40 q-mx-auto" unelevated color="primary" :label="$t('common.ok')"
+                    @click="onSubmit()" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import { QDialog } from 'quasar'
+import { address } from 'thor-devkit'
+import PromptDialogToolbar from 'src/components/PromptDialogToolbar.vue'
+
+export default Vue.extend({
+    components: { PromptDialogToolbar },
+    props: {
+        state: Object as () => { address: string }
+    },
+    data: () => {
+        return {
+            address: '',
+            error: ''
+        }
+    },
+    watch: {
+        'state.address'() {
+            this.error = ''
+        }
+    },
+    methods: {
+        // method is REQUIRED by $q.dialog
+        show() { (this.$refs.dialog as QDialog).show() },
+        // method is REQUIRED by $q.dialog
+        hide() { (this.$refs.dialog as QDialog).hide() },
+        ok(result: string) {
+            this.$emit('ok', result)
+            this.hide()
+        },
+        checkSumAddress(v: string): boolean {
+            return !(v !== v.toLowerCase() && address.toChecksumed(v) !== v)
+        },
+        async onSubmit() {
+            this.error = ''
+            await this.$nextTick()
+            this.error = address.test(this.state.address)
+                ? this.checkSumAddress(this.state.address) ? '' : this.$t('newMultiSig.msg_invalid_address_checksum').toString()
+                : this.$t('newMultiSig.msg_invalid_address').toString()
+
+            if (this.error === '') {
+                this.ok(this.state.address)
+            }
+        }
+    }
+})
+</script>