diff --git a/src/common/components/layouts/Top.vue b/src/common/components/layouts/Top.vue index fe6d25b2a..6e268e23c 100644 --- a/src/common/components/layouts/Top.vue +++ b/src/common/components/layouts/Top.vue @@ -7,9 +7,7 @@

PowPeg

-
- -
+
- + - - - {{ walletService.name().formal_name }} | {{ selectedAccountBalance.toBTCTrimmedString() }} - {{ environmentContext.getBtcTicker() }} - {{ selectedAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }} - - - + + + {{ walletInfo }} | {{ selectedAccountBalance.toBTCTrimmedString() }} + {{ environmentContext.getBtcTicker() }} + {{ selectedAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }} + + - +
- {{ selectedAccountTypeBadge.text }} - + v-bind="props" + variant="plain" + class="h-100" + > + +
-
- +
+ @@ -41,8 +56,14 @@ :value="item.value" @click="accountChanged(item.value)" > + @@ -61,13 +82,14 @@ import { ref, defineComponent, computed, } from 'vue'; -import { mdiBitcoin, mdiInformation } from '@mdi/js'; +import { mdiBitcoin, mdiContentCopy, mdiChevronDown } from '@mdi/js'; import * as constants from '@/common/store/constants'; -import { BtcAccount } from '@/common/types/pegInTx'; +import { BtcAccount, WalletAddress } from '@/common/types/pegInTx'; import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider'; 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'; export default defineComponent({ name: 'PegInAccountSelect', @@ -79,6 +101,7 @@ export default defineComponent({ const loadingBalance = useStateAttribute('pegInTx', 'loadingBalance'); const walletService = useStateAttribute('pegInTx', 'walletService'); const stateSelectedAccount = useStateAttribute('pegInTx', 'selectedAccount'); + const addressList = useStateAttribute('pegInTx', 'addressList'); const selectAccount = useAction('pegInTx', constants.PEGIN_TX_SELECT_ACCOUNT_TYPE); const calculateTxFee = useAction('pegInTx', constants.PEGIN_TX_CALCULATE_TX_FEE); const selectedAccountBalance = useGetter('pegInTx', constants.PEGIN_TX_GET_SELECTED_BALANCE); @@ -125,10 +148,19 @@ export default defineComponent({ return { color: selected?.appendColor, text: selected?.appendText }; }); + const firstBtcAddress = computed(() => addressList.value[0]?.address); + + const walletInfo = computed(() => (!singleAccountType.value + ? walletService.value.name().formal_name : truncateString(firstBtcAddress.value))); + function setSelectedAccount(account: string) { selectedAccountType.value = account; } + function copyFullAccountAddress() { + navigator.clipboard.writeText(firstBtcAddress.value); + } + if (singleAccountType.value) { selectedAccountType.value = singleAccountType.value; } else { @@ -148,7 +180,7 @@ export default defineComponent({ environmentContext, selectedAccountType, loadingBalance, - mdiInformation, + mdiContentCopy, balances, mdiBitcoin, balancesPerAccountType, @@ -159,6 +191,9 @@ export default defineComponent({ walletService, selectedAccountBalance, accountChanged, + mdiChevronDown, + walletInfo, + copyFullAccountAddress, }; }, }); diff --git a/src/scss/settings.scss b/src/scss/settings.scss index e179094cd..fac981f5d 100644 --- a/src/scss/settings.scss +++ b/src/scss/settings.scss @@ -26,7 +26,7 @@ 'gap': 1, ), 'h6': ( - 'size': 24px, + 'size': 0.75, 'weight': 700, 'line-height': 26.4px, 'padding': 2px 4px 6px 4px,