feat(ng): ledger BTC wallet policies

apps/next/src/components/Page/Page.tsx

@@ -1,5 +1,10 @@
 import { useIsIntersecting } from '@/hooks/useIsIntersecting';
-import { Stack, StackProps, Typography } from '@avalabs/k2-alpine';
+import {
+  Stack,
+  StackProps,
+  Typography,
+  TypographyProps,
+} from '@avalabs/k2-alpine';
 import { PageTopBar } from '../PageTopBar';
 import { NoScrollStack } from '../NoScrollStack';
 
@@ -13,6 +18,8 @@ type PageProps = {
   contentProps?: StackProps;
   containerProps?: StackProps;
   withViewSwitcher?: boolean;
+  titleProps?: TypographyProps;
+  descriptionProps?: TypographyProps;
 };
 
 export const Page = ({
@@ -25,6 +32,7 @@ export const Page = ({
   withBackButton = true,
   withViewSwitcher = true,
   containerProps,
+  descriptionProps,
   ...htmlProps
 }: PageProps) => {
   const { ref, isIntersecting, isObserving } = useIsIntersecting();
@@ -50,13 +58,22 @@ export const Page = ({
           {title && (
             <Stack gap={1}>
               <Stack direction="row" gap={1} justifyContent="space-between">
-                <Typography variant="h2" ref={ref} component="h1">
+                <Typography
+                  variant="h2"
+                  ref={ref}
+                  component="h1"
+                  maxWidth="90%"
+                >
                   {title}
                 </Typography>
                 {titleAction}
               </Stack>
               {description && (
-                <Typography variant="caption" sx={{ width: '60%' }}>
+                <Typography
+                  variant="caption"
+                  maxWidth="60%"
+                  {...descriptionProps}
+                >
                   {description}
                 </Typography>
               )}

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/LedgerRegisterBtcWalletPolicy.tsx

@@ -0,0 +1,87 @@
+import { FC } from 'react';
+import { Button } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+import { Page } from '@/components/Page';
+import { SlideUpDialog } from '@/components/Dialog';
+
+import { PolicyRegistrationState } from './types';
+import { usePolicyRegistrationState } from './hooks';
+import { ConfirmPublicKey, SetupWalletPolicy } from './components';
+
+const pageProps = {
+  descriptionProps: {
+    maxWidth: '90%',
+  },
+  contentProps: {
+    width: '100%',
+    justifyContent: 'space-between',
+  },
+};
+
+export const LedgerRegisterBtcWalletPolicy: FC = () => {
+  const { t } = useTranslation();
+
+  const { status, xpub, dismiss, policyName, policyDerivationPath } =
+    usePolicyRegistrationState();
+
+  const isPubkeyPhase = status.startsWith('pubkey:');
+  const phase = isPubkeyPhase ? 'pubkey' : 'policy';
+
+  const Content = ComponentByPhase[phase];
+
+  console.log('DEBUG status', status, policyName);
+
+  return (
+    <SlideUpDialog open={status !== 'idle' && status !== 'dismissed'}>
+      <Page
+        withBackButton
+        onBack={dismiss}
+        title={
+          isPubkeyPhase
+            ? t('Please confirm the public key displayed on your Ledger')
+            : t('Set up a wallet policy in the Bitcoin app')
+        }
+        description={
+          isPubkeyPhase
+            ? ''
+            : t(
+                'Ledger requires you to set up a wallet policy in the Bitcoin app. Please approve or reject this action on your Ledger device.',
+              )
+        }
+        {...pageProps}
+      >
+        <Content
+          status={status}
+          xpub={xpub}
+          policyName={policyName}
+          policyDerivationPath={policyDerivationPath}
+          dismiss={dismiss}
+        />
+        <Button
+          variant="contained"
+          color={status === 'policy:success' ? 'primary' : 'secondary'}
+          size="extension"
+          fullWidth
+          onClick={dismiss}
+          loading={status.endsWith(':pending')}
+          disabled={status.endsWith(':pending')}
+        >
+          {status === 'policy:success'
+            ? t('Done')
+            : status.endsWith(':pending')
+              ? t('Waiting for approval...')
+              : t('Dismiss')}
+        </Button>
+      </Page>
+    </SlideUpDialog>
+  );
+};
+
+const ComponentByPhase: Record<
+  'pubkey' | 'policy',
+  FC<PolicyRegistrationState>
+> = {
+  pubkey: ConfirmPublicKey,
+  policy: SetupWalletPolicy,
+};

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/components/ConfirmPublicKey.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { Stack } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+import { Card } from '@/components/Card';
+
+import { PolicyRegistrationState } from '../types';
+import { DetailRow } from './DetailRow';
+import { StatusCard } from './StatusCard';
+
+export const ConfirmPublicKey: FC<PolicyRegistrationState> = ({
+  policyDerivationPath,
+  status,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap={1} width="100%">
+      <Card>
+        <DetailRow label={t('Path')} value={policyDerivationPath ?? ''} />
+      </Card>
+      <StatusCard status={status} />
+    </Stack>
+  );
+};

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/components/DetailRow.tsx

@@ -0,0 +1,31 @@
+import { Typography } from '@avalabs/k2-alpine';
+import { Stack } from '@avalabs/k2-alpine';
+import { FC } from 'react';
+
+type Props = {
+  label: string;
+  value: string | React.ReactElement;
+};
+
+export const DetailRow: FC<Props> = ({ label, value }) => (
+  <Stack
+    direction="row"
+    gap={1}
+    px={2}
+    py={0.5}
+    minHeight={36}
+    alignItems="center"
+    justifyContent="space-between"
+  >
+    <Stack direction="row" alignItems="center" gap={0.5}>
+      <Typography variant="body3" sx={{ whiteSpace: 'nowrap' }}>
+        {label}
+      </Typography>
+    </Stack>
+    {typeof value === 'string' ? (
+      <Typography variant="body3">{value}</Typography>
+    ) : (
+      value
+    )}
+  </Stack>
+);

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/components/SetupWalletPolicy.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Divider, Stack } from '@avalabs/k2-alpine';
+
+import { Card } from '@/components/Card';
+
+import { PolicyRegistrationState } from '../types';
+import { DetailRow } from './DetailRow';
+import { StatusCard } from './StatusCard';
+
+const POLICY_DESCRIPTOR = 'wpkh(@0/**)';
+
+export const SetupWalletPolicy: FC<PolicyRegistrationState> = ({
+  policyName,
+  status,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap={1} width="100%">
+      <Card>
+        <Stack divider={<Divider />}>
+          <DetailRow label={t('Name')} value={policyName ?? ''} />
+          <DetailRow label={t('Policy')} value={POLICY_DESCRIPTOR} />
+        </Stack>
+      </Card>
+      <StatusCard status={status} />
+    </Stack>
+  );
+};

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/components/StatusCard.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CircularProgress, Stack, Typography } from '@avalabs/k2-alpine';
+
+import { Card } from '@/components/Card';
+
+import { PhaseStatus, PolicyRegistrationState, Status } from '../types';
+import { DetailRow } from './DetailRow';
+
+export const StatusCard: FC<Pick<PolicyRegistrationState, 'status'>> = ({
+  status,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <DetailRow
+        label={t('Status')}
+        value={<PhaseStatusIndicator phaseStatus={getPhaseStatus(status)} />}
+      />
+    </Card>
+  );
+};
+
+const PhaseStatusIndicator: FC<{ phaseStatus: PhaseStatus }> = ({
+  phaseStatus,
+}) => {
+  const { t } = useTranslation();
+
+  if (phaseStatus === 'error') {
+    return (
+      <Typography variant="body3" color="error.main">
+        {t('An error occurred, please try again later')}
+      </Typography>
+    );
+  }
+  if (phaseStatus === 'incorrect-device') {
+    return (
+      <Typography variant="body3" color="error.main">
+        {t('This Ledger was not used to create this wallet')}
+      </Typography>
+    );
+  }
+
+  if (phaseStatus === 'pending') {
+    return (
+      <Stack direction="row" alignItems="end">
+        <CircularProgress size={16} />
+      </Stack>
+    );
+  }
+
+  return (
+    <Typography variant="body3" color="success">
+      {t('Success!')}
+    </Typography>
+  );
+};
+
+const getPhaseStatus = (status: Status): PhaseStatus =>
+  status.split(':')[1] as PhaseStatus;

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ConfirmPublicKey';
+export * from './SetupWalletPolicy';

apps/next/src/components/ledger/LedgerRegisterBtcWalletPolicy/hooks/index.ts

@@ -0,0 +1 @@
+export * from './usePolicyRegistrationState';