feat: approval screens for the new Etna tx types

src/localization/locales/en/translation.json

@@ -202,6 +202,7 @@
   "Contract Call": "Contract Call",
   "Contract Deployment Approval": "Contract Deployment Approval",
   "Contract Type": "Contract Type",
+  "Convert Subnet to L1": "Convert Subnet to L1",
   "Copied!": "Copied!",
   "Copy": "Copy",
   "Copy Code": "Copy Code",
@@ -256,6 +257,7 @@
   "Description": "Description",
   "Details": "Details",
   "Developer Docs": "Developer Docs",
+  "Disable L1 Validator": "Disable L1 Validator",
   "Disconnect": "Disconnect",
   "Disconnected": "Disconnected",
   "Discover top dApps on Avalanche now.": "Discover top dApps on Avalanche now.",
@@ -406,6 +408,9 @@
   "Incompatible Wallet": "Incompatible Wallet",
   "Incorrect Ledger": "Incorrect Ledger",
   "Incorrect code. Try again.": "Incorrect code. Try again.",
+  "Increase L1 Validator Balance": "Increase L1 Validator Balance",
+  "Increase by amount": "Increase by amount",
+  "Initial balance": "Initial balance",
   "Input API Key": "Input API Key",
   "Input Password": "Input Password",
   "Input Secret Key": "Input Secret Key",
@@ -475,6 +480,7 @@
   "Manage Collectibles": "Manage Collectibles",
   "Manage Networks": "Manage Networks",
   "Manage Tokens": "Manage Tokens",
+  "Manager Address": "Manager Address",
   "Manually Create New Wallet": "Manually Create New Wallet",
   "Max Base Fee": "Max Base Fee",
   "Max Priority Fee": "Max Priority Fee",
@@ -571,6 +577,8 @@
   "Outgoing": "Outgoing",
   "Owner": "Owner",
   "Owners": "Owners",
+  "Owners Able to Deactivate": "Owners Able to Deactivate",
+  "Owners of the Remaining Balance": "Owners of the Remaining Balance",
   "Participate in Core Analytics": "Participate in Core Analytics",
   "Passkey": "Passkey",
   "Passkey Name": "Passkey Name",
@@ -662,6 +670,7 @@
   "Reenter the transaction details and try again.": "Reenter the transaction details and try again.",
   "Refresh is only available once per hour.": "Refresh is only available once per hour.",
   "Regenerate QR code": "Regenerate QR code",
+  "Register L1 Validator": "Register L1 Validator",
   "Register Wallet": "Register Wallet",
   "Reject": "Reject",
   "Reject Connection": "Reject Connection",
@@ -736,6 +745,7 @@
   "Sending Amount": "Sending Amount",
   "Sending To": "Sending To",
   "Sent": "Sent",
+  "Set L1 Validator Weight": "Set L1 Validator Weight",
   "Set Up Later": "Set Up Later",
   "Set a limit that you will allow <b>{{domain}}</b> to automatically spend.": "Set a limit that you will allow <b>{{domain}}</b> to automatically spend.",
   "Show Private Key": "Show Private Key",
@@ -770,6 +780,7 @@
   "Spendable Balance": "Spendable Balance",
   "Spender": "Spender",
   "Spending limit": "Spending limit",
+  "Stake": "Stake",
   "Stake Amount": "Stake Amount",
   "Staked": "Staked",
   "Staking Details": "Staking Details",
@@ -937,6 +948,8 @@
   "User declined the transaction": "User declined the transaction",
   "User rejected the request": "User rejected the request",
   "Users may not use the Bridge if they are on the Specially Designated Nationals (SDN) List of the Office of Foreign Assets Control (OFAC) or any other sanctions or are otherwise a sanctioned person or from a sanctioned jurisdiction": "Users may not use the Bridge if they are on the Specially Designated Nationals (SDN) List of the Office of Foreign Assets Control (OFAC) or any other sanctions or are otherwise a sanctioned person or from a sanctioned jurisdiction",
+  "Validation ID": "Validation ID",
+  "Validators": "Validators",
   "Value": "Value",
   "Verify": "Verify",
   "Verify Code": "Verify Code",

src/pages/ApproveAction/AvalancheSignTx.tsx

@@ -37,6 +37,11 @@ import {
   FunctionNames,
   useIsFunctionAvailable,
 } from '@src/hooks/useIsFunctionAvailable';
