init

modules/account/components/Control/Actions.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="action">
+    <Statistic />
+    <div v-for="action in actions" :key="action.description" class="action-item">
+      <b-icon :icon="action.icon" size="is-large" />
+      <div class="desc">
+        {{ $t(action.description) }}
+      </div>
+      <b-button type="is-primary" outlined @mousedown.prevent @click="action.onClick">
+        {{ $t(action.button) }}
+      </b-button>
+    </div>
+    <div class="action-item has-switch">
+      <b-icon icon="account-file" size="is-large" />
+      <div class="desc">
+        {{ $t('account.control.fileDesc') }}
+      </div>
+      <b-switch :value="isEnabledSaveFile" size="is-medium" @input="handleEnabledSaveFile" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { openDecryptModal, openShowRecoverKeyModal, openRemoveAccountModal } from '../../modals'
+import { controlComputed, controlMethods } from '../../injectors'
+import Statistic from './Statistic'
+
+export default {
+  components: {
+    Statistic
+  },
+  data() {
+    return {
+      actions: [
+        {
+          icon: 'account-notes',
+          onClick: this.getEncryptedNotes,
+          button: 'account.control.loadAll',
+          description: 'account.control.loadAllDesc'
+        },
+        {
+          icon: 'account-key',
+          onClick: this.openRecoverKeyModal,
+          button: 'account.control.showRecoveryKey',
+          description: 'account.control.showRecoveryKeyDesc'
+        },
+        {
+          icon: 'account-remove',
+          button: 'account.control.remove',
+          onClick: this.handleRemoveAccount,
+          description: 'account.control.removeDesc'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...controlComputed
+  },
+  methods: {
+    ...controlMethods,
+    handleEnabledSaveFile() {
+      this.enabledSaveFile()
+    },
+    async getEncryptedNotes() {
+      const props = await this.decryptNotes()
+
+      if (props) {
+        openDecryptModal({ ...props, parent: this })
+      }
+    },
+    handleRemoveAccount() {
+      const onConfirm = () => {
+        this.addNoticeWithInterval({
+          notice: {
+            title: 'accountHasBeenDeleted',
+            type: 'info'
+          },
+          interval: 2000
+        })
+        this.removeAccount()
+      }
+
+      openRemoveAccountModal({ i18n: this.$i18n, onConfirm })
+    },
+    async openRecoverKeyModal() {
+      const recoveryKey = await this.getRecoveryKey()
+
+      if (recoveryKey) {
+        openShowRecoverKeyModal({ recoveryKey, parent: this })
+      }
+    }
+  }
+}
+</script>

modules/account/components/Control/Control.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="account-box">
+    <Header />
+    <Actions />
+  </div>
+</template>
+
+<script>
+import Header from './Header'
+import Actions from './Actions'
+
+export default {
+  components: {
+    Header,
+    Actions
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>

modules/account/components/Control/Header.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="address">
+    <div class="address-item">
+      <div class="label">{{ $t('account.account') }}</div>
+      <div class="value">{{ accounts.encrypt }}</div>
+    </div>
+    <div class="address-item">
+      <div class="label">{{ $t('account.backedUpWith') }}</div>
+      <div class="value is-small">{{ accounts.backup }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { headerComputed } from '../../injectors'
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    ...headerComputed
+  },
+  methods: {}
+}
+</script>

modules/account/components/Control/Statistic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="action-item">
+    <b-icon icon="account-balance" size="is-large" />
+    <i18n path="account.control.balance" tag="div" class="desc">
+      <template v-if="hasBalances" v-slot:value>
+        <p class="balance">
+          <span v-for="(item, index) in getBalance" :key="item.currency" class="balance-item"
+            ><NumberFormat :value="item.amount" /> {{ getSymbol(item.currency)
+            }}{{ index !== getBalance.length - 1 ? ',' : '' }}</span
+          >
+        </p>
+      </template>
+    </i18n>
+  </div>
+</template>
+
+<script>
+import { statisticComputed } from '../../injectors'
+import { NumberFormat } from '../../dependencies'
+
+export default {
+  components: {
+    NumberFormat
+  },
+  computed: {
+    ...statisticComputed,
+    getBalance() {
+      const balances = this.statistic.reduce((acc, { currency, amount }) => {
+        if (acc[currency]) {
+          acc[currency] += Number(amount)
+        } else {
+          acc[currency] = Number(amount)
+        }
+        return acc
+      }, {})
+      return Object.keys(balances).map((k) => {
+        return {
+          currency: k,
+          amount: balances[k]
+        }
+      })
+    },
+    hasBalances() {
+      return this.getBalance && this.getBalance.length
+    }
+  }
+}
+</script>

modules/account/components/Control/index.js

@@ -0,0 +1 @@
+export { default as Control } from './Control'

modules/account/components/Indicator/Indicator.vue

@@ -0,0 +1,52 @@
+<template>
+  <b-tooltip position="is-bottom" type="is-dark-tooltip" :triggers="[]">
+    <template v-slot:content>
+      <template v-if="isSetupAccount">
+        <p>{{ $t('accountConnected') }}</p>
+        <a @click="onCopy">{{ shortAddress(accounts.encrypt) }}</a>
+        <p><NumberFormat :value="noteAccountBalance" /> {{ currency }}</p>
+      </template>
+      <template v-else>
+        <p>{{ $t('notConnected') }}</p>
+        <b-button type="is-primary-link mb-0" @click="redirectToAccount">{{ $t('connectAccount') }}</b-button>
+      </template>
+    </template>
+    <b-button type="is-nav-icon" icon-left="wallet" :class="{ tornado: isSetupAccount }"></b-button>
+  </b-tooltip>
+</template>
+
+<script>
+import { indicatorComputed, indicatorMethods } from '../../injectors'
+import { NumberFormat } from '../../dependencies'
+import { sliceAddress } from '@/utils'
+
+export default {
+  components: {
+    NumberFormat
+  },
+  props: {
+    active: {
+      type: Boolean
+    }
+  },
+  computed: {
+    ...indicatorComputed
+  },
+  methods: {
+    ...indicatorMethods,
+    shortAddress(address) {
+      return sliceAddress(address)
+    },
+    async onCopy() {
+      await this.$copyText(this.accounts.encrypt)
+      this.$store.dispatch('notice/addNoticeWithInterval', {
+        notice: {
+          title: 'copied',
+          type: 'info'
+        },
+        interval: 2000
+      })
+    }
+  }
+}
+</script>

modules/account/components/Indicator/index.js

@@ -0,0 +1 @@
+export { default as Indicator } from './Indicator'

modules/account/components/NoteAccount/NoteAccount.vue

@@ -0,0 +1,67 @@
+<template>
+  <div ref="note" class="note-account" :class="{ 'is-active': isActive }">
+    <h2 class="title">
+      <!-- <b-icon icon="astronaut" size="is-large" /> -->
+      {{ $t('account.title') }}
+    </h2>
+    <b-notification class="main-notification" type="is-info">
+      {{ $t('account.description') }}
+    </b-notification>
+    <Setup v-if="!isSetupAccount" />
+    <Control v-else />
+  </div>
+</template>
+
+<script>
+import { noteComputed, noteMethods } from '../../injectors'
+
+import { Setup } from '../Setup'
+import { Control } from '../Control'
+
+export default {
+  components: {
+    Setup,
+    Control
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  computed: {
+    ...noteComputed
+  },
+  watch: {
+    isInitialized(isInitialized) {
+      if (isInitialized) {
+        this.checkExistAccount()
+      }
+    },
+    isHighlightedNoteAccount: {
+      handler(value) {
+        if (value) {
+          this.scrollOnHiglight()
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.checkExistAccount()
+  },
+  methods: {
+    ...noteMethods,
+    scrollOnHiglight() {
+      setTimeout(() => {
+        this.isActive = true
+        this.$refs.note.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
+      }, 100)
+
+      setTimeout(() => {
+        this.isActive = false
+        this.highlightNoteAccount({ isHighlighted: false })
+      }, 1000)
+    }
+  }
+}
+</script>

modules/account/components/NoteAccount/index.js

@@ -0,0 +1 @@
+export { default as NoteAccount } from './NoteAccount'

modules/account/components/Settings/Actions.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="action">
+    <div class="action-item">
+      <b-icon icon="account-wallet" size="is-large" />
+      <div class="desc">
+        {{ isLoggedIn ? $t('account.wallet.disconnect') : $t('account.wallet.desc') }}
+      </div>
+      <b-button v-if="isLoggedIn" type="is-primary" outlined @mousedown.prevent @click="onLogOut">
+        {{ $t('account.wallet.logout') }}
+      </b-button>
+      <connect-button v-else outlined action-text="account.wallet.connectWeb3" />
+    </div>
+    <div class="action-item">
+      <b-icon icon="account-rpc" size="is-large" />
+      <div class="desc">
+        {{ $t('account.wallet.rpcDesc') }}
+      </div>
+      <b-button type="is-primary" outlined @click="onSettings">{{ $t('account.wallet.changeRpc') }}</b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { walletComputed, walletActions } from '../../injectors'
+import { openSettingsModal } from '../../modals'
+
+import { ConnectButton } from '@/components/web3Connect'
+
+export default {
+  components: {
+    ConnectButton
+  },
+  computed: {
+    ...walletComputed
+  },
+  methods: {
+    ...walletActions,
+    onSettings() {
+      openSettingsModal({
+        parent: this,
+        netId: this.netId
+      })
+    }
+  }
+}
+</script>

modules/account/components/Settings/Header.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="address">
+    <div class="address-item">
+      <div class="label">{{ $t('account.wallet.label') }}</div>
+      <div class="value">{{ ethAccount || '-' }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { walletComputed } from '../../injectors'
+
+export default {
+  computed: {
+    ...walletComputed
+  }
+}
+</script>

modules/account/components/Settings/Settings.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="wallet-account">
+    <h2 class="title">
+      {{ $t('wallet') }}
+    </h2>
+    <div class="account-box">
+      <Header />
+      <Actions />
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from './Header'
+import Actions from './Actions'
+
+export default {
+  components: {
+    Header,
+    Actions
+  }
+}
+</script>

modules/account/components/Settings/index.js

@@ -0,0 +1 @@
+export { default as Settings } from './Settings'

modules/account/components/Setup/Actions.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="action">
+    <div class="action-item">
+      <b-icon icon="account-setup" size="is-large" />
+      <div class="desc">
+        {{ $t('account.setup.desc') }}
+      </div>
+      <b-tooltip :active="isAccountDisabled" :label="$t(setupAccountTooltip)" multilined size="is-large">
+        <b-button :disabled="isAccountDisabled" outlined type="is-primary" @click="showSetupModal">{{
+          $t('account.setup.account')
+        }}</b-button>
+      </b-tooltip>
+    </div>
+    <div class="action-item">
+      <b-icon icon="account-recover" size="is-large" />
+      <div class="desc">
+        {{ $t('account.setup.recoverDesc') }}
+      </div>
+      <b-tooltip :active="isRecoverDisabled" :label="$t(recoverAccountTooltip)" multilined size="is-large">
+        <b-button type="is-primary" outlined :disabled="isRecoverDisabled" @click="handleRecoverAccount">
+          {{ $t('account.setup.recover') }}
+        </b-button>
+      </b-tooltip>
+    </div>
+    <div class="action-item">
+      <b-icon icon="account-raw" size="is-large" />
+      <div class="desc">
+        {{ $t('account.setup.enterRawDesc') }}
+      </div>
+      <b-button type="is-primary" outlined @click="showRecoverKeyModal">{{
+        $t('account.setup.enterRaw')
+      }}</b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setupComputed, setupMethods } from '../../injectors'
+import { openDecryptModal, openRecoverAccountModal, openSetupAccountModal } from '../../modals'
+
+export default {
+  computed: {
+    ...setupComputed,
+    isAccountDisabled() {
+      return this.isExistAccount || !this.isLoggedIn
+    },
+    isRecoverDisabled() {
+      return !this.isExistAccount || !this.isLoggedIn || this.isPartialSupport
+    },
+    recoverAccountTooltip() {
+      if (this.isPartialSupport) {
+        return 'mobileWallet.actions.disabled'
+      }
+      return this.isLoggedIn ? 'account.setup.recTooltip' : 'connectYourWalletFirst'
+    },
+    setupAccountTooltip() {
+      return this.isLoggedIn ? 'account.setup.setTooltip' : 'connectYourWalletFirst'
+    }
+  },
+  methods: {
+    ...setupMethods,
+    async getEncryptedNotes() {
+      const props = await this.decryptNotes()
+
+      if (props) {
+        openDecryptModal({ ...props, parent: this })
+      }
+    },
+    showRecoverKeyModal() {
+      openRecoverAccountModal({ parent: this, getNotes: this.getEncryptedNotes })
+    },
+    showSetupModal() {
+      openSetupAccountModal({ parent: this })
+    },
+    async handleRecoverAccount() {
+      try {
+        this.enable({ message: this.$t('account.setup.decrypt') })
+        await this.recoverAccountFromChain()
+        await this.getEncryptedNotes()
+      } catch {
+        this.addNoticeWithInterval({
+          notice: {
+            title: 'decryptFailed',
+            type: 'danger'
+          },
+          interval: 5000
+        })
+      } finally {
+        this.disable()
+      }
+    }
+  }
+}
+</script>

modules/account/components/Setup/Header.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="address">
+    <div class="address-item">
+      <div class="label">{{ $t('account.account') }}</div>
+      <div class="value">{{ accounts.backup }}</div>
+    </div>
+    <div class="address-item">
+      <div class="label">{{ $t('account.backedUpWith') }}</div>
+      <div class="value">{{ accounts.encrypt }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { headerComputed } from '../../injectors'
+
+export default {
+  computed: {
+    ...headerComputed
+  },
+  watch: {},
+  methods: {}
+}
+</script>

modules/account/components/Setup/Setup.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="account-box">
+    <Header />
+    <Actions />
+  </div>
+</template>
+
+<script>
+import Header from './Header'
+import Actions from './Actions'
+
+export default {
+  components: {
+    Header,
+    Actions
+  }
+}
+</script>

modules/account/components/Setup/index.js

@@ -0,0 +1 @@
+export { default as Setup } from './Setup'

modules/account/components/index.js

@@ -0,0 +1,5 @@
+export { Setup } from './Setup'
+export { Control } from './Control'
+export { Settings } from './Settings'
+export { Indicator } from './Indicator'
+export { NoteAccount } from './NoteAccount'