+ {{ $t('unstoppable.no-crypto-domains-one') }}
+
+ {{ $t('unstoppable.no-crypto-domains-two') }}
+
+
+
+
+
+
+ {{ domain }}
+
+ Release Deed
+{{ $t('ens.release-deed') }}
+ 
{{ $t('unstoppable.congratulations') }}
diff --git a/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue b/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
index 259b9e7527..3c767a9474 100644
--- a/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
+++ b/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
@@ -217,7 +217,7 @@ export default {
},
beforeMount() {
if (this.domainName === '' || !this.domainPrice) {
- this.$router.push('/interface/dapps/unstoppable');
+ this.$router.push({ name: 'unstoppableInitialState' });
}
this.interval = setInterval(() => {
if (this.chargeId) {
@@ -306,16 +306,14 @@ export default {
this.confirmations = payment.block.confirmations;
this.confirmationsRequired = payment.block.confirmations_required;
if (payment.status === 'CONFIRMED') {
- this.$router.push('/interface/dapps/unstoppable/claim-pending');
+ this.$router.push({ name: 'claimPending' });
}
}
}
});
},
handlePayWithCardClick() {
- this.$router.push(
- '/interface/dapps/unstoppable/buy/payment-method/stripe'
- );
+ this.$router.push({ name: 'payWithStripe' });
},
submit() {
if (!this.account || !this.account.address) {
diff --git a/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss
new file mode 100644
index 0000000000..c69eefb049
--- /dev/null
+++ b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss
@@ -0,0 +1,81 @@
+@import '../ManageUnstoppable/ManageUnstoppable.scss';
+.initial-state-unstoppable {
+ @extend %template-container;
+
+ padding: 20px;
+}
+
+.content-container {
+ .title-container {
+ align-items: flex-end;
+ display: flex;
+ margin-bottom: 10px;
+
+ .title {
+ padding: 0 15px;
+
+ span {
+ color: $dark-blue-6;
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
+ }
+
+ p {
+ max-width: 760px;
+ }
+
+ .buttons {
+ margin-bottom: 3px;
+ margin-left: auto;
+ }
+ }
+
+ .content {
+ align-items: center;
+
+ @media all and (max-width: 600px) {
+ flex-direction: column;
+ height: 100%;
+ }
+ }
+ .domain-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 10px;
+ margin: 10px;
+ background: $light-green-1;
+
+ .button {
+ background-color: $button--background-color-1;
+ border: 1px solid $button--border-color-1;
+ border-radius: 6px;
+ color: $button--text-color-1;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ user-select: none;
+ display: inline-block;
+ text-align: center;
+ padding: 10px 25px;
+ }
+ }
+}
+.no-domains {
+ padding: 15px;
+}
+
+.loading-container {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.link {
+ color: $dark-green-4;
+ cursor: pointer;
+}
diff --git a/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue
new file mode 100644
index 0000000000..c86f627f10
--- /dev/null
+++ b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue
@@ -0,0 +1,102 @@
+
+
{{ $t('unstoppable.congratulations') }}
diff --git a/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue b/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
index 259b9e7527..3c767a9474 100644
--- a/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
+++ b/src/dapps/Unstoppable/containers/CryptoContainer/CryptoContainer.vue
@@ -217,7 +217,7 @@ export default {
},
beforeMount() {
if (this.domainName === '' || !this.domainPrice) {
- this.$router.push('/interface/dapps/unstoppable');
+ this.$router.push({ name: 'unstoppableInitialState' });
}
this.interval = setInterval(() => {
if (this.chargeId) {
@@ -306,16 +306,14 @@ export default {
this.confirmations = payment.block.confirmations;
this.confirmationsRequired = payment.block.confirmations_required;
if (payment.status === 'CONFIRMED') {
- this.$router.push('/interface/dapps/unstoppable/claim-pending');
+ this.$router.push({ name: 'claimPending' });
}
}
}
});
},
handlePayWithCardClick() {
- this.$router.push(
- '/interface/dapps/unstoppable/buy/payment-method/stripe'
- );
+ this.$router.push({ name: 'payWithStripe' });
},
submit() {
if (!this.account || !this.account.address) {
diff --git a/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss
new file mode 100644
index 0000000000..c69eefb049
--- /dev/null
+++ b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.scss
@@ -0,0 +1,81 @@
+@import '../ManageUnstoppable/ManageUnstoppable.scss';
+.initial-state-unstoppable {
+ @extend %template-container;
+
+ padding: 20px;
+}
+
+.content-container {
+ .title-container {
+ align-items: flex-end;
+ display: flex;
+ margin-bottom: 10px;
+
+ .title {
+ padding: 0 15px;
+
+ span {
+ color: $dark-blue-6;
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
+ }
+
+ p {
+ max-width: 760px;
+ }
+
+ .buttons {
+ margin-bottom: 3px;
+ margin-left: auto;
+ }
+ }
+
+ .content {
+ align-items: center;
+
+ @media all and (max-width: 600px) {
+ flex-direction: column;
+ height: 100%;
+ }
+ }
+ .domain-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 10px;
+ margin: 10px;
+ background: $light-green-1;
+
+ .button {
+ background-color: $button--background-color-1;
+ border: 1px solid $button--border-color-1;
+ border-radius: 6px;
+ color: $button--text-color-1;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ user-select: none;
+ display: inline-block;
+ text-align: center;
+ padding: 10px 25px;
+ }
+ }
+}
+.no-domains {
+ padding: 15px;
+}
+
+.loading-container {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.link {
+ color: $dark-green-4;
+ cursor: pointer;
+}
diff --git a/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue
new file mode 100644
index 0000000000..c86f627f10
--- /dev/null
+++ b/src/dapps/Unstoppable/containers/InitialManageUnstoppableStateContainer/InitialManageUnstoppableStateContainer.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+ {{ $t('unstoppable.your-crypto-domains') }}
+
+
+
+
+
+
+
+
+ -
+
+
+ {{ key }}
+
+
+
+
+
+
+
+
+
+
+
+
- ![]()
+ ![]()
{{ token.symbol }}
@@ -189,8 +186,8 @@ export default {
}
},
methods: {
- iconFetch(address) {
- const token = this.networkTokens[toChecksumAddress(address)];
+ iconFetch(tok) {
+ const token = this.networkTokens[toChecksumAddress(tok.address)];
if (token) {
const tokenSrc =
token.icon_png !== ''
@@ -199,6 +196,8 @@ export default {
? `https://img.mewapi.io/?image=${token.icon}&width=50&height=50&fit=scale-down`
: this.network.type.icon;
return tokenSrc;
+ } else if (tok.logo && tok.logo.src && tok.logo.src !== '') {
+ return `https://img.mewapi.io/?image=${token.logo.src}&width=50&height=50&fit=scale-down`;
}
return this.network.type.icon;
diff --git a/src/layouts/InterfaceLayout/containers/SwapContainer/SwapContainer.vue b/src/layouts/InterfaceLayout/containers/SwapContainer/SwapContainer.vue
index 56cbeed642..9656e49d31 100644
--- a/src/layouts/InterfaceLayout/containers/SwapContainer/SwapContainer.vue
+++ b/src/layouts/InterfaceLayout/containers/SwapContainer/SwapContainer.vue
@@ -14,6 +14,7 @@
:selected-provider="selectedProvider"
:swap-details="swapDetails"
:current-address="currentAddress"
+ :swap="swap"
@swapStarted="resetSwapState"
/>
@@ -615,6 +616,9 @@ export default {
this.selectedProvider = this.providerList.find(entry => {
return entry.provider === provider;
});
+ if (!this.selectedProvider) {
+ this.selectedProvider = {};
+ }
this.providerSelectedName = this.selectedProvider.provider;
this.updateEstimate('from');
},
diff --git a/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.scss b/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.scss
index 14297f7632..2587a17e89 100644
--- a/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.scss
+++ b/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.scss
@@ -73,240 +73,36 @@
}
}
-//$mobile-width: 800px;
-//
-//.buy-btc {
-// padding-top: 90px;
-// padding-bottom: 160px;
-// @media all and (max-width: $mobile-width){
-// padding-top: 40px;
-// padding-bottom: 60px;
-// }
-//}
-//
-//.powered-by,
-//.powered-by-mobile {
-// margin-top: 60px;
-// .simplex {
-// display: flex;
-// align-items: center;
-// margin-bottom: 20px;
-// span {
-// font-size: 14px;
-// }
-// img {
-// height: 40px;
-// margin-left: 15px;
-// }
-// }
-// .visa-master {
-// display: flex;
-// align-items: center;
-// span {
-// font-size: 14px;
-// }
-// img {
-// height: 25px;
-// margin-left: 15px;
-// }
-// }
-//}
-//
-//.powered-by-mobile {
-// display: none;
-//}
-//
-//@media all and (max-width: $mobile-width){
-// .powered-by-mobile {
-// display: block;
-// margin-top: 30px;
-// }
-// .powered-by {
-// display: none;
-// }
-//
-//}
-//
-//.invalid-field {
-// border: solid 1px #d5202f !important;
-//}
-//
-//.block-division {
-// display: grid;
-// grid-template-columns: 1fr 1fr;
-//
-// @media all and (max-width: $mobile-width){
-// grid-template-columns: 1fr;
-// }
-//
-// .block-1 {
-// .mew-logo-container{
-// .mew-logo-image {
-// width: 200px;
-// }
-// }
-// .text-contents {
-// .large-title {
-// font-size: 55px;
-// font-weight: 700;
-// line-height: 60px;
-// margin-top: 100px;
-// max-width: 350px;
-//
-// @media all and (max-width: $mobile-width){
-// font-size: 30px;
-// line-height: 33px;
-// margin-bottom: 40px;
-// margin-top: 35px;
-// max-width: 250px;
-// }
-// }
-// }
-// }
-//
-// .block-2 {
-// .buy-form-container {
-// box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.05);
-// border-radius: 16px;
-// padding: 40px 35px;
-// background-color: white;
-//
-// @media all and (max-width: $mobile-width){
-// padding: 30px 15px;
-// }
-//
-// h4 {
-// margin-bottom: 15px;
-// text-transform: uppercase;
-// }
-//
-// .price-amount {
-// @media all and (max-width: $mobile-width){
-// grid-template-columns: 1fr;
-//
-// .price {
-// margin-bottom: 40px;
-// }
-// }
-// display: grid;
-// grid-template-columns: 1fr 1fr;
-// grid-column-gap: 20px;
-// margin-bottom: 40px;
-//
-// .input-form {
-// display: grid;
-// grid-template-columns: 1fr 70px;
-//
-// input {
-// width: 100%;
-// background-color: #f8f8f8;
-// border-radius: 5px 0 0 5px;
-// padding: 14px;
-// border: 1px solid #f8f8f8;
-// }
-//
-// select {
-// width: 100%;
-// border: 0;
-// background-color: black;
-// border-radius: 0 5px 5px 0;
-// padding: 15px 0 15px 10px;
-// color: white;
-// border-right: 6px solid black;
-//
-//
-// option {
-// background-color: white;
-// color: black;
-// margin: 5px 0;
-// }
-// } // select
-// } // .input-form
-// } // .price-amount
-//
-// .amount {
-//
-// }
-//
-// .btc-address {
-// margin-bottom: 60px;
-//
-//
-// h4 {
-// span {
-// float: right;
-// font-size: 13px;
-// font-weight: 400;
-// text-transform: none;
-// }
-// }
-//
-// input {
-// width: 100%;
-// background-color: #f8f8f8;
-// border: 0;
-// border-radius: 5px;
-// padding: 15px;
-//
-// &::placeholder {
-// color: #bcc1c7;
-// }
-// }
-//
-// // Hack (need David's magic CSS)
-// .loading-indicator{
-// position: absolute;
-// display: inline-block;
-// z-index: 1;
-// text-align: center;
-// right: 30%;
-// top: 70%;
-// }
-//
-// }
-//
-// .submit-button-container {
-// text-align: center;
-//
-// .button-1 {
-// position: relative;
-// i {
-// position: absolute;
-// right: 44px;
-// top: 16px;
-// font-size: 30px;
-// }
-// }
-//
-// @media all and (max-width: $mobile-width){
-// .button-1 {
-// width: 100%;
-// box-sizing: border-box;
-// }
-// }
-//
-// p {
-// font-size: 14px;
-// margin-top: 30px;
-// }
-// }
-// }
-// }
-//}
-//
-//
-//.recaptcha{
-// position: relative;
-// margin-bottom: 30px;
-// left: 15%;
-//}
-//
-//@media (max-width: $mobile-width){
-// .recaptcha{
-// display: inline-block;
-// margin-bottom: 30px;
-// right: auto;
-// left: auto;
-// }
-//}
-//
+.submit-button-container {
+ margin-top: 60px;
+ text-align: center;
+ // Mobile
+ @media all and (max-width: $mobile-width) {
+ margin-top: 20px;
+ }
+
+ h4 {
+ margin-bottom: 20px;
+ }
+
+ .submit-button {
+ margin: 0 auto;
+ text-align: center;
+ width: 300px;
+ position: relative;
+ @media all and (max-width: $mobile-width) {
+ width: 100%;
+ }
+
+ i {
+ position: absolute;
+ right: 20px;
+ top: 16px;
+ font-size: 30px;
+ }
+ }
+
+ p {
+ margin-top: 20px;
+ }
+}
diff --git a/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.vue b/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.vue
index f6eac5f55b..86e14cbdf9 100644
--- a/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.vue
+++ b/src/layouts/InterfaceLayout/containers/SwapContainer/components/CheckoutForm/CheckoutForm.vue
@@ -46,23 +46,38 @@
name="digital_total_amount[currency]"
/>
-
+
+
+
+
+
+
+ {{ $t('unstoppable.your-crypto-domains') }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ domainName }}
+
+
+
+
+
+
+
+
+
+
+ {{ key }}
+
+
+
+
+
+
+ {{ $t('unstoppable.more-currencies') }}
+
+
+
+
+ -
+
-
+ ++
+ {{ key }} +
+
+