diff --git a/package.json b/package.json
index c74e36d32..ccb098289 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "polkaswap-exchange-web",
- "version": "1.23.2",
+ "version": "1.24.0",
"repository": {
"type": "git",
"url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -24,7 +24,7 @@
},
"dependencies": {
"@metamask/detect-provider": "^2.0.0",
- "@soramitsu/soraneo-wallet-web": "1.23.3",
+ "@soramitsu/soraneo-wallet-web": "1.23.4",
"@walletconnect/web3-provider": "^1.8.0",
"core-js": "^3.26.0",
"country-code-emoji": "^2.3.0",
diff --git a/src/components/App/Menu/AppMenu.vue b/src/components/App/Menu/AppMenu.vue
index c4016ca22..d2f1e73f6 100644
--- a/src/components/App/Menu/AppMenu.vue
+++ b/src/components/App/Menu/AppMenu.vue
@@ -248,34 +248,13 @@ export default class AppMenu extends Mixins(TranslationMixin) {
background-color: unset !important;
}
}
-}
-
-// TODO: [TECH] move from fonts provided values
-.sora-card-sidebar-icon {
- path {
- fill: var(--s-color-base-content-tertiary) !important;
- }
-}
-.el-menu-item:not(.is-active):not(.is-disabled) {
- .sidebar-item-content {
- &:hover .sora-card-sidebar-icon path {
- fill: var(--s-color-base-content-secondary) !important;
+ .el-menu-item {
+ i.el-icon-bank-card {
+ width: 28px;
}
}
}
-
-.el-menu-item.is-disabled {
- &:hover path {
- fill: var(--s-color-base-content-tertiary) !important;
- }
-}
-
-.is-active .sora-card-sidebar-icon {
- path {
- fill: var(--s-color-theme-accent) !important;
- }
-}
diff --git a/src/components/App/Menu/SoraCardIcon.vue b/src/components/App/Menu/SoraCardIcon.vue
deleted file mode 100644
index 7de7d30a9..000000000
--- a/src/components/App/Menu/SoraCardIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
diff --git a/src/components/pages/SoraCard/Dashboard/Dashboard.vue b/src/components/pages/SoraCard/Dashboard/Dashboard.vue
index cd94ddbe8..e62676090 100644
--- a/src/components/pages/SoraCard/Dashboard/Dashboard.vue
+++ b/src/components/pages/SoraCard/Dashboard/Dashboard.vue
@@ -9,7 +9,17 @@
draggable="false"
class="unselectable sora-card-hub-image"
/>
-
+
+
+ {{ t('card.cardHub.comingSoon') }}
+
+
+
{{ t('card.cardHub.ibanLabel') }}
+
+
{{ t('card.cardHub.logout') }}
@@ -74,6 +88,12 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
@state.soraCard.userInfo userInfo!: UserInfo;
@state.wallet.settings.shouldBalanceBeHidden private shouldBalanceBeHidden!: boolean;
+ email = 'techsupport@soracard.com';
+
+ get emailLink(): string {
+ return `
${this.email}`;
+ }
+
options: Array
= [
{ icon: OptionsIcon.TopUp, type: Option.TopUp },
{ icon: OptionsIcon.Transfer, type: Option.Transfer },
@@ -88,9 +108,9 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
get balance(): string {
const balance = this.userInfo.availableBalance;
- if (balance === 0) return '0';
+ if (!balance) return '0';
- return balance ? `${balance / 100}` : '';
+ return `${balance / 100}`;
}
handleClick(type: Option): void {}
@@ -114,6 +134,7 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
.sora-card {
&-hub {
&-balance {
+ margin-bottom: $basic-spacing;
.formatted-amount {
font-size: 28px;
letter-spacing: -0.56px;
@@ -167,28 +188,60 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
margin-right: $inner-spacing-mini;
}
}
+
+ &-management-coming {
+ text-align: center;
+ color: var(--s-color-base-content-secondary);
+ font-size: var(--s-font-size-medium);
+ margin-bottom: $basic-spacing-mini;
+ font-weight: 500;
+ }
+
&-logout {
margin-top: $inner-spacing-mini;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--s-color-utility-body);
- font-size: var(--s-font-size-big);
+ font-size: var(--s-font-size-medium);
font-weight: 500;
border-radius: var(--s-border-radius-small);
padding: 18px $basic-spacing;
color: var(--s-color-theme-accent-hover);
- i {
- color: var(--s-color-base-content-tertiary);
- }
&:hover {
cursor: pointer;
}
+
&:hover i {
color: var(--s-color-base-content-secondary);
}
}
+
+ &-info {
+ &-iban-missing {
+ margin-top: $inner-spacing-mini;
+ background: var(--s-color-utility-body);
+ font-size: var(--s-font-size-medium);
+ font-weight: 400;
+ border-radius: var(--s-border-radius-small);
+ padding: 18px $basic-spacing;
+ line-height: 140%;
+
+ .label {
+ color: var(--s-color-base-content-secondary);
+ margin-bottom: 5px;
+ }
+
+ &:hover i {
+ color: var(--s-color-base-content-secondary);
+ }
+ }
+
+ i {
+ color: var(--s-color-base-content-tertiary);
+ }
+ }
}
&-hub-info {
@@ -215,3 +268,13 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
}
}
+
+
diff --git a/src/components/pages/SoraCard/common/BalanceIndicator.vue b/src/components/pages/SoraCard/common/BalanceIndicator.vue
index 9222ecc70..f62254115 100644
--- a/src/components/pages/SoraCard/common/BalanceIndicator.vue
+++ b/src/components/pages/SoraCard/common/BalanceIndicator.vue
@@ -25,14 +25,12 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
import { state } from '@/store/decorators';
import { delay } from '@/utils';
-const hundred = 100;
-
@Component
export default class BalanceIndicator extends Mixins(TranslationMixin, mixins.LoadingMixin) {
@state.soraCard.xorToDeposit private xorToDeposit!: FPNumber;
@state.soraCard.euroBalance private euroBalance!: string;
- @Ref('progress') private readonly progressBar!: HTMLInputElement;
+ @Ref('progress') private readonly progressBar!: Nullable;
@Watch('euroBalance')
private handleEuroBalanceChange() {
@@ -47,17 +45,19 @@ export default class BalanceIndicator extends Mixins(TranslationMixin, mixins.Lo
}
async runProgressBarAnimation(): Promise {
- if (this.progressBar) {
- const balanceInteger = Math.round(Number(this.euroBalance));
- for (let i = 0; i < balanceInteger; i = i + 0.12) {
- await delay(1);
- this.progressBar.style.setProperty('width', `${i}%`);
- }
+ if (!this.progressBar) return;
+
+ const balanceInteger = Math.round(Number(this.euroBalance));
+ for (let i = 0; i < balanceInteger; i = i + 0.12) {
+ await delay(1);
+ this.progressBar?.style?.setProperty?.('width', `${i}%`);
}
}
mounted(): void {
- setTimeout(this.runProgressBarAnimation, 2500);
+ this.$nextTick().then(() => {
+ setTimeout(this.runProgressBarAnimation, 2_500);
+ });
}
}
diff --git a/src/components/pages/SoraCard/steps/Phone.vue b/src/components/pages/SoraCard/steps/Phone.vue
index 19fd4947e..341351bfd 100644
--- a/src/components/pages/SoraCard/steps/Phone.vue
+++ b/src/components/pages/SoraCard/steps/Phone.vue
@@ -1,17 +1,32 @@
+
{{ t('card.verificationCodeText') }}
+
+
+
+
+ {{ selectedCountry.flag }}
+ {{ selectedCountry.translatedName }}
+
+
+
+ {{ t('card.selectCountryText') }}
+
+
+
+
+