chore: giant typing pr

src/clients/metadataService.ts

@@ -6,6 +6,7 @@ import {
   MetadataServicePricesResponse,
 } from '@/constants/assetMetadata';
 
+import { MapOf } from '@/lib/objectHelpers';
 import { log } from '@/lib/telemetry';
 
 /**
@@ -37,7 +38,7 @@ class MetadataServiceClient {
     return fetch(`${this.host}/${endpoint}`).then((res) => res.json());
   }
 
-  async getMarketmap(): Promise<Record<string, string>> {
+  async getMarketmap(): Promise<MapOf<string>> {
     return this._get(MetadataServicePath.MARKET_MAP);
   }
 

src/components/BackButton.tsx

@@ -18,7 +18,7 @@ export const BackButton = ({
     const navigation = globalThis.navigation;
 
     if (!navigation) {
-      globalThis.history?.back();
+      globalThis.history.back();
       // @ts-ignore
     } else if (navigation.canGoBack) {
       navigation.back();

src/components/Button.tsx

@@ -6,6 +6,8 @@
 
 import { LoadingDots } from '@/components/Loading/LoadingDots';
 
+import { MapOf } from '@/lib/objectHelpers';
+
 import { BaseButton, BaseButtonProps } from './BaseButton';
 
 export type ButtonStateConfig = {
@@ -27,7 +29,7 @@
 
 type StyleProps = {
   action?: ButtonAction;
-  state: Record<string, boolean | undefined>;
+  state: MapOf<boolean>;
   className?: string;
 };
 
@@ -50,7 +52,7 @@
     },
     ref
   ) => {
-    const state: Record<string, boolean | undefined> =
+    const state: MapOf<boolean> =
       typeof stateConfig === 'string'
         ? { [stateConfig]: true }
         : {
@@ -165,7 +167,7 @@
   ${({ action }) => action && buttonActionVariants[action]}
 
   ${({ action, state }) =>
     state &&
     css`
       // Ordered from lowest to highest priority (ie. Disabled should overwrite Active and Loading states)
       ${state[ButtonState.Loading] && buttonStateVariants(action)[ButtonState.Loading]}

src/components/Details.tsx

@@ -12,11 +12,13 @@
 import { WithSeparators } from '@/components/Separator';
 import { WithTooltip } from '@/components/WithTooltip';
 
+import { MapOf } from '@/lib/objectHelpers';
+
 export type DetailsItem = {
   // eslint-disable-next-line react/no-unused-prop-types
   key: string;
   tooltip?: TooltipStringKeys;
-  tooltipParams?: Record<string, string>;
+  tooltipParams?: MapOf<string>;
   label: string | JSX.Element;
   value?: Nullable<string> | JSX.Element | undefined;
   // eslint-disable-next-line react/no-unused-prop-types
@@ -210,7 +212,7 @@
     justify-items: start;
     gap: 0.375rem;
   `,
-} satisfies Record<string, ReturnType<typeof css>>;
+} satisfies MapOf<ReturnType<typeof css>>;
 const $Details = styled.dl<{
   layout: 'column' | 'row' | 'rowColumns' | 'grid' | 'stackColumn';
   withSeparators: boolean;
@@ -221,7 +223,7 @@
   --details-grid-numColumns: 2;
   --details-item-vertical-padding: ;
 
   ${({ layout }) => layout && detailsLayoutVariants[layout]}
 `;
 
 const $Item = styled.div<{
@@ -229,7 +231,7 @@
   justifyItems?: 'start' | 'end';
   withOverflow?: boolean;
 }>`
   ${({ layout }) => layout && itemLayoutVariants[layout]}
 
   ${({ justifyItems }) =>
     justifyItems === 'end' &&
@@ -241,7 +243,7 @@
     `}
 
   ${({ layout, withOverflow }) =>
     layout &&
     withOverflow &&
     {
       column: css`

src/components/DropdownMenu.tsx

@@ -79,7 +79,7 @@ export const DropdownMenu = forwardRefFn(
                 <$Item
                   disabled={!item.onSelect}
                   $highlightColor={item.highlightColor}
-                  onSelect={item?.onSelect}
+                  onSelect={item.onSelect}
                 >
                   {item.icon}
                   {item.label}

src/components/FormInput.tsx

@@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
     <$FormInputContainer className={className} isValidationAttached={validationConfig?.attached}>
       <$InputContainer hasLabel={!!label} hasSlotRight={!!slotRight}>
         {label ? (
-          <$WithLabel label={label} inputID={id} disabled={otherProps?.disabled}>
+          <$WithLabel label={label} inputID={id} disabled={otherProps.disabled}>
             <Input ref={ref} id={id} {...otherProps} />
           </$WithLabel>
         ) : (

src/components/Input.tsx

@@ -175,7 +175,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 ? undefined
                 : Number(newFormattedValue.replace(',', '.'));
 
-              onInput?.({ value: newValue, floatValue, formattedValue: newFormattedValue, ...e });
+              onInput({ value: newValue, floatValue, formattedValue: newFormattedValue, ...e });
             }}
             // Native
             disabled={disabled}

src/components/NavigationMenu.tsx

@@ -148,9 +148,9 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
           <$List
             data-orientation={depth > 0 ? 'menu' : orientation === 'vertical' ? 'vertical' : 'menu'}
           >
-            {item?.subitems?.map((subitem) => (
+            {item.subitems?.map((subitem) => (
               <$ListItem key={subitem.value} value={subitem.value} data-item={subitem.value}>
-                {subitem?.subitems ? (
+                {subitem.subitems ? (
                   renderSubitems({ item: subitem, depth: depth + 1 })
                 ) : (
                   <$NavItem onSelect={onSelectItem} orientation={itemOrientation} {...subitem} />

src/components/Table.tsx

@@ -34,6 +34,7 @@ import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { MustBigNumber } from '@/lib/numbers';
+import { MapOf } from '@/lib/objectHelpers';
 import { testFlags } from '@/lib/testFlags';
 
 import { Icon, IconName } from './Icon';
@@ -99,7 +100,7 @@ export type TableElementProps<TableRowData extends BaseTableRowData | CustomRowC
   columns: ColumnDef<TableRowData>[];
   data: Array<TableRowData | CustomRowConfig>;
   getRowKey: (rowData: TableRowData, rowIndex?: number) => Key;
-  getRowAttributes?: (rowData: TableRowData, rowIndex?: number) => Record<string, any>;
+  getRowAttributes?: (rowData: TableRowData, rowIndex?: number) => MapOf<any>;
   defaultSortDescriptor?: SortDescriptor;
   selectionMode?: 'multiple' | 'single';
   selectionBehavior?: 'replace' | 'toggle';
@@ -215,10 +216,10 @@ export const Table = <TableRowData extends BaseTableRowData | CustomRowConfig>({
 
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>(defaultSortDescriptor ?? {});
   const items = useMemo(() => {
-    return sortDescriptor?.column
-      ? [...data].sort((a, b) => sortFn(a, b, sortDescriptor?.column, sortDescriptor?.direction))
+    return sortDescriptor.column
+      ? [...data].sort((a, b) => sortFn(a, b, sortDescriptor.column, sortDescriptor.direction))
       : data;
-  }, [data, sortDescriptor?.column, sortDescriptor?.direction, sortFn]);
+  }, [data, sortDescriptor.column, sortDescriptor.direction, sortFn]);
 
   const isEmpty = data.length === 0;
   const shouldPaginate = paginationBehavior === 'paginate' && data.length > Math.min(...PAGE_SIZES);
@@ -299,7 +300,7 @@ export const Table = <TableRowData extends BaseTableRowData | CustomRowConfig>({
                 {(columnKey) => (
                   <Cell key={`${internalGetRowKey(item)}-${columnKey}`}>
                     {isTableRowData(item) &&
-                      columns.find((column) => column.columnKey === columnKey)?.renderCell?.(item)}
+                      columns.find((column) => column.columnKey === columnKey)?.renderCell(item)}
                   </Cell>
                 )}
               </Row>
@@ -325,7 +326,7 @@ const TableRoot = <TableRowData extends BaseTableRowData | CustomRowConfig>(prop
   getRowAttributes?: (
     rowData: TableRowData,
     rowIndex?: number
-  ) => Record<string, string | number | Record<string, string | number>>;
+  ) => MapOf<string | number | MapOf<string | number>>;
   onRowAction?: (key: Key) => void;
   children: TableStateProps<TableRowData>['children'];
   numColumns: number;
@@ -425,7 +426,7 @@ const TableRoot = <TableRowData extends BaseTableRowData | CustomRowConfig>(prop
         withOuterBorder={withOuterBorder}
       >
         {[...collection.body.childNodes].map((row) =>
-          (row.value as CustomRowConfig)?.slotCustomRow ? (
+          (row.value as CustomRowConfig).slotCustomRow ? (
             (row.value as CustomRowConfig).slotCustomRow({
               item: row,
               state,
@@ -452,7 +453,7 @@ const TableRoot = <TableRowData extends BaseTableRowData | CustomRowConfig>(prop
                     state={state}
                     isActionable={
                       ((cell as GridNode<TableRowData>).column?.value as ColumnDef<TableRowData>)
-                        ?.isActionable
+                        .isActionable
                     }
                   />
                 )
@@ -568,7 +569,7 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
       // data-focused={isFocusVisible || undefined}
       style={{
         width: column.props?.width,
-        textAlign: (column?.value as any)?.align,
+        textAlign: (column.value as any)?.align,
       }}
       ref={ref}
       allowSorting={column.props?.allowsSorting ?? true}
@@ -580,17 +581,17 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
           (uiRefresh ? (
             <SortIcon
               sortDirection={
-                state.sortDescriptor?.column === column.key
-                  ? state.sortDescriptor?.direction ?? 'none'
+                state.sortDescriptor.column === column.key
+                  ? state.sortDescriptor.direction ?? 'none'
                   : 'none'
               }
             />
           ) : (
             <$SortArrow
               aria-hidden="true"
               sortDirection={
-                state.sortDescriptor?.column === column.key
-                  ? state.sortDescriptor?.direction ?? 'none'
+                state.sortDescriptor.column === column.key
+                  ? state.sortDescriptor.direction ?? 'none'
                   : 'none'
               }
             >

src/components/TimeoutButton.tsx

@@ -43,8 +43,8 @@ export const TimeoutButton = ({
       state={{
         isDisabled:
           secondsLeft > 0 ||
-          otherProps?.state === ButtonState.Disabled ||
-          (otherProps?.state as ButtonStateConfig)?.isDisabled,
+          otherProps.state === ButtonState.Disabled ||
+          (otherProps.state as ButtonStateConfig).isDisabled,
       }}
     >
       {secondsLeft

src/components/ValidatorIcons.tsx

@@ -21,7 +21,7 @@ export const ValidatorIcons = ({
   const validatorNames = validators.map((validator) => validator.description?.moniker).join(', ');
   return (
     <$ValidatorIcons className={className}>
-      {validators?.length <= numToShow
+      {validators.length <= numToShow
         ? validators.map((validator) => (
             <$ValidatorIcon
               key={validator.description?.moniker}

src/components/WithHovercard.tsx

@@ -10,9 +10,11 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { popoverMixins } from '@/styles/popoverMixins';
 
+import { MapOf } from '@/lib/objectHelpers';
+
 type ElementProps = {
   hovercard?: TooltipStringKeys;
-  stringParams?: Record<string, string | undefined>;
+  stringParams?: MapOf<string>;
   slotTrigger?: ReactNode;
   slotButton?: ReactNode;
 };

src/components/WithTooltip.tsx

@@ -16,11 +16,13 @@ import { popoverMixins } from '@/styles/popoverMixins';
 import { Icon, IconName } from '@/components/Icon';
 import { Link } from '@/components/Link';
 
+import { MapOf } from '@/lib/objectHelpers';
+
 type ElementProps = {
   tooltip?: TooltipStringKeys;
   tooltipString?: string;
   tooltipStringTitle?: string;
-  stringParams?: Record<string, string | undefined>;
+  stringParams?: MapOf<string>;
   withIcon?: boolean;
   children?: ReactNode;
   slotTooltip?: ReactNode;

src/components/visx/TimeSeriesChart.tsx

@@ -139,8 +139,8 @@ export const TimeSeriesChart = <Datum extends {}>({
   // Chart data
   const { xAccessor, yAccessor } = series[0];
 
-  const earliestDatum = data?.[0];
-  const latestDatum = data?.[data.length - 1];
+  const earliestDatum = data[0];
+  const latestDatum = data[data.length - 1];
 
   // Chart state
   const getClampedZoomDomain = useCallback(
@@ -361,8 +361,8 @@ export const TimeSeriesChart = <Datum extends {}>({
                           colorAccessor={
                             childSeries.threshold ? () => 'transparent' : childSeries.colorAccessor
                           }
-                          onPointerMove={childSeries?.onPointerMove}
-                          onPointerOut={childSeries?.onPointerOut}
+                          onPointerMove={childSeries.onPointerMove}
+                          onPointerOut={childSeries.onPointerOut}
                         />
 
                         {(childSeries.glyphSize ?? childSeries.getGlyphSize) && (

src/components/visx/XYChartTooltipWithBounds.tsx

@@ -132,14 +132,14 @@ const TooltipInner = <Datum extends object>({
     onTooltipContext?.(tooltipContext);
   }, [tooltipContext]);
 
-  const tooltipContent = tooltipContext?.tooltipOpen
+  const tooltipContent = tooltipContext.tooltipOpen
     ? renderTooltip({ ...tooltipContext, colorScale })
     : null;
 
-  const showTooltip = tooltipContext?.tooltipOpen && tooltipContent != null;
+  const showTooltip = tooltipContext.tooltipOpen && tooltipContent != null;
 
-  let computedTooltipLeft = tooltipContext?.tooltipLeft ?? 0;
-  let computedTooltipTop = tooltipContext?.tooltipTop ?? 0;
+  let computedTooltipLeft = tooltipContext.tooltipLeft ?? 0;
+  let computedTooltipTop = tooltipContext.tooltipTop ?? 0;
   let crosshairLeft = computedTooltipLeft;
   let crosshairTop = computedTooltipTop;
 
@@ -164,7 +164,7 @@ const TooltipInner = <Datum extends object>({
     [dataRegistry, xScaleBandwidth, yScaleBandwidth, xScale, yScale]
   );
 
-  const nearestDatum = tooltipContext?.tooltipData?.nearestDatum;
+  const nearestDatum = tooltipContext.tooltipData?.nearestDatum;
   const nearestDatumKey = nearestDatum?.key ?? '';
 
   if (showTooltip && nearestDatum) {
@@ -185,7 +185,7 @@ const TooltipInner = <Datum extends object>({
     const size = Number(glyphStyle?.radius ?? 4);
 
     if (showSeriesGlyphs) {
-      Object.values(tooltipContext?.tooltipData?.datumByKey ?? {}).forEach(
+      Object.values(tooltipContext.tooltipData?.datumByKey ?? {}).forEach(
         ({ key, datum, index }) => {
           const color = colorScale?.(key) ?? theme?.htmlLabel?.color ?? '#222';
           const { left, top } = getDatumLeftTop(key, datum);
@@ -213,7 +213,7 @@ const TooltipInner = <Datum extends object>({
         const color =
           (nearestDatumKey && colorScale?.(nearestDatumKey)) ??
           null ??
-          theme?.gridStyles?.stroke ??
+          theme?.gridStyles.stroke ??
           theme?.htmlLabel?.color ??
           '#222';
         glyphProps.push({
@@ -249,7 +249,7 @@ const TooltipInner = <Datum extends object>({
           y1={margin.top}
           y2={margin.top + innerHeight}
           strokeWidth={1.5}
-          stroke={theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? '#222'}
+          stroke={theme?.gridStyles.stroke ?? theme?.htmlLabel?.color ?? '#222'}
           {...verticalCrosshairStyle}
         />
       )}
@@ -261,15 +261,15 @@ const TooltipInner = <Datum extends object>({
           y1={crosshairTop}
           y2={crosshairTop}
           strokeWidth={1.5}
-          stroke={theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? '#222'}
+          stroke={theme?.gridStyles.stroke ?? theme?.htmlLabel?.color ?? '#222'}
           {...horizontalCrosshairStyle}
         />
       )}
 
       {nearestDatum && renderXAxisLabel && (
         <Group left={crosshairLeft} top={margin.top + innerHeight + margin.bottom / 2}>
           <foreignObject style={{ overflow: 'visible' }}>
-            {renderXAxisLabel?.({ ...tooltipContext, colorScale })}
+            {renderXAxisLabel({ ...tooltipContext, colorScale })}
           </foreignObject>
         </Group>
       )}
@@ -281,7 +281,7 @@ const TooltipInner = <Datum extends object>({
           top={crosshairTop}
         >
           <foreignObject style={{ overflow: 'visible' }}>
-            {renderYAxisLabel?.({ ...tooltipContext, colorScale })}
+            {renderYAxisLabel({ ...tooltipContext, colorScale })}
           </foreignObject>
         </Group>
       )}

src/components/visx/getScaleBandwidth.ts

@@ -2,5 +2,5 @@
 import { AxisScale } from '@visx/axis';
 
 export function getScaleBandwidth<Scale extends AxisScale>(s?: Scale) {
-  return s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;
+  return s && 'bandwidth' in s ? s.bandwidth() ?? 0 : 0;
 }

src/constants/analytics.ts

@@ -4,6 +4,8 @@ import { RecordOf, TagsOf, UnionOf, ofType, unionize } from 'unionize';
 import { StatsigFlags } from '@/constants/statsig';
 import { ConnectorType, WalletType } from '@/constants/wallets';
 
+import { MapOf } from '@/lib/objectHelpers';
+
 import type { AbacusApiStatus, HumanReadablePlaceOrderPayload } from './abacus';
 import type { OnboardingState, OnboardingSteps } from './account';
 import { DialogTypesTypes } from './dialogs';
@@ -231,7 +233,7 @@ export const AnalyticsEvents = unionize(
     TransferNotification: ofType<{
       type: TransferNotificationTypes | undefined;
       toAmount: number | undefined;
-      timeSpent: Record<string, number> | number | undefined;
+      timeSpent: MapOf<number> | number | undefined;
       txHash: string;
       status: 'new' | 'success' | 'error';
       triggeredAt: number | undefined;