Skip to content

feat(wallet): fix auto-expand wallet when wallet indexes have gaps #11045

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

Merged
brancoder merged 6 commits into from
Apr 10, 2026
Merged

feat(wallet): fix auto-expand wallet when wallet indexes have gaps #11045

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
36ba733
Fix auto-expand wallet when wallet indexes have gaps
evavirseda Mar 31, 2026
5b2f3ea
Merge branch 'develop' into tooling-wallet/fix-auto-expand-wallet
evavirseda Mar 31, 2026
b523b93
Merge branch 'develop' into tooling-wallet/fix-auto-expand-wallet
marc2332 Mar 31, 2026
8b73ee9
Merge branch 'develop' into tooling-wallet/fix-auto-expand-wallet
marc2332 Apr 2, 2026
5c8b2fe
fix(AccountGroup): allow adding both mnemonic and seed derived accounts
brancoder Apr 10, 2026
5197a34
Merge branch 'develop' into tooling-wallet/fix-auto-expand-wallet
brancoder Apr 10, 2026
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
113 changes: 72 additions & 41 deletions apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export function AccountGroup({
}) {
const [isDropdownOpen, setDropdownOpen] = useState(false);
const [isCollapsibleGroupOpen, setIsCollapsibleGroupOpen] = useState(true);
const [expandedWalletNames, setExpandedWalletNames] = useState<Set<string> | null>(null);
const navigate = useNavigate();
const activeAccount = useActiveAccount();
const createAccountsMutation = useCreateAccountsMutation();
Expand All @@ -81,9 +82,25 @@ export function AccountGroup({
sourceID: accountSource.id,
});
setSourceFlow(AmpliSourceFlow.ManageAccounts);
createAccountsMutation.mutate({
type: accountsFormType,
});
try {
const accountCreationResult = await createAccountsMutation.mutateAsync({
type: accountsFormType,
});
const newAccount = accountCreationResult?.[0];
if (
newAccount &&
(isMnemonicSerializedUiAccount(newAccount) || isSeedSerializedUiAccount(newAccount))
) {
const { accountIndex } = parseDerivationPath(newAccount.derivationPath);
const newWalletName = `Wallet ${accountIndex + 1}`;
setExpandedWalletNames(
(prev) =>
new Set([...(prev ?? accountGroupsByIndex.map(([n]) => n)), newWalletName]),
);
}
} catch {
// errors are already handled by the mutation
}
}

function getUrlForLedgerDerivedAccounts(url: string) {
Expand Down Expand Up @@ -151,6 +168,8 @@ export function AccountGroup({
);
}

const accountGroupsByIndex = Object.entries(groupAccountsByAccountIndex(accounts));

return (
<div className="relative overflow-visible">
<Collapsible
Expand Down Expand Up @@ -205,46 +224,58 @@ export function AccountGroup({
>
{hasLegacyAccount ? (
<div className="pl-md">
{Object.entries(groupAccountsByAccountIndex(accounts)).map(
([walletName, walletAccounts], index) => (
<Collapsible
key={index}
defaultOpen
hideArrow
hideBorder
render={({ isOpen }) => (
<div className="flex w-full items-center gap-x-md p-sm text-iota-neutral-40 dark:text-iota-neutral-60">
<div className="shrink-0 text-title-sm">
From {walletName}
</div>
<Divider />
<ArrowDown
className={clsx(
'h-5 w-5 shrink-0',
isOpen
? 'rotate-0 transition-transform ease-linear'
: '-rotate-90 transition-transform ease-linear',
)}
/>
{accountGroupsByIndex.map(([walletName, walletAccounts]) => (
<Collapsible
key={walletName}
isOpen={
expandedWalletNames === null ||
expandedWalletNames.has(walletName)
}
onOpenChange={(isOpen) =>
setExpandedWalletNames((prev) => {
const accountGroupSet: Set<string> =
prev === null
? new Set(accountGroupsByIndex.map(([n]) => n))
: new Set(prev);
if (isOpen) accountGroupSet.add(walletName);
else accountGroupSet.delete(walletName);
return accountGroupSet;
})
}
hideArrow
hideBorder
render={({ isOpen }) => (
<div className="flex w-full items-center gap-x-md p-sm text-iota-neutral-40 dark:text-iota-neutral-60">
<div className="shrink-0 text-title-sm">
From {walletName}
</div>
)}
>
{walletAccounts.map((account, index) => (
<AccountGroupItem
outerRef={outerRef}
isActive={activeAccount?.address === account.address}
key={account.id}
account={account}
showDropdownOptionsBottom={
isLast &&
(index === walletAccounts.length - 1 ||
index === walletAccounts.length - 2)
}
<Divider />
<ArrowDown
className={clsx(
'h-5 w-5 shrink-0',
isOpen
? 'rotate-0 transition-transform ease-linear'
: '-rotate-90 transition-transform ease-linear',
)}
/>
))}
</Collapsible>
),
)}
</div>
)}
>
{walletAccounts.map((account, index) => (
<AccountGroupItem
outerRef={outerRef}
isActive={activeAccount?.address === account.address}
key={account.id}
account={account}
showDropdownOptionsBottom={
isLast &&
(index === walletAccounts.length - 1 ||
index === walletAccounts.length - 2)
}
/>
))}
</Collapsible>
))}
</div>
) : (
accounts.map((account, index) => (
Expand Down
Loading