) => {
+ e.preventDefault();
+ if (canModifyLiqTier) {
+ setLiquidityTier(tempLiquidityTier);
+ setCanModifyLiqTier(false);
+ } else {
+ onConfirmMarket();
+ }
+ }}
+ >
+
+ {stringGetter({ key: STRING_KEYS.ADD_A_MARKET })}
+
+ {stringGetter({ key: STRING_KEYS.BALANCE })}:{' '}
+
+
+ ({
+ value: potentialMarket.baseAsset,
+ label: potentialMarket?.assetName ?? potentialMarket.baseAsset,
+ tag: `${potentialMarket.baseAsset}-USD`,
+ onSelect: () => {
+ setAssetToAdd(potentialMarket);
+ },
+ })) ?? [],
+ },
+ ]}
+ label={stringGetter({ key: STRING_KEYS.MARKETS })}
+ >
+ {assetToAdd ? (
+
+ {assetToAdd?.assetName ?? assetToAdd.baseAsset} {assetToAdd?.baseAsset}-USD
+
+ ) : (
+ 'e.g. "BTC-USD"'
+ )}
+
+ {assetToAdd && (
+ <>
+ {stringGetter({ key: STRING_KEYS.POPULATED_DETAILS })}
+
+
+
+ {stringGetter({ key: STRING_KEYS.LIQUIDITY_TIER })}
+
+
+ {canModifyLiqTier && (
+
+ )}
+
+
+
+ {Object.keys(LIQUIDITY_TIERS).map((tier) => {
+ const { maintenanceMarginFraction, impactNotional, label, initialMarginFraction } =
+ LIQUIDITY_TIERS[tier as unknown as keyof typeof LIQUIDITY_TIERS];
+ return (
+
+
+ {label}
+ {Number(tier) === assetToAdd?.liquidityTier && (
+
+ ✨ {stringGetter({ key: STRING_KEYS.RECOMMENDED })}
+
+ )}
+
+
+ ),
+ },
+ {
+ key: 'mmf',
+ label: 'MMF',
+ tooltip: 'maintenance-margin-fraction',
+ value: (
+
+ ),
+ },
+ {
+ key: 'impact-notional',
+ label: stringGetter({ key: STRING_KEYS.IMPACT_NOTIONAL }),
+ value: ,
+ },
+ ]}
+ />
+
+ );
+ })}
+
+
+ >
+ )}
+ {alertMessage && (
+ {alertMessage.message}
+ )}
+
+ ),
+ },
+ assetToAdd && {
+ key: 'message-details',
+ label: stringGetter({ key: STRING_KEYS.MESSAGE_DETAILS }),
+ value: (
+
+ dispatch(
+ openDialog({
+ type: DialogTypes.NewMarketMessageDetails,
+ dialogProps: { assetData: assetToAdd, clobPairId, liquidityTier },
+ })
+ )
+ }
+ >
+ {stringGetter({ key: STRING_KEYS.VIEW_DETAILS })} →
+
+ ),
+ },
+ {
+ key: 'dydx-required',
+ label: (
+
+ {stringGetter({ key: STRING_KEYS.REQUIRED_BALANCE })}{' '}
+ {chainTokenLabel}
+
+ ),
+ value: (
+
+ {stringGetter({
+ key: STRING_KEYS.OR_MORE,
+ params: {
+ NUMBER: (
+
+ ),
+ },
+ })}
+
+ ),
+ },
+ ].filter(isTruthy)}
+ />
+ }
+ >
+ {isDisconnected ? (
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+const Styled: Record