Swap confirmation modal added

src/components/Buttons/ButtonWithQrCode/ButtonWithQrCode.scss

@@ -0,0 +1,11 @@
+@import '~@/scss/GlobalVariables';
+
+
+.wrap {
+  display: flex;
+  align-items: center;
+}
+
+.the-button {
+  margin-right: 15px;
+}

src/components/Buttons/ButtonWithQrCode/ButtonWithQrCode.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="modal-container">
+    <div class="wrap">
+      <div class="the-button large-round-button-green-filled">{{buttonname}}</div>
+      <div class="qrcode-container">
+        <img class="dummy-qrcode" :src="qrcodeIconImage">
+        <div class="real-qrcode">
+          <img src="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import QrcodeIcon from '@/assets/images/icons/qr-code.svg'
+
+export default {
+  props: ['qrcode', 'buttonname'],
+  data () {
+    return {
+      qrcodeIconImage: QrcodeIcon
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "ButtonWithQrCode.scss";
+</style>

src/components/Buttons/ButtonWithQrCode/index.js

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

src/components/Buttons/HelpCenterButton/HelpCenterButton.scss

@@ -0,0 +1,6 @@
+@import '~@/scss/GlobalVariables';
+
+
+.wrap {
+  text-align: center;
+}

src/components/Buttons/HelpCenterButton/HelpCenterButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="helpcenter-button">
+    <div class="wrap">
+      Having issues?
+      <router-link to="/help-center">Help Center</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "HelpCenterButton.scss";
+</style>

src/components/Buttons/HelpCenterButton/index.js

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

src/components/DropDownAddressSelector/DropDownAddressSelector.scss

@@ -11,7 +11,7 @@
 
   &.dropdown-open {
     border: 1px solid $grey-1;
-    border-bottom: 0;
+    border-bottom: 1px solid $background-color-1;
     border-radius: 4px 4px 0 0;
   }
 

src/layouts/InterfaceLayout/containers/SwapContainer/SwapContainer.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="swap-container">
+    <swap-confirmation-modal></swap-confirmation-modal>
+
     <div class="title-block">
       <interface-container-title :title="$t('common.swap')"/>
       <div class="buy-eth">
@@ -108,7 +110,7 @@
 
     <div class="submit-button-container">
       <h4 v-if="false">1 ETH = 0.000231 BTC</h4>
-      <div class="submit-button large-round-button-green-filled clickable">
+      <div class="submit-button large-round-button-green-filled clickable" v-on:click="swapConfirmationModalOpen">
         {{ $t('common.continue') }}
         <i
           class="fa fa-long-arrow-right"
@@ -128,14 +130,16 @@ import swapIcon from '@/assets/images/icons/swap.svg'
 import ImageKybernetowrk from '@/assets/images/etc/kybernetowrk.png'
 import ImageBity from '@/assets/images/etc/bity.png'
 import ImageVisaMaster from '@/assets/images/etc/visamaster.png'
+import SwapConfirmationModal from './components/SwapConfirmationModal'
 
 export default {
   components: {
     'interface-bottom-text': InterfaceBottomText,
     'interface-container-title': InterfaceContainerTitle,
     'currency-picker': CurrencyPicker,
     'drop-down-address-selector': DropDownAddressSelector,
-    'providers-radio-selector': ProvidersRadioSelector
+    'providers-radio-selector': ProvidersRadioSelector,
+    'swap-confirmation-modal': SwapConfirmationModal
   },
   data() {
     return {
@@ -158,8 +162,8 @@ export default {
     };
   },
   methods: {
-    copyAddress() {
-      alert("This doesn't work for now.");
+    swapConfirmationModalOpen () {
+      this.$children[0].$refs.swapconfirmation.show()
     }
   }
 };

src/layouts/InterfaceLayout/containers/SwapContainer/components/SwapConfirmationModal/SwapConfirmationModal.scss

@@ -0,0 +1,92 @@
+@import '~@/scss/GlobalVariables';
+
+
+.modal-body {
+
+}
+
+.time-remaining {
+  text-align: center;
+
+  h1 {
+    font-weight: 500;
+    font-size: 50px;
+    color: $red-2;
+    margin: 0;
+  }
+}
+
+
+
+.value {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 13px;
+  margin-top: 13px;
+
+  span {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+
+.block-title {
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 3px;
+}
+
+
+.address {
+  line-height: 19px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.swap-detail {
+  display: grid;
+  grid-template-columns: 1fr 80px 1fr;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.from-address,
+.to-address {
+  background-color: $background-color-1;
+  padding: 20px;
+  border-radius: 5px;
+
+  .icon {
+
+  }
+}
+
+
+.right-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+}
+
+
+.confirm-send-button {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  display: flex;
+
+  >* {
+    margin: 0 auto;
+  }
+}
+

src/layouts/InterfaceLayout/containers/SwapContainer/components/SwapConfirmationModal/SwapConfirmationModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="modal-container">
+    <b-modal ref="swapconfirmation" hide-footer centered class="bootstrap-modal bootstrap-modal-wide padding-40-20" title="Confirmation">
+      <div class="time-remaining">
+        <h1>09:25</h1>
+        <p>Time Remaining</p>
+      </div>
+      <div class="swap-detail">
+        <div class="from-address">
+          <div class="icon">
+            <img :src="fromAddress.image">
+          </div>
+          <p class="value">{{fromAddress.value}} <span>{{fromAddress.name}}</span></p>
+          <p class="block-title">From Address</p>
+          <p class="address">{{fromAddress.address}}</p>
+        </div>
+        <div class="right-arrow">
+          <img :src="arrowImage">
+        </div>
+        <div class="to-address">
+          <div class="icon">
+            <img :src="toAddress.image">
+          </div>
+          <p class="value">{{toAddress.value}} <span>{{toAddress.name}}</span></p>
+          <p class="block-title">To Address</p>
+          <p class="address">{{toAddress.address}}</p>
+        </div>
+      </div>
+
+      <detail-information :details="detailInfo"></detail-information>
+
+      <div class="confirm-send-button">
+        <button-with-qrcode :qrcode="qrcode" buttonname="Confirm and Send"></button-with-qrcode>
+      </div>
+
+      <help-center-button></help-center-button>
+
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import Arrow from '@/assets/images/etc/single-arrow.svg'
+import iconBtc from '@/assets/images/currency/btc.svg'
+import iconEth from '@/assets/images/currency/eth.svg'
+import DetailInformation from './components/DetailInformation'
+import ButtonWithQrCode from '@/components/Buttons/ButtonWithQrCode'
+import HelpCenterButton from '@/components/Buttons/HelpCenterButton'
+
+export default {
+  components: {
+    'detail-information': DetailInformation,
+    'button-with-qrcode': ButtonWithQrCode,
+    'help-center-button': HelpCenterButton
+  },
+  props: [],
+  data () {
+    return {
+      qrcode: '',
+      arrowImage: Arrow,
+      fromAddress: {
+        image: iconEth,
+        value: '1.0000000000',
+        name: 'ETH',
+        address: '0xF54F78F67feCDd37e0C009aB4cCD6549A69540D4'
+      },
+      toAddress: {
+        image: iconBtc,
+        value: '0.0034523',
+        name: 'BTC',
+        address: '0xF54F78F67feCDd37e0C009aB4cCD6549A69540D4'
+      },
+      detailInfo: [
+        {
+          name: 'Network',
+          value: 'ETH by mytherapi.com'
+        },
+        {
+          name: 'Gas Limit',
+          value: '21000'
+        },
+        {
+          name: 'Gas Price',
+          value: '210000 Gwei (0.00321 ETH=$1.234)'
+        },
+        {
+          name: 'Max Transaction Fee',
+          value: '441000 Gwei (0.000441 ETH)'
+        },
+        {
+          name: 'Nonce',
+          value: '0'
+        },
+        {
+          name: 'Data',
+          value: 'None'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "SwapConfirmationModal.scss";
+</style>