Skip to content

Commit

Permalink
feat: ui screens for new etna tx types
Browse files Browse the repository at this point in the history
  • Loading branch information
meeh0w committed Nov 15, 2024
1 parent c2d20d2 commit 1c2c513
Show file tree
Hide file tree
Showing 9 changed files with 362 additions and 102 deletions.
24 changes: 12 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,23 @@
},
"dependencies": {
"@avalabs/avalanche-module": "0.0.0-feat-p-dynamic-fees-20241107092624",
"@avalabs/avalanchejs": "4.1.0-alpha.18",
"@avalabs/avalanchejs": "4.1.0-alpha.21",
"@avalabs/bitcoin-module": "0.0.0-feat-p-dynamic-fees-20241107092624",
"@avalabs/bridge-unified": "0.0.0-feat-ictt-configs-20241009072139",
"@avalabs/core-bridge-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-chains-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-coingecko-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-covalent-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-etherscan-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-bridge-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-chains-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-coingecko-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-covalent-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-etherscan-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-k2-components": "4.18.0-alpha.47",
"@avalabs/core-snowtrace-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-token-prices-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-utils-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-wallets-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/core-snowtrace-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-token-prices-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-utils-sdk": "3.1.0-canary.868b786.0",
"@avalabs/core-wallets-sdk": "3.1.0-canary.868b786.0",
"@avalabs/evm-module": "0.0.0-feat-p-dynamic-fees-20241107092624",
"@avalabs/glacier-sdk": "3.1.0-canary.1aaa816.0",
"@avalabs/glacier-sdk": "3.1.0-canary.868b786.0",
"@avalabs/hw-app-avalanche": "0.14.1",
"@avalabs/types": "3.1.0-canary.1aaa816.0",
"@avalabs/types": "3.1.0-canary.868b786.0",
"@avalabs/vm-module-types": "0.0.0-feat-p-dynamic-fees-20241107092624",
"@blockaid/client": "0.10.0",
"@coinbase/cbpay-js": "1.6.0",
Expand Down
18 changes: 14 additions & 4 deletions src/pages/ApproveAction/AvalancheSignTx.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@ import {
FunctionNames,
useIsFunctionAvailable,
} from '@src/hooks/useIsFunctionAvailable';
import { ApproveConvertSubnet } from './components/ApproveConvertSubnet';
import { ApproveConvertSubnetToL1 } from './components/ApproveConvertSubnetToL1';
import { ApproveRegisterL1Validator } from './components/ApproveRegisterL1Validator';
import { ApproveIncreaseL1ValidatorBalance } from './components/ApproveIncreaseL1ValidatorBalance';
import { ApproveDisableL1Validator } from './components/ApproveDisableL1Validator';

export function AvalancheSignTx() {
const requestId = useGetRequestId();
Expand Down Expand Up @@ -137,9 +140,16 @@ export function AvalancheSignTx() {
return <ImportTxView tx={tx} avaxPrice={tokenPrice}></ImportTxView>;
} else if (Avalanche.isBaseTx(tx)) {
return <BaseTxView tx={tx} avaxPrice={tokenPrice}></BaseTxView>;
} else if (tx.type === Avalanche.TxType.ConvertSubnet) {
// TODO: use the helper
return <ApproveConvertSubnet tx={tx} avaxPrice={tokenPrice} />;
} else if (Avalanche.isConvertSubnetToL1Tx(tx)) {
return <ApproveConvertSubnetToL1 tx={tx} avaxPrice={tokenPrice} />;
} else if (Avalanche.isRegisterL1ValidatorTx(tx)) {
return <ApproveRegisterL1Validator tx={tx} avaxPrice={tokenPrice} />;
} else if (Avalanche.isDisableL1ValidatorTx(tx)) {
return <ApproveDisableL1Validator tx={tx} avaxPrice={tokenPrice} />;
} else if (Avalanche.isIncreaseL1ValidatorBalance(tx)) {
return (
<ApproveIncreaseL1ValidatorBalance tx={tx} avaxPrice={tokenPrice} />
);
} else if (Avalanche.isCreateSubnetTx(tx)) {
return (
<ApproveCreateSubnet
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import { Stack } from '@avalabs/core-k2-components';
import { Divider, Stack, Typography } from '@avalabs/core-k2-components';

import {
ApprovalSection,
Expand All @@ -12,11 +12,11 @@ import { TruncatedIdentifier } from './TruncatedIdentifier';
import { AvaxAmount } from './AvaxAmount';
import { Avalanche } from '@avalabs/core-wallets-sdk';

export function ApproveConvertSubnet({
export function ApproveConvertSubnetToL1({
tx,
avaxPrice,
}: {
tx: Avalanche.ConvertSubnetTx;
tx: Avalanche.ConvertSubnetToL1Tx;
avaxPrice: number;
}) {
const { t } = useTranslation();
Expand All @@ -40,7 +40,10 @@ export function ApproveConvertSubnet({
</ApprovalSection>
<ApprovalSection sx={{ gap: 1 }}>
<ApprovalSectionHeader label={t('Validators')} />
<ApprovalSectionBody sx={{ justifyContent: 'start', py: 2.25 }}>
<ApprovalSectionBody
sx={{ justifyContent: 'start', py: 2.25 }}
divider={<Divider sx={{ my: 1.5 }} />}
>
{validators.map(
({
balance,
Expand All @@ -59,8 +62,11 @@ export function ApproveConvertSubnet({
<TxDetailsRow label={t('Stake')}>
<AvaxAmount amount={stake} avaxPrice={avaxPrice} />
</TxDetailsRow>
<TxDetailsRow label={t('Owners Able to Deactivate')}>
<Stack sx={{ gap: 0.5 }}>
<Stack sx={{ gap: 1, mb: 2 }}>
<Typography variant="caption" color="text.secondary">
{t('Owners Able to Deactivate')}
</Typography>
<Stack sx={{ pl: 2, gap: 0.5 }}>
{deactivationOwners.map((address) => (
<TruncatedIdentifier
key={address}
Expand All @@ -69,9 +75,12 @@ export function ApproveConvertSubnet({
/>
))}
</Stack>
</TxDetailsRow>
<TxDetailsRow label={t('Owners of the Remaining Balance')}>
<Stack sx={{ gap: 0.5 }}>
</Stack>
<Stack sx={{ gap: 1 }}>
<Typography variant="caption" color="text.secondary">
{t('Owners of the Remaining Balance')}
</Typography>
<Stack sx={{ pl: 2, gap: 0.5 }}>
{remainingBalanceOwners.map((address) => (
<TruncatedIdentifier
key={address}
Expand All @@ -80,7 +89,56 @@ export function ApproveConvertSubnet({
/>
))}
</Stack>
</Stack>
</Stack>
)
)}
{validators.map(
({
balance,
stake,
nodeId,
remainingBalanceOwners,
deactivationOwners,
}) => (
<Stack key={nodeId} sx={{ gap: 0.5 }}>
<TxDetailsRow label={t('Node ID')}>
<TruncatedIdentifier identifier={nodeId} size={14} />
</TxDetailsRow>
<TxDetailsRow label={t('Balance')}>
<AvaxAmount amount={balance} avaxPrice={avaxPrice} />
</TxDetailsRow>
<TxDetailsRow label={t('Stake')}>
<AvaxAmount amount={stake} avaxPrice={avaxPrice} />
</TxDetailsRow>
<Stack sx={{ gap: 1, mb: 2 }}>
<Typography variant="caption" color="text.secondary">
{t('Owners Able to Deactivate')}
</Typography>
<Stack sx={{ pl: 2, gap: 0.5 }}>
{deactivationOwners.map((address) => (
<TruncatedIdentifier
key={address}
identifier={address}
size={14}
/>
))}
</Stack>
</Stack>
<Stack sx={{ gap: 1 }}>
<Typography variant="caption" color="text.secondary">
{t('Owners of the Remaining Balance')}
</Typography>
<Stack sx={{ pl: 2, gap: 0.5 }}>
{remainingBalanceOwners.map((address) => (
<TruncatedIdentifier
key={address}
identifier={address}
size={14}
/>
))}
</Stack>
</Stack>
</Stack>
)
)}
Expand Down
45 changes: 45 additions & 0 deletions src/pages/ApproveAction/components/ApproveDisableL1Validator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useTranslation } from 'react-i18next';

import {
ApprovalSection,
ApprovalSectionBody,
ApprovalSectionHeader,
} from '@src/components/common/approval/ApprovalSection';
import { TxDetailsRow } from '@src/components/common/approval/TxDetailsRow';

import { AvaxAmount } from './AvaxAmount';
import { Avalanche } from '@avalabs/core-wallets-sdk';
import { TruncatedIdentifier } from './TruncatedIdentifier';

export function ApproveDisableL1Validator({
tx,
avaxPrice,
}: {
tx: Avalanche.DisableL1ValidatorTx;
avaxPrice: number;
}) {
const { t } = useTranslation();

const { txFee, validationId } = tx;

return (
<>
<ApprovalSection sx={{ gap: 1 }}>
<ApprovalSectionHeader label={t('Details')} />
<ApprovalSectionBody sx={{ justifyContent: 'start', py: 2.25 }}>
<TxDetailsRow label={t('Validation ID')}>
<TruncatedIdentifier identifier={validationId} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
<ApprovalSection>
<ApprovalSectionHeader label={t('Network Fee')} />
<ApprovalSectionBody>
<TxDetailsRow label={t('Fee Amount')}>
<AvaxAmount amount={txFee} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
</>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { useTranslation } from 'react-i18next';

import {
ApprovalSection,
ApprovalSectionBody,
ApprovalSectionHeader,
} from '@src/components/common/approval/ApprovalSection';
import { TxDetailsRow } from '@src/components/common/approval/TxDetailsRow';

import { AvaxAmount } from './AvaxAmount';
import { Avalanche } from '@avalabs/core-wallets-sdk';
import { TruncatedIdentifier } from './TruncatedIdentifier';

export function ApproveIncreaseL1ValidatorBalance({
tx,
avaxPrice,
}: {
tx: Avalanche.IncreaseL1ValidatorBalanceTx;
avaxPrice: number;
}) {
const { t } = useTranslation();

const { txFee, balance, validationId } = tx;

return (
<>
<ApprovalSection sx={{ gap: 1 }}>
<ApprovalSectionHeader label={t('Details')} />
<ApprovalSectionBody sx={{ justifyContent: 'start', py: 2.25 }}>
<TxDetailsRow label={t('Validation ID')}>
<TruncatedIdentifier identifier={validationId} />
</TxDetailsRow>
<TxDetailsRow label={t('Increase by amount')}>
<AvaxAmount amount={balance} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
<ApprovalSection>
<ApprovalSectionHeader label={t('Network Fee')} />
<ApprovalSectionBody>
<TxDetailsRow label={t('Fee Amount')}>
<AvaxAmount amount={txFee} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
</>
);
}
43 changes: 43 additions & 0 deletions src/pages/ApproveAction/components/ApproveRegisterL1Validator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { useTranslation } from 'react-i18next';

import {
ApprovalSection,
ApprovalSectionBody,
ApprovalSectionHeader,
} from '@src/components/common/approval/ApprovalSection';
import { TxDetailsRow } from '@src/components/common/approval/TxDetailsRow';

import { AvaxAmount } from './AvaxAmount';
import { Avalanche } from '@avalabs/core-wallets-sdk';

export function ApproveRegisterL1Validator({
tx,
avaxPrice,
}: {
tx: Avalanche.RegisterL1ValidatorTx;
avaxPrice: number;
}) {
const { t } = useTranslation();
const { txFee, balance } = tx;

return (
<>
<ApprovalSection sx={{ gap: 1 }}>
<ApprovalSectionHeader label={t('Details')} />
<ApprovalSectionBody sx={{ justifyContent: 'start', py: 2.25 }}>
<TxDetailsRow label={t('Initial balance')}>
<AvaxAmount amount={balance} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
<ApprovalSection>
<ApprovalSectionHeader label={t('Network Fee')} />
<ApprovalSectionBody>
<TxDetailsRow label={t('Fee Amount')}>
<AvaxAmount amount={txFee} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
</>
);
}
35 changes: 35 additions & 0 deletions src/pages/ApproveAction/components/ApproveSetL1ValidatorWeight.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { useTranslation } from 'react-i18next';

import {
ApprovalSection,
ApprovalSectionBody,
ApprovalSectionHeader,
} from '@src/components/common/approval/ApprovalSection';
import { TxDetailsRow } from '@src/components/common/approval/TxDetailsRow';

import { AvaxAmount } from './AvaxAmount';
import { Avalanche } from '@avalabs/core-wallets-sdk';

export function ApproveRegisterL1Validator({
tx,
avaxPrice,
}: {
tx: Avalanche.SetL1ValidatorWeightTx;
avaxPrice: number;
}) {
const { t } = useTranslation();
const { txFee } = tx;

return (
<>
<ApprovalSection>
<ApprovalSectionHeader label={t('Network Fee')} />
<ApprovalSectionBody>
<TxDetailsRow label={t('Fee Amount')}>
<AvaxAmount amount={txFee} avaxPrice={avaxPrice} />
</TxDetailsRow>
</ApprovalSectionBody>
</ApprovalSection>
</>
);
}
21 changes: 21 additions & 0 deletions src/pages/ApproveAction/components/AvalancheTxHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,27 @@ const useAvalancheTxHeader = (tx: Avalanche.Tx) => {
case Avalanche.TxType.Base:
return t('Approve Transaction');

case Avalanche.TxType.ConvertSubnetToL1:
return t('Convert Subnet to L1');

case Avalanche.TxType.DisableL1Validator:
return t('Disable L1 Validator');

case Avalanche.TxType.IncreaseL1ValidatorBalance:
return t('Increase L1 Validator Balance');

case Avalanche.TxType.RegisterL1Validator:
return t('Register L1 Validator');

case Avalanche.TxType.SetL1ValidatorWeight:
return t('Set L1 Validator Weight');

case Avalanche.TxType.TransformSubnet:
return t('Transform Subnet');

case Avalanche.TxType.TransferSubnetOwnership:
return t('Transfer Subnet Ownership');

default:
return t('Unknown Transaction');
}
Expand Down
Loading

0 comments on commit 1c2c513

Please sign in to comment.