+import { ApproveConvertSubnetToL1 } from './components/ApproveConvertSubnetToL1';
+import { ApproveRegisterL1Validator } from './components/ApproveRegisterL1Validator';
+import { ApproveIncreaseL1ValidatorBalance } from './components/ApproveIncreaseL1ValidatorBalance';
+import { ApproveDisableL1Validator } from './components/ApproveDisableL1Validator';
+import { ApproveSetL1ValidatorWeight } from './components/ApproveSetL1ValidatorWeight';
 
 export function AvalancheSignTx() {
   const requestId = useGetRequestId();
@@ -136,6 +141,18 @@ export function AvalancheSignTx() {
         return <ImportTxView tx={tx} avaxPrice={tokenPrice}></ImportTxView>;
       } else if (Avalanche.isBaseTx(tx)) {
         return <BaseTxView tx={tx} avaxPrice={tokenPrice}></BaseTxView>;
+      } 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.isSetL1ValidatorWeightTx(tx)) {
+        return <ApproveSetL1ValidatorWeight tx={tx} avaxPrice={tokenPrice} />;
+      } else if (Avalanche.isIncreaseL1ValidatorBalance(tx)) {
+        return (
+          <ApproveIncreaseL1ValidatorBalance tx={tx} avaxPrice={tokenPrice} />
+        );
       } else if (Avalanche.isCreateSubnetTx(tx)) {
         return (
           <ApproveCreateSubnet

src/pages/ApproveAction/components/ApproveConvertSubnetToL1.tsx

@@ -0,0 +1,108 @@
+import { useTranslation } from 'react-i18next';
+import { Divider, Stack, Typography } from '@avalabs/core-k2-components';
+
+import {
+  ApprovalSection,
+  ApprovalSectionBody,
+  ApprovalSectionHeader,
+} from '@src/components/common/approval/ApprovalSection';
+import { TxDetailsRow } from '@src/components/common/approval/TxDetailsRow';
+
+import { TruncatedIdentifier } from './TruncatedIdentifier';
+import { AvaxAmount } from './AvaxAmount';
+import { Avalanche } from '@avalabs/core-wallets-sdk';
+
+export function ApproveConvertSubnetToL1({
+  tx,
+  avaxPrice,
+}: {
+  tx: Avalanche.ConvertSubnetToL1Tx;
+  avaxPrice: number;
+}) {
+  const { t } = useTranslation();
+  const { txFee, chainID, managerAddress, subnetID, validators } = tx;
+
+  return (
+    <>
+      <ApprovalSection sx={{ gap: 1 }}>
+        <ApprovalSectionHeader label={t('Subnet Details')} />
+        <ApprovalSectionBody sx={{ justifyContent: 'start', py: 2.25 }}>
+          <TxDetailsRow label={t('Subnet ID')}>
+            <TruncatedIdentifier identifier={subnetID} size={14} />
+          </TxDetailsRow>
+          <TxDetailsRow label={t('Chain ID')}>
+            <TruncatedIdentifier identifier={chainID} size={14} />
+          </TxDetailsRow>
+          <TxDetailsRow label={t('Manager Address')}>
+            <TruncatedIdentifier identifier={managerAddress} size={14} />
+          </TxDetailsRow>
+        </ApprovalSectionBody>
+      </ApprovalSection>
+      <ApprovalSection sx={{ gap: 1 }}>
+        <ApprovalSectionHeader label={t('Validators')} />
+        <ApprovalSectionBody
+          sx={{ justifyContent: 'start', py: 2.25 }}
+          divider={<Divider sx={{ my: 1.5 }} />}
+        >
+          {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>
+            )
+          )}
+        </ApprovalSectionBody>
+      </ApprovalSection>
+      <ApprovalSection>
+        <ApprovalSectionHeader label={t('Network Fee')} />
+        <ApprovalSectionBody>
+          <TxDetailsRow label={t('Fee Amount')}>
+            <AvaxAmount amount={txFee} avaxPrice={avaxPrice} />
+          </TxDetailsRow>
+        </ApprovalSectionBody>
+      </ApprovalSection>
+    </>
+  );
+}

src/pages/ApproveAction/components/ApproveDisableL1Validator.tsx

@@ -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>
+    </>
+  );
+}

src/pages/ApproveAction/components/ApproveIncreaseL1ValidatorBalance.tsx

@@ -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>
+    </>
+  );
+}

src/pages/ApproveAction/components/ApproveRegisterL1Validator.tsx

@@ -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>
+    </>
+  );
+}

src/pages/ApproveAction/components/ApproveSetL1ValidatorWeight.tsx

@@ -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 ApproveSetL1ValidatorWeight({
+  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>
+    </>
+  );
+}