Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: change active account on dapp login #3454

Merged
merged 3 commits into from
Jan 27, 2025
+172 −112
Merged

feat: change active account on dapp login #3454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f36d8ac
feat: change active account on dapp login
akalogerakisunicorn Jan 22, 2025
04dbacd
fix: popup being cut if the height of it is small
akalogerakisunicorn Jan 17, 2025
cde8e46
fix: welcome screen wording
akalogerakisunicorn Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions src/composables/accounts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ import { tg } from '@/popup/plugins/i18n';
import migrateAccountsVuexToComposable from '@/migrations/001-accounts-vuex-to-composable';

import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
import { useStorageRef, useAuth, useModals } from '@/composables';

import { useStorageRef } from './storageRef';
import { useAuth } from './auth';
import { useModals } from './modals';
import AirGapIcon from '@/icons/air-gap.svg?vue-component';
import PrivateKeyIcon from '@/icons/private-key.svg?vue-component';

const {
addCallback: onAccountChange,
Expand Down Expand Up @@ -206,6 +206,10 @@ export const useAccounts = createCustomScopedComposable(() => {
return accounts.value.find((acc) => acc.globalIdx === globalIdx);
}

function getAccountsSelectOptionsByProtocol(protocol: Protocol): IFormSelectOption[] {
return prepareAccountSelectOptions(accounts.value.filter((acc) => acc.protocol === protocol));
}

/**
* Access last used (or current) account of the protocol when accessing features
* related to protocol different than the current account is using.
Expand Down Expand Up @@ -311,6 +315,17 @@ export const useAccounts = createCustomScopedComposable(() => {
}
}

function getAccountIcon(type: AccountType) {
switch (type) {
case ACCOUNT_TYPES.airGap:
return AirGapIcon;
case ACCOUNT_TYPES.privateKey:
return PrivateKeyIcon;
default:
return null;
}
}

function resetAccounts() {
mnemonic.value = '';
accountsRaw.value = [];
Expand Down Expand Up @@ -347,6 +362,8 @@ export const useAccounts = createCustomScopedComposable(() => {
getAccountByAddress,
getAccountByGlobalIdx,
getLastActiveProtocolAccount,
getAccountsSelectOptionsByProtocol,
getAccountIcon,
onAccountChange,
setActiveAccountByAddress,
setActiveAccountByGlobalIdx,
Expand Down
3 changes: 1 addition & 2 deletions src/popup/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,6 @@ export default defineComponent({

position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
Expand All @@ -340,7 +339,7 @@ export default defineComponent({
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
height: 100vh;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the reason for that change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was an issue when the extension opened as a popup (i.e. when logging in through a dapp or when signing transactions). The content of the popup that opened had a wrong height, which caused the buttons at the bottom to be cut. When that popup was resized, they disappeared altogether. The 100vh in combination with removing the justify-content: center; fixed this behavior. It did not seem to affect anything else according to my tests, but should be double checked.

Copy link
Collaborator

@CedrikNikita CedrikNikita Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#2208 Original change was done during moving to ionic
@dvdbak This should be tested with all the potential cases.

  1. Android since the original changes is related to Android i think we might spot the difference here
  2. Extension main popup
  3. Extension popup window
  4. Extension open as a new tab
  5. Web
  6. Iframe

border-radius: var(--screen-border-radius);
color: $color-white;
background-color: var(--screen-bg-color);
Expand Down
26 changes: 0 additions & 26 deletions src/popup/components/AccountCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@
<template #bottom-left>
<AccountCardTotalTokens :account="account" />
</template>

<template #bottom-right>
<Component
:is="accountIcon"
v-if="accountIcon"
class="account-type-icon"
/>
</template>
</AccountCardBase>
</template>

Expand All @@ -41,24 +33,18 @@ import {
} from 'vue';
import type { IAccount } from '@/types';
import { useBalances } from '@/composables';
import { ACCOUNT_TYPES } from '@/constants';

import AccountInfo from './AccountInfo.vue';
import BalanceInfo from './BalanceInfo.vue';
import AccountCardTotalTokens from './AccountCardTotalTokens.vue';
import AccountCardBase, { accountCardBaseCommonProps } from './AccountCardBase.vue';

import AirGapIcon from '../../icons/air-gap.svg?vue-component';
import PrivateKeyIcon from '../../icons/private-key.svg?vue-component';

export default defineComponent({
components: {
AccountCardBase,
AccountCardTotalTokens,
AccountInfo,
BalanceInfo,
AirGapIcon,
PrivateKeyIcon,
},
props: {
account: { type: Object as PropType<IAccount>, required: true },
Expand All @@ -67,21 +53,9 @@ export default defineComponent({
setup(props) {
const { getAccountBalance } = useBalances();

const accountIcon = computed(() => {
switch (props.account.type) {
case ACCOUNT_TYPES.airGap:
return AirGapIcon;
case ACCOUNT_TYPES.privateKey:
return PrivateKeyIcon;
default:
return null;
}
});

const numericBalance = computed(() => getAccountBalance(props.account.address).toNumber());

return {
accountIcon,
numericBalance,
};
},
Expand Down
72 changes: 50 additions & 22 deletions src/popup/components/AccountInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,35 @@
class="account-details"
:class="{ 'list-name': isListName }"
>
<div
v-if="isMultisig"
class="account-name"
v-text="$t('multisig.multisigVault')"
/>
<div
v-else-if="name"
class="account-name"
>
<ion-skeleton-text v-if="isLoading" animated />
<Truncate v-if="!isLoading" :str="name" />
<div class="account-with-icons">
<Component
:is="type && getAccountIcon(type)"
class="account-type-icon"
/>
<div
v-if="isMultisig"
class="account-name"
v-text="$t('multisig.multisigVault')"
/>
<template
v-else-if="name"
>
<ion-skeleton-text v-if="isLoading" animated />
<Truncate v-if="!isLoading" class="account-name" :str="name" />
</template>
<template
v-else
>
<Truncate
data-cy="account-name-number"
class="account-name"
:str="getDefaultAccountLabel(account)"
/>
</template>
<div>
<slot name="after-address" />
</div>
</div>
<Truncate
v-else
data-cy="account-name-number"
class="account-name"
:str="getDefaultAccountLabel(account)"
/>

<slot name="address">
<CopyText
v-if="address?.length"
Expand Down Expand Up @@ -72,11 +82,12 @@ import type { IAccount } from '@/types';
import { getDefaultAccountLabel } from '@/utils';
import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
import { useAccounts } from '@/composables';

import Avatar, { type AvatarSize } from './Avatar.vue';
import CopyText from './CopyText.vue';
import Truncate from './Truncate.vue';
import AddressTruncated from './AddressTruncated.vue';
import Avatar, { type AvatarSize } from '@/popup/components/Avatar.vue';
import CopyText from '@/popup/components/CopyText.vue';
import Truncate from '@/popup/components/Truncate.vue';
import AddressTruncated from '@/popup/components/AddressTruncated.vue';

export default defineComponent({
components: {
Expand All @@ -102,6 +113,7 @@ export default defineComponent({
},
setup(props) {
const { getName, getNameByNameHash } = useAeNames();
const { getAccountIcon, getAccountByAddress } = useAccounts();

const isLoading = ref(true);
const resolvedChainName = ref('');
Expand All @@ -111,6 +123,7 @@ export default defineComponent({
|| props.customName
|| getName(address.value).value
));
const type = computed(() => getAccountByAddress(props.account.address!)?.type);

const explorerUrl = computed(
() => (props.account.protocol)
Expand All @@ -136,8 +149,10 @@ export default defineComponent({

return {
name: resolvedChainName.value || name,
type,
address,
explorerUrl,
getAccountIcon,
getDefaultAccountLabel,
isLoading,
};
Expand Down Expand Up @@ -171,11 +186,18 @@ export default defineComponent({
max-width: var(--maxWidth);
font-weight: 500;

.account-with-icons {
display: flex;
align-items: center;
max-width: 100%;
}

.account-name {
@extend %face-sans-16-medium;

line-height: 20px; // Avoid cutting off bottom part of some letters, e.g.: "g"
max-width: 100%;
flex: 1;
}

&.list-name {
Expand Down Expand Up @@ -213,5 +235,11 @@ export default defineComponent({
height: 16px;
margin: 0 0 4px 0;
}

.account-type-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
}
</style>
19 changes: 13 additions & 6 deletions src/popup/components/AccountSelectOptionsItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,11 @@
avatar-borderless
is-list-name
:show-protocol-icon="!hideProtocolIcon"
/>
>
<template #after-address>
<slot name="after-address" />
</template>
</AccountInfo>
<TokenAmount
v-if="!hideBalance"
:amount="balance"
Expand Down Expand Up @@ -80,23 +84,25 @@ export default defineComponent({
const { getAccountBalance } = useBalances();
const { getAccountByAddress } = useAccounts();

const account = props.customAccount ?? getAccountByAddress(props.option.value as string);
const account = computed(() => (
props.customAccount ?? getAccountByAddress(props.option.value as string)
));

const bgColorStyle = computed(() => ({ '--bg-color': getAddressColor(account.address) }));
const bgColorStyle = computed(() => ({ '--bg-color': getAddressColor(account.value.address) }));

const balance = computed(() => {
switch (true) {
case !!props.outsideBalance:
return props.outsideBalance;
case !!account:
return getAccountBalance(account.address.toString()).toNumber();
case !!account.value:
return getAccountBalance(account.value.address.toString()).toNumber();
default:
return 0;
}
});

const tokenSymbol = computed(
() => ProtocolAdapterFactory.getAdapter(account!.protocol).coinSymbol,
() => ProtocolAdapterFactory.getAdapter(account.value.protocol).coinSymbol,
);

return {
Expand Down Expand Up @@ -125,6 +131,7 @@ export default defineComponent({
padding: 6px 8px;
border-radius: 10px;
width: 100%;
gap: 4px;

&::before {
top: 0;
Expand Down
Loading
Loading