Fix BTC balances

- Sort higher to lower
- Prevent change outside form
- Hide until wallet connection is ready

src/common/components/layouts/Top.vue

@@ -7,7 +7,7 @@
       <h1 class="text-purple text-h5">PowPeg</h1>
     </div>
     <div class="d-flex align-center ga-5">
-      <peg-in-account-select v-if="isPeginSelected"/>
+      <peg-in-account-select v-if="isPeginSelected && walletDataReady"/>
       <div class="d-flex align-center ga-2" v-else-if="truncatedAccount && accountBalance">
         <v-btn variant="text" size="small" density="compact" rounded="full" :icon="mdiContentCopy"
           @click="copyFullAccountAddress"
@@ -62,6 +62,8 @@ export default {
     const balance = useStateAttribute<WeiBig>('web3Session', 'balance');
     const environmentContext = EnvironmentContextProviderService.getEnvironmentContext();
 
+    const walletDataReady = useStateAttribute<boolean>('pegInTx', 'walletDataReady');
+
     const accountBalance = computed(() => {
       const amount = balance.value.toRBTCString().slice(0, 7);
       return `${amount} ${environmentContext.getRbtcTicker()}`;
@@ -103,6 +105,7 @@ export default {
       balance,
       environmentContext,
       isPeginSelected: computed(() => route.name === 'Create'),
+      walletDataReady,
     };
   },
 };

src/common/store/constants.ts

@@ -54,6 +54,7 @@ export const PEGIN_TX_ADD_STATUS_SAFE_FEE = 'PEGIN_TX_ADD_STATUS_SAFE_FEE';
 export const PEGIN_TX_ADD_STATUS_REFUND_ADDRESS = 'PEGIN_TX_ADD_STATUS_REFUND_ADDRESS';
 export const PEGIN_TX_ADD_STATUS_TX_ID = 'PEGIN_TX_ADD_STATUS_TX_ID';
 export const PEGIN_TX_ADD_PEGIN_TYPE = 'PEGIN_TX_ADD_PEGIN_TYPE';
+export const PEGIN_TX_SET_CURRENT_VIEW = 'PEGIN_TX_SET_CURRENT_VIEW';
 
 // PegOut actions
 export const PEGOUT_TX_INIT = 'PEGOUT_TX_INIT';
@@ -137,6 +138,7 @@ export const PEGIN_TX_SET_STATUS_SAFE_FEE = 'PEGIN_TX_SET_STATUS_SAFE_FEE';
 export const PEGIN_TX_SET_STATUS_REFUND_ADDRESS = 'PEGIN_TX_SET_STATUS_REFUND_ADDRESS';
 export const PEGIN_TX_SET_STATUS_TX_ID = 'PEGIN_TX_SET_STATUS_TX_ID';
 export const PEGIN_TX_SET_PEGIN_TYPE = 'PEGIN_TX_SET_PEGIN_TYPE';
+export const PEGIN_TX_SET_VIEW = 'PEGIN_TX_SET_VIEW';
 
 // PegOut mutations
 export const PEGOUT_TX_SET_SELECTED_FEE_LEVEL = 'PEGOUT_TX_SET_SELECTED_FEE_LEVEL';

src/common/styles/_utilities.scss

@@ -8,4 +8,8 @@
 
 .grecaptcha-badge {
   bottom:70px !important;
+}
+
+.opacity-100 {
+  opacity: 1;
 }

src/pegin/components/create/PegInAccountSelect.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-row >
-    <v-col cols="7" class="d-flex align-center justify-end">
+  <v-row no-gutters align="center">
+    <v-col class="d-flex align-center ga-1">
       <v-btn v-if="singleAccountType" variant="text" size="small"
         density="compact" rounded="full" :icon="mdiContentCopy"
             @click="copyFullAccountAddress"
@@ -14,29 +14,21 @@
         >{{ selectedAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }}
         </v-tooltip>
       </span>
+      <v-chip v-if="singleAccountType" class="mx-1"
+        variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
+        {{ selectedAccountTypeBadge.text }}
+      </v-chip>
     </v-col>
-    <v-col cols="5" class="pa-0 d-flex align-center">
-      <div v-if="singleAccountType" class="d-flex align-center justify-end ga-4">
-        <v-btn
-              v-bind="props"
-              variant="plain"
-              class="h-100"
-            >
-              <template #default>
-                <v-chip v-show="selectedAccountType"
-                  variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
-                  {{ selectedAccountTypeBadge.text }}
-                </v-chip>
-              </template>
-            </v-btn>
-      </div>
-      <div v-else class="d-flex align-center justify-end h-100 w-100 pa-0">
-        <v-menu location="bottom" no-click-animation="true">
+    <v-col v-if="!singleAccountType">
+      <div>
+        <v-menu location="bottom end" no-click-animation="true"
+        :disabled="loadingBalance || !atPeginForm">
           <template v-slot:activator="{ props }">
             <v-btn
+              class="opacity-100"
               v-bind="props"
               variant="plain"
-              class="h-100"
+              size="small"
             >
               <template #default>
                 <v-chip v-show="selectedAccountType"
@@ -70,23 +62,23 @@
             </v-list-item>
           </v-list>
         </v-menu>
-        <div v-if="loadingBalance" class="d-flex align-center ga-2">
-          <v-progress-circular size="small" indeterminate color="bw-500"/>
-        </div>
       </div>
     </v-col>
+    <v-progress-circular v-if="loadingBalance" size="small" indeterminate color="bw-500"/>
   </v-row>
 </template>
 
 <script lang="ts">
 import {
-  ref, defineComponent, computed,
+  ref, defineComponent, computed, watch,
 } from 'vue';
 import { mdiBitcoin, mdiContentCopy, mdiChevronDown } from '@mdi/js';
 import * as constants from '@/common/store/constants';
 import { BtcAccount, WalletAddress } from '@/common/types/pegInTx';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
-import { useAction, useGetter, useStateAttribute } from '@/common/store/helper';
+import {
+  useAction, useGetter, useStateAttribute,
+} from '@/common/store/helper';
 import { AccountBalance, BtcWallet, SatoshiBig } from '@/common/types';
 import { WalletService } from '@/common/services';
 import { truncateString } from '@/common/utils';
@@ -105,6 +97,8 @@ export default defineComponent({
     const selectAccount = useAction('pegInTx', constants.PEGIN_TX_SELECT_ACCOUNT_TYPE);
     const calculateTxFee = useAction('pegInTx', constants.PEGIN_TX_CALCULATE_TX_FEE);
     const selectedAccountBalance = useGetter<SatoshiBig>('pegInTx', constants.PEGIN_TX_GET_SELECTED_BALANCE);
+    const peginCurrentView = useStateAttribute<string>('pegInTx', 'currentView');
+    const atPeginForm = computed(() => peginCurrentView.value === 'PegInForm');
 
     function accountChanged(account: BtcAccount) {
       selectedAccountType.value = account;
@@ -167,6 +161,13 @@ export default defineComponent({
       const [firstAccount] = walletService.value.availableAccounts();
       selectedAccountType.value = firstAccount;
     }
+
+    watch(loadingBalance, () => {
+      if (!loadingBalance.value) {
+        balancesPerAccountType.value.sort((a, b) => Number(b.title) - Number(a.title));
+      }
+    });
+
     selectAccount(selectedAccountType.value);
     calculateTxFee();
 
@@ -194,6 +195,7 @@ export default defineComponent({
       mdiChevronDown,
       walletInfo,
       copyFullAccountAddress,
+      atPeginForm,
     };
   },
 });

src/pegin/components/create/SendBitcoin.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent } from 'vue';
+import { ref, defineComponent, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import PegInForm from '@/pegin/components/create/PegInForm.vue';
 import ConfirmTx from '@/pegin/components/create/ConfirmTx.vue';
@@ -104,6 +104,7 @@ export default defineComponent({
     const clearStore = useAction('pegInTx', constants.PEGIN_TX_CLEAR_STATE);
     const init = useAction('pegInTx', constants.PEGIN_TX_INIT);
     const setBtcWallet = useAction('pegInTx', constants.PEGIN_TX_ADD_BITCOIN_WALLET);
+    const setCurrenView = useAction('pegInTx', constants.PEGIN_TX_SET_CURRENT_VIEW);
     const getChangeAddress = useGetter<string>('pegInTx', constants.PEGIN_TX_GET_CHANGE_ADDRESS);
     const selectedUtxoList = useGetter<Utxo[]>('pegInTx', constants.PEGIN_TX_GET_SELECTED_UTXO_LIST);
     const selectedFee = useGetter<SatoshiBig>('pegInTx', constants.PEGIN_TX_GET_SAFE_TX_FEE);
@@ -255,6 +256,10 @@ export default defineComponent({
         .then(() => setBtcWallet(wallet));
     }
 
+    watch(currentComponent, () => {
+      setCurrenView(currentComponent.value);
+    }, { immediate: true });
+
     setTxBuilder();
 
     return {

src/pegin/store/PeginTx/actions.ts

@@ -206,4 +206,7 @@ export const actions: ActionTree<PegInTxState, RootState> = {
   [constants.PEGIN_TX_ADD_PEGIN_TYPE]: ({ commit }, peginType: constants.peginType): void => {
     commit(constants.PEGIN_TX_SET_PEGIN_TYPE, peginType);
   },
+  [constants.PEGIN_TX_SET_CURRENT_VIEW]: ({ commit }, view: string): void => {
+    commit(constants.PEGIN_TX_SET_VIEW, view);
+  },
 };

src/pegin/store/PeginTx/mutations.ts

@@ -85,4 +85,7 @@ export const mutations: MutationTree<PegInTxState> = {
   [constants.PEGIN_TX_SET_PEGIN_TYPE]: (state, peginType: constants.peginType) => {
     state.peginType = peginType;
   },
+  [constants.PEGIN_TX_SET_VIEW]: (state, view: string) => {
+    state.currentView = view;
+  },
 };