Large amount of changes. Successfully broadcasts txs
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* FetchInvitationStep — first step in the import flow.
|
||||
*
|
||||
* Receives an invitation ID, fetches the invitation from the sync server,
|
||||
* resolves its template, and auto-advances once loaded.
|
||||
* Shows a loading spinner while fetching and an error state with retry/cancel.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { colors } from '../../../../theme.js';
|
||||
import type { FetchStepProps } from '../types.js';
|
||||
|
||||
export function FetchInvitationStep({
|
||||
invitationId,
|
||||
appService,
|
||||
onComplete,
|
||||
onCancel,
|
||||
isActive,
|
||||
}: FetchStepProps): React.ReactElement {
|
||||
const [status, setStatus] = useState<'loading' | 'error'>('loading');
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
/**
|
||||
* Fetch the invitation and its template, then auto-advance.
|
||||
*/
|
||||
const fetchInvitation = useCallback(async () => {
|
||||
setStatus('loading');
|
||||
setErrorMessage(null);
|
||||
|
||||
try {
|
||||
// Create/fetch the invitation instance (fetches from sync server if needed)
|
||||
const invitation = await appService.createInvitation(invitationId);
|
||||
|
||||
// Resolve the template for display in later steps
|
||||
const template = await appService.engine.getTemplate(invitation.data.templateIdentifier);
|
||||
|
||||
// Auto-advance — hand the loaded data to the flow controller
|
||||
onComplete(invitation, template ?? null);
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setErrorMessage(message);
|
||||
setStatus('error');
|
||||
}
|
||||
}, [invitationId, appService, onComplete]);
|
||||
|
||||
// Kick off the fetch on mount
|
||||
useEffect(() => {
|
||||
if (isActive) {
|
||||
fetchInvitation();
|
||||
}
|
||||
}, [isActive, fetchInvitation]);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{status === 'loading' && (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.info}>Fetching invitation...</Text>
|
||||
<Text color={colors.textMuted} dimColor>ID: {invitationId}</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{status === 'error' && (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.error} bold>Failed to fetch invitation</Text>
|
||||
<Text color={colors.textMuted} wrap="wrap">{errorMessage}</Text>
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>Press Enter to retry or Esc to cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* InputsSelectStep — lets the user select UTXOs to fund the invitation.
|
||||
*
|
||||
* On mount, queries for suitable resources via the invitation's `findSuitableResources`.
|
||||
* Auto-selects greedily, then lets the user toggle individual UTXOs.
|
||||
* Shows required, selected, and change amounts.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { colors, formatSatoshis } from '../../../../theme.js';
|
||||
import type { InputsSelectStepProps, SelectableUTXO } from '../types.js';
|
||||
|
||||
/** Default fee estimate in satoshis. */
|
||||
const DEFAULT_FEE = 500n;
|
||||
|
||||
/** Dust threshold — outputs below this are unspendable. */
|
||||
const DUST_THRESHOLD = 546n;
|
||||
|
||||
export function InputsSelectStep({
|
||||
invitation,
|
||||
template,
|
||||
selectedRole,
|
||||
appService,
|
||||
onComplete,
|
||||
onCancel,
|
||||
isActive,
|
||||
}: InputsSelectStepProps): React.ReactElement {
|
||||
const [utxos, setUtxos] = useState<SelectableUTXO[]>([]);
|
||||
const [focusedIndex, setFocusedIndex] = useState(0);
|
||||
const [requiredAmount, setRequiredAmount] = useState(0n);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fee = DEFAULT_FEE;
|
||||
|
||||
// Derived totals
|
||||
const selectedAmount = utxos
|
||||
.filter(u => u.selected)
|
||||
.reduce((sum, u) => sum + u.valueSatoshis, 0n);
|
||||
const changeAmount = selectedAmount - requiredAmount - fee;
|
||||
const hasEnough = selectedAmount >= requiredAmount + fee;
|
||||
|
||||
/**
|
||||
* Determine the required satoshi amount from the invitation's variables.
|
||||
*/
|
||||
const computeRequiredAmount = useCallback(async (): Promise<bigint> => {
|
||||
return await invitation.getSatsOut() ?? 0n;
|
||||
}, [invitation]);
|
||||
|
||||
/**
|
||||
* Fetch suitable UTXOs from the engine and auto-select greedily.
|
||||
*/
|
||||
const loadUtxos = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const required = await computeRequiredAmount();
|
||||
setRequiredAmount(required);
|
||||
|
||||
const unspentOutputs = await invitation.findSuitableResources({
|
||||
templateIdentifier: invitation.data.templateIdentifier,
|
||||
outputIdentifier: 'receiveOutput',
|
||||
});
|
||||
|
||||
// Map to selectable UTXOs
|
||||
const selectable: SelectableUTXO[] = unspentOutputs.map((utxo: any) => ({
|
||||
outpointTransactionHash: utxo.outpointTransactionHash,
|
||||
outpointIndex: utxo.outpointIndex,
|
||||
valueSatoshis: BigInt(utxo.valueSatoshis),
|
||||
lockingBytecode: utxo.lockingBytecode
|
||||
? typeof utxo.lockingBytecode === 'string'
|
||||
? utxo.lockingBytecode
|
||||
: Buffer.from(utxo.lockingBytecode).toString('hex')
|
||||
: undefined,
|
||||
selected: false,
|
||||
}));
|
||||
|
||||
// Greedy auto-select, skipping duplicate locking bytecodes
|
||||
let accumulated = 0n;
|
||||
const seenBytecodes = new Set<string>();
|
||||
|
||||
for (const utxo of selectable) {
|
||||
if (utxo.lockingBytecode && seenBytecodes.has(utxo.lockingBytecode)) continue;
|
||||
if (utxo.lockingBytecode) seenBytecodes.add(utxo.lockingBytecode);
|
||||
|
||||
utxo.selected = true;
|
||||
accumulated += utxo.valueSatoshis;
|
||||
|
||||
if (accumulated >= required + fee) break;
|
||||
}
|
||||
|
||||
setUtxos(selectable);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [invitation, computeRequiredAmount, fee]);
|
||||
|
||||
// Load UTXOs on mount
|
||||
useEffect(() => {
|
||||
if (isActive) loadUtxos();
|
||||
}, [isActive, loadUtxos]);
|
||||
|
||||
/**
|
||||
* Toggle the selection of a UTXO at the given index.
|
||||
*/
|
||||
const toggleSelection = useCallback((index: number) => {
|
||||
setUtxos(prev => {
|
||||
const updated = [...prev];
|
||||
const utxo = updated[index];
|
||||
if (utxo) updated[index] = { ...utxo, selected: !utxo.selected };
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Keyboard handling
|
||||
useInput((input, key) => {
|
||||
if (!isActive) return;
|
||||
|
||||
if (key.upArrow || input === 'k') {
|
||||
setFocusedIndex(prev => Math.max(0, prev - 1));
|
||||
} else if (key.downArrow || input === 'j') {
|
||||
setFocusedIndex(prev => Math.min(utxos.length - 1, prev + 1));
|
||||
} else if (input === ' ' || (key.return && utxos.length > 0)) {
|
||||
// Space or Enter toggles the focused UTXO
|
||||
if (utxos.length > 0) toggleSelection(focusedIndex);
|
||||
} else if (input === 'a') {
|
||||
// Select all
|
||||
setUtxos(prev => prev.map(u => ({ ...u, selected: true })));
|
||||
} else if (input === 'n') {
|
||||
// Deselect all
|
||||
setUtxos(prev => prev.map(u => ({ ...u, selected: false })));
|
||||
} else if (key.tab) {
|
||||
// Tab confirms selection (moves to next step)
|
||||
if (hasEnough) {
|
||||
onComplete(utxos.filter(u => u.selected));
|
||||
}
|
||||
} else if (key.escape) {
|
||||
onCancel();
|
||||
}
|
||||
}, { isActive });
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.info}>Finding suitable UTXOs...</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.error} bold>Failed to load UTXOs</Text>
|
||||
<Text color={colors.textMuted}>{error}</Text>
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>Esc: Cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// No UTXOs found
|
||||
if (utxos.length === 0) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.warning}>No suitable UTXOs found. Make sure your wallet has funds.</Text>
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>Esc: Cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{/* Summary bar */}
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text color={colors.primary} bold>Required: </Text>
|
||||
<Text color={colors.text}>{formatSatoshis(requiredAmount + fee)}</Text>
|
||||
<Text color={colors.textMuted}> (amount {formatSatoshis(requiredAmount)} + fee {formatSatoshis(fee)})</Text>
|
||||
</Box>
|
||||
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text color={colors.primary} bold>Selected: </Text>
|
||||
<Text color={hasEnough ? colors.success : colors.error}>{formatSatoshis(selectedAmount)}</Text>
|
||||
{hasEnough && changeAmount >= DUST_THRESHOLD && (
|
||||
<Text color={colors.textMuted}> (change: {formatSatoshis(changeAmount)})</Text>
|
||||
)}
|
||||
{!hasEnough && (
|
||||
<Text color={colors.error}> — need {formatSatoshis(requiredAmount + fee - selectedAmount)} more</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* UTXO list */}
|
||||
<Text color={colors.primary} bold>UTXOs ({utxos.length}):</Text>
|
||||
{utxos.map((utxo, index) => {
|
||||
const isFocused = index === focusedIndex;
|
||||
const checkMark = utxo.selected ? '☑' : '☐';
|
||||
const txShort = utxo.outpointTransactionHash.slice(0, 8);
|
||||
|
||||
return (
|
||||
<Text
|
||||
key={`${utxo.outpointTransactionHash}:${utxo.outpointIndex}`}
|
||||
color={isFocused ? colors.focus : utxo.selected ? colors.success : colors.text}
|
||||
bold={isFocused}
|
||||
>
|
||||
{isFocused ? '▸ ' : ' '}{checkMark} {formatSatoshis(utxo.valueSatoshis)} ({txShort}…:{utxo.outpointIndex})
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Navigation hint */}
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>
|
||||
↑↓: Navigate • Space: Toggle • a: All • n: None • Tab: Confirm • Esc: Cancel
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/**
|
||||
* PreviewInvitationStep — displays the current state of a fetched invitation.
|
||||
*
|
||||
* Shows which roles, inputs, outputs, and variables have already been filled
|
||||
* so the user can understand what they're joining before proceeding.
|
||||
* Press Enter to continue, Esc to cancel.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { colors, formatSatoshis } from '../../../../theme.js';
|
||||
import {
|
||||
getInvitationState,
|
||||
getStateColorName,
|
||||
getInvitationInputs,
|
||||
getInvitationOutputs,
|
||||
getInvitationVariables,
|
||||
} from '../../../../../utils/invitation-utils.js';
|
||||
import type { PreviewStepProps } from '../types.js';
|
||||
|
||||
/**
|
||||
* Map a semantic color name to an actual theme color value.
|
||||
*/
|
||||
function stateColor(state: string): string {
|
||||
const name = getStateColorName(state);
|
||||
switch (name) {
|
||||
case 'info': return colors.info as string;
|
||||
case 'warning': return colors.warning as string;
|
||||
case 'success': return colors.success as string;
|
||||
case 'error': return colors.error as string;
|
||||
case 'muted':
|
||||
default: return colors.textMuted as string;
|
||||
}
|
||||
}
|
||||
|
||||
export function PreviewInvitationStep({
|
||||
invitation,
|
||||
template,
|
||||
onComplete,
|
||||
onCancel,
|
||||
isActive,
|
||||
}: PreviewStepProps): React.ReactElement {
|
||||
useInput((_input, key) => {
|
||||
if (!isActive) return;
|
||||
if (key.return) onComplete();
|
||||
if (key.escape) onCancel();
|
||||
}, { isActive });
|
||||
|
||||
const state = getInvitationState(invitation);
|
||||
const action = template?.actions?.[invitation.data.actionIdentifier];
|
||||
const inputs = getInvitationInputs(invitation);
|
||||
const outputs = getInvitationOutputs(invitation);
|
||||
const variables = getInvitationVariables(invitation);
|
||||
|
||||
// Collect role identifiers that appear across all commits
|
||||
const filledRoles = new Set<string>();
|
||||
for (const commit of invitation.data.commits ?? []) {
|
||||
for (const input of commit.data?.inputs ?? []) {
|
||||
if (input.roleIdentifier) filledRoles.add(input.roleIdentifier);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{/* Template & action info */}
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Text color={colors.primary} bold>Template: </Text>
|
||||
<Text color={colors.text}>{template?.name ?? invitation.data.templateIdentifier}</Text>
|
||||
{template?.description && (
|
||||
<Text color={colors.textMuted} dimColor>{template.description}</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Box width="50%" flexDirection="column">
|
||||
<Text color={colors.primary} bold>Action: </Text>
|
||||
<Text color={colors.text}>{action?.name ?? invitation.data.actionIdentifier}</Text>
|
||||
{action?.description && (
|
||||
<Text color={colors.textMuted} dimColor>{action.description}</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box width="50%" flexDirection="column">
|
||||
<Text color={colors.primary} bold>Status: </Text>
|
||||
<Text color={stateColor(state)}>{state}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Roles already filled */}
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Text color={colors.primary} bold>Roles Filled ({filledRoles.size}):</Text>
|
||||
{filledRoles.size === 0 ? (
|
||||
<Text color={colors.textMuted}> None yet</Text>
|
||||
) : (
|
||||
Array.from(filledRoles).map(role => {
|
||||
const roleInfoRaw = template?.roles?.[role];
|
||||
const roleInfo = roleInfoRaw && typeof roleInfoRaw === 'object' ? roleInfoRaw : null;
|
||||
return (
|
||||
<Text key={role} color={colors.text}> • {roleInfo?.name ?? role}</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Inputs & Outputs side by side */}
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Box width="50%" flexDirection="column">
|
||||
<Text color={colors.primary} bold>Inputs ({inputs.length}):</Text>
|
||||
{inputs.length === 0 ? (
|
||||
<Text color={colors.textMuted}> None yet</Text>
|
||||
) : (
|
||||
inputs.map((input, idx) => {
|
||||
const inputTemplate = template?.inputs?.[input.inputIdentifier ?? ''];
|
||||
return (
|
||||
<Text key={`input-${idx}`} color={colors.text}>
|
||||
{' '}• {inputTemplate?.name ?? input.inputIdentifier ?? `Input ${idx}`}
|
||||
{input.roleIdentifier && ` (${input.roleIdentifier})`}
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box width="50%" flexDirection="column">
|
||||
<Text color={colors.primary} bold>Outputs ({outputs.length}):</Text>
|
||||
{outputs.length === 0 ? (
|
||||
<Text color={colors.textMuted}> None yet</Text>
|
||||
) : (
|
||||
outputs.map((output, idx) => {
|
||||
const outputTemplate = template?.outputs?.[output.outputIdentifier ?? ''];
|
||||
return (
|
||||
<Text key={`output-${idx}`} color={colors.text}>
|
||||
{' '}• {outputTemplate?.name ?? output.outputIdentifier ?? `Output ${idx}`}
|
||||
{output.valueSatoshis !== undefined && ` (${formatSatoshis(output.valueSatoshis)})`}
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Variables */}
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Text color={colors.primary} bold>Variables ({variables.length}):</Text>
|
||||
{variables.length === 0 ? (
|
||||
<Text color={colors.textMuted}> None set</Text>
|
||||
) : (
|
||||
variables.map((variable, idx) => {
|
||||
const varTemplate = template?.variables?.[variable.variableIdentifier];
|
||||
const displayValue = typeof variable.value === 'bigint'
|
||||
? variable.value.toString()
|
||||
: String(variable.value);
|
||||
return (
|
||||
<Text key={`var-${idx}`} color={colors.text}>
|
||||
{' '}• {varTemplate?.name ?? variable.variableIdentifier}: {displayValue}
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Navigation hint */}
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>Enter: Continue • Esc: Cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* ReviewStep — final step that summarizes the import and executes it.
|
||||
*
|
||||
* Displays the accumulated selections (role, inputs, amounts) and on confirmation:
|
||||
* 1. Adds inputs (with the selected role identifier) to the invitation.
|
||||
* 2. Optionally adds a change output if the change exceeds the dust threshold.
|
||||
* 3. Calls `onComplete()` to signal the flow is finished.
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { colors, formatSatoshis } from '../../../../theme.js';
|
||||
import type { ReviewStepProps, SelectableUTXO } from '../types.js';
|
||||
|
||||
/** Default fee estimate in satoshis. */
|
||||
const DEFAULT_FEE = 500n;
|
||||
|
||||
/** Dust threshold — outputs below this are unspendable. */
|
||||
const DUST_THRESHOLD = 546n;
|
||||
|
||||
export function ReviewStep({
|
||||
invitation,
|
||||
template,
|
||||
selectedRole,
|
||||
selectedInputs,
|
||||
requiredAmount,
|
||||
changeAmount,
|
||||
appService,
|
||||
onComplete,
|
||||
onCancel,
|
||||
isActive,
|
||||
}: ReviewStepProps): React.ReactElement {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fee = DEFAULT_FEE;
|
||||
const action = template?.actions?.[invitation.data.actionIdentifier];
|
||||
|
||||
// Compute totals from selected inputs
|
||||
const totalSelected = selectedInputs.reduce((sum, u) => sum + u.valueSatoshis, 0n);
|
||||
|
||||
/**
|
||||
* Execute the import: add inputs (with role) and optional change output.
|
||||
*/
|
||||
const submit = useCallback(async () => {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
onComplete();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [invitation, selectedRole, selectedInputs, onComplete]);
|
||||
|
||||
// Keyboard handling
|
||||
useInput((_input, key) => {
|
||||
if (!isActive || isSubmitting) return;
|
||||
|
||||
if (key.return) {
|
||||
submit();
|
||||
} else if (key.escape) {
|
||||
onCancel();
|
||||
}
|
||||
}, { isActive });
|
||||
|
||||
// Resolve role display name
|
||||
const roleInfoRaw = template?.roles?.[selectedRole];
|
||||
const roleInfo = roleInfoRaw && typeof roleInfoRaw === 'object' ? roleInfoRaw : null;
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.primary} bold>Review Import</Text>
|
||||
|
||||
{/* Template & action */}
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={colors.text}>Template: {template?.name ?? invitation.data.templateIdentifier}</Text>
|
||||
<Text color={colors.text}>Action: {action?.name ?? invitation.data.actionIdentifier}</Text>
|
||||
<Text color={colors.text}>Role: {roleInfo?.name ?? selectedRole}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Funding summary */}
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={colors.primary} bold>Funding:</Text>
|
||||
<Text color={colors.text}> • UTXOs: {selectedInputs.length}</Text>
|
||||
<Text color={colors.text}> • Total: {formatSatoshis(totalSelected)}</Text>
|
||||
<Text color={colors.text}> • Required: {formatSatoshis(requiredAmount)}</Text>
|
||||
<Text color={colors.text}> • Fee: {formatSatoshis(fee)}</Text>
|
||||
{changeAmount >= DUST_THRESHOLD && (
|
||||
<Text color={colors.text}> • Change: {formatSatoshis(changeAmount)}</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.error} bold>Error: {error}</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Status / hint */}
|
||||
<Box marginTop={1}>
|
||||
{isSubmitting ? (
|
||||
<Text color={colors.info}>Submitting...</Text>
|
||||
) : (
|
||||
<Text color={colors.textMuted}>Enter: Confirm & Import • Esc: Cancel</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* RoleSelectStep — lets the user choose which role to take in the invitation.
|
||||
*
|
||||
* Displays available roles with their template-level and action-level descriptions.
|
||||
* Arrow keys to navigate, Enter to select, Esc to cancel.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { colors } from '../../../../theme.js';
|
||||
import type { RoleSelectStepProps } from '../types.js';
|
||||
|
||||
export function RoleSelectStep({
|
||||
invitation,
|
||||
template,
|
||||
availableRoles,
|
||||
onComplete,
|
||||
onCancel,
|
||||
isActive,
|
||||
}: RoleSelectStepProps): React.ReactElement {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
useInput((input, key) => {
|
||||
if (!isActive) return;
|
||||
|
||||
if (key.upArrow || input === 'k') {
|
||||
setSelectedIndex(prev => Math.max(0, prev - 1));
|
||||
} else if (key.downArrow || input === 'j') {
|
||||
setSelectedIndex(prev => Math.min(availableRoles.length - 1, prev + 1));
|
||||
} else if (key.return) {
|
||||
const role = availableRoles[selectedIndex];
|
||||
if (role) onComplete(role);
|
||||
} else if (key.escape) {
|
||||
onCancel();
|
||||
}
|
||||
}, { isActive });
|
||||
|
||||
const action = template?.actions?.[invitation.data.actionIdentifier];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{/* Context header */}
|
||||
<Box marginBottom={1} flexDirection="column">
|
||||
<Text color={colors.text}>Template: {template?.name ?? 'Unknown'}</Text>
|
||||
<Text color={colors.text}>Action: {action?.name ?? invitation.data.actionIdentifier}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Role list */}
|
||||
<Box flexDirection="column">
|
||||
<Text color={colors.primary} bold>Available Roles:</Text>
|
||||
|
||||
{availableRoles.length === 0 ? (
|
||||
<Text color={colors.warning}>No roles available (you may have already joined)</Text>
|
||||
) : (
|
||||
availableRoles.map((role, index) => {
|
||||
const roleInfoRaw = template?.roles?.[role];
|
||||
const roleInfo = roleInfoRaw && typeof roleInfoRaw === 'object' ? roleInfoRaw : null;
|
||||
const actionRoleRaw = action?.roles?.[role];
|
||||
const actionRole = actionRoleRaw && typeof actionRoleRaw === 'object' ? actionRoleRaw : null;
|
||||
const isFocused = index === selectedIndex;
|
||||
|
||||
return (
|
||||
<Box key={role} flexDirection="column">
|
||||
<Text
|
||||
color={isFocused ? colors.focus : colors.text}
|
||||
bold={isFocused}
|
||||
>
|
||||
{isFocused ? '▸ ' : ' '}
|
||||
{roleInfo?.name ?? role}
|
||||
</Text>
|
||||
{(roleInfo?.description || actionRole?.description) && (
|
||||
<Text color={colors.textMuted} dimColor>
|
||||
{' '}{actionRole?.description ?? roleInfo?.description}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Navigation hint */}
|
||||
<Box marginTop={1}>
|
||||
<Text color={colors.textMuted}>↑↓: Select role • Enter: Accept • Esc: Cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user