Skip to content

Commit 4257d6a

Browse files
saustrie-consensyssaustrie-consensys
committed
refactor(ramp): extract OrderTrackingPanel + flatten ternaries
SonarQube flagged the playground for cognitive complexity (36 > 30) and three nested ternaries in the await-status badge rendering. Extracting `OrderTrackingPanel` as its own component pushes the complexity back under the threshold and clears the nested ternaries by routing color/text selection through `getAwaitBadgeColor` / `getAwaitBadgeText` helpers. No behaviour changes.
1 parent a6b6f12 commit 4257d6a

1 file changed

Lines changed: 137 additions & 103 deletions

File tree

‎app/components/UI/Ramp/Views/HeadlessPlayground/HeadlessPlayground.tsx‎

Lines changed: 137 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -489,9 +489,7 @@ function HeadlessPlayground() {
489489
// refreshOrder / awaitOrderTerminalState hooks MetaMask Pay's
490490
// TransactionPayController will use.
491491
const [lastOrderId, setLastOrderId] = useState<string | null>(null);
492-
const [awaitStatus, setAwaitStatus] = useState<
493-
'idle' | 'awaiting' | 'terminal' | 'timed-out' | 'rejected'
494-
>('idle');
492+
const [awaitStatus, setAwaitStatus] = useState<AwaitStatus>('idle');
495493
const [awaitMessage, setAwaitMessage] = useState<string | null>(null);
496494

497495
const appendEvent = useCallback((message: string) => {
@@ -1184,106 +1182,15 @@ function HeadlessPlayground() {
11841182
</View>
11851183

11861184
{lastOrderId ? (
1187-
<View
1188-
style={styles.orderTrackingSection}
1189-
testID={HEADLESS_PLAYGROUND_ORDER_TRACKING_SECTION_TEST_ID}
1190-
>
1191-
<Text
1192-
variant={TextVariant.BodySm}
1193-
fontWeight={FontWeight.Medium}
1194-
style={styles.orderTrackingTitle}
1195-
>
1196-
{strings(
1197-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_title',
1198-
)}
1199-
</Text>
1200-
<View style={styles.orderTrackingRow}>
1201-
<Text
1202-
variant={TextVariant.BodyXs}
1203-
color={TextColor.TextAlternative}
1204-
>
1205-
{strings(
1206-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_id',
1207-
)}
1208-
</Text>
1209-
<Text variant={TextVariant.BodyXs}>{lastOrderId}</Text>
1210-
</View>
1211-
<View style={styles.orderTrackingRow}>
1212-
<Text
1213-
variant={TextVariant.BodyXs}
1214-
color={TextColor.TextAlternative}
1215-
>
1216-
{strings(
1217-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_status',
1218-
)}
1219-
</Text>
1220-
<Text variant={TextVariant.BodyXs}>
1221-
{trackedOrder?.status ??
1222-
strings(
1223-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_status_unknown',
1224-
)}
1225-
</Text>
1226-
</View>
1227-
<View style={styles.orderTrackingActions}>
1228-
<Button
1229-
variant={ButtonVariant.Secondary}
1230-
onPress={handleRefreshOrder}
1231-
isDisabled={!trackedOrder}
1232-
testID={
1233-
HEADLESS_PLAYGROUND_ORDER_TRACKING_REFRESH_TEST_ID
1234-
}
1235-
>
1236-
{strings(
1237-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_refresh',
1238-
)}
1239-
</Button>
1240-
<Button
1241-
variant={ButtonVariant.Secondary}
1242-
onPress={handleAwaitOrderTerminalState}
1243-
isDisabled={awaitStatus === 'awaiting'}
1244-
testID={
1245-
HEADLESS_PLAYGROUND_ORDER_TRACKING_AWAIT_TEST_ID
1246-
}
1247-
>
1248-
{strings(
1249-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_await',
1250-
)}
1251-
</Button>
1252-
</View>
1253-
{awaitStatus !== 'idle' ? (
1254-
<Text
1255-
variant={TextVariant.BodyXs}
1256-
color={
1257-
awaitStatus === 'terminal'
1258-
? TextColor.SuccessDefault
1259-
: awaitStatus === 'awaiting'
1260-
? TextColor.TextAlternative
1261-
: TextColor.ErrorDefault
1262-
}
1263-
style={styles.orderTrackingBadge}
1264-
testID={
1265-
HEADLESS_PLAYGROUND_ORDER_TRACKING_STATUS_BADGE_TEST_ID
1266-
}
1267-
>
1268-
{awaitStatus === 'awaiting'
1269-
? strings(
1270-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_awaiting',
1271-
)
1272-
: awaitStatus === 'terminal'
1273-
? strings(
1274-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_terminal',
1275-
)
1276-
: awaitStatus === 'timed-out'
1277-
? strings(
1278-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_timed_out',
1279-
)
1280-
: strings(
1281-
'app_settings.fiat_on_ramp.headless_playground.order_tracking_rejected',
1282-
{ message: awaitMessage ?? '' },
1283-
)}
1284-
</Text>
1285-
) : null}
1286-
</View>
1185+
<OrderTrackingPanel
1186+
lastOrderId={lastOrderId}
1187+
trackedOrder={trackedOrder}
1188+
awaitStatus={awaitStatus}
1189+
awaitMessage={awaitMessage}
1190+
onRefresh={handleRefreshOrder}
1191+
onAwaitTerminalState={handleAwaitOrderTerminalState}
1192+
styles={styles}
1193+
/>
12871194
) : null}
12881195

12891196
<View
@@ -1359,6 +1266,133 @@ function HeadlessPlayground() {
13591266
);
13601267
}
13611268

1269+
type AwaitStatus = 'idle' | 'awaiting' | 'terminal' | 'timed-out' | 'rejected';
1270+
1271+
interface OrderTrackingPanelProps {
1272+
lastOrderId: string;
1273+
trackedOrder: RampsOrder | undefined;
1274+
awaitStatus: AwaitStatus;
1275+
awaitMessage: string | null;
1276+
onRefresh: () => void;
1277+
onAwaitTerminalState: () => void;
1278+
styles: ReturnType<typeof styleSheet>;
1279+
}
1280+
1281+
function getAwaitBadgeColor(status: AwaitStatus): TextColor {
1282+
if (status === 'terminal') {
1283+
return TextColor.SuccessDefault;
1284+
}
1285+
if (status === 'awaiting') {
1286+
return TextColor.TextAlternative;
1287+
}
1288+
return TextColor.ErrorDefault;
1289+
}
1290+
1291+
function getAwaitBadgeText(
1292+
status: AwaitStatus,
1293+
message: string | null,
1294+
): string {
1295+
if (status === 'awaiting') {
1296+
return strings(
1297+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_awaiting',
1298+
);
1299+
}
1300+
if (status === 'terminal') {
1301+
return strings(
1302+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_terminal',
1303+
);
1304+
}
1305+
if (status === 'timed-out') {
1306+
return strings(
1307+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_timed_out',
1308+
);
1309+
}
1310+
return strings(
1311+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_rejected',
1312+
{ message: message ?? '' },
1313+
);
1314+
}
1315+
1316+
function OrderTrackingPanel({
1317+
lastOrderId,
1318+
trackedOrder,
1319+
awaitStatus,
1320+
awaitMessage,
1321+
onRefresh,
1322+
onAwaitTerminalState,
1323+
styles,
1324+
}: OrderTrackingPanelProps) {
1325+
return (
1326+
<View
1327+
style={styles.orderTrackingSection}
1328+
testID={HEADLESS_PLAYGROUND_ORDER_TRACKING_SECTION_TEST_ID}
1329+
>
1330+
<Text
1331+
variant={TextVariant.BodySm}
1332+
fontWeight={FontWeight.Medium}
1333+
style={styles.orderTrackingTitle}
1334+
>
1335+
{strings(
1336+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_title',
1337+
)}
1338+
</Text>
1339+
<View style={styles.orderTrackingRow}>
1340+
<Text variant={TextVariant.BodyXs} color={TextColor.TextAlternative}>
1341+
{strings(
1342+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_id',
1343+
)}
1344+
</Text>
1345+
<Text variant={TextVariant.BodyXs}>{lastOrderId}</Text>
1346+
</View>
1347+
<View style={styles.orderTrackingRow}>
1348+
<Text variant={TextVariant.BodyXs} color={TextColor.TextAlternative}>
1349+
{strings(
1350+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_status',
1351+
)}
1352+
</Text>
1353+
<Text variant={TextVariant.BodyXs}>
1354+
{trackedOrder?.status ??
1355+
strings(
1356+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_status_unknown',
1357+
)}
1358+
</Text>
1359+
</View>
1360+
<View style={styles.orderTrackingActions}>
1361+
<Button
1362+
variant={ButtonVariant.Secondary}
1363+
onPress={onRefresh}
1364+
isDisabled={!trackedOrder}
1365+
testID={HEADLESS_PLAYGROUND_ORDER_TRACKING_REFRESH_TEST_ID}
1366+
>
1367+
{strings(
1368+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_refresh',
1369+
)}
1370+
</Button>
1371+
<Button
1372+
variant={ButtonVariant.Secondary}
1373+
onPress={onAwaitTerminalState}
1374+
isDisabled={awaitStatus === 'awaiting'}
1375+
testID={HEADLESS_PLAYGROUND_ORDER_TRACKING_AWAIT_TEST_ID}
1376+
>
1377+
{strings(
1378+
'app_settings.fiat_on_ramp.headless_playground.order_tracking_await',
1379+
)}
1380+
</Button>
1381+
</View>
1382+
{awaitStatus !== 'idle' ? (
1383+
<Text
1384+
variant={TextVariant.BodyXs}
1385+
color={getAwaitBadgeColor(awaitStatus)}
1386+
style={styles.orderTrackingBadge}
1387+
testID={HEADLESS_PLAYGROUND_ORDER_TRACKING_STATUS_BADGE_TEST_ID}
1388+
>
1389+
{getAwaitBadgeText(awaitStatus, awaitMessage)}
1390+
</Text>
1391+
) : null}
1392+
</View>
1393+
);
1394+
}
1395+
13621396
interface QuotesListProps {
13631397
quotes: QuotesResponse | null;
13641398
paymentMethods: PaymentMethod[];

0 commit comments

Comments
 (0)