update styles and copywrite

MinterTeam · Dec 6, 2021 · d384837 · d384837
1 parent b3f6281
commit d384837
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 26 deletions.
diff --git a/assets/less/include/layout.less b/assets/less/include/layout.less
@@ -55,6 +55,9 @@
 .u-cell--2-3 { width: 66.6666%;}
 .u-cell--order-2 {order: 2;}
 .u-cell--align-center {align-self: center;}
+@media (max-width: @breakpoint-large-down) {
+    .u-cell--large-down--order-minus {order: -1;}
+}
 @media (min-width: @breakpoint-small-up) {
     .u-cell--small--1-2 {width: 50%;}
     .u-cell--small--1-3 {width: 33.3333%;}

diff --git a/assets/variables.js b/assets/variables.js
@@ -78,7 +78,7 @@ export const HUB_CHAIN_ID = {
 };
 
 /**
- * @typedef {{coinSymbol: string, name: string, chainId: number, apiUrl: string, explorerHost: string}} HubChainDataItem
+ * @typedef {{coinSymbol: string, name: string, shortName: string, chainId: number, apiUrl: string, explorerHost: string}} HubChainDataItem
  */
 
 /**
@@ -88,13 +88,15 @@ export const HUB_CHAIN_ID = {
 export const HUB_CHAIN_DATA = {
     [HUB_CHAIN_ID.ETHEREUM]: {
         name: 'Ethereum',
+        shortName: 'Ethereum',
         coinSymbol: 'ETH',
         chainId: ETHEREUM_CHAIN_ID,
         apiUrl: ETHEREUM_API_URL,
         explorerHost: ETHERSCAN_HOST,
     },
     [HUB_CHAIN_ID.BSC]: {
-        name: 'BSC',
+        name: 'Binance Smart Chain',
+        shortName: 'BSC',
         coinSymbol: 'BNB',
         chainId: BSC_CHAIN_ID,
         apiUrl: BSC_API_URL,

diff --git a/components/HubCoinList.vue b/components/HubCoinList.vue
@@ -126,11 +126,11 @@ function getPriceFromList(list, name) {
                                 <span class="u-hidden-small-up">{{ $td('Tokens', 'hub.coin-table-name-mobile') }}</span>
                             </th>
                             <th width="20%">
-                                {{ $options.HUB_CHAIN_DATA[$options.HUB_CHAIN_ID.ETHEREUM].name }}
+                                {{ $options.HUB_CHAIN_DATA[$options.HUB_CHAIN_ID.ETHEREUM].shortName }}
                                 {{ $td('contract', 'hub.coin-table-contract') }}
                             </th>
                             <th width="20%">
-                                {{ $options.HUB_CHAIN_DATA[$options.HUB_CHAIN_ID.BSC].name }}
+                                {{ $options.HUB_CHAIN_DATA[$options.HUB_CHAIN_ID.BSC].shortName }}
                                 {{ $td('contract', 'hub.coin-table-contract') }}
                             </th>
                             <th width="20%">{{ $td('Price', 'hub.coin-table-price') }}</th>

diff --git a/components/HubDepositForm.vue b/components/HubDepositForm.vue
@@ -601,14 +601,14 @@ export default {
                     {{ $td('Deposit', 'hub.deposit-title') }}
                 </h1>
                 <p class="panel__header-description">
-                    {{ $td('Send coins from other network to Minter', 'hub.deposit-description') }}
+                    {{ $td(`Send coins from ${chainId ? getEvmNetworkName(chainId) : 'other network'} to Minter`, 'hub.deposit-description', {network: getEvmNetworkName(chainId)}) }}
                 </p>
             </div>
 
 
             <form class="panel__section" v-if="isConnected" @submit.prevent="submit">
                 <div class="u-grid u-grid--small u-grid--vertical-margin--small">
-                    <div class="u-cell u-cell--xlarge--1-2">
+                    <div class="u-cell u-cell--large--1-2">
                         <FieldQr
                             v-model.trim="form.address"
                             :$value="$v.form.address"
@@ -619,7 +619,7 @@ export default {
                         <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.required">Enter Minter address</span>
                         <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.validAddress">Invalid Minter address</span>
                     </div>
-                    <div class="u-cell u-cell--xlarge--1-4 u-cell--small--1-2">
+                    <div class="u-cell u-cell--large--1-4 u-cell--small--1-2">
                         <FieldCoin
                             :readonly="isFormSending"
                             v-model="form.coin"
@@ -635,7 +635,7 @@ export default {
                             {{ getEvmNetworkName(chainId) }}
                         </span>
                     </div>
-                    <div class="u-cell u-cell--xlarge--1-4 u-cell--small--1-2">
+                    <div class="u-cell u-cell--large--1-4 u-cell--small--1-2">
                         <FieldUseMax
                             :readonly="isFormSending"
                             v-model="form.amount"
@@ -647,7 +647,7 @@ export default {
                         <span class="form-field__error" v-else-if="$v.form.amount.$dirty && (!$v.form.amount.validAmount || !$v.form.amount.minValue)">{{ $td('Invalid amount', 'form.amount-error-invalid') }}</span>
                         <span class="form-field__error" v-else-if="$v.form.amount.$dirty && !$v.form.amount.maxValue">Not enough {{ form.coin }} (max {{ pretty(maxAmount) }})</span>
                     </div>
-                    <div class="u-cell u-cell--xlarge--1-2">
+                    <div class="u-cell u-cell--large--1-2">
                         <label class="form-check">
                             <input type="checkbox" class="form-check__input" v-model="form.isIgnorePending">
                             <span class="form-check__label form-check__label--checkbox">{{ $td('Ignore pending txs', 'form.hub-deposit-ignore-pending') }}</span>
@@ -661,7 +661,7 @@ export default {
                             <span class="form-check__label form-check__label--checkbox">{{ $td('Unwrap all', 'form.hub-deposit-unwrap-all') }}</span>
                         </label>
                     </div>
-                    <div class="u-cell u-cell--xlarge--1-2">
+                    <div class="u-cell u-cell--large--1-2">
                         <button
                             class="button button--main button--full"
                             :class="{'is-loading': isFormSending, 'is-disabled': $v.$invalid}"

diff --git a/components/HubWithdrawForm.vue b/components/HubWithdrawForm.vue
@@ -324,19 +324,19 @@ export default {
         <!-- Form -->
         <form class="panel__section" @submit.prevent="submitConfirm">
             <div class="u-grid u-grid--small u-grid--vertical-margin--small">
-                <div class="u-cell u-cell--xlarge--1-2">
+                <div class="u-cell u-cell--large--1-2">
                     <FieldQr
                         v-model.trim="form.address"
                         :$value="$v.form.address"
                         :label="$td('Withdraw to address', 'form.hub-withdraw-address')"
                         @blur="$v.form.address.$touch()"
                     />
 
-                    <span class="form-field__help" v-if="!$v.form.address.$error">{{ $options.HUB_CHAIN_DATA[form.networkTo].name }} address starting with 0x…</span>
-                    <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.required">Enter {{ $options.HUB_CHAIN_DATA[form.networkTo].name }} address</span>
-                    <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.validAddress">Invalid {{ $options.HUB_CHAIN_DATA[form.networkTo].name }} address</span>
+                    <span class="form-field__help" v-if="!$v.form.address.$error">{{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} address starting with 0x…</span>
+                    <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.required">Enter {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} address</span>
+                    <span class="form-field__error" v-else-if="$v.form.address.$dirty && !$v.form.address.validAddress">Invalid {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} address</span>
                 </div>
-                <div class="u-cell u-cell--xlarge--1-4 u-cell--small--1-2">
+                <div class="u-cell u-cell--large--1-4 u-cell--small--1-2">
                     <FieldCoin
                         v-model="form.coin"
                         :$value="$v.form.coin"
@@ -348,10 +348,10 @@ export default {
                     <span class="form-field__error" v-else-if="$v.form.coin.$dirty && !$v.form.coin.minLength">{{ $td('Min 3 letters', 'form.coin-error-min') }}</span>
                     <span class="form-field__error" v-else-if="$v.form.coin.$dirty && !$v.form.coin.supported">
                         {{ $td('Can\'t be transferred to', 'form.hub-coin-error-supported') }}
-                        {{ $options.HUB_CHAIN_DATA[form.networkTo].name }}
+                        {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }}
                     </span>
                 </div>
-                <div class="u-cell u-cell--xlarge--1-4 u-cell--small--1-2">
+                <div class="u-cell u-cell--large--1-4 u-cell--small--1-2">
                     <FieldUseMax
                         v-model="form.amount"
                         :$value="$v.form.amount"
@@ -362,7 +362,7 @@ export default {
                     <span class="form-field__error" v-else-if="$v.form.amount.$dirty && (!$v.form.amount.minValue)">{{ $td('Invalid amount', 'form.amount-error-invalid') }}</span>
                     <span class="form-field__error" v-else-if="$v.form.amount.$dirty && !$v.form.amount.maxValue">Not enough {{ form.coin }} (max {{ pretty(maxAmount) }})</span>
                 </div>
-                <div class="u-cell u-cell--xlarge--1-2">
+                <div class="u-cell u-cell--large--1-2 u-cell--large-down--order-minus">
                     <label class="form-field">
                         <select class="form-field__input form-field__input--select" v-model="form.networkTo" v-check-empty>
                             <option :value="$options.HUB_CHAIN_ID.ETHEREUM">{{ $options.HUB_CHAIN_DATA[$options.HUB_CHAIN_ID.ETHEREUM].name }}</option>
@@ -382,7 +382,7 @@ export default {
                     </label>
                     -->
                 </div>
-                <div class="u-cell u-cell--xlarge--1-2">
+                <div class="u-cell u-cell--large--1-2">
                     <button
                         class="button button--main button--full"
                         :class="{'is-disabled': $v.$invalid, 'is-loading': isFormSending}"
@@ -391,7 +391,7 @@ export default {
                         <Loader class="button__loader" :isLoading="true"/>
                     </button>
                     <div class="form-field__error" v-if="serverError">{{ serverError }}</div>
-                    <div class="form-field__help" v-if="serverWarning"><span class="u-emoji">⚠️</span> {{ $options.HUB_CHAIN_DATA[form.networkTo].name }} fee has updated</div>
+                    <div class="form-field__help" v-if="serverWarning"><span class="u-emoji">⚠️</span> {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} fee has updated</div>
                 </div>
             </div>
         </form>
@@ -406,7 +406,7 @@ export default {
                 <div class="u-cell u-cell--1-2 u-cell--medium--1-3">
                     <div class="form-field form-field--dashed">
                         <div class="form-field__input is-not-empty">{{ pretty(coinFee) }} {{ form.coin }}</div>
-                        <span class="form-field__label">{{ $options.HUB_CHAIN_DATA[form.networkTo].name }} {{ $td('fee', 'form.hub-withdraw-eth-fee') }}</span>
+                        <span class="form-field__label">{{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} {{ $td('fee', 'form.hub-withdraw-eth-fee') }}</span>
                     </div>
                 </div>
                 <div class="u-cell u-cell--1-2 u-cell--medium--1-3">
@@ -424,7 +424,7 @@ export default {
                         <ul class="list-simple">
                             <li>Withdraw to the wallet you own first (the one you have a seed phrase to);</li>
                             <li>Do not withdraw to an exchange because many do not accept deposits from smart contracts and your tokens will be lost;</li>
-                            <li>Pay attention to {{ $options.HUB_CHAIN_DATA[form.networkTo].name }} and Minter Hub fees;</li>
+                            <li>Pay attention to {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} and Minter Hub fees;</li>
                             <li>
                                 {{ $td('Minter Hub is', 'hub.warning-description-2') }}
                                 <a class="link--default" href="https://github.com/MinterTeam/minter-hub" target="_blank">{{ $td('open-source', 'hub.warning-description-3') }}</a>.
@@ -437,7 +437,7 @@ export default {
                         <ul class="list-simple">
                             <li>Вывод средств возможен только на ваш персональный адрес;</li>
                             <li>Не допускается вывод средств на смарт-контракты, адреса бирж или адреса, к которым у вас нет прямого доступа;</li>
-                            <li>Всегда обращайте внимание на комиссии в {{ $options.HUB_CHAIN_DATA[form.networkTo].name }} и Minter Hub;</li>
+                            <li>Всегда обращайте внимание на комиссии в {{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} и Minter Hub;</li>
                             <li>Minter Hub имеет открытый <a class="link--default" href="https://github.com/MinterTeam/minter-hub" target="_blank">исходный код</a>, изучите его при необходимости.</li>
                         </ul>
                     </template>
@@ -470,7 +470,7 @@ export default {
                         <div class="u-cell">
                             <div class="form-field form-field--dashed">
                                 <div class="form-field__input is-not-empty">{{ pretty(coinFee) }} {{ form.coin }}</div>
-                                <span class="form-field__label">{{ $options.HUB_CHAIN_DATA[form.networkTo].name }} {{ $td('fee', 'form.hub-withdraw-eth-fee') }}</span>
+                                <span class="form-field__label">{{ $options.HUB_CHAIN_DATA[form.networkTo].shortName }} {{ $td('fee', 'form.hub-withdraw-eth-fee') }}</span>
                             </div>
                         </div>
                         <div class="u-cell">

diff --git a/components/HubWithdrawTxList.vue b/components/HubWithdrawTxList.vue
@@ -112,14 +112,14 @@ export default {
             <div class="hub__preview-transaction-row hub__preview-transaction-meta">
                 <div>
                     {{ getTimeDistance(withdraw.timestamp || 0, undefined, $now) }} ago ({{ getTime(withdraw.timestamp || 0) }})
-                    to {{ $options.HUB_CHAIN_DATA[withdraw.destination].name }}
+                    to {{ $options.HUB_CHAIN_DATA[withdraw.destination].shortName }}
                 </div>
                 <div>
                     <template v-if="!withdraw.status || withdraw.status === $options.WITHDRAW_STATUS.not_found">Sending to Hub bridge</template>
                     <template v-if="withdraw.status === $options.WITHDRAW_STATUS.not_found_long">Not found</template>
                     <!--  @TODO combine deposit_to_hub_received & batch_created into "Bridge received tx and wait gas conditions to proceed" -->
                     <template v-if="withdraw.status === $options.WITHDRAW_STATUS.deposit_to_hub_received">Bridge collecting batch</template>
-                    <template v-if="withdraw.status === $options.WITHDRAW_STATUS.batch_created">Sent to {{ $options.HUB_CHAIN_DATA[withdraw.destination].name }}, waiting confirmation</template>
+                    <template v-if="withdraw.status === $options.WITHDRAW_STATUS.batch_created">Sent to {{ $options.HUB_CHAIN_DATA[withdraw.destination].shortName }}, waiting confirmation</template>
                     <template v-if="withdraw.status === $options.WITHDRAW_STATUS.batch_executed">
                         Success
                         <a class="link--main" :href="getDestinationUrl(withdraw)" target="_blank">{{ formatHash(withdraw.outTxHash) }}</a>