Skip to content

Commit ec283de

Browse files
evavirsedapiotrm50
evavirseda
authored and
piotrm50
committed
feat(wallet-dashboard): display migration summary in migration confirmation view (#4640)
* feat: display migration summary in confirmation view * feat: cleanup * fix imports and cleanup
1 parent 236b4a5 commit ec283de

File tree

2 files changed

+76
-26
lines changed

2 files changed

+76
-26
lines changed

Diff for: ‎apps/wallet-dashboard/components/Dialogs/migration/views/ConfirmMigrationView.tsx

+75-26
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (c) 2024 IOTA Stiftung
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { MigrationObjectLoading, VirtualList } from '@/components';
4+
import { MigrationObjectLoading, VirtualList, MigrationObjectDetailsCard } from '@/components';
55
import { useCurrentAccount } from '@iota/dapp-kit';
66
import { IotaObjectData } from '@iota/iota-sdk/client';
77
import {
@@ -20,10 +20,10 @@ import { useGroupedMigrationObjectsByExpirationDate } from '@/hooks';
2020
import { Loader, Warning } from '@iota/ui-icons';
2121
import { Collapsible, useFormatCoin } from '@iota/core';
2222
import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
23-
import { summarizeMigratableObjectValues } from '@/lib/utils';
24-
import { MigrationObjectDetailsCard } from '@/components/migration/migration-object-details-card';
23+
import { filterMigrationObjects, summarizeMigratableObjectValues } from '@/lib/utils';
2524
import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
2625
import { Transaction } from '@iota/iota-sdk/transactions';
26+
import { StardustOutputDetailsFilter } from '@/lib/enums';
2727

2828
interface ConfirmMigrationViewProps {
2929
basicOutputObjects: IotaObjectData[] | undefined;
@@ -64,21 +64,60 @@ export function ConfirmMigrationView({
6464
isTimelocked,
6565
);
6666

67-
const { totalNotOwnedStorageDepositReturnAmount } = summarizeMigratableObjectValues({
67+
const {
68+
totalIotaAmount,
69+
totalNativeTokens: migratableNativeTokens,
70+
totalVisualAssets: migratableVisualAssets,
71+
totalNotOwnedStorageDepositReturnAmount,
72+
} = summarizeMigratableObjectValues({
6873
basicOutputs: basicOutputObjects,
6974
nftOutputs: nftOutputObjects,
7075
address: account?.address || '',
7176
});
7277

78+
const [timelockedIotaTokens, symbol] = useFormatCoin(totalIotaAmount, IOTA_TYPE_ARG);
7379
const [gasFee, gasFeeSymbol] = useFormatCoin(migrateData?.gasBudget, IOTA_TYPE_ARG);
7480
const [totalStorageDepositReturnAmountFormatted, totalStorageDepositReturnAmountSymbol] =
7581
useFormatCoin(totalNotOwnedStorageDepositReturnAmount.toString(), IOTA_TYPE_ARG);
7682

83+
const filteredIotaObjects = filterMigrationObjects(
84+
resolvedObjects,
85+
StardustOutputDetailsFilter.IOTA,
86+
);
87+
const filteredNativeTokens = filterMigrationObjects(
88+
resolvedObjects,
89+
StardustOutputDetailsFilter.NativeTokens,
90+
);
91+
const filteredVisualAssets = filterMigrationObjects(
92+
resolvedObjects,
93+
StardustOutputDetailsFilter.VisualAssets,
94+
);
95+
96+
const assetsToMigrateCategories = [
97+
{
98+
title: 'IOTA Tokens',
99+
subtitle: `${timelockedIotaTokens} ${symbol}`,
100+
filteredObjects: filteredIotaObjects,
101+
},
102+
{
103+
title: 'Native Tokens',
104+
subtitle: `${migratableNativeTokens} Types`,
105+
filteredObjects: filteredNativeTokens,
106+
},
107+
{
108+
title: 'Visual Assets',
109+
subtitle: `${migratableVisualAssets} Assets`,
110+
filteredObjects: filteredVisualAssets,
111+
},
112+
];
113+
const filteredAssetsToMigrateCategories = assetsToMigrateCategories.filter(
114+
({ filteredObjects }) => filteredObjects.length > 0,
115+
);
77116
return (
78117
<DialogLayout>
79-
<Header title="Confirmation" onClose={() => setOpen(false)} titleCentered />
118+
<Header title="Migrate Your Assets" onClose={() => setOpen(false)} titleCentered />
80119
<DialogLayoutBody>
81-
<div className="flex h-full flex-col gap-y-md overflow-y-auto">
120+
<div className="flex h-full flex-col gap-y-md">
82121
{isGroupedMigrationError && !isLoading && (
83122
<InfoBox
84123
title="Error"
@@ -105,27 +144,37 @@ export function ConfirmMigrationView({
105144
</>
106145
) : (
107146
<>
108-
<Collapsible
109-
defaultOpen
110-
render={() => (
111-
<Title size={TitleSize.Small} title="Assets to Migrate" />
147+
<div className="flex flex-col gap-y-sm">
148+
{filteredAssetsToMigrateCategories.map(
149+
({ title, subtitle, filteredObjects }) => (
150+
<Collapsible
151+
key={title}
152+
render={() => (
153+
<Title
154+
size={TitleSize.Small}
155+
title={title}
156+
subtitle={subtitle}
157+
/>
158+
)}
159+
>
160+
<div className="flex h-full max-h-[300px] flex-col gap-y-sm pb-sm">
161+
<VirtualList
162+
heightClassName="h-full"
163+
overflowClassName="overflow-y-auto"
164+
items={filteredObjects}
165+
estimateSize={() => 58}
166+
render={(migrationObject) => (
167+
<MigrationObjectDetailsCard
168+
migrationObject={migrationObject}
169+
isTimelocked={isTimelocked}
170+
/>
171+
)}
172+
/>
173+
</div>
174+
</Collapsible>
175+
),
112176
)}
113-
>
114-
<div className="h-[500px] pb-md--rs xl:h-[600px]">
115-
<VirtualList
116-
heightClassName="h-full"
117-
overflowClassName="overflow-y-auto"
118-
items={resolvedObjects}
119-
estimateSize={() => 58}
120-
render={(migrationObject) => (
121-
<MigrationObjectDetailsCard
122-
migrationObject={migrationObject}
123-
isTimelocked={isTimelocked}
124-
/>
125-
)}
126-
/>
127-
</div>
128-
</Collapsible>
177+
</div>
129178
<Panel hasBorder>
130179
<div className="flex flex-col gap-y-sm p-md">
131180
<KeyValueInfo

Diff for: ‎apps/wallet-dashboard/components/migration/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33

44
export * from './MigrationObjectsPanel';
55
export * from './MigrationObjectLoading';
6+
export * from './migration-object-details-card';

0 commit comments

Comments
 (0)