Swap details

Author: monokh

src/components/FeeSelector.vue

@@ -11,13 +11,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import cryptoassets from '@liquality/cryptoassets'
 
 export default {
   props: ['asset', 'value', 'fees'],
   methods: {
-    ...mapGetters(['client']),
     getTooltip (name) {
       const unit = cryptoassets[this.asset.toLowerCase()].fees.unit
       let content = `${this.fees[name].fee} ${unit}`

src/components/HistoryModal.vue

@@ -79,7 +79,7 @@ export default {
   }
 
   &_menu {
-    right: 14px;
+    right: $wrapper-padding;
     &_icon {
       float: right;
       width: 18px;
@@ -93,12 +93,12 @@ export default {
 
     li {
       justify-content: start;
-      padding: 7px 20px;
+      padding: 7px $wrapper-padding;
     }
 
     svg {
       height: 18px;
-      width: 20px;
+      width: $wrapper-padding;
       object-fit: cover;
       margin-right: 6px;
     }
@@ -111,7 +111,7 @@ export default {
   }
 
   &_prev {
-    left: 14px;
+    left: $wrapper-padding;
     &_icon {
       margin-right: 7px;
       margin-top: 3px;

src/components/NavBar.vue

@@ -2,7 +2,7 @@
   <div :class="{
     transaction: true,
     'text-danger': !!error
-  }" @click="$emit('click')">
+  }">
     <div class="transaction_icon">
       <SendIcon v-if="type ==='SEND'" class="transaction_icon_send" />
       <ReceiveIcon v-if="type ==='RECEIVE'" class="transaction_icon_receive" />
@@ -23,17 +23,14 @@
 </template>
 
 <script>
-import moment from 'moment/min/moment-with-locales'
+import moment from '@/utils/moment'
 import cryptoassets from '@liquality/cryptoassets'
 import SendIcon from '@/assets/icons/arrow_send.svg'
 import ReceiveIcon from '@/assets/icons/arrow_receive.svg'
 import SwapIcon from '@/assets/icons/arrow_swap.svg'
 import CompletedIcon from '@/assets/icons/completed.svg'
 import SpinnerIcon from '@/assets/icons/spinner.svg'
 
-const locale = window.navigator.userLanguage || window.navigator.language
-moment.locale(locale)
-
 export default {
   components: {
     SendIcon,
@@ -81,6 +78,7 @@ export default {
   "icon time detail status";
   align-items: center;
   font-size: $font-size-sm;
+  color: $color-text-primary;
 
   &_icon {
     grid-area: icon;
@@ -118,7 +116,7 @@ export default {
   &_time {
     grid-area: time;
     font-size: $font-size-tiny;
-    color: #646F85;;
+    color: $color-text-muted;
   }
 
   &_amount {
@@ -128,7 +126,7 @@ export default {
 
   &_detail {
     grid-area: detail;
-    color: #646F85;;
+    color: $color-text-muted;
     text-align: right;
   }
 

src/components/Transaction.vue

@@ -8,6 +8,7 @@ import UnlockWallet from '@/views/UnlockWallet.vue'
 import BackupWallet from '@/views/BackupWallet.vue'
 import Wallet from '@/views/Wallet.vue'
 import Account from '@/views/Account.vue'
+import TransactionDetails from '@/views/TransactionDetails.vue'
 import Send from '@/views/Send.vue'
 import SendConfirm from '@/views/SendConfirm.vue'
 import Receive from '@/views/Receive.vue'
@@ -52,6 +53,12 @@ const routes = [
     component: Account,
     props: true
   },
+  {
+    name: 'Transaction',
+    path: '/tx/:id',
+    component: TransactionDetails,
+    props: true
+  },
   {
     path: '/account/:asset/send',
     component: Send,

src/router/index.js

@@ -10,3 +10,19 @@ export const getAssetColorStyle = asset => {
   const assetData = cryptoassets[asset.toLowerCase()]
   if (assetData.color) return { color: assetData.color }
 }
+
+const EXPLORERS = {
+  ETH: {
+    testnet: 'https://rinkeby.etherscan.io/tx/0x',
+    mainnet: 'https://etherscan.io/tx/0x'
+  },
+  BTC: {
+    testnet: 'https://blockstream.info/tx/',
+    mainnet: 'https://blockstream.info/testnet/tx/'
+  }
+}
+
+export const getExplorerLink = (hash, asset, network) => {
+  const chain = getChainFromAsset(asset)
+  return `${EXPLORERS[chain][network]}${hash}`
+}

src/utils/asset.js

@@ -0,0 +1,6 @@
+import moment from 'moment/min/moment-with-locales'
+
+const locale = window.navigator.userLanguage || window.navigator.language
+moment.locale(locale)
+
+export default moment

src/utils/moment.js

@@ -0,0 +1,27 @@
+export const ORDER_STATUS_STEP_MAP = {
+  QUOTE: 1,
+  SECRET_READY: 1,
+  INITIATED: 1,
+  INITIATION_REPORTED: 2,
+  WAITING_FOR_CONFIRMATIONS: 3,
+  READY_TO_CLAIM: 3,
+  WAITING_FOR_CLAIM_CONFIRMATIONS: 3,
+  GET_REFUND: 3,
+  WAITING_FOR_REFUND_CONFIRMATIONS: 3,
+  READY_TO_SEND: 4
+}
+
+export const ORDER_STATUS_LABEL_MAP = {
+  QUOTE: 'Initiating',
+  SECRET_READY: 'Initiating',
+  INITIATED: 'Pending Agent',
+  INITIATION_REPORTED: 'Pending Agent',
+  WAITING_FOR_CONFIRMATIONS: 'Pending Agent',
+  READY_TO_CLAIM: 'Claiming',
+  WAITING_FOR_CLAIM_CONFIRMATIONS: 'Claiming',
+  GET_REFUND: 'Refunding',
+  WAITING_FOR_REFUND_CONFIRMATIONS: 'Refunding',
+  REFUNDED: 'Refunded',
+  SUCCESS: 'Completed',
+  READY_TO_SEND: 'Sending'
+}