Skip to content

Commit

Permalink
fix: ui improvements, some cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@meeh0w
meeh0w committed Jan 15, 2025
1 parent 1313ec9 commit e42bab5
Show file tree
Hide file tree
Showing 5 changed files with 284 additions and 228 deletions.
4 changes: 0 additions & 4 deletions src/background/services/wallet/WalletService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,10 +734,6 @@ export class WalletService implements OnUnlock {
throw new Error(`no active network found`);
}

if (!('displayData' in action) || !action.displayData) {
throw new Error('missing required information');
}

const wallet = await this.getWallet({
accountIndex: action.displayData.messageParams.accountIndex,
network,
Expand Down
13 changes: 13 additions & 0 deletions src/components/common/FlexScrollbars.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Scrollbars, styled } from '@avalabs/core-k2-components';

export const FlexScrollbars = styled(Scrollbars)`
flex-grow: 1;
max-height: unset;
height: 100%;
width: 100%;
& > div {
display: flex;
flex-direction: column;
}
`;
275 changes: 51 additions & 224 deletions src/pages/ApproveAction/TxBatchApprovalScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,16 @@ import { useCallback, useEffect, useState } from 'react';
import {
Box,
Button,
Card,
ChevronLeftIcon,
HelpCircleIcon,
IconButton,
MobileStepper,
Scrollbars,
Stack,
Tooltip,
Typography,
styled,
} from '@avalabs/core-k2-components';
import { AlertType } from '@avalabs/vm-module-types';

import { Overlay } from '@src/components/common/Overlay';
import { ActionStatus } from '@src/background/services/actions/models';
import { NetworkWithCaipId } from '@src/background/services/network/models';
import { useNetworkContext } from '@src/contexts/NetworkProvider';
Expand All @@ -27,29 +24,16 @@ import {
ApprovalSectionHeader,
} from '@src/components/common/approval/ApprovalSection';
import { TransactionDetailItem } from '@src/components/common/approval/TransactionDetailItem';
import { MaliciousTxAlert } from '@src/components/common/MaliciousTxAlert';
import { useWindowGetsClosedOrHidden } from '@src/utils/useWindowGetsClosedOrHidden';

import { LoadingOverlay } from '../../components/common/LoadingOverlay';
import { TxBalanceChange } from '../SignTransaction/components/TxBalanceChange';
import { SpendLimitInfo } from '../SignTransaction/components/SpendLimitInfo/SpendLimitInfo';
import { NetworkDetails } from '../SignTransaction/components/ApprovalTxDetails';
import { AlertBox } from '../Permissions/components/AlertBox';
import { WarningBox } from '../Permissions/components/WarningBox';
import { useFeeCustomizer } from './hooks/useFeeCustomizer';
import { Overlay } from '@src/components/common/Overlay';

const FlexScrollbars = styled(Scrollbars)`
flex-grow: 1;
max-height: unset;
height: 100%;
width: 100%;
& > div {
display: flex;
flex-direction: column;
}
`;
import { TransactionDetailsCardContent } from './components/TransactionDetailsCardContent';
import { DetailedCardWrapper } from './components/DetailedCardWrapper';
import { FlexScrollbars } from '@src/components/common/FlexScrollbars';

export function TxBatchApprovalScreen() {
const { t } = useTranslation();
Expand Down Expand Up @@ -216,7 +200,7 @@ export function TxBatchApprovalScreen() {
{renderFeeWidget()}
<Typography variant="caption" color="text.secondary">
{t(
'The settings above will be applied to all transations in this batch.',
'The fee settings above will be applied to each transation in this batch.',
)}
</Typography>
</Stack>
Expand Down Expand Up @@ -293,197 +277,42 @@ export function TxBatchApprovalScreen() {
flexDirection: 'row',
flexWrap: 'nowrap',
pb: 2,
pl: 2,
gap: 2,
flexGrow: 1,
transition: 'transform .2s ease-in-out',
transform: `translateX(-${index * 332}px)`,
transform: `translateX(-${index * 336}px)`,
}}
>
{action.signingRequests.map((currentTx, txIndex) => (
<Card
key={`tx-${txIndex}`}
sx={{
display: 'flex',
width: 320,
flex: '0 0 auto',
backgroundColor: 'grey.850',
ml: txIndex === 0 ? 1 : 0,
position: 'relative',
}}
<DetailedCardWrapper
key={`card-${txIndex}`}
isFirst={txIndex === 0}
isLast={false}
onClick={
txIndex === index ? undefined : () => setIndex(txIndex)
}
>
<Typography
variant="caption"
sx={{
position: 'absolute',
top: 8,
right: 8,
opacity: 0.6,
}}
>
{`#${txIndex + 1}`}
</Typography>
<Stack
sx={{
width: 1,
gap: 1,
}}
>
{/* Header */}
<Box
sx={{
width: '100%',
py: 2,
px: 2,
zIndex: 1,
height: '56px',
}}
>
<Typography variant="h4">
{currentTx.displayData.title}
</Typography>
</Box>
<FlexScrollbars>
<Stack sx={{ flex: 1, width: 1, px: 2, gap: 2, pb: 3 }}>
{currentTx.displayData.alert && (
<Stack sx={{ width: 1, px: 2, mb: 1 }}>
{currentTx.displayData.alert.type ===
AlertType.DANGER ? (
<>
<MaliciousTxAlert
showAlert
cancelHandler={handleRejection}
actionTitles={
currentTx.displayData.alert.details
.actionTitles
}
title={
currentTx.displayData.alert.details.title
}
description={
currentTx.displayData.alert.details
.description
}
/>
<AlertBox
title={
currentTx.displayData.alert.details.title
}
text={
currentTx.displayData.alert.details
.description
}
/>
</>
) : (
<WarningBox
title={
currentTx.displayData.alert.details.title
}
text={
currentTx.displayData.alert.details
.description
}
/>
)}
</Stack>
)}
<Stack sx={{ width: '100%', gap: 3, pt: 1 }}>
{currentTx.displayData.details.map(
(section, sectionIndex) => (
<ApprovalSection
key={`tx-detail-section-${sectionIndex}`}
>
{section.title && (
<ApprovalSectionHeader
label={section.title}
/>
)}
<ApprovalSectionBody sx={{ py: 1 }}>
{sectionIndex === 0 && network && (
<NetworkDetails network={network} />
)}
{section.items.map((item, itemIndex) => (
<TransactionDetailItem
key={`tx-detail.${sectionIndex}.${itemIndex}`}
item={item}
/>
))}
</ApprovalSectionBody>
</ApprovalSection>
),
)}
{currentTx.displayData.balanceChange && (
<TxBalanceChange
ins={currentTx.displayData.balanceChange.ins}
outs={currentTx.displayData.balanceChange.outs}
isSimulationSuccessful={
currentTx.displayData.isSimulationSuccessful
}
/>
)}
{currentTx.displayData.tokenApprovals && (
<SpendLimitInfo
{...currentTx.displayData.tokenApprovals}
actionId={requestId}
/>
)}
</Stack>
</Stack>
</FlexScrollbars>
<Stack
sx={{
width: 1,
gap: 1,
px: 2,
pb: 2,
flexDirection: 'row',
}}
>
<Button
size="medium"
color="secondary"
fullWidth
onClick={() => {
setIndex(txIndex - 1);
console.log('new index', txIndex - 1);
}}
sx={{
visibility: index === 0 ? 'hidden' : 'visible',
}}
>
{t('Previous')}
</Button>
<Button
size="medium"
color="primary"
fullWidth
onClick={() => {
setIndex(txIndex + 1);
console.log('new index', txIndex + 1);
}}
sx={{
visibility:
index === action.signingRequests.length
? 'hidden'
: 'visible',
}}
>
{t('Next')}
</Button>
</Stack>
</Stack>
</Card>
<TransactionDetailsCardContent
tx={currentTx}
handleRejection={handleRejection}
network={network}
actionId={requestId}
index={txIndex}
setIndex={setIndex}
isFirst={txIndex === 0}
isLast={false}
/>
</DetailedCardWrapper>
))}

<Card
sx={{
display: 'flex',
width: 320,
flex: '0 0 auto',
backgroundColor: 'grey.850',
flexDirection: 'column',
}}
<DetailedCardWrapper
isFirst={false}
isLast={true}
onClick={
index === action.signingRequests.length
? undefined
: () => setIndex(action.signingRequests.length)
}
>
<Stack
sx={{
Expand All @@ -493,52 +322,50 @@ export function TxBatchApprovalScreen() {
alignItems: 'center',
justifyContent: 'center',
gap: 3,
py: 6,
px: 2,
pt: 6,
pb: 3,
px: 5,
}}
>
<HelpCircleIcon size={72} />
<Typography variant="h4">
<HelpCircleIcon size={54} />
<Typography variant="h5">
{t('Approve all transactions?')}
</Typography>
</Stack>
<Stack
direction="row"
sx={{
flexDirection: 'row',
alignItems: 'flex-end',
width: '100%',
justifyContent: 'space-between',
pt: 1.5,
px: 3,
pb: 2,
gap: 1,
gap: 2,
}}
>
<Button
color="secondary"
data-testid="transaction-reject-btn"
disabled={action.status === ActionStatus.SUBMITTING}
size="large"
fullWidth
onClick={handleRejection}
>
{t('Reject')}
</Button>
<Button
data-testid="transaction-approve-btn"
disabled={
action.status === ActionStatus.SUBMITTING || !isFeeValid
}
isLoading={action.status === ActionStatus.SUBMITTING}
size="large"
size="medium"
fullWidth
onClick={signTx}
>
{t('Approve')}
{t('Approve All')}
</Button>
<Button
color="secondary"
data-testid="transaction-reject-btn"
disabled={action.status === ActionStatus.SUBMITTING}
size="medium"
fullWidth
onClick={handleRejection}
>
{t('Reject')}
</Button>
</Stack>
</Card>
</DetailedCardWrapper>
</Stack>
<MobileStepper
position="static"
Expand Down
Loading

0 comments on commit e42bab5

Please sign in to comment